From 9d389dee9dfb78bf4a57ff41ba11d61c65134442 Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: Fri, 19 Dec 2025 14:13:42 +0800
Subject: [PATCH] 地图修改
---
src/views/bigScreen/components/screen.vue | 383 +++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 307 insertions(+), 76 deletions(-)
diff --git a/src/views/bigScreen/components/screen.vue b/src/views/bigScreen/components/screen.vue
index 6361fba..c3321bc 100644
--- a/src/views/bigScreen/components/screen.vue
+++ b/src/views/bigScreen/components/screen.vue
@@ -96,7 +96,7 @@
</div>
</div>
<div class="main-middle">
- <div class="map-filter">
+ <div class="map-filter" v-if="showRose">
<el-radio-group v-model="windQuery.type" @change="changeWindQuery">
<el-radio :label="1" size="small" border>按时间段</el-radio>
<el-radio :label="2" size="small" border>按具体时间</el-radio>
@@ -126,36 +126,7 @@
<!-- </div>-->
<div class="mid-bottom">
<div class="chart-head">
- <div class="chart-tit">气象信息</div>
- </div>
- <div class="chart-cont bigData">
- <div class="bigPic">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
-<!-- <dv-scroll-board :config="bigConfig" class="scroll-table" @mouseover="mouseoverHandler" @click="clickHandler" />-->
- <table class="weather">
- <tr class="weatherTit"><td>时间</td><td>温度</td><td>湿度</td><td>风速</td><td>风向</td><td>气压</td></tr>
- <tr v-for="(item,index) in weatherData" :key="index" class="weatherRow">
- <td>{{item.time}}</td>
- <td>{{item.temp}}</td>
- <td>{{item.humidity}}</td>
- <td>{{item.windSpeed}}</td>
- <td>{{item.windDirection}}</td>
- <td>{{item.pressure}}</td>
- </tr>
- </table>
- </div>
- </div>
- </div>
- <div class="main-right">
- <div class="right-top withFilterLong">
- <div class="chart-head">
- <div class="chart-tit long-tit">气体浓度监测</div>
+ <div class="chart-tit">气体浓度监测</div>
<div class="searchGroup">
<el-select v-model="gasSearch" :teleported="false" class="m-2" placeholder="Select" size="small" @change="changeGas1">
<el-option
@@ -173,12 +144,51 @@
:value="item.id"
/>
</el-select>
+ <el-switch
+ v-model="isPpm"
+ class="ml-2"
+ inline-prompt
+ style="--el-switch-on-color: rgba(0,0,0,0); --el-switch-off-color: rgba(0,0,0,0)"
+ active-text="ppm"
+ inactive-text="ppb"
+ @change="changeGas1"
+ />
<div class="checkMore" @click="toNdPage()"><el-icon><DArrowRight /></el-icon></div>
</div>
</div>
<div class="chart-cont">
<div v-if="hasNd==true" class="echart" :id="gasN"></div>
<div v-else class="echart" style="display: flex;font-size: 20px;justify-content: center;align-items: center"><span style="color:#11feee;">暂无数据</span></div>
+ </div>
+ </div>
+ </div>
+ <div class="main-right">
+ <div class="right-top withFilterLong">
+ <div class="chart-head">
+ <div class="chart-tit long-tit">气象信息</div>
+ </div>
+ <div class="chart-cont bigData">
+ <div class="bigPic">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
+ <table class="weather">
+ <tr class="weatherTit"><td>时间</td><td>温度</td><td>湿度</td><td>风速</td><td>风力等级</td><td>风向</td><td>气压</td></tr>
+ <tr v-for="(item,index) in weatherData" :key="index" class="weatherRow">
+ <td>{{item.time}}</td>
+ <td>{{item.temp}}</td>
+ <td>{{item.humidity}}</td>
+ <td>{{item.windSpeed}}</td>
+ <td>{{item.level}}</td>
+ <td>{{ getDirectionName(item.windDirection)+'('+ item.windDirection +'度)'}}</td>
+ <td>{{item.pressure}}</td>
+ </tr>
+ </table>
</div>
</div>
<div class="right-mid withFilterLong">
@@ -274,8 +284,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 Map from './mapNew.vue'
+// import {BaiduMap, BmMapType, BmNavigation, BmPolygon, BmGround} from 'vue-baidu-map-3x'
import { useUserInfo } from '/@/stores/userInfo';
import {bigScreenApi} from "/@/api/bigScreen";
@@ -294,6 +304,7 @@
startTime: '',
endTime:''
}
+ showRose: boolean
countTime: null | number
time: string
date: string
@@ -306,6 +317,7 @@
gasSearch: number | null
tlGasSearch: number | null
positionSearch: number | null
+ isPpm: boolean
positionOptions: Array<gasType>
gasOptions: Array<gasType>
monthAgo: string,
@@ -344,7 +356,7 @@
export default defineComponent({
name: 'bigScreen',
- components: {Map,BaiduMap, BmMapType, BmNavigation, BmPolygon },
+ components: {Map },
props:{
isFull: Boolean
},
@@ -354,6 +366,7 @@
const state = reactive<TableDataState>({
yellowNum: null,
redNum: null,
+ showRose: true,
socket: null,
timer: null,
heartbeat: null,
@@ -380,6 +393,7 @@
endTime: ''
},
positionSearch: null,
+ isPpm: true,
gasSearch: null,
tlGasSearch: null,
gasOptions: [],
@@ -395,10 +409,6 @@
{
id: 2,
name: '方位2'
- },
- {
- id: 3,
- name: '方位3'
}
],
monthAgo: '',
@@ -566,7 +576,8 @@
const res = await bigScreenApi().getWindNum(data)
if(res.data.code == 100){
const windData = JSON.parse(JSON.stringify(res.data.data))
- if(Array.isArray(windData)){
+ if(Array.isArray(windData) && windData.length>0){
+ state.showRose = true
let pointFive = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
let twoZone = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
let fourZone = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
@@ -588,13 +599,14 @@
}else if(i.windSpeed>8 && i.windSpeed<=10){
tenZone[getDirection(i.windDirection)] += 1
} else if(i.windSpeed>10){
- console.log(777,i.windDirection,getDirection(i.windDirection))
tenAbove[getDirection(i.windDirection)] += 1
}else{
console.log('windSpeed为null')
}
}
initgasWind(pointFive,twoZone,fourZone,sixZone,eightZone,tenZone,tenAbove)
+ }else{
+ state.showRose = false
}
}else {
ElMessage({
@@ -612,6 +624,15 @@
}
}
+ const getDirectionName=(num:number)=>{
+ const directionName = ['北', '北东北', '东北', '东东北', '东', '东东南', '东南','南东南','南','南西南','西南','西西南','西','西西北','西北','北西北']
+ if(num<=348.75 ){
+ return directionName[Math.floor((num + 11.25) / 22.5)]
+ }else{
+ return '北'
+ }
+ }
+
const getGasNdData = async ()=>{
const res = await bigScreenApi().getGasNdData({startTime: state.today+' 00:00:00',endTime: state.today+' 23:59:59',gasName: state.gasSearch,position: state.positionSearch})
if(res.data.code == 100){
@@ -619,19 +640,28 @@
state.hasNd = true
state.gasTotal = res.data.data.length
const timeList = res.data.data.map(i=>i.time.slice(11))
- const dotList = res.data.data.map(i=>i.gasValue)
+ const dotList = res.data.data.map(i=>i.gasValue?i.gasValue:0)
+ const tempList = res.data.data.map(i=>i.temp?i.temp:0)
+ const humidityList = res.data.data.map(i=>i.humidity?i.humidity:0)
+ const windList = res.data.data.map(i=>i.windSpeed?i.windSpeed:0)
+ const pressureList = res.data.data.map(i=>i.pressure?i.pressure:0)
const weather = res.data.data.map((item)=>{
return {
time: item.time?item.time.slice(11):'--',
temp: item.temp?item.temp:'--',
humidity: item.humidity?item.humidity:'--',
windSpeed: item.windSpeed?item.windSpeed:'--',
+ level: item.windSpeed ? handelLevel(item.windSpeed) : '--',
windDirection: item.windDirection?item.windDirection:'--',
pressure: item.pressure?item.pressure:'--'
}
})
state.weatherData = [...weather].reverse().slice(0, 4);
- initgasN(dotList.slice(dotList.length - 50),timeList.slice(timeList.length - 50))
+ if(state.isPpm){
+ initgasN(dotList.slice(dotList.length - 50),tempList.slice(dotList.length - 50),humidityList.slice(dotList.length - 50),windList.slice(dotList.length - 50),pressureList.slice(dotList.length - 50),timeList.slice(timeList.length - 50))
+ }else{
+ initgasN(dotList?.map(i=> i * 1000).slice(dotList.length - 50),tempList.slice(dotList.length - 50),humidityList.slice(dotList.length - 50),windList.slice(dotList.length - 50),pressureList.slice(dotList.length - 50),timeList.slice(timeList.length - 50))
+ }
}else{
state.hasNd = false
}
@@ -641,6 +671,47 @@
message: res.data.msg
});
}
+ }
+ const handelLevel = (level) => {
+ let l = null
+ if(level>=0 && level<=0.2) {
+ l = '0级'
+ }else if(level>=0.3 && level<=1.5) {
+ l = '1级'
+ }else if(level>=1.6 && level<=3.3){
+ l = '2级'
+ }else if(level>=3.4 && level<=5.4){
+ l = '3级'
+ }else if(level>=5.5 && level<=7.9){
+ l = '4级'
+ }else if(level>=8.0 && level<=10.7){
+ l = '5级'
+ }else if(level>=10.8 && level<=13.8){
+ l = '6级'
+ }else if(level>=13.9 && level<=17.1){
+ l = '7级'
+ }else if(level>=17.2 && level<=20.7){
+ l = '8级'
+ }else if(level>=20.8 && level<=24.4){
+ l = '9级'
+ }else if(level>=24.5 && level<=28.4){
+ l = '10级'
+ }else if(level>=28.5 && level<=32.6){
+ l = '11级'
+ }else if(level>=32.7 && level<=36.9){
+ l = '12级'
+ }else if(level>=37.0 && level<=41.4){
+ l = '13级'
+ }else if(level>=41.5&& level<=46.1){
+ l = '14级'
+ }else if(level>=46.2 && level<=50.9){
+ l = '15级'
+ }else if(level>=51.0 && level<=56.0){
+ l = '16级'
+ }else if(level>=56.1 && level<=61.2){
+ l = '17级'
+ }
+ return l
}
const getGasTlData = async ()=>{
@@ -863,25 +934,31 @@
let newArr = JSON.parse(JSON.stringify(state.gasData))
if(Array.isArray(newArr)){
state.gasTotal = newArr.length
- }else{
- state.gasTotal = 0
- }
- const weather = newArr.map((item)=>{
+ const weather = newArr.map((item)=>{
return {
time: item.dataReceivingTime?item.dataReceivingTime.slice(11,19):'--',
temp: item.temp?item.temp:'--',
humidity: item.humidity?item.humidity:'--',
windSpeed: item.windSpeed?item.windSpeed:'--',
+ level: item.windSpeed ? handelLevel(item.windSpeed) : '--',
windDirection: item.windDirection?item.windDirection:'--',
pressure: item.pressure?item.pressure:'--'
}
- })
- state.weatherData = [...weather].reverse().slice(0, 4);
+ })
+ state.weatherData = [...weather].reverse().slice(0, 4);
+ }else{
+ // state.gasTotal = 0
+ getGasNdData()
+ }
for(let key in newArr[0]){
if(newArr[0][key] == state.gasSearch && key.indexOf("gasName") !== -1){
gasNum = key.substring(7)
}
}
+ const tempList = newArr.map(i=>i.temp?i.temp:0)
+ const humidityList = newArr.map(i=>i.humidity?i.humidity:0)
+ const windList = newArr.map(i=>i.windSpeed?i.windSpeed:0)
+ const pressureList = newArr.map(i=>i.pressure?i.pressure:0)
const dotList = newArr.map((item)=>{
for(let key in item){
if(key.indexOf("gasValue") !== -1 && key.substring(8) == gasNum){
@@ -890,7 +967,11 @@
}
})
const gasTime = state.gasData.map(i=>i.dataReceivingTime?.slice(11,19))
- initgasN(dotList.slice(dotList.length - 50),gasTime.slice(gasTime.length - 50))
+ if(state.isPpm){
+ initgasN(dotList.slice(dotList.length - 50),tempList.slice(dotList.length - 50),humidityList.slice(dotList.length - 50),windList.slice(dotList.length - 50),pressureList.slice(dotList.length - 50),gasTime.slice(gasTime.length - 50))
+ }else{
+ initgasN(dotList?.map(i=> i * 1000).slice(dotList.length - 50),tempList.slice(dotList.length - 50),humidityList.slice(dotList.length - 50),windList.slice(dotList.length - 50),pressureList.slice(dotList.length - 50),gasTime.slice(gasTime.length - 50))
+ }
}
if(type == '气体通量'){
@@ -901,7 +982,6 @@
}else{
state.tlTotal = 0
}
- console.log(state.gasTotal,'获取结束')
const gasTime = newArr.map(i=>i.dataReceivingTime?.slice(11,19))
const gasTlTime = [...new Set(gasTime)]
let areaData = state.areaOptions.map((item)=>{
@@ -945,7 +1025,9 @@
}
state.socket.onclose=()=>{
- console.log("socket已经关闭")
+ getGasNdData()
+ getGasTlData()
+ getWindData()
}
}
}
@@ -1056,11 +1138,11 @@
option = {
angleAxis: {
type: 'category',
- data: ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW'],
+ data: ['北', '北东北', '东北', '东东北', '东', '东东南', '东南','南东南','南','南西南','西南','西西南','西','西西北','西北','北西北'],
axisLine: {
show: true,
lineStyle: {
- color: '#11feee'
+ color: '#fff'
}
}
},
@@ -1154,7 +1236,7 @@
itemHeight: 6,
itemGap: 4,
textStyle: {
- color: '#11feee',
+ color: '#fff',
fontSize: 12
}
}
@@ -1166,7 +1248,7 @@
});
}
- const initgasN =(data:Array<string>,time: Array<string>)=>{
+ const initgasN =(nData:Array<string>,tData:Array<string>,hData:Array<string>,wData:Array<string>,pData:Array<string>,time: Array<string>)=>{
nextTick(() => {
let dom = document.getElementById(gasN.value);
let myChart = echarts.init(dom);
@@ -1174,6 +1256,12 @@
option = {
tooltip: {
trigger: 'axis',
+ },
+ legend: {
+ data: ['浓度', '温度','湿度','风速','气压'],
+ textStyle: {
+ color: '#fff'
+ }
},
xAxis: {
type: 'category',
@@ -1185,25 +1273,96 @@
show: false
}
},
- yAxis: {
- axisLine:{
- show: true
+ yAxis: [
+ {
+ name: '浓度',
+ type: 'value',
+ position: 'left',
+ axisLine:{
+ show: true
+ },
+ splitLine: {
+ show: false
+ },
+ axisLabel:{
+ color: '#54d5ff'
+ }
},
- splitLine: {
- show: false
+ {
+ name: '温度',
+ type: 'value',
+ position: 'right',
+ axisLine:{
+ show: true
+ },
+ splitLine: {
+ show: false
+ },
+ axisLabel:{
+ color: '#ffb42a',
+ fontSize: 9
+ }
},
- axisLabel:{
- color: '#ccc'
+ {
+ name: '湿度',
+ type: 'value',
+ offset : 25,
+ position: 'right',
+ axisLine:{
+ show: true
+ },
+ splitLine: {
+ show: false
+ },
+ axisLabel:{
+ color: '#52ff69',
+ fontSize: 9
+ }
+ },
+ {
+ name: '风速',
+ type: 'value',
+ offset : 50,
+ position: 'right',
+ axisLine:{
+ show: true
+ },
+ splitLine: {
+ show: false
+ },
+ axisLabel:{
+ color: '#faa7ff',
+ fontSize: 9
+ }
+ },
+ {
+ name: '气压',
+ type: 'value',
+ offset : 75,
+ position: 'right',
+ axisLine:{
+ show: true
+ },
+ splitLine: {
+ show: false
+ },
+ axisLabel:{
+ color: 'yellow',
+ fontSize: 9
+ }
}
- },
+ ],
grid: {
- top: '5%',
- bottom: '15%',
- right: '2%'
+ left: '5%',
+ top: '20%',
+ bottom: '12%',
+ right: '14%'
},
series: [
{
- data: data,
+ name: '浓度',
+ yAxisIndex: 0,
+ data: nData,
type: 'line',
label:{
show: true,
@@ -1211,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'
}
}
]
@@ -1325,6 +1545,7 @@
audioRef,
confirmWarning,
playAudio,
+ getDirectionName,
updatePolygonPath,
toNdPage,
toTlPage,
@@ -1513,6 +1734,10 @@
border: 1px solid rgba(17,254,238,.4);
}
}
+ ::v-deep(.el-switch__core){
+ border: 1px solid #11FEEE;
+ }
+
.sys-status{
width: 66%;
@@ -1762,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%;
}
@@ -1787,12 +2012,16 @@
background: url("../../../assets/warningScreen/data-6.png") no-repeat center;
background-size: 90% 90%;
}
+ div:nth-of-type(7){
+ background: url("../../../assets/warningScreen/data-7.png") no-repeat center;
+ background-size: 90% 90%;
+ }
}
.weather{
width: 100%;
height: calc(100% - 60px);
- background: url("../../../assets/warningScreen/scroll-bg.png") no-repeat bottom;
- background-size: 100% 82%;
+ //background: url("../../../assets/warningScreen/scroll-bg.png") no-repeat bottom;
+ //background-size: 100% 82%;
tr{
width: 100%;
@@ -1804,7 +2033,7 @@
width: calc(100% / 6);
text-align: center;
box-sizing: border-box;
- font-size: 12px;
+ font-size: 11px;
}
}
.weatherTit{
@@ -1812,6 +2041,7 @@
}
.weatherRow{
color: #fff;
+ background: rgb(18,90,145);
}
}
@@ -1896,6 +2126,7 @@
z-index: 99;
border: 1px solid #11FEEE;
border-radius: 4px;
+ background: rgba(0,0,0,0.5);
//background: url("../../../assets/warningScreen/windbg.png") no-repeat center;
.el-radio-group{
@@ -2031,4 +2262,4 @@
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.2