ll

liukangdong

2024-12-13 75428aa3f870b62c7ccc7ebc7c0360c5fa4fb3e6

 screen/src/views/FireFighting.vue

@@ -37,7 +37,7 @@
                      <div class="line">
                        <span class="item name">{{ item.typeName }}</span>
                        <span class="item">{{ item.totalDeviceNum || 0 }}</span>
                        <span class="item">{{ item.alarmDeviceNum || 0 }}</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>
@@ -130,9 +130,9 @@
                  <span>温度/湿度传感器</span>
                </div>
                <div class="right">
                  <img class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png" alt="">
                  <div class="num">1/5</div>
                  <img class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png" alt="">
                  <img @click="changeData8(-1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png" alt="">
                  <div class="num">{{dataIndex8 + 1}}/{{ dataList8.length }}</div>
                  <img @click="changeData8(1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png" alt="">
                </div>
              </div>
              <div class="list_wrap">
@@ -140,19 +140,19 @@
                  <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
                  <span>卸货区1</span>
                </div>
                <div class="list">
                <div class="list" v-if="dataList8 && dataList8.length > 0">
                  <div class="item">
                    <img class="icon" src="@/assets/images/FireFighting/ic_wendu@2x.png" alt="">
                    <div class="content">
                      <div class="num">23<span>°C</span></div>
                      <div class="la">阈值 0～100°C</div>
                      <div class="num">{{ dataList8[dataIndex8].temperatureData?.latestValue }}<span>°C</span></div>
                      <div class="la">阈值 {{ dataList8[dataIndex8].temperatureData?.alarmLow }}～{{ dataList8[dataIndex8].temperatureData?.alarmHigh }}°C</div>
                    </div>
                  </div>
                  <div class="item">
                    <img class="icon" src="@/assets/images/FireFighting/ic_shidu@2x.png" alt="">
                    <div class="content">
                      <div class="num">23<span>%</span></div>
                      <div class="la">阈值 0～100%</div>
                      <div class="num">{{ dataList8[dataIndex8].humidityData?.latestValue }}<span>%</span></div>
                      <div class="la">阈值 {{ dataList8[dataIndex8].humidityData?.alarmLow }}～{{ dataList8[dataIndex8].humidityData?.alarmHigh }}</div>
                    </div>
                  </div>
                </div>
@@ -191,9 +191,9 @@
                    <div class="liquidlevel_wrap">
                      <div class="liquidlevel" id="liquidlevel"></div>
                      <div class="unit">3.45 <span>M</span></div>
                      <div class="place">阈值 0～4.50M</div>
                      <div class="placeT">阈值</div>
                    </div>

                    <div class="place">阈值 0～4.50M</div>
                  </div>
                </div>
              </div>
@@ -218,12 +218,12 @@
                <div class="separate"></div>
                <div class="item">
                  <div>计划维保</div>
                  <div class="num active">{{ dataList5.planProtectTotal }}</div>
                  <div class="num acc">{{ dataList5.planProtectTotal }}</div>
                </div>
                <div class="separate"></div>
                <div class="item">
                  <div>维保率</div>
                  <div v-if="dataList5.protectNum && dataList5.planProtectTotal" class="num active">{{
                  <div v-if="dataList5.protectNum && dataList5.planProtectTotal" class="acc num">{{
                    ((dataList5.protectNum / dataList5.planProtectTotal) * 100).toFixed(0) }}%</div>
                </div>
              </div>
@@ -326,7 +326,8 @@
  getFightingcenterData,
  getFightingDeAlarm,
  getFightingDeviceY,
  getFighalarmDataList
  getFighalarmDataList,
  getTemperatureHumidityData
} from '@/api'

const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
@@ -746,8 +747,9 @@
  const data4 = dataList3.value.map(i => i.errNum)
  const months = dataList3.value.map(i => {
    return i.startDate.substring(5, 7) + '月'
  }
  )
  })


  const option = {
    legend: {
      x: "center",
@@ -919,6 +921,23 @@
  })
}

const dataList8 = ref([])
const dataIndex8 = ref(0)
const getData8 = () => {
  getTemperatureHumidityData().then(res => {
    dataList8.value = res.data || []
  })
}
const changeData8 = (num) => {
  if(dataIndex8.value == dataList8.value.length - 1  && num > 0){
    dataIndex8.value = 0
  }else if (dataIndex8.value == 0 && num < 0){
    dataIndex8.value = dataList8.value.length - 1
  }else{
    dataIndex8.value =  dataIndex8.value + num
  }
}

const autoplayFlag = (list = [], leng = 4, time = 2000) => {
  if (list.length > leng) {
    return { delay: time, disableOnInteraction: false }
@@ -953,6 +972,7 @@
  getData5()
  // getData6()
  getData7()
  getData8()
  setInterval(() => {
    getData2()
    getData3()
@@ -963,6 +983,7 @@
  setInterval(() => {

    getData5()
    getData8()

  }, 60 * 60 * 1000)

@@ -1173,6 +1194,7 @@

      .content_wrap {
        flex: 1;
        flex-shrink: 0;
        margin-right: 20px;

        .title_wrap {
@@ -1216,8 +1238,9 @@
            }

            .icon {
              width: 13px;
              height: 16px;
              width: 30px;
              cursor: pointer;
              /* height: 16px; */
            }
          }
        }
@@ -1248,7 +1271,17 @@
            .item {
              display: flex;
              align-items: center;

              position: relative;
              .place{
                position: absolute;
                top: 120px;
                right: 70px;
                z-index: 999;
                font-size: 13px;
                color: #869CC9;
                width: 120px;
                text-align: center;
              }
              .icon {
                width: 70px;
                height: 70px;
@@ -1278,7 +1311,6 @@
            text-align: center;
            position: relative;
            left: 30px;

            .watergage {
              width: 130px;
              height: 112px;
@@ -1327,17 +1359,18 @@
              }
            }

            .place {
            .placeT {
              position: relative;
              bottom: 10px;
              left: 4px;
              font-size: 44px;
              color: #869CC9;
              opacity: 0;
            }

            .liquidlevel {
              width: 320px;
              height: 420px;
              width: 300px;
              height: 396px;

            }
          }
@@ -1372,6 +1405,17 @@
              margin-top: 12px;
              font-weight: bold;
              font-size: 32px;

            }

            .acc {
              background-image: -webkit-linear-gradient(top,
                  #ffffff 0%,
                  #c8ddff 66%,
                  #95eefc 72%,
                  #95eefc 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }

            .active {