新增风速等级

zhouwx

2025-05-08 446d5c8eda333a4e6ee3fb6e838e9d859fc847f5

 src/views/bigScreen/components/screen.vue

@@ -96,66 +96,37 @@
          </div>
        </div>
        <div class="main-middle">
<!--          <div class="bigMap">-->
<!--            <div id="bigMap"></div>-->
<!--          </div>-->
<!--            <baidu-map class="bigMap" ak="Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t" v="3.0" type="API" :scroll-wheel-zoom="true" :center="{lng: 85.116263, lat: 45.596513}" :zoom="18" @ready="initMap">-->
<!--              <bm-ground-->
<!--                  :bounds="{ne: {lng: 85.118828, lat: 45.598437}, sw:{lng: 85.113210, lat: 45.593837}}" imageURL="../../../assets/factoryMap.png">-->
<!--              </bm-ground>-->
<!--              <bm-map-type :map-types="['BMAP_SATELLITE_MAP','BMAP_NORMAL_MAP' ]" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>-->
<!--&lt;!&ndash;              <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>&ndash;&gt;-->
<!--              <bm-polygon :path="polygonPath1" stroke-color="blue" fillColor="blue" :fillOpacity="0.4" :stroke-weight="1"/>-->
<!--              <bm-polygon :path="polygonPath2" stroke-color="red" fillColor="red" :fillOpacity="0.4" :stroke-weight="1"/>-->
<!--              <bm-polygon :path="polygonPath3" stroke-color="blue" fillColor="blue" :fillOpacity="0.4" :stroke-weight="1"/>-->
<!--              <bm-polygon :path="polygonPath4" stroke-color="blue" fillColor="blue" :fillOpacity="0.4" :stroke-weight="1"/>-->
<!--              <bm-polygon :path="polygonPath5" stroke-color="blue" fillColor="blue" :fillOpacity="0.4" :stroke-weight="1"/>-->
<!--            </baidu-map>-->
          <div class="map-filter">
            <div style="width: 100%">
              <el-select v-model="windTime" :teleported="false" class="m-2" placeholder="Select" size="small" @change="changeWind">
                <el-option :key="1" label="1小时" :value="1"/>
                <el-option :key="2" label="6小时" :value="2"/>
                <el-option :key="3" label="121小时" :value="3"/>
                <el-option :key="4" label="24小时" :value="4"/>
          <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>
            </el-radio-group>
              <el-select v-if="windQuery.type == 1" v-model="windQuery.countTime" :teleported="false" class="m-2" placeholder="Select" size="small" @change="changeWind">
                <el-option :key="1" label="1小时内" :value="1"/>
                <el-option :key="2" label="6小时内" :value="2"/>
                <el-option :key="3" label="12小时内" :value="3"/>
                <el-option :key="4" label="24小时内" :value="4"/>
              </el-select>
            </div>
            <div style="width: 100%;height: 250px" :id="gasWind"></div>
            <el-date-picker
                v-else
                v-model="windTimeRange"
                size="small"
                :teleported="false"
                type="datetimerange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                @change="windTimeChange"
                value-format="YYYY-MM-DD HH:mm:ss"
            />
              <div style="width: 100%;height: 250px;margin-top: 20px" :id="gasWind"></div>
          </div>
          <Map class="bigMap"></Map>
<!--          </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,51 @@
                      :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></div>
              </div>
              <table class="weather">
                <tr class="weatherTit"><td>时间</td><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.level}}</td>
                  <td>{{ getDirectionName(item.windDirection)+'('+ item.windDirection +'度)'}}</td>
                  <td>{{item.pressure}}</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="right-mid withFilterLong">
@@ -236,7 +246,13 @@
          :draggable="true"
          custom-class="warningMsg"
          top="2vh"
          @opened="playAudio"
          @close="confirmWarning"
      >
        <audio ref="audioRef" autoplay muted loop>
          <source src="../../../assets/warning.mp3" type="audio/mpeg">
          您的浏览器不支持 audio 元素。
        </audio>
        <div class="warning-cont">
          <div><span>预警信息:</span><span>{{warningGas.content}}</span></div>
          <div><span>预警时间:</span><span>{{warningGas.warnTime}}</span></div>
@@ -272,6 +288,7 @@
import {BaiduMap, BmMapType, BmNavigation, BmPolygon, BmGround} from 'vue-baidu-map-3x'
import { useUserInfo } from '/@/stores/userInfo';
import {bigScreenApi} from "/@/api/bigScreen";

// 定义接口来定义对象的类型
interface TableDataState {
  socket: any
@@ -281,17 +298,26 @@
  lockReconnect: boolean
  maxReconnect: number
  reconnectTime: number
  windTime: number | null
  windQuery: {
    type: null | number
    countTime: number | null
    startTime: '',
    endTime:''
  }
  showRose: boolean
  countTime: null | number
  time: string
  date: string
  weekDay: string
  dayTime:string
  isFull: boolean
  chart2Search: Array<string>
  windTimeRange: Array<string>
  infoParams: {}
  gasSearch: number | null
  tlGasSearch: number | null
  positionSearch: number | null
  isPpm: boolean
  positionOptions: Array<gasType>
  gasOptions: Array<gasType>
  monthAgo: string,
@@ -306,7 +332,6 @@
  online: number
  warningGas: {},
  dialogWarning: boolean
  countTime: null | number
  yellowNum: null | number
  redNum: null | number
  weatherData: Array<any>
@@ -341,6 +366,7 @@
        const state = reactive<TableDataState>({
          yellowNum: null,
          redNum: null,
          showRose: true,
          socket: null,
          timer: null,
          heartbeat: null,
@@ -352,14 +378,22 @@
          date: '',
          weekDay: '',
          dayTime: '',
          windTime: 4,
          windQuery: {
            type: 1,
            countTime: 4,
            startTime: '',
            endTime: ''
          },
          countTime: 1,
          isFull: props.isFull,
          chart2Search: [],
          windTimeRange: [],
          infoParams:{
            startTime: '',
            endTime: ''
          },
          positionSearch: null,
          isPpm: true,
          gasSearch: null,
          tlGasSearch: null,
          gasOptions: [],
@@ -375,10 +409,6 @@
            {
              id: 2,
              name: '方位2'
            },
            {
              id: 3,
              name: '方位3'
            }
          ],
          monthAgo: '',
@@ -393,7 +423,6 @@
          online: 3,
          warningGas: {},
          dialogWarning: false,
          countTime: 1,
          weatherData: [],
          polygonPath1: [],
          polygonPath2: [],
@@ -406,6 +435,7 @@
          polygonPath9: []
        });
        const router = useRouter()
        const audioRef = ref()
        const gasWind = ref("eChartgasWind" + Date.now() + Math.random())
        const gasN = ref("eChartgasN" + Date.now() + Math.random())
        const gasT = ref("eChartgasT" + Date.now() + Math.random())
@@ -437,9 +467,7 @@
            const scale = document.documentElement.clientWidth / 1920;/* 当前页面宽度缩放比例，可根据自己需要修改 */
            document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
          }

          setRem();

          window.onresize = () => {
            setRem();/* 改变窗口大小时重新设置 rem */
          }
@@ -447,29 +475,26 @@
          setInterval(() => {
            getDateTime();
          }, 1000);
          // initMap()
        })

        onUnmounted(()=>{
          destroyedWs()
        })

        const initMap=()=>{
            state.polygonPath1 = [{ lng: 85.115523, lat: 45.597919 }, { lng: 85.114993, lat: 45.597520 }, { lng: 85.115925, lat: 45.597029 }, { lng: 85.116384, lat: 45.597328 }],
            state.polygonPath2 = [{ lng: 85.115251, lat: 45.597319 }, { lng: 85.114480, lat: 45.596719 }, { lng: 85.115082, lat: 45.596367 }, { lng: 85.115812, lat: 45.596965 }],
            state.polygonPath3 = [{ lng: 85.115251, lat: 45.597319 }, { lng: 85.114480, lat: 45.596719 }, { lng: 85.115082, lat: 45.596367 }, { lng: 85.115812, lat: 45.596965 }],
            state.polygonPath4 = [{ lng: 85.115251, lat: 45.597319 }, { lng: 85.114480, lat: 45.596719 }, { lng: 85.115082, lat: 45.596367 }, { lng: 85.115812, lat: 45.596965 }],
            state.polygonPath5 = [{ lng: 85.115251, lat: 45.597319 }, { lng: 85.114480, lat: 45.596719 }, { lng: 85.115082, lat: 45.596367 }, { lng: 85.115812, lat: 45.596965 }],
            state.polygonPath6 = [{ lng: 85.115251, lat: 45.597319 }, { lng: 85.114480, lat: 45.596719 }, { lng: 85.115082, lat: 45.596367 }, { lng: 85.115812, lat: 45.596965 }],
            state.polygonPath7 = [{ lng: 85.115251, lat: 45.597319 }, { lng: 85.114480, lat: 45.596719 }, { lng: 85.115082, lat: 45.596367 }, { lng: 85.115812, lat: 45.596965 }],
            state.polygonPath8 = [{ lng: 85.115251, lat: 45.597319 }, { lng: 85.114480, lat: 45.596719 }, { lng: 85.115082, lat: 45.596367 }, { lng: 85.115812, lat: 45.596965 }],
            state.polygonPath9 = [{ lng: 85.115251, lat: 45.597319 }, { lng: 85.114480, lat: 45.596719 }, { lng: 85.115082, lat: 45.596367 }, { lng: 85.115812, lat: 45.596965 }]
        }
        const toNdPage = () =>{
          router.push('/gasData')
        }
        const toTlPage = () =>{
          router.push('/fluxData')
        }

        const playAudio=()=>{
          audioRef.value.muted = false
          audioRef.value.play()
        }

        const confirmWarning =()=>{
          state.dialogWarning = false
          audioRef.value.pause()
        }
        const getGasData = async ()=>{
          const res = await bigScreenApi().getGas()
@@ -539,10 +564,20 @@
        }

        const getWindData = async ()=>{
          const res = await bigScreenApi().getWindNum({countTime: state.windTime})
          if(state.windQuery.type == 1){
            state.windQuery.startTime = ''
            state.windQuery.endTime = ''
          }else{
            state.windQuery.countTime = 5
            state.windQuery.startTime = state.windTimeRange[0]?state.windTimeRange[0]: state.today + ' 00:00:00'
            state.windQuery.endTime = state.windTimeRange[1]?state.windTimeRange[1]: state.today + ' 23:59:59'
          }
          const {type,...data} = state.windQuery
          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]
@@ -564,15 +599,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
                  console.log(tenAbove,'10')
                }else{
                  console.log('windSpeed为null')
                }
              }
              console.log(pointFive,twoZone,fourZone,sixZone,eightZone,tenZone,tenAbove,666)
              initgasWind(pointFive,twoZone,fourZone,sixZone,eightZone,tenZone,tenAbove)
            }else{
              state.showRose = false
            }
          }else {
            ElMessage({
@@ -590,6 +624,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){
@@ -597,19 +640,28 @@
              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):'--',
                  temp: item.temp?item.temp:'--',
                  humidity: item.humidity?item.humidity:'--',
                  windSpeed: item.windSpeed?item.windSpeed:'--',
                  level: item.windSpeed ? handelLevel(item.windSpeed) : '--',
                  windDirection: item.windDirection?item.windDirection:'--',
                  pressure: item.pressure?item.pressure:'--'
                }
              })
              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
            }
@@ -619,6 +671,47 @@
              message: res.data.msg
            });
          }
        }
        const handelLevel = (level) => {
          let l = null
          if(level>=0 && level<=0.2) {
            l = '0级'
          }else if(level>=0.3 && level<=1.5) {
            l = '1级'
          }else if(level>=1.6 && level<=3.3){
            l = '2级'
          }else if(level>=3.4 && level<=5.4){
            l = '3级'
          }else if(level>=5.5 && level<=7.9){
            l = '4级'
          }else if(level>=8.0 && level<=10.7){
            l = '5级'
          }else if(level>=10.8 && level<=13.8){
            l = '6级'
          }else if(level>=13.9 && level<=17.1){
            l = '7级'
          }else if(level>=17.2 && level<=20.7){
            l = '8级'
          }else if(level>=20.8 && level<=24.4){
            l = '9级'
          }else if(level>=24.5 && level<=28.4){
            l = '10级'
          }else if(level>=28.5 && level<=32.6){
            l = '11级'
          }else if(level>=32.7 && level<=36.9){
            l = '12级'
          }else if(level>=37.0 && level<=41.4){
            l = '13级'
          }else if(level>=41.5&& level<=46.1){
            l = '14级'
          }else if(level>=46.2 && level<=50.9){
            l = '15级'
          }else if(level>=51.0 && level<=56.0){
            l = '16级'
          }else if(level>=56.1 && level<=61.2){
            l = '17级'
          }
          return l
        }

      const getGasTlData = async ()=>{
@@ -713,6 +806,22 @@
        const changeTotal = () =>{
          getWarningNum()
        }

          const windTimeChange = (value:Array<string>)=>{
            console.log(value)
            state.windQuery.startTime = value[0]
            state.windQuery.endTime = value[1]
            getWindData()
          }

        const changeWindQuery = (value) =>{
          if(value == 2){
            state.windQuery.countTime = 5
          }else{
            state.windQuery.countTime = 4
          }
          getWindData()
        }
        const changeWind = () =>{
          getWindData()
        }
@@ -741,6 +850,7 @@
            return ''; // 返回一个默认值或者空字符串
          }
        }

        const initWebSocket =async (requireUrl: string,type: string,beat: number)=>{
            if (typeof WebSocket === 'undefined') {
              alert('您的浏览器不支持socket');
@@ -824,25 +934,31 @@
                  let newArr = JSON.parse(JSON.stringify(state.gasData))
                  if(Array.isArray(newArr)){
                    state.gasTotal = newArr.length
                  }else{
                    state.gasTotal = 0
                  }
                  const weather = newArr.map((item)=>{
                    const weather = newArr.map((item)=>{
                      return {
                        time: item.dataReceivingTime?item.dataReceivingTime.slice(11,19):'--',
                        temp: item.temp?item.temp:'--',
                        humidity: item.humidity?item.humidity:'--',
                        windSpeed: item.windSpeed?item.windSpeed:'--',
                        level: item.windSpeed ? handelLevel(item.windSpeed) : '--',
                        windDirection: item.windDirection?item.windDirection:'--',
                        pressure: item.pressure?item.pressure:'--'
                      }
                  })
                  state.weatherData = [...weather].reverse().slice(0, 4);
                    })
                    state.weatherData = [...weather].reverse().slice(0, 4);
                  }else{
                    // state.gasTotal = 0
                    getGasNdData()
                  }
                  for(let key in newArr[0]){
                    if(newArr[0][key] == state.gasSearch && key.indexOf("gasName") !== -1){
                      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){
@@ -851,7 +967,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 == '气体通量'){
@@ -862,7 +982,6 @@
                  }else{
                    state.tlTotal = 0
                  }
                  console.log(state.gasTotal,'获取结束')
                  const gasTime = newArr.map(i=>i.dataReceivingTime?.slice(11,19))
                  const gasTlTime = [...new Set(gasTime)]
                  let areaData = state.areaOptions.map((item)=>{
@@ -906,7 +1025,9 @@

              }
              state.socket.onclose=()=>{
                console.log("socket已经关闭")
                getGasNdData()
                getGasTlData()
                getWindData()
              }
            }
        }
@@ -1015,32 +1136,31 @@
        let myChart = echarts.init(dom)
        let option: EChartsOption;
        option = {
          title:{
            text:'',
            left:'center'
          },
          angleAxis: {

            type: 'category',
            data: ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW'],
            z: 0,
            boundaryGap: false,
            splitLine: {
              show: false,
              lineStyle: {
                color: '#ddd',
                type: 'solid'
              }
            },
            data: ['北', '北东北', '东北', '东东北', '东', '东东南', '东南','南东南','南','南西南','西南','西西南','西','西西北','西北','北西北'],
            axisLine: {
              show: false
              show: true,
              lineStyle: {
                color: '#fff'
              }
            }
          },
          radiusAxis: {

            axisLine: {
              lineStyle: {
                color: '#11feee'
              }
            },
            nameTextStyle:{
              fontSize: 10,
              color: '#fff'
            },
            animation: true
          },
          polar: {

            center: ['50%','40%'],
            radius: '60%'
          },
          series: [{
            type: 'bar',
@@ -1048,8 +1168,8 @@
            coordinateSystem: 'polar',
            name: '<0.5m/s',
            stack: 'a',
            itemStyle:{

            emphasis: {
              focus: 'series'
            }
          }, {
            type: 'bar',
@@ -1057,8 +1177,8 @@
            coordinateSystem: 'polar',
            name: '0.5-2m/s',
            stack: 'a',
            itemStyle:{

            emphasis: {
              focus: 'series'
            }
          }, {
            type: 'bar',
@@ -1066,8 +1186,8 @@
            coordinateSystem: 'polar',
            name: '2-4m/s',
            stack: 'a',
            itemStyle:{

            emphasis: {
              focus: 'series'
            }
          }, {
            type: 'bar',
@@ -1075,8 +1195,8 @@
            coordinateSystem: 'polar',
            name: '4-6m/s',
            stack: 'a',
            itemStyle:{

            emphasis: {
              focus: 'series'
            }
          }, {
            type: 'bar',
@@ -1084,8 +1204,8 @@
            coordinateSystem: 'polar',
            name: '6-8m/s',
            stack: 'a',
            itemStyle:{

            emphasis: {
              focus: 'series'
            }
          }, {
            type: 'bar',
@@ -1093,8 +1213,8 @@
            coordinateSystem: 'polar',
            name: '8-10m/s',
            stack: 'a',
            itemStyle:{

            emphasis: {
              focus: 'series'
            }
          }, {
            type: 'bar',
@@ -1102,16 +1222,23 @@
            coordinateSystem: 'polar',
            name: '>10m/s',
            stack: 'a',
            itemStyle:{

            emphasis: {
              focus: 'series'
            }
          }],
          legend: {
            show: true,
            top:'bottom',
            right:'right',
            left:'0',
            data: ['<0.5m/s', '0.5-2m/s', '2-4m/s','4-6m/s','6-8m/s','8-10m/s','>10m/s'],
            orient:'horizontal'
            orient:'horizontal',
            itemWidth: 10,
            itemHeight: 6,
            itemGap: 4,
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          }
        }

@@ -1121,7 +1248,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);
@@ -1129,6 +1256,12 @@
        option = {
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: ['浓度', '温度','湿度','风速','气压'],
            textStyle: {
              color: '#fff'
            }
          },
          xAxis: {
            type: 'category',
@@ -1140,25 +1273,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,
@@ -1166,12 +1370,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'
              }
            }
          ]
@@ -1267,9 +1532,9 @@
          context.emit('clickFull')
        }

        onUnmounted(()=>{
          map.value && map.value.destroy();
        })
        // onUnmounted(()=>{
        //   map.value && map.value.destroy();
        // })

        return {
          timeForm,
@@ -1277,14 +1542,19 @@
          gasN,
          gasT,
          gasWind,
          initMap,
          audioRef,
          confirmWarning,
          playAudio,
          getDirectionName,
          updatePolygonPath,
          toNdPage,
          toTlPage,
          timeChange,
          mouseoverHandler,
          changeTotal,
          changeWindQuery,
          changeWind,
          windTimeChange,
          clickHandler,
          changeGas1,
          changeGas2,
@@ -1464,6 +1734,10 @@
            border: 1px solid rgba(17,254,238,.4);
          }
        }
        ::v-deep(.el-switch__core){
          border: 1px solid #11FEEE;
        }


        .sys-status{
          width: 66%;
@@ -1713,8 +1987,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%;
          }
@@ -1742,7 +2016,7 @@
        .weather{
          width: 100%;
          height: calc(100% - 60px);
          background: url("../../../assets/warningScreen/scroll-bg.png") no-repeat bottom;
          background: url("../../../assets/warningScreen/scroll-bg2.png") no-repeat bottom;
          background-size: 100% 82%;

          tr{
@@ -1838,14 +2112,83 @@
    .map-filter{
      position: absolute;
      display: flex;
      align-items: flex-start;
      width: 350px;
      flex-direction: column;
      align-items: flex-end;
      width: 270px;
      right: 20px;
      top: 20px;
      z-index: 2000;
      padding: 2px;
      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{
        height: 24px;
        width: 100%;
        flex-flow: row nowrap;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .el-radio{
          width: calc((100% - 6px)/2);
          margin-right: 0;
          margin-left: 2px;
          margin-bottom: 0;
          text-align: center;
          border-color: #ccc;
          &.el-radio--small{
            height: 20px;
          }
          :deep(.el-radio__inner){
            display: none;
          }
          :deep(.el-radio__label){
            width: 100%;
            padding-left: 0;
            font-size: 10px;
            color: #ccc;
          }
        }
        .el-radio.is-bordered.is-checked{
          border-color: #11FEEE;
          background: rgba(6,24,88,.6);
          box-shadow: 0 3px 8px rgba(0,0,0,.2);

          :deep(.el-radio__label){
            color: #fff;
          }
        }
      }

      :deep(.el-date-editor){
        width: 100%;
        height: 24px;
        .el-range-separator{
          color: #fff;
        }
      }

      :deep(.el-input__wrapper){
        height: 24px;
        box-shadow: none;
        border: 1px solid #11FEEE;
        background: rgba(6,24,88,.6);
        color: #fff;

        input{
          font-size: 10px;
          color: #fff;
        }
        .el-icon{
          display: none;
          color: #fff;
        }
      }

      .el-select{
        width: 60%;
        width: 100%;
        height: 24px;
      }
      ::v-deep(.el-popper){