|
|
@@ -1,199 +1,172 @@
|
|
|
<template>
|
|
|
- <div style="padding: 0px 35px; display: flex; justify-content: space-between">
|
|
|
- <div style="z-index: 100" @click="openBasicModal">
|
|
|
- <border-panel
|
|
|
- height="492px"
|
|
|
- :header-type="4"
|
|
|
- width="544px"
|
|
|
- style="margin-bottom: 6px"
|
|
|
- title="总体情况"
|
|
|
- >
|
|
|
- <TotalityInfo
|
|
|
- :data="ztqkData"
|
|
|
- v-if="ztqkData && ztqkDwtjData"
|
|
|
- :dwData="ztqkDwtjData"
|
|
|
- />
|
|
|
- </border-panel>
|
|
|
- <border-panel
|
|
|
- height="450px"
|
|
|
- :header-type="4"
|
|
|
- width="544px"
|
|
|
- style="margin-bottom: 6px"
|
|
|
- title="视频监控"
|
|
|
- >
|
|
|
- <IotVideo
|
|
|
- :list="caremaData"
|
|
|
- :byList="caremaList"
|
|
|
- v-if="caremaData && caremaData.length > 0"
|
|
|
- />
|
|
|
- </border-panel>
|
|
|
- </div>
|
|
|
- <div class="map-container cover">
|
|
|
- <MapCharts :qx="qx" @selectArea="(area) => (qx = area)" />
|
|
|
- <div style="position: absolute; width: 500px; left: 90px; top: 10px">
|
|
|
- <SearchBox :area.sync="qx" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="z-index: 100">
|
|
|
- <border-panel
|
|
|
- height="469px"
|
|
|
- width="540px"
|
|
|
- :header-type="4"
|
|
|
- style="margin-bottom: 10px"
|
|
|
- title="区域分布"
|
|
|
- @click="openBasicModal1"
|
|
|
- >
|
|
|
- <RegionalDistribution :qx="qx" />
|
|
|
- </border-panel>
|
|
|
- <border-panel
|
|
|
- height="469px"
|
|
|
- width="540px"
|
|
|
- :header-type="4"
|
|
|
- style="margin-bottom: 6px"
|
|
|
- title="告警处置"
|
|
|
- >
|
|
|
- <AlarmHandling :qx="qx" />
|
|
|
- </border-panel>
|
|
|
- </div>
|
|
|
- <basic-modal top="120px" ref="basicInfoModal" name="总体情况">
|
|
|
- <xfwlw :qx="qx" />
|
|
|
- </basic-modal>
|
|
|
- <basic-modal top="120px" ref="basicInfoModal1" name="智慧消防">
|
|
|
- <fxfbCont :qx="qx" />
|
|
|
- </basic-modal>
|
|
|
- </div>
|
|
|
+ <div style="padding: 0px 35px; display: flex; justify-content: space-between">
|
|
|
+ <div style="z-index: 100" @click="openBasicModal">
|
|
|
+ <border-panel height="492px" :header-type="4" width="544px" style="margin-bottom: 6px" title="总体情况">
|
|
|
+ <TotalityInfo :data="ztqkData" v-if="ztqkData && ztqkDwtjData" :dwData="ztqkDwtjData" />
|
|
|
+ </border-panel>
|
|
|
+ <border-panel height="450px" :header-type="4" width="544px" style="margin-bottom: 6px" title="视频监控">
|
|
|
+ <IotVideo :list="caremaData" :byList="caremaList" v-if="caremaData && caremaData.length > 0" />
|
|
|
+ </border-panel>
|
|
|
+ </div>
|
|
|
+ <div class="map-container cover">
|
|
|
+ <MapCharts :qx="qx" @selectArea="(area) => (qx = area)" />
|
|
|
+ <div style="position: absolute; width: 500px; left: 90px; top: 10px">
|
|
|
+ <SearchBox :area.sync="qx" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="z-index: 100">
|
|
|
+ <border-panel height="469px" width="540px" :header-type="4" style="margin-bottom: 10px" title="区域分布"
|
|
|
+ @click="openBasicModal1">
|
|
|
+ <RegionalDistribution :qx="qx" />
|
|
|
+ </border-panel>
|
|
|
+ <border-panel height="469px" width="540px" :header-type="4" style="margin-bottom: 6px" title="告警处置">
|
|
|
+ <AlarmHandling :qx="qx" />
|
|
|
+ </border-panel>
|
|
|
+ </div>
|
|
|
+ <basic-modal top="120px" ref="basicInfoModal" name="总体情况">
|
|
|
+ <xfwlw :qx="qx" />
|
|
|
+ </basic-modal>
|
|
|
+ <basic-modal top="120px" ref="basicInfoModal1" name="智慧消防">
|
|
|
+ <fxfbCont :qx="qx" />
|
|
|
+ </basic-modal>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import TotalityInfo from "./components/TotalityInfo.vue";
|
|
|
-import IotVideo from "./components/IotVideo.vue";
|
|
|
-import AlarmHandling from "./components/AlarmHandling.vue";
|
|
|
-import RegionalDistribution from "./components/RegionalDistribution.vue";
|
|
|
-import MapCharts from "../Home/components/MapCharts.vue";
|
|
|
-import SearchBox from "../../components/SearchBox.vue";
|
|
|
-import xfwlw from "./components/xfwlw.vue";
|
|
|
-import fxfbCont from "./components/fxfbCont.vue";
|
|
|
-import { getZtqk, getZtqkDwtj, getGqcz, getDeviceList } from "@/api/iot.js";
|
|
|
+ import TotalityInfo from "./components/TotalityInfo.vue";
|
|
|
+ import IotVideo from "./components/IotVideo.vue";
|
|
|
+ import AlarmHandling from "./components/AlarmHandling.vue";
|
|
|
+ import RegionalDistribution from "./components/RegionalDistribution.vue";
|
|
|
+ import MapCharts from "../Home/components/MapCharts.vue";
|
|
|
+ import SearchBox from "../../components/SearchBox.vue";
|
|
|
+ import xfwlw from "./components/xfwlw.vue";
|
|
|
+ import fxfbCont from "./components/fxfbCont.vue";
|
|
|
+ import {
|
|
|
+ getZtqk,
|
|
|
+ getZtqkDwtj,
|
|
|
+ getGqcz,
|
|
|
+ getDeviceList
|
|
|
+ } from "@/api/iot.js";
|
|
|
|
|
|
-export default {
|
|
|
- name: "IotPage",
|
|
|
- components: {
|
|
|
- TotalityInfo,
|
|
|
- RegionalDistribution,
|
|
|
- IotVideo,
|
|
|
- AlarmHandling,
|
|
|
- MapCharts,
|
|
|
- SearchBox,
|
|
|
- xfwlw,
|
|
|
- fxfbCont,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- qx: "重庆市",
|
|
|
- ztqkData: null,
|
|
|
- ztqkDwtjData: null,
|
|
|
- caremaData: [],
|
|
|
- caremaList: [],
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- openBasicModal() {
|
|
|
- this.showModal("basicInfoModal");
|
|
|
- },
|
|
|
- openBasicModal1() {
|
|
|
- this.showModal("basicInfoModal1");
|
|
|
- },
|
|
|
- getRandomNo() {},
|
|
|
- async getList() {
|
|
|
- // 获取总体情况
|
|
|
- const ztqkParam = {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 100,
|
|
|
- name: this.qx === "重庆市" ? "" : this.qx,
|
|
|
- };
|
|
|
- getZtqk(ztqkParam).then((res) => {
|
|
|
- this.ztqkData = res.data.rows[0];
|
|
|
- });
|
|
|
+ export default {
|
|
|
+ name: "IotPage",
|
|
|
+ components: {
|
|
|
+ TotalityInfo,
|
|
|
+ RegionalDistribution,
|
|
|
+ IotVideo,
|
|
|
+ AlarmHandling,
|
|
|
+ MapCharts,
|
|
|
+ SearchBox,
|
|
|
+ xfwlw,
|
|
|
+ fxfbCont,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ qx: "重庆市",
|
|
|
+ ztqkData: null,
|
|
|
+ ztqkDwtjData: null,
|
|
|
+ caremaData: [],
|
|
|
+ caremaList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openBasicModal() {
|
|
|
+ this.showModal("basicInfoModal");
|
|
|
+ },
|
|
|
+ openBasicModal1() {
|
|
|
+ this.showModal("basicInfoModal1");
|
|
|
+ },
|
|
|
+ getRandomNo() {},
|
|
|
+ async getList() {
|
|
|
+ // 获取总体情况
|
|
|
+ const ztqkParam = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 100,
|
|
|
+ name: this.qx === "重庆市" ? "" : this.qx,
|
|
|
+ };
|
|
|
+ getZtqk(ztqkParam).then((res) => {
|
|
|
+ this.ztqkData = res.data.rows[0];
|
|
|
+ });
|
|
|
|
|
|
- // 检测点位统计
|
|
|
- const ztqkDwtjParam = {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 100,
|
|
|
- name: this.qx === "重庆市" ? "" : this.qx,
|
|
|
- };
|
|
|
- getZtqkDwtj(ztqkDwtjParam).then((res) => {
|
|
|
- this.ztqkDwtjData = res.data.rows[0];
|
|
|
- });
|
|
|
+ // 检测点位统计
|
|
|
+ const ztqkDwtjParam = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 100,
|
|
|
+ name: this.qx === "重庆市" ? "" : this.qx,
|
|
|
+ };
|
|
|
+ getZtqkDwtj(ztqkDwtjParam).then((res) => {
|
|
|
+ this.ztqkDwtjData = res.data.rows[0];
|
|
|
+ });
|
|
|
|
|
|
- let caremaData = [];
|
|
|
- // 获取视频数据
|
|
|
- const deviceParam = {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 100,
|
|
|
- qx: this.qx === "重庆市" ? "" : this.qx,
|
|
|
- zt: "在线",
|
|
|
- sblx: "生命通道监测",
|
|
|
- };
|
|
|
- const res = await getDeviceList(deviceParam);
|
|
|
- caremaData = caremaData.concat(res.data.rows);
|
|
|
+ let caremaData = [];
|
|
|
+ // 获取视频数据
|
|
|
+ const deviceParam = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 100,
|
|
|
+ qx: this.qx === "重庆市" ? "" : this.qx,
|
|
|
+ zt: "在线",
|
|
|
+ sblx: "生命通道监测",
|
|
|
+ };
|
|
|
+ const res = await getDeviceList(deviceParam);
|
|
|
+ caremaData = caremaData.concat(res.data.rows);
|
|
|
|
|
|
- const deviceParam2 = {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 100,
|
|
|
- qx: this.qx === "重庆市" ? "" : this.qx,
|
|
|
- zt: "在线",
|
|
|
- sblx: "消防控制室监控",
|
|
|
- };
|
|
|
- const res2 = await getDeviceList(deviceParam2);
|
|
|
- caremaData = caremaData.concat(res2.data.rows);
|
|
|
+ const deviceParam2 = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 100,
|
|
|
+ qx: this.qx === "重庆市" ? "" : this.qx,
|
|
|
+ zt: "在线",
|
|
|
+ sblx: "消防控制室监控",
|
|
|
+ };
|
|
|
+ const res2 = await getDeviceList(deviceParam2);
|
|
|
+ caremaData = caremaData.concat(res2.data.rows);
|
|
|
|
|
|
- let randoms = [];
|
|
|
- //随机产生mix-max之间的一个数（避免首末概率不均，采用max+1，向下取整）
|
|
|
- function randomInteger(min, max) {
|
|
|
- let rand = min + Math.random() * (max + 1 - min);
|
|
|
- return Math.floor(rand);
|
|
|
- }
|
|
|
- while (true) {
|
|
|
- //定义一个变量保存是否存在
|
|
|
- var isExists = false;
|
|
|
- // 获取一个1–100之间的数
|
|
|
- var random = randomInteger(0, caremaData.length);
|
|
|
- // 判断当前随机数是否已经存在
|
|
|
- //通过randoms.length来确定要判断几次
|
|
|
- for (let i = 0; i < randoms.length; i++) {
|
|
|
- if (random === randoms[i]) {
|
|
|
- isExists = true;
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- // 如果不存在，则添加进去
|
|
|
- if (!isExists) randoms.push(random);
|
|
|
- // 如果有10位随机数了，就跳出
|
|
|
- if (randoms.length === 10) break;
|
|
|
- }
|
|
|
- console.log(randoms);
|
|
|
+ let randoms = [];
|
|
|
+ //随机产生mix-max之间的一个数（避免首末概率不均，采用max+1，向下取整）
|
|
|
+ function randomInteger(min, max) {
|
|
|
+ let rand = min + Math.random() * (max + 1 - min);
|
|
|
+ return Math.floor(rand);
|
|
|
+ }
|
|
|
+ while (true) {
|
|
|
+ //定义一个变量保存是否存在
|
|
|
+ var isExists = false;
|
|
|
+ // 获取一个1–100之间的数
|
|
|
+ var random = randomInteger(0, caremaData.length);
|
|
|
+ // 判断当前随机数是否已经存在
|
|
|
+ //通过randoms.length来确定要判断几次
|
|
|
+ for (let i = 0; i < randoms.length; i++) {
|
|
|
+ if (random === randoms[i]) {
|
|
|
+ isExists = true;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 如果不存在，则添加进去
|
|
|
+ if (!isExists) randoms.push(random);
|
|
|
+ // 如果有10位随机数了，就跳出
|
|
|
+ if (randoms.length === 10) break;
|
|
|
+ }
|
|
|
+ console.log(randoms);
|
|
|
|
|
|
- // 随机取10个
|
|
|
- const showCaremarData = caremaData.filter((p, i) => randoms.indexOf(i) >= 0);
|
|
|
- this.caremaData = showCaremarData;
|
|
|
- this.caremaList = caremaData;
|
|
|
- console.log(this.caremaData);
|
|
|
- },
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.getList();
|
|
|
- },
|
|
|
-};
|
|
|
+ // 随机取10个
|
|
|
+ const showCaremarData = caremaData.filter((p, i) => randoms.indexOf(i) >= 0);
|
|
|
+ this.caremaData = showCaremarData;
|
|
|
+ this.caremaList = caremaData;
|
|
|
+ console.log(this.caremaData);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
-.map-container {
|
|
|
- position: fixed;
|
|
|
- z-index: 50;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- display: flex;
|
|
|
- padding-top: 150px;
|
|
|
- align-items: center;
|
|
|
- width: 920px;
|
|
|
-}
|
|
|
-</style>
|
|
|
+ .map-container {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 50;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ display: flex;
|
|
|
+ padding-top: 150px;
|
|
|
+ align-items: center;
|
|
|
+ width: 920px;
|
|
|
+ }
|
|
|
+</style>
|
