|
|
@@ -1,25 +1,58 @@
|
|
|
<template>
|
|
|
<device :img-url="imageUrl" :devices="[]">
|
|
|
<div class="situation-box">
|
|
|
-
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <el-button type="primary" @click="waterControl">一键控制</el-button>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24" style="text-align: center">{{ '客流态势' }}</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">{{ '态势级别' }}</el-col>
|
|
|
+ <el-col :span="18">
|
|
|
+ <div :class="{[waterLevel]:true,'level-box':true}" v-if="clientLevel=='low'">低级别:影响较小</div>
|
|
|
+ <div :class="{[waterLevel]:true,'level-box':true}" v-else-if="clientLevel=='medium'">中级别:影响适中</div>
|
|
|
+ <div :class="{[waterLevel]:true,'level-box':true}" v-else-if="clientLevel=='high'">高级别:影响较大</div>
|
|
|
+ <div :class="{[waterLevel]:true,'level-box':true}" v-else-if="clientLevel=='critical'">紧急级别:影响非常严重</div>
|
|
|
+ <div :class="{[waterLevel]:true,'level-box':true}" v-else></div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">{{ '客流速度' }}</el-col>
|
|
|
+ <el-col :span="18">
|
|
|
+ <el-slider v-model="clientSpeed" @change="clientControl"/>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24" style="text-align: center">{{ '水灾态势' }}</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">{{ '态势级别' }}</el-col>
|
|
|
+ <el-col :span="18">
|
|
|
+ <div :class="{[waterLevel]:true,'level-box':true}" v-if="waterLevel=='low'">低级别:影响较小</div>
|
|
|
+ <div :class="{[waterLevel]:true,'level-box':true}" v-else-if="waterLevel=='medium'">中级别:影响适中</div>
|
|
|
+ <div :class="{[waterLevel]:true,'level-box':true}" v-else-if="waterLevel=='high'">高级别:影响较大</div>
|
|
|
+ <div :class="{[waterLevel]:true,'level-box':true}" v-else-if="waterLevel=='critical'">紧急级别:影响非常严重</div>
|
|
|
+ <div :class="{[waterLevel]:true,'level-box':true}" v-else></div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">{{ '水灾控制' }}</el-col>
|
|
|
+ <el-col :span="18">
|
|
|
+ <el-slider v-model="waterSpeed" :format-tooltip="(val:number)=>val / 100" @change="waterControl"/>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
- <template v-for="item in dataList">
|
|
|
- <el-popover placement="top-start" :title="item.name" :width="80" trigger="hover" :visible=true>
|
|
|
+ <template v-for="item in deviceData">
|
|
|
+ <el-popover placement="top-start" :title="item.postion" :width="80" :visible=true>
|
|
|
<template #reference>
|
|
|
- <div class="point-box" :style="{ top: item.top, left: item.left }">{{ item.name }}</div>
|
|
|
+ <div class="point-box" :style="{ top: item.top, left: item.left }">{{ item.postion }}</div>
|
|
|
</template>
|
|
|
<div>
|
|
|
- <el-slider v-model="value4" :format-tooltip="formatTooltip" />
|
|
|
- <div>
|
|
|
+ <div v-if="item.command == 20501">
|
|
|
<span style="text-align: right;display: inline-block;min-width: 30px;margin-right: 6px;">{{ '大客流: ' }}</span>
|
|
|
- <span>{{ item.people }}</span><span>{{ '人/m2' }}</span>
|
|
|
+ <span>{{ item.value }}</span><span>{{ '人/m2' }}</span>
|
|
|
</div>
|
|
|
- <div>
|
|
|
+ <div v-if="item.command == 20601">
|
|
|
<span style="text-align: right;display: inline-block;min-width: 30px;margin-right: 6px;">{{ '水位: ' }}</span>
|
|
|
- <span>{{ item.water }}</span><span>{{ 'm' }}</span>
|
|
|
+ <span>{{ item.value }}</span><span>{{ 'm' }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-popover>
|
|
|
@@ -28,34 +61,108 @@
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
import imageUrl from '@/assets/images/backage-situation.png'
|
|
|
-import { ElPopover } from 'element-plus';
|
|
|
-import { situationWaterControl } from '@/api/device.ts'
|
|
|
-
|
|
|
-const dataList = [
|
|
|
- { name: '站厅', top: '18vh', left: '110vh', people: 10, water: 0.21 },
|
|
|
- { name: '站台', top: '62vh', left: '110vh', people: 12, water: 1.01 }
|
|
|
-];
|
|
|
-const value4 = ref(0);
|
|
|
-const formatTooltip = (val: number) => {
|
|
|
- return val / 100
|
|
|
-}
|
|
|
+import {ElPopover} from 'element-plus';
|
|
|
+import {situationClientControl, situationDevice, situationWaterControl} from '@/api/device.ts'
|
|
|
|
|
|
-const waterControl = function () {
|
|
|
- situationWaterControl(true, 0.5).then(res => {
|
|
|
- console.log(res);
|
|
|
+// 客流进站速度
|
|
|
+const clientSpeed = ref(0);
|
|
|
+const clientLevel = ref<'low' | 'medium' | 'high' | 'critical'>('low');
|
|
|
+// 水流速度
|
|
|
+const waterSpeed = ref(0);
|
|
|
+const waterLevel = ref<'low' | 'medium' | 'high' | 'critical'>('low');
|
|
|
+
|
|
|
+// 态势数据
|
|
|
+const deviceData = ref<{ command: number, postion: string, value: number, top: string, left: string }[]>([]);
|
|
|
+// 定时器
|
|
|
+let intervalId: number | undefined = undefined;
|
|
|
+onMounted(function () {
|
|
|
+ intervalId = setInterval(getDevice, 1000);
|
|
|
+})
|
|
|
+onBeforeUnmount(() => {
|
|
|
+ if (intervalId) {
|
|
|
+ clearInterval(intervalId);
|
|
|
+ }
|
|
|
+});
|
|
|
+const getDevice = function () {
|
|
|
+ situationDevice().then(({data}) => {
|
|
|
+ let resultArray = [];
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ const device: any = data[i];
|
|
|
+ // console.log("---", device.message);
|
|
|
+ resultArray = [...resultArray, ...((JSON.parse(device.message) || []).map((item) => {
|
|
|
+ console.log("item: ", item);
|
|
|
+ switch (item.postion.trim()) {
|
|
|
+ case "站厅":
|
|
|
+ return {...item, command: device.command, postion: '站厅', top: '18vh', left: '110vh'}
|
|
|
+ case "站台":
|
|
|
+ return {...item, command: device.command, postion: '站台', top: '62vh', left: '110vh'}
|
|
|
+ case "站厅A端":
|
|
|
+ return {...item, command: device.command, postion: '站厅A端', top: '18vh', left: '10vh'}
|
|
|
+ default:
|
|
|
+ return undefined;
|
|
|
+ }
|
|
|
+ })).filter((item) => item)]
|
|
|
+ }
|
|
|
+ console.log(JSON.stringify(resultArray));
|
|
|
+ deviceData.value = resultArray;
|
|
|
+ });
|
|
|
+};
|
|
|
+const clientControl = (value: number) => {
|
|
|
+ situationClientControl(value).then(() => {
|
|
|
+ ElNotification({title: '系统通知', message: '客流控制成功', type: 'success'})
|
|
|
+ });
|
|
|
+}
|
|
|
+const waterControl = function (value: number) {
|
|
|
+ situationWaterControl(value != 0, value / 100).then(() => {
|
|
|
+ ElNotification({title: '系统通知', message: value != 0 ? '水灾控制成功' : '关闭水灾成功', type: 'success'})
|
|
|
});
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
+<style lang="scss" scoped>
|
|
|
.point-box {
|
|
|
- width: 6vh;
|
|
|
+ min-width: 6vh;
|
|
|
height: 3vh;
|
|
|
text-align: center;
|
|
|
+ padding: 2px 3px;
|
|
|
background-color: blue;
|
|
|
border-radius: 1vh;
|
|
|
color: white;
|
|
|
position: absolute;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
+.situation-box {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 12vh;
|
|
|
+ height: 22vh;
|
|
|
+ width: 60vh;
|
|
|
+ border: 1px solid #031a67;
|
|
|
+ border-radius: 2vh;
|
|
|
+ padding: 3vh;
|
|
|
+}
|
|
|
+
|
|
|
+.level-box {
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 1vh;
|
|
|
+ color: #ffffff;
|
|
|
+
|
|
|
+ &.low {
|
|
|
+ background-color: #3498db;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.medium {
|
|
|
+ background-color: #f39c12;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.high {
|
|
|
+ background-color: #e74c3c;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.critical {
|
|
|
+ background-color: #c0392b;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
</style>
|