| | |
| | | # 本地环境 |
| | | ENV = 'development' |
| | | #VITE_API_URL = 'http://192.168.0.47:17080' |
| | | VITE_API_URL = 'http://192.168.0.47:17080' |
| | | |
| | | #线上正式环境接口地址 |
| | | VITE_API_URL = 'http://121.239.169.30:17081/api' |
| | | #VITE_API_URL = 'http://121.239.169.30:17081/api' |
| | |
| | | data: data |
| | | }); |
| | | }, |
| | | getWindNum: (data: object) => { |
| | | return request({ |
| | | url: import.meta.env.VITE_API_URL + '/gasWarnLog/gasWindRoseByTime', |
| | | method: 'post', |
| | | data: data |
| | | }); |
| | | }, |
| | | getWarningInfo: (data: object) => { |
| | | return request({ |
| | | url: import.meta.env.VITE_API_URL + '/gasWarnLog/gasWarnLogInfoByTime', |
对比新文件 |
| | |
| | | <template> |
| | | <baidu-map class="bigMap" ref="map" ak="Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t" v="3.0" type="API" :scroll-wheel-zoom="true" :center="{lng: 85.126263, lat: 45.603813}" :zoom="17" map-type="BMAP_SATELLITE_MAP" @ready="initMap"> |
| | | <!-- <bm-polygon :path="polygonPath1" stroke-color="blue" fillColor="blue" :fillOpacity="1" :stroke-weight="2"/>--> |
| | | <!-- <bm-polygon :path="polygonPath2" stroke-color="red" fillColor="red" :fillOpacity="1" :stroke-weight="2"/>--> |
| | | <!-- <bm-overlay pane="mapPane" class="bg-pic" @draw="initMap">--> |
| | | <bm-ground class="picBg" :bounds="{ne: {lng: 85.129048, lat: 45.605790}, sw:{lng: 85.122984, lat: 45.592812}}" imageURL="/bigMap2.png" opacity="1" :displayOnMaxLevel="18" :zIndex="1"></bm-ground> |
| | | <!-- </bm-overlay>--> |
| | | <bm-overlay pane="mapPane" class="polys" @draw="initMap"> |
| | | <bm-polygon :path="polygonPath3" stroke-color="yellow" fillColor="yellow" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/> |
| | | <bm-label content="1" :position="{lng: 85.127634, lat: 45.604176}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="1" :zIndex="3"/> |
| | | <!-- <bm-polygon :path="polygonPath4" stroke-color="red" fillColor="red" :fillOpacity="1" :stroke-weight="2"/>--> |
| | | <bm-polygon :path="polygonPath5" stroke-color="#01007f" fillColor="#01007f" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/> |
| | | <bm-label content="2" :position="{lng: 85.126928, lat: 45.603873}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="2" :zIndex="3"/> |
| | | <bm-polygon :path="polygonPath6" stroke-color="#ff00fa" fillColor="#ff00fa" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/> |
| | | <bm-label content="3" :position="{lng: 85.123940, lat: 45.604109}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="3" :zIndex="3"/> |
| | | <bm-polygon :path="polygonPath7" stroke-color="#02ff02" fillColor="#02ff02" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/> |
| | | <bm-label content="4" :position="{lng: 85.125489, lat: 45.603525}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="4" :zIndex="3"/> |
| | | <bm-polygon :path="polygonPath8" stroke-color="#028002" fillColor="#028002" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/> |
| | | <bm-label content="5" :position="{lng: 85.126150, lat: 45.603173}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="5" :zIndex="3"/> |
| | | <bm-polygon :path="polygonPath9" stroke-color="#008081" fillColor="#008081" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/> |
| | | <bm-label content="6" :position="{lng: 85.126805, lat: 45.602739}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="6" :zIndex="3"/> |
| | | </bm-overlay> |
| | | <!-- <bm-ground class="picBg" :bounds="{ne: {lng: 85.127749, lat: 45.600383}, sw:{lng: 85.106981, lat: 45.592463}}" imageURL="/bigMapPic.jpg" opacity="0.5"></bm-ground>--> |
| | | <bm-map-type :map-types="['BMAP_SATELLITE_MAP','BMAP_NORMAL_MAP' ]" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type> |
| | | <!-- <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>--> |
| | | </baidu-map> |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue'; |
| | | import screen from './components/screen.vue' |
| | | import screenfull from 'screenfull' |
| | | import { ElMessage, ElMessageBox } from 'element-plus'; |
| | | import {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel} from 'vue-baidu-map-3x' |
| | | |
| | | // 定义接口来定义对象的类型 |
| | | interface TableDataState { |
| | | // 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 |
| | | } |
| | | export default defineComponent({ |
| | | name: 'map', |
| | | components: {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel }, |
| | | setup() { |
| | | const state = reactive<TableDataState>({ |
| | | // polygonPath1: [], |
| | | // polygonPath2: [], |
| | | polygonPath3: [], |
| | | // polygonPath4: [], |
| | | polygonPath5: [], |
| | | polygonPath6: [], |
| | | polygonPath7: [], |
| | | polygonPath8: [], |
| | | polygonPath9: [] |
| | | }); |
| | | |
| | | // 页面加载时 |
| | | onMounted(() => { |
| | | const baseSize = 38; |
| | | /* 设置 rem 函数 */ |
| | | function setRem() { |
| | | const scale = document.documentElement.clientWidth / 1920; /* 当前页面宽度缩放比例,可根据自己需要修改 */ |
| | | document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */ |
| | | console.log('切换尺寸>>',document.documentElement.style.fontSize) |
| | | } |
| | | setRem();/* 初始化 rem */ |
| | | |
| | | window.onresize = () => { |
| | | setRem();/* 改变窗口大小时重新设置 rem */ |
| | | console.log('执行切换') |
| | | } |
| | | }); |
| | | const map = reactive({}) |
| | | const initMap=()=>{ |
| | | // state.polygonPath1 = [{ lng: 85.126523, lat: 45.604790 }, { lng: 85.126364, lat: 45.604687 }, { lng: 85.126775, lat: 45.604416 }, { lng: 85.126933, lat: 45.604528 }], |
| | | // state.polygonPath2 = [{ lng: 85.127235, lat: 45.604406 }, { lng: 85.126908, lat: 45.604141 }, { lng: 85.127041, lat: 45.604046 }, { lng: 85.127396, lat: 45.604313 }], |
| | | state.polygonPath3 = [{ lng: 85.127634, lat: 45.604176 }, { lng: 85.127331, lat: 45.603931 }, { lng: 85.127885, lat: 45.603602 }, { lng: 85.128178, lat: 45.603853 }], |
| | | // state.polygonPath4 = [{ lng: 85.125247, lat: 45.604832 }, { lng: 85.124665, lat: 45.604483 }, { lng: 85.125910, lat: 45.603576 }, { lng: 85.126564, lat: 45.604053 }], |
| | | state.polygonPath5 = [{ lng: 85.126928, lat: 45.603873 }, { lng: 85.126253, lat: 45.603399 }, { lng: 85.126923, lat: 45.602951 }, { lng: 85.127580, lat: 45.603464 }], |
| | | state.polygonPath6 = [{ lng: 85.123940, lat: 45.604109 }, { lng: 85.123651, lat: 45.603782 }, { lng: 85.124211, lat: 45.603426 }, { lng: 85.124538, lat: 45.603693 }], |
| | | state.polygonPath7 = [{ lng: 85.125489, lat: 45.603525 }, { lng: 85.124729, lat: 45.603024 }, { lng: 85.125304, lat: 45.602703 }, { lng: 85.125988, lat: 45.603217 }], |
| | | state.polygonPath8 = [{ lng: 85.126150, lat: 45.603173 }, { lng: 85.125339, lat: 45.602580 }, { lng: 85.125847, lat: 45.602235 }, { lng: 85.126700, lat: 45.602838 }], |
| | | state.polygonPath9 = [{ lng: 85.126805, lat: 45.602739 }, { lng: 85.125929, lat: 45.602127 }, { lng: 85.126505, lat: 45.601715 }, { lng: 85.127309, lat: 45.602365 }] |
| | | console.log(map,'map') |
| | | // const poly = document.getElementsByClassName('polys') |
| | | // console.log(poly) |
| | | // poly.attributes.style.zIndex = 9999999 |
| | | // console.log(poly,'poly') |
| | | } |
| | | |
| | | return { |
| | | initMap, |
| | | map, |
| | | ...toRefs(state) |
| | | }; |
| | | } |
| | | }); |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .bigMap{ |
| | | width: 100%; |
| | | height: 100%; |
| | | :deep(path) { |
| | | position: relative; |
| | | z-index: 9999999 !important; |
| | | } |
| | | :deep(BMapLabel){ |
| | | z-index: 9999999 !important; |
| | | } |
| | | } |
| | | .bg-pic{ |
| | | position: relative; |
| | | z-index: 1; |
| | | } |
| | | .polys{ |
| | | position: relative; |
| | | z-index: 2; |
| | | } |
| | | </style> |
| | |
| | | <!-- <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.057805, lat: 45.62550}" :zoom="16" @ready="initMap"> |
| | | <bm-map-type :map-types="['BMAP_SATELLITE_MAP','BMAP_NORMAL_MAP' ]" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type> |
| | | <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation> |
| | | <bm-polygon :path="polygonPath" stroke-color="blue" fillColor="blue" :fillOpacity="0.4" :stroke-weight="1"/> |
| | | </baidu-map> |
| | | <!-- <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>--> |
| | | <!--<!– <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>–>--> |
| | | <!-- <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> |
| | | </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"> |
| | |
| | | </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"> |
| | |
| | | import AMapLoader from '@amap/amap-jsapi-loader' |
| | | import { shallowRef } from '@vue/reactivity' |
| | | import { storeToRefs } from 'pinia'; |
| | | |
| | | import {BaiduMap, BmMapType, BmNavigation, BmPolygon} from 'vue-baidu-map-3x' |
| | | 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"; |
| | | // 定义接口来定义对象的类型 |
| | |
| | | lockReconnect: boolean |
| | | maxReconnect: number |
| | | reconnectTime: number |
| | | windTime: number | null |
| | | time: string |
| | | date: string |
| | | weekDay: string |
| | |
| | | gasSearch: number | null |
| | | tlGasSearch: number | null |
| | | 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 |
| | |
| | | yellowNum: null | number |
| | | redNum: null | number |
| | | weatherData: Array<any> |
| | | polygonPath: Array<location> |
| | | 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 |
| | |
| | | |
| | | export default defineComponent({ |
| | | name: 'bigScreen', |
| | | components: {BaiduMap, BmMapType, BmNavigation, BmPolygon }, |
| | | components: {Map,BaiduMap, BmMapType, BmNavigation, BmPolygon }, |
| | | props:{ |
| | | isFull: Boolean |
| | | }, |
| | |
| | | date: '', |
| | | weekDay: '', |
| | | dayTime: '', |
| | | windTime: 4, |
| | | isFull: props.isFull, |
| | | chart2Search: [], |
| | | infoParams:{ |
| | |
| | | gasSearch: null, |
| | | tlGasSearch: null, |
| | | gasOptions: [], |
| | | monthAgo: '', |
| | | today: '', |
| | | gasData: [], |
| | | hasNd: true, |
| | | gasTlData: [], |
| | | hasTl: true, |
| | | areaOptions: [], |
| | | gasTotal: 0, |
| | | tlTotal: 0, |
| | |
| | | dialogWarning: false, |
| | | countTime: 1, |
| | | weatherData: [], |
| | | polygonPath: [] |
| | | 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 = { |
| | |
| | | }; |
| | | |
| | | const updatePolygonPath = (e) => { |
| | | state.polygonPath = e.target.getPath() |
| | | state.polygonPath1 = e.target.getPath() |
| | | }; |
| | | // 页面加载时 |
| | | onMounted(() => { |
| | | initTime() |
| | | getGasData() |
| | | getWindData() |
| | | getWarningNum() |
| | | getWarningInfo() |
| | | getWarning() |
| | |
| | | }) |
| | | |
| | | const initMap=()=>{ |
| | | state.polygonPath = [ |
| | | { lng: 85.047805, lat: 45.62550 }, |
| | | { lng: 85.047505, lat: 45.62350 }, |
| | | { lng: 85.057205, lat: 45.62350 }, |
| | | { lng: 85.057005, lat: 45.62750 } |
| | | ] |
| | | 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') |
| | |
| | | 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){ |
| | |
| | | } |
| | | } |
| | | |
| | | 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}) |
| | | 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) |
| | |
| | | }) |
| | | state.weatherData = [...weather].reverse().slice(0, 4); |
| | | initgasN(dotList.slice(dotList.length - 50),timeList.slice(timeList.length - 50)) |
| | | }else{ |
| | | state.hasNd = false |
| | | } |
| | | }else { |
| | | ElMessage({ |
| | |
| | | } |
| | | |
| | | 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)] |
| | |
| | | } |
| | | }) |
| | | initgasT(gasTlTime.slice(gasTlTime.length - 20),chartData) |
| | | }else{ |
| | | state.hasTl = false |
| | | } |
| | | }else { |
| | | ElMessage({ |
| | |
| | | return i |
| | | }) |
| | | config.data = newData |
| | | }else{ |
| | | config.data = [] |
| | | } |
| | | }else { |
| | | ElMessage({ |
| | |
| | | } |
| | | 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() |
| | | } |
| | | |
| | |
| | | const changeTotal = () =>{ |
| | | getWarningNum() |
| | | } |
| | | |
| | | const changeWind = () =>{ |
| | | getWindData() |
| | | } |
| | | const getWarning = ()=>{ |
| | | initWebSocket('/ws/gas/exc/','预警',60) |
| | | } |
| | |
| | | return; |
| | | } |
| | | if(type == '预警'){ |
| | | console.log('预警') |
| | | const socketData = JSON.parse(text) |
| | | state.warningGas = JSON.parse(JSON.stringify(socketData)) |
| | | state.dialogWarning = true |
| | |
| | | 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):'--', |
| | |
| | | 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)=>{ |
| | |
| | | const config = reactive({ |
| | | header: ['预警级别','气体名称', '气体浓度', '时间'], |
| | | data: [], |
| | | index: true, |
| | | columnWidth: [38], |
| | | // index: true, |
| | | columnWidth: [200,200,200,200], |
| | | align: ['center','center','center','center','center'], |
| | | headerBGC: '', |
| | | oddRowBGC: '', |
| | |
| | | } |
| | | |
| | | 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>)=>{ |
| | | let dom = document.getElementById(gasN.value); |
| | | let myChart = echarts.init(dom); |
| | |
| | | }, |
| | | grid: { |
| | | top: '5%', |
| | | bottom: '10%', |
| | | bottom: '15%', |
| | | right: '2%' |
| | | }, |
| | | series: [ |
| | |
| | | config, |
| | | gasN, |
| | | gasT, |
| | | gasWind, |
| | | initMap, |
| | | updatePolygonPath, |
| | | toNdPage, |
| | |
| | | timeChange, |
| | | mouseoverHandler, |
| | | changeTotal, |
| | | changeWind, |
| | | clickHandler, |
| | | changeGas1, |
| | | changeGas2, |
| | |
| | | //} |
| | | .main-middle{ |
| | | width: calc(50% - 10px); |
| | | position: relative; |
| | | .map-filter{ |
| | | position: absolute; |
| | | display: flex; |
| | | align-items: flex-start; |
| | | width: 350px; |
| | | right: 20px; |
| | | top: 20px; |
| | | z-index: 99999; |
| | | |
| | | .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); |