|  |  | 
 |  |  |             <div class="list_wrap"> | 
 |  |  |               <div class="list"> | 
 |  |  |                 <div class="header line"> | 
 |  |  |                   <span class="item name">设备类型</span> | 
 |  |  |                   <span class="item name">设备名称</span> | 
 |  |  |                   <span class="item">总数</span> | 
 |  |  |                   <span class="item">报警</span> | 
 |  |  |                   <span class="item">屏蔽</span> | 
 |  |  | 
 |  |  |                         <span class="item" style="color: #FEAF01;">{{ item.alarmDeviceNum || 0 }}</span> | 
 |  |  |                         <span class="item">{{ item.shieldDeviceNum || 0 }}</span> | 
 |  |  |                         <span class="item">{{ item.errDeviceNum || 0 }}</span> | 
 |  |  |                         <span class="item">{{ item.offlineDeviceNum || 0 }}</span> | 
 |  |  |                         <span class="item">{{ item.onlineDeviceNum || 0 }}</span> | 
 |  |  |                       </div> | 
 |  |  |                       <div class="separate"></div> | 
 |  |  |                     </div> | 
 |  |  | 
 |  |  |                 <img src="@/assets/images/FireFighting/xiaofang_ic_zaixian@2x.png" alt=""> | 
 |  |  |                 <div class="content"> | 
 |  |  |                   <div class="name">总数</div> | 
 |  |  |                   <div class="num">{{ dataList4.onlineDeviceNum }}</div> | 
 |  |  |                   <div class="num">{{ dataList4.onlineDeviceNum || 0 }}</div> | 
 |  |  |                 </div> | 
 |  |  |               </div> | 
 |  |  |               <div class="item"> | 
 |  |  |                 <img src="@/assets/images/FireFighting/xiaofang_ic_baojing@2x.png" alt=""> | 
 |  |  |                 <div class="content"> | 
 |  |  |                   <div class="name">报警</div> | 
 |  |  |                   <div class="num num2">{{ dataList4.alarmDeviceNum }}</div> | 
 |  |  |                 </div> | 
 |  |  |               </div> | 
 |  |  |               <div class="item"> | 
 |  |  |                 <img src="@/assets/images/FireFighting/xiaofang_ic_guzhang@2x.png" alt=""> | 
 |  |  |                 <div class="content"> | 
 |  |  |                   <div class="name">故障</div> | 
 |  |  |                   <div class="num num3">{{ dataList4.errDeviceNum }}</div> | 
 |  |  |                 </div> | 
 |  |  |               </div> | 
 |  |  |               <div class="item"> | 
 |  |  |                 <img src="@/assets/images/FireFighting/xiaofang_ic_lixian@2x.png" alt=""> | 
 |  |  |                 <div class="content"> | 
 |  |  |                   <div class="name">正常</div> | 
 |  |  |                   <div class="num num4">{{ dataList4.offlineDeviceNum }}</div> | 
 |  |  |                   <div class="num num2">{{ dataList4.alarmDeviceNum || 0}}</div> | 
 |  |  |                 </div> | 
 |  |  |               </div> | 
 |  |  |               <div class="item"> | 
 |  |  | 
 |  |  |                 <div class="content"> | 
 |  |  |                   <div class="name">屏蔽</div> | 
 |  |  |                   <div class="num num5">{{ dataList4.shieldDeviceNum || 0 }}</div> | 
 |  |  |                 </div> | 
 |  |  |               </div> | 
 |  |  |               <div class="item"> | 
 |  |  |                 <img src="@/assets/images/FireFighting/xiaofang_ic_guzhang@2x.png" alt=""> | 
 |  |  |                 <div class="content"> | 
 |  |  |                   <div class="name">故障</div> | 
 |  |  |                   <div class="num num3">{{ dataList4.errDeviceNum || 0 }}</div> | 
 |  |  |                 </div> | 
 |  |  |               </div> | 
 |  |  |               <div class="item"> | 
 |  |  |                 <img src="@/assets/images/FireFighting/xiaofang_ic_zhengchang@2x.png" alt=""> | 
 |  |  |                 <div class="content"> | 
 |  |  |                   <div class="name">正常</div> | 
 |  |  |                   <div class="num num4">{{ dataList4.onlineDeviceNum || 0 }}</div> | 
 |  |  |                 </div> | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  | 
 |  |  |                   <div class="item"> | 
 |  |  |                     <img class="icon" src="@/assets/images/FireFighting/ic_wendu@2x.png" alt=""> | 
 |  |  |                     <div class="content"> | 
 |  |  |                       <div class="num">{{ dataList8[dataIndex8].temperatureData?.latestValue }}<span>°C</span></div> | 
 |  |  |                       <div class="num" | 
 |  |  |                         v-if="dataList8[dataIndex8].temperatureData && dataList8[dataIndex8].temperatureData.latestValue"> | 
 |  |  |                         {{ Number(dataList8[dataIndex8].temperatureData.latestValue).toFixed(1) }}<span>°C</span></div> | 
 |  |  |                       <div class="la">阈值 {{ dataList8[dataIndex8].temperatureData?.alarmLow }}~{{ | 
 |  |  |                         dataList8[dataIndex8].temperatureData?.alarmHigh }}°C</div> | 
 |  |  |                     </div> | 
 |  |  | 
 |  |  |                   <div class="item"> | 
 |  |  |                     <img class="icon" src="@/assets/images/FireFighting/ic_shidu@2x.png" alt=""> | 
 |  |  |                     <div class="content"> | 
 |  |  |                       <div class="num">{{ dataList8[dataIndex8].humidityData?.latestValue }}<span>%</span></div> | 
 |  |  |                       <div class="num" | 
 |  |  |                         v-if="dataList8[dataIndex8].humidityData && dataList8[dataIndex8].humidityData.latestValue">{{ | 
 |  |  |                           Number(dataList8[dataIndex8].humidityData.latestValue).toFixed(1) }}<span>%</span></div> | 
 |  |  |                       <div class="la">阈值 {{ dataList8[dataIndex8].humidityData?.alarmLow }}~{{ | 
 |  |  |                         dataList8[dataIndex8].humidityData?.alarmHigh }}</div> | 
 |  |  |                         dataList8[dataIndex8].humidityData?.alarmHigh }}%</div> | 
 |  |  |                     </div> | 
 |  |  |                   </div> | 
 |  |  |                 </div> | 
 |  |  | 
 |  |  |                         <span class="status" v-else-if="item.handleStatus == 3">核实中</span> | 
 |  |  |                         <span v-else class="status">未核实</span> | 
 |  |  |                       </div> | 
 |  |  |                       <div class="have_time">已经发生{{ item.haveTime }}</div> | 
 |  |  |                       <div class="have_time">已发生{{ item.haveTime }}</div> | 
 |  |  |                     </div> | 
 |  |  |                     <div class="wrap"> | 
 |  |  |                       <div class="title"> | 
 |  |  | 
 |  |  |   let conNum = maxNum - minNum | 
 |  |  |   let acNum = item.obj.value.replaceAll('M', '') | 
 |  |  |   var data = (((acNum - minNum) / conNum) * 100).toFixed(0) | 
 |  |  |   console.log('data', data); | 
 |  |  |    | 
 |  |  |   console.log('data', data) | 
 |  |  |  | 
 |  |  |   const option = { | 
 |  |  |     tooltip: { | 
 |  |  |       trigger: 'none', | 
 |  |  | 
 |  |  |       { | 
 |  |  |         name: '最上层立体圆', | 
 |  |  |         type: 'pictorialBar', | 
 |  |  |         symbolSize: [260, 40], | 
 |  |  |         symbolSize: [182, 40], | 
 |  |  |         symbolOffset: [0, -20], | 
 |  |  |         z: 12, | 
 |  |  |         itemStyle: { | 
 |  |  | 
 |  |  |       { | 
 |  |  |         name: '中间立体圆', | 
 |  |  |         type: 'pictorialBar', | 
 |  |  |         symbolSize: [260, 40], | 
 |  |  |         symbolSize: [182, 40], | 
 |  |  |         symbolOffset: [0, -20], | 
 |  |  |         z: 12, | 
 |  |  |         itemStyle: { | 
 |  |  | 
 |  |  |       { | 
 |  |  |         name: '最底部立体圆', | 
 |  |  |         type: 'pictorialBar', | 
 |  |  |         symbolSize: [260, 40], | 
 |  |  |         symbolSize: [182, 40], | 
 |  |  |         symbolOffset: [0, 20], | 
 |  |  |         z: 12, | 
 |  |  |         itemStyle: { | 
 |  |  | 
 |  |  |         label: { | 
 |  |  |           distance: 15, | 
 |  |  |           show: true, | 
 |  |  |           position: data > 58 ? 'inside' : 'top', | 
 |  |  |           position: data > 52 ? 'inside' : 'top', | 
 |  |  |           formatter: '{c}' + '%', | 
 |  |  |           fontSize: 80, | 
 |  |  |           fontSize: 72, | 
 |  |  |           color: '#1AFCFF', | 
 |  |  |           textShadowColor: '#03C7F9', | 
 |  |  |           textShadowBlur: 30, | 
 |  |  | 
 |  |  |   getFighalarmDataList().then(res => { | 
 |  |  |     dataList7.value = res.data || [] | 
 |  |  |     dataList7.value = dataList7.value.map(item => { | 
 |  |  |       item.haveTime = dayjs.duration(new Date().getTime() - new Date(item.alarmTime).getTime()).format('H小时m分钟') | 
 |  |  |       let times = new Date().getTime() - new Date(item.alarmTime).getTime() | 
 |  |  |       if (times > 86400000) { | 
 |  |  |         item.haveTime = dayjs.duration(times).format('D天H小时m分钟') | 
 |  |  |       } else if (times > 3600000) { | 
 |  |  |         item.haveTime = dayjs.duration(times).format('H小时m分钟') | 
 |  |  |       } else { | 
 |  |  |         item.haveTime = dayjs.duration(times).format('m分钟') | 
 |  |  |       } | 
 |  |  |       return item | 
 |  |  |     }) | 
 |  |  |   }) | 
 |  |  | 
 |  |  |     getData7() | 
 |  |  |   }, 60 * 1000) | 
 |  |  |   setInterval(() => { | 
 |  |  |  | 
 |  |  |     getData5() | 
 |  |  |     getData8() | 
 |  |  |  | 
 |  |  |   }, 60 * 60 * 1000) | 
 |  |  |  | 
 |  |  |   setInterval(() => { | 
 |  |  |     changeData8(1) | 
 |  |  |     changeData9(1) | 
 |  |  |   }, 1000 * 5) | 
 |  |  |  | 
 |  |  |   setTimeout(() => { | 
 |  |  |     loopFn1() | 
 |  |  |     loopFn2() | 
 |  |  |   }, 12000) | 
 |  |  |  | 
 |  |  |  | 
 |  |  | }) | 
 |  |  |  | 
 |  |  | 
 |  |  |             font-size: 14px; | 
 |  |  |  | 
 |  |  |             .item { | 
 |  |  |               flex: 1; | 
 |  |  |               flex: 2; | 
 |  |  |               display: flex; | 
 |  |  |               justify-content: center; | 
 |  |  |               /* margin: 0 6px; */ | 
 |  |  |               align-items: center; | 
 |  |  |               white-space: nowrap; | 
 |  |  |               overflow: hidden; | 
 |  |  |               text-overflow: ellipsis; | 
 |  |  |                | 
 |  |  |             } | 
 |  |  |  | 
 |  |  |             .name { | 
 |  |  |               flex: 2; | 
 |  |  |               flex: 5; | 
 |  |  |               justify-content: flex-start; | 
 |  |  |             } | 
 |  |  |  | 
 |  |  |             .warnning { | 
 |  |  | 
 |  |  |  | 
 |  |  |             .num3 { | 
 |  |  |               background-image: -webkit-linear-gradient(top, | 
 |  |  |                   #fff 0%, | 
 |  |  |                   #e9bf43 50%, | 
 |  |  |                   #eb8131 100%); | 
 |  |  |                   #eb8131 0%, | 
 |  |  |                   #d0a72c 50%, | 
 |  |  |                   #e9bf43 100%); | 
 |  |  |             } | 
 |  |  |  | 
 |  |  |             .num4 { | 
 |  |  |               background-image: -webkit-linear-gradient(top, | 
 |  |  |                   #fff 0%, | 
 |  |  |                   #9e9e9e 50%, | 
 |  |  |                   #9e9e9e 100%); | 
 |  |  |                   #78db91 50%, | 
 |  |  |                   #6de8b0 100%); | 
 |  |  |             } | 
 |  |  |  | 
 |  |  |             .num5 { | 
 |  |  | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     .center_box_two { | 
 |  |  |       width: 100%; | 
 |  |  |       width: 108%; | 
 |  |  |       display: flex; | 
 |  |  |       margin: 0 -4%; | 
 |  |  |  | 
 |  |  |       .content_wrap { | 
 |  |  |         flex: 1; | 
 |  |  | 
 |  |  |               /* border: 6px solid red; */ | 
 |  |  |               .liquidle_te { | 
 |  |  |                 font-weight: 500; | 
 |  |  |                 font-size: 16px; | 
 |  |  |                 font-size: 18px; | 
 |  |  |                 position: absolute; | 
 |  |  |                 top: 102px; | 
 |  |  |                 top: 99px; | 
 |  |  |                 left: 0; | 
 |  |  |                 width: 214px; | 
 |  |  |                 width: 206px; | 
 |  |  |                 display: flex; | 
 |  |  |                 flex-direction: column; | 
 |  |  |                 align-items: center; | 
 |  |  | 
 |  |  |                 .placeT { | 
 |  |  |                   font-size: 12px; | 
 |  |  |                   color: #869CC9; | 
 |  |  |                   margin-top: 4px; | 
 |  |  |                   margin-top: 6px; | 
 |  |  |                 } | 
 |  |  |               } | 
 |  |  |  | 
 |  |  | 
 |  |  |               } */ | 
 |  |  |  | 
 |  |  |               .liquidlevel { | 
 |  |  |                 width: 300px; | 
 |  |  |                 width: 220px; | 
 |  |  |                 height: 400px; | 
 |  |  |                 transform: scale(0.24); | 
 |  |  |                 transform: scale(0.27); | 
 |  |  |                 color: #fff; | 
 |  |  |                 text-align: center; | 
 |  |  |                 position: relative; | 
 |  |  |                 left: -42px; | 
 |  |  |                 top: -140px; | 
 |  |  |                 left: -8px; | 
 |  |  |                 top: -143px; | 
 |  |  |               } | 
 |  |  |             } | 
 |  |  |           } |