Merge remote-tracking branch 'origin/master'

jiangping

2024-12-25 9ae3baca4c8730fcc5f7c8daf3b6368cec554ae6

 screen/src/views/FireFighting.vue

@@ -30,7 +30,7 @@
                  <span class="item">报警</span>
                  <span class="item">屏蔽</span>
                  <span class="item">故障</span>
                  <span class="item">离线</span>
                  <span class="item">正常</span>
                </div>
                <div class="one-swiper list_content">
                  <div class="swiper-wrapper">
@@ -89,7 +89,7 @@
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_zaixian@2x.png" alt="">
                <div class="content">
                  <div class="name">在线</div>
                  <div class="name">总数</div>
                  <div class="num">{{ dataList4.onlineDeviceNum }}</div>
                </div>
              </div>
@@ -110,7 +110,7 @@
              <div class="item">
                <img src="@/assets/images/FireFighting/xiaofang_ic_lixian@2x.png" alt="">
                <div class="content">
                  <div class="name">离线</div>
                  <div class="name">正常</div>
                  <div class="num num4">{{ dataList4.offlineDeviceNum }}</div>
                </div>
              </div>
@@ -131,29 +131,33 @@
                  <span>温度/湿度传感器</span>
                </div>
                <div class="right">
                  <img @click="changeData8(-1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@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="">
                  <img @click="changeData8(1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png"
                    alt="">
                </div>
              </div>
              <div class="list_wrap">
                <div class="title">
                  <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
                  <span>卸货区1</span>
                  <span v-if="dataList8 && dataList8.length > 0">{{ dataList8[dataIndex8].humidityData.name }}</span>
                </div>
                <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">{{ dataList8[dataIndex8].temperatureData?.latestValue }}<span>°C</span></div>
                      <div class="la">阈值 {{ dataList8[dataIndex8].temperatureData?.alarmLow }}～{{ dataList8[dataIndex8].temperatureData?.alarmHigh }}°C</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">{{ dataList8[dataIndex8].humidityData?.latestValue }}<span>%</span></div>
                      <div class="la">阈值 {{ dataList8[dataIndex8].humidityData?.alarmLow }}～{{ dataList8[dataIndex8].humidityData?.alarmHigh }}</div>
                      <div class="la">阈值 {{ dataList8[dataIndex8].humidityData?.alarmLow }}～{{
                        dataList8[dataIndex8].humidityData?.alarmHigh }}</div>
                    </div>
                  </div>
                </div>
@@ -166,35 +170,30 @@
                  <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="changeData9(-1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png"
                    alt="">
                  <div class="num">{{ dataIndex9 + 1 }}/{{ dataTotal9 }}</div>
                  <img @click="changeData9(1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png"
                    alt="">
                </div>
              </div>
              <div class="list_wrap">
                <div class="title_wrap">
              <div class="list_wrap2">
                <div class="item" v-for="item, i in dataListTemp9">
                  <div class="title">
                    <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
                    <span>1路/水压</span>
                    <span>{{ item.name }}</span>
                  </div>
                  <div class="title">
                    <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt="">
                    <span>2路/液位</span>
                  <div class="watergage_wrap" v-if="item.obj.typeCode == 253958">
                    <div class="watergage" :id="'watergage' + i"></div>
                    <div class="unit">{{ item.obj.value }}</div>
                    <div class="place">阈值 {{ item.level }}</div>
                  </div>
                  <div v-if="item.obj.typeCode == 254001" class="liquidlevel_wrap">
                    <div class="liquidlevel" :id="'liquidlevel' + i"></div>
                    <div class="liquidle_te">
                      <div class="unit">{{ item.obj.value }}</div>
                      <div class="placeT">阈值{{ item.level }}</div>
                </div>
                <div class="list">
                  <div class="watergage_wrap">
                    <div class="watergage" id="watergage"></div>
                    <div class="unit">2.50 <span>Mpa</span></div>
                    <div class="place">阈值 0～2.5Mpa</div>
                  </div>
                  <div class="item">
                    <div class="liquidlevel_wrap">
                      <div class="liquidlevel" id="liquidlevel"></div>
                      <div class="unit">3.45 <span>M</span></div>
                      <div class="placeT">阈值</div>
                    </div>
                    <div class="place">阈值 0～4.50M</div>
                  </div>
                </div>
              </div>
@@ -312,7 +311,7 @@
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ref, onMounted, nextTick } from 'vue'
import VScaleScreen from 'v-scale-screen'
import FirePercent from '@/components/FirePercent.vue'
import dayjs from 'dayjs'
@@ -328,7 +327,8 @@
  getFightingDeAlarm,
  getFightingDeviceY,
  getFighalarmDataList,
  getTemperatureHumidityData
  getTemperatureHumidityData,
  monitorDataListP
} from '@/api'

const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
@@ -344,9 +344,14 @@
}, 1000)


const initWatergage = () => {
  const myChart = echarts.init(document.getElementById('watergage'))
  var data_value = 1
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 option = {
    barMaxWidth: 3,
    polar: {
@@ -373,8 +378,8 @@
    series: [
      {
        type: 'gauge',
        min: 0,
        max: 2.50,
        min: minNum,
        max: maxNum,
        splitNumber: 5,
        radius: '100%',
        center: ['50%', '50%'],
@@ -506,9 +511,17 @@
    myChart.resize()
  })
}
const initLiquidlevel = () => {
  const myChart = echarts.init(document.getElementById('liquidlevel'))
  var data = 65
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
  let acNum = item.obj.value.replaceAll('M', '')
  var data = (((acNum - minNum) / conNum) * 100).toFixed(0)
  console.log('data', data);
  
  const option = {
    tooltip: {
      trigger: 'none',
@@ -924,9 +937,28 @@

const dataList8 = ref([])
const dataIndex8 = ref(0)

const dataList9 = ref([])
const dataListTemp9 = ref([])
const dataIndex9 = ref(0)
const dataTotal9 = ref(0)

const getData8 = () => {
  getTemperatureHumidityData().then(res => {
    dataList8.value = res.data || []
  })
  monitorDataListP().then(res => {
    dataList9.value = res.data || []
    dataList9.value.forEach(item => {
      if (item.dataList && item.dataList.length > 0) {
        item.obj = item.dataList[0]
      }
    })
    if (dataList9.value.length > 0) {
      dataTotal9.value = Math.ceil(dataList9.value.length / 2)
      dataListTemp9.value = dataList9.value.slice(0, 2)
    }
    initEcharts9()
  })
}
const changeData8 = (num) => {
@@ -938,6 +970,36 @@
    dataIndex8.value =  dataIndex8.value + num
  }
}
const changeData9 = (num) => {
  // return
  if (dataIndex9.value == dataTotal9.value - 1 && num > 0) {
    dataIndex9.value = 0
    dataListTemp9.value = dataList9.value.slice(0, 2)
  } else if (dataIndex9.value == 0 && num < 0) {
    dataIndex9.value = dataTotal9.value - 1
    dataListTemp9.value = dataList9.value.slice(dataList9.value.length - 2, dataList9.value.length)
  } else {
    dataIndex9.value = dataIndex9.value + num
    dataListTemp9.value = dataList9.value.slice(dataIndex9.value * 2, (dataIndex9.value + 1) * 2)
  }
  initEcharts9()
}
const initEcharts9 = () => {
  dataListTemp9.value.forEach((item, i) => {

    if (item.obj && item.obj.typeCode == 253958) {
      nextTick(() => {
        initWatergage('watergage' + i, item)
      })
    }
    if (item.obj && item.obj.typeCode == 254001) {
      nextTick(() => {
        initLiquidlevel('liquidlevel' + i, item)
      })
    }
  })
}


const autoplayFlag = (list = [], leng = 4, time = 2000) => {
  if (list.length > leng) {
@@ -987,9 +1049,6 @@
    getData8()

  }, 60 * 60 * 1000)

  initWatergage()
  initLiquidlevel()

  setTimeout(() => {
    loopFn1()
@@ -1273,6 +1332,7 @@
              display: flex;
              align-items: center;
              position: relative;

              .place{
                position: absolute;
                top: 120px;
@@ -1283,6 +1343,7 @@
                width: 120px;
                text-align: center;
              }

              .icon {
                width: 70px;
                height: 70px;
@@ -1307,11 +1368,37 @@
              }
            }
          }
        }

        .list_wrap2 {
          display: flex;
          align-items: center;
          height: 206px;
          background-image: url('@/assets/images/FireFighting/bg_wendu@2x.png');
          background-size: cover;

          .item {
            width: 50%;
            height: 100%;

            .title {
              height: 46px;
              display: flex;
              align-items: center;
              color: #D2E0FF;
              padding-left: 20px;

              .icon {
                width: 16px;
                margin-right: 8px;
              }
            }

          .watergage_wrap {
            text-align: center;
            position: relative;
            left: 30px;

            .watergage {
              width: 130px;
              height: 112px;
@@ -1323,6 +1410,9 @@
              position: relative;
              bottom: 16px;
              left: 4px;
                width: 130px;
                margin-bottom: 6px;
                margin-top: 2px;

              span {
                font-size: 12px;
@@ -1334,49 +1424,55 @@
              position: relative;
              bottom: 16px;
              left: 4px;
                width: 130px;
              font-size: 13px;
              color: #869CC9;
            }
          }

          .liquidlevel_wrap {
              position: relative;

              /* border: 6px solid red; */
              .liquidle_te {
                font-weight: 500;
                font-size: 16px;
                position: absolute;
                top: 102px;
                left: 0;
                width: 214px;
                display: flex;
                flex-direction: column;
                align-items: center;

                .placeT {
                  font-size: 12px;
                  color: #869CC9;
                  margin-top: 4px;
                }
              }

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

              .liquidlevel {
                width: 300px;
                height: 400px;
            transform: scale(0.24);
            color: #fff;
            text-align: center;
            position: relative;
            left: 20px;
            bottom: 10px;

            .unit {
              font-weight: 500;
              font-size: 80px;
              position: relative;
              bottom: 24px;
              left: 4px;

              span {
                font-size: 52px;
                font-weight: 400;
                left: -42px;
                top: -140px;
              }
            }

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

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

            }
          }


        }
      }