|  |  |  | 
|---|
|  |  |  | <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> | 
|---|
|  |  |  | 
|---|
|  |  |  | <div class="item"> | 
|---|
|  |  |  | <img class="icon" src="@/assets/images/FireFighting/ic_wendu@2x.png" alt=""> | 
|---|
|  |  |  | <div class="content"> | 
|---|
|  |  |  | <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="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" v-if="dataList8[dataIndex8].humidityData && dataList8[dataIndex8].humidityData.latestValue">{{ Number(dataList8[dataIndex8].humidityData.latestValue).toFixed(1) }}<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 }}°C</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', | 
|---|
|  |  |  | 
|---|
|  |  |  | label: { | 
|---|
|  |  |  | distance: 15, | 
|---|
|  |  |  | show: true, | 
|---|
|  |  |  | position: data > 52  ? 'inside' : 'top', | 
|---|
|  |  |  | position: data > 52 ? 'inside' : 'top', | 
|---|
|  |  |  | formatter: '{c}' + '%', | 
|---|
|  |  |  | fontSize: 72, | 
|---|
|  |  |  | color: '#1AFCFF', | 
|---|
|  |  |  | 
|---|
|  |  |  | 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 { | 
|---|
|  |  |  | 
|---|
|  |  |  | width: 108%; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | margin: 0 -4%; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .content_wrap { | 
|---|
|  |  |  | flex: 1; | 
|---|
|  |  |  | flex-shrink: 0; | 
|---|