From b59a81024420491bf49b2a0c38a9a8427dad75fc Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期五, 05 一月 2024 09:11:54 +0800
Subject: [PATCH] 新项目
---
src/views/bigScreen/components/screen.vue | 291 ++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 204 insertions(+), 87 deletions(-)
diff --git a/src/views/bigScreen/components/screen.vue b/src/views/bigScreen/components/screen.vue
index 1de6388..6361fba 100644
--- a/src/views/bigScreen/components/screen.vue
+++ b/src/views/bigScreen/components/screen.vue
@@ -96,31 +96,31 @@
</div>
</div>
<div class="main-middle">
-<!-- <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.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-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>
- </div>
- <div style="width: 100%;height: 250px" :id="gasWind"></div>
+ <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>-->
@@ -236,7 +236,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>
@@ -272,6 +278,7 @@
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
@@ -281,13 +288,20 @@
lockReconnect: boolean
maxReconnect: number
reconnectTime: number
- windTime: number | null
+ windQuery: {
+ type: null | number
+ countTime: number | null
+ startTime: '',
+ endTime:''
+ }
+ 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
@@ -306,7 +320,6 @@
online: number
warningGas: {},
dialogWarning: boolean
- countTime: null | number
yellowNum: null | number
redNum: null | number
weatherData: Array<any>
@@ -352,9 +365,16 @@
date: '',
weekDay: '',
dayTime: '',
- windTime: 4,
+ windQuery: {
+ type: 1,
+ countTime: 4,
+ startTime: '',
+ endTime: ''
+ },
+ countTime: 1,
isFull: props.isFull,
chart2Search: [],
+ windTimeRange: [],
infoParams:{
startTime: '',
endTime: ''
@@ -393,7 +413,6 @@
online: 3,
warningGas: {},
dialogWarning: false,
- countTime: 1,
weatherData: [],
polygonPath1: [],
polygonPath2: [],
@@ -406,6 +425,7 @@
polygonPath9: []
});
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())
@@ -437,9 +457,7 @@
const scale = document.documentElement.clientWidth / 1920;/* 当前页面宽度缩放比例，可根据自己需要修改 */
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
}
-
setRem();
-
window.onresize = () => {
setRem();/* 改变窗口大小时重新设置 rem */
}
@@ -447,29 +465,26 @@
setInterval(() => {
getDateTime();
}, 1000);
- // initMap()
})
onUnmounted(()=>{
destroyedWs()
})
-
- const initMap=()=>{
- 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')
}
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()
@@ -539,7 +554,16 @@
}
const getWindData = async ()=>{
- const res = await bigScreenApi().getWindNum({countTime: state.windTime})
+ 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){
const windData = JSON.parse(JSON.stringify(res.data.data))
if(Array.isArray(windData)){
@@ -566,12 +590,10 @@
} 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 {
@@ -713,6 +735,22 @@
const changeTotal = () =>{
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()
}
@@ -741,6 +779,7 @@
return ''; // 返回一个默认值或者空字符串
}
}
+
const initWebSocket =async (requireUrl: string,type: string,beat: number)=>{
if (typeof WebSocket === 'undefined') {
alert('您的浏览器不支持socket');
@@ -1015,32 +1054,31 @@
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
+ show: true,
+ lineStyle: {
+ color: '#11feee'
+ }
}
},
radiusAxis: {
-
+ axisLine: {
+ lineStyle: {
+ color: '#11feee'
+ }
+ },
+ nameTextStyle:{
+ fontSize: 10,
+ color: '#fff'
+ },
+ animation: true
},
polar: {
-
+ center: ['50%','40%'],
+ radius: '60%'
},
series: [{
type: 'bar',
@@ -1048,8 +1086,8 @@
coordinateSystem: 'polar',
name: '<0.5m/s',
stack: 'a',
- itemStyle:{
-
+ emphasis: {
+ focus: 'series'
}
}, {
type: 'bar',
@@ -1057,8 +1095,8 @@
coordinateSystem: 'polar',
name: '0.5-2m/s',
stack: 'a',
- itemStyle:{
-
+ emphasis: {
+ focus: 'series'
}
}, {
type: 'bar',
@@ -1066,8 +1104,8 @@
coordinateSystem: 'polar',
name: '2-4m/s',
stack: 'a',
- itemStyle:{
-
+ emphasis: {
+ focus: 'series'
}
}, {
type: 'bar',
@@ -1075,8 +1113,8 @@
coordinateSystem: 'polar',
name: '4-6m/s',
stack: 'a',
- itemStyle:{
-
+ emphasis: {
+ focus: 'series'
}
}, {
type: 'bar',
@@ -1084,8 +1122,8 @@
coordinateSystem: 'polar',
name: '6-8m/s',
stack: 'a',
- itemStyle:{
-
+ emphasis: {
+ focus: 'series'
}
}, {
type: 'bar',
@@ -1093,8 +1131,8 @@
coordinateSystem: 'polar',
name: '8-10m/s',
stack: 'a',
- itemStyle:{
-
+ emphasis: {
+ focus: 'series'
}
}, {
type: 'bar',
@@ -1102,16 +1140,23 @@
coordinateSystem: 'polar',
name: '>10m/s',
stack: 'a',
- itemStyle:{
-
+ emphasis: {
+ focus: 'series'
}
}],
legend: {
show: true,
top:'bottom',
- right:'right',
+ 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'
+ orient:'horizontal',
+ itemWidth: 10,
+ itemHeight: 6,
+ itemGap: 4,
+ textStyle: {
+ color: '#11feee',
+ fontSize: 12
+ }
}
}
@@ -1267,9 +1312,9 @@
context.emit('clickFull')
}
- onUnmounted(()=>{
- map.value && map.value.destroy();
- })
+ // onUnmounted(()=>{
+ // map.value && map.value.destroy();
+ // })
return {
timeForm,
@@ -1277,14 +1322,18 @@
gasN,
gasT,
gasWind,
- initMap,
+ audioRef,
+ confirmWarning,
+ playAudio,
updatePolygonPath,
toNdPage,
toTlPage,
timeChange,
mouseoverHandler,
changeTotal,
+ changeWindQuery,
changeWind,
+ windTimeChange,
clickHandler,
changeGas1,
changeGas2,
@@ -1838,14 +1887,82 @@
.map-filter{
position: absolute;
display: flex;
- align-items: flex-start;
- width: 350px;
+ flex-direction: column;
+ align-items: flex-end;
+ width: 270px;
right: 20px;
top: 20px;
- z-index: 2000;
+ padding: 2px;
+ z-index: 99;
+ border: 1px solid #11FEEE;
+ border-radius: 4px;
+ //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: 60%;
+ width: 100%;
height: 24px;
}
::v-deep(.el-popper){
@@ -1914,4 +2031,4 @@
}
}
}
-</style>
+</style>
\ No newline at end of file
--
Gitblit v1.9.2