'保安项目提交'

src/views/dataBI/components/mapResource.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="top-statistics">
+    <div class="test-item" :class="item.active ? 'test-item-active' : ''" v-for="(item, index) in info"
+      @click="handlePoint(item)" :key="`${index}info`">
+      <img :src="!item.active ? item.url : item.urlActive" />
+      <div>{{ item.title }} </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ElMessage } from "element-plus";
+import { qcckGet,qcckPost } from "@/api/qcckApi.js";
+import emitter from "@/utils/eventBus.js";
+import { reactive } from "vue";
+import { fa } from "element-plus/es/locale.mjs";
+const info = reactive([
+  {
+    title: "值守点位",
+    active: false,
+    url: require("@/assets/images/bi/zsdw.png"),
+    urlActive: require("@/assets/images/bi/zsdw-active.png"),
+  },
+  {
+    title: "巡逻路线",
+    active: false,
+    url: require("@/assets/images/bi/lx.png"),
+    urlActive: require("@/assets/images/bi/lx-active.png"),
+  },
+  {
+    title: "巡逻点位",
+    active: false,
+    url: require("@/assets/images/bi/bxd.png"),
+    urlActive: require("@/assets/images/bi/bxd-active.png"),
+  },
+  {
+    title: "感知源",
+    active: false,
+    url: require("@/assets/images/bi/gzy.png"),
+    urlActive: require("@/assets/images/bi/gzy-active.png"),
+  },
+  {
+    title: "清除",
+    url: require("@/assets/images/bi/qc-active.png"),
+    urlActive: require("@/assets/images/bi/qc-active.png"),
+  }
+]);
+
+const handlePoint = (val) => {
+  val.active = !val.active;
+  switch (val.title) {
+    case '值守点位':
+      if (val.active) getPoint_ZSDW();
+      else clearnPoint(['map_zsdw'])
+      break;
+    case '巡逻路线':
+      if (val.active) getPoint_XLX();
+      else clearnPoint(['map_line', 'map_line_dw'])
+      break;
+    case '巡逻点位':
+      if (val.active) getPoint_BXD();
+      else clearnPoint(['map_bxd'])
+      break;
+    case '感知源':
+      if (val.active) getPoint_GZY()
+      else clearnPoint(['map_gzy'])
+      break;
+    case '清除':
+      emitter.emit("removeElementAll");
+      info.forEach(item => { item.active = false })
+      break;
+  }
+}
+
+// 值守点位
+const getPoint_ZSDW = () => {
+  qcckGet({}, '/mosty-jbld/jbldzsd/selectList').then(res => {
+    console.log(res);
+    if (!res) return ElMessage({ message: "暂无值守点位数据", type: "warning" });
+    let arr = res ? res : [];
+    let icon = require("@/assets/point/zsd1.png");
+    let obj = { coords: arr, flag: "map_zsdw", icon };
+    emitter.emit("addPointArea", obj);
+  })
+}
+
+// 巡逻路线
+const getPoint_XLX = () => {
+  qcckGet({}, '/mosty-jbld/jbldBxx/selecList').then(res => {
+    if (!res) return ElMessage({ message: "暂无值巡逻路线数据", type: "warning" });
+    let arr = res ? res : [];
+    let points = []
+    let coords = arr.map((v) => {
+      points = points.concat(v.bxds)
+      return { coords: [v.zb], text: v.zrqMc };
+    });
+    let icon = require("@/assets/point/zsdw.png");
+    let obj = { coords: points, flag: "map_line_dw", icon };
+    emitter.emit("addPointArea", obj);// 撒点
+    emitter.emit("echoLine", { coords, width: 3, flag: "map_line", type: "solid", color: '#ff0000' });// 画线
+  })
+}
+
+// 感知源
+const getPoint_GZY = () => {
+  qcckPost({}, '/mosty-jmxf/tbYsSxt/getList').then(res => {
+    if (!res) return ElMessage({ message: "暂无感知源数据", type: "warning" });
+    let arr = res ? res : [];
+    let icon = require("@/assets/point/sp.png");
+    let obj = { coords: arr, flag: "map_gzy", icon };
+    emitter.emit("addPoint", obj);
+  })
+}
+
+// 比巡点
+const getPoint_BXD = () => {
+  qcckGet({}, '/mosty-jbld/jbldBxx/selecBxdList').then(res => {
+    if (!res) return ElMessage({ message: "暂无值巡逻点位数据", type: "warning" });
+    let arr = res ? res : [];
+    let icon = require("@/assets/point/zsd1.png");
+    let obj = { coords: arr, flag: "map_bxd", icon };
+    emitter.emit("addPointArea", obj);
+  })
+}
+
+// 清处点位
+const clearnPoint = (falgArr) => {
+  falgArr.forEach((flag) => {
+    emitter.emit("deletePointArea", flag);
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top-statistics {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0px;
+  width: 53%;
+  z-index: 3;
+  padding: 10px 50px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+
+  .test-item {
+    cursor: pointer;
+    width: 160px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #0072ff;
+  }
+
+  .test-item-active {
+    color: orange;
+  }
+}
+</style>