From 11e15a27af1a33d60f82461495202df973eafdbb Mon Sep 17 00:00:00 2001
From: caill <815519168@qq.com>
Date: Sun, 23 Apr 2023 16:57:13 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=9B=91=E6=8E=A7=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/js/getData2.js   | 429 ++++++++++++++++++++++++++++++++++++
 src/pages/DeviceMonitor.vue |  87 ++++----
 2 files changed, 466 insertions(+), 50 deletions(-)

diff --git a/src/assets/js/getData2.js b/src/assets/js/getData2.js
index 360b707..c212554 100644
--- a/src/assets/js/getData2.js
+++ b/src/assets/js/getData2.js
@@ -3,6 +3,435 @@ import {post} from './http.js'
 // 设备监控
 export const deviceMonitor = () => post('api/cockpit/deviceMonitor', {
 })
+// export const deviceMonitor = () => {
+//   let res = {
+//     'code': 200,
+//     'desc': '操作成功',
+//     'result': [
+//       {
+//         'device_code': 'HLJ05',
+//         'device_name': '混料机5',
+//         'device_model': '1',
+//         'device_status': '1',
+//         'device_status_name': null,
+//         'material_name': 'ZLMCZ1001C111122GM001BD20-8',
+//         'work_time': '0',
+//         'real_qty': '10',
+//         'realproducestart_date': '',
+//         'vehicle_qty': '10',
+//         'vehicle_type': '100',
+//         'vehicle_max_qty': '100',
+//         'device_url': 'HLJ'
+//       },
+//       {
+//         'device_code': 'HLJ06',
+//         'device_name': '混料机6',
+//         'device_model': '1',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': null,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'HLJ'
+//       },
+//       {
+//         'device_code': 'HLJ07',
+//         'device_name': '混料机7',
+//         'device_model': '1',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': null,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'HLJ'
+//       },
+//       {
+//         'device_code': 'HLJ08',
+//         'device_name': '混料机8',
+//         'device_model': '1',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': null,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'HLJ'
+//       },
+//       {
+//         'device_code': 'HLJ09',
+//         'device_name': '混料机9',
+//         'device_model': '1',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': null,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'HLJ'
+//       },
+//       {
+//         'device_code': 'HLJ10',
+//         'device_name': '混料机10',
+//         'device_model': '1',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': null,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'HLJ'
+//       },
+//       {
+//         'device_code': 'HLJ11',
+//         'device_name': '混料机11',
+//         'device_model': '1',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': null,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'HLJ'
+//       },
+//       {
+//         'device_code': 'HLJ12',
+//         'device_name': '混料机12',
+//         'device_model': '1',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': null,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'HLJ'
+//       },
+//       {
+//         'device_code': 'HLJ13',
+//         'device_name': '混料机13',
+//         'device_model': '1',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': null,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'HLJ'
+//       },
+//       {
+//         'device_code': 'HLJ14',
+//         'device_name': '混料机14',
+//         'device_model': '1',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': null,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'HLJ'
+//       },
+//       {
+//         'device_code': 'HLJ15',
+//         'device_name': '混料机15',
+//         'device_model': '1',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': null,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'HLJ'
+//       },
+//       {
+//         'device_code': 'HLJ16',
+//         'device_name': '混料机16',
+//         'device_model': '1',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': null,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'HLJ'
+//       },
+//       {
+//         'device_code': 'HLJ01',
+//         'device_name': '混料机1',
+//         'device_model': '2',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': null,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'HLJ_S'
+//       },
+//       {
+//         'device_code': 'HLJ02',
+//         'device_name': '混料机2',
+//         'device_model': '2',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': null,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'HLJ_S'
+//       },
+//       {
+//         'device_code': 'HLJ03',
+//         'device_name': '混料机3',
+//         'device_model': '2',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': null,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'HLJ_S'
+//       },
+//       {
+//         'device_code': 'HLJ04',
+//         'device_name': '混料机4',
+//         'device_model': '2',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': null,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'HLJ_S'
+//       },
+//       {
+//         'device_code': 'YJ03',
+//         'device_name': '压机3',
+//         'device_model': '3',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '52',
+//         'real_qty': 0,
+//         'realproducestart_date': '2023-04-21 10:10:40',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'YZJ'
+//       },
+//       {
+//         'device_code': 'YJ04',
+//         'device_name': '压机4',
+//         'device_model': '3',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '75',
+//         'real_qty': 0,
+//         'realproducestart_date': '2023-04-20 10:43:55',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'YZJ'
+//       },
+//       {
+//         'device_code': 'YJ05',
+//         'device_name': '压机5',
+//         'device_model': '3',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': null,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'YZJ'
+//       },
+//       {
+//         'device_code': 'YJ06',
+//         'device_name': '压机6',
+//         'device_model': '3',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': null,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'YZJ'
+//       },
+//       {
+//         'device_code': 'YJ07',
+//         'device_name': '压机7',
+//         'device_model': '3',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '26',
+//         'real_qty': 0,
+//         'realproducestart_date': '2023-04-22 11:29:10',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'YZJ'
+//       },
+//       {
+//         'device_code': 'YJ08',
+//         'device_name': '压机8',
+//         'device_model': '3',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': null,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'YZJ'
+//       },
+//       {
+//         'device_code': 'YJ09',
+//         'device_name': '压机9',
+//         'device_model': '3',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': null,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'YZJ'
+//       },
+//       {
+//         'device_code': 'YJ10',
+//         'device_name': '压机10',
+//         'device_model': '3',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': null,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'YZJ'
+//       },
+//       {
+//         'device_code': 'YJ01',
+//         'device_name': '压机1',
+//         'device_model': '4',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '144',
+//         'real_qty': 0,
+//         'realproducestart_date': '2023-04-17 14:18:58',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'YZJ_S'
+//       },
+//       {
+//         'device_code': 'YJ02',
+//         'device_name': '压机2',
+//         'device_model': '4',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': 0,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'YZJ_S'
+//       },
+//       {
+//         'device_code': 'YJ02',
+//         'device_name': '压机2',
+//         'device_model': '4',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '120',
+//         'real_qty': 0,
+//         'realproducestart_date': '2023-04-18 13:34:36',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'YZJ_S'
+//       },
+//       {
+//         'device_code': 'FJCDJXS01',
+//         'device_name': '分拣拆垛机械手',
+//         'device_model': '5',
+//         'device_status': null,
+//         'device_status_name': null,
+//         'material_name': '-',
+//         'work_time': '0',
+//         'real_qty': null,
+//         'realproducestart_date': '',
+//         'vehicle_qty': null,
+//         'vehicle_type': null,
+//         'vehicle_max_qty': null,
+//         'device_url': 'FJJXS'
+//       }
+//     ]
+//   }
+//   return res
+// }
 export const findDeviceById = (id) => post('api/cockpit/findDeviceById', {
   id: id
 })
diff --git a/src/pages/DeviceMonitor.vue b/src/pages/DeviceMonitor.vue
index cd7e6f3..7db930c 100644
--- a/src/pages/DeviceMonitor.vue
+++ b/src/pages/DeviceMonitor.vue
@@ -12,24 +12,34 @@
               <div class="fl device_name_tag" :class="['yellow', 'green', 'orange', 'gray'][Number(e.device_status)]"></div>
               <div class="fl device_name_text">{{e.device_name}}</div>
             </div>
-            <div class="info_block clearfix">
-              <div class="fl info_table_block">
-                <div v-if="e.material_name !== null && e.material_name !== undefined" class="info_table info_table_1"><p>当前生产：</p></div>
-                <div v-if="e.work_time !== null && e.work_time !== undefined" class="info_table"><p>已工作：</p></div>
-                <div v-if="e.real_qty !== null && e.real_qty !== undefined" class="info_table"><p>已生产：</p></div>
-                <div v-if="e.vehicle_qty !== null && e.vehicle_qty !== undefined" class="info_table"><p>当前窑车数：</p></div>
-                <div v-if="e.vehicle_max_qty !== null && e.vehicle_max_qty !== undefined" class="info_table"><p>容  量：</p></div>
-                <div v-if="e.vehicle_type !== null && e.vehicle_type !== undefined" class="info_table"><p>载具类型：</p></div>
-                <div v-if="e.device_status_name !== null && e.device_status_name !== undefined" class="info_table"><p>当前状态：</p></div>
+            <div class="info_block">
+              <div v-if="e.material_name !== null && e.material_name !== undefined" class="info_table_block">
+                <div class="info_table">当前生产</div>
+                <div class="info_data">{{e.material_name}}</div>
               </div>
-              <div class="fr info_data_block">
-                <div v-if="e.material_name !== null && e.material_name !== undefined" class="info_data info_data_1"><p>{{e.material_name}}</p></div>
-                <div v-if="e.work_time !== null && e.work_time !== undefined" class="info_data"><p>{{e.work_time}}小时</p></div>
-                <div v-if="e.real_qty !== null && e.real_qty !== undefined" class="info_data"><p>{{e.real_qty}}KG</p></div>
-                <div v-if="e.vehicle_qty !== null && e.vehicle_qty !== undefined" class="info_data"><p>{{e.vehicle_qty}}车</p></div>
-                <div v-if="e.vehicle_max_qty !== null && e.vehicle_max_qty !== undefined" class="info_data"><p>{{e.vehicle_max_qty}}车</p></div>
-                <div v-if="e.vehicle_type !== null && e.vehicle_type !== undefined" class="info_data"><p>{{e.vehicle_type}}</p></div>
-                <div v-if="e.device_status_name !== null && e.device_status_name !== undefined" class="info_data"><p>{{e.device_status_name}}</p></div>
+              <div v-if="e.work_time !== null && e.work_time !== undefined" class="info_table_block">
+                <div class="info_table">已工作</div>
+                <div class="info_data">{{e.work_time}}小时</div>
+              </div>
+              <div v-if="e.real_qty !== null && e.real_qty !== undefined" class="info_table_block">
+                <div class="info_table">已生产</div>
+                <div class="info_data">{{e.real_qty}}KG</div>
+              </div>
+              <div v-if="e.vehicle_qty !== null && e.vehicle_qty !== undefined" class="info_table_block">
+                <div class="info_table">当前窑车数</div>
+                <div class="info_data">{{e.vehicle_qty}}车</div>
+              </div>
+              <div v-if="e.vehicle_max_qty !== null && e.vehicle_max_qty !== undefined" class="info_table_block">
+                <div class="info_table">容量</div>
+                <div class="info_data">{{e.vehicle_max_qty}}车</div>
+              </div>
+              <div v-if="e.vehicle_type !== null && e.vehicle_type !== undefined" class="info_table_block">
+                <div class="info_table">载具类型</div>
+                <div class="info_data">{{e.vehicle_type}}</div>
+              </div>
+              <div class="info_table_block">
+                <div v-if="e.device_status_name !== null && e.device_status_name !== undefined" class="info_table">当前状态</div>
+                <div class="info_data">{{e.device_status_name}}</div>
               </div>
             </div>
           </div>
@@ -468,6 +478,7 @@ export default {
     margin-bottom 0
 .item_inner
   _wh(100%,100%)
+  overflow hidden
 .item_img
   _wh(100%,91px)
   margin-bottom 5px
@@ -486,43 +497,19 @@ export default {
   width 100%
   padding 4px 0
 .info_table_block
-  width 30%
-.info_table_block_1
-  width 50%
-.info_data_block
-  width 70%
-.info_data_block_1
-  width 50%
+  width 100%
+  _fj(row,,flex-start)
 .info_table
-  width 100%
-  height 18px
+  width 80px
+  max-height 36px
   overflow hidden
-  p
-    display inline-block
-    width 100%
-    height 18px
-    _font(12px,18px,,100,left)
-    transform scale(0.78)
-    transform-origin left center
-    letter-spacing -1px
-    white-space nowrap
-.info_table_1
-  height 36px
-.info_table_1
-  height 36px
+  _font(12px,18px,,100,left)
 .info_data
-  width 100%
-  height 18px
+  width calc(100% - 80px)
+  max-height 36px
   overflow hidden
-  p
-    display inline-block
-    width 100%
-    height 18px
-    _font(12px,18px,,200,right)
-    // transform scale(0.9)
-    word-break break-all
-.info_data_1
-  height 36px
+  _font(12px,18px,,200,right)
+  word-break break-all
 .popover_block
   position absolute
   left 0