ba_web/src/views/dataBI/components/mapResource.vue

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