From 346adb79f263ae12193758e1c9be227e5f913246 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期二, 19 十二月 2023 15:30:20 +0800
Subject: [PATCH] 新项目
---
src/views/bigScreen/components/screen.vue | 358 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 327 insertions(+), 31 deletions(-)
diff --git a/src/views/bigScreen/components/screen.vue b/src/views/bigScreen/components/screen.vue
index d66bf7e..3a011f3 100644
--- a/src/views/bigScreen/components/screen.vue
+++ b/src/views/bigScreen/components/screen.vue
@@ -99,11 +99,30 @@
<!-- <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">
@@ -150,7 +169,8 @@
</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">
@@ -177,7 +197,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">
@@ -239,8 +260,8 @@
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";
// 定义接口来定义对象的类型
@@ -252,6 +273,7 @@
lockReconnect: boolean
maxReconnect: number
reconnectTime: number
+ windTime: number | null
time: string
date: string
weekDay: string
@@ -262,8 +284,12 @@
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
@@ -274,7 +300,15 @@
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
@@ -287,7 +321,7 @@
export default defineComponent({
name: 'bigScreen',
- components: {BaiduMap, BmMapType, BmNavigation, BmPolygon },
+ components: {Map,BaiduMap, BmMapType, BmNavigation, BmPolygon },
props:{
isFull: Boolean
},
@@ -308,6 +342,7 @@
date: '',
weekDay: '',
dayTime: '',
+ windTime: 4,
isFull: props.isFull,
chart2Search: [],
infoParams:{
@@ -317,8 +352,12 @@
gasSearch: null,
tlGasSearch: null,
gasOptions: [],
+ monthAgo: '',
+ today: '',
gasData: [],
+ hasNd: true,
gasTlData: [],
+ hasTl: true,
areaOptions: [],
gasTotal: 0,
tlTotal: 0,
@@ -327,9 +366,18 @@
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 = {
@@ -343,11 +391,13 @@
};
const updatePolygonPath = (e) => {
- state.polygonPath = e.target.getPath()
+ state.polygonPath1 = e.target.getPath()
};
// 页面加载时
onMounted(() => {
+ initTime()
getGasData()
+ getWindData()
getWarningNum()
getWarningInfo()
getWarning()
@@ -376,12 +426,15 @@
})
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')
@@ -406,7 +459,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){
@@ -433,10 +509,63 @@
}
}
+ const getWindData = async ()=>{
+ const res = await bigScreenApi().getWindNum({countTime: state.windTime})
+ if(res.data.code == 100){
+ const windData = JSON.parse(JSON.stringify(res.data.data))
+ if(Array.isArray(windData)){
+ let pointFive = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
+ let twoZone = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
+ let fourZone = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
+ let sixZone = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
+ let eightZone = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
+ let tenZone = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
+ let tenAbove = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
+ for (let i of windData){
+ if(i.windSpeed<0.5){
+ pointFive[getDirection(i.windDirection)] += 1
+ }else if(i.windSpeed>0.5 && i.windSpeed<=2){
+ twoZone[getDirection(i.windDirection)] += 1
+ }else if(i.windSpeed>2 && i.windSpeed<=4){
+ fourZone[getDirection(i.windDirection)] += 1
+ }else if(i.windSpeed>4 && i.windSpeed<=6){
+ sixZone[getDirection(i.windDirection)] += 1
+ }else if(i.windSpeed>6 && i.windSpeed<=8){
+ eightZone[getDirection(i.windDirection)] += 1
+ }else if(i.windSpeed>8 && i.windSpeed<=10){
+ tenZone[getDirection(i.windDirection)] += 1
+ } else if(i.windSpeed>10){
+ console.log(777,i.windDirection,getDirection(i.windDirection))
+ tenAbove[getDirection(i.windDirection)] += 1
+ console.log(tenAbove,'10')
+ }else{
+ console.log('windSpeed为null')
+ }
+ }
+ console.log(pointFive,twoZone,fourZone,sixZone,eightZone,tenZone,tenAbove,666)
+ initgasWind(pointFive,twoZone,fourZone,sixZone,eightZone,tenZone,tenAbove)
+ }
+ }else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ }
+
+ const getDirection=(num:number)=>{
+ if(num<=348.75 ){
+ return Math.floor((num + 11.25) / 22.5)
+ }else{
+ return 0
+ }
+ }
+
const getGasNdData = async ()=>{
- const res = await bigScreenApi().getGasNdData({startTime: '',endTime: '',gasName: state.gasSearch})
+ const res = await bigScreenApi().getGasNdData({startTime: state.today+' 00:00:00',endTime: state.today+' 23:59:59',gasName: state.gasSearch})
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)
@@ -452,6 +581,8 @@
})
state.weatherData = [...weather].reverse().slice(0, 4);
initgasN(dotList.slice(dotList.length - 50),timeList.slice(timeList.length - 50))
+ }else{
+ state.hasNd = false
}
}else {
ElMessage({
@@ -462,9 +593,10 @@
}
const getGasTlData = async ()=>{
- const res = await bigScreenApi().getGasTlData({startTime: '',endTime: '',gasName: state.tlGasSearch,areaId: null})
+ const res = await bigScreenApi().getGasTlData({startTime: state.today+' 00:00:00',endTime: state.today+' 23:59:59',gasName: state.tlGasSearch,areaId: null})
if(res.data.code == 100){
if(res.data.data && res.data.data.length>0){
+ state.hasTl = true
state.tlTotal = res.data.data.length
const gasTime = res.data.data.map(i=>i.time?.slice(11))
const gasTlTime = [...new Set(gasTime)]
@@ -495,6 +627,8 @@
}
})
initgasT(gasTlTime.slice(gasTlTime.length - 20),chartData)
+ }else{
+ state.hasTl = false
}
}else {
ElMessage({
@@ -521,6 +655,8 @@
return i
})
config.data = newData
+ }else{
+ config.data = []
}
}else {
ElMessage({
@@ -531,7 +667,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()
}
@@ -548,7 +684,9 @@
const changeTotal = () =>{
getWarningNum()
}
-
+ const changeWind = () =>{
+ getWindData()
+ }
const getWarning = ()=>{
initWebSocket('/ws/gas/exc/','预警',60)
}
@@ -614,7 +752,6 @@
return;
}
if(type == '预警'){
- console.log('预警')
const socketData = JSON.parse(text)
state.warningGas = JSON.parse(JSON.stringify(socketData))
state.dialogWarning = true
@@ -656,7 +793,11 @@
state.gasData = JSON.parse(text)
let gasNum = ''
let newArr = JSON.parse(JSON.stringify(state.gasData))
- state.gasTotal = newArr.length
+ if(Array.isArray(newArr)){
+ state.gasTotal = newArr.length
+ }else{
+ state.gasTotal = 0
+ }
const weather = newArr.map((item)=>{
return {
time: item.dataReceivingTime?item.dataReceivingTime.slice(11,19):'--',
@@ -687,7 +828,12 @@
if(type == '气体通量'){
state.gasTlData = JSON.parse(text)
let newArr = JSON.parse(JSON.stringify(state.gasTlData))
- state.tlTotal = newArr.length
+ if(Array.isArray(newArr)){
+ state.tlTotal = newArr.length
+ }else{
+ state.tlTotal = 0
+ }
+ console.log(state.gasTotal,'获取结束')
const gasTime = newArr.map(i=>i.dataReceivingTime?.slice(11,19))
const gasTlTime = [...new Set(gasTime)]
let areaData = state.areaOptions.map((item)=>{
@@ -807,8 +953,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: '',
@@ -834,6 +980,118 @@
}
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);
@@ -865,7 +1123,7 @@
},
grid: {
top: '5%',
- bottom: '10%',
+ bottom: '15%',
right: '2%'
},
series: [
@@ -987,6 +1245,7 @@
config,
gasN,
gasT,
+ gasWind,
initMap,
updatePolygonPath,
toNdPage,
@@ -994,6 +1253,7 @@
timeChange,
mouseoverHandler,
changeTotal,
+ changeWind,
clickHandler,
changeGas1,
changeGas2,
@@ -1543,6 +1803,42 @@
//}
.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);
--
Gitblit v1.9.2