修改密码

zhouwenxuan

2024-01-04 a10c7076f59177b04861b3a27eb618ef9a9c4d06

 src/views/bigScreen/components/screen.vue

@@ -26,7 +26,7 @@
        </div>
      </div>
      <div class="main-content">
        <div id="bigMap"></div>
<!--        <div id="bigMap"></div>-->
        <div class="main-left">
          <div class="left-top withFilter">
            <div class="chart-head">
@@ -96,6 +96,34 @@
          </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"/>
              </el-select>
            </div>
            <div style="width: 100%;height: 250px" :id="gasWind"></div>
          </div>
          <Map class="bigMap"></Map>
<!--          </div>-->
          <div class="mid-bottom">
            <div class="chart-head">
              <div class="chart-tit">气象信息</div>
@@ -137,11 +165,20 @@
                      :value="item.id"
                  />
                </el-select>
                <el-select v-model="positionSearch" :teleported="false" class="m-2" placeholder="Select" size="small" @change="changeGas1">
                  <el-option
                      v-for="item in positionOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  />
                </el-select>
                <div class="checkMore" @click="toNdPage()"><el-icon><DArrowRight /></el-icon></div>
              </div>
            </div>
            <div class="chart-cont">
              <div class="echart" :id="gasN"></div>
              <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 class="right-mid withFilterLong">
@@ -168,7 +205,8 @@
              </div>
            </div>
            <div class="chart-cont">
              <div class="echart" :id="gasT"></div>
              <div v-if="hasTl==true" class="echart" :id="gasT"></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 class="right-bottom withoutFilter">
@@ -222,7 +260,7 @@
</template>

<script lang="ts">
import {toRefs, reactive, onMounted, ref, defineComponent, onUnmounted} from 'vue';
import {toRefs, reactive, onMounted, ref, defineComponent, onUnmounted, nextTick} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter} from "vue-router";
import * as echarts from "echarts";
@@ -230,6 +268,8 @@
import AMapLoader from '@amap/amap-jsapi-loader'
import { shallowRef } from '@vue/reactivity'
import { storeToRefs } from 'pinia';
import Map from './map.vue'
import {BaiduMap, BmMapType, BmNavigation, BmPolygon, BmGround} from 'vue-baidu-map-3x'
import { useUserInfo } from '/@/stores/userInfo';
import {bigScreenApi} from "/@/api/bigScreen";
// 定义接口来定义对象的类型
@@ -241,6 +281,7 @@
  lockReconnect: boolean
  maxReconnect: number
  reconnectTime: number
  windTime: number | null
  time: string
  date: string
  weekDay: string
@@ -250,9 +291,15 @@
  infoParams: {}
  gasSearch: number | null
  tlGasSearch: number | null
  positionSearch: number | null
  positionOptions: Array<gasType>
  gasOptions: Array<gasType>
  monthAgo: string,
  today: string,
  gasData: Array<any>
  hasNd: boolean
  gasTlData: Array<any>
  hasTl: boolean
  areaOptions: Array<gasType>
  gasTotal: null | number
  tlTotal: null | number
@@ -263,8 +310,20 @@
  yellowNum: null | number
  redNum: null | number
  weatherData: Array<any>
  polygonPath1: Array<location>
  polygonPath2: Array<location>
  polygonPath3: Array<location>
  polygonPath4: Array<location>
  polygonPath5: Array<location>
  polygonPath6: Array<location>
  polygonPath7: Array<location>
  polygonPath8: Array<location>
  polygonPath9: Array<location>
}

interface location{
  lng: number | null
  lat: number | null
}
interface gasType {
  name: string
  id: number | null
@@ -272,7 +331,7 @@

export default defineComponent({
    name: 'bigScreen',
    components: { },
    components: {Map,BaiduMap, BmMapType, BmNavigation, BmPolygon },
    props:{
      isFull: Boolean
    },
@@ -293,17 +352,41 @@
          date: '',
          weekDay: '',
          dayTime: '',
          windTime: 4,
          isFull: props.isFull,
          chart2Search: [],
          infoParams:{
            startTime: '',
            endTime: ''
          },
          positionSearch: null,
          gasSearch: null,
          tlGasSearch: null,
          gasOptions: [],
          positionOptions: [
            {
              id: null,
              name: '全部'
            },
            {
              id: 1,
              name: '方位1'
            },
            {
              id: 2,
              name: '方位2'
            },
            {
              id: 3,
              name: '方位3'
            }
          ],
          monthAgo: '',
          today: '',
          gasData: [],
          hasNd: true,
          gasTlData: [],
          hasTl: true,
          areaOptions: [],
          gasTotal: 0,
          tlTotal: 0,
@@ -311,9 +394,19 @@
          warningGas: {},
          dialogWarning: false,
          countTime: 1,
          weatherData: []
          weatherData: [],
          polygonPath1: [],
          polygonPath2: [],
          polygonPath3: [],
          polygonPath4: [],
          polygonPath5: [],
          polygonPath6: [],
          polygonPath7: [],
          polygonPath8: [],
          polygonPath9: []
        });
        const router = useRouter();
        const router = useRouter()
        const gasWind = ref("eChartgasWind" + Date.now() + Math.random())
        const gasN = ref("eChartgasN" + Date.now() + Math.random())
        const gasT = ref("eChartgasT" + Date.now() + Math.random())
        const timeForm = {
@@ -326,9 +419,14 @@
          second: '2-digit',
        };

        const updatePolygonPath = (e) => {
          state.polygonPath1 = e.target.getPath()
        };
        // 页面加载时
        onMounted(() => {
          initTime()
          getGasData()
          getWindData()
          getWarningNum()
          getWarningInfo()
          getWarning()
@@ -349,12 +447,24 @@
          setInterval(() => {
            getDateTime();
          }, 1000);
          initMap()
          // 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')
        }
@@ -378,7 +488,30 @@
          getGasNdData()
          getGasTlData()
        }

        const initTime =()=>{
          state.monthAgo = getPeriod(30)
          state.today = formatDate(new Date(),'end')
          state.chart2Search[0] = state.monthAgo
          state.chart2Search[1] = state.today+' 23:59:59'
          state.infoParams.startTime = state.monthAgo
          state.infoParams.endTime = state.today + ' 23:59:59'
        }
        const getPeriod =(num)=> {
          const currentDate = new Date();
          const startTime = new Date();
          startTime.setDate(currentDate.getDate() - num);
          return formatDate(startTime,'start')
        }
        const formatDate =(date,type)=> {
          const year = date.getFullYear().toString();
          const month = ('0' + (date.getMonth() + 1)).slice(-2);
          const day = ('0' + date.getDate()).slice(-2);
          if(type == 'start'){
            return `${year}-${month}-${day} 00:00:00`;
          }else{
            return `${year}-${month}-${day}`;
          }
        }
        const getAreaData = async ()=>{
          const res = await bigScreenApi().getAreas({pageSize: 99, pageIndex: 1, searchParams:{name: ''}})
          if(res.data.code == 100){
@@ -405,10 +538,63 @@
          }
        }

        const getWindData = async ()=>{
          const res = await bigScreenApi().getWindNum({countTime: state.windTime})
          if(res.data.code == 100){
            const windData = JSON.parse(JSON.stringify(res.data.data))
            if(Array.isArray(windData)){
              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]
              let sixZone = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
              let eightZone = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
              let tenZone = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
              let tenAbove = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
              for (let i of windData){
                if(i.windSpeed<0.5){
                  pointFive[getDirection(i.windDirection)] += 1
                }else if(i.windSpeed>0.5 && i.windSpeed<=2){
                  twoZone[getDirection(i.windDirection)] += 1
                }else if(i.windSpeed>2 && i.windSpeed<=4){
                  fourZone[getDirection(i.windDirection)] += 1
                }else if(i.windSpeed>4 && i.windSpeed<=6){
                  sixZone[getDirection(i.windDirection)] += 1
                }else if(i.windSpeed>6 && i.windSpeed<=8){
                  eightZone[getDirection(i.windDirection)] += 1
                }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 {
            ElMessage({
              type: 'warning',
              message: res.data.msg
            });
          }
        }

        const getDirection=(num:number)=>{
          if(num<=348.75 ){
            return Math.floor((num + 11.25) / 22.5)
          }else{
            return 0
          }
        }

        const getGasNdData = async ()=>{
          const res = await bigScreenApi().getGasNdData({startTime: '',endTime: '',gasName: state.gasSearch})
          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){
            if(res.data.data && res.data.data.length>0){
              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)
@@ -424,6 +610,8 @@
              })
              state.weatherData = [...weather].reverse().slice(0, 4);
              initgasN(dotList.slice(dotList.length - 50),timeList.slice(timeList.length - 50))
            }else{
              state.hasNd = false
            }
          }else {
            ElMessage({
@@ -434,9 +622,10 @@
        }

      const getGasTlData = async ()=>{
        const res = await bigScreenApi().getGasTlData({startTime: '',endTime: '',gasName: state.tlGasSearch,areaId: null})
        const res = await bigScreenApi().getGasTlData({startTime: state.today+' 00:00:00',endTime: state.today+' 23:59:59',gasName: state.tlGasSearch,areaId: null})
        if(res.data.code == 100){
          if(res.data.data && res.data.data.length>0){
            state.hasTl = true
            state.tlTotal = res.data.data.length
            const gasTime = res.data.data.map(i=>i.time?.slice(11))
            const gasTlTime = [...new Set(gasTime)]
@@ -467,6 +656,8 @@
              }
            })
            initgasT(gasTlTime.slice(gasTlTime.length - 20),chartData)
          }else{
            state.hasTl = false
          }
        }else {
          ElMessage({
@@ -493,6 +684,8 @@
                return i
              })
              config.data = newData
            }else{
              config.data = []
            }
          }else {
            ElMessage({
@@ -503,7 +696,7 @@
        }
        const timeChange = (value:Array<string>)=>{
          state.infoParams.startTime = value[0]
          state.infoParams.endTime = value[1]
          state.infoParams.endTime = value[1].replace('00:00:00', '23:59:59')
          getWarningInfo()
        }

@@ -520,7 +713,9 @@
        const changeTotal = () =>{
          getWarningNum()
        }

        const changeWind = () =>{
          getWindData()
        }
        const getWarning = ()=>{
          initWebSocket('/ws/gas/exc/','预警',60)
        }
@@ -536,16 +731,34 @@
        const getGasTLSocket = ()=>{
          initWebSocket('/ws/gas/flux/','气体通量',120)
        }

        const getPath=async()=> {
          try {
            var htt = window.location.protocol;// 获取协议
            var host = window.location.host;// 获取地址和端口号
            return htt+"//"+host;
          } catch (error) {
            console.error('Error fetching config:', error);
            return ''; // 返回一个默认值或者空字符串
          }
        }
        const initWebSocket =async (requireUrl: string,type: string,beat: number)=>{
            if (typeof WebSocket === 'undefined') {
              alert('您的浏览器不支持socket');
            } else {
              // 实例化socket
              let uid = userInfos.value.uid
              let url = import.meta.env.VITE_API_URL + requireUrl + `${uid}`
              url = url.replace('https', 'ws').replace('http', 'ws')
              state.socket = new WebSocket(url)
              if(import.meta.env.MODE == 'development'){
                let uid = userInfos.value.uid
                let url = import.meta.env.VITE_API_URL + requireUrl + `${uid}`
                url = url.replace('https', 'ws').replace('http', 'ws')
                state.socket = new WebSocket(url)
              }else{
                const apiUrl = await getPath();
                let uid = userInfos.value.uid
                let url = apiUrl + import.meta.env.VITE_API_URL + requireUrl + `${uid}`
                url = url.replace('https', 'ws').replace('http', 'ws')
                state.socket = new WebSocket(url)
              }

              // 监听socket连接
              state.socket.onopen = () => {
                console.log('socket连接成功')
@@ -568,7 +781,6 @@
                  return;
                }
                if(type == '预警'){
                  console.log('预警')
                  const socketData = JSON.parse(text)
                  state.warningGas = JSON.parse(JSON.stringify(socketData))
                  state.dialogWarning = true
@@ -610,7 +822,11 @@
                  state.gasData = JSON.parse(text)
                  let gasNum = ''
                  let newArr = JSON.parse(JSON.stringify(state.gasData))
                  state.gasTotal = newArr.length
                  if(Array.isArray(newArr)){
                    state.gasTotal = newArr.length
                  }else{
                    state.gasTotal = 0
                  }
                  const weather = newArr.map((item)=>{
                      return {
                        time: item.dataReceivingTime?item.dataReceivingTime.slice(11,19):'--',
@@ -641,7 +857,12 @@
                if(type == '气体通量'){
                  state.gasTlData = JSON.parse(text)
                  let newArr = JSON.parse(JSON.stringify(state.gasTlData))
                  state.tlTotal = newArr.length
                  if(Array.isArray(newArr)){
                    state.tlTotal = newArr.length
                  }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)=>{
@@ -761,8 +982,8 @@
        const config = reactive({
          header: ['预警级别','气体名称', '气体浓度', '时间'],
          data: [],
          index: true,
          columnWidth: [38],
          // index: true,
          columnWidth: [200,200,200,200],
          align: ['center','center','center','center','center'],
          headerBGC: '',
          oddRowBGC: '',
@@ -788,7 +1009,120 @@
        }

      type EChartsOption = echarts.EChartsOption

      const initgasWind =(pointFive,twoZone,fourZone,sixZone,eightZone,tenZone,tenAbove)=>{
        let dom = document.getElementById(gasWind.value);
        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'
              }
            },
            axisLine: {
              show: false
            }
          },
          radiusAxis: {

          },
          polar: {

          },
          series: [{
            type: 'bar',
            data: pointFive,
            coordinateSystem: 'polar',
            name: '<0.5m/s',
            stack: 'a',
            itemStyle:{

            }
          }, {
            type: 'bar',
            data: twoZone,
            coordinateSystem: 'polar',
            name: '0.5-2m/s',
            stack: 'a',
            itemStyle:{

            }
          }, {
            type: 'bar',
            data: fourZone,
            coordinateSystem: 'polar',
            name: '2-4m/s',
            stack: 'a',
            itemStyle:{

            }
          }, {
            type: 'bar',
            data: sixZone,
            coordinateSystem: 'polar',
            name: '4-6m/s',
            stack: 'a',
            itemStyle:{

            }
          }, {
            type: 'bar',
            data: eightZone,
            coordinateSystem: 'polar',
            name: '6-8m/s',
            stack: 'a',
            itemStyle:{

            }
          }, {
            type: 'bar',
            data: tenZone,
            coordinateSystem: 'polar',
            name: '8-10m/s',
            stack: 'a',
            itemStyle:{

            }
          }, {
            type: 'bar',
            data: tenAbove,
            coordinateSystem: 'polar',
            name: '>10m/s',
            stack: 'a',
            itemStyle:{

            }
          }],
          legend: {
            show: true,
            top:'bottom',
            right:'right',
            data: ['<0.5m/s', '0.5-2m/s', '2-4m/s','4-6m/s','6-8m/s','8-10m/s','>10m/s'],
            orient:'horizontal'
          }
        }

        option && myChart.setOption(option);
        window.addEventListener("resize",function (){
          myChart.resize();
        });
      }

      const initgasN =(data:Array<string>,time: Array<string>)=>{
        nextTick(() => {
        let dom = document.getElementById(gasN.value);
        let myChart = echarts.init(dom);
        let option: EChartsOption;
@@ -819,7 +1153,7 @@
          },
          grid: {
            top: '5%',
            bottom: '10%',
            bottom: '15%',
            right: '2%'
          },
          series: [
@@ -846,6 +1180,7 @@
        option && myChart.setOption(option);
        window.addEventListener("resize",function (){
          myChart.resize();
        });
        });
      }
      const initgasT =(time: Array<string>,data: Array<any>)=>{
@@ -896,84 +1231,6 @@
        });
      }

      const map = shallowRef(null)
      const initMap=()=> {
        let m = map.value
        window._AMapSecurityConfig = {
          securityJsCode: "456045075984862a9806587f0d7fee3c",
        };
        AMapLoader.load({
          key: '5dbeedfa28e0d7fffb59684446569773', // 申请好的Web端开发者Key，首次调用 load 时必填
          version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
            .then(AMap => {
              if (AMap && typeof AMap.Map === 'function') {
                m = new AMap.Map('bigMap', {
                  viewMode: '3D',
                  mapStyle: 'amap://styles/normal',
                  zoom: 18,
                  center: [85.057805, 45.62550],
                  layers:[
                    // new AMap.TileLayer.RoadNet({}),
                    // new AMap.TileLayer.Satellite()
                  ],
                  zooms:[2,20],
                })

                AMap.plugin(["AMap.DistrictSearch","AMap.ToolBar","AMap.ControlBar"],()=> {
                  var district = new AMap.DistrictSearch({
                    extensions: "all",
                    subdistrict: 0,
                    level: "district",
                  });
                  district.search("克拉玛依市", function (status, result) {
                    //   // 外多边形坐标数组和内多边形坐标数组
                    var outer = [
                      new AMap.LngLat(-360, 90, true),
                      new AMap.LngLat(-360, -90, true),
                      new AMap.LngLat(360, -90, true),
                      new AMap.LngLat(360, 90, true),
                    ]; // 使得遮盖填充反向
                    var holes = result.districtList[0].boundaries; // 得到该区域的边界坐标集合

                    var pathArray = [outer];
                    pathArray.push.apply(pathArray, holes);
                    var polygon = new AMap.Polygon({
                      pathL: pathArray,
                      //线条颜色，使用16进制颜色代码赋值。默认值为#006600
                      strokeColor: "#11feee",
                      strokeWeight: 3,
                      fillColor: "#051342",
                      fillOpacity: 1,
                      strokeStyle: "solid",
                      strokeDasharray: [2, 2],
                    });
                    polygon.setPath(pathArray)
                    m.add(polygon);
                  })
                  m.addControl(new AMap.ToolBar({
                    position: {
                      top: '20px',
                      left: 'calc(25% + 5px)'
                    }
                  }))
                  m.addControl(new AMap.ControlBar({
                    position: {
                      top: '20px',
                      right: 'calc(25% + 5px)'
                    }
                  }))
                })

              } else {
                console.error('AMap 或 AMap.Map 不可用');
              }
            })
            .catch(e => {
              console.log('加载高德地图时出错：', e)
            })
      }
      // 当前时间
      const getDateTime = () => {
        const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
@@ -1019,12 +1276,15 @@
          config,
          gasN,
          gasT,
          map,
          gasWind,
          initMap,
          updatePolygonPath,
          toNdPage,
          toTlPage,
          timeChange,
          mouseoverHandler,
          changeTotal,
          changeWind,
          clickHandler,
          changeGas1,
          changeGas2,
@@ -1150,7 +1410,7 @@
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  //position: relative;

  &>div{
    height: 100%;
@@ -1174,7 +1434,6 @@
          letter-spacing: 4px;
          font-size: 16px;
          font-weight: bolder;
          line-height: 38px;
          color: #11feee;
        }
        .long-tit{
@@ -1529,24 +1788,6 @@
    }
  }

  #bigMap{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

    :deep(.amap-logo){
      display: none!important;
      visibility: hidden!important;
    }

    :deep(.amap-copyright) {
      display: none!important;
      visibility: hidden!important;
    }
  }

  .main-left{
    z-index: 9;
    width: calc(25% - 5px);
@@ -1563,14 +1804,91 @@
      background-size: 100% 100%;
    }
  }
  //#bigMap{
  //position: absolute;
  //width: 100%;
  //height: 100%;
  //left: 0;
  //top: 0;

  //  :deep(.amap-logo){
  //    display: none!important;
  //    visibility: hidden!important;
  //  }
  //
  //  :deep(.amap-copyright) {
  //    display: none!important;
  //    visibility: hidden!important;
  //  }
  //}
  //.main-middle{
  //  width: calc(50% - 10px);
  //  height: calc((100%/3) - (20px/3));
  //  z-index: 9;
  //  .mid-bottom{
  //    width: 100%;
  //    height: 100%;
  //    background: url("../../../assets/warningScreen/chart-bg4.png") no-repeat center;
  //    background-size: 100% 100%;
  //  }
  //}
  .main-middle{
    width: calc(50% - 10px);
    height: calc((100%/3) - (20px/3));
    z-index: 9;
    position: relative;
    .map-filter{
      position: absolute;
      display: flex;
      align-items: flex-start;
      width: 350px;
      right: 20px;
      top: 20px;
      z-index: 2000;

      .el-select{
        width: 60%;
        height: 24px;
      }
      ::v-deep(.el-popper){
        background-color: rgba(10,31,92,1);
        border: 1px solid rgba(17,254,238,.4);
        color: #11FEEE;

        .el-icon{
          color: #11FEEE;
        }
        .el-select-dropdown__item{
          color: #11FEEE;
        }
        .el-select-dropdown__item.hover{
          background: #0049af;
        }
      }
      ::v-deep(.el-popper__arrow){
        &::before{
          background-color: rgba(10,31,92,.6) !important;
          border: 1px solid rgba(17,254,238,.4);
        }
      }
    }
    .bigMap{
      width: 100%;
      height: calc((200% - 40px)/3 + 10px);
      padding: 15px;
      background: url('../../../assets/warningScreen/map-bg.png') no-repeat center;
      background-size: 100% 100%;
      :deep(.BMap_cpyCtrl){
        display: none!important;
        visibility: hidden!important;
      }

      :deep(.anchorBL) {
        display: none!important;
        visibility: hidden!important;
      }
    }
    .mid-bottom{
      width: 100%;
      height: 100%;
      height: calc((100%/3) - (20px/3));
      background: url("../../../assets/warningScreen/chart-bg4.png") no-repeat center;
      background-size: 100% 100%;
    }
@@ -1596,4 +1914,4 @@
    }
  }
}
</style>
</style>