业务看板对接

src/api/home1.js

@@ -0,0 +1,46 @@
+import request from '@/utils/httpRequest'
+
+// 设备报维修记录
+export function getEquipmentRepair (params) {
+  return request({
+    url: request.adornUrl('/biz-service/board/equipmentRepair'),
+    method: 'get',
+    params
+  })
+}
+
+// 报工统计
+export function getTaskCount (params) {
+  return request({
+    url: request.adornUrl('/biz-service/board/task/count'),
+    method: 'get',
+    params
+  })
+}
+
+// 设备运行效率统计
+export function getEquipmentUtilizationRate (params) {
+  return request({
+    url: request.adornUrl('/biz-service/board/equipmentUtilizationRate'),
+    method: 'get',
+    params
+  })
+}
+
+// 实时报工列表
+export function getSubmittedRecord (params) {
+  return request({
+    url: request.adornUrl('/biz-service/board/submittedRecord'),
+    method: 'get',
+    params
+  })
+}
+
+// 设备报警记录
+export function getEquipmentAlarm (params) {
+  return request({
+    url: request.adornUrl('/biz-service/board/equipmentAlarm'),
+    method: 'get',
+    params
+  })
+}

src/views/common/home.vue

@@ -174,7 +174,7 @@ export default {
     getHonorList () {
       getHonorList().then(({data}) => {
         if (data && data.code === '200') {
-          if (data && data.code === '200') {
+          if (data.data != null) {
             this.honorList = data.data.map(item => {
               return { url: this.filePrefix + item.attach.url, content: item.fileDescribe }
             })

src/views/common/home1.vue

@@ -17,13 +17,14 @@
             <div class="head2">设备刷新时间</div>
             <div class="head3">运行状态</div>
           </div>
-          <div v-for="i in 8" :class="{'msg-item': true, 'active': i == 2}">
-            <div class="item-1">设备一</div>
-            <div class="item-2">2024-10-12 16:30:22</div>
+          <div v-for="item in equipmentRepairList" class="msg-item">
+            <div class="item-1">{{item.equipmentName}}</div>
+            <div class="item-2">{{item.createTime}}</div>
             <div class="item-3">
-              <span v-if="i==1" class="t-r">故障中</span>
+              <span :class="{'t-r': item.state == 1, 't-g':item.state == 2}">{{equipmentState[item.state]}}</span>
+              <!-- <span v-if="i==1" class="t-r">故障中</span>
               <span v-if="i==2" class="t-g">已处理</span>
-              <span v-if="i!=1&& i!=2" class="t-b">正常</span>
+              <span v-if="i!=1&& i!=2" class="t-b">正常</span> -->
             </div>
           </div>
         </div>
@@ -130,12 +131,12 @@
             <div class="table-h-1">报工工时</div>
             <div class="table-h-1">部门</div>
           </div>
-          <div v-for="i in 8" :class="{'table-c-item': true, 'active': i ==3}">
+          <div v-for="(item, i) in taskCountList" :class="{'table-c-item': true, 'active': i ==3}">
             <div class="c-item">{{ i }}</div>
-            <div class="c-item">百邦慧</div>
-            <div class="c-item">265</div>
-            <div class="c-item">15h</div>
-            <div class="c-item">管理部门</div>
+            <div class="c-item">{{item.userName}}</div>
+            <div class="c-item">{{item.taskNum}}</div>
+            <div class="c-item">{{item.taskTime}}h</div>
+            <div class="c-item">{{item.orgName}}</div>
           </div>
         </div>
       </div>
@@ -150,13 +151,13 @@
               <div class="tops-title">设备稼动率统计(OEE)<span>3100</span></div>
             </div>
             <div class="list">
-              <div v-for="i in 5" class="list-1">
+              <div v-for="(item, i) in utilizationRateList" class="list-1">
                 <div class="list-msg">
-                  <div class="msg-name">设备1</div>
-                  <div class="msg-value"><span>80%</span> / 100%</div>
+                  <div class="msg-name">{{item.name}}</div>
+                  <div class="msg-value"><span>{{item.utilizationRate}}%</span> / 100%</div>
                 </div>
                 <div class="list-line">
-                  <div :class="{'line-color': true, 'c-b': i % 2 == 1, 'c-g': i % 2 == 0}">
+                  <div :class="{'line-color': true, 'c-b': item.utilizationRate >= 65, 'c-g': item.utilizationRate < 65}" :style="`width:${item.utilizationRate}%`">
                     <div class="line-icon"/>
                   </div>
                 </div>
@@ -169,14 +170,15 @@
               <div class="tops-title">设备报警记录<span>120</span></div>
             </div>
             <div class="list">
-              <div v-for="i in 5" class="list-1">
+              <div v-for="(item, i) in equipmentAlarmList" class="list-1">
                 <div class="list-msg">
-                  <div class="msg-name">设备1</div>
-                  <div class="msg-value"><span :class="{'t-r': i % 2 == 0, 't-o': i % 2 == 1}">80%</span> / 100%</div>
+                  <div class="msg-name">{{item.equipmentName}}</div>
+                  <!-- <div class="msg-value"><span :class="{'t-o': item.percent < 70, 't-r': item.percent >= 70}">{{item.percent}}%</span> / 100%</div> -->
                 </div>
-                <div class="list-line">
-                  <div :class="{'line-color': true, 'c-o': i % 2 == 1, 'c-r': i % 2 == 0}">
-                    <div class="line-icon"/>
+                <div class="list-line-2">
+                  <div :class="{'line-color': true, 'c-o': item.percent < 70, 'c-r': item.percent >= 70}">
+                    <!-- <div class="line-icon"/> -->
+                    <div class="msg">几回是澡晃蝇档涸虽对讲机几回是澡晃蝇档涸虽对讲机几回是澡晃蝇档涸虽对讲机</div>
                   </div>
                 </div>
               </div>
@@ -186,22 +188,22 @@
       </div>
       <div class="center-5">
         <div class="item-title titel-1">
-          <div class="item-title-name">时时报工列表</div>
+          <div class="item-title-name">实时报工列表</div>
         </div>
         <div class="msg-5">
           <div class="table-h">
             <div class="h-1">序号</div>
             <div class="h-1">工序</div>
             <div class="h-1">物料名字</div>
-            <div class="h-1">物料名字</div>
+            <div class="h-1">完成时间</div>
             <div class="h-1">操作人</div>
           </div>
-          <div v-for="i in 10" :class="{'table-line': true, 'acitve': i == 3}">
-            <div class="h-1">NO.0{{ i }}</div>
-            <div class="h-1">张三</div>
-            <div class="h-1">张三</div>
-            <div class="h-1">1983-02-15</div>
-            <div class="h-1">姬馥爱</div>
+          <div v-for="(item,i) in submittedRecordList" :class="{'table-line': true, 'acitve': i == 300}">
+            <div class="h-1">NO.{{ (i + 1).toString().padStart(2,'0') }}</div>
+            <div class="h-1">{{item.nodeName}}</div>
+            <div class="h-1">{{item.taskName}}</div>
+            <div class="h-1">{{item.endTime}}</div>
+            <div class="h-1">{{item.operatorName}}</div>
           </div>
         </div>
       </div>
@@ -211,12 +213,23 @@
 
 <script>
 import {getOrgName} from '@/api/org'
+import {getEquipmentRepair, getTaskCount, getEquipmentUtilizationRate, getSubmittedRecord, getEquipmentAlarm} from '@/api/home1'
 export default {
   data () {
     return {
       orgName: '',
       toScale: 1.0,
-      show: true
+      show: true,
+      equipmentState: {
+        '1': '待维修',
+        '2': '已维修'
+      },
+      percent: 50,
+      equipmentRepairList: [], // 设备报维修记录
+      taskCountList: [], // 报工统计
+      utilizationRateList: [], // 设备运行效率统计
+      submittedRecordList: [], // 实时报工列表
+      equipmentAlarmList: [] // 设备报警记录
     }
   },
   created () {
@@ -243,6 +256,17 @@ export default {
       await getOrgName().then(({data}) => {
         this.orgName = data.data
       })
+
+      // 设备报维修记录
+      this.getEquipmentRepair()
+      // 报工统计
+      this.getTaskCount()
+      // 设备运行效率统计
+      this.getEquipmentUtilizationRate()
+      // 实时报工列表
+      this.getSubmittedRecord()
+      // 设备报警记录
+      this.getEquipmentAlarm()
     },
     getFullscreenElement () {
       return (
@@ -267,6 +291,97 @@ export default {
     },
     onChange (num) {
       this.$emit('change-nav', num)
+    },
+    // 设备报维修记录
+    getEquipmentRepair () {
+      let param = {current: 1, size: 8}
+      getEquipmentRepair(param).then(({data}) => {
+        if (data && data.code === '200') {
+          if (data.data != null && data.data.records != null) {
+            this.equipmentRepairList = data.data.records.map(item => {
+              return {
+                equipmentName: item.equipmentName == null ? '未知设备' : item.equipmentName,
+                state: item.state,
+                createTime: item.createTime
+              }
+            })
+          }
+        }
+      })
+    },
+    // 报工统计
+    getTaskCount () {
+      let param = {current: 1, size: 10, queryType: 2}
+      getTaskCount(param).then(({data}) => {
+        if (data && data.code === '200') {
+          if (data.data != null && data.data.records != null) {
+            this.taskCountList = data.data.records.map(item => {
+              return {
+                userName: item.userName,
+                taskNum: item.taskNum,
+                taskTime: item.taskTime,
+                orgName: item.orgName
+              }
+            })
+          }
+        }
+      })
+    },
+    // 设备运行效率统计
+    getEquipmentUtilizationRate () {
+      let param = {current: 1, size: 5}
+      getEquipmentUtilizationRate(param).then(({data}) => {
+        if (data && data.code === '200') {
+          if (data.data != null && data.data.records != null) {
+            this.utilizationRateList = data.data.records.map(item => {
+              return {
+                id: item.id,
+                name: item.name,
+                utilizationRate: item.utilizationRate
+              }
+            })
+          }
+        }
+      })
+    },
+    // 实时报工列表
+    getSubmittedRecord () {
+      let param = {current: 1, size: 10}
+      getSubmittedRecord(param).then(({data}) => {
+        if (data && data.code === '200') {
+          if (data.data != null && data.data.records != null) {
+            this.submittedRecordList = data.data.records.map(item => {
+              return {
+                taskName: item.taskName,
+                operatorName: item.operatorName,
+                operationRecords: item.operationRecords,
+                nodeName: item.nodeName,
+                endTime: item.endTime
+              }
+            })
+          }
+        }
+      })
+    },
+    // 设备报警记录
+    getEquipmentAlarm () {
+      let param = {current: 1, size: 5}
+      getEquipmentAlarm(param).then(({data}) => {
+        if (data && data.code === '200') {
+          if (data.data != null && data.data.records != null) {
+            this.equipmentAlarmList = data.data.records.map(item => {
+              return {...item,
+                percent: 50
+              }
+            })
+            this.equipmentAlarmList.push({equipmentName: '设备一', percent: 73})
+            this.equipmentAlarmList.push({equipmentName: '设备二', percent: 63})
+            this.equipmentAlarmList.push({equipmentName: '设备三', percent: 33})
+            this.equipmentAlarmList.push({equipmentName: '设备四', percent: 63})
+            this.equipmentAlarmList.push({equipmentName: '设备五', percent: 33})
+          }
+        }
+      })
     }
   }
 }
@@ -778,6 +893,39 @@ export default {
                   background: linear-gradient( -90deg, #FF0000 0%, rgba(56,139,252,0) 100%);
                 }
               }
+              .list-line-2{
+                position: relative;
+                background: #FFFFFF;
+                height: 22px;
+                margin: 6px 0;
+                border-radius: 3px;
+                .line-color{
+                  position: absolute;
+                  left: 0;
+                  height: 22px;
+                  width: 100%;
+                  display: flex;
+                  // justify-content: end;
+                  align-items: center;
+                  border-radius: 3px;
+                  .line-icon{
+                    background: url(../../assets/home/r_w.png) no-repeat;
+                    background-size: 100% 100%;
+                    width: 28px;
+                    height: 28px;
+                    margin-right: -14px;
+                  }
+                  .msg{
+                    font-size: 14px;
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 500;
+                    font-style: normal;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  }
+                }
+              }
             } 
           }
         }