zhgkpt-datav/app/src/views/Iot/index.vue

<template>
  <div style="padding: 0px 35px; display: flex; justify-content: space-between">
    <div style="z-index: 100">
      <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"
          v-if="caremaData && caremaData.length > 0"
        />
      </border-panel>
    </div>
    <div class="map-container cover">
      <MapCharts />
      <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="区域分布"
      >
        <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>
  </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 {
  getZtqk,
  getZtqkDwtj,
  getGqcz,
  getDeviceList,
} from "@/api/iot.js";

export default {
  name: "IotPage",
  components: {
    TotalityInfo,
    RegionalDistribution,
    IotVideo,
    AlarmHandling,
    MapCharts,
    SearchBox
  },
  data() {
    return {
      qx: "重庆市",
      ztqkData: null,
      ztqkDwtjData: null,
      caremaData: [],
    };
  },
  methods: {
    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];
      });

      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);

      // 随机取10个
      const showCaremarData = [];
      for (let i = 0; i < 10; i++) {
        const no = Math.ceil(Math.random() * caremaData.length);
        showCaremarData.push(caremaData.find((p, j) => j === no));
      }

      this.caremaData = showCaremarData;
    },
  },
  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;
}

// .map-container::after {
//   position: absolute;
//   content: "";
//   width: 100%;
//   height: 100%;
//   top: 0;
//   left: 0;
//   box-shadow: 0 0 100px 100px #070b13 inset;
//   pointer-events: none;
// }

</style>