From 7069ff06f3e28c615eba1b42015a4784d996dd05 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期四, 08 五月 2025 13:13:16 +0800
Subject: [PATCH] 新修改
---
src/views/monitorData/gasData/index.vue | 159 ++++++++++++++-
src/views/monitorData/fluxData/index.vue | 15 +
src/views/bigScreen/components/screen.vue | 301 ++++++++++++++++++++++++------
src/types/monitorData.d.ts | 1
src/views/bigScreen/components/map.vue | 123 ++++++++++--
5 files changed, 503 insertions(+), 96 deletions(-)
diff --git a/src/types/monitorData.d.ts b/src/types/monitorData.d.ts
index 7d983d8..bd88bc1 100644
--- a/src/types/monitorData.d.ts
+++ b/src/types/monitorData.d.ts
@@ -42,6 +42,7 @@
position: number | null;
}
};
+ isPpm: boolean
gasList: Array<any>;
positionList: Array<any>;
excelData: Array<any>;
diff --git a/src/views/bigScreen/components/map.vue b/src/views/bigScreen/components/map.vue
index ab5cc41..7875851 100644
--- a/src/views/bigScreen/components/map.vue
+++ b/src/views/bigScreen/components/map.vue
@@ -1,30 +1,51 @@
<template>
- <baidu-map class="bigMap" ref="map" ak="Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t" v="3.0" type="API" :scroll-wheel-zoom="true" :center="{lng: 87.681678, lat: 43.943787}" :zoom="18" map-type="BMAP_SATELLITE_MAP" @ready="initMap">
+ <baidu-map class="bigMap" ref="map" ak="Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t" @zoomend="zoomMap" v="3.0" type="API" :scroll-wheel-zoom="true" :center="{lng: 87.681678, lat: 43.943557}" :zoom="18" map-type="BMAP_SATELLITE_MAP" @ready="initMap">
<bm-overlay pane="mapPane" class="polys" @draw="initMap">
- <bm-polygon :path="polygonPath1" stroke-color="#ff52e7" fillColor="#ff52e7" :fillOpacity="0.6" :stroke-weight="2" :zIndex="2"/>
- <bm-label content="1" :position="{lng: 87.68091, lat: 43.944395}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="1" :zIndex="3"/>
- <bm-label style="background-color: rgba(0,0,0,0) !important;" content="1#2#精馏区" :position="{lng: 87.68061, lat:43.944155}" :labelStyle="{color: '#fff', fontSize : '18px',backgroundColor: 'rgba(0,0,0,0)',borderColor: '#fff'}" title="1#2#精馏区" />
- <bm-polygon :path="polygonPath2" stroke-color="#35ff00" fillColor="#35ff00" :fillOpacity="0.6" :stroke-weight="2" :zIndex="2"/>
- <bm-label content="2" :position="{lng: 87.679663, lat: 43.942926}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="2" :zIndex="3"/>
- <bm-label style="background-color: rgba(0,0,0,0) !important;" content="1#2#渣浆" :position="{lng: 87.679363, lat:43.942676}" :labelStyle="{color: 'red', fontSize : '18px',backgroundColor: 'rgba(0,0,0,0)',borderColor: 'red'}" title="1#2#渣浆" />
- <bm-polygon :path="polygonPath3" stroke-color="yellow" fillColor="yellow" :fillOpacity="0.6" :stroke-weight="2" :zIndex="2"/>
- <bm-label content="3" :position="{lng: 87.681455, lat: 43.943401}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="3" :zIndex="3"/>
- <bm-label style="background-color: rgba(0,0,0,0) !important;" content="中间罐区" :position="{lng: 87.681205, lat:43.943131}" :labelStyle="{color: 'red', fontSize : '18px',backgroundColor: 'rgba(0,0,0,0)',borderColor: 'red'}" title="中间罐区" />
- <bm-polygon :path="polygonPath4" stroke-color="#11feee" fillColor="#11feee" :fillOpacity="0.6" :stroke-weight="2" :zIndex="2"/>
- <bm-label content="4" :position="{lng: 87.683099, lat: 43.943842}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="4" :zIndex="3"/>
- <bm-label style="background-color: rgba(0,0,0,0) !important;" content="精馏和冷却" :position="{lng: 87.682850, lat:43.943602}" :labelStyle="{color: 'red', fontSize : '18px',backgroundColor: 'rgba(0,0,0,0)',borderColor: 'red'}" title="精馏和冷却" />
- <bm-polygon :path="polygonPath5" stroke-color="#0055eb" fillColor="#0055eb" :fillOpacity="0.6" :stroke-weight="2" :zIndex="2"/>
- <bm-label content="5" :position="{lng: 87.683509, lat: 43.943055}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="5" :zIndex="3"/>
- <bm-label style="background-color: rgba(0,0,0,0) !important;" content="乙炔新增渣浆区" :position="{lng: 87.683009, lat:43.942775}" :labelStyle="{color: 'red', fontSize : '18px',backgroundColor: 'rgba(0,0,0,0)',borderColor: 'red'}" title="乙炔新增渣浆区" />
+ <bm-polygon :path="polygonPath1" stroke-color="yellow" fillColor="yellow" :fillOpacity="0.7" :stroke-weight="2" :zIndex="2"/>
+ <bm-label content="1" :position="{lng: 87.679807, lat: 43.94402 }" :labelStyle="tittleStyle" title="1" :zIndex="3"/>
+ <bm-label style="background-color: rgba(0,0,0,0) !important;" content="1#电石库" :position="{lng: 87.679667, lat: 43.94382}" :labelStyle="textStyle" title="1#电石库" />
+
+ <bm-polygon :path="polygonPath2" stroke-color="#061959" fillColor="#061959" :fillOpacity="0.7" :stroke-weight="2" :zIndex="2"/>
+ <bm-label content="2" :position="{lng: 87.679663, lat: 43.942926}" :labelStyle="tittleStyle" title="2" :zIndex="3"/>
+ <bm-label style="background-color: rgba(0,0,0,0) !important;" content="渣浆清液池" :position="{lng: 87.679363, lat:43.942676}" :labelStyle="textStyle" title="渣浆清液池" />
+
+ <bm-polygon :path="polygonPath3" stroke-color="#048599" fillColor="#048599" :fillOpacity="0.7" :stroke-weight="2" :zIndex="2"/>
+ <bm-label content="3" :position="{lng: 87.681455, lat: 43.943401}" :labelStyle="tittleStyle" title="3" :zIndex="3"/>
+ <bm-label style="background-color: rgba(0,0,0,0) !important;" content="中间罐区" :position="{lng: 87.681205, lat:43.943131}" :labelStyle="textStyle" title="中间罐区" />
+
+ <bm-polygon :path="polygonPath4" stroke-color="green" fillColor="green" :fillOpacity="0.7" :stroke-weight="2" :zIndex="2"/>
+ <bm-label content="4" :position="{lng: 87.683095, lat: 43.943702 }" :labelStyle="tittleStyle" title="1" :zIndex="3"/>
+ <bm-label style="background-color: rgba(0,0,0,0) !important;" content="3#冷冻" :position="{lng: 87.683005, lat: 43.943502 }" :labelStyle="textStyle" title="3#冷冻" />
+
+ <bm-polygon :path="polygonPath5" stroke-color="#3eec34" fillColor="#3eec34" :fillOpacity="0.7" :stroke-weight="2" :zIndex="2"/>
+ <bm-label content="5" :position="{lng: 87.683509, lat: 43.943055}" :labelStyle="tittleStyle" title="5" :zIndex="3"/>
+ <bm-label style="background-color: rgba(0,0,0,0) !important;" content="新增浓缩池" :position="{lng: 87.683209, lat:43.942875}" :labelStyle="textStyle" title="新增浓缩池" />
+
+ <bm-polygon :path="polygonPath6" stroke-color="#ff52e7" fillColor="#ff52e7" :fillOpacity="0.7" :stroke-weight="2" :zIndex="2"/>
+ <bm-label content="6" :position="{lng: 87.68274, lat: 43.944283 }" :labelStyle="tittleStyle" title="1" :zIndex="3"/>
+ <bm-label style="background-color: rgba(0,0,0,0) !important;" content="3#精馏" :position="{lng: 87.68264, lat: 43.944083 }" :labelStyle="textStyle" title="3#精馏" />
+
+ <bm-polygon :path="polygonPath7" stroke-color="#0055eb" fillColor="#0055eb" :fillOpacity="0.7" :stroke-weight="2" :zIndex="2"/>
+ <bm-label content="7" :position="{lng: 87.682286, lat: 43.944765}" :labelStyle="tittleStyle" title="4" :zIndex="3"/>
+ <bm-label style="background-color: rgba(0,0,0,0) !important;" content="3#压缩" :position="{lng: 87.682206, lat: 43.944565}" :labelStyle="textStyle" title="3#压缩" />
+
+ <bm-polygon :path="polygonPath8" stroke-color="#11feee" fillColor="#11feee" :fillOpacity="0.7" :stroke-weight="2" :zIndex="2"/>
+ <bm-label content="8" :position="{lng: 87.681338, lat: 43.944341 }" :labelStyle="tittleStyle" title="1" :zIndex="3"/>
+ <bm-label style="background-color: rgba(0,0,0,0) !important;" content="2#精馏" :position="{lng: 87.681238, lat: 43.944141}" :labelStyle="textStyle" title="2#精馏" />
+
+ <bm-polygon :path="polygonPath9" stroke-color="#b330d2" fillColor="#b330d2" :fillOpacity="0.7" :stroke-weight="2" :zIndex="2"/>
+ <bm-label content="9" :position="{lng: 87.680727, lat: 43.944157}" :labelStyle="tittleStyle" title="1" :zIndex="3"/>
+ <bm-label style="background-color: rgba(0,0,0,0) !important;" content="1#精馏" :position="{lng: 87.68061, lat:43.943955}" :labelStyle="textStyle" title="1#精馏" />
+
<bm-polyline :path="polylinePath1" stroke-color="red" :stroke-opacity="1" :stroke-weight="3"></bm-polyline>
<bm-polyline :path="polylinePath11" stroke-color="red" :stroke-opacity="1" :stroke-weight="3"></bm-polyline>
<bm-polyline :path="polylinePath12" stroke-color="red" :stroke-opacity="1" :stroke-weight="3"></bm-polyline>
- <bm-label style="background-color: rgba(0,0,0,0) !important;" content="155m 方位1" :position="{lng: 87.6798, lat:43.943708}" :labelStyle="{color: 'red', fontSize : '18px',backgroundColor: 'rgba(0,0,0,0)',fontWeight: 'bold',border: 'none'}" title="155m 方位1" />
+ <bm-label style="background-color: rgba(0,0,0,0) !important;" content="155m 方位1" :position="{lng: 87.6798, lat:43.943708}" :labelStyle="numberStyle" title="155m 方位1" />
<bm-polyline :path="polylinePath2" stroke-color="red" :stroke-opacity="1" :stroke-weight="3"></bm-polyline>
<bm-polyline :path="polylinePath21" stroke-color="red" :stroke-opacity="1" :stroke-weight="3"></bm-polyline>
<bm-polyline :path="polylinePath22" stroke-color="red" :stroke-opacity="1" :stroke-weight="3"></bm-polyline>
- <bm-label style="background-color: rgba(0,0,0,0) !important;" content="145m 方位2" :position="{lng:87.681065, lat:43.942399}" :labelStyle="{color: 'red', fontSize : '18px',backgroundColor: 'rgba(0,0,0,0)',fontWeight: 'bolder',border: 'none'}" title="145m 方位2" />
+ <bm-label style="background-color: rgba(0,0,0,0) !important;" content="145m 方位2" :position="{lng:87.681065, lat:43.942399}" :labelStyle="numberStyle" title="145m 方位2" />
</bm-overlay>
<bm-ground class="picBg" :bounds="{ne: {lng: 87.679854, lat: 43.945406}, sw:{lng: 87.67801, lat: 43.94331}}" imageURL="/directions.png" opacity="1"></bm-ground>
<bm-map-type :map-types="['BMAP_SATELLITE_MAP','BMAP_NORMAL_MAP' ]" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
@@ -46,12 +67,20 @@
polygonPath3: Array<location>
polygonPath4: Array<location>
polygonPath5: Array<location>
+ polygonPath6: Array<location>
+ polygonPath7: Array<location>
+ polygonPath8: Array<location>
+ polygonPath9: Array<location>
polylinePath1: Array<location>
polylinePath11: Array<location>
polylinePath12: Array<location>
polylinePath2: Array<location>
polylinePath21: Array<location>
polylinePath22: Array<location>
+ textStyle: {}
+ textStyle2: {}
+ tittleStyle: {}
+ numberStyle: {}
}
interface location{
lng: number | null
@@ -67,12 +96,39 @@
polygonPath3: [],
polygonPath4: [],
polygonPath5: [],
+ polygonPath6: [],
+ polygonPath7: [],
+ polygonPath8: [],
+ polygonPath9: [],
polylinePath1: [],
polylinePath11: [],
polylinePath12: [],
polylinePath2: [],
polylinePath21: [],
- polylinePath22: []
+ polylinePath22: [],
+ textStyle: {
+ color: '#fff',
+ fontSize : '16px',
+ backgroundColor: 'rgba(0,0,0,0)',
+ borderColor: '#fff'
+ },
+ textStyle2: {
+ color: 'red',
+ fontSize : '16px',
+ backgroundColor: 'rgba(0,0,0,0)',
+ borderColor: 'red'
+ },
+ tittleStyle: {
+ color: '#000000',
+ fontSize : '20px'
+ },
+ numberStyle: {
+ color: 'red',
+ fontSize : '16px',
+ backgroundColor: 'rgba(0,0,0,0)',
+ fontWeight: 'bolder',
+ border: 'none'
+ }
});
// 页面加载时
@@ -93,11 +149,15 @@
});
const map = reactive({})
const initMap=()=>{
- state.polygonPath1 = [{ lng: 87.680177, lat: 43.944441 }, { lng: 87.681239, lat: 43.94478 }, { lng: 87.68172, lat: 43.944013 }, { lng: 87.680649, lat: 43.943647 }]
+ state.polygonPath1 = [{ lng: 87.679428, lat: 43.944073 }, { lng: 87.679929, lat: 43.944245 }, { lng: 87.680345, lat: 43.943524 }, { lng: 87.67985, lat: 43.943355 }]
state.polygonPath2 = [{ lng: 87.678872, lat: 43.94283 }, { lng: 87.680266, lat: 43.943274 }, { lng: 87.680698, lat: 43.94254 }, { lng: 87.67929, lat: 43.942076 }]
- state.polygonPath3 = [{ lng: 87.680406, lat: 43.943341 }, { lng: 87.681953, lat: 43.943873}, { lng: 87.682582, lat: 43.942857 }, { lng: 87.680992, lat: 43.942359 }]
- state.polygonPath4 = [{ lng: 87.682381, lat: 43.944043 }, { lng: 87.683216, lat: 43.944326 }, { lng: 87.683851, lat: 43.943348 }, { lng: 87.683004, lat: 43.943053 }]
+ state.polygonPath3 = [{ lng: 87.680406, lat: 43.943341 }, { lng: 87.681953, lat: 43.943873}, { lng: 87.682582, lat: 43.942807 }, { lng: 87.680992, lat: 43.942309 }]
+ state.polygonPath4 = [{ lng: 87.682575, lat: 43.943725 }, { lng: 87.683401, lat: 43.94402}, { lng: 87.683756, lat: 43.943383 }, { lng: 87.682961, lat: 43.943112 }]
state.polygonPath5 = [{ lng: 87.682825, lat: 43.942898 }, { lng: 87.683931, lat: 43.943295 }, { lng: 87.684201, lat: 43.942784 }, { lng: 87.683081, lat: 43.942438}]
+ state.polygonPath6 = [{ lng: 87.682305, lat: 43.944163 }, { lng: 87.683123, lat: 43.944449}, { lng: 87.683339, lat: 43.944071 }, { lng: 87.68253, lat: 43.943802 }]
+ state.polygonPath7 = [{ lng: 87.681605, lat: 43.944581}, { lng: 87.682826,lat: 43.944903 }, { lng: 87.68308, lat: 43.944527 }, { lng: 87.681874, lat: 43.944102 }]
+ state.polygonPath8 = [{ lng: 87.681052, lat: 43.944205 }, { lng: 87.681581, lat: 43.944387 }, { lng: 87.681771, lat: 43.944056 }, { lng: 87.681254, lat: 43.943877 }]
+ state.polygonPath9 = [{ lng: 87.680507, lat: 43.944051 }, { lng: 87.680952, lat: 43.944182 }, { lng: 87.68115, lat: 43.943840 }, { lng: 87.680729, lat: 43.943697 }]
state.polylinePath1 = [{ lng: 87.681944, lat: 43.943929}, {lng: 87.680313, lat: 43.943402}]
state.polylinePath11 = [{lng: 87.680313, lat: 43.943402},{ lng: 87.680420, lat: 43.943512}]
state.polylinePath12 = [{lng: 87.680313, lat: 43.943402},{ lng: 87.680503, lat: 43.943402}]
@@ -105,8 +165,27 @@
state.polylinePath21 = [{lng: 87.680323, lat: 43.943302},{ lng: 87.680303, lat: 43.943202}]
state.polylinePath22 = [{lng: 87.680323, lat: 43.943302},{ lng: 87.680453, lat: 43.943242}]
}
+ const zoomMap = (type, target)=>{
+ if(type.target.Za>=18){
+ state.textStyle.fontSize = '16px'
+ state.textStyle2.fontSize = '16px'
+ state.tittleStyle.fontSize = '20px'
+ state.numberStyle.fontSize = '16px'
+ }else if(type.target.Za>=15 && type.target.Za<=17){
+ state.textStyle.fontSize = '12px'
+ state.textStyle2.fontSize = '12px'
+ state.tittleStyle.fontSize = '14px'
+ state.numberStyle.fontSize = '12px'
+ }else{
+ state.textStyle.fontSize = '10px'
+ state.textStyle2.fontSize = '10px'
+ state.tittleStyle.fontSize = '10px'
+ state.numberStyle.fontSize = '10px'
+ }
+ }
return {
initMap,
+ zoomMap,
map,
...toRefs(state)
};
diff --git a/src/views/bigScreen/components/screen.vue b/src/views/bigScreen/components/screen.vue
index 873cfd6..eae6748 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,49 @@
: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>
+ <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>{{ getDirectionName(item.windDirection)+'('+ item.windDirection +'度)'}}</td>
+ <td>{{item.pressure}}</td>
+ </tr>
+ </table>
</div>
</div>
<div class="right-mid withFilterLong">
@@ -294,6 +302,7 @@
startTime: '',
endTime:''
}
+ showRose: boolean
countTime: null | number
time: string
date: string
@@ -306,6 +315,7 @@
gasSearch: number | null
tlGasSearch: number | null
positionSearch: number | null
+ isPpm: boolean
positionOptions: Array<gasType>
gasOptions: Array<gasType>
monthAgo: string,
@@ -354,6 +364,7 @@
const state = reactive<TableDataState>({
yellowNum: null,
redNum: null,
+ showRose: true,
socket: null,
timer: null,
heartbeat: null,
@@ -380,6 +391,7 @@
endTime: ''
},
positionSearch: null,
+ isPpm: true,
gasSearch: null,
tlGasSearch: null,
gasOptions: [],
@@ -395,10 +407,6 @@
{
id: 2,
name: '方位2'
- },
- {
- id: 3,
- name: '方位3'
}
],
monthAgo: '',
@@ -566,7 +574,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 +597,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 +622,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,7 +638,11 @@
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):'--',
@@ -631,7 +654,11 @@
}
})
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
}
@@ -883,6 +910,10 @@
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){
@@ -891,7 +922,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 == '气体通量'){
@@ -1058,11 +1093,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'
}
}
},
@@ -1156,7 +1191,7 @@
itemHeight: 6,
itemGap: 4,
textStyle: {
- color: '#11feee',
+ color: '#fff',
fontSize: 12
}
}
@@ -1168,7 +1203,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);
@@ -1176,6 +1211,12 @@
option = {
tooltip: {
trigger: 'axis',
+ },
+ legend: {
+ data: ['浓度', '温度','湿度','风速','气压'],
+ textStyle: {
+ color: '#fff'
+ }
},
xAxis: {
type: 'category',
@@ -1187,25 +1228,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,
@@ -1213,12 +1325,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'
}
}
]
@@ -1327,6 +1500,7 @@
audioRef,
confirmWarning,
playAudio,
+ getDirectionName,
updatePolygonPath,
toNdPage,
toTlPage,
@@ -1515,6 +1689,10 @@
border: 1px solid rgba(17,254,238,.4);
}
}
+ ::v-deep(.el-switch__core){
+ border: 1px solid #11FEEE;
+ }
+
.sys-status{
width: 66%;
@@ -1764,8 +1942,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%;
}
@@ -1898,6 +2076,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{
diff --git a/src/views/monitorData/fluxData/index.vue b/src/views/monitorData/fluxData/index.vue
index 97ef4ff..27b2648 100644
--- a/src/views/monitorData/fluxData/index.vue
+++ b/src/views/monitorData/fluxData/index.vue
@@ -62,7 +62,11 @@
<el-table-column align="center" prop="time" label="采集时间"/>
<el-table-column align="center" prop="regionName" label="区域名称"/>
<el-table-column align="center" prop="windSpeed" label="风速"/>
- <el-table-column align="center" prop="windDirection" label="风向"/>
+ <el-table-column align="center" prop="windDirection" label="风向">
+ <template #default="scope">
+ {{ getDirection(scope.row.windDirection)+'('+ scope.row.windDirection +'度)' }}
+ </template>
+ </el-table-column>
<el-table-column align="center" prop="name" label="气体名称"/>
<el-table-column align="center" prop="gasValue" label="气体浓度"/>
</el-table>
@@ -282,6 +286,15 @@
}
};
+const getDirection=(num:number)=>{
+ const directionName = ['北', '北东北', '东北', '东东北', '东', '东东南', '东南','南东南','南','南西南','西南','西西南','西','西西北','西北','北西北']
+ if(num<=348.75 ){
+ return directionName[Math.floor((num + 11.25) / 22.5)]
+ }else{
+ return '北'
+ }
+}
+
const exportFluxData = async () => {
const pageParam = {
startTime: moment(state.tableData.listQuery.searchParams.time[0]).format('YYYY-MM-DD HH:mm:ss'),
diff --git a/src/views/monitorData/gasData/index.vue b/src/views/monitorData/gasData/index.vue
index 1baa150..026599f 100644
--- a/src/views/monitorData/gasData/index.vue
+++ b/src/views/monitorData/gasData/index.vue
@@ -34,7 +34,17 @@
<el-option v-for="item in state.tableData.positionList" :key="item.label" :label="item.value" :value="item.label"></el-option>
</el-select>
</el-form-item>
-
+ <el-form-item label="单位：">
+ <el-switch
+ v-model="state.tableData.isPpm"
+ class="ml-2"
+ inline-prompt
+ style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+ active-text="ppm"
+ inactive-text="ppb"
+ @change="initInfoData"
+ />
+ </el-form-item>
<el-button size="default" type="primary" class="ml10" @click="search()">
<el-icon>
<ele-Search />
@@ -62,7 +72,11 @@
<el-table-column type="index" label="序号" width="80" />
<el-table-column align="center" prop="time" label="采集时间"/>
<el-table-column align="center" prop="windSpeed" label="风速"/>
- <el-table-column align="center" prop="windDirection" label="风向"/>
+ <el-table-column align="center" prop="windDirection" label="风向">
+ <template #default="scope">
+ {{ getDirection(scope.row.windDirection)+'('+ scope.row.windDirection +'度)' }}
+ </template>
+ </el-table-column>
<el-table-column align="center" prop="name" label="气体名称"/>
<el-table-column align="center" prop="gasValue" label="气体浓度"/>
<el-table-column align="center" prop="position" label="方位"/>
@@ -113,6 +127,7 @@
}
},
gasList: [],
+ isPpm: true,
positionList: [
{
value: '方位1',
@@ -121,10 +136,6 @@
{
value: '方位2',
label: 2
- },
- {
- value: '方位3',
- label: 3
},
],
excelData: []
@@ -181,6 +192,10 @@
const dataZoomEnd = ref();
const xData = ref([]);
const yData = ref([]);
+const tData = ref([]);
+const hData = ref([]);
+const wData = ref([]);
+const pData = ref([]);
const markLines = ref(0);
const myChart = shallowRef(null)
onMounted(
@@ -197,6 +212,16 @@
eTime = `${eTime} ` + moment().format('HH:mm:ss')
state.tableData.listQuery.searchParams.time = [sTime,eTime];
}
+
+const getDirection=(num:number)=>{
+ const directionName = ['北', '北东北', '东北', '东东北', '东', '东东南', '东南','南东南','南','南西南','西南','西西南','西','西西北','西北','北西北']
+ if(num<=348.75 ){
+ return directionName[Math.floor((num + 11.25) / 22.5)]
+ }else{
+ return '北'
+ }
+}
+
const initInfoData = async () => {
await exportGasData();
//折线图
@@ -212,13 +237,27 @@
xData.value = resChart.data.data.map((item: any) => {
return item.time;
})
- yData.value = resChart.data.data.map((item: any) => {
+ if(state.tableData.isPpm){
+ yData.value = resChart.data.data.map((item: any) => {
return item.gasValue;
- })
+ })
+ }else{
+ yData.value = resChart.data.data.map((item: any) => {
+ return item.gasValue * 1000;
+ })
+ }
+ tData.value = resChart.data.data.map(i=>i.temp?i.temp:0)
+ hData.value = resChart.data.data.map(i=>i.humidity?i.humidity:0)
+ wData.value = resChart.data.data.map(i=>i.windSpeed?i.windSpeed:0)
+ pData.value = resChart.data.data.map(i=>i.pressure?i.pressure:0)
dataZoomEnd.value = xData.value.length > 25 ? 30 : 100;
}else {
xData.value = [];
yData.value = [];
+ tData.value = [];
+ hData.value = [];
+ wData.value = [];
+ pData.value = [];
markLines.value = 0;
dataZoomEnd.value = 100;
}
@@ -261,7 +300,6 @@
let res = await gasManageApi().getGas({});
if(res.data.code == 100) {
state.tableData.gasList = res.data.data;
- console.log("气体",state.tableData.gasList)
//默认选择第一个气体
state.tableData.listQuery.searchParams.gas = state.tableData.gasList[0].id;
markLines.value = state.tableData.gasList[0].threshold;
@@ -347,12 +385,81 @@
type: 'category',
data: xData.value
},
- yAxis: {
+ legend: {
+ data: ['浓度', '温度','湿度','风速','气压']
+ },
+ yAxis: [
+ {
+ name: '浓度',
show: true,
type: 'value',
max: Math.max(markLines.value,...yData.value),
min: Math.min(markLines.value,...yData.value)
- },
+ },
+ {
+ name: '温度',
+ type: 'value',
+ position: 'right',
+ axisLine:{
+ show: true
+ },
+ splitLine: {
+ show: false
+ },
+ axisLabel:{
+ color: '#91CC75',
+ fontSize: 9
+ }
+ },
+ {
+ name: '湿度',
+ type: 'value',
+ offset : 25,
+ position: 'right',
+ axisLine:{
+ show: true
+ },
+ splitLine: {
+ show: false
+ },
+ axisLabel:{
+ color: '#FAC858',
+ fontSize: 9
+ }
+ },
+ {
+ name: '风速',
+ type: 'value',
+ offset : 50,
+ position: 'right',
+ axisLine:{
+ show: true
+ },
+ splitLine: {
+ show: false
+ },
+ axisLabel:{
+ color: '#EE6666',
+ fontSize: 9
+ }
+ },
+ {
+ name: '气压',
+ type: 'value',
+ offset : 75,
+ position: 'right',
+ axisLine:{
+ show: true
+ },
+ splitLine: {
+ show: false
+ },
+ axisLabel:{
+ color: '#73C0DE',
+ fontSize: 9
+ }
+ }
+ ],
graphic: {
type: 'text', // 类型：文本
left: 'center',
@@ -369,7 +476,7 @@
},
series: [
{
- // name : '总计',
+ name : '浓度',
data: yData.value,
type: 'line',
markLine: {//图表标线
@@ -388,6 +495,34 @@
},],//type: 'average', 平均值, min最小值, max 最大值, median中位数
},
},
+ {
+ name: '温度',
+ yAxisIndex: 1,
+ data: tData.value,
+ type: 'line',
+ showSymbol: false,
+ },
+ {
+ name: '湿度',
+ yAxisIndex: 2,
+ data: hData.value,
+ type: 'line',
+ showSymbol: false,
+ },
+ {
+ name: '风速',
+ yAxisIndex: 3,
+ data: wData.value,
+ type: 'line',
+ showSymbol: false,
+ },
+ {
+ name: '气压',
+ yAxisIndex: 4,
+ data: pData.value,
+ type: 'line',
+ showSymbol: false,
+ }
],
dataZoom: [
{
--
Gitblit v1.9.2