|
|
@@ -1,11 +1,18 @@
|
|
|
<template>
|
|
|
<device :img-url="imageUrl" :devices="[]">
|
|
|
+ <div class="situation-box">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" @click="waterControl">一键控制</el-button>
|
|
|
+ </div>
|
|
|
<template v-for="item in dataList">
|
|
|
- <el-popover placement="top-start" :title="item.name" :width="80" trigger="hover">
|
|
|
+ <el-popover placement="top-start" :title="item.name" :width="80" trigger="hover" :visible=true>
|
|
|
<template #reference>
|
|
|
<div class="point-box" :style="{ top: item.top, left: item.left }">{{ item.name }}</div>
|
|
|
</template>
|
|
|
<div>
|
|
|
+ <el-slider v-model="value4" :format-tooltip="formatTooltip" />
|
|
|
<div>
|
|
|
<span style="text-align: right;display: inline-block;min-width: 30px;margin-right: 6px;">{{ '大客流: ' }}</span>
|
|
|
<span>{{ item.people }}</span><span>{{ '人/m2' }}</span>
|
|
|
@@ -17,115 +24,30 @@
|
|
|
</div>
|
|
|
</el-popover>
|
|
|
</template>
|
|
|
- <div class="echart-box" ref="chartDom"></div>
|
|
|
</device>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
import imageUrl from '@/assets/images/backage-situation.png'
|
|
|
-import * as echarts from "echarts";
|
|
|
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 },
|
|
|
-]
|
|
|
-
|
|
|
-
|
|
|
-let chartDom = ref(null);
|
|
|
-onMounted(() => {
|
|
|
- initChart();
|
|
|
-});
|
|
|
+ { name: '站台', top: '62vh', left: '110vh', people: 12, water: 1.01 }
|
|
|
+];
|
|
|
+const value4 = ref(0);
|
|
|
+const formatTooltip = (val: number) => {
|
|
|
+ return val / 100
|
|
|
+}
|
|
|
|
|
|
-const initChart = () => {
|
|
|
- var option = {
|
|
|
- dataset: {
|
|
|
- source: [
|
|
|
- ['站厅', 10, 0.21],
|
|
|
- ['站台', 12, 1.01],
|
|
|
- ]
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- backgroundColor: "rgba(32, 33, 36,.7)",
|
|
|
- borderColor: "rgba(32, 33, 36,0.20)",
|
|
|
- borderWidth: 6,
|
|
|
- textStyle: { color: "#fff", fontSize: "12", },
|
|
|
- axisPointer: { type: "cross", label: { backgroundColor: "#6a7985" } },
|
|
|
- },
|
|
|
- title: {
|
|
|
- text: '大客流 / 水灾',
|
|
|
- left: 'center',
|
|
|
- top: 6,
|
|
|
- textStyle: { color: '#fff', },
|
|
|
- borderColor: 'rgb(231, 231, 231);',
|
|
|
- borderWidth: 2,
|
|
|
- borderRadius: 5,
|
|
|
- },
|
|
|
- grid: { left: "14%", bottom: "30%" },
|
|
|
- legend: {
|
|
|
- bottom: 36,
|
|
|
- textStyle: { color: '#fff' }
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- axisLabel: { textStyle: { color: "white", fontSize: "10", }, },
|
|
|
- axisTick: { alignWithLabel: true },
|
|
|
- },
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- position: 'left',
|
|
|
- name: '客流量(人/m2)',
|
|
|
- nameTextStyle: { color: "white" },
|
|
|
- axisLabel: { textStyle: { color: "white", }, formatter: '{value}' },
|
|
|
- min: 0,
|
|
|
- max: 100,
|
|
|
- }, {
|
|
|
- position: 'right',
|
|
|
- name: '水位(m)',
|
|
|
- nameTextStyle: { color: "white" },
|
|
|
- axisLabel: { textStyle: { color: "white", }, formatter: '{value} m' },
|
|
|
- min: 0,
|
|
|
- max: 5,
|
|
|
- }
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '客流信息',
|
|
|
- type: 'bar',
|
|
|
- yAxisIndex: 0,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- borderRadius: [3, 3, 0, 0],
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(0,244,255,1)", }, { offset: 1, color: "rgba(0,77,167,1)", },]),
|
|
|
- },
|
|
|
- },
|
|
|
- }, {
|
|
|
- name: '水位信息',
|
|
|
- type: 'bar',
|
|
|
- smooth: true,
|
|
|
- yAxisIndex: 1,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- borderRadius: [3, 3, 0, 0],
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(0,244,255,1)", }, { offset: 1, color: "rgba(0,77,167,1)", },]),
|
|
|
- },
|
|
|
- },
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- option && echarts.init(chartDom.value, null, { width: 360, height: 260 }).setOption(option);
|
|
|
+const waterControl = function () {
|
|
|
+ situationWaterControl(true, 0.5).then(res => {
|
|
|
+ console.log(res);
|
|
|
+ });
|
|
|
};
|
|
|
+
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.echart-box {
|
|
|
- width: 460px;
|
|
|
- height: 380px;
|
|
|
- background-color: #031a67;
|
|
|
- position: absolute;
|
|
|
- bottom: 0px;
|
|
|
- border-radius: 10px;
|
|
|
-}
|
|
|
-
|
|
|
.point-box {
|
|
|
width: 6vh;
|
|
|
height: 3vh;
|