工单图层

src/App.vue

@@ -13,6 +13,7 @@ onMounted(() => {
       designWidth: 1920,
       renderDom: "#app",
       resize: true,
+      ignore:['div[id*="el-popper-container"]',".el-select__popper"]
     },
     false
   ); // 可关闭控制台运行提示输出

src/assets/styles/index.scss

@@ -6,6 +6,7 @@
 @import './btn.scss';
 @import './ruoyi.scss';
 @import './font.css';
+@import './map.scss';
 
 body {
   height: 100%;

src/assets/styles/map.scss

@@ -0,0 +1,155 @@
+.map-marker {
+  width: 200px;
+  position: relative;
+}
+.marker-icon {
+  height: 50px;
+  width: 41px;
+}
+.marker-type {
+  position: absolute;
+  z-index: -1;
+  left: 23px;
+  padding: 0 10px 0 23px;
+  top: 3px;
+  width: fit-content;
+
+  height: 37px;
+  font-size: 14px;
+  color: #ffffff;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Aboreto-Bold";
+}
+
+.type-color1 {
+  background: linear-gradient(
+    270deg,
+    rgba(11, 170, 55, 0) 0%,
+    rgba(11, 170, 55, 0.7) 42%,
+    rgba(11, 170, 55, 0) 100%
+  );
+}
+.type-color2 {
+  background: linear-gradient(
+    270deg,
+    rgba(177, 173, 57, 0) 0%,
+    #b1ad39 42%,
+    rgba(177, 173, 57, 0) 100%
+  );
+}
+.type-color3 {
+  background: linear-gradient(
+    270deg,
+    rgba(107, 57, 177, 0) 0%,
+    #6b39b1 42%,
+    rgba(107, 57, 177, 0) 100%
+  );
+}
+
+// 地图点位弹窗
+.map-marker-popup {
+  position: relative;
+  width: 276px;
+  background: url("../images/visualization/popup-bg.png");
+  background-size: 100% 100%;
+  .marker-popup-close {
+    cursor: pointer;
+    position: absolute;
+    right: 20px;
+    top: 15px;
+    height: 10px;
+    width: 10px;
+    background: url("../images/visualization/popup-close.png");
+    background-size: 100% 100%;
+  }
+
+  .marker-popup-title {
+    height: 43px;
+    width: 100%;
+    font-size: 16px;
+    letter-spacing: 4px;
+    background: linear-gradient(180deg, #ffffff 0%, #74bbff 50%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-family: "Aboreto-Bold";
+    font-weight: bold;
+    padding: 0 25px;
+    line-height: 43px;
+    border-bottom: 2px solid #3da2fa;
+  }
+  .popup-row {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 15px 25px;
+    .row-item {
+      display: flex;
+      align-items: center;
+      .row-name {
+        width: 90px;
+        font-size: 14px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.7);
+      }
+      .row-value {
+        flex: 1;
+        font-size: 14px;
+        color: #ffffff;
+        font-weight: 400;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .popup-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 15px;
+    padding-bottom: 15px;
+    & > div {
+      cursor: pointer;
+      padding: 6px 11px;
+      background: #0e4e87;
+      border-radius: 4px;
+      font-size: 14px;
+      color: #ffffff;
+      font-weight: 400;
+    }
+    & > div:hover {
+      box-shadow: inset 0px 0px 12px 0px #00d9ff;
+    }
+  }
+}
+
+//地图点位视频-轨迹弹窗
+
+.map-dialog {
+  padding: 0;
+  // background: url("../images/visualization/popup-bg.png");
+  // background-size: cover;
+  border: 1px solid red;
+  .el-dialog__header {
+    padding: 0;
+  }
+  .map-dialog-title {
+    font-size: 16px;
+    letter-spacing: 4px;
+    background: linear-gradient(180deg, #ffffff 0%, #74bbff 50%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-family: "Aboreto-Bold";
+    font-weight: bold;
+    padding: 0 25px;
+    line-height: 43px;
+    border-bottom: 2px solid #3da2fa;
+  }
+  .video-container {
+    height: 342px;
+  }
+}

src/utils/ruoyi.js

@@ -86,8 +86,8 @@ export function selectDictLabel(datas, value) {
 
 // 回显数据字典（字符串、数组）
 export function selectDictLabels(datas, value, separator) {
-  if (value === undefined || value.length ===0) {
+  if (value === undefined ||value === null || value.length ===0) {
-    return ""
+    return "暂无"
   }
   if (Array.isArray(value)) {
     value = value.join(",")

src/views/visualization/emergency/index.vue

@@ -13,10 +13,57 @@
       map-key="emergency"
       @onload="marsOnload"
     />
+
+    <el-checkbox-group
+      v-model="checkList"
+      class="maplayer-select"
+      @change="mapLayerChange"
+    >
+      <section class="checkIcon">
+        <div class="icon-box">
+          <img :src="bzIcon" alt="" class="check-img" />
+          <div class="type-name">
+            <el-checkbox value="1" label="班组" />
+          </div>
+        </div>
+      </section>
+      <section class="checkIcon">
+        <div class="icon-box">
+          <img :src="clIcon" alt="" class="check-img" />
+          <div class="type-name type2">
+            <el-checkbox value="2" label="车辆" />
+          </div>
+        </div>
+      </section>
+      <section class="checkIcon">
+        <div class="icon-box">
+          <img :src="gdIcon" alt="" class="check-img" />
+          <div class="type-name type3">
+            <el-checkbox value="3" label="工单" />
+          </div>
+        </div>
+      </section>
+    </el-checkbox-group>
+
+    <!-- 现场视频 -->
+    <el-dialog
+      v-model="dialogVisible"
+      width="568"
+      class="map-dialog"
+      append-to-body
+    >
+      <template #header>
+        <div class="map-dialog-title">{{ title }}</div>
+      </template>
+      <div class="video-container"></div>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
+import bzIcon from "@/assets/images/visualization/bz.png";
+import clIcon from "@/assets/images/visualization/cl.png";
+import gdIcon from "@/assets/images/visualization/gd.png";
 import MarsMap from "@/components/mars-work/mars-map.vue";
 import mapOptions from "../mapOptions";
 import { onUnmounted } from "vue";
@@ -26,7 +73,13 @@ import { panelBlock } from "@/views/visualization/components/index";
 import containerLeft from "./components/containerLeft.vue";
 import containerRight from "./components/containerRight.vue";
 import containerBottom from "./components/containerBottom.vue";
+import { getyjList, getyjById } from "@/api/emergency";
 
+const { proxy } = getCurrentInstance();
+const { gdlx, xdsqm, yxlx } = proxy.useDict("gdlx", "xdsqm", "yxlx");
+const checkList = ref([]);
+const dialogVisible = ref(false);
+const title = ref("现场视频");
 //地图配置
 const configUrl = "lib/config/config.json";
 let mapData = null;
@@ -44,6 +97,158 @@ const initAreaCover = async () => {
   });
 };
 
+/**
+ * 地图图层变化
+ * @param e
+ */
+const mapLayerChange = (e) => {
+  const list = ["1", "2", "3"];
+
+  if (e.length > 0) {
+    e.map((item) => {
+      if (list.includes(item)) {
+        //加载图层数据
+        getMapLayerData(item);
+      } else {
+        //清除
+        mapLayer.gdLayer?.clear();
+      }
+    });
+  } else {
+    mapLayer.gdLayer?.clear();
+  }
+};
+
+/**
+ * 获取未处理工单
+ */
+const getMapLayerData = async (type) => {
+  let list = [];
+  if (type == 3) {
+    const res = await getyjList({ status: 0 }); //
+    list = res.data.records;
+  }
+
+  nextTick(() => {
+    list.map((item) => {
+      initBillboardEntity(item, type);
+    });
+  });
+};
+
+// 渲染图标点
+
+const initBillboardEntity = (item, iconType = 1) => {
+  const gdTypeName = proxy.selectDictLabel(gdlx.value, item.gdType); //翻译工单类型字典
+  const xdsqmName = proxy.selectDictLabel(xdsqm.value, item.xdsqm);
+  const image = iconType == 1 ? bzIcon : iconType == 2 ? clIcon : gdIcon;
+  const graphic = new mars3d.graphic.DivGraphic({
+    id: `marker${item.id}`,
+    position: new mars3d.LngLatPoint(
+      parseFloat(item.lat),
+      parseFloat(item.lon),
+      0
+    ),
+    style: {
+      html: `
+       <div class="map-marker">
+          <img class="marker-icon" src="${image}" />
+            <div class="marker-type type-color${iconType}">
+          <span>${gdTypeName}</span>
+          <span style="display:${
+            xdsqmName ? "block" : "none"
+          }">-${xdsqmName}</span>
+          </div>
+      </div>
+      `,
+
+      horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
+      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+      clampToGround: true,
+      offsetX: -20,
+    },
+    attr: item,
+  });
+
+  graphic.on(mars3d.EventType.click, (e) => {
+    const attr = e.target.attr;
+    //绑定工单弹窗
+    bindPopupByGd(attr.id);
+  });
+
+  // graphic.on(mars3d.EventType.popupOpen, (e) => {
+  //   document.getElementById("videoLook").addEventListener("click", () => {
+  //     dialogVisible.value = true
+  //   });
+  // });
+
+  mapLayer.gdLayer.addGraphic(graphic);
+};
+
+/**
+ * 绑定弹窗
+ */
+const bindPopupByGd = async (id) => {
+  const info = await getInfo(id);
+  const gdTypeName = proxy.selectDictLabel(gdlx.value, info.gdType); //翻译工单类型字典
+  const yxlxName = proxy.selectDictLabels(yxlx.value, info.yxlx);
+  const xdsqmName = proxy.selectDictLabel(xdsqm.value, info.xdsqm);
+
+  const markerItem = mapLayer.gdLayer.getGraphicById(`marker${id}`);
+
+  markerItem.bindPopup("占位", {
+    template: `<div class="marker-popup">
+                  <div class="marker-popup-close closeButton"></div>
+                  <div class="marker-popup-title">
+                    工单信息
+                  </div>
+                  <div class="popup-row">
+                    <div class="row-item">
+                      <div class="row-name">工单类型：</div>
+                      <div class="row-value">
+                        <span>${gdTypeName} </span>
+                        <spam style="display:${
+                          xdsqmName ? "block" : "none"
+                        }">-${xdsqmName}</spam> </div>
+                    </div>
+                     <div class="row-item">
+                      <div class="row-name">影响类型：</div>
+                      <div class="row-value">${yxlxName}</div>
+                    </div>
+                     <div class="row-item">
+                      <div class="row-name">处理班组：</div>
+                      <div class="row-value">${info.parentName}</div>
+                    </div>
+                     <div class="row-item">
+                      <div class="row-name">工单描述：</div>
+                      <div class="row-value">${info.clms}</div>
+                    </div>
+                  </div>
+                 
+              </div>`,
+    className: "map-marker-popup",
+    offsetX: 276,
+    offsetY: -41,
+    // <div class="popup-btn">
+    //                   <div id="videoLook">查看现场画面</div>
+    //                   <div>查看历史轨迹</div>
+    //               </div>
+  });
+
+  nextTick(() => {
+    markerItem.openPopup();
+  });
+};
+
+/**
+ * 获取工单详情
+ * @param id
+ */
+const getInfo = async (id) => {
+  const res = await getyjById(id);
+  return res.data;
+};
+
 const inintEntity = (data, fill = false, height) => {
   const polylineGraphic = new mars3d.graphic.PolygonEntity({
     positions: data.positions,
@@ -67,27 +272,6 @@ const inintEntity = (data, fill = false, height) => {
   });
   mapLayer.arealayer.addGraphic(polylineGraphic);
 };
-/**
- * 墙
- * @param positions
- */
-const inintEntityWall = (positions) => {
-  const wall = new mars3d.graphic.WallPrimitive({
-    positions: positions,
-    style: {
-      setHeight: -2500,
-      diffHeight: 2500, // 墙高
-      width: 100,
-      materialType: mars3d.MaterialType.Image2,
-      materialOptions: {
-        image: wallImg,
-        color: "#144C8F",
-      },
-    },
-  });
-
-  mapLayer.arealayer.addGraphic(wall);
-};
 
 /**
  * 风貌区
@@ -116,9 +300,10 @@ const marsOnload = (map) => {
  */
 const createMapLayer = () => {
   mapLayer.arealayer = new mars3d.layer.GraphicLayer();
-  mapLayer.styleFeatures = new mars3d.layer.GraphicLayer();
   mapData.addLayer(mapLayer.arealayer);
-  mapData.addLayer(mapLayer.styleFeatures);
+
+  mapLayer.gdLayer = new mars3d.layer.GraphicLayer();
+  mapData.addLayer(mapLayer.gdLayer);
 };
 
 /**
@@ -130,7 +315,8 @@ onUnmounted(() => {
     mapData = null;
   }
   mapLayer.arealayer?.clear();
-  mapLayer.styleFeatures?.clear();
+  mapLayer.gdLayer?.clear();
+
   mapLayer = null;
 });
 </script>
@@ -167,5 +353,88 @@ onUnmounted(() => {
     width: 55%;
     padding-bottom: 34px;
   }
+
+  ::v-deep .maplayer-select {
+    position: absolute;
+    top: 125px;
+    left: 22%;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    .el-checkbox__label {
+      font-size: 14px;
+      color: #ffffff;
+      font-weight: bold;
+    }
+    .el-checkbox {
+      display: flex;
+      align-items: center;
+      flex-direction: row-reverse;
+      gap: 10px;
+    }
+    .el-checkbox__inner {
+      height: 18px;
+      width: 18px;
+      border-color: #58f4ff;
+      background-color: #071c3b;
+    }
+    .el-checkbox__input.is-checked .el-checkbox__inner {
+      background-color: #58f4ff;
+    }
+    .el-checkbox__input.is-checked .el-checkbox__inner::after {
+      border-color: #071c3b; /* 替换为你想要的颜色 */
+      transform: scale(1.5) rotate(45deg);
+    }
+    .el-checkbox__inner:after {
+      left: 6px;
+      top: 3px;
+    }
+  }
+  .checkIcon {
+    display: flex;
+    align-items: center;
+    gap: 80px;
+    .icon-box {
+      position: relative;
+    }
+    .check-img {
+      width: 41px;
+      height: 50px;
+    }
+    .type-name {
+      position: absolute;
+      top: 3px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      left: 30px;
+      width: 100px;
+      height: 40px;
+      background: linear-gradient(
+        270deg,
+        rgba(11, 170, 55, 0) 0%,
+        rgba(11, 170, 55, 0.7) 42%,
+        rgba(11, 170, 55, 0) 100%
+      );
+    }
+
+    .type2 {
+      background: linear-gradient(
+        270deg,
+        rgba(177, 173, 57, 0) 0%,
+        #b1ad39 42%,
+        rgba(177, 173, 57, 0) 100%
+      );
+    }
+    .type3 {
+      background: linear-gradient(
+        270deg,
+        rgba(107, 57, 177, 0) 0%,
+        #6b39b1 42%,
+        rgba(107, 57, 177, 0) 100%
+      );
+    }
+  }
 }
 </style>