|  |  | 
 |  |  |             <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 class="num num2">{{ dataList4.alarmDeviceNum || 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 }}</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.offlineDeviceNum }}</div> | 
 |  |  |                   <div class="num num4">{{ dataList4.onlineDeviceNum || 0 }}</div> | 
 |  |  |                 </div> | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  | 
 |  |  | const initWatergage = (id, item) => { | 
 |  |  |   const myChart = echarts.init(document.getElementById(id)) | 
 |  |  |   var data_value = item.obj.value.replaceAll('Mpa', '') | 
 |  |  |   const startI = item.level.indexOf('-') | 
 |  |  |   const endI = item.level.indexOf('Mpa') | 
 |  |  |   let maxNum = item.level.slice(startI + 1, endI) | 
 |  |  |   let minNum = item.level.slice(0, startI) | 
 |  |  |   // let maxNum =  | 
 |  |  |   // const startI = item.level.indexOf('-') | 
 |  |  |   // const endI = item.level.indexOf('Mpa') | 
 |  |  |   // let maxNum = item.level.slice(startI + 1, endI) | 
 |  |  |   // let minNum = item.level.slice(0, startI) | 
 |  |  |   let maxNum = item.max | 
 |  |  |   let minNum = item.min | 
 |  |  |   // let maxNum = | 
 |  |  |   const option = { | 
 |  |  |     barMaxWidth: 3, | 
 |  |  |     polar: { | 
 |  |  | 
 |  |  | } | 
 |  |  | const initLiquidlevel = (id, item) => { | 
 |  |  |   const myChart = echarts.init(document.getElementById(id)) | 
 |  |  |   const startI = item.level.indexOf('-') | 
 |  |  |   const endI = item.level.indexOf('M') | 
 |  |  |   let maxNum = item.level.slice(startI + 1, endI) | 
 |  |  |   let minNum = item.level.slice(0, startI) | 
 |  |  |   let conNum = maxNum - minNum | 
 |  |  |   // const startI = item.level.indexOf('-') | 
 |  |  |   // const endI = item.level.indexOf('M') | 
 |  |  |   // let maxNum = item.level.slice(startI + 1, endI) | 
 |  |  |   // let minNum = item.level.slice(0, startI) | 
 |  |  |   let maxNum = item.max | 
 |  |  |   let minNum = item.min | 
 |  |  |   let conNum = maxNum | 
 |  |  |   let acNum = item.obj.value.replaceAll('M', '') | 
 |  |  |   var data = (((acNum - minNum) / conNum) * 100).toFixed(0) | 
 |  |  |   console.log('data', data) | 
 |  |  | 
 |  |  |     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 { | 
 |  |  | 
 |  |  |   object-fit: cover; | 
 |  |  |   z-index: -1; | 
 |  |  | } | 
 |  |  | </style> | 
 |  |  | </style> |