|
|
@@ -7,17 +7,18 @@
|
|
|
<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>
|
|
|
+ <div :class="{ [clientLevel]: true, 'level-box': true }" v-if="clientLevel == 'low'">低级别：影响较小</div>
|
|
|
+ <div :class="{ [clientLevel]: true, 'level-box': true }" v-else-if="clientLevel == 'medium'">中级别：影响适中</div>
|
|
|
+ <div :class="{ [clientLevel]: true, 'level-box': true }" v-else-if="clientLevel == 'high'">高级别：影响较大</div>
|
|
|
+ <div :class="{ [clientLevel]: true, 'level-box': true }" v-else-if="clientLevel == 'critical'">紧急级别：影响非常严重
|
|
|
+ </div>
|
|
|
+ <div :class="{ [clientLevel]: 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-slider v-model="clientSpeed" @change="clientControl" />
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row :gutter="20">
|
|
|
@@ -26,121 +27,165 @@
|
|
|
<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>
|
|
|
+ <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-slider v-model="waterSpeed" :format-tooltip="(val: number) => val / 100" @change="waterControl" />
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
- <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.postion }}</div>
|
|
|
- </template>
|
|
|
- <div>
|
|
|
- <div v-if="item.command == 20501">
|
|
|
- <span style="text-align: right;display: inline-block;min-width: 30px;margin-right: 6px;">{{ '大客流: ' }}</span>
|
|
|
- <span>{{ item.value.toFixed(4) }}</span><span>{{ '人/m2' }}</span>
|
|
|
- </div>
|
|
|
- <div v-if="item.command == 20601">
|
|
|
- <span style="text-align: right;display: inline-block;min-width: 30px;margin-right: 6px;">{{ '水位: ' }}</span>
|
|
|
- <span>{{ item.value.toFixed(2) }}</span><span>{{ 'm' }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-popover>
|
|
|
- </template>
|
|
|
+ <div class="point-box" v-for="(item, index) in levelArray" :key="index" :style="item.style">
|
|
|
+ <div>
|
|
|
+ <div class="point-name" :value="item.value">{{ item.postion }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="point-level-box">
|
|
|
+ <div>{{ '位置 :' + item.postion }}</div>
|
|
|
+ <div v-if="item.command == 20501">{{ '客流 :' + item.value.toFixed(2) + '人/m2' }}</div>
|
|
|
+ <div v-if="item.command == 20601">{{ '水位 :' + item.value.toFixed(2) + 'm' }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</device>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
import imageUrl from '@/assets/images/backage-situation.png'
|
|
|
-import {ElPopover} from 'element-plus';
|
|
|
-import {situationClientControl, situationDevice, situationWaterControl} from '@/api/device.ts'
|
|
|
-import {Arrayable} from "@vueuse/core";
|
|
|
+import { situationClientControl, situationDevice, situationWaterControl } from '@/api/device.ts'
|
|
|
+import { Arrayable } from "@vueuse/core";
|
|
|
+import { DeviceItem } from "@/types/device";
|
|
|
+import { useStoreSocket } from "@/store/socket";
|
|
|
+import { StoreSituation } from "@/store/modules/situation";
|
|
|
|
|
|
+const storeSituation = new StoreSituation();
|
|
|
// 客流进站速度
|
|
|
-const clientSpeed = ref(0);
|
|
|
+const clientSpeed = ref(storeSituation.clientSpeed);
|
|
|
const clientLevel = ref<'low' | 'medium' | 'high' | 'critical'>('low');
|
|
|
// 水流速度
|
|
|
-const waterSpeed = ref(0);
|
|
|
+const waterSpeed = ref(storeSituation.waterSpeed);
|
|
|
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) as unknown as number;
|
|
|
+ intervalId = setInterval(loadData, 1000) as unknown as number;
|
|
|
})
|
|
|
onBeforeUnmount(() => {
|
|
|
if (intervalId) {
|
|
|
clearInterval(intervalId);
|
|
|
}
|
|
|
});
|
|
|
-const getDevice = function () {
|
|
|
- situationDevice().then(({data}) => {
|
|
|
- let resultArray: { command: number, postion: string, value: number, top: string, left: string }[] = [];
|
|
|
- for (let i = 0; i < data.length; i++) {
|
|
|
- const device: any = data[i];
|
|
|
- resultArray = [...resultArray, ...((JSON.parse(device.message) || []).map((item: any) => {
|
|
|
- switch (item.postion.trim()) {
|
|
|
- case "站厅":
|
|
|
- return {...item, command: device.command, postion: item.postion.trim(), top: '18vh', left: '110vh'}
|
|
|
- case "站台":
|
|
|
- return {...item, command: device.command, postion: item.postion.trim(), top: '62vh', left: '110vh'}
|
|
|
- case "1出口":
|
|
|
- return {...item, command: device.command, postion: item.postion.trim(), top: '28vh', left: '10vh'}
|
|
|
- case "2出口":
|
|
|
- return {...item, command: device.command, postion: item.postion.trim(), top: '38vh', left: '10vh'}
|
|
|
- case "站厅A端":
|
|
|
- return {...item, command: device.command, postion: item.postion.trim(), top: '8vh', left: '10vh'}
|
|
|
- case "站厅B端":
|
|
|
- return {...item, command: device.command, postion: item.postion.trim(), top: '18vh', left: '10vh'}
|
|
|
- case "站台A端":
|
|
|
- return {...item, command: device.command, postion: item.postion.trim(), top: '18vh', left: '20vh'}
|
|
|
- case "站台B端":
|
|
|
- return {...item, command: device.command, postion: item.postion.trim(), top: '18vh', left: '20vh'}
|
|
|
- default:
|
|
|
- return undefined;
|
|
|
- }
|
|
|
- })).filter((item: any) => item)]
|
|
|
- }
|
|
|
- console.log(JSON.stringify(resultArray));
|
|
|
- deviceData.value = resultArray;
|
|
|
+// 获取原始数据
|
|
|
+const deviceArray = ref<DeviceItem[]>();
|
|
|
+const loadData = async () => {
|
|
|
+ const { data } = await situationDevice();
|
|
|
+ deviceArray.value = data;
|
|
|
+}
|
|
|
+// 水位数据
|
|
|
+interface LevelItem {
|
|
|
+ command: number;
|
|
|
+ postion: string;
|
|
|
+ value: number;
|
|
|
+ style?: string;
|
|
|
+}
|
|
|
+const levelArray: Ref<LevelItem[]> = computed(() => {
|
|
|
+ const list = deviceArray.value;
|
|
|
+ if (!list) {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+ let dataList: any[] = [];
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ const device = list[i];
|
|
|
+ const message: { postion: string, value: number }[] = (JSON.parse(device.message) || []);
|
|
|
+ dataList = dataList.concat(message.map((item) => {
|
|
|
+ return {
|
|
|
+ command: device.command,
|
|
|
+ postion: item.postion,
|
|
|
+ value: item.value,
|
|
|
+ }
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ return [
|
|
|
+ { command: 20501, postion: "站厅", value: 0.0, style: "left: 730px;top: 120px;" },
|
|
|
+ { command: 20501, postion: "站台", value: 0.0, style: "left: 730px;top: 420px;" },
|
|
|
+ { command: 20601, postion: "1出口", value: 0.0, style: "left: 1150px;top: 120px;" },
|
|
|
+ { command: 20601, postion: "2出口", value: 0.0, style: "left: 106px;top: 276px;" },
|
|
|
+ { command: 20601, postion: "站厅A端", value: 0.0, style: "left: 460px;top: 120px;" },
|
|
|
+ { command: 20601, postion: "站厅B端", value: 0.0, style: "left: 1000px;top: 180px;" },
|
|
|
+ { command: 20601, postion: "站台A端", value: 0.0, style: "left: 366px;top: 320px;" },
|
|
|
+ { command: 20601, postion: "站台B端", value: 0.0, style: "left: 1100px;top: 520px;" },
|
|
|
+ ].map((item) => {
|
|
|
+ return { ...item, value: dataList.find(device => device.command == item.command && device.postion == item.postion)?.value || 0.0 };
|
|
|
});
|
|
|
-};
|
|
|
+});
|
|
|
+
|
|
|
const clientControl = (value: Arrayable<number>): void => {
|
|
|
const actualValue = Array.isArray(value) ? value[0] : value;
|
|
|
+ storeSituation.setClientSpeed(actualValue);
|
|
|
situationClientControl(actualValue).then(() => {
|
|
|
- ElNotification({title: '系统通知', message: '客流控制成功', type: 'success'})
|
|
|
+ ElNotification({ title: '系统通知', message: '客流控制成功', type: 'success' })
|
|
|
});
|
|
|
}
|
|
|
+const socketClient = useStoreSocket();
|
|
|
const waterControl = function (value: Arrayable<number>): void {
|
|
|
- const actualValue = Array.isArray(value) ? value[0] : value; // 获取实际的数值
|
|
|
+ const actualValue = Array.isArray(value) ? value[0] : value;
|
|
|
+ storeSituation.setWaterSpeed(actualValue);
|
|
|
situationWaterControl(actualValue != 0, actualValue / 100).then(() => {
|
|
|
- ElNotification({title: '系统通知', message: actualValue != 0 ? '水灾控制成功' : '关闭水灾成功', type: 'success'})
|
|
|
+ ElNotification({ title: '系统通知', message: actualValue != 0 ? '水灾控制成功' : '关闭水灾成功', type: 'success' })
|
|
|
});
|
|
|
+ if (actualValue == 0) {
|
|
|
+ setTimeout(() => {
|
|
|
+ socketClient.sendMessage(JSON.stringify({
|
|
|
+ "cmd": 20601, "data": { "kvp": [{ "postion": "1出口", "value": 0 }] }
|
|
|
+ }));
|
|
|
+ }, 500);
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.point-box {
|
|
|
- min-width: 6vh;
|
|
|
- height: 3vh;
|
|
|
- text-align: center;
|
|
|
- padding: 2px 3px;
|
|
|
- background-color: blue;
|
|
|
- border-radius: 1vh;
|
|
|
- color: white;
|
|
|
position: absolute;
|
|
|
- cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .point-name {
|
|
|
+ min-width: 6vh;
|
|
|
+ height: 3vh;
|
|
|
+ text-align: center;
|
|
|
+ padding: 2px 3px;
|
|
|
+ background-color: blue;
|
|
|
+ border-radius: 1vh;
|
|
|
+ color: white;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .point-level-box {
|
|
|
+ width: 160px;
|
|
|
+ height: 60px;
|
|
|
+ margin-top: 10px;
|
|
|
+ background-color: #eee;
|
|
|
+ padding: 8px 12px;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
+ border: 1px solid rgb(136, 0, 255);
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border: 12px solid;
|
|
|
+ position: absolute;
|
|
|
+ top: 16px;
|
|
|
+ left: 70px;
|
|
|
+ border-color: transparent transparent #aeb2e3;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.situation-box {
|
|
|
@@ -174,6 +219,4 @@ const waterControl = function (value: Arrayable<number>): void {
|
|
|
background-color: #c0392b;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
-</style>
|
|
|
+</style 0.0, style>
|
zhanghaijun