新修改

马宇豪

2025-05-08 7069ff06f3e28c615eba1b42015a4784d996dd05

 src/views/bigScreen/components/screen.vue

@@ -96,7 +96,7 @@
          </div>
        </div>
        <div class="main-middle">
          <div class="map-filter">
          <div class="map-filter" v-if="showRose">
            <el-radio-group v-model="windQuery.type" @change="changeWindQuery">
              <el-radio :label="1" size="small" border>按时间段</el-radio>
              <el-radio :label="2" size="small" border>按具体时间</el-radio>
@@ -126,36 +126,7 @@
<!--          </div>-->
          <div class="mid-bottom">
            <div class="chart-head">
              <div class="chart-tit">气象信息</div>
            </div>
            <div class="chart-cont bigData">
              <div class="bigPic">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
<!--              <dv-scroll-board :config="bigConfig" class="scroll-table" @mouseover="mouseoverHandler" @click="clickHandler" />-->
              <table class="weather">
                <tr class="weatherTit"><td>时间</td><td>温度</td><td>湿度</td><td>风速</td><td>风向</td><td>气压</td></tr>
                <tr v-for="(item,index) in weatherData" :key="index" class="weatherRow">
                  <td>{{item.time}}</td>
                  <td>{{item.temp}}</td>
                  <td>{{item.humidity}}</td>
                  <td>{{item.windSpeed}}</td>
                  <td>{{item.windDirection}}</td>
                  <td>{{item.pressure}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="main-right">
          <div class="right-top withFilterLong">
            <div class="chart-head">
              <div class="chart-tit long-tit">气体浓度监测</div>
              <div class="chart-tit">气体浓度监测</div>
              <div class="searchGroup">
                <el-select v-model="gasSearch" :teleported="false" class="m-2" placeholder="Select" size="small" @change="changeGas1">
                  <el-option
@@ -173,12 +144,49 @@
                      :value="item.id"
                  />
                </el-select>
                <el-switch
                    v-model="isPpm"
                    class="ml-2"
                    inline-prompt
                    style="--el-switch-on-color: rgba(0,0,0,0); --el-switch-off-color:  rgba(0,0,0,0)"
                    active-text="ppm"
                    inactive-text="ppb"
                    @change="changeGas1"
                />
                <div class="checkMore" @click="toNdPage()"><el-icon><DArrowRight /></el-icon></div>
              </div>
            </div>
            <div class="chart-cont">
              <div v-if="hasNd==true" class="echart" :id="gasN"></div>
              <div v-else class="echart" style="display: flex;font-size: 20px;justify-content: center;align-items: center"><span style="color:#11feee;">暂无数据</span></div>
            </div>
          </div>
        </div>
        <div class="main-right">
          <div class="right-top withFilterLong">
            <div class="chart-head">
              <div class="chart-tit long-tit">气象信息</div>
            </div>
            <div class="chart-cont bigData">
              <div class="bigPic">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
              <table class="weather">
                <tr class="weatherTit"><td>时间</td><td>温度</td><td>湿度</td><td>风速</td><td>风向</td><td>气压</td></tr>
                <tr v-for="(item,index) in weatherData" :key="index" class="weatherRow">
                  <td>{{item.time}}</td>
                  <td>{{item.temp}}</td>
                  <td>{{item.humidity}}</td>
                  <td>{{item.windSpeed}}</td>
                  <td>{{ getDirectionName(item.windDirection)+'('+ item.windDirection +'度)'}}</td>
                  <td>{{item.pressure}}</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="right-mid withFilterLong">
@@ -294,6 +302,7 @@
    startTime: '',
    endTime:''
  }
  showRose: boolean
  countTime: null | number
  time: string
  date: string
@@ -306,6 +315,7 @@
  gasSearch: number | null
  tlGasSearch: number | null
  positionSearch: number | null
  isPpm: boolean
  positionOptions: Array<gasType>
  gasOptions: Array<gasType>
  monthAgo: string,
@@ -354,6 +364,7 @@
        const state = reactive<TableDataState>({
          yellowNum: null,
          redNum: null,
          showRose: true,
          socket: null,
          timer: null,
          heartbeat: null,
@@ -380,6 +391,7 @@
            endTime: ''
          },
          positionSearch: null,
          isPpm: true,
          gasSearch: null,
          tlGasSearch: null,
          gasOptions: [],
@@ -395,10 +407,6 @@
            {
              id: 2,
              name: '方位2'
            },
            {
              id: 3,
              name: '方位3'
            }
          ],
          monthAgo: '',
@@ -566,7 +574,8 @@
          const res = await bigScreenApi().getWindNum(data)
          if(res.data.code == 100){
            const windData = JSON.parse(JSON.stringify(res.data.data))
            if(Array.isArray(windData)){
            if(Array.isArray(windData) && windData.length>0){
              state.showRose = true
              let pointFive = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
              let twoZone = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
              let fourZone = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
@@ -588,13 +597,14 @@
                }else if(i.windSpeed>8 && i.windSpeed<=10){
                  tenZone[getDirection(i.windDirection)] += 1
                } else if(i.windSpeed>10){
                  console.log(777,i.windDirection,getDirection(i.windDirection))
                  tenAbove[getDirection(i.windDirection)] += 1
                }else{
                  console.log('windSpeed为null')
                }
              }
              initgasWind(pointFive,twoZone,fourZone,sixZone,eightZone,tenZone,tenAbove)
            }else{
              state.showRose = false
            }
          }else {
            ElMessage({
@@ -612,6 +622,15 @@
          }
        }

        const getDirectionName=(num:number)=>{
          const directionName = ['北', '北东北', '东北', '东东北', '东', '东东南', '东南','南东南','南','南西南','西南','西西南','西','西西北','西北','北西北']
          if(num<=348.75 ){
            return directionName[Math.floor((num + 11.25) / 22.5)]
          }else{
            return '北'
          }
        }

        const getGasNdData = async ()=>{
          const res = await bigScreenApi().getGasNdData({startTime: state.today+' 00:00:00',endTime: state.today+' 23:59:59',gasName: state.gasSearch,position: state.positionSearch})
          if(res.data.code == 100){
@@ -619,7 +638,11 @@
              state.hasNd = true
              state.gasTotal = res.data.data.length
              const timeList = res.data.data.map(i=>i.time.slice(11))
              const dotList = res.data.data.map(i=>i.gasValue)
              const dotList = res.data.data.map(i=>i.gasValue?i.gasValue:0)
              const tempList = res.data.data.map(i=>i.temp?i.temp:0)
              const humidityList = res.data.data.map(i=>i.humidity?i.humidity:0)
              const windList = res.data.data.map(i=>i.windSpeed?i.windSpeed:0)
              const pressureList = res.data.data.map(i=>i.pressure?i.pressure:0)
              const weather = res.data.data.map((item)=>{
                return {
                  time: item.time?item.time.slice(11):'--',
@@ -631,7 +654,11 @@
                }
              })
              state.weatherData = [...weather].reverse().slice(0, 4);
              initgasN(dotList.slice(dotList.length - 50),timeList.slice(timeList.length - 50))
              if(state.isPpm){
                initgasN(dotList.slice(dotList.length - 50),tempList.slice(dotList.length - 50),humidityList.slice(dotList.length - 50),windList.slice(dotList.length - 50),pressureList.slice(dotList.length - 50),timeList.slice(timeList.length - 50))
              }else{
                initgasN(dotList?.map(i=> i * 1000).slice(dotList.length - 50),tempList.slice(dotList.length - 50),humidityList.slice(dotList.length - 50),windList.slice(dotList.length - 50),pressureList.slice(dotList.length - 50),timeList.slice(timeList.length - 50))
              }
            }else{
              state.hasNd = false
            }
@@ -883,6 +910,10 @@
                      gasNum = key.substring(7)
                    }
                  }
                  const tempList = newArr.map(i=>i.temp?i.temp:0)
                  const humidityList = newArr.map(i=>i.humidity?i.humidity:0)
                  const windList = newArr.map(i=>i.windSpeed?i.windSpeed:0)
                  const pressureList = newArr.map(i=>i.pressure?i.pressure:0)
                  const dotList = newArr.map((item)=>{
                    for(let key in item){
                      if(key.indexOf("gasValue") !== -1 && key.substring(8) == gasNum){
@@ -891,7 +922,11 @@
                    }
                  })
                  const gasTime = state.gasData.map(i=>i.dataReceivingTime?.slice(11,19))
                  initgasN(dotList.slice(dotList.length - 50),gasTime.slice(gasTime.length - 50))
                  if(state.isPpm){
                    initgasN(dotList.slice(dotList.length - 50),tempList.slice(dotList.length - 50),humidityList.slice(dotList.length - 50),windList.slice(dotList.length - 50),pressureList.slice(dotList.length - 50),gasTime.slice(gasTime.length - 50))
                  }else{
                    initgasN(dotList?.map(i=> i * 1000).slice(dotList.length - 50),tempList.slice(dotList.length - 50),humidityList.slice(dotList.length - 50),windList.slice(dotList.length - 50),pressureList.slice(dotList.length - 50),gasTime.slice(gasTime.length - 50))
                  }
                }

                if(type == '气体通量'){
@@ -1058,11 +1093,11 @@
        option = {
          angleAxis: {
            type: 'category',
            data: ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW'],
            data: ['北', '北东北', '东北', '东东北', '东', '东东南', '东南','南东南','南','南西南','西南','西西南','西','西西北','西北','北西北'],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#11feee'
                color: '#fff'
              }
            }
          },
@@ -1156,7 +1191,7 @@
            itemHeight: 6,
            itemGap: 4,
            textStyle: {
              color: '#11feee',
              color: '#fff',
              fontSize: 12
            }
          }
@@ -1168,7 +1203,7 @@
        });
      }

      const initgasN =(data:Array<string>,time: Array<string>)=>{
      const initgasN =(nData:Array<string>,tData:Array<string>,hData:Array<string>,wData:Array<string>,pData:Array<string>,time: Array<string>)=>{
        nextTick(() => {
        let dom = document.getElementById(gasN.value);
        let myChart = echarts.init(dom);
@@ -1176,6 +1211,12 @@
        option = {
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: ['浓度', '温度','湿度','风速','气压'],
            textStyle: {
              color: '#fff'
            }
          },
          xAxis: {
            type: 'category',
@@ -1187,25 +1228,96 @@
              show: false
            }
          },
          yAxis: {
            axisLine:{
              show: true
          yAxis: [
            {
              name: '浓度',
              type: 'value',
              position: 'left',
              axisLine:{
                show: true
              },
              splitLine: {
                show: false
              },
              axisLabel:{
                color: '#54d5ff'
              }
            },
            splitLine: {
              show: false
            {
              name: '温度',
              type: 'value',
              position: 'right',
              axisLine:{
                show: true
              },
              splitLine: {
                show: false
              },
              axisLabel:{
                color: '#ffb42a',
                fontSize: 9
              }
            },
            axisLabel:{
              color: '#ccc'
            {
              name: '湿度',
              type: 'value',
              offset : 25,
              position: 'right',
              axisLine:{
                show: true
              },
              splitLine: {
                show: false
              },
              axisLabel:{
                color: '#52ff69',
                fontSize: 9
              }
            },
            {
              name: '风速',
              type: 'value',
              offset : 50,
              position: 'right',
              axisLine:{
                show: true
              },
              splitLine: {
                show: false
              },
              axisLabel:{
                color: '#faa7ff',
                fontSize: 9
              }
            },
            {
              name: '气压',
              type: 'value',
              offset : 75,
              position: 'right',
              axisLine:{
                show: true
              },
              splitLine: {
                show: false
              },
              axisLabel:{
                color: 'yellow',
                fontSize: 9
              }
            }
          },
          ],
          grid: {
            top: '5%',
            bottom: '15%',
            right: '2%'
            left: '5%',
            top: '20%',
            bottom: '12%',
            right: '14%'
          },
          series: [
            {
              data: data,
              name: '浓度',
              yAxisIndex: 0,
              data: nData,
              type: 'line',
              label:{
                show: true,
@@ -1213,12 +1325,73 @@
                textBorderColor: 'transparent',
                fontSize: 8
              },
              // showSymbol: false,
              showSymbol: false,
              lineStyle:{
                color: '#54d5ff'
              },
              itemStyle:{
                color: '#54d5ff',
            },
            {
              name: '温度',
              yAxisIndex: 1,
              data: tData,
              type: 'line',
              label:{
                show: true,
                color: '#fff',
                textBorderColor: 'transparent',
                fontSize: 8
              },
              showSymbol: false,
              lineStyle:{
                color: '#ffb42a'
              }
            },
            {
              name: '湿度',
              yAxisIndex: 2,
              data: hData,
              type: 'line',
              label:{
                show: true,
                color: '#fff',
                textBorderColor: 'transparent',
                fontSize: 8
              },
              showSymbol: false,
              lineStyle:{
                color: '#52ff69'
              }
            },
            {
              name: '风速',
              yAxisIndex: 3,
              data: wData,
              type: 'line',
              label:{
                show: true,
                color: '#fff',
                textBorderColor: 'transparent',
                fontSize: 8
              },
              showSymbol: false,
              lineStyle:{
                color: '#faa7ff'
              }
            },
            {
              name: '气压',
              yAxisIndex: 4,
              data: pData,
              type: 'line',
              label:{
                show: true,
                color: '#fff',
                textBorderColor: 'transparent',
                fontSize: 8
              },
              showSymbol: false,
              lineStyle:{
                color: 'yellow'
              }
            }
          ]
@@ -1327,6 +1500,7 @@
          audioRef,
          confirmWarning,
          playAudio,
          getDirectionName,
          updatePolygonPath,
          toNdPage,
          toTlPage,
@@ -1515,6 +1689,10 @@
            border: 1px solid rgba(17,254,238,.4);
          }
        }
        ::v-deep(.el-switch__core){
          border: 1px solid #11FEEE;
        }


        .sys-status{
          width: 66%;
@@ -1764,8 +1942,8 @@
          align-items: center;
          justify-content: space-around;
          div{
            width: 50px;
            height: 50px;
            width: 40px;
            height: 40px;
            background: url("../../../assets/warningScreen/data-1.png") no-repeat center;
            background-size: 90% 90%;
          }
@@ -1898,6 +2076,7 @@
      z-index: 99;
      border: 1px solid #11FEEE;
      border-radius: 4px;
      background: rgba(0,0,0,0.5);
      //background: url("../../../assets/warningScreen/windbg.png") no-repeat center;

      .el-radio-group{