对接接口

src/renderer/App.vue

@@ -12,12 +12,38 @@ export default {
       this.$store.dispatch('chat/initWebSocket') // 初始化websocket
     }
   },
-  methods: {
+  watch: {
-    
+    '$store.state.chat.printer_error': {
-  }
+      handler(val) {
+        if (val.error1 || val.error1 === 0) {
+          this.$notify({
+            title: '温馨提示',
+            message: this.$store.state.Error1[val.error1],
+            duration: 0
+          })
+        }
+        if (val.error2 || val.error2 === 0) {
+          this.$notify({
+            title: '温馨提示',
+            message: this.$store.state.Error2[val.error2],
+            duration: 0
+          })
+        }
+        if (val.error3 || val.error3 === 0) {
+          this.$notify({
+            title: '温馨提示',
+            message: this.$store.state.Error3[val.error3],
+            duration: 0
+          })
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {}
 }
 </script>
 <style lang="scss">
-  @use './styles/index.scss'; // 全局自定义的css样式
+@use './styles/index.scss'; // 全局自定义的css样式
 </style>
-

src/renderer/components/workAdd/workAdd.vue

@@ -88,7 +88,7 @@
                       <el-switch v-model="setForm.isArrow" active-color="#07C160" inactive-color="#aaa"> </el-switch>
                     </div>
                   </div>
-                  <div class="flex_box flex_col_top set_item">
+                  <div v-if="setForm.isArrow" class="flex_box flex_col_top set_item">
                     <div class="set_label">分盘设置：</div>
                     <div class="set_val">
                       <el-radio-group v-model="setForm.disk">

src/renderer/main.js

@@ -9,6 +9,7 @@ import 'element-ui/lib/theme-chalk/index.css'
 import App from './App'
 import router from './router'
 import store from './store'
+import { accAdd, accSub, accMul, accDiv, filterSize } from './utils'
 
 import i18n from './lang' // internationalization
 import './permission' // permission control
@@ -17,6 +18,13 @@ if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
 Vue.http = Vue.prototype.$http = axios
 Vue.config.productionTip = false
 
+// 设置公共方法
+Vue.prototype.$accAdd = accAdd
+Vue.prototype.$accSub = accSub
+Vue.prototype.$accMul = accMul
+Vue.prototype.$accDiv = accDiv
+Vue.prototype.$filterSize = filterSize
+
 Vue.use(ElementUI, { 
   size: Cookies.get('size') || 'medium', // set element-ui default size
   i18n: (key, value) => i18n.t(key, value)

src/renderer/store/modules/chat.js

@@ -1,6 +1,4 @@
 // import { getAllList, getChatList, bindId, chatBegin } from '@/api/message'
-// import { Message, MessageBox } from 'element-ui'
-
 let timeouter = null
 let websock = null
 let isConnect = false
@@ -8,49 +6,122 @@ let isConnect = false
 // 状态JSON
 // 打印机状态
 const PrinterStatus = {
-  'I': '空闲',
+  I: '空闲',
-  'B': '忙碌',
+  B: '忙碌',
-  'P': '正在打印'
+  P: '正在打印'
 }
 
 // 错误状态
 const Error1 = {
-  '0': '托盘移动错误',
+  0: '托盘移动错误',
-  '1': '墨盒类型错误',
+  1: '墨盒类型错误',
-  '2': '抓取光盘时未检测到光盘光盘已用完',
+  2: '抓取光盘时未检测到光盘光盘已用完',
-  '3': '光盘掉落',
+  3: '光盘掉落',
-  '4': '墨水车空警告',
+  4: '墨水车空警告',
-  '5': '光盘抓手错误',
+  5: '光盘抓手错误',
-  '6': '抓取多张光盘错误',
+  6: '抓取多张光盘错误',
-  '7': '机械臂挂钩错误或者机械臂归位错误',
+  7: '机械臂挂钩错误或者机械臂归位错误'
 }
 
 const Error2 = {
-  '0': '墨水车伺服系统错误',
+  0: '墨水车伺服系统错误',
-  '1': '墨水车失速错误',
+  1: '墨水车失速错误',
-  '2': '墨盒数据读取错误',
+  2: '墨盒数据读取错误',
-  '3': '打印图像超出范围',
+  3: '打印图像超出范围',
-  '4': '环境温度超出正常使用范围',
+  4: '环境温度超出正常使用范围',
-  '5': '墨盒短路',
+  5: '墨盒短路',
-  '6': '型号错误',
+  6: '型号错误',
-  '7': '缓冲区溢出错误',
+  7: '缓冲区溢出错误'
+}
+
+const Error3 = {
+  0: '光盘已经打印'
+}
+
+// 光驱信息
+const CDName = {
+  1: '下光驱',
+  2: '上光驱'
+}
+const CDStatus = {
+  0: '无法确定光盘状态',
+  1: '没有光盘',
+  2: '光驱托盘打开',
+  3: '光驱未准备好',
+  4: '光盘状态正常，光盘已插入'
+}
+// CD类型：CD：1，DVD：2， DVD_DL:3，BD：4,BD_DL:5,BD_TL:6,BD_QL:7
+const CDTypes = {
+  1: 'CD',
+  2: 'DVD',
+  3: 'DVD_DL',
+  4: 'BD',
+  5: 'BD_DL',
+  6: 'BD_TL',
+  7: 'BD_QL'
 }
 
 const getDefaultState = () => {
   return {
     reconnections: 0,
     PrinterStatus,
+    Error1,
+    Error2,
+    Error3,
+    CDName,
+    CDStatus,
+    CDTypes,
+    // 任务列表
     task_list: [],
+    // 打印机信息
     printer_info: {
-      blue_last: 33, //蓝色墨盒遗留
+      blue_last: 0, //蓝色墨盒遗留
       cover_flag: false, //是否盖盖
-      left_strong_cd_num: 99, //左盘仓剩余盘数量
       printer_name: '', //打印机名称
-      printer_status: 73, //打印机状态 数字转成字符为I
+      printer_status: 'I', //打印机状态 数字转成字符为I
-      printer_tray: 73, //打印机托盘状态 数字转成字符为I
+      printer_tray: 'I', //打印机托盘状态 数字转成字符为I
-      red_last: 29, //红色墨盒遗留
+      red_last: 0, //红色墨盒遗留
-      rigth_strong_cd_num: 99, //右盘仓剩余盘数量
+      yellow_last: 0, //黄色墨盒遗留
-      yellow_last: 27 //黄色墨盒遗留
+      system_ip: '', //主机IP
+      system_name: '', //主机名称
+      // 左右盘仓
+      strong_list: [
+        {
+          strong_pos: 1, // 1：左盘仓，2：右盘仓
+          cd_type: 2, //CD类型：CD：1，DVD：2， DVD_DL:3，BD：4,BD_DL:5,BD_TL:6,BD_QL:7
+          cd_num: 0
+        },
+        {
+          strong_pos: 2,
+          cd_type: 1,
+          cd_num: 0
+        }
+      ]
+    },
+    // 光驱信息
+    cd_list: [
+      {
+        cd_pos: 1, // 设备位置 1：下光驱，2：上光驱
+        cd_status: 4, // 设备状态 0：无法确定光盘状态 ，1：没有光盘 ， 2：光驱托盘打开， 3：光驱未准备好，4：光盘状态正常，光盘已插入
+        cd_taskid: '', // 当前任务id
+        dev_path: '', // 光驱路径
+        cd_assid: '', // 作业的卷标名
+        total_size: 0, // 总容量
+        use_size: 0, // 已使用容量
+        copy_scheduler: 0 // 任务进度
+      },
+      {
+        cd_pos: 2,
+        cd_status: 1,
+        cd_taskid: '',
+        dev_path: ''
+      }
+    ],
+    // 错误信息
+    printer_error: {
+      error1: '',
+      error2: '',
+      error3: ''
     }
   }
 }
@@ -70,7 +141,6 @@ const actions = {
     if ((websock && isConnect) || !rootState.user.token) {
       return
     }
-    console.log(process.env.VUE_APP_SOCKET_API)
     websock = new WebSocket(process.env.VUE_APP_SOCKET_API)
     websock.onmessage = function (res) {
       dispatch('websocketonmessage', res)
@@ -96,30 +166,42 @@ const actions = {
         info.printer_status = String.fromCharCode(info.printer_status)
         info.printer_tray = String.fromCharCode(info.printer_tray)
         commit('chat/setData', { name: 'printer_info', data: info })
+      } else if (data.resp_name === 'cd_list') {
+        let info = data.resp_info
+        commit('chat/setData', { name: 'cd_list', data: info })
+      } else if (data.resp_name === 'printer_error') {
+        let error = data.resp_info
+        let info = {
+          error1: '',
+          error2: '',
+          error3: ''
+        }
+        commit('chat/setData', { name: 'printer_error', data: info })
+        if (error.error1) {
+          let errors = error.error1.split('')
+          for (let i = 0; i < errors.length; i++) {
+            if (errors[i] == 1) info.error1 = i
+          }
+        }
+        if (error.error2) {
+          let errors = error.error2.split('')
+          for (let i = 0; i < errors.length; i++) {
+            if (errors[i] == 1) info.error2 = i
+          }
+        }
+        if (error.error3) {
+          let errors = error.error3.split('')
+          for (let i = 0; i < errors.length; i++) {
+            if (errors[i] == 1) info.error3 = i
+          }
+        }
+        setTimeout(() => {
+          commit('chat/setData', { name: 'printer_error', data: info })
+        }, 100)
       }
     } else {
-      if (data.type === 'init') {
+      // 未知消息
-        state.pingNum = 0
+      console.log('未知消息: ' + JSON.stringify(data))
-        clearTimeout(timeouter)
-        dispatch('pingCheck')
-        commit('set_client_id', data.client_id)
-        // 初始化
-        bindId({
-          client_id: data.client_id
-        })
-          .then(() => {})
-          .catch((err) => {
-            alert(err.msg)
-            // Message.error(err.msg)
-          })
-      } else if (data.type === 'ping') {
-        // 心跳回执
-        state.pingNum = 0
-        dispatch('websocketsend', { type: 'pong' })
-      } else {
-        // 未知消息
-        console.log('未知消息: ' + JSON.stringify(data))
-      }
     }
   },
   // 心跳检测重连

src/renderer/utils/index.js

@@ -389,12 +389,12 @@ export function accDiv(arg1, arg2) {
   var r1
   var r2
   try {
-    t1 = arg1.toString().split('.')[1].length
+    t1 = arg1.toString().split('.')[1] ? arg1.toString().split('.')[1].length : 0
   } catch (e) {
     console.log(e)
   }
   try {
-    t2 = arg2.toString().split('.')[1].length
+    t2 = arg2.toString().split('.')[1] ? arg2.toString().split('.')[1].length : 0
   } catch (e) {
     console.log(e)
   }
@@ -411,12 +411,12 @@ export function accDiv(arg1, arg2) {
 export function accAdd(arg1, arg2) {
   var r1, r2, m, c
   try {
-    r1 = arg1.toString().split('.')[1].length
+    r1 = arg1.toString().split('.')[1] ? arg1.toString().split('.')[1].length : 0
   } catch (e) {
     r1 = 0
   }
   try {
-    r2 = arg2.toString().split('.')[1].length
+    r2 = arg2.toString().split('.')[1] ? arg2.toString().split('.')[1].length : 0
   } catch (e) {
     r2 = 0
   }
@@ -446,12 +446,12 @@ export function accAdd(arg1, arg2) {
 export function accSub(arg1, arg2) {
   var r1, r2, m, n
   try {
-    r1 = arg1.toString().split('.')[1].length
+    r1 = arg1.toString().split('.')[1] ? arg1.toString().split('.')[1].length : 0
   } catch (e) {
     r1 = 0
   }
   try {
-    r2 = arg2.toString().split('.')[1].length
+    r2 = arg2.toString().split('.')[1] ? arg2.toString().split('.')[1].length : 0
   } catch (e) {
     r2 = 0
   }

src/renderer/views/dashboard/index.vue

@@ -38,60 +38,77 @@
       <!-- 左侧 -->
       <div class="device_left">
         <div class="flex_box device_left_top">
-          <img class="flex_shrink device_img" src="@/assets/images/device.png" />
+          <img v-if="printer_info.cover_flag" class="flex_shrink device_img" src="@/assets/images/device.png" />
+          <img v-else class="flex_shrink device_img" src="@/assets/images/device-open.png" />
           <div class="flex_box flex_row_between device_info">
             <div class="device_info_box">
               <div class="device_info_main" :class="{ device_info_main1: infoStatus === 1 }">
                 <div class="device_info_item">
-                  <div class="device_info_text">系统序列号：4F524201</div>
+                  <div class="device_info_title">{{ printer_info.printer_name }}</div>
-                  <div class="device_info_text">主机名：DGF031</div>
-                  <div class="device_info_text">主机IP：192.168.1.25</div>
-                  <div class="device_info_text">缓存空间：123G（共200G）</div>
-                </div>
-                <div class="device_info_item">
-                  <div class="device_info_title">Disc Publisher 4200 Series</div>
                   <div class="flex_box device_info_options">
                     <div class="device_info_option">
                       <div class="device_info_option_box">
                         <img src="@/assets/images/device4.png" />
+                        <div class="device_info_option_cap">
+                          <div class="device_info_option_cap_box" :style="{height: $accDiv(printer_info.strong_list[0].cd_num, 50) * 100 + '%'}"></div>
+                        </div>
                       </div>
                       <div class="flex_box flex_row_center device_info_option_b">
-                        <div class="device_info_option_b_text">CD 5张</div>
+                        <div class="device_info_option_b_text">{{$store.state.chat.CDTypes[printer_info.strong_list[0].cd_type]}} {{printer_info.strong_list[0].cd_num}}张</div>
-                        <i class="el-icon-caret-bottom"></i>
+                        <i v-if="runVal===6" class="el-icon-caret-bottom"></i>
                       </div>
                     </div>
                     <div class="device_info_option">
                       <div class="device_info_option_box">
                         <img src="@/assets/images/device4.png" />
+                        <div class="device_info_option_cap">
+                          <div class="device_info_option_cap_box" :style="{height: $accDiv(printer_info.strong_list[0].cd_num, 50) * 100 + '%'}"></div>
+                        </div>
                       </div>
                       <div class="flex_box flex_row_center device_info_option_b">
-                        <div class="device_info_option_b_text">DVD 15张</div>
+                        <div class="device_info_option_b_text">{{$store.state.chat.CDTypes[printer_info.strong_list[1].cd_type]}} {{printer_info.strong_list[1].cd_num}}张</div>
+                        <i v-if="runVal===6" class="el-icon-caret-bottom"></i>
                       </div>
                     </div>
                     <div class="device_info_option">
-                      <img class="device_info_option_img" src="@/assets/images/device5.png" />
+                      <div class="flex_box flex_row_between device_info_option_list">
-                      <div class="flex_box flex_row_center device_info_option_b">
+                        <div class="device_info_option_item device_info_option_blue">
-                        <div class="device_info_option_b_text">75%</div>
+                          <div :style="{width: printer_info.blue_last+'%'}" class="device_info_option_content"></div>
-                        <i class="el-icon-caret-bottom"></i>
+                        </div>
+                        <div class="device_info_option_item device_info_option_red">
+                          <div :style="{width: printer_info.red_last+'%'}" class="device_info_option_content"></div>
+                        </div>
+                        <div class="device_info_option_item device_info_option_yellow">
+                          <div :style="{width: printer_info.yellow_last+'%'}" class="device_info_option_content"></div>
+                        </div>
+                      </div>
+                      <div class="flex_box flex_row_between device_info_option_b">
+                        <div class="device_info_option_b_text device_info_option_b_text1">{{printer_info.blue_last}}%</div>
+                        <div class="device_info_option_b_text device_info_option_b_text1">{{printer_info.red_last}}%</div>
+                        <div class="device_info_option_b_text device_info_option_b_text1">{{printer_info.yellow_last}}%</div>
                       </div>
                     </div>
                   </div>
                 </div>
+                <div class="device_info_item">
+                  <div class="device_info_text">系统序列号：</div>
+                  <div class="device_info_text">主机名：{{ printer_info.system_name }}</div>
+                  <div class="device_info_text">主机IP：{{ printer_info.system_ip }}</div>
+                  <div class="device_info_text">缓存空间：0G（共0G）</div>
+                </div>
               </div>
             </div>
             <div class="device_info_right">
-              <div @click="infoStatus = 0" class="device_info_right_item">
+              <div v-if="infoStatus === 1" @click="infoStatus = 0" class="device_info_right_item">
-                <img v-if="infoStatus === 0" src="@/assets/images/Arrow_right_icon.png" />
+                <img src="@/assets/images/Arrow_right1_icon.png" />
-                <img v-if="infoStatus === 1" src="@/assets/images/Arrow_right1_icon.png" />
               </div>
-              <div @click="infoStatus = 1" class="device_info_right_item">
+              <div v-if="infoStatus === 0" @click="infoStatus = 1" class="device_info_right_item">
-                <img v-if="infoStatus === 1" src="@/assets/images/Arrow_left_icon.png" />
+                <img src="@/assets/images/Arrow_left1_icon.png" />
-                <img v-if="infoStatus === 0" src="@/assets/images/Arrow_left1_icon.png" />
               </div>
             </div>
           </div>
         </div>
-        <div class="flex_box device_status">
+        <div :class="`flex_box device_status device_status${printer_info.printer_status}`">
           <div class="device_status_dot"></div>
           <div class="device_status_text">{{ runText }}</div>
         </div>
@@ -110,24 +127,32 @@
           <div class="flex_box flex_row_between device_right_top_item">
             <img class="device_right_top_img" src="@/assets/images/device2.png" />
             <div class="device_right_top_content">
-              <div class="device_right_top_title">BD驱动器(S)(顶部)</div>
+              <div class="device_right_top_title">{{ cd_list[0].dev_path || '' }}({{ $store.state.chat.CDName[cd_list[0].cd_pos] }})</div>
-              <div class="device_right_top_text">状态：空闲、无盘</div>
+              <template v-if="cd_list[0].total_size">
-              <div class="device_right_top_text">任务：</div>
+                <div class="flex_box device_right_top_progress">
-              <div class="device_right_top_text">光盘：</div>
+                  <div class="device_right_top_progress_box" :style="{ width: $accMul($accDiv(cd_list[0].use_size, cd_list[0].total_size), 100) + '%' }"></div>
+                </div>
+                <div class="device_right_top_text">{{ $filterSize($accSub(cd_list[0].total_size, cd_list[0].use_size)) }}可用，共{{ $filterSize(cd_list[0].total_size) }}</div>
+              </template>
+              <div class="device_right_top_text">状态：{{ $store.state.chat.CDStatus[cd_list[0].cd_status] }}</div>
+              <div class="device_right_top_text">任务：{{ cd_list[0].cd_taskid || '' }}</div>
+              <div class="device_right_top_text">光盘：{{ cd_list[0].cd_assid || '' }}</div>
             </div>
           </div>
           <div class="device_right_top_line"></div>
           <div class="flex_box flex_row_between device_right_top_item">
             <img class="device_right_top_img" src="@/assets/images/device3.png" />
             <div class="device_right_top_content">
-              <div class="device_right_top_title">21032200009(H)(底部)</div>
+              <div class="device_right_top_title">{{ cd_list[1].dev_path || '' }}({{ $store.state.chat.CDName[cd_list[1].cd_pos] }})</div>
-              <div class="flex_box device_right_top_progress">
+              <template v-if="cd_list[1].total_size">
-                <div class="device_right_top_progress_box" :style="{ width: progressW + '%' }"></div>
+                <div class="flex_box device_right_top_progress">
-              </div>
+                  <div class="device_right_top_progress_box" :style="{ width: $accMul($accDiv(cd_list[1].use_size, cd_list[1].total_size), 100) + '%' }"></div>
-              <div class="device_right_top_text">15GB可用，共60GB</div>
+                </div>
-              <div class="device_right_top_text">状态：插入光盘中</div>
+                <div class="device_right_top_text">{{ $filterSize($accSub(cd_list[1].total_size, cd_list[1].use_size)) }}可用，共{{ $filterSize(cd_list[1].total_size) }}</div>
-              <div class="device_right_top_text">任务：文件刻录_20241107175818</div>
+              </template>
-              <div class="device_right_top_text">光盘：56210323002</div>
+              <div class="device_right_top_text">状态：{{ $store.state.chat.CDStatus[cd_list[1].cd_status] }}</div>
+              <div class="device_right_top_text">任务：{{ cd_list[1].cd_taskid || '' }}</div>
+              <div class="device_right_top_text">光盘：{{ cd_list[1].cd_assid || '' }}</div>
             </div>
           </div>
         </div>
@@ -172,7 +197,7 @@
               <el-table-column prop="task_label" label="子任务名称"></el-table-column>
               <el-table-column prop="task_size" label="大小">
                 <template slot-scope="child">
-                  <div>{{ filterSize(child.row.task_size) }}</div>
+                  <div>{{ $filterSize(child.row.task_size) }}</div>
                 </template>
               </el-table-column>
               <el-table-column prop="start_time" label="开始时间"></el-table-column>
@@ -206,7 +231,7 @@
         </el-table-column>
         <el-table-column prop="task_size" label="大小">
           <template slot-scope="scope">
-            <div>{{ filterSize(scope.row.task_size) }}</div>
+            <div>{{ $filterSize(scope.row.task_size) }}</div>
           </template>
         </el-table-column>
         <!-- <el-table-column prop="CreateTime" label="开始时间"></el-table-column> -->
@@ -243,7 +268,7 @@
 <script>
 let that
 import { mapGetters } from 'vuex'
-import { accAdd, filterSize } from '@/utils'
+
 import UserInfo from '@/components/userInfo/userInfo.vue'
 import WorkAdd from '@/components/workAdd/workAdd.vue'
 
@@ -256,7 +281,7 @@ export default {
       workStatus: true,
       // 工作状态
       infoStatus: 0,
-      runText: '设备门盖被打开，请关闭门盖。',
+      runText: '',
       runVal: 1,
       runList: [
         {
@@ -317,6 +342,10 @@ export default {
         '6': '已取消',
         '7': '已完成'
       },
+      // 设备信息
+      printer_info: {},
+      // g光盘信息
+      cd_list: [],
     }
   },
   watch: {
@@ -327,7 +356,7 @@ export default {
           val.forEach((item) => {
             let task_size = 0
             item.ass_task.forEach((item2) => {
-              task_size = accAdd(task_size, item2.task_size)
+              task_size = this.$accAdd(task_size, item2.task_size)
             })
             item.task_size = task_size
             list.push(item)
@@ -337,6 +366,25 @@ export default {
       },
       deep: true,
       immediate: true
+    },
+    '$store.state.chat.printer_info': {
+      handler(val) {
+        if (!val.cover_flag) {
+          this.runText = '设备门盖被打开，请关闭门盖。'
+        } else {
+          this.runText = this.$store.state.chat.PrinterStatus[val.printer_status]
+        }
+        this.printer_info = val
+      },
+      deep: true,
+      immediate: true
+    },
+    '$store.state.chat.cd_list': {
+      handler(val) {
+        this.cd_list = val
+      },
+      deep: true,
+      immediate: true
     }
   },
   computed: {
@@ -358,9 +406,6 @@ export default {
     showWork() {
       that.$refs.workAdd.show()
     },
-    filterSize(size) {
-      return filterSize(size)
-    },
     // 退出登录
     goOut() {
       this.$store.dispatch('FedLogOut').then(() => {
@@ -372,6 +417,10 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+$green: #00c325;
+$yellow: #f5a623;
+$red: #ff0000;
+
 .container_box {
   height: 100vh;
   .top_box {
@@ -497,6 +546,24 @@ export default {
                       img {
                         width: 100%;
                       }
+                      .device_info_option_cap {
+                        position: absolute;
+                        left: 20px;
+                        bottom: 20px;
+                        width: 42px;
+                        height: 47px;
+                        z-index: 3;
+                        .device_info_option_cap_box {
+                          position: absolute;
+                          left: 0;
+                          bottom: 0;
+                          width: 100%;
+                          height: 0;
+                          background: linear-gradient( 90deg, #92324E 0%, #CC224B 10%, #CC224B 90%, #94314E 100%);
+                          border-radius: 4px;
+                          z-index: 4;
+                        }
+                      }
                     }
                     .device_info_option_img {
                       width: 118px;
@@ -511,6 +578,11 @@ export default {
                         font-size: 18px;
                         color: #000000;
                       }
+                      .device_info_option_b_text1 {
+                        width: 36px;
+                        text-align: center;
+                        font-size: 16px;
+                      }
                       .el-icon-caret-bottom {
                         transition: all 0.5s;
                       }
@@ -520,6 +592,45 @@ export default {
                         transform: rotate(90deg);
                       }
                     }
+                    .device_info_option_list {
+                      width: 150px;
+                      .device_info_option_item {
+                        width: 36px;
+                        height: 67px;
+                        border-radius: 2px;
+                        background: linear-gradient( 270deg, #E1FBFE 0%, #FFFFFF 50%, #E5F9FF 100%);
+                        border: 1px solid #B1CDD0;
+                        position: relative;
+                        .device_info_option_content {
+                          position: absolute;
+                          bottom: 0;
+                          left: 0;
+                          width: 34px;
+                          height: 32px;
+                        }
+                      }
+                      .device_info_option_blue {
+                        background: linear-gradient( 270deg, #E1FBFE 0%, #FFFFFF 50%, #E5F9FF 100%);
+                        border: 1px solid #B1CDD0;
+                        .device_info_option_content {
+                          background: linear-gradient( 90deg, #279FD0 0%, #80E1F7 48%, #2FB0E0 100%);
+                        }
+                      }
+                      .device_info_option_red {
+                        background: linear-gradient( 270deg, #FBE5F7 0%, #FFFFFF 50%, #F6E1F1 100%);
+                        border: 1px solid #E6BCD6;
+                        .device_info_option_content {
+                          background: linear-gradient( 90deg, #D02886 0%, #F56ABE 48%, #D02991 100%);
+                        }
+                      }
+                      .device_info_option_yellow {
+                        background: linear-gradient( 270deg, #FEFDC5 0%, #FFFFFF 50%, #FEFDC5 100%);
+                        border: 1px solid #EAECC6;
+                        .device_info_option_content {
+                          background: linear-gradient( 90deg, #F7EA32 0%, #FEFAAA 48%, #F8E94B 100%);
+                        }
+                      }
+                    }
                   }
                 }
               }
@@ -561,6 +672,23 @@ export default {
           line-height: 30px;
         }
       }
+      .device_statusI {
+        .device_status_dot {
+          background-color: $green;
+        }
+        .device_status_text {
+          color: $green;
+        }
+      }
+      .device_statusB,
+      .device_statusP {
+        .device_status_dot {
+          background-color: $yellow;
+        }
+        .device_status_text {
+          color: $yellow;
+        }
+      }
       .device_run {
         width: 100%;
         height: 44px;