人员聚集告警地图显示

src/components/map_tools/alarm_view.vue

@@ -0,0 +1,84 @@
+<template>
+  <div id="bi_container">
+    <div id="map" class="map_bg"></div>
+  </div>
+</template>
+
+<script setup>
+import { onBeforeUnmount, onMounted } from "vue";
+import { initMap, handleViewAlarm, handleMouseClick } from "./map";
+import { useUserStore } from "@/pinia/user.js";
+import { getEnterpriseInfo } from "@/request/enterprise_management.js";
+
+const props = defineProps({
+  alarm: {
+    type: Object,
+    required: true,
+    default: null,
+  },
+  userList: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+});
+const userStore = useUserStore();
+const CORPINFO_ID = userStore.getUserInfo.CORPINFO_ID;
+
+onMounted(async () => {
+  const corp = await getEnterpriseInfo({ CORPINFO_ID });
+  initMap(corp.pd);
+  handleMouseClick();
+  handleViewAlarm(props.alarm, props.userList);
+});
+onBeforeUnmount(() => {
+  window.$scene = null;
+  window.$icy = null;
+  window.$carmer = null;
+});
+</script>
+
+<style scoped lang="scss">
+#bi_container {
+  width: 100%;
+  height: 600px;
+  color: #ffffff;
+  position: relative;
+  font-size: 14px;
+
+  .map_bg {
+    width: 100%;
+    height: 540px;
+  }
+
+  .options {
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    padding: 10px;
+
+    .option {
+      margin-right: 20px;
+      cursor: pointer;
+      text-align: center;
+
+      img {
+        width: 46px;
+        height: 46px;
+      }
+
+      .label {
+        margin-top: 10px;
+        font-size: 12px;
+      }
+    }
+
+    .id {
+      background-color: #1b284a;
+      padding: 10px;
+      border-radius: 4px;
+      height: 37px;
+    }
+  }
+}
+</style>

src/components/map_tools/map.js

@@ -138,7 +138,7 @@ export const handleMouseClick = (model_id) => {
   // 隐藏逻辑
   $mouse.mouseLeft((model) => {
     if (model._name === "建筑") {
-      model_id.value = model._id;
+      if (model_id) model_id.value = model._id;
       clickBuilding(model);
     }
   });
@@ -333,3 +333,68 @@ const addEntity = (id, name, lon, lat, height) => {
   };
   entities.add(obj);
 };
+
+export const handleViewAlarm = (alarm, userList) => {
+  const canvas = document.createElement("canvas");
+  canvas.width = 100;
+  canvas.height = 30;
+  const ctx = canvas.getContext("2d");
+  ctx.fillStyle = "#000000";
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = "#ff0000";
+  ctx.font = "normal bold 20px Arial";
+  ctx.fillText("聚集告警", 5, 15);
+
+  // 聚集圆锥特效
+  const Cone = new window.CustomCesium.Cone(window.$icy);
+  Cone.add(
+    [alarm.lon, alarm.lat, alarm.alt], // 坐标
+    alarm.color, // 圆锥颜色
+    { width: 20, height: 40 }, // 圆锥的宽高
+    canvas, // 圆锥铭牌
+    "100201", // 圆锥实体id
+    "10020101" // 铭牌实体id
+  );
+  const labelPixelOffset = new window.Cesium.Cartesian2(0, -55);
+  userList.forEach((user) => {
+    const obj = {};
+    obj.entity = window.$icy.viewer.entities.add(
+      new window.Cesium.Entity({
+        id: "user_" + user.card,
+        name: user.psnName,
+        position: window.Cesium.Cartesian3.fromDegrees(
+          user.lon,
+          user.lat,
+          user.alt
+        ),
+        billboard: {
+          image: "src/assets/images/map/peoIcon_blueImg.png",
+          height: 36,
+          width: 30,
+          verticalOrigin: window.Cesium.VerticalOrigin.BOTTOM,
+          horizontalOrigin: window.Cesium.HorizontalOrigin.CENTER,
+          disableDepthTestDistance: Number.POSITIVE_INFINITY,
+        },
+        label: {
+          text: user.psnName,
+          font: "13px sans-serif",
+          pixelOffset: labelPixelOffset,
+          showBackground: true,
+          // 地图上扎点的名字背景色
+          // eslint-disable-next-line new-cap
+          backgroundColor: new window.Cesium.Color.fromCssColorString(
+            "rgba(20, 58, 142, 1)"
+          ),
+          backgroundPadding: new window.Cesium.Cartesian2(7, 5),
+          disableDepthTestDistance: Number.POSITIVE_INFINITY,
+        },
+      })
+    );
+    obj.show = (e) => {
+      obj.entity.show = e;
+    };
+    obj.destroy = () => {
+      window.$icy.viewer.entities.remove(obj.entity);
+    };
+  });
+};

src/request/aggregation_management.js

@@ -10,3 +10,5 @@ export const getAggregatedDataStatistics = (params) =>
   post("/positAlarm/aggregateDataStatistics", params); // 聚集区域统计
 export const getAggregationAreaStatistics = (params) =>
   post("/positAlarm/aggregateDataStatisticsByGroup", params); // 聚集数据统计
+export const getAlarmGatherPsnInfo = (params) =>
+    post("/positAlarm/getAlarmGatherPsnInfo", params); // 聚集告警内人员列表

src/views/aggregation_management/gathering_alarm_records/components/alarmDialog.vue

@@ -0,0 +1,42 @@
+<template>
+  <el-dialog v-model="visible" title="告警信息" :on-close="fnClose">
+    <alarmView
+      v-if="visible"
+      :alarm="props.alarm"
+      :user-list="props.userList"
+    />
+    <template #footer>
+      <el-button @click="fnClose">关闭</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { useVModels } from "@vueuse/core";
+import alarmView from "@/components/map_tools/alarm_view";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  alarm: {
+    type: Object,
+    required: true,
+    default: null,
+  },
+  userList: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+});
+const emits = defineEmits(["update:visible", "get-data"]);
+const { visible } = useVModels(props, emits);
+const fnClose = () => {
+  visible.value = false;
+};
+</script>
+
+<style scoped lang="scss"></style>

src/views/aggregation_management/gathering_alarm_records/components/viewInfo.vue

@@ -61,6 +61,13 @@
       <el-button type="primary" @click="fnSubmit">保存</el-button>
     </template>
   </el-dialog>
+
+  <alarm_dialog
+    v-model:visible="data.alarmDialogDialog.visible"
+    :alarm="data.alarmDialogDialog.alarm"
+    :user-list="data.alarmDialogDialog.userList"
+    @get-data="fnResetPagination"
+  />
 </template>
 
 <script setup>
@@ -69,7 +76,12 @@ import { debounce } from "throttle-debounce";
 import { ElMessage } from "element-plus";
 import { serialNumber } from "@/assets/js/utils.js";
 import useListData from "@/assets/js/useListData.js";
-import { getGatheringAlarmRecordViewList } from "@/request/aggregation_management.js";
+import {
+  getAlarmGatherPsnInfo,
+  getGatheringAlarmRecordViewList,
+} from "@/request/aggregation_management.js";
+import alarm_dialog from "./alarmDialog.vue";
+import { reactive } from "vue";
 
 const props = defineProps({
   visible: {
@@ -83,6 +95,14 @@ const props = defineProps({
     default: () => ({}),
   },
 });
+
+const data = reactive({
+  alarmDialogDialog: {
+    alarm: null,
+    userList: null,
+    visible: false,
+  },
+});
 const emits = defineEmits(["update:visible", "update:form", "get-data"]);
 const { visible } = useVModels(props, emits);
 const { list, searchForm, pagination, fnGetData, fnResetPagination } =
@@ -108,9 +128,12 @@ const fnGetDataTransfer = () => {
     gatherId: props.form.id,
   });
 };
-const fnViewLocation = (row) => {
-  console.log(row);
-  // 接口地址 positAlarm/getAlarmGatherPsnInfo
+const fnViewLocation = async (row) => {
+  const res = await getAlarmGatherPsnInfo({ id: row.id });
+
+  data.alarmDialogDialog.alarm = row;
+  data.alarmDialogDialog.userList = res.data;
+  data.alarmDialogDialog.visible = true;
 };
 const fnResetPaginationTransfer = () => {
   fnResetPagination({