From 446d5c8eda333a4e6ee3fb6e838e9d859fc847f5 Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期四, 08 五月 2025 14:35:51 +0800
Subject: [PATCH] 新增风速等级
---
src/views/bigScreen/components/screen.vue | 1065 +++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 863 insertions(+), 202 deletions(-)
diff --git a/src/views/bigScreen/components/screen.vue b/src/views/bigScreen/components/screen.vue
index dde3c1a..7c9cb10 100644
--- a/src/views/bigScreen/components/screen.vue
+++ b/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,38 +96,37 @@
</div>
</div>
<div class="main-middle">
+ <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>
+ <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
@@ -137,11 +136,59 @@
: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>
+ <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 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>
+ <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">
@@ -168,7 +215,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">
@@ -198,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>
@@ -222,7 +276,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,8 +284,11 @@
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";
+
// 定义接口来定义对象的类型
interface TableDataState {
socket: any
@@ -241,30 +298,57 @@
lockReconnect: boolean
maxReconnect: number
reconnectTime: number
+ 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,
+ today: string,
gasData: Array<any>
+ hasNd: boolean
gasTlData: Array<any>
+ hasTl: boolean
areaOptions: Array<gasType>
gasTotal: null | number
tlTotal: null | number
online: number
warningGas: {},
dialogWarning: boolean
- countTime: null | number
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 +356,7 @@
export default defineComponent({
name: 'bigScreen',
- components: { },
+ components: {Map,BaiduMap, BmMapType, BmNavigation, BmPolygon },
props:{
isFull: Boolean
},
@@ -282,6 +366,7 @@
const state = reactive<TableDataState>({
yellowNum: null,
redNum: null,
+ showRose: true,
socket: null,
timer: null,
heartbeat: null,
@@ -293,27 +378,65 @@
date: '',
weekDay: '',
dayTime: '',
+ 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: [],
+ positionOptions: [
+ {
+ id: null,
+ name: '全部'
+ },
+ {
+ id: 1,
+ name: '方位1'
+ },
+ {
+ id: 2,
+ name: '方位2'
+ }
+ ],
+ monthAgo: '',
+ today: '',
gasData: [],
+ hasNd: true,
gasTlData: [],
+ hasTl: true,
areaOptions: [],
gasTotal: 0,
tlTotal: 0,
online: 3,
warningGas: {},
dialogWarning: false,
- countTime: 1,
- weatherData: []
+ weatherData: [],
+ polygonPath1: [],
+ polygonPath2: [],
+ polygonPath3: [],
+ polygonPath4: [],
+ polygonPath5: [],
+ polygonPath6: [],
+ polygonPath7: [],
+ polygonPath8: [],
+ polygonPath9: []
});
- const router = useRouter();
+ 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())
const timeForm = {
@@ -326,9 +449,14 @@
second: '2-digit',
};
+ const updatePolygonPath = (e) => {
+ state.polygonPath1 = e.target.getPath()
+ };
// 页面加载时
onMounted(() => {
+ initTime()
getGasData()
+ getWindData()
getWarningNum()
getWarningInfo()
getWarning()
@@ -339,9 +467,7 @@
const scale = document.documentElement.clientWidth / 1920;/* 当前页面宽度缩放比例，可根据自己需要修改 */
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
}
-
setRem();
-
window.onresize = () => {
setRem();/* 改变窗口大小时重新设置 rem */
}
@@ -349,7 +475,6 @@
setInterval(() => {
getDateTime();
}, 1000);
- initMap()
})
onUnmounted(()=>{
@@ -360,6 +485,16 @@
}
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()
@@ -378,7 +513,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,25 +563,50 @@
}
}
- const getGasNdData = async ()=>{
- const res = await bigScreenApi().getGasNdData({startTime: '',endTime: '',gasName: state.gasSearch})
+ const getWindData = async ()=>{
+ 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){
- if(res.data.data && res.data.data.length>0){
- 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 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:'--',
- windDirection: item.windDirection?item.windDirection:'--',
- pressure: item.pressure?item.pressure:'--'
+ const windData = JSON.parse(JSON.stringify(res.data.data))
+ 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]
+ 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){
+ tenAbove[getDirection(i.windDirection)] += 1
+ }else{
+ console.log('windSpeed为null')
}
- })
- state.weatherData = [...weather].reverse().slice(0, 4);
- initgasN(dotList.slice(dotList.length - 50),timeList.slice(timeList.length - 50))
+ }
+ initgasWind(pointFive,twoZone,fourZone,sixZone,eightZone,tenZone,tenAbove)
+ }else{
+ state.showRose = false
}
}else {
ElMessage({
@@ -433,10 +616,109 @@
}
}
+ const getDirection=(num:number)=>{
+ if(num<=348.75 ){
+ return Math.floor((num + 11.25) / 22.5)
+ }else{
+ return 0
+ }
+ }
+
+ 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){
+ 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?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);
+ 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
+ }
+ }else {
+ ElMessage({
+ type: 'warning',
+ 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 ()=>{
- 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 +749,8 @@
}
})
initgasT(gasTlTime.slice(gasTlTime.length - 20),chartData)
+ }else{
+ state.hasTl = false
}
}else {
ElMessage({
@@ -493,6 +777,8 @@
return i
})
config.data = newData
+ }else{
+ config.data = []
}
}else {
ElMessage({
@@ -503,7 +789,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()
}
@@ -521,6 +807,24 @@
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()
+ }
const getWarning = ()=>{
initWebSocket('/ws/gas/exc/','预警',60)
}
@@ -536,16 +840,35 @@
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 +891,6 @@
return;
}
if(type == '预警'){
- console.log('预警')
const socketData = JSON.parse(text)
state.warningGas = JSON.parse(JSON.stringify(socketData))
state.dialogWarning = true
@@ -610,23 +932,33 @@
state.gasData = JSON.parse(text)
let gasNum = ''
let newArr = JSON.parse(JSON.stringify(state.gasData))
- state.gasTotal = newArr.length
- const weather = newArr.map((item)=>{
+ if(Array.isArray(newArr)){
+ state.gasTotal = newArr.length
+ 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){
@@ -635,13 +967,21 @@
}
})
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 == '气体通量'){
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
+ }
const gasTime = newArr.map(i=>i.dataReceivingTime?.slice(11,19))
const gasTlTime = [...new Set(gasTime)]
let areaData = state.areaOptions.map((item)=>{
@@ -685,7 +1025,9 @@
}
state.socket.onclose=()=>{
- console.log("socket已经关闭")
+ getGasNdData()
+ getGasTlData()
+ getWindData()
}
}
}
@@ -761,8 +1103,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,13 +1130,138 @@
}
type EChartsOption = echarts.EChartsOption
- const initgasN =(data:Array<string>,time: Array<string>)=>{
+
+ const initgasWind =(pointFive,twoZone,fourZone,sixZone,eightZone,tenZone,tenAbove)=>{
+ let dom = document.getElementById(gasWind.value);
+ let myChart = echarts.init(dom)
+ let option: EChartsOption;
+ option = {
+ angleAxis: {
+ type: 'category',
+ data: ['北', '北东北', '东北', '东东北', '东', '东东南', '东南','南东南','南','南西南','西南','西西南','西','西西北','西北','北西北'],
+ axisLine: {
+ 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',
+ data: pointFive,
+ coordinateSystem: 'polar',
+ name: '<0.5m/s',
+ stack: 'a',
+ emphasis: {
+ focus: 'series'
+ }
+ }, {
+ type: 'bar',
+ data: twoZone,
+ coordinateSystem: 'polar',
+ name: '0.5-2m/s',
+ stack: 'a',
+ emphasis: {
+ focus: 'series'
+ }
+ }, {
+ type: 'bar',
+ data: fourZone,
+ coordinateSystem: 'polar',
+ name: '2-4m/s',
+ stack: 'a',
+ emphasis: {
+ focus: 'series'
+ }
+ }, {
+ type: 'bar',
+ data: sixZone,
+ coordinateSystem: 'polar',
+ name: '4-6m/s',
+ stack: 'a',
+ emphasis: {
+ focus: 'series'
+ }
+ }, {
+ type: 'bar',
+ data: eightZone,
+ coordinateSystem: 'polar',
+ name: '6-8m/s',
+ stack: 'a',
+ emphasis: {
+ focus: 'series'
+ }
+ }, {
+ type: 'bar',
+ data: tenZone,
+ coordinateSystem: 'polar',
+ name: '8-10m/s',
+ stack: 'a',
+ emphasis: {
+ focus: 'series'
+ }
+ }, {
+ type: 'bar',
+ data: tenAbove,
+ coordinateSystem: 'polar',
+ name: '>10m/s',
+ stack: 'a',
+ emphasis: {
+ focus: 'series'
+ }
+ }],
+ legend: {
+ show: true,
+ top:'bottom',
+ 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',
+ itemWidth: 10,
+ itemHeight: 6,
+ itemGap: 4,
+ textStyle: {
+ color: '#fff',
+ fontSize: 12
+ }
+ }
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+
+ 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);
let option: EChartsOption;
option = {
tooltip: {
trigger: 'axis',
+ },
+ legend: {
+ data: ['浓度', '温度','湿度','风速','气压'],
+ textStyle: {
+ color: '#fff'
+ }
},
xAxis: {
type: 'category',
@@ -806,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: '10%',
- right: '2%'
+ left: '5%',
+ top: '20%',
+ bottom: '12%',
+ right: '14%'
},
series: [
{
- data: data,
+ name: '浓度',
+ yAxisIndex: 0,
+ data: nData,
type: 'line',
label:{
show: true,
@@ -832,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'
}
}
]
@@ -846,6 +1445,7 @@
option && myChart.setOption(option);
window.addEventListener("resize",function (){
myChart.resize();
+ });
});
}
const initgasT =(time: Array<string>,data: Array<any>)=>{
@@ -896,84 +1496,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, '-');
@@ -1010,21 +1532,29 @@
context.emit('clickFull')
}
- onUnmounted(()=>{
- map.value && map.value.destroy();
- })
+ // onUnmounted(()=>{
+ // map.value && map.value.destroy();
+ // })
return {
timeForm,
config,
gasN,
gasT,
- map,
+ gasWind,
+ audioRef,
+ confirmWarning,
+ playAudio,
+ getDirectionName,
+ updatePolygonPath,
toNdPage,
toTlPage,
timeChange,
mouseoverHandler,
changeTotal,
+ changeWindQuery,
+ changeWind,
+ windTimeChange,
clickHandler,
changeGas1,
changeGas2,
@@ -1150,7 +1680,7 @@
display: flex;
align-items: flex-end;
justify-content: space-between;
- position: relative;
+ //position: relative;
&>div{
height: 100%;
@@ -1174,7 +1704,6 @@
letter-spacing: 4px;
font-size: 16px;
font-weight: bolder;
- line-height: 38px;
color: #11feee;
}
.long-tit{
@@ -1205,6 +1734,10 @@
border: 1px solid rgba(17,254,238,.4);
}
}
+ ::v-deep(.el-switch__core){
+ border: 1px solid #11FEEE;
+ }
+
.sys-status{
width: 66%;
@@ -1454,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%;
}
@@ -1483,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{
@@ -1529,24 +2062,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 +2078,160 @@
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;
+ flex-direction: column;
+ align-items: flex-end;
+ width: 270px;
+ right: 20px;
+ top: 20px;
+ 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: 100%;
+ 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 +2257,4 @@
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.2