瀏覽代碼

Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

hongrunxia 4 月之前
父節點
當前提交
6a696d07e0

+ 11 - 0
src/views/vent/home/colliery/components/wind-device.vue

@@ -77,6 +77,17 @@
       warnCount: 0,
       closeCount: 0,
     },
+    fanlocaldp: {
+      url: getAssetURL('vent/alarm-icons/js.png'),
+      level: 100,
+      text: '',
+      allText: '总数',
+      warnText: '报警数',
+      closeText: '断开数',
+      allCount: 0,
+      warnCount: 0,
+      closeCount: 0,
+    },
     gate: {
       url: getAssetURL('vent/alarm-icons/fm.png'),
       level: 100,

+ 41 - 30
src/views/vent/monitorManager/alarmMonitor/alarm.data.ts

@@ -118,8 +118,8 @@ export const levelHisColumns: BasicColumn[] = [
 export const iconsMonitor = reactive({
   fanmain: {
     url: getAssetURL('vent/alarm-icons/zhushan.png'),
-    level: 100,
-    text: '主风机',
+    // level: 100,
+    text: '',
     allText:'总数',
     warnText:'报警数',
     closeText:'断开数',
@@ -129,8 +129,19 @@ export const iconsMonitor = reactive({
   },
   fanlocal: {
     url: getAssetURL('vent/alarm-icons/js.png'),
-    level: 100,
-    text: '局部风机',
+    // level: 100,
+    text: '',
+    allText:'总数',
+    warnText:'报警数',
+    closeText:'断开数',
+    allCount:0,
+    warnCount:0,
+    closeCount:0,
+  },
+  fanlocaldp: {
+    url: getAssetURL('vent/alarm-icons/js.png'),
+    // level: 100,
+    text: '',
     allText:'总数',
     warnText:'报警数',
     closeText:'断开数',
@@ -140,8 +151,8 @@ export const iconsMonitor = reactive({
   },
   gate: {
     url: getAssetURL('vent/alarm-icons/fm.png'),
-    level: 100,
-    text: '风门',
+    // level: 100,
+    text: '',
     allText:'总数',
     warnText:'报警数',
     closeText:'断开数',
@@ -151,8 +162,8 @@ export const iconsMonitor = reactive({
   },
   window: {
     url: getAssetURL('vent/alarm-icons/fc.png'),
-    level: 100,
-    text: '风窗',
+    // level: 100,
+    text: '',
     allText:'总数',
     warnText:'报警数',
     closeText:'断开数',
@@ -162,8 +173,8 @@ export const iconsMonitor = reactive({
   },
   windrect: {
     url: getAssetURL('vent/alarm-icons/cf.png'),
-    level: 100,
-    text: '测风装置',
+    // level: 100,
+    text: '',
     allText:'总数',
     warnText:'报警数',
     closeText:'断开数',
@@ -173,8 +184,8 @@ export const iconsMonitor = reactive({
   },
   forcFan: {
     url: getAssetURL('vent/alarm-icons/yafeng.png'),
-    level: 100,
-    text: '压风装置',
+    // level: 100,
+    text: '',
     allText:'总数',
     warnText:'报警数',
     closeText:'断开数',
@@ -184,8 +195,8 @@ export const iconsMonitor = reactive({
   },
   spray: {
     url: getAssetURL('vent/alarm-icons/penlin.png'),
-    level: 100,
-    text: '喷淋',
+    // level: 100,
+    text: '',
     allText:'总数',
     warnText:'报警数',
     closeText:'断开数',
@@ -195,8 +206,8 @@ export const iconsMonitor = reactive({
   },
   dustdev: {
     url: getAssetURL('vent/alarm-icons/penfen.png'),
-    level: 100,
-    text: '喷粉',
+    // level: 100,
+    text: '',
     allText:'总数',
     warnText:'报警数',
     closeText:'断开数',
@@ -206,8 +217,8 @@ export const iconsMonitor = reactive({
   },
   nitrogen: {
     url: getAssetURL('vent/alarm-icons/zhudan.png'),
-    level: 100,
-    text: '注氮',
+    // level: 100,
+    text: '',
     allText:'总数',
     warnText:'报警数',
     closeText:'断开数',
@@ -217,8 +228,8 @@ export const iconsMonitor = reactive({
   },
   pulping: {
     url: getAssetURL('vent/alarm-icons/zhujiang.png'),
-    level: 100,
-    text: '注浆',
+    // level: 100,
+    text: '',
     allText:'总数',
     warnText:'报警数',
     closeText:'断开数',
@@ -228,8 +239,8 @@ export const iconsMonitor = reactive({
   },
   atomizing: {
     url: getAssetURL('vent/alarm-icons/pw.png'),
-    level: 100,
-    text: '跟机喷雾',
+    // level: 100,
+    text: '',
     allText:'总数',
     warnText:'报警数',
     closeText:'断开数',
@@ -239,8 +250,8 @@ export const iconsMonitor = reactive({
   },
   dustsensor: {
     url: getAssetURL('vent/alarm-icons/ccq.png'),
-    level: 100,
-    text: '除尘器',
+    // level: 100,
+    text: '',
     allText:'总数',
     warnText:'报警数',
     closeText:'断开数',
@@ -250,8 +261,8 @@ export const iconsMonitor = reactive({
   },
   gas: {
     url: getAssetURL('vent/alarm-icons/wasichoucaig.png'),
-    level: 100,
-    text: '瓦斯抽采管路',
+    // level: 100,
+    text: '',
     allText:'总数',
     warnText:'报警数',
     closeText:'断开数',
@@ -261,8 +272,8 @@ export const iconsMonitor = reactive({
   },
   pump: {
     url: getAssetURL('vent/alarm-icons/wasibeng.png'),
-    level: 100,
-    text: '瓦斯泵',
+    // level: 100,
+    text: '',
     allText:'总数',
     warnText:'报警数',
     closeText:'断开数',
@@ -272,8 +283,8 @@ export const iconsMonitor = reactive({
   },
   modelsensor: {
     url: getAssetURL('vent/alarm-icons/cf.png'),
-    level: 100,
-    text: '传感器',
+    // level: 100,
+    text: '',
     allText:'总数',
     warnText:'报警数',
     closeText:'断开数',

+ 4 - 84
src/views/vent/monitorManager/alarmMonitor/index.vue

@@ -68,36 +68,12 @@
         <template #container>
           <div class="icons-box" @mouseleave="resetScroll">
             <template v-for="(item, key) in iconsMonitor" :key="key">
-              <div class="icon-item" v-if="[0, 101, 102, 103, 104, 201].includes(item.level)">
+              <div class="icon-item" v-if="item.text">
                 <div class="wrapper">
                   {{ item.text }}
                 </div>
                 <div></div>
                 <img :src="item.url" :alt="item.text" />
-                <!-- <div class="level-text" :class="{
-                  'level-text-0': item.level == 0,
-                  'level-text-1': item.level == 101,
-                  'level-text-2': item.level == 102,
-                  'level-text-3': item.level == 103,
-                  'level-text-4': item.level == 104,
-                  'level-text-5': item.level == 201,
-                  'level-text-6':
-                    item.level != 0 && item.level != 101 && item.level != 102 && item.level != 103 && item.level != 104 && item.level != 201,
-                }">{{
-                  item.level == 0
-                    ? '低风险'
-                    : item.level == 101
-                      ? '低风险'
-                      : item.level == 102
-                        ? '一般风险'
-                        : item.level == 103
-                          ? '较大风险'
-                          : item.level == 104
-                            ? '较大风险'
-                            : item.level == 201
-                              ? '报警'
-                              : '未连接'
-                }}</div> -->
                 <div class="level-text">
                   <div class="all-count">
                     <span>{{ `${item.allText}&nbsp:&nbsp` }}</span>
@@ -476,7 +452,8 @@
     centerData.levels = data[0];
     Object.keys(iconsMonitor).forEach((el) => {
       if (res.info.devicekindInfo[el]) {
-        iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel;
+        // iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel;
+        iconsMonitor[el].text = res.info.devicekindInfo[el].name;
         iconsMonitor[el].allCount = res.info.devicekindInfo[el].totalcount;
         iconsMonitor[el].warnCount = res.info.devicekindInfo[el].count;
         iconsMonitor[el].closeCount = res.info.devicekindInfo[el].netstatus;
@@ -698,21 +675,11 @@
       }
 
       .icons-box {
-        // display: flex;  lxh
-        // flex-wrap: wrap; lxh
-        // max-height: 365px;
         height: 365px;
         overflow-y: hidden;
-
-        // align-items: start ;
         &:hover {
           overflow-y: auto;
           overflow-x: auto;
-
-          // &>.icon-item {
-          //   animation-play-state: paused;
-          //   animation: move1 2s linear;
-          // }
         }
 
         .icon-item {
@@ -721,8 +688,6 @@
           align-items: center;
           justify-content: center;
           padding: 3px;
-          // animation: move 10s linear infinite;
-
           &:nth-child(even) {
             padding-right: 0px;
           }
@@ -730,13 +695,8 @@
           .level-text {
             width: 245px;
             display: flex;
-            justify-content: space-between;
+            justify-content: space-around;
             position: absolute;
-            // top: 51px; lxh
-            // left: 25px; lxh
-            // color: #fff; lxh
-            // font-family: 'douyuFont'; lxh
-            // font-size: 12px; lxh
             top: 48px;
             left: 180px;
             color: #ffffffe0;
@@ -747,52 +707,13 @@
             .all-count,
             .warn-count,
             .close-count {
-              // margin: 0px 5px;
               .num-count {
                 font-family: 'douyuFont';
                 font-size: 12px;
               }
             }
           }
-
-          // .level-text-0 {
-          //   color: rgb(145, 230, 9);
-          //   text-shadow: 2px 2px 4px #001c22;
-          // }
-
-          // .level-text-1 {
-          //   color: rgb(0, 242, 255);
-          //   text-shadow: 2px 2px 4px #001c22;
-          // }
-
-          // .level-text-2 {
-          //   color: #ffff35;
-          //   text-shadow: 2px 2px 4px #313100;
-          // }
-
-          // .level-text-3 {
-          //   color: #ffbe69;
-          //   text-shadow: 2px 2px 4px #271600;
-          // }
-
-          // .level-text-4 {
-          //   color: #ff6f00;
-          //   // color: #09caff;
-          //   text-shadow: 2px 2px 4px #060200;
-          // }
-
-          // .level-text-5 {
-          //   color: #ff0000;
-          //   text-shadow: 2px 2px 4px #200000;
-          // }
-
-          // .level-text-6 {
-          //   color: #bbb;
-          //   text-shadow: 2px 2px 4px #001c22;
-          // }
-
           img {
-            // width: 225px;  lxh
             width: 427px;
             height: 79px;
           }
@@ -801,7 +722,6 @@
         .wrapper {
           position: absolute;
           top: 48px;
-          // left: 82px; lxh
           left: 112px;
           color: #ffffffe0;
           font-size: 13px;

+ 1 - 1
src/views/vent/monitorManager/alarmMonitor/warn/deviceWarn.vue

@@ -11,7 +11,7 @@
       >返回</a-button
     >
     <div class="device-type-box">
-      <div v-for="item in iconsMonitor" :key="item.key" class="device-icon-box">
+      <div v-for="(item,index) in iconsMonitor" :key="index" class="device-icon-box">
         <img :src="item.url" :alt="item.text" />
       </div>
     </div>

+ 17 - 16
src/views/vent/monitorManager/deviceMonitorWarn/deviceMonitorWarn.data.ts

@@ -1,19 +1,20 @@
 import { reactive, markRaw, defineAsyncComponent } from 'vue';
-
+import { getAssetURL } from '/@/utils/ui';
 export const cardList = reactive<any[]>([
-  { name: 'modelsensor', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
-  { name: 'fanmain', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
-  { name: 'fanlocal', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
-  { name: 'gate', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
-  { name: 'window', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
-  { name: 'windrect', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
-  { name: 'forcFan', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
-  { name: 'spray', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
-  { name: 'dustdev', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
-  { name: 'nitrogen', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
-  { name: 'pulping', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
-  { name: 'atomizing', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
-  { name: 'dustsensor', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
-  { name: 'gas', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
-  { name: 'pump', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
+  { name: 'modelsensor', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '', url: getAssetURL('device/cgq.png'),url1: getAssetURL('device/cgq-1.png'), },
+  { name: 'fanmain', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '', url: getAssetURL('device/zhufengji.png'),url1: getAssetURL('device/zhufengji-1.png'), },
+  { name: 'fanlocal', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' , url: getAssetURL('device/jubufengji.png'),url1: getAssetURL('device/jubufengji-1.png'),},
+  { name: 'fanlocaldp', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '', url: getAssetURL('device/jubufengji.png'), url1: getAssetURL('device/jubufengji-1.png'), },
+  { name: 'gate', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '', url: getAssetURL('device/fengmen.png'),url1: getAssetURL('device/fengmen-1.png'), },
+  { name: 'window', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '', url: getAssetURL('device/fengchuang.png'),url1: getAssetURL('device/fengchuang-1.png'), },
+  { name: 'windrect', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '', url: getAssetURL('device/cefeng.png'),url1: getAssetURL('device/cefeng-1.png'), },
+  { name: 'forcFan', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' , url: getAssetURL('device/yafeng.png'),url1: getAssetURL('device/yafeng-1.png'),},
+  { name: 'spray', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '', url: getAssetURL('device/penling.png'),url1: getAssetURL('device/penling-1.png'), },
+  { name: 'dustdev', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' , url: getAssetURL('device/penfen.png'), url1: getAssetURL('device/penfen-1.png'),},
+  { name: 'nitrogen', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '', url: getAssetURL('device/zhudan.png'),url1: getAssetURL('device/zhudan-1.png'), },
+  { name: 'pulping', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '', url: getAssetURL('device/zhujiang.png'),url1: getAssetURL('device/zhujiang-1.png'), },
+  { name: 'atomizing', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '', url: getAssetURL('device/penwu.png'),url1: getAssetURL('device/penwu-1.png'), },
+  { name: 'dustsensor', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '', url: getAssetURL('device/chuchen.png'),url1: getAssetURL('device/chuchen-1.png'), },
+  { name: 'gas', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '', url: getAssetURL('device/wsgl.png'),url1: getAssetURL('device/wsgl-1.png'), },
+  { name: 'pump', title: '', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '', url: getAssetURL('device/wsb.png'),url1: getAssetURL('device/wsb-1.png'), },
 ]);

+ 44 - 225
src/views/vent/monitorManager/deviceMonitorWarn/index.vue

@@ -7,7 +7,8 @@
       <div class="left-box">
         <div class="left-box-content">
           <div v-for="(item, index) in cardList" :key="index" @click="cardClick(item, index)">
-            <div v-if="item.title" :class="activeIndex == index ? 'card-box1' : 'card-box'">
+            <div v-if="item.title" class="card-box">
+              <img :src="activeIndex == index ? item.url1 : item.url" alt="">
               <div class="card-item">
                 <div class="item-title">
                   {{ item.title }}
@@ -198,7 +199,7 @@ async function getDeviceCard() {
       el.warnVal = res.device[el.name].count || 0;
       el.closeVal = res.device[el.name].netstatus || 0;
       el.devicekind = res.device[el.name].code || '';
-      el.title= res.device[el.name].name || '';
+      el.title = res.device[el.name].name || '';
     }
   });
 }
@@ -242,232 +243,50 @@ defineExpose({ setLoading });
         flex-wrap: wrap;
         overflow-y: auto;
 
-        .card-box {
-          width: 265px;
-          height: 112px;
-          margin: 0px 5px;
-
-          &:nth-child(1) {
-            background: url('../../../../assets/images/device/cgq.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(2) {
-            background: url('../../../../assets/images/device/zhufengji.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(3) {
-            background: url('../../../../assets/images/device/jubufengji.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(4) {
-            background: url('../../../../assets/images/device/fengmen.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(5) {
-            background: url('../../../../assets/images/device/fengchuang.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(6) {
-            background: url('../../../../assets/images/device/cefeng.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(7) {
-            background: url('../../../../assets/images/device/yafeng.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(8) {
-            background: url('../../../../assets/images/device/penling.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(9) {
-            background: url('../../../../assets/images/device/penfen.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(10) {
-            background: url('../../../../assets/images/device/zhudan.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(11) {
-            background: url('../../../../assets/images/device/zhujiang.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(12) {
-            background: url('../../../../assets/images/device/penwu.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(13) {
-            background: url('../../../../assets/images/device/chuchen.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(14) {
-            background: url('../../../../assets/images/device/wsgl.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(15) {
-            background: url('../../../../assets/images/device/wsb.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          .card-item {
+        div {
+          .card-box {
             position: relative;
-            width: 100%;
-            height: 100%;
-            color: #fff;
-
-            .item-title {
-              position: absolute;
-              left: 130px;
-              top: 20px;
-              font-size: 12px;
-              font-family: 'douyuFont';
-              color: #01fefc;
-            }
-
-            .item-sum {
-              position: absolute;
-              left: 130px;
-              top: 40px;
-            }
-
-            .item-warn {
+            width: 265px;
+            height: 112px;
+            margin: 0px 5px;
+            img{
               position: absolute;
-              left: 130px;
-              top: 60px;
+              left: 0;
+              width: 100%;
+              height: 100%;
             }
-
-            .item-close {
-              position: absolute;
-              left: 130px;
-              top: 80px;
-            }
-          }
-        }
-
-        .card-box1 {
-          width: 265px;
-          height: 112px;
-          margin: 0px 5px;
-
-          &:nth-child(1) {
-            background: url('../../../../assets/images/device/cgq-1.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(2) {
-            background: url('../../../../assets/images/device/zhufengji-1.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(3) {
-            background: url('../../../../assets/images/device/jubufengji-1.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(4) {
-            background: url('../../../../assets/images/device/fengmen-1.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(5) {
-            background: url('../../../../assets/images/device/fengchuang-1.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(6) {
-            background: url('../../../../assets/images/device/cefeng-1.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(7) {
-            background: url('../../../../assets/images/device/yafeng-1.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(8) {
-            background: url('../../../../assets/images/device/penling-1.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(9) {
-            background: url('../../../../assets/images/device/penfen-1.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(10) {
-            background: url('../../../../assets/images/device/zhudan-1.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(11) {
-            background: url('../../../../assets/images/device/zhujiang-1.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(12) {
-            background: url('../../../../assets/images/device/penwu-1.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(13) {
-            background: url('../../../../assets/images/device/chuchen-1.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(14) {
-            background: url('../../../../assets/images/device/wsgl-1.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          &:nth-child(15) {
-            background: url('../../../../assets/images/device/wsb-1.png') no-repeat center;
-            background-size: 100% 100%;
-          }
-
-          .card-item {
-            position: relative;
-            width: 100%;
-            height: 100%;
-            color: #fff;
-
-            .item-title {
-              position: absolute;
-              left: 130px;
-              top: 20px;
-              font-size: 12px;
-              font-family: 'douyuFont';
-              color: #01fefc;
-            }
-
-            .item-sum {
-              position: absolute;
-              left: 130px;
-              top: 40px;
-            }
-
-            .item-warn {
-              position: absolute;
-              left: 130px;
-              top: 60px;
-            }
-
-            .item-close {
-              position: absolute;
-              left: 130px;
-              top: 80px;
+            .card-item {
+              position: relative;
+              width: 100%;
+              height: 100%;
+              color: #fff;
+
+              .item-title {
+                position: absolute;
+                left: 130px;
+                top: 20px;
+                font-size: 12px;
+                font-family: 'douyuFont';
+                color: #01fefc;
+              }
+
+              .item-sum {
+                position: absolute;
+                left: 130px;
+                top: 40px;
+              }
+
+              .item-warn {
+                position: absolute;
+                left: 130px;
+                top: 60px;
+              }
+
+              .item-close {
+                position: absolute;
+                left: 130px;
+                top: 80px;
+              }
             }
           }
         }