优化调整

src/renderer/components/workAdd/workAdd.vue

@@ -134,12 +134,11 @@
               <div class="work_files">
                 <div class="work_files_box">
                   <!-- 文件列表 -->
-                  <files ref="files" :onSizechange="sizeChange" :complete="upload_over" />
+                  <files ref="files" :onSizechange="sizeChange" :complete="upload_over"></files>
+                </div>
+                <div class="work_files_progress">
+                  <el-progress :text-inside="true" :percentage="file_percent" :format="format" :color="customColors"></el-progress>
                 </div>
-                <!-- <div class="work_files_progress">
-                <div class="work_files_progress_content" :style="{ width: fileProgess + '%' }"></div>
-                <div class="work_files_progress_text">0.0MB/0MB</div>
-              </div> -->
               </div>
             </div>
             <div class="work_right">
@@ -165,16 +164,11 @@
                     <div class="wook_soon_label">{{ item.name }}</div>
                     <div class="wook_soon_input">
                       <div v-if="scope.row.type == 1">
-                        <input
+                        <input type="file" accept="image/*" :ref="item.name" :data-name="item.name" />
-                          type="file"
-                          accept="image/*"
-                          :ref="item.name"
-                          :data-name="item.name" />
                       </div>
                       <div v-if="scope.row.type == 3 || scope.row.type == 4 || scope.row.type == 5">
                         <el-input clearable :disabled="csvIsExist" v-model="item.val" placeholder="请输入"></el-input>
                       </div>
-                      
                     </div>
                     <div @click="openFile2" v-if="item.type == 3 || item.type == 4 || item.type == 5" class="wook_soon_add">添加字段</div>
                   </div>
@@ -192,8 +186,8 @@
             </div>
           </div>
           <div class="flex_box footer_btns">
-            <el-button type="primary" class="footer_save" @click="workSubmit">保存</el-button>
+            <el-button type="primary" class="footer_save" @click="workSave" :loading="saveFlag">保存</el-button>
-            <el-button type="primary" class="footer_submit" @click="workSubmit">提交</el-button>
+            <el-button type="primary" class="footer_submit" @click="workSubmit" :loading="submitFlag">提交</el-button>
           </div>
         </div>
       </div>
@@ -223,6 +217,8 @@ export default {
     return {
       addShow: false,
       submitLoading: false,
+      saveFlag: false,
+      submitFlag: false,
       size_form: null,
       type_form: 0,
       file_form: 0,
@@ -273,43 +269,8 @@ export default {
         }
       },
       // CD类型：CD 700MB：1，DVD 4.7GB：2， DVD_DL 8.5GB:3，BD 25GB：4,BD_DL 50GB:5,BD_TL 100GB:6,BD_QL 128GB:7
-      cd_types: [
+      CDTypes: [],
-        {
+      cd_types: [],
-          value: 1,
-          label: 'CD 700MB',
-          size: 700*1024*1024
-        },
-        {
-          value: 2,
-          label: 'DVD 4.7GB',
-          size: 4.7*1024*1024*1024
-        },
-        {
-          value: 3,
-          label: 'DVD_DL 8.5GB',
-          size: 8.5*1024*1024*1024
-        },
-        {
-          value: 4,
-          label: 'BD 25GB',
-          size: 25*1024*1024*1024
-        },
-        {
-          value: 5,
-          label: 'BD_DL 50GB',
-          size: 50*1024*1024*1024
-        },
-        {
-          value: 6,
-          label: 'BD_TL 100GB',
-          size: 100*1024*1024*1024
-        },
-        {
-          value: 7,
-          label: 'BD_QL 128GB',
-          size: 128*1024*1024*1024
-        }
-      ],
       copyList: [],
       fileProgess: 30,
       // 模板列表
@@ -326,6 +287,11 @@ export default {
       soonImg: '',
       showList: true,
       csvIsExist: false,
+      totalSize: 0,
+      customColors: [
+        { color: '#67C23A', percentage: 99 },
+        { color: '#F56C6C', percentage: 100 }
+      ],
       // 高级设置
       setShow: false,
       setForm: {},
@@ -393,14 +359,34 @@ export default {
   watch: {
     '$store.state.user.setForm': {
       handler(val) {
-        this.setForm = val
+        this.setForm = { ...val }
+      },
+      deep: true,
+      immediate: true
+    },
+    '$store.state.chat.CDTypes': {
+      handler(val) {
+        this.CDTypes = { ...val }
+      },
+      deep: true,
+      immediate: true
+    },
+    '$store.state.chat.cd_types': {
+      handler(val) {
+        this.cd_types = [...val]
       },
       deep: true,
       immediate: true
     }
   },
   computed: {
-    ...mapGetters(['name', 'roles'])
+    ...mapGetters(['name', 'roles']),
+    file_percent() {
+      const diskSize = this.cd_types.find((item) => item.value === this.form.cd_type).size
+      console.log(diskSize)
+      let t = diskSize ? this.$accDiv(this.totalSize, diskSize)*100 : 0
+      return t > 100 ? 100.1 : t
+    },
   },
   mounted() {
     this.getTemplates()
@@ -408,6 +394,12 @@ export default {
     this.form.label = dayjs().format('YYYY-MM-DD')
   },
   methods: {
+    // 进度条处理
+    format(percentage) {
+      const diskSize = this.cd_types.find((item) => item.value === this.form.cd_type).size
+      let t = diskSize ? `${this.$filterSize(this.totalSize)}/${this.$filterSize(diskSize)}` : ''
+      return t
+    },
     // 添加文件处理
     addFolder() {
       this.$refs.files.addFolder()
@@ -416,8 +408,7 @@ export default {
       this.$refs.files.addFile()
     },
     sizeChange(size) {
-      console.log(size)
+      this.totalSize = size
-      this.size = size
     },
     async upload_over() {
       // //左侧内容上传结束
@@ -539,24 +530,31 @@ export default {
     },
     // 保存
     workSave() {
-
+      that.saveFlag = true
+      setTimeout(() => {
+        that.saveFlag = false
+      }, 1000);
     },
     // 提交
     workSubmit() {
       let that = this
       const files = this.$refs.files.getLists()
       let fileList = []
+      that.submitFlag = true
+      setTimeout(() => {
+        that.submitFlag = false
+      }, 1000);
       for (let key in files) {
-        let file = {...files[key]}
+        let file = { ...files[key] }
         try {
-          const fileStats = fs.statSync(files[key].path);
+          const fileStats = fs.statSync(files[key].path)
           file.mtime = fileStats.mtimeMs
           fileList.push(file)
         } catch (error) {
-          console.error('Error reading file:', error);
+          console.error('Error reading file:', error)
         }
       }
-      if (that.form.json_file === ''&& fileList.length === 0) {
+      if (that.form.json_file === '' && fileList.length === 0) {
         this.$message({
           message: '请上传作业文件',
           type: 'warning'
@@ -564,7 +562,7 @@ export default {
         return
       }
       if (this.setForm.isArrow) {
-        const diskSize = this.cd_types.find(item => item.value === this.form.cd_type).size
+        const diskSize = this.cd_types.find((item) => item.value === this.form.cd_type).size
         let overList = []
         for (let i = 0; i < fileList.length; i++) {
           if (fileList[i].size > diskSize) {
@@ -582,16 +580,16 @@ export default {
         if (this.setForm.disk === 2) {
           // 按文件名排序
           fileList.sort((a, b) => {
-            if (a.name.toLowerCase() < b.name.toLowerCase()) return -1;
+            if (a.name.toLowerCase() < b.name.toLowerCase()) return -1
-            if (a.name.toLowerCase() > b.name.toLowerCase()) return 1;
+            if (a.name.toLowerCase() > b.name.toLowerCase()) return 1
-            return 0;
+            return 0
-          });
+          })
         } else if (this.setForm.disk === 3) {
           // 按最后修改时间排序
-          fileList.sort((a, b) => a.mtime - b.mtime);
+          fileList.sort((a, b) => a.mtime - b.mtime)
         } else {
           // 按文件大小排序
-          fileList.sort((a, b) => a.size - b.size);
+          fileList.sort((a, b) => a.size - b.size)
         }
         let index = 1
         let total_size = 0
@@ -668,14 +666,14 @@ export default {
     // 选择模板
     changeTemplate(e) {
       let that = this
-      const absolutePath = path.resolve(e);
+      const absolutePath = path.resolve(e)
       fs.realpath(absolutePath, (err, fullPath) => {
         if (err) {
-          console.error(err);
+          console.error(err)
-          return;
+          return
         }
         that.form.json_file = fullPath
-      });
+      })
       fs.readFile(e, 'utf8', (err, data) => {
         if (err) {
           console.error('读取文件时出错:', err)
@@ -823,7 +821,7 @@ export default {
     },
     setSure() {
       this.setShow = false
-      this.$store.commit('setData', {name: 'setForm', data: this.setForm})
+      this.$store.commit('setData', { name: 'setForm', data: this.setForm })
     }
   }
 }
@@ -984,29 +982,14 @@ export default {
             overflow-y: scroll;
           }
           .work_files_progress {
-            height: 22px;
+            ::v-deep {
-            padding: 2px 0;
+              .el-progress-bar__outer {
-            position: relative;
+                height: 24px!important;
-            border-radius: 12px;
+                font-size: 12px;
-            background-color: #ffe6e6;
+                color: #000;
-            .work_files_progress_content {
+              }
-              transition: all 0.5s;
-              width: 0;
-              height: 18px;
-              background: #e54d4d;
-              border-radius: 10px;
-            }
-            .work_files_progress_text {
-              font-weight: 500;
-              font-size: 10px;
-              color: #ffffff;
-              line-height: 22px;
-              padding-left: 16px;
-              position: absolute;
-              left: 0;
-              top: 0;
-              z-index: 8;
             }
+            
           }
         }
       }

src/renderer/store/modules/chat.js

@@ -51,6 +51,11 @@ const CDStatus = {
   4: '光盘状态正常，光盘已插入'
 }
 // CD类型：CD：1，DVD：2， DVD_DL:3，BD：4,BD_DL:5,BD_TL:6,BD_QL:7
+const diskTypes = {
+  1: 'CD',
+  2: 'DVD',
+  3: 'BD',
+}
 const CDTypes = {
   1: 'CD',
   2: 'DVD',
@@ -60,6 +65,43 @@ const CDTypes = {
   6: 'BD_TL',
   7: 'BD_QL'
 }
+const cd_types = [
+  {
+    value: 1,
+    label: 'CD 700MB',
+    size: 700*1024*1024
+  },
+  {
+    value: 2,
+    label: 'DVD 4.7GB',
+    size: 4.7*1024*1024*1024
+  },
+  {
+    value: 3,
+    label: 'DVD_DL 8.5GB',
+    size: 8.5*1024*1024*1024
+  },
+  {
+    value: 4,
+    label: 'BD 25GB',
+    size: 25*1024*1024*1024
+  },
+  {
+    value: 5,
+    label: 'BD_DL 50GB',
+    size: 50*1024*1024*1024
+  },
+  {
+    value: 6,
+    label: 'BD_TL 100GB',
+    size: 100*1024*1024*1024
+  },
+  {
+    value: 7,
+    label: 'BD_QL 128GB',
+    size: 128*1024*1024*1024
+  }
+]
 
 const getDefaultState = () => {
   return {
@@ -70,7 +112,9 @@ const getDefaultState = () => {
     Error3,
     CDName,
     CDStatus,
+    diskTypes,
     CDTypes,
+    cd_types,
     // 任务列表
     task_list: [],
     // 打印机信息
@@ -96,7 +140,19 @@ const getDefaultState = () => {
           cd_type: 1,
           cd_num: 0
         }
-      ]
+      ],
+      strongList: {
+        1: {
+          strong_pos: 1,
+          cd_type: 2,
+          cd_num: 0
+        },
+        2: {
+          strong_pos: 2,
+          cd_type: 1,
+          cd_num: 0
+        }
+      }
     },
     // 光驱信息
     cd_list: [
@@ -105,6 +161,7 @@ const getDefaultState = () => {
         cd_status: 4, // 设备状态 0：无法确定光盘状态 ，1：没有光盘 ， 2：光驱托盘打开， 3：光驱未准备好，4：光盘状态正常，光盘已插入
         cd_taskid: '', // 当前任务id
         dev_path: '', // 光驱路径
+        dev_type: 2, // 光驱类型
         cd_assid: '', // 作业的卷标名
         total_size: 0, // 总容量
         use_size: 0, // 已使用容量
@@ -114,7 +171,8 @@ const getDefaultState = () => {
         cd_pos: 2,
         cd_status: 1,
         cd_taskid: '',
-        dev_path: ''
+        dev_path: '',
+        dev_type: 1
       }
     ],
     // 错误信息
@@ -122,7 +180,9 @@ const getDefaultState = () => {
       error1: '',
       error2: '',
       error3: ''
-    }
+    },
+    // 日志信息
+    logList: []
   }
 }
 
@@ -156,7 +216,7 @@ const actions = {
     }
   },
   // 接收消息
-  websocketonmessage({ commit, dispatch }, e) {
+  websocketonmessage({ state, commit, dispatch }, e) {
     const data = JSON.parse(e.data) // 转json对象
     if (data.resp_name) {
       if (data.resp_name === 'task_list') {
@@ -165,14 +225,32 @@ const actions = {
         let info = data.resp_info
         info.printer_status = String.fromCharCode(info.printer_status)
         info.printer_tray = String.fromCharCode(info.printer_tray)
+        let strong_list = {}
+        for (let i = 0; i < info.strong_list.length; i++) {
+          strong_list[info.strong_list[i].strong_pos] = info.strong_list[i]
+        }
+        info.strongList = strong_list
         commit('setData', { name: 'printer_info', data: info })
       } else if (data.resp_name === 'cd_info') {
         const list = data.resp_info.cd_list
         let cds = [{}, {}]
+        let isBD = false
         for (let i = 0; i < list.length; i++) {
+          if (list[i].dev_type == 3) isBD = true
           if (list[i].cd_pos == 2) cds[0] = list[i]
           else cds[1] = list[i]
         }
+        let types = CDTypes
+        let typeLists = cd_types
+        if (isBD) {
+          types = {}
+          for(let key in CDTypes) {
+            if (parseInt(key) < 4) types[key] = CDTypes[key]
+          }
+          typeLists = cd_types.slice(0, 3)
+        }
+        commit('setData', { name: 'CDTypes', data: types })
+        commit('setData', { name: 'cd_types', data: typeLists })
         commit('setData', { name: 'cd_list', data: cds })
       } else if (data.resp_name === 'printer_error') {
         let error = data.resp_info
@@ -203,6 +281,20 @@ const actions = {
         setTimeout(() => {
           commit('setData', { name: 'printer_error', data: info })
         }, 100)
+      } else if (data.resp_name === 'add_log') {
+        let logs = data.resp_info.add_log
+        let loglist = []
+        for (let i = 0; i < logs.length; i++) {
+          let text1 = logs[i].split('[', 2)
+          let text2 = text1[1].split(']', 2)
+          loglist.push({
+            time: text1[0],
+            text: text2[1],
+            status: text2[0]
+          })
+        }
+        let list = [...state.logList, ...loglist]
+        commit('setData', { name: 'logList', data: list })
       }
     } else {
       // 未知消息

src/renderer/views/dashboard/index.vue

@@ -50,11 +50,11 @@
                       <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 class="device_info_option_cap_box" :class="{'device_info_option_cap_box1': printer_info.strongList[1].cd_num < 30, 'device_info_option_cap_box2': printer_info.strongList[1].cd_num < 10}" :style="{height: $accDiv(printer_info.strongList[1].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">{{$store.state.chat.CDTypes[printer_info.strong_list[0].cd_type]}} {{printer_info.strong_list[0].cd_num}}张</div>
+                        <div class="device_info_option_b_text">{{CDTypes[printer_info.strongList[1].cd_type]}} {{printer_info.strongList[1].cd_num}}张</div>
                         <i v-if="runVal===6" class="el-icon-caret-bottom"></i>
                       </div>
                     </div>
@@ -62,11 +62,11 @@
                       <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 class="device_info_option_cap_box" :class="{'device_info_option_cap_box1': printer_info.strongList[2].cd_num < 30, 'device_info_option_cap_box2': printer_info.strongList[2].cd_num < 10}" :style="{height: $accDiv(printer_info.strongList[2].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">{{$store.state.chat.CDTypes[printer_info.strong_list[1].cd_type]}} {{printer_info.strong_list[1].cd_num}}张</div>
+                        <div class="device_info_option_b_text">{{CDTypes[printer_info.strongList[2].cd_type]}} {{printer_info.strongList[2].cd_num}}张</div>
                         <i v-if="runVal===6" class="el-icon-caret-bottom"></i>
                       </div>
                     </div>
@@ -125,12 +125,16 @@
       <div class="device_right">
         <div class="flex_box device_right_top">
           <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_img">
+              <img v-if="cd_list[0].total_size" src="@/assets/images/device3.png" />
+              <img v-if="!cd_list[0].total_size" src="@/assets/images/device2.png" />
+              <div class="device_right_top_img_text" :class="{'device_right_top_img_text1': cd_list[0].total_size}">{{ diskTypes[cd_list[0].dev_type] }}</div>
+            </div>
             <div class="device_right_top_content">
               <div class="device_right_top_title">{{ cd_list[0].dev_path || '' }}({{ $store.state.chat.CDName[cd_list[0].cd_pos] }})</div>
               <template v-if="cd_list[0].total_size">
                 <div class="flex_box device_right_top_progress">
-                  <div class="device_right_top_progress_box" :style="{ width: $accMul($accDiv(cd_list[0].use_size, cd_list[0].total_size), 100) + '%' }"></div>
+                  <div class="device_right_top_progress_box" :style="{ width: cd_list[0].cd_taskid.copy_scheduler + '%' }"></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>
@@ -141,12 +145,16 @@
           </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_img">
+              <img v-if="cd_list[1].total_size" src="@/assets/images/device3.png" />
+              <img v-if="!cd_list[1].total_size" src="@/assets/images/device2.png" />
+              <div class="device_right_top_img_text" :class="{'device_right_top_img_text1': cd_list[1].total_size}">{{ diskTypes[cd_list[1].dev_type] }}</div>
+            </div>
             <div class="device_right_top_content">
               <div class="device_right_top_title">{{ cd_list[1].dev_path || '' }}({{ $store.state.chat.CDName[cd_list[1].cd_pos] }})</div>
               <template v-if="cd_list[1].total_size">
                 <div class="flex_box device_right_top_progress">
-                  <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_progress_box" :style="{ width: cd_list[1].cd_taskid.copy_scheduler + '%' }"></div>
                 </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>
               </template>
@@ -162,19 +170,30 @@
               <img src="@/assets/images/inform1_icon.png" />
               <div>动态</div>
             </div>
-            <div class="flex_box notice_all">
+            <div @click="showAll = !showAll" class="flex_box notice_all">
               <img src="@/assets/images/Calendar_icon.png" />
-              <div>全部日志</div>
+              <div>{{ showAll?'最新日志':'全部日志' }}</div>
             </div>
           </div>
           <div class="notice_list">
-            <div v-for="(item, index) in noticeList" :key="index" class="flex_box flex_row_between notice_item">
+            <template v-if="!showAll">
-              <div class="notice_content">
+              <div v-for="(item, index) in logList" :key="index" :class="`flex_box flex_row_between notice_item notice_${item.status}`">
-                <span>{{ index + 1 }}</span
+                <div class="notice_content">
-                >{{ item.message }}
+                  <span>{{ index + 1 }}</span
+                  >[{{ item.status }}]{{ item.text }}
+                </div>
+                <div class="notice_time">{{ item.time.split(' ')[0] }}</div>
               </div>
-              <div class="notice_time">{{ item.createtime }}</div>
+            </template>
-            </div>
+            <template v-if="showAll">
+              <div v-for="(item, index) in allLogList" :key="index" :class="`flex_box flex_row_between notice_item notice_${item.status}`">
+                <div class="notice_content">
+                  <span>{{ index + 1 }}</span
+                  >[{{ item.status }}]{{ item.text }}
+                </div>
+                <div class="notice_time">{{ item.time.split(' ')[0] }}</div>
+              </div>
+            </template>
           </div>
         </div>
       </div>
@@ -226,7 +245,7 @@
         <!-- <el-table-column prop="DataSource" label="来源"></el-table-column> -->
         <el-table-column label="类型">
           <template slot-scope="scope">
-            <div>{{ typeList[scope.row.ass_task[0].cd_type] }}</div>
+            <div>{{ CDTypes[scope.row.ass_task[0].cd_type] }}</div>
           </template>
         </el-table-column>
         <el-table-column prop="task_size" label="大小">
@@ -311,27 +330,8 @@ export default {
       ],
       // 剩余容量
       progressW: 75,
-      // 日志
-      noticeList: [
-        {
-          id: 1,
-          message: '[2024-11-07 17:58:18][文件刻录 20241107175818][执行任务完成]',
-          createtime: '2024 10-13'
-        },
-        {
-          id: 2,
-          message: '[2024-11-07 17:53:13][文件刻录 20241107175313][开始执行文件刻录任务]',
-          createtime: '2024 10-13'
-        }
-        // {
-        //   id: 3,
-        //   message: '[2024-11-07 17:52:28][文件刻录 20241107175228][接收到任务]',
-        //   createtime: '2024 10-13'
-        // },
-      ],
       // 作业列表
       task_list: [],
-      typeList: ['', 'CD', 'DVD', 'DVD_DL', 'BD', 'BD_DL', 'BD_TL', 'BD_QL'],
       statusList: {
         '0': '新建',
         '1': '等待中',
@@ -344,8 +344,14 @@ export default {
       },
       // 设备信息
       printer_info: {},
-      // g光盘信息
+      // 光盘信息
+      diskTypes: {},
+      CDTypes: {},
       cd_list: [],
+      // 日志信息
+      logList: [],
+      allLogList: [],
+      showAll: false
     }
   },
   watch: {
@@ -374,14 +380,35 @@ export default {
         } else {
           this.runText = this.$store.state.chat.PrinterStatus[val.printer_status]
         }
-        this.printer_info = val
+        this.printer_info = {...val}
+      },
+      deep: true,
+      immediate: true
+    },
+    '$store.state.chat.diskTypes': {
+      handler(val) {
+        this.diskTypes = {...val}
+      },
+      deep: true,
+      immediate: true
+    },
+    '$store.state.chat.CDTypes': {
+      handler(val) {
+        this.CDTypes = {...val}
       },
       deep: true,
       immediate: true
     },
     '$store.state.chat.cd_list': {
       handler(val) {
-        this.cd_list = val
+        this.cd_list = [...val]
+      },
+      deep: true,
+      immediate: true
+    },
+    '$store.state.chat.logList': {
+      handler(val) {
+        this.logList = [...val]
       },
       deep: true,
       immediate: true
@@ -559,10 +586,16 @@ $red: #ff0000;
                           bottom: 0;
                           width: 100%;
                           height: 0;
-                          background: linear-gradient( 90deg, #92324E 0%, #CC224B 10%, #CC224B 90%, #94314E 100%);
+                          background-color: $green;
                           border-radius: 4px;
                           z-index: 4;
                         }
+                        .device_info_option_cap_box1 {
+                          background-color: $yellow;
+                        }
+                        .device_info_option_cap_box2 {
+                          background-color: $red;
+                        }
                       }
                     }
                     .device_info_option_img {
@@ -748,8 +781,32 @@ $red: #ff0000;
         .device_right_top_item {
           width: calc(50% - 25px);
           .device_right_top_img {
-            width: 116px;
+            width: 120px;
-            height: 101px;
+            height: 120px;
+            position: relative;
+            img {
+              width: 100%;
+              height: 100%;
+            }
+            .device_right_top_img_text {
+              position: absolute;
+              background: #000;
+              border-radius: 4px;
+              padding: 4px 10px;
+              font-size: 15px;
+              font-weight: 500;
+              color: #fff;
+              text-align: center;
+              left: 15px;
+              bottom: 45px;
+            }
+            .device_right_top_img_text1 {
+              left: 0;
+              bottom: 0;
+              padding: 6px;
+              font-size: 18px;
+              width: 100%;
+            }
           }
           .device_right_top_content {
             width: calc(100% - 136px);
@@ -841,13 +898,6 @@ $red: #ff0000;
             background-color: #f8f8f8;
             margin-bottom: 3px;
             cursor: pointer;
-            &:hover {
-              background-color: #ffe6e6;
-              .notice_content,
-              .notice_time {
-                color: #ff0000;
-              }
-            }
             .notice_content {
               width: calc(100% - 108px);
               font-size: 16px;
@@ -867,6 +917,24 @@ $red: #ff0000;
               line-height: 24px;
             }
           }
+          .notice_INFO {
+            .notice_content,
+            .notice_time {
+              color: $green;
+            }
+          }
+          .notice_DEBUG {
+            .notice_content,
+            .notice_time {
+              color: $yellow;
+            }
+          }
+          .notice_ERROR {
+            .notice_content,
+            .notice_time {
+              color: $red;
+            }
+          }
         }
       }
     }