ll

liukangdong

2025-02-11 8ac8aa810302c78d18d0b37b155bdbf814ae466f

 screen/src/views/FireFighting.vue

@@ -25,7 +25,7 @@
            <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>
@@ -41,7 +41,7 @@
                        <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>
@@ -90,28 +90,14 @@
                <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">
@@ -119,6 +105,20 @@
                <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>
@@ -147,7 +147,9 @@
                  <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>
@@ -155,9 +157,11 @@
                  <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>
@@ -284,7 +288,7 @@
                        <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">
@@ -520,8 +524,8 @@
  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',
@@ -559,7 +563,7 @@
      {
        name: '最上层立体圆',
        type: 'pictorialBar',
        symbolSize: [260, 40],
        symbolSize: [182, 40],
        symbolOffset: [0, -20],
        z: 12,
        itemStyle: {
@@ -577,7 +581,7 @@
      {
        name: '中间立体圆',
        type: 'pictorialBar',
        symbolSize: [260, 40],
        symbolSize: [182, 40],
        symbolOffset: [0, -20],
        z: 12,
        itemStyle: {
@@ -610,7 +614,7 @@
      {
        name: '最底部立体圆',
        type: 'pictorialBar',
        symbolSize: [260, 40],
        symbolSize: [182, 40],
        symbolOffset: [0, 20],
        z: 12,
        itemStyle: {
@@ -659,9 +663,9 @@
        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,
@@ -929,7 +933,14 @@
  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
    })
  })
@@ -1044,16 +1055,20 @@
    getData7()
  }, 60 * 1000)
  setInterval(() => {

    getData5()
    getData8()

  }, 60 * 60 * 1000)

  setInterval(() => {
    changeData8(1)
    changeData9(1)
  }, 1000 * 5)

  setTimeout(() => {
    loopFn1()
    loopFn2()
  }, 12000)


})

@@ -1096,17 +1111,20 @@
            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 {
@@ -1225,16 +1243,16 @@

            .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 {
@@ -1249,8 +1267,9 @@
    }

    .center_box_two {
      width: 100%;
      width: 108%;
      display: flex;
      margin: 0 -4%;

      .content_wrap {
        flex: 1;
@@ -1436,11 +1455,11 @@
              /* 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;
@@ -1448,7 +1467,7 @@
                .placeT {
                  font-size: 12px;
                  color: #869CC9;
                  margin-top: 4px;
                  margin-top: 6px;
                }
              }

@@ -1462,14 +1481,14 @@
              } */

              .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;
              }
            }
          }