lcw

src/App.vue

@@ -1,21 +1,23 @@
-
 <template>
-    <router-view v-slot="{ Component }" v-if="isRouterAlive">
-      <keep-alive :include="store.getters.keepLiiveRoute">
-        <Watermark :text="content" :color="'rgba(0, 0, 0, .15)'">
-          <Component :is="Component"></Component>
+  <router-view v-slot="{ Component }" v-if="isRouterAlive">
+    <keep-alive :include="store.getters.keepLiiveRoute">
+      <Watermark :text="content" :color="'rgba(0, 0, 0, .15)'">
+        <Component :is="Component"></Component>
       </Watermark>
-      </keep-alive>
-    </router-view>
+    </keep-alive>
+  </router-view>
+  <Data/>
 </template>
+
 <script setup>
-import { ref, nextTick, provide, onMounted } from "vue";
+import { ref, nextTick, provide, onMounted, reactive } from "vue";
 import { useStore } from "vuex";
 import Watermark from "@/components/Watermark.vue";
 import { timeValidate } from "@/utils/tools.js";
-import { getItem } from "@/utils/storage";
-import { qcckPost, qcckGet, qcckPut, qcckDelete } from "@/api/qcckApi.js";
 import { generateNewStyle, writeNewStyle } from "@/utils/theme";
+import { getItem } from '@/utils/storage.js'
+import Data from "@/components/fzq/index.vue";
+
 const store = useStore();
 generateNewStyle(store.getters.mainColor).then((newStyle) => {
   writeNewStyle(newStyle);
@@ -33,28 +35,32 @@ onMounted(() => {
   frashJs()
   document.title = "林芝";
 });
-const content=ref([])
+const content = ref([])
 const frashJs = () => {
- const sfzh= getItem("idEntityCard")
-const userName=  getItem("USERNAME")
+  const sfzh = getItem("idEntityCard")
+  const userName = getItem("USERNAME")
   const time = timeValidate()
-  content.value=[userName,sfzh,time,"林芝市环林卡口综合管理","禁止泄露公民个人信息和警务工作秘密"]
+  content.value = [userName, sfzh, time, "林芝市环林卡口综合管理", "禁止泄露公民个人信息和警务工作秘密"]
 }
 </script>
 <style lang="scss">
 @import "./styles/index.scss";
+
 body {
   margin: 0px;
   padding: 0px;
   font-size: 14px;
 }
+
 ul {
   margin: 0px;
   padding: 0px;
 }
+
 li {
   list-style-type: none;
 }
+
 #app {
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
     Microsoft YaHei, SimSun, sans-serif;
@@ -65,37 +71,63 @@ li {
   // background:#263445;
 }
 
-//只显示一排内容
-.one_text_detail {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-//只显示二排内容
-.two_text_detail {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-//只显示三排内容
-.text_detail {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  overflow: hidden;
-  text-overflow: ellipsis;
+// 蜂群组件样式
+.fxq {
+  border-radius: 34px;
+  width: 34px;
+  transition: width 0.3s ease;
+  background-color: rgb(1, 127, 245);
+  // overflow: hidden;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  .title {
+    height: 34px;
+    line-height: 34px;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+
+    img {
+      margin-left: 9.5px;
+      width: 16px;
+      margin-right: 10px;
+      vertical-align: middle;
+      height: 16px;
+      flex-shrink: 0;
+    }
+
+    span {
+      opacity: 0;
+      transition: opacity 0.2s ease 0.1s;
+      padding-right: 15px;
+    }
+  }
 }
 
-// 不显示滚动条
-.noScollLine::-webkit-scrollbar {
-  width: 0 !important;
+.fxq2 {
+  background-color: #9d88f9;
 }
 
-v-deep .el-loading-mask {
+.fxq3 {
+  background-color: #00c07f;
+}
+
+.fxq:hover {
+  width: 120px;
+}
+
+.fxq:hover .title span {
+  opacity: 1;
+}
+
+.item {
+  margin-bottom: 10px;
+}
+
+::v-deep .el-loading-mask {
   background: rgba(0, 0, 0, 0.5) !important;
 }
 
@@ -105,16 +137,27 @@ v-deep .el-loading-mask {
   font-weight: normal;
   font-style: normal;
 }
+
 @font-face {
   font-family: "HANYILINGXINTIJIAN";
   src: url("~@/assets/font/HANYILINGXINTIJIAN-1.TTF");
   font-weight: normal;
   font-style: normal;
 }
+
 @font-face {
   font-family: "YSBTH";
   src: url("~@/assets/font/YSBTH.ttf");
   font-weight: normal;
   font-style: normal;
 }
+
+.box-item {
+  margin-bottom: 10px;
+}
+</style>
+<style lang="scss" scoped>
+::v-deep .el-badge__content.is-fixed {
+  right: calc(100% + 6px);
+}
 </style>

src/api/commit.js

@@ -0,0 +1,72 @@
+import request from "@/utils/request";
+const api = "/mosty-api/mosty-base";
+const gsxtApi = "/mosty-api/mosty-gsxt";
+// 查询未读消息
+export const queryYdxxPageList = (data) => {
+  return request({
+    url: api + "/fzmsg/queryYdxxPageList",
+    method: "POST",
+    data
+  });
+};
+//查看未读详情
+export const queryWdxxDetail = (data) => {
+  return request({
+    url: api + "/fzmsg/queryWdxxDetail",
+    method: "POST",
+    data
+  });
+};
+
+// 查询一睹消息
+export const queryWdxxPageList = (data) => {
+  return request({
+    url: api + "/fzmsg/queryWdxxPageList ",
+    method: "POST",
+    data
+  });
+};
+export const queryYdxxDetail = (data) => {
+  return request({
+    url: api + "/fzmsg/queryYdxxDetail",
+    method: "POST",
+    data
+  });
+};
+export const queryXxTj = (data) => {
+  return request({
+    url: api + "/fzmsg/queryXxTj",
+    method: "POST",
+    data
+  });
+};
+
+
+
+
+// 签收
+export const qsXx = (data) => {
+  return request({
+    url: api + "/fzmsg/qsXx",
+    method: "post",
+    data
+  });
+};
+
+
+export function upImageFileInfo(data) {
+  return request({
+    url: api + '/minio/file/uploadObj',
+    method: 'post',
+    data
+  })
+}
+export function upImageUploadId(data) {
+  return request({
+    url: api + '/minio/image/upload/id',
+    method: 'post',
+    data
+  })
+}
+
+

src/api/mosty-jcz.js

@@ -1,6 +1,14 @@
 import request from "@/utils/request";
 const api = "/mosty-api/mosty-jcz";
-
+const api2 = "/mosty-api/mosty-gsxt";
+// 预警轨迹
+export const tbYjxxGsgj = (data) => {
+  return request({
+    url: api2 + `/tbYjxx/gsgj`,
+    method: "POST",
+    data
+  })
+}
 /*
  *大屏预警查询接口
  *  return promise 实例对象
@@ -722,3 +730,11 @@ export const getXfllList = (params) => {
     params
   });
 };
+export const feignQueryById = (params) => {
+  return request({
+    url: api + `/jcz/feign/queryById`,
+    method: "get",
+    params
+  });
+};
+

src/api/user-manage.js

@@ -1,5 +1,6 @@
 import request from "@/utils/request";
 const api = "/mosty-api/mosty-base";
+
 /*
  * 登录
  *  return promise 实例对象
@@ -627,3 +628,11 @@ export const getSessionForSfzh = (params) => {
     params
   });
 };
+const api2 = "/getSession";
+export const getSession = (params) => {
+  return request({
+    url: api2,
+    method: "GET",
+    params
+  });
+};

src/components/GdMap/index copy.vue

@@ -0,0 +1,367 @@
+<template>
+  <div :id="mapid" class="map"></div>
+  <div class="changeMap_box" v-if="props.isShow">
+    <el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况"
+      style="--el-switch-color: #13ce66; --el-switch-off-color: #ff4949" />
+    <!-- <el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3"  @change="onMapImageChange">
+      <el-carousel-item>
+        <div class="mapImageItem">
+          <img :src="require('@/assets/images/slt.jpg')" alt="" />
+          <div>栅格浅色</div>
+        </div>
+      </el-carousel-item>
+      <el-carousel-item>
+        <div class="mapImageItem">
+          <img :src="require('@/assets/images/yxt.jpg')" alt="" />
+          <div>影像图</div>
+        </div>
+      </el-carousel-item>
+      <el-carousel-item>
+        <div class="mapImageItem">
+          <img :src="require('@/assets/images/yst.jpg')" alt="" />
+          <div>栅格深色</div>
+        </div>
+      </el-carousel-item>
+      <el-carousel-item>
+        <div class="mapImageItem">
+          <img :src="require('@/assets/images/shy.png')" alt="" />
+          <div>三合一</div>
+        </div>
+      </el-carousel-item>
+    </el-carousel> -->
+    <!-- 地图缩放 -->
+    <div class="zoomTargetBox">
+      <el-input-number :min="7" :max="18" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom"></el-input-number>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, defineProps, nextTick } from "vue";
+import { MapUtil } from "./mapUtil";
+import emitter from "@/utils/eventBus.js";
+import { getItem } from "@/utils/storage";
+const conditionRoute = ref(true); //路况
+const mMap = ref(null); //地图对象
+const mapUtil = ref(null); //地图工具对象
+const zoomTarget = ref(6);
+
+const props = defineProps({
+  mapid: {
+    type: String,
+    default: "mapDiv"
+  },
+  //是否显示可以切换地图底图
+  isShow: {
+    type: Boolean,
+    default: false
+  },
+  //是否显示实时路况
+  isShowMvt: {
+    type: Boolean,
+    default: false
+  },
+  //是否显示地图层级
+  isShowZoom: {
+    type: Boolean,
+    default: false
+  },
+  //是否显示绘制控件
+  isShowDraw: {
+    type: Boolean,
+    default: false
+  },
+  minZoom: {
+    type: Number,
+    default:  7
+  },
+  maxZoom: {
+    type: Number,
+    default: 18
+  },
+});
+try {
+  const userInfo = getItem("deptId")[0].deptCode;
+} catch (error) { }
+let map;
+let mapLayer;
+let mapLayer1;
+onMounted(() => {
+  emitter.on("followUp", (res) => {
+    let box = document.getElementsByClassName("changeMap_box");
+    if (!box) return;
+    box[0].style.right = !res ? "4px" : "398px";
+    box[0].style.transition = "0.5s";
+  });
+
+  map = new EliMap({
+    id: props.mapid,
+    crs: "EPSG:4490",
+    style: {
+      glyphs: "./fonts/{fontstack}/{range}.pbf",
+      center: [94.36057012, 29.64276831],
+      zoom: 15
+    },
+    minZoom: props.minZoom,
+    maxZoom: props.maxZoom,
+  });
+  window.map = map;
+  map.mapboxGLMap.on("load", () => {
+    map.addWMTSLayer(
+      "/PGIS_S_TileMapServer/Maps/XZDJ_DJ/EzMap"
+      ,
+      {
+        Service: "getImage",
+        Type: "RGB",
+        ZoomOffset: "0",
+        V: "0.3",
+        Zoom: "{z}",
+        Row: "{y}",
+        Col: "{x}"
+      },
+      {
+        tileSize: 300
+      }
+    );
+    zoomTarget.value = map.mapboxGLMap.getZoom();
+  });
+  mapUtil.value = new MapUtil(map);
+
+  mapUtil.value.Drawplot(); //初始化加载绘制工具
+
+  // 设置地图中心点及图层
+  emitter.on("setMapCenter", (res) => {
+    mapUtil.value.setMapCenter(res.location, res.zoomLevel);
+  });
+
+  emitter.on("removePlot", (flag) => {
+    mapUtil.value.removePlot(flag);
+  });
+  emitter.on("removeAll", (flag) => {
+    mapUtil.value.removeAll(flag);
+  });
+  // 撒点
+  emitter.on("addPointArea", (obj) => {
+    mapUtil.value.makerSki(obj);
+  });
+  // 鼠标滑过提示文字的点位
+  emitter.on("showPoint", (obj) => {
+    mapUtil.value.showPoint(obj);
+  });
+
+  // 清除覆盖物
+  emitter.on("deletePointArea", (res) => {
+    mapUtil.value.removeElement(res);
+  });
+  // 清除某个覆盖物的单个
+  emitter.on("deletePointAreaOne", (obj) => {
+    mapUtil.value.removeElementOne(obj.flag, obj.id);
+  });
+
+  // 清除某个覆盖物的单个
+  emitter.on("showSquire", (obj) => {
+    mapUtil.value.zdySquire(obj);
+  });
+
+  // 绘制图形 - 回显区域
+  emitter.on("drawShape", (res) => {
+    mapUtil.value.plot(res, resFun);
+  });
+  emitter.on("removeEara", (flag) => {
+    mapUtil.value.removeEara(flag);
+  });
+  // 回显图形
+  emitter.on("echoPlane", (res) => {
+    mapUtil.value.echoPlane(res);
+  });
+  //移除绘制区域
+  emitter.on("removeEara", (flag) => {
+    mapUtil.value.removeEara(flag);
+  });
+  // 回显线
+  emitter.on("echoLine", (res) => {
+    mapUtil.value.createLine(res, res.flag);
+  });
+  //创建边界面（geojson）
+  emitter.on("setBoundarys", (res) => {
+    mapUtil.value.createBoundarys(res);
+  });
+  // 移除边界
+  emitter.on("removeBj", (res) => {
+    mapUtil.value.removeBj(res);
+  });
+
+  // 轨迹回放
+  emitter.on("drawLineAnimation", (res) => {
+    mapUtil.value.displayLineAnimation(res);
+  });
+
+  // 聚合撒点
+  emitter.on("addPoint", (obj) => {
+    mapUtil.value.aggregateScatteringPoint(obj);
+  });
+
+  // 热力图显示
+  emitter.on("thermodynamicChart", (res) => {
+    mapUtil.value.showHeatDrawing(res);
+  });
+
+  // 扩散圆
+  emitter.on("diffusionCircle", (res) => {
+    mapUtil.value.diffusionCircle(res);
+  });
+
+  // 展示盘曲
+  emitter.on("showGapText", (obj) => {
+    mapUtil.value.gapText(obj);
+  });
+
+  // 获取当前地图中心点
+  emitter.on("getCurrentCenter", (res) => {
+    let centerPoint = map.mapboxGLMap.getCenter();
+    let coords = [centerPoint.lng, centerPoint.lat];
+    emitter.emit("getcentercoord", coords);
+  });
+});
+//切换地图底图
+const onMapImageChange = (val) => {
+  //清除已经存在胡地图图层
+  if (map.mapboxGLMap.getLayer("SGQS_ID"))
+    map.mapboxGLMap.removeLayer("SGQS_ID");
+  if (map.mapboxGLMap.getLayer("YX_ID")) map.mapboxGLMap.removeLayer("YX_ID");
+  if (map.mapboxGLMap.getLayer("SGSG_ID"))
+    map.mapboxGLMap.removeLayer("SGSG_ID");
+  if (map.mapboxGLMap.getLayer("TDT_TITLE_ID"))
+    map.mapboxGLMap.removeLayer("TDT_TITLE_ID");
+  if (map.mapboxGLMap.getLayer("TDT_ROAD_ID"))
+    map.mapboxGLMap.removeLayer("TDT_ROAD_ID");
+  if (map.mapboxGLMap.getLayer("TDT_POI_ID"))
+    map.mapboxGLMap.removeLayer("TDT_POI_ID");
+  //设置图层
+  switch (val) {
+    case 0:
+      mapSetLayer("SGQS_ID", "SGQS");
+      break;
+    case 1:
+      mapSetLayer("YX_ID", "YX");
+      break;
+    case 2:
+      mapSetLayer("SGSG_ID", "SGSG");
+      break;
+    case 3:
+      mapSetLayer("TDT_TITLE_ID", "TDT_TITLE_SOURCES");
+      mapSetLayer("TDT_ROAD_ID", "TDT_ROAD_SOURCES");
+      mapSetLayer("TDT_POI_ID", "TDT_POI_SOURCES");
+      break;
+  }
+  if (map.mapboxGLMap.getLayer("realTimeTrafficlevelOne"))
+    map.mapboxGLMap.moveLayer("realTimeTrafficlevelOne");
+  if (map.mapboxGLMap.getLayer("map_id")) map.mapboxGLMap.moveLayer("map_id");
+  if (map.mapboxGLMap.getLayer("map_ids")) map.mapboxGLMap.moveLayer("map_ids");
+};
+
+//设置图层函数
+const mapSetLayer = (id, source) => {
+  map.mapboxGLMap.addLayer({ id, type: "raster", source });
+};
+
+//获取地图绘制的数据
+const resFun = (coord, type, flag, data) => {
+  emitter.emit("coordString", {
+    coord: coord,
+    type: type,
+    flag: flag,
+    data: data
+  });
+};
+
+// 地图层级
+const handleZoom = (val) => {
+  map.mapboxGLMap.setZoom(val);
+};
+
+// 是否打开或者关闭路况
+const handleSwitch = (val) => {
+  if (val) {
+    // 打开
+  } else {
+    // 关闭
+  }
+};
+
+onUnmounted(() => {
+  emitter.off("removePlot");
+  emitter.off("setMapCenter");
+  emitter.off("addPointArea");
+  emitter.off("showPoint");
+  emitter.off("deletePointArea");
+  emitter.off("deletePointAreaOne");
+  emitter.off("drawShape");
+  emitter.off("echoPlane");
+  emitter.off("removeEara");
+  emitter.off("echoLine");
+  emitter.off("addPoint");
+  emitter.off("thermodynamicChart");
+  emitter.off("drawLineAnimation");
+  emitter.off("aggregateScatteringPoint");
+  emitter.off("hotmap");
+  emitter.off("setBoundarys");
+  emitter.off("diffusionCircle");
+  emitter.off("SsCircle");
+  emitter.off("ClearssCircle");
+});
+</script>
+
+<style lang="scss" scoped>
+.map {
+  width: 100%;
+  height: 100%;
+  background-color: aliceblue;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  z-index: 1;
+}
+
+.changeMap_box {
+  position: absolute;
+  right: 398px;
+  bottom: 4px;
+  z-index: 9;
+
+  .mapImageItem {
+    border: 1px solid #08aae8;
+    background: rgb(9, 26, 70);
+
+    &>img {
+      width: 100%;
+      height: 50px;
+    }
+
+    &>div {
+      text-align: center;
+      position: relative;
+      top: -3px;
+    }
+  }
+
+  .zoomTargetBox {
+    margin-top: 10px;
+    margin-left: 23px;
+  }
+
+  ::v-deep .el-input-number__decrease,
+  ::v-deep .el-input-number__increase {
+    background: #133362;
+    color: #fff;
+    border: none;
+  }
+
+  ::v-deep .el-input__inner {
+    background: #0c1641;
+  }
+}
+</style>

src/components/GdMap/index.vue

@@ -70,7 +70,15 @@ const props = defineProps({
   isShowDraw: {
     type: Boolean,
     default: false
-  }
+  },
+  minZoom: {
+    type: Number,
+    default:  7
+  },
+  maxZoom: {
+    type: Number,
+    default: 18
+  },
 });
 try {
   const userInfo = getItem("deptId")[0].deptCode;
@@ -94,8 +102,8 @@ onMounted(() => {
       center: [94.36057012, 29.64276831],
       zoom: 15
     },
-    minZoom: 7,
-    maxZoom: 18,
+    minZoom: props.minZoom,
+    maxZoom: props.maxZoom,
   });
   window.map = map;
   map.mapboxGLMap.on("load", () => {

src/components/GdMap/indexn.vue

@@ -1,8 +1,7 @@
 <template>
   <div :id="mapid" class="map"></div>
   <div class="changeMap_box" v-if="props.isShow">
-    <el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况"
-      style="--el-switch-color: #13ce66; --el-switch-off-color: #ff4949" />
+    <el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况" style="--el-switch-color:#13ce66;--el-switch-off-color:#ff4949;" />
     <!-- <el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3"  @change="onMapImageChange">
       <el-carousel-item>
         <div class="mapImageItem">
@@ -71,11 +70,12 @@ const props = defineProps({
   isShowDraw: {
     type: Boolean,
     default: false
-  }
+  },
+
 });
 try {
   const userInfo = getItem("deptId")[0].deptCode;
-} catch (error) { }
+} catch (error) {}
 let map;
 let mapLayer;
 let mapLayer1;
@@ -89,36 +89,66 @@ onMounted(() => {
 
   map = new EliMap({
     id: props.mapid,
-    crs: "EPSG:4490",
+    crs: "EPSG:3857",
     style: {
       glyphs: "./fonts/{fontstack}/{range}.pbf",
-      center: [94.36057012, 29.64276831],
-      zoom: 15
+      center: [94.36,29.65],
+      zoom: 10
     },
-    minZoom: 7,
-    maxZoom: 18,
+      minZoom: 6.7,
+    maxZoom: 6.7,
+    transformRequest: (url) => {
+      if (url.indexOf("TileMatrix=") != -1) {
+        const arr = url.split("TileMatrix=");
+        const arr1 = arr[1].split("&");
+        const nurl = `${arr[0]}&TileMatrix=${Number(arr1[0])}&${arr1[1]}&${arr1[2]}`;
+
+      }
+    }
   });
+
   window.map = map;
   map.mapboxGLMap.on("load", () => {
-    map.addWMTSLayer(
-      "/PGIS_S_TileMapServer/Maps/XZDJ_SL/EzMap",
-      {
-        Service: "getImage",
-        Type: "RGB",
-        ZoomOffset: "0",
-        V: "0.3",
-        Zoom: "{z}",
-        Row: "{y}",
-        Col: "{x}"
-      },
-      {
-        tileSize: 300
-      }
-    );
+     map.addGaudLayer({
+      url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
+    })
     zoomTarget.value = map.mapboxGLMap.getZoom();
+    // 地图加载完成后发出事件
+    // emit('mapLoaded')
   });
   mapUtil.value = new MapUtil(map);
-
+  // map = new EliMap({
+  //   id: props.mapid,
+  //   crs: "EPSG:4490",
+  //   style: {
+  //     glyphs: "./fonts/{fontstack}/{range}.pbf",
+  //     center: [94.36057012, 29.64276831],
+  //     zoom: 15
+  //   },
+  //   minZoom: 7,
+  //   maxZoom: 18,
+  // });
+  // window.map = map;
+  // map.mapboxGLMap.on("load", () => {
+  //   map.addWMTSLayer(
+  //     "/PGIS_S_TileMapServer/Maps/XZDJ_SL/EzMap"
+  //     ,
+  //     {
+  //       Service: "getImage",
+  //       Type: "RGB",
+  //       ZoomOffset: "0",
+  //       V: "0.3",
+  //       Zoom: "{z}",
+  //       Row: "{y}",
+  //       Col: "{x}"
+  //     },
+  //     {
+  //       tileSize: 300
+  //     }
+  //   );
+  //   zoomTarget.value = map.mapboxGLMap.getZoom();
+  // });
+  // mapUtil.value = new MapUtil(map);
   mapUtil.value.Drawplot(); //初始化加载绘制工具
 
   // 设置地图中心点及图层
@@ -259,6 +289,7 @@ const mapSetLayer = (id, source) => {
 
 //获取地图绘制的数据
 const resFun = (coord, type, flag, data) => {
+
   emitter.emit("coordString", {
     coord: coord,
     type: type,
@@ -323,35 +354,29 @@ onUnmounted(() => {
   right: 398px;
   bottom: 4px;
   z-index: 9;
-
   .mapImageItem {
     border: 1px solid #08aae8;
     background: rgb(9, 26, 70);
-
-    &>img {
+    & > img {
       width: 100%;
       height: 50px;
     }
-
-    &>div {
+    & > div {
       text-align: center;
       position: relative;
       top: -3px;
     }
   }
-
   .zoomTargetBox {
     margin-top: 10px;
     margin-left: 23px;
   }
-
   ::v-deep .el-input-number__decrease,
   ::v-deep .el-input-number__increase {
     background: #133362;
     color: #fff;
     border: none;
   }
-
   ::v-deep .el-input__inner {
     background: #0c1641;
   }

src/components/GdMap/mapUtil copy 2.js

@@ -0,0 +1,856 @@
+import emitter from "@/utils/eventBus.js";
+
+export function MapUtil(map) {
+  let _that = this;
+  _that.mMap = map; //地图对象
+  _that._self = {};//图层对象
+  _that._CustomDraw = null;//自定义绘图
+  _that.polygonGeo = null;//边界
+  _that.idsBox = {} //存放id的容器（需要某个标记单个删除的时候存储）
+  _that.isCheck = false
+  /**
+   * 设置地图中心点以
+   * @param {*} location 中心坐标 [jd,wd]
+   * @param {*} zoomLevel 层级  10
+   */
+  MapUtil.prototype.setMapCenter = (location, zoomLevel) => {
+    map.mapboxGLMap.setCenter(location);
+    map.mapboxGLMap.setZoom(zoomLevel);
+  };
+
+  /**
+   * 撒点.鼠标滑动展示内容
+   * @param {*} coords 坐标 geojson
+   * @param {*} icon 图标
+   * @param {*} flag 标识
+   */
+  MapUtil.prototype.showPoint = (res) => {
+    let { coords, icon, flag, iconH } = res
+    if (!coords) return;
+    if (!_that._self[flag]) _that._self[flag] = [];
+    let pointList = coords.map((it, index) => {
+      let text = it.kfdMc || it.wzBc || it.gajgmc || it.xm || it.jczmc;
+      let obj = {
+        position: [it.jd, it.wd],
+        userData: { deviceSn: 'text' + index, area: text },
+        id: it.id,
+        text: text,
+        data: it
+      }
+      if (it.jd && it.wd) return obj;
+    });
+
+    const point = map.createdPoint(pointList, {
+      image: icon,//对应上面的图片名称
+      scale: 1,
+      highlightImage: iconH ? iconH : icon,//高亮图标
+      labelOption: {
+        pixelOffset: [0, -2],
+        allShow: false,
+        fontSize: '18px',
+        fontWeight: 600,
+        fontColor: '#000000'
+      }
+    })
+    _that._self[flag].push(point)
+
+
+    point.addEventListener("click", (val) => {
+      let data = val.data ? JSON.parse(val.data) : {};
+      // point.highlight(data.id) //高亮展示选中的点位
+      _that.openInfoDetail(flag, [data]) //点击打开详情
+    })
+  }
+
+  /**
+   * 撒点
+   * @param {*} coords 坐标 geojson
+   * @param {*} icon 图标
+   * @param {*} flag 标识
+   * @param {*} showTitle 是否展示标题
+   */
+
+  MapUtil.prototype.makerSki = (res) => {
+    let { coords, icon, flag, showTitle } = res
+    if (!coords) return;
+    if (!_that._self[flag]) _that._self[flag] = []; //存储地图标识的容器
+    if (!_that.idsBox[flag]) _that.idsBox[flag] = []; //存储id的容器
+    if (flag == 'rx') {
+      _that.handlePolice(coords, icon, flag, showTitle)
+    } else {
+      coords.forEach(item => {
+        let el = document.createElement("img");
+        el.src = item.icon || icon;
+        el.style.width = flag == 'kfd' ? '32px' : "25px";
+        if (flag.includes('jczMap_')) el.style.width = '45px';
+        if (showTitle) _that.makerShowTitle(item, [item.jd, item.wd], flag) //展示标题
+        const marker = map.Marker(el, [item.jd, item.wd], { anchor: 'bottom', offset: [0, 0] })
+        el.addEventListener("click", () => {
+          _that.openInfoDetail(flag, item) //点击打开详情
+        })
+        _that._self[flag].push(marker)
+        _that.idsBox[flag].push(item.id)
+      });
+    }
+  };
+
+
+  // 警力处理展示
+  MapUtil.prototype.handlePolice = (coords, icon, flag, showTitle) => {
+    // 01-大型车辆-DXCL， 02-小型车辆=XXCL，03-摩托车-MTC，04-其他车辆-QTCL，05-重型车辆-ZXCL，06-风控车-FKC，07-巡逻车-XLC，08-装甲车-ZJC
+    coords.forEach(item => {
+      let el = document.createElement("img");
+      let jcIcon = require(`@/assets/point/police-car-bx.png`);
+      switch (item.lx) {
+        case '01': // 特警
+          jcIcon = require(`@/assets/point/specialPolice.png`);
+          break;
+        case '02': // 交警
+          jcIcon = require(`@/assets/point/trafficPolice.png`);
+          break;
+        case '03': // 派出所民警
+          jcIcon = require(`@/assets/point/peoplePolice.png`);
+          break;
+        default: // 默认图标
+          jcIcon = require(`@/assets/point/specialPolice.png`);
+          break;
+      }
+      if (item.zzlx == 1) jcIcon = require(`@/assets/point/by.png`); //便衣
+      let cllxList = item.cllx ? item.cllx.split(',') : [];
+
+      if ((cllxList.includes('03') || cllxList.includes('04')) && item.lx == '02') jcIcon = require(`@/assets/point/xljmtc.png`); //交警-摩托车
+      if ((cllxList.includes('03') || cllxList.includes('04')) && item.lx == '01') jcIcon = require(`@/assets/point/tjc.png`); //特警-摩托车
+      if (cllxList.includes('08') || cllxList.includes('06')) jcIcon = require(`@/assets/point/zjc.png`); //装甲车
+
+      el.src = jcIcon;
+      let isShoeCar = cllxList.includes('03') || cllxList.includes('08') //车辆类型
+      // el.style.width = isShoeCar ? '38px':"25px"; //图片大小
+      // if(cllxList.includes('08')) el.style.height = '40px'
+      if (showTitle) _that.makerShowTitle(item, [item.jd, item.wd], flag) //展示标题
+      _that.shouIcon(item, [item.jd, item.wd]); // 展示装备图标
+
+      let offset = isShoeCar ? [-10, 0] : [0, 0];
+      if (cllxList.includes('08')) offset = [-12, -10]
+      const marker = map.Marker(el, [item.jd, item.wd], { anchor: 'bottom', offset: offset })
+      el.addEventListener("click", () => {
+        _that.openInfoDetail(flag, item) //点击打开详情
+      })
+      _that._self[flag].push(marker)
+      _that.idsBox[flag].push(item.id)
+    });
+  }
+
+  // 信息框展示
+  MapUtil.prototype.makerShowTitle = (item, points, flag, text) => {
+    let T = flag == 'rx' ? 'rxTitle' : 'Title'
+    let flagT = flag + T;
+    if (!_that._self[flagT]) _that._self[flagT] = [];
+
+    // 展示名字
+    let textTitle = item.jzMc ? item.jzMc : item.fzrXm + '警组';
+    if (flag == 'sbwz_car' || flag == 'sbwz_sb' || flag == 'sbwz_zfjly') textTitle = item.sbmc;
+    if (flag == 'gapText') textTitle = text;
+
+    // 设置样式
+    const el = document.createElement('div');
+    el.className = 'makerTitle';
+    if (flag == 'sbwz_car' || flag == 'sbwz_sb' || flag == 'sbwz_zfjly') el.className = 'makerTitlezb';
+    if (flag == 'rx') {
+      if (item.xfzt == '0') el.classList.add('makerTitleLine');
+      else if (item.xfzt == '1') el.classList.add('makerTitlecj');
+      else el.classList.add('makerTitleUnLine');
+    }
+    if (flag == 'gapText') el.className = 'makerTitleGapText';
+
+    // 渲染
+    el.innerHTML = textTitle;
+    const marker = map.Marker(el, points, { anchor: 'bottom', offset: [0, -50] })
+    _that._self[flagT].push(marker)
+  }
+
+
+
+  /**
+   * 装备图标
+   * @param {点位数据} data
+   * @param {点} point
+   */
+  MapUtil.prototype.shouIcon = (data, point) => {
+    if (!_that._self.gpsZb) _that._self.gpsZb = []
+    var qxIcon = require(`@/assets/point/qx.png`); //qixie
+    var zfjlyIcon = require(`@/assets/point/interphone.png`); // 对讲机
+    var clIcon = require(`@/assets/point/car.png`); // 车辆
+    let jyqx = typeof data.jyqx == "string" ? JSON.parse(data.jyqx) : data.jyqx ? data.jyqx : [];
+    let txzb = typeof data.txzb == "string" ? JSON.parse(data.txzb) : data.txzb ? data.txzb : [];
+    let pbcl = typeof data.pbcl == "string" ? JSON.parse(data.pbcl) : data.pbcl ? data.pbcl : [];
+    let list = []
+    let cl = (pbcl && pbcl.length > 0) ? true : false; // 车辆
+    let zb = (txzb && txzb.length > 0) ? true : false; // 智能装备
+    let qx = (jyqx && jyqx.length > 0) ? true : false; // 警用器械
+    if (zb) {
+      let el = document.createElement("img");
+      el.style.width = "15px"
+      el.src = zfjlyIcon;
+      const makerZb = map.Marker(el, point, { anchor: 'bottom', offset: [20, -26] })
+      list.push(makerZb)
+    }
+    if (qx) {
+      let elqx = document.createElement("img");
+      elqx.style.width = "15px"
+      elqx.src = qxIcon;
+      const makerQx = map.Marker(elqx, point, { anchor: 'bottom', offset: [20, -10] })
+      list.push(makerQx)
+    }
+    if (cl) {
+      let elcl = document.createElement("img");
+      elcl.style.width = "20px"
+      elcl.src = clIcon;
+      const makerCl = map.Marker(elcl, point, { anchor: 'bottom', offset: [20, 2] })
+      list.push(makerCl)
+    }
+    _that._self.gpsZb[data.id] = list
+  }
+
+
+  // 自定义展示
+  MapUtil.prototype.zdySquire = (obj) => {
+    let { points, flag, distance } = obj
+    if (!_that._self[flag]) _that._self[flag] = [];
+    let textTitle = '距离：' + distance; // 展示名字
+    const el = document.createElement('div');
+    el.className = 'makerTitle';
+    if (flag == 'distance') el.className = 'makerTitleDistance'; // 设置样式
+    el.innerHTML = textTitle;
+    const marker = map.Marker(el, points, { anchor: 'bottom', offset: [0, -76] }) // 渲染
+    _that._self[flag].push(marker)
+  }
+
+  /**扩散圆
+   * @param coords:[jd,wd]
+  */
+  MapUtil.prototype.diffusionCircle = (obj) => {
+    let { coords, flag, isClear } = obj
+    if (!_that._self[flag]) _that._self[flag] = {}
+    if (isClear) _that._self[flag].destroy() //destroy销毁，show(false) 移除
+    let data = [{ position: coords }]
+    _that._self[flag] = map.DiffuseCircle(data, {
+      radius: 10,
+      color: 'rgba(81,217,254)',//扫描扇形的颜色，必须是十六进制或者rgb
+      duration: 30,//圆环与上一个圆环出现的间隔时间。配合speed参数可以调整圆圈的数量
+      speed: 4 //圆环移动速度
+    })
+  }
+
+  /**
+   * 聚合撒点
+   * @param {*} coords 点位数据 geojson  lng lat
+   * @param {*} icon 点位图
+   */
+  MapUtil.prototype.aggregateScatteringPoint = (obj) => {
+    let { coords, icon, flag, isclear, scale, fontColor } = obj;
+    let points = coords.map(item => {
+      item.lng = item.jd;
+      item.lat = item.wd;
+      return item
+    })
+    if (!_that._self[flag]) _that._self[flag] = [];
+    if (isclear) _that.removeElement(flag) //移除聚合
+    let maker = map.clusterLayer(points, {
+      id: flag,
+      size: 18,
+      pixelRange: 60,
+      // gradient:{'1':'#00BFFF','10':'#008000', '100':'#FFA500', '1000':'#FF0000'},//可以自定义图片,把颜色换成图片地址
+      gradient: { '1': icon, '10': icon, '100': icon, '1000': icon },//可以自定义图片,把颜色换成图片地址
+      fontSize: 14,
+      fontColor: fontColor ? fontColor : '#001022',
+      style: 'custom',// spiral（螺旋形状），circle(圆圈)，custom(自定义)
+      image: icon,
+      scale: scale ? scale : 1,
+      // highlightImage:icon,
+      fontFamily: ['Microsoft YaHei']
+    })
+
+    _that._self[flag].push(maker)
+
+    //  聚合的点击一个
+    maker.addEventListener("click", (val) => {
+      _that.openInfoDetail(flag, [val]) //点击打开详情
+    })
+    // 聚合的多个
+    maker.addEventListener("clusterClick", (val) => {
+      _that.openInfoDetail(flag, val) //点击打开详情
+    })
+  };
+
+  /**
+   * 热力图
+   * @param {*} coords 数组
+   */
+  MapUtil.prototype.showHeatDrawing = (res) => {
+    let { coords, flag, isclear, color } = res;
+    if (!_that._self[flag]) _that._self[flag] = [];
+    if (isclear) _that.removeElement(flag) //清除热力
+    let data = {
+      type: 'FeatureCollection',
+      features: []
+    }
+    for (let index = 0; index < coords.length; index++) {
+      const item = coords[index];
+      let jd = item.lng || item.jd;
+      let wd = item.lat || item.wd;
+      let mag = item.count <= 10 ? 1.4 : (item.count > 10 && item.count <= 50) ? 1.6 : 1.9;
+      let obj = {
+        properties: { mag },
+        type: 'Feature',
+        geometry: { type: 'Point', coordinates: [jd, wd, 0.1] }
+      }
+      data.features.push(obj)
+    }
+    let colors = { '0': 'rgba(23,102,172,0)', '0.5': 'rgb(209,229,240)', '1': 'rgb(178,24,43)' }
+    if (color) colors = { '0': color[0], '0.5': color[1], '1': color[2] }
+    let heartmap = map.HeatMap(data, { colors })
+    _that._self[flag].push(heartmap)
+  };
+
+
+  // 清除所有
+  MapUtil.prototype.removeAll = () => {
+    for (let key in _that._self) {
+      if (key != 'rx' && key != 'gpsZb' && !key.includes('rxTitle')) {
+        let list = _that._self[key]
+        for (let i = 0; i < list.length; i++) {
+          const el = list[i];
+          if (el && typeof el == 'object') el.destroy() //destory()销毁 , show(false) false:隐藏  true ：展示
+        }
+        _that._self[key] = [];
+      }
+    }
+  }
+
+  /**
+   * 删除图层要素
+   * @param {*} layer 唯一标识
+   */
+  MapUtil.prototype.removeElement = (layer) => {
+    //警力装备
+    if (layer == 'gpsZb') {
+      for (let key in _that._self.gpsZb) {
+        let item = _that._self.gpsZb[key]
+        if (item && item.length > 0) {
+          for (let child in item) { item[child].destroy() }
+          _that._self.gpsZb[key] = []
+        }
+      }
+    }
+    if (layer == 'rx') _that.idsBox[layer] = [];
+    // 其他图层
+    if (!_that._self[layer]) return false;
+
+    if (layer !== 'gpsZb') {
+      for (let i = 0; i < _that._self[layer].length; i++) {
+        const el = _that._self[layer][i];
+        el.destroy()//destory()销毁 , show(false) false:隐藏  true ：展示
+      }
+      _that._self[layer] = [];
+
+      // d带标题的撒点
+      let T = layer == 'rx' ? 'rxTitle' : 'Title'
+      let flagT = layer + T;
+      if (!_that._self[flagT]) return false;
+      for (let i = 0; i < _that._self[flagT].length; i++) {
+        const el = _that._self[flagT][i];
+        el.destroy()//destory()销毁 , show(false) false:隐藏  true ：展示
+      }
+      _that._self[flagT] = []
+    }
+  };
+  /**
+   * 删除图层的某个要素
+   * @param {*} layer 唯一标识
+   */
+  MapUtil.prototype.removeElementOne = (layer, id) => {
+    if (!_that.idsBox[layer]) return false;
+    let list = _that.idsBox[layer];
+    list.forEach((el, index) => {
+      if (el == id) {
+        _that.idsBox[layer].splice(index, 1);
+        if (_that._self[layer][index]) _that._self[layer][index].destroy()
+        _that._self[layer].splice(index, 1)
+        if (layer == 'rx') {
+          let flagT = layer + 'rxTitle';
+          if (_that._self[flagT][index]) _that._self[flagT][index].destroy()
+          _that._self[flagT].splice(index, 1)
+          _that.removeGpsZbOverlayById(id) //删除图标
+        }
+      }
+    })
+  };
+
+  // 删除图标装备
+  MapUtil.prototype.removeGpsZbOverlayById = (id) => {
+    if (_that._self.gpsZb[id]) {
+      try {
+        let info = _that._self.gpsZb[id]
+        if (info) {
+          info.forEach(element => { element.destroy() });
+          delete _that._self.gpsZb[id]
+        }
+      } catch (err) { }
+    }
+  }
+  MapUtil.prototype.DrawDel = (id) => {
+    const draw = map.specialDraw({
+      lineWidth: 2,
+    });
+  }
+
+
+  // 绘制数据的初始化
+  MapUtil.prototype.Drawplot = (color) => {
+    const { point, line, polygon, circle, rectangle, geoJson, remove, enableEdit } = map.draw({
+      lineWidth: 2,
+      lineColor: 'rgb(32, 233, 156)',
+      fillColor: 'rgba(233,168,32,0.5)',
+      color: 'rgba(233,168,32,1)',
+      pixelSzie: 0,
+    })
+    _that._CustomDraw = { point, line, polygon, circle, rectangle, geoJson, remove, enableEdit }
+
+  }
+  /**
+   * 绘制工具
+   * @param {*} type 绘制形状
+   * (point 点, line 线, circle 圆, polygon 多边形, rectangle 矩形) ,
+   * geoJson:根据geojson回显图
+   */
+  MapUtil.prototype.plot = (res, resFun) => {
+    let { flag, color, linecolor, type, coords } = res
+    if (!_that._self[flag]) _that._self[flag] = [];
+    if (res.isclear) _that.removePlot(flag); //移除绘制工具
+    if (res.isclear && (res.type == 'polygon' || res.type == 'line')) _that.removeEara(flag); //移除回显的面和线条
+    switch (type) {
+      case 'point':
+        _that._CustomDraw.point((val) => { _that.handlePlot(val, type, flag, resFun) })
+        break;
+      case 'rectangle':
+        _that._CustomDraw.rectangle((val) => { _that.handlePlot(val, type, flag, resFun) })
+        break;
+      case 'circle':
+        _that._CustomDraw.circle((val) => { _that.handlePlot(val, type, flag, resFun) })
+        break;
+      case 'polygon':
+        _that._CustomDraw.polygon((val) => { _that.handlePlot(val, type, flag, resFun) }, {
+          fillColor: color || 'rgba(233,168,32,0.5)',
+          lineColor: linecolor || 'rgba(233,168,32,1)',
+        })
+        break;
+      case 'line':
+        _that._CustomDraw.line((val) => { _that.handlePlot(val, type, flag, resFun) })
+        break;
+      case 'geoJson'://返回面
+        let json = {
+          type: 'FeatureCollection',
+          features: [{
+            type: 'Feature',
+            geometry: {
+              type: 'Polygon',
+              coordinates: coords // coords 是三维数组
+            },
+            id: flag,
+            properties: {
+              fillColor: color || 'rgba(233,168,32,1)',
+              lineColor: linecolor || 'rgba(233,168,32,1)',
+            }
+          }],
+        }
+        _that._CustomDraw.geoJson(json, (data) => { _that.handlePlot(data, type, flag, resFun) })
+        break;
+      // 新增绘制类型 - 基础图形
+      case 'arc':
+        _that._CustomDraw.arc((val) => { _that.handlePlot(val, type, flag, resFun) });
+        break;
+      case 'curve':
+        _that._CustomDraw.curve((val) => { _that.handlePlot(val, type, flag, resFun) });
+        break;
+      case 'ellipse':
+        _that._CustomDraw.ellipse((val) => { _that.handlePlot(val, type, flag, resFun) });
+        break;
+      case 'lune':
+        _that._CustomDraw.lune((val) => { _that.handlePlot(val, type, flag, resFun) });
+        break;
+      case 'sector':
+        _that._CustomDraw.sector((val) => { _that.handlePlot(val, type, flag, resFun) });
+        break;
+      case 'closedCurve':
+        _that._CustomDraw.closedCurve((val) => { _that.handlePlot(val, type, flag, resFun) });
+        break;
+      // 新增绘制类型 - 箭头类型
+      case 'doubleArrow':
+        _that._CustomDraw.doubleArrow((val) => { _that.handlePlot(val, type, flag, resFun) });
+        break;
+      case 'straightArrow':
+        _that._CustomDraw.straightArrow((val) => { _that.handlePlot(val, type, flag, resFun) });
+        break;
+      case 'fineArrow':
+        _that._CustomDraw.fineArrow((val) => { _that.handlePlot(val, type, flag, resFun) });
+        break;
+      // 新增绘制类型 - 战术标记
+      case 'assaultDirection':
+        _that._CustomDraw.assaultDirection((val) => { _that.handlePlot(val, type, flag, resFun) });
+        break;
+      case 'attackArrow':
+        _that._CustomDraw.attackArrow((val) => { _that.handlePlot(val, type, flag, resFun) });
+        break;
+      case 'tailedAttackArrow':
+        _that._CustomDraw.tailedAttackArrow((val) => { _that.handlePlot(val, type, flag, resFun) });
+        break;
+      case 'squadCombat':
+        _that._CustomDraw.squadCombat((val) => { _that.handlePlot(val, type, flag, resFun) });
+        break;
+      case 'tailedSquadCombat':
+        _that._CustomDraw.tailedSquadCombat((val) => { _that.handlePlot(val, type, flag, resFun) });
+        break;
+      default:
+        console.error(`不支持的绘制类型: ${type}`);
+        break;
+    }
+  }
+  /**
+   * 处理自定义数据
+   * @param {*} val 返回数据
+   * @param {*} type 类型
+   * @param {*} flag 唯一标识
+   * @param {*} resFun 回调
+   */
+  // 校验
+  MapUtil.prototype.handlePlot = (val, type, flag, resFun) => {
+    _that._self[flag].push(val.id)
+    let coords = val.positionData; //绘制区域
+    resFun(coords, type, flag, val);
+  }
+
+  /**
+   * 移除绘制工具
+   * @param {*} flag 唯一标识
+   */
+  MapUtil.prototype.removePlot = (flag) => {
+    if (!_that._self[flag]) return false;
+    _that._self[flag].forEach(v => {
+      _that._CustomDraw.remove(v)
+    })
+  }
+  /**
+   * 移除绘制面
+   * @param {*} flag 唯一标识
+   */
+  MapUtil.prototype.removeEara = (flag) => {
+    _that._CustomDraw.remove(flag)
+    _that.removePlot(flag)
+  }
+  /**
+   * 创建线
+   * @param {*} type 回显形状
+   * (solid 实线, dash 虚线, FlowColor 彩虹线, RoadLine 流线
+   */
+  MapUtil.prototype.createLine = (res) => {
+    let { type, coords, isclear, flag, color, width } = res;
+    if (!coords) return false; // coords 是数组对象，可以同时撒多条数据
+    if (!_that._self[flag]) _that._self[flag] = [];
+    if (isclear) _that.removeElement(flag); //移除回显的线条
+    let data = coords.map((item, index) => {
+      return {
+        position: item.coords[0], //二维数组
+        text: '',
+        id: index,
+        userData: {
+          name: item.text
+        }
+      }
+    })
+    let line = map.createLine(data, {
+      color: color ? color : 'rgba(20, 237, 245,1)',
+      width: width ? width : 8,
+      type,
+      highlightColor: 'red',
+      labelOption: {
+        pixelOffset: [0, -1],
+        allShow: false,
+        type: 'text',
+        fontColor: 'rgba(20, 237, 245,1)'
+      }
+    })
+    _that._self[flag].push(line)
+  }
+
+
+
+
+
+  /**
+   * 回显平面- 圆 - 多边形 - 矩形
+   * @param {*} type 回显形状
+   * type: 'polygon', 'rectangle
+      coords = [{
+        position:[[[jd,wd],[jd,wd] ---]], //三维数组
+        text,//展示的文字
+        id, //唯一标识
+        FID, //渲染颜色的标识
+        userData:{} //存储数据
+    }]
+
+   * type:circle
+     coords:[jd,wd]  radius:半径
+
+   * @param {*} text 展示的文字
+   */
+  MapUtil.prototype.echoPlane = (res) => {
+    let { type, coords, fontColor, fontSize, text = '', radius = 0, isclear, flag, id = 1, color, linecolor, pyl = [0, 0], rotation, rotationOrigin } = res;
+    if (!coords) return;
+    if (isclear) _that.removeElement(flag)
+    if (!_that._self[flag]) _that._self[flag] = [];
+    let color1 = color ? color : 'rgba(29,237,245,0.6)'
+    let linecolor1 = linecolor ? linecolor : 'rgba(29,237,245,0.6)'
+    let style = {
+      color: color1,
+      outLineColor: linecolor1,
+      outLineWidth: 2,
+      highlightColor: 'rgba(255,0,0,0.5)',
+      labelOption: {
+        pixelOffset: pyl,
+        allShow: true,
+        fontColor: fontColor ? fontColor : '#ffffff',
+        fontSize: fontSize ? fontSize : '12px',
+        // 添加文字旋转度数设置
+        rotation: rotation || 10,
+        // 旋转原点
+        rotationOrigin: rotationOrigin || 'center'
+      }
+    }
+    let maker;
+    // 圆
+    if (type == 'circle') {
+      let params = [{ center: coords, radius, text, id }]
+      maker = map.createCircle(params, style);
+    }
+
+    // 矩形
+    if (type == 'rectangle') maker = map.createRectangle(coords, style);
+
+    // 多边形
+    if (type == 'polygon') maker = map.createPolygon(coords, style);
+    _that._self[flag].push(maker);
+
+    maker.addEventListener("click", (val) => {
+      if (flag == 'xfq') {
+        maker.highlight(val.id) //高亮展示
+        emitter.emit('showXFQinfo', val)
+        if (val.id == _that.lightHeight) {
+          _that.isCheck = !_that.isCheck
+          if (_that.isCheck) {
+            maker.highlight(0); //取消高亮展示
+            emitter.emit('showXFQinfo', null)
+          } else {
+            emitter.emit('showXFQinfo', val)
+          }
+        }
+        _that.lightHeight = val.id
+      }
+      if (flag == 'zdxl_fzyc') {
+        emitter.emit('showFzycInfo', { info: val, type: true })
+      }
+    })
+  }
+
+
+  // 分割线展示文字
+  MapUtil.prototype.gapText = (obj) => {
+    let { points, text, flag } = obj
+    _that.makerShowTitle({}, points, flag, text) //展示标题
+  }
+
+  /**
+   * 轨迹回放
+   * @param {*} coords 轨迹坐标.二维数组[[104.03640684556253,30.7415801286654],[103.98021233220163,30.6555411499294],[103.85766040251299,30.58094579138167]]
+   * @param {*} isClear 是否清除上一次的记录
+   */
+  MapUtil.prototype.displayLineAnimation = (res) => {
+    let { coords, isClear, flag } = res
+    if (!coords) return;
+    if (!_that._self[flag]) _that._self[flag] = [];
+    if (isClear && _that._self[flag]) _that.removeElement(flag); //destroy 移除,start 播放,pause 暂停
+    let lineString = getUUid().slice(3, 5)
+    const data = [
+      {
+        position: coords,
+        text: '实线',
+        id: lineString,
+        userData: { name: '测试1' }
+      }
+    ]
+    const track = map.trajectoryRealtime(data, {
+      color: '#28F', //轨迹背景颜色
+      width: 8,
+      image: 'images/car.png',
+      speed: 80, // 单位 m/s
+      imageWidth: 20,
+      imageHeight: 40,
+      isShowLine: false, //轨迹线是否显示
+      isAgain: false,//轨迹运动是否重复,
+      traveledColor: '#32b1fb' //运动轨迹颜色
+    })
+    track.start()
+
+    track.on('length', (data) => {
+      let obj = { flag }
+      if (data && data[0].percent == 0) {
+        obj.icon = require('@/assets/point/start.png') // 开始
+        let item = data[0].position[0]
+        obj.coords = [{ jd: item[0], wd: item[1] }]
+        _that.makerSki(obj)
+      }
+      if (data && data[0].percent == 99) {
+        let len = data[0].position.length
+        let val = data[0].position[len - 1]
+        obj.coords = [{ jd: val[0], wd: val[1] }]
+        obj.icon = require('@/assets/point/end.png') // 结束
+        _that.makerSki(obj)
+      }
+    })
+    _that._self[flag].push(track)
+  }
+
+  // 移除轨迹
+  MapUtil.prototype.removeTrajectory = (flag) => {
+    if (_that._self[flag]) {
+      _that._self[flag].destroy();
+      _that._self[flag] = null
+    }
+  }
+
+
+  /**geojson 创建边界
+     * let data = {
+     * type: "FeatureCollection",
+     * features: [
+      *  {
+            geometry: {
+              type: "Polygon",
+              coordinates: [it.coordinates]
+            },
+            properties: {
+            },
+            type: "Feature",
+          }
+     * ]
+     };
+    */
+  MapUtil.prototype.createBoundarys = (res) => {
+    let { data, color, fillColor, borderColor, label, text, labelPosition } = res
+    if (!data) return false;
+    // 使用传入的颜色参数，如果没有则使用默认值
+    const fillColorValue = fillColor || 'rgba(27, 205, 211, 0.3)';
+    const borderColorValue = borderColor || '#cf1010';
+    const highlightColorValue = color || 'red';
+    // 创建多边形
+    const polygon = map.createPolygon(data, {
+      color: fillColorValue,
+      outLineColor: borderColorValue,
+      outLineWidth: 5,
+      highlightColor: highlightColorValue,
+      type: 'solid',
+      labelOption: {
+        content: label || text || '', // 标签文字内容
+        position: labelPosition || 'center', // 标签位置
+        pixelOffset: [2, 0],
+        allShow: true, // 设置为true以显示所有标签
+        fontColor: '#ffffff',
+        fontSize: 14,
+        fontWeight: 'bold',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        padding: [5, 10],
+        borderRadius: 4
+      }
+    })
+
+    // 将多边形添加到已创建的边界列表中
+    if (!_that.boundaryList) {
+      _that.boundaryList = [];
+    }
+    _that.boundaryList.push(polygon);
+
+    // 如果是第一个添加的区域，则飞过去
+    if (_that.boundaryList.length === 1) {
+      polygon.flyTo();
+    }
+  }
+  // 移除边界
+  MapUtil.prototype.removeBj = (res) => {
+    // 移除单个polygonGeo（为了向后兼容）
+    if (_that.polygonGeo) {
+      _that.polygonGeo.destroy();
+      _that.polygonGeo = null;
+    }
+
+    // 移除所有添加到boundaryList中的多边形
+    if (_that.boundaryList && _that.boundaryList.length > 0) {
+      _that.boundaryList.forEach(polygon => {
+        polygon.destroy();
+      });
+      _that.boundaryList = [];
+    }
+  }
+
+  // 打开详情弹窗
+  MapUtil.prototype.openInfoDetail = (flag, data) => {
+    console.log(flag, data);
+
+    switch (flag) {
+      case 'home_yj_map':
+        console.log(data);
+        emitter.emit("showHomeYJ", data);
+        break;
+      case 'home_yj_detail':
+        console.log(data);
+        emitter.emit("showHomeWarning", data);
+        break;
+      case 'jczMap_hm':
+        console.log(data);
+        emitter.emit("showJcz", data);
+        break;
+      case 'sp':
+        console.log(data);
+        emitter.emit("showGzyInfo", data);
+        break;
+    }
+  }
+  MapUtil.prototype.load = () => {
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+}
+
+// 获取uuid 作为边界图层ID
+function getUUid() {
+  var list = [];
+  var hexDigits = "0123456789abcdefghijklmnopqrstuvwxyz";
+  for (var i = 0; i < 32; i++) {
+    list[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+  }
+  list[14] = "4";
+  list[19] = hexDigits.substr((list[19] & 0x3) | 0x8, 1);
+  list[8] = list[13] = list[18] = list[23];
+  let uuid = list.join("");
+  return uuid;
+}
+
+

src/components/GdMap/mapUtil copy.js

@@ -0,0 +1,831 @@
+import emitter from "@/utils/eventBus.js";
+
+export function MapUtil(map) {
+  let _that = this;
+  _that.mMap = map; //地图对象
+  _that._self = {};//图层对象
+  _that._CustomDraw = null;//自定义绘图
+  _that.polygonGeo = null;//边界
+  _that.idsBox = {} //存放id的容器（需要某个标记单个删除的时候存储）
+  _that.isCheck = false
+  /**
+   * 设置地图中心点以
+   * @param {*} location 中心坐标 [jd,wd]
+   * @param {*} zoomLevel 层级  10
+   */
+  MapUtil.prototype.setMapCenter = (location, zoomLevel) => {
+    map.mapboxGLMap.setCenter(location);
+    map.mapboxGLMap.setZoom(zoomLevel);
+  };
+
+  /**
+   * 撒点.鼠标滑动展示内容
+   * @param {*} coords 坐标 geojson
+   * @param {*} icon 图标
+   * @param {*} flag 标识
+   */
+  MapUtil.prototype.showPoint = (res) => {
+    let { coords, icon, flag, iconH } = res
+    if (!coords) return;
+    if (!_that._self[flag]) _that._self[flag] = [];
+    let pointList = coords.map((it, index) => {
+      let text = it.kfdMc || it.wzBc || it.gajgmc || it.xm || it.jczmc;
+      let obj = {
+        position: [it.jd, it.wd],
+        userData: { deviceSn: 'text' + index, area: text },
+        id: it.id,
+        text: text,
+        data: it
+      }
+      if (it.jd && it.wd) return obj;
+    });
+
+    const point = map.createdPoint(pointList, {
+      image: icon,//对应上面的图片名称
+      scale: 1,
+      highlightImage: iconH ? iconH : icon,//高亮图标
+      labelOption: {
+        pixelOffset: [0, -2],
+        allShow: false,
+        fontSize: '18px',
+        fontWeight: 600,
+        fontColor: '#000000'
+      }
+    })
+    _that._self[flag].push(point)
+
+
+    point.addEventListener("click", (val) => {
+      let data = val.data ? JSON.parse(val.data) : {};
+      // point.highlight(data.id) //高亮展示选中的点位
+      _that.openInfoDetail(flag, [data]) //点击打开详情
+    })
+  }
+
+  /**
+   * 撒点
+   * @param {*} coords 坐标 geojson
+   * @param {*} icon 图标
+   * @param {*} flag 标识
+   * @param {*} showTitle 是否展示标题
+   */
+
+  MapUtil.prototype.makerSki = (res) => {
+    let { coords, icon, flag, showTitle } = res
+    if (!coords) return;
+    if (!_that._self[flag]) _that._self[flag] = []; //存储地图标识的容器
+    if (!_that.idsBox[flag]) _that.idsBox[flag] = []; //存储id的容器
+    if (flag == 'rx') {
+      _that.handlePolice(coords, icon, flag, showTitle)
+    } else {
+      coords.forEach(item => {
+        let el = document.createElement("img");
+        el.src = item.icon || icon;
+        el.style.width = flag == 'kfd' ? '32px' : "25px";
+        if (flag.includes('jczMap_')) el.style.width = '40px';
+        if (showTitle) _that.makerShowTitle(item, [item.jd, item.wd], flag) //展示标题
+        const marker = map.Marker(el, [item.jd, item.wd], { anchor: 'bottom', offset: [0, 0] })
+        el.addEventListener("click", () => {
+          _that.openInfoDetail(flag, item) //点击打开详情
+        })
+        _that._self[flag].push(marker)
+        _that.idsBox[flag].push(item.id)
+      });
+    }
+  };
+
+
+  // 警力处理展示
+  MapUtil.prototype.handlePolice = (coords, icon, flag, showTitle) => {
+    // 01-大型车辆-DXCL， 02-小型车辆=XXCL，03-摩托车-MTC，04-其他车辆-QTCL，05-重型车辆-ZXCL，06-风控车-FKC，07-巡逻车-XLC，08-装甲车-ZJC
+    coords.forEach(item => {
+      let el = document.createElement("img");
+      let jcIcon = require(`@/assets/point/police-car-bx.png`);
+      switch (item.lx) {
+        case '01': // 特警
+          jcIcon = require(`@/assets/point/specialPolice.png`);
+          break;
+        case '02': // 交警
+          jcIcon = require(`@/assets/point/trafficPolice.png`);
+          break;
+        case '03': // 派出所民警
+          jcIcon = require(`@/assets/point/peoplePolice.png`);
+          break;
+        default: // 默认图标
+          jcIcon = require(`@/assets/point/specialPolice.png`);
+          break;
+      }
+      if (item.zzlx == 1) jcIcon = require(`@/assets/point/by.png`); //便衣
+      let cllxList = item.cllx ? item.cllx.split(',') : [];
+
+      if ((cllxList.includes('03') || cllxList.includes('04')) && item.lx == '02') jcIcon = require(`@/assets/point/xljmtc.png`); //交警-摩托车
+      if ((cllxList.includes('03') || cllxList.includes('04')) && item.lx == '01') jcIcon = require(`@/assets/point/tjc.png`); //特警-摩托车
+      if (cllxList.includes('08') || cllxList.includes('06')) jcIcon = require(`@/assets/point/zjc.png`); //装甲车
+
+      el.src = jcIcon;
+      let isShoeCar = cllxList.includes('03') || cllxList.includes('08') //车辆类型
+      // el.style.width = isShoeCar ? '38px':"25px"; //图片大小
+      // if(cllxList.includes('08')) el.style.height = '40px'
+      if (showTitle) _that.makerShowTitle(item, [item.jd, item.wd], flag) //展示标题
+      _that.shouIcon(item, [item.jd, item.wd]); // 展示装备图标
+
+      let offset = isShoeCar ? [-10, 0] : [0, 0];
+      if (cllxList.includes('08')) offset = [-12, -10]
+      const marker = map.Marker(el, [item.jd, item.wd], { anchor: 'bottom', offset: offset })
+      el.addEventListener("click", () => {
+        _that.openInfoDetail(flag, item) //点击打开详情
+      })
+      _that._self[flag].push(marker)
+      _that.idsBox[flag].push(item.id)
+    });
+  }
+
+  // 信息框展示
+  MapUtil.prototype.makerShowTitle = (item, points, flag, text) => {
+    let T = flag == 'rx' ? 'rxTitle' : 'Title'
+    let flagT = flag + T;
+    if (!_that._self[flagT]) _that._self[flagT] = [];
+
+    // 展示名字
+    let textTitle = item.jzMc ? item.jzMc : item.fzrXm + '警组';
+    if (flag == 'sbwz_car' || flag == 'sbwz_sb' || flag == 'sbwz_zfjly') textTitle = item.sbmc;
+    if (flag == 'gapText') textTitle = text;
+
+    // 设置样式
+    const el = document.createElement('div');
+    el.className = 'makerTitle';
+    if (flag == 'sbwz_car' || flag == 'sbwz_sb' || flag == 'sbwz_zfjly') el.className = 'makerTitlezb';
+    if (flag == 'rx') {
+      if (item.xfzt == '0') el.classList.add('makerTitleLine');
+      else if (item.xfzt == '1') el.classList.add('makerTitlecj');
+      else el.classList.add('makerTitleUnLine');
+    }
+    if (flag == 'gapText') el.className = 'makerTitleGapText';
+
+    // 渲染
+    el.innerHTML = textTitle;
+    const marker = map.Marker(el, points, { anchor: 'bottom', offset: [0, -50] })
+    _that._self[flagT].push(marker)
+  }
+
+
+
+  /**
+   * 装备图标
+   * @param {点位数据} data
+   * @param {点} point
+   */
+  MapUtil.prototype.shouIcon = (data, point) => {
+    if (!_that._self.gpsZb) _that._self.gpsZb = []
+    var qxIcon = require(`@/assets/point/qx.png`); //qixie
+    var zfjlyIcon = require(`@/assets/point/interphone.png`); // 对讲机
+    var clIcon = require(`@/assets/point/car.png`); // 车辆
+    let jyqx = typeof data.jyqx == "string" ? JSON.parse(data.jyqx) : data.jyqx ? data.jyqx : [];
+    let txzb = typeof data.txzb == "string" ? JSON.parse(data.txzb) : data.txzb ? data.txzb : [];
+    let pbcl = typeof data.pbcl == "string" ? JSON.parse(data.pbcl) : data.pbcl ? data.pbcl : [];
+    let list = []
+    let cl = (pbcl && pbcl.length > 0) ? true : false; // 车辆
+    let zb = (txzb && txzb.length > 0) ? true : false; // 智能装备
+    let qx = (jyqx && jyqx.length > 0) ? true : false; // 警用器械
+    if (zb) {
+      let el = document.createElement("img");
+      el.style.width = "15px"
+      el.src = zfjlyIcon;
+      const makerZb = map.Marker(el, point, { anchor: 'bottom', offset: [20, -26] })
+      list.push(makerZb)
+    }
+    if (qx) {
+      let elqx = document.createElement("img");
+      elqx.style.width = "15px"
+      elqx.src = qxIcon;
+      const makerQx = map.Marker(elqx, point, { anchor: 'bottom', offset: [20, -10] })
+      list.push(makerQx)
+    }
+    if (cl) {
+      let elcl = document.createElement("img");
+      elcl.style.width = "20px"
+      elcl.src = clIcon;
+      const makerCl = map.Marker(elcl, point, { anchor: 'bottom', offset: [20, 2] })
+      list.push(makerCl)
+    }
+    _that._self.gpsZb[data.id] = list
+  }
+
+
+  // 自定义展示
+  MapUtil.prototype.zdySquire = (obj) => {
+    let { points, flag, distance } = obj
+    if (!_that._self[flag]) _that._self[flag] = [];
+    let textTitle = '距离：' + distance; // 展示名字
+    const el = document.createElement('div');
+    el.className = 'makerTitle';
+    if (flag == 'distance') el.className = 'makerTitleDistance'; // 设置样式
+    el.innerHTML = textTitle;
+    const marker = map.Marker(el, points, { anchor: 'bottom', offset: [0, -76] }) // 渲染
+    _that._self[flag].push(marker)
+  }
+
+  /**扩散圆
+   * @param coords:[jd,wd]
+  */
+  MapUtil.prototype.diffusionCircle = (obj) => {
+    let { coords, flag, isClear } = obj
+    if (!_that._self[flag]) _that._self[flag] = {}
+    if (isClear) _that._self[flag].destroy() //destroy销毁，show(false) 移除
+    let data = [{ position: coords }]
+    _that._self[flag] = map.DiffuseCircle(data, {
+      radius: 10,
+      color: 'rgba(81,217,254)',//扫描扇形的颜色，必须是十六进制或者rgb
+      duration: 30,//圆环与上一个圆环出现的间隔时间。配合speed参数可以调整圆圈的数量
+      speed: 4 //圆环移动速度
+    })
+  }
+
+  /**
+   * 聚合撒点
+   * @param {*} coords 点位数据 geojson  lng lat
+   * @param {*} icon 点位图
+   */
+  // MapUtil.prototype.aggregateScatteringPoint = (obj) => {
+  //   let { coords, icon, flag, isclear, scale, fontColor } = obj;
+
+  //   // 数据验证和过滤
+  //   if (!coords || !Array.isArray(coords)) {
+  //     console.warn('聚合撒点数据格式错误，coords必须是数组');
+  //     return;
+  //   }
+
+  //   // 过滤有效坐标点并转换格式
+  //   let points = coords
+  //     .filter(item => {
+  //       // 确保有有效的坐标值
+  //       return item && typeof item.jd === 'number' && typeof item.wd === 'number' &&
+  //         !isNaN(item.jd) && !isNaN(item.wd) &&
+  //         item.jd >= -180 && item.jd <= 180 && item.wd >= -90 && item.wd <= 90;
+  //     })
+  //     .map(item => {
+  //       // 创建新对象而不是修改原始对象
+  //       return {
+  //         ...item,
+  //         lng: item.jd,
+  //         lat: item.wd
+  //       };
+  //     });
+
+  //   // 如果没有有效点，不进行后续操作
+  //   if (points.length === 0) {
+  //     console.warn('没有找到有效的坐标点用于聚合');
+  //     return;
+  //   }
+
+  //   if (!_that._self[flag]) _that._self[flag] = [];
+  //   if (isclear) _that.removeElement(flag) //移除聚合
+
+  //   try {
+  //     let maker = map.clusterLayer(points, {
+  //       id: flag,
+  //       size: 18,
+  //       pixelRange: 60,
+  //       // gradient:{'1':'#00BFFF','10':'#008000', '100':'#FFA500', '1000':'#FF0000'},//可以自定义图片,把颜色换成图片地址
+  //       gradient: { '1': icon, '10': icon, '100': icon, '1000': icon },//可以自定义图片,把颜色换成图片地址
+  //       fontSize: 14,
+  //       fontColor: fontColor ? fontColor : '#001022',
+  //       style: 'custom',// spiral（螺旋形状），circle(圆圈)，custom(自定义)
+  //       image: icon,
+  //       scale: scale ? scale : 1,
+  //       // highlightImage:icon,
+  //       fontFamily: ['Microsoft YaHei']
+  //     });
+
+  //     _that._self[flag].push(maker);
+
+  //     //  聚合的点击一个
+  //     maker.addEventListener("click", (val) => {
+  //       _that.openInfoDetail(flag, [val]) //点击打开详情
+  //     });
+  //     // 聚合的多个
+  //     maker.addEventListener("clusterClick", (val) => {
+  //       _that.openInfoDetail(flag, val) //点击打开详情
+  //     });
+  //   } catch (error) {
+  //     console.error('创建聚合图层时出错:', error);
+  //     console.error('问题数据样本:', points.slice(0, 5));
+  //   }
+  // };
+  MapUtil.prototype.aggregateScatteringPoint = (obj) => {
+    let { coords, icon, flag, isclear, scale, fontColor } = obj;
+    let points = coords.map(item => {
+      item.lng = item.jd;
+      item.lat = item.wd;
+      return item
+    })
+    if (!_that._self[flag]) _that._self[flag] = [];
+    if (isclear) _that.removeElement(flag) //移除聚合
+    let maker = map.clusterLayer(points, {
+      id: flag,
+      size: 18,
+      pixelRange: 60,
+      // gradient:{'1':'#00BFFF','10':'#008000', '100':'#FFA500', '1000':'#FF0000'},//可以自定义图片,把颜色换成图片地址
+      gradient: { '1': icon, '10': icon, '100': icon, '1000': icon },//可以自定义图片,把颜色换成图片地址
+      fontSize: 14,
+      fontColor: fontColor ? fontColor : '#001022',
+      style: 'custom',// spiral（螺旋形状），circle(圆圈)，custom(自定义)
+      image: icon,
+      scale: scale ? scale : 1,
+      // highlightImage:icon,
+      fontFamily: ['Microsoft YaHei']
+    })
+
+    _that._self[flag].push(maker)
+
+    //  聚合的点击一个
+    maker.addEventListener("click", (val) => {
+      _that.openInfoDetail(flag, [val]) //点击打开详情
+    })
+    // 聚合的多个
+    maker.addEventListener("clusterClick", (val) => {
+      _that.openInfoDetail(flag, val) //点击打开详情
+    })
+  };
+  /**
+   * 热力图
+   * @param {*} coords 数组
+   */
+  MapUtil.prototype.showHeatDrawing = (res) => {
+    let { coords, flag, isclear, color } = res;
+    if (!_that._self[flag]) _that._self[flag] = [];
+    if (isclear) _that.removeElement(flag) //清除热力
+    let data = {
+      type: 'FeatureCollection',
+      features: []
+    }
+    for (let index = 0; index < coords.length; index++) {
+      const item = coords[index];
+      let jd = item.lng || item.jd;
+      let wd = item.lat || item.wd;
+      let mag = item.count <= 10 ? 1.4 : (item.count > 10 && item.count <= 50) ? 1.6 : 1.9;
+      let obj = {
+        properties: { mag },
+        type: 'Feature',
+        geometry: { type: 'Point', coordinates: [jd, wd, 0.1] }
+      }
+      data.features.push(obj)
+    }
+    let colors = { '0': 'rgba(23,102,172,0)', '0.5': 'rgb(209,229,240)', '1': 'rgb(178,24,43)' }
+    if (color) colors = { '0': color[0], '0.5': color[1], '1': color[2] }
+    let heartmap = map.HeatMap(data, { colors })
+    _that._self[flag].push(heartmap)
+  };
+
+
+  // 清除所有
+  MapUtil.prototype.removeAll = () => {
+    for (let key in _that._self) {
+      if (key != 'rx' && key != 'gpsZb' && !key.includes('rxTitle')) {
+        let list = _that._self[key]
+        for (let i = 0; i < list.length; i++) {
+          const el = list[i];
+          if (el && typeof el == 'object') el.destroy() //destory()销毁 , show(false) false:隐藏  true ：展示
+        }
+        _that._self[key] = [];
+      }
+    }
+  }
+
+  /**
+   * 删除图层要素
+   * @param {*} layer 唯一标识
+   */
+  MapUtil.prototype.removeElement = (layer) => {
+    //警力装备
+    if (layer == 'gpsZb') {
+      for (let key in _that._self.gpsZb) {
+        let item = _that._self.gpsZb[key]
+        if (item && item.length > 0) {
+          for (let child in item) { item[child].destroy() }
+          _that._self.gpsZb[key] = []
+        }
+      }
+    }
+    if (layer == 'rx') _that.idsBox[layer] = [];
+    // 其他图层
+    if (!_that._self[layer]) return false;
+
+    if (layer !== 'gpsZb') {
+      for (let i = 0; i < _that._self[layer].length; i++) {
+        const el = _that._self[layer][i];
+        el.destroy()//destory()销毁 , show(false) false:隐藏  true ：展示
+      }
+      _that._self[layer] = [];
+
+      // d带标题的撒点
+      let T = layer == 'rx' ? 'rxTitle' : 'Title'
+      let flagT = layer + T;
+      if (!_that._self[flagT]) return false;
+      for (let i = 0; i < _that._self[flagT].length; i++) {
+        const el = _that._self[flagT][i];
+        el.destroy()//destory()销毁 , show(false) false:隐藏  true ：展示
+      }
+      _that._self[flagT] = []
+    }
+  };
+  /**
+   * 删除图层的某个要素
+   * @param {*} layer 唯一标识
+   */
+  MapUtil.prototype.removeElementOne = (layer, id) => {
+    if (!_that.idsBox[layer]) return false;
+    let list = _that.idsBox[layer];
+    list.forEach((el, index) => {
+      if (el == id) {
+        _that.idsBox[layer].splice(index, 1);
+        if (_that._self[layer][index]) _that._self[layer][index].destroy()
+        _that._self[layer].splice(index, 1)
+        if (layer == 'rx') {
+          let flagT = layer + 'rxTitle';
+          if (_that._self[flagT][index]) _that._self[flagT][index].destroy()
+          _that._self[flagT].splice(index, 1)
+          _that.removeGpsZbOverlayById(id) //删除图标
+        }
+      }
+    })
+  };
+
+  // 删除图标装备
+  MapUtil.prototype.removeGpsZbOverlayById = (id) => {
+    if (_that._self.gpsZb[id]) {
+      try {
+        let info = _that._self.gpsZb[id]
+        if (info) {
+          info.forEach(element => { element.destroy() });
+          delete _that._self.gpsZb[id]
+        }
+      } catch (err) { }
+    }
+  }
+
+
+  // 绘制数据的初始化
+  MapUtil.prototype.Drawplot = (color) => {
+    const { point, line, polygon, circle, rectangle, geoJson, remove, enableEdit } = map.draw({
+      lineWidth: 2,
+      lineColor: 'rgba(233,168,32,1)',
+      fillColor: 'rgba(233,168,32,0.5)',
+      color: 'rgba(233,168,32,1)',
+      pixelSzie: 0,
+    })
+    _that._CustomDraw = { point, line, polygon, circle, rectangle, geoJson, remove, enableEdit }
+  }
+  /**
+   * 绘制工具
+   * @param {*} type 绘制形状
+   * (point 点, line 线, circle 圆, polygon 多边形, rectangle 矩形) ,
+   * geoJson:根据geojson回显图
+   */
+  MapUtil.prototype.plot = (res, resFun) => {
+    let { flag, color, linecolor, type, coords } = res
+    if (!_that._self[flag]) _that._self[flag] = [];
+    if (res.isclear) _that.removePlot(flag); //移除绘制工具
+    if (res.isclear && (res.type == 'polygon' || res.type == 'line')) _that.removeEara(flag); //移除回显的面和线条
+    switch (type) {
+      case 'point':
+        _that._CustomDraw.point((val) => { _that.handlePlot(val, type, flag, resFun) })
+        break;
+      case 'rectangle':
+        _that._CustomDraw.rectangle((val) => { _that.handlePlot(val, type, flag, resFun) })
+        break;
+      case 'circle':
+        _that._CustomDraw.circle((val) => { _that.handlePlot(val, type, flag, resFun) })
+        break;
+      case 'polygon':
+        _that._CustomDraw.polygon((val) => { _that.handlePlot(val, type, flag, resFun) }, {
+          fillColor: color || 'rgba(233,168,32,0.5)',
+          lineColor: linecolor || 'rgba(233,168,32,1)',
+        })
+        break;
+      case 'line':
+        _that._CustomDraw.line((val) => { _that.handlePlot(val, type, flag, resFun) })
+        break;
+      case 'geoJson'://返回面
+        let json = {
+          type: 'FeatureCollection',
+          features: [{
+            type: 'Feature',
+            geometry: {
+              type: 'Polygon',
+              coordinates: coords // coords 是三维数组
+            },
+            id: flag,
+            properties: {
+              fillColor: color || 'rgba(233,168,32,1)',
+              lineColor: linecolor || 'rgba(233,168,32,1)',
+            }
+          }],
+        }
+        _that._CustomDraw.geoJson(json, (data) => { _that.handlePlot(data, type, flag, resFun) })
+        break;
+    }
+  }
+  /**
+   * 处理自定义数据
+   * @param {*} val 返回数据
+   * @param {*} type 类型
+   * @param {*} flag 唯一标识
+   * @param {*} resFun 回调
+   */
+  // 校验
+  MapUtil.prototype.handlePlot = (val, type, flag, resFun) => {
+    _that._self[flag].push(val.id)
+    let coords = val.positionData; //绘制区域
+    resFun(coords, type, flag, val);
+  }
+
+  /**
+   * 移除绘制工具
+   * @param {*} flag 唯一标识
+   */
+  MapUtil.prototype.removePlot = (flag) => {
+    if (!_that._self[flag]) return false;
+    _that._self[flag].forEach(v => {
+      _that._CustomDraw.remove(v)
+    })
+  }
+  /**
+   * 移除绘制面
+   * @param {*} flag 唯一标识
+   */
+  MapUtil.prototype.removeEara = (flag) => {
+    _that._CustomDraw.remove(flag)
+    _that.removePlot(flag)
+  }
+  /**
+   * 创建线
+   * @param {*} type 回显形状
+   * (solid 实线, dash 虚线, FlowColor 彩虹线, RoadLine 流线
+   */
+  MapUtil.prototype.createLine = (res) => {
+    let { type, coords, isclear, flag, color, width } = res;
+    if (!coords) return false; // coords 是数组对象，可以同时撒多条数据
+    if (!_that._self[flag]) _that._self[flag] = [];
+    if (isclear) _that.removeElement(flag); //移除回显的线条
+    let data = coords.map((item, index) => {
+      return {
+        position: item.coords[0], //二维数组
+        text: '',
+        id: index,
+        userData: {
+          name: item.text
+        }
+      }
+    })
+    let line = map.createLine(data, {
+      color: color ? color : 'rgba(20, 237, 245,1)',
+      width: width ? width : 8,
+      type,
+      highlightColor: 'red',
+      labelOption: {
+        pixelOffset: [0, -1],
+        allShow: false,
+        type: 'text',
+        fontColor: 'rgba(20, 237, 245,1)'
+      }
+    })
+    _that._self[flag].push(line)
+  }
+
+
+
+
+
+  /**
+   * 回显平面- 圆 - 多边形 - 矩形
+   * @param {*} type 回显形状
+   * type: 'polygon', 'rectangle
+      coords = [{
+        position:[[[jd,wd],[jd,wd] ---]], //三维数组
+        text,//展示的文字
+        id, //唯一标识
+        FID, //渲染颜色的标识
+        userData:{} //存储数据
+    }]
+
+   * type:circle
+     coords:[jd,wd]  radius:半径
+
+   * @param {*} text 展示的文字
+   */
+  MapUtil.prototype.echoPlane = (res) => {
+    let { type, coords, fontColor, fontSize, text = '', radius = 0, isclear, flag, id = 1, color, linecolor } = res;
+    if (!coords) return;
+    if (isclear) _that.removeElement(flag)
+    if (!_that._self[flag]) _that._self[flag] = [];
+    let color1 = color ? color : 'rgba(29,237,245,0.6)'
+    let linecolor1 = linecolor ? linecolor : 'rgba(29,237,245,0.6)'
+    let style = {
+      color: color1,
+      outLineColor: linecolor1,
+      outLineWidth: 2,
+      highlightColor: 'rgba(255,0,0,0.5)',
+      labelOption: {
+        pixelOffset: [0, 0],
+        allShow: true,
+        fontColor: fontColor ? fontColor : '#ffffff',
+        fontSize: fontSize ? fontSize : '12px'
+      }
+    }
+    let maker;
+    // 圆
+    if (type == 'circle') {
+      let params = [{ center: coords, radius, text, id }]
+      maker = map.createCircle(params, style);
+    }
+
+    // 矩形
+    if (type == 'rectangle') maker = map.createRectangle(coords, style);
+
+    // 多边形
+    if (type == 'polygon') maker = map.createPolygon(coords, style);
+    _that._self[flag].push(maker);
+
+    maker.addEventListener("click", (val) => {
+      if (flag == 'xfq') {
+        maker.highlight(val.id) //高亮展示
+        emitter.emit('showXFQinfo', val)
+        if (val.id == _that.lightHeight) {
+          _that.isCheck = !_that.isCheck
+          if (_that.isCheck) {
+            maker.highlight(0); //取消高亮展示
+            emitter.emit('showXFQinfo', null)
+          } else {
+            emitter.emit('showXFQinfo', val)
+          }
+        }
+        _that.lightHeight = val.id
+      }
+      if (flag == 'zdxl_fzyc') {
+        emitter.emit('showFzycInfo', { info: val, type: true })
+      }
+    })
+  }
+
+
+  // 分割线展示文字
+  MapUtil.prototype.gapText = (obj) => {
+    let { points, text, flag } = obj
+    _that.makerShowTitle({}, points, flag, text) //展示标题
+  }
+
+  /**
+   * 轨迹回放
+   * @param {*} coords 轨迹坐标.二维数组[[104.03640684556253,30.7415801286654],[103.98021233220163,30.6555411499294],[103.85766040251299,30.58094579138167]]
+   * @param {*} isClear 是否清除上一次的记录
+   */
+  MapUtil.prototype.displayLineAnimation = (res) => {
+    let { coords, isClear, flag } = res
+    if (!coords) return;
+    if (!_that._self[flag]) _that._self[flag] = [];
+    if (isClear && _that._self[flag]) _that.removeElement(flag); //destroy 移除,start 播放,pause 暂停
+    let lineString = getUUid().slice(3, 5)
+    const data = [
+      {
+        position: coords,
+        text: '实线',
+        id: lineString,
+        userData: { name: '测试1' }
+      }
+    ]
+    const track = map.trajectoryRealtime(data, {
+      color: '#28F', //轨迹背景颜色
+      width: 8,
+      image: 'images/car.png',
+      speed: 80, // 单位 m/s
+      imageWidth: 20,
+      imageHeight: 40,
+      isShowLine: false, //轨迹线是否显示
+      isAgain: false,//轨迹运动是否重复,
+      traveledColor: '#32b1fb' //运动轨迹颜色
+    })
+    track.start()
+
+    track.on('length', (data) => {
+      let obj = { flag }
+      if (data && data[0].percent == 0) {
+        obj.icon = require('@/assets/point/start.png') // 开始
+        let item = data[0].position[0]
+        obj.coords = [{ jd: item[0], wd: item[1] }]
+        _that.makerSki(obj)
+      }
+      if (data && data[0].percent == 99) {
+        let len = data[0].position.length
+        let val = data[0].position[len - 1]
+        obj.coords = [{ jd: val[0], wd: val[1] }]
+        obj.icon = require('@/assets/point/end.png') // 结束
+        _that.makerSki(obj)
+      }
+    })
+    _that._self[flag].push(track)
+  }
+
+  // 移除轨迹
+  MapUtil.prototype.removeTrajectory = (flag) => {
+    if (_that._self[flag]) {
+      _that._self[flag].destroy();
+      _that._self[flag] = null
+    }
+  }
+
+
+  /**geojson 创建边界
+     * let data = {
+     * type: "FeatureCollection",
+     * features: [
+      *  {
+            geometry: {
+              type: "Polygon",
+              coordinates: [it.coordinates]
+            },
+            properties: {
+            },
+            type: "Feature",
+          }
+     * ]
+     };
+    */
+  MapUtil.prototype.createBoundarys = (res) => {
+    let { data, color, fillColor, borderColor } = res
+    if (!data) return false;
+    // 使用传入的颜色参数，如果没有则使用默认值
+    const fillColorValue = fillColor || 'rgba(27, 205, 211, 0.3)';
+    const borderColorValue = borderColor || '#cf1010';
+    const highlightColorValue = color || 'red';
+    // 创建多边形
+    const polygon = map.createPolygon(data, {
+      color: fillColorValue,
+      outLineColor: borderColorValue,
+      outLineWidth: 3,
+      highlightColor: highlightColorValue,
+      type: 'solid',
+      labelOption: {
+        pixelOffset: [2, 0],
+        allShow: false,
+        fontColor: '#ffffff'
+      }
+    })
+
+    // 将多边形添加到已创建的边界列表中
+    if (!_that.boundaryList) {
+      _that.boundaryList = [];
+    }
+    _that.boundaryList.push(polygon);
+
+    // 如果是第一个添加的区域，则飞过去
+    if (_that.boundaryList.length === 1) {
+      polygon.flyTo();
+    }
+  }
+  // 移除边界
+  MapUtil.prototype.removeBj = (res) => {
+    // 移除单个polygonGeo（为了向后兼容）
+    if (_that.polygonGeo) {
+      _that.polygonGeo.destroy();
+      _that.polygonGeo = null;
+    }
+
+    // 移除所有添加到boundaryList中的多边形
+    if (_that.boundaryList && _that.boundaryList.length > 0) {
+      _that.boundaryList.forEach(polygon => {
+        polygon.destroy();
+      });
+      _that.boundaryList = [];
+    }
+  }
+
+  // 打开详情弹窗
+  MapUtil.prototype.openInfoDetail = (flag, data) => {
+    switch (flag) {
+      case 'home_yj_map':
+        console.log(data);
+        emitter.emit("showHomeYJ", data);
+        break;
+      case 'home_yj_detail':
+        console.log(data);
+        emitter.emit("showHomeWarning", data);
+        break;
+    }
+  }
+}
+// 获取uuid 作为边界图层ID
+function getUUid() {
+  var list = [];
+  var hexDigits = "0123456789abcdefghijklmnopqrstuvwxyz";
+  for (var i = 0; i < 32; i++) {
+    list[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+  }
+  list[14] = "4";
+  list[19] = hexDigits.substr((list[19] & 0x3) | 0x8, 1);
+  list[8] = list[13] = list[18] = list[23];
+  let uuid = list.join("");
+  return uuid;
+}
+
+

src/components/fzq/SwitchSysDialog.vue

@@ -0,0 +1,133 @@
+<!--
+ * @Date: 2025-08-06 14:49:49
+ * @Description: 系统切换窗口
+-->
+<template>
+   <!-- append-to-body -->
+    <div class="a">
+
+
+  <el-dialog
+  :model-value="modelValue"
+    class="switch-sys-dialog"
+    modal-class="switch-sys-dialog-modal"
+    :show-close="false"
+    width="75%"
+    align-center
+
+    destroy-on-close
+    @close="handleModalClick"
+  >
+    <div class="switch-sys-dialog__content">
+      <div class="carousel">
+        <div
+          :class="['card-item']"
+          v-for="(item, index) in list"
+          :key="item.value"
+          @click="goPage(item, index)"
+        >
+          <img :src="item.icon" class="card-item__img" />
+          <div class="card-item__label">{{ item.label }}</div>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+     </div>
+</template>
+
+<script setup>
+import fk from '@/assets/images/fk.png'
+import ty from '@/assets/images/ty.png'
+import pcs from '@/assets/images/pcs.png'
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const list = [
+   { label: '俯瞰系统', value: 1, url: `https://tyyy.lz.dsj.xz/overlooking/home`, icon: fk },
+  { label: '统一门户', value: 2, url: 'https://tyyy.lz.dsj.xz/portal/home', icon: ty },
+  { label: '智慧派出所', value: 3, url: 'https://pcs.lz.dsj.xz:9020/index.html', icon: pcs },
+]
+
+const goPage = (item) => {
+  if (item.url) {
+    window.open(item.url, '_self')
+  }
+}
+
+// 处理遮罩点击事件
+const handleModalClick = () => {
+  emit('update:modelValue', false)
+}
+</script>
+
+<style lang="scss">
+
+</style>
+<style lang="scss" scoped>
+.a{
+  ::v-deep(.el-dialog){
+    background-color: transparent !important;
+  }
+}
+body .el-overlay .el-overlay-dialog .el-dialog{
+  background-color: transparent !important;
+}
+.switch-sys-dialog {
+
+  &__content {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    width: inherit;
+    // height: 335px;
+    align-items: center;
+    .carousel {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 40px;
+      width: 100%;
+      height: 100%;
+
+      .card-item {
+        border-radius: 10px;
+        overflow: hidden;
+        cursor: pointer;
+        transition: all 0.25s ease;
+
+        &:hover {
+          transform: scale(1.05);
+          .card-item__label {
+            height: 30px;
+            line-height: 30px;
+            font-size: 16px;
+            color: var(--theme-text-color);
+            font-weight: bold;
+          }
+        }
+
+        &__img {
+          width: 100%;
+          height: auto;
+          object-fit: cover;
+        }
+
+        &__label {
+          height: 25px;
+          line-height: 25px;
+          background-color: #fff;
+          text-align: center;
+          color: var(--text-color-black);
+          transition: all 0.5s ease;
+        }
+      }
+    }
+  }
+}
+
+</style>
+

src/components/fzq/fxq.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="floating-ball" :style="ballStyle" @mousedown="startDrag" @touchstart="startDrag" @click="handleClick">
+    <slot>
+    </slot>
+  </div>
+
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+
+const props = defineProps({
+  // 初始位置
+  initialPosition: {
+    type: Object,
+    default: () => ({ x: 0, y: 0 })
+  },
+  // 是否可拖动
+  draggable: {
+    type: Boolean,
+    default: true
+  },
+  // 自动吸附边缘的阈值
+  snapThreshold: {
+    type: Number,
+    default: 0
+  }
+});
+// watch(() => props.initialPosition, (newVal) => {
+//   position.value = { x: newVal.x, y: newVal.y };
+// },{deep:true})
+const emit = defineEmits(['click']);
+
+const position = ref({ x: props.initialPosition.x, y: props.initialPosition.y });
+const isDragging = ref(false);
+const startPos = ref({ x: 0, y: 0 });
+const startMousePos = ref({ x: 0, y: 0 });
+
+const ballStyle = ref({
+  left: `${position.value.x}px`,
+  top: `${position.value.y}px`,
+  cursor: props.draggable ? 'move' : 'pointer'
+});
+
+// 开始拖动
+const startDrag = (e) => {
+  if (!props.draggable) return;
+
+  isDragging.value = true;
+  startPos.value = { ...position.value };
+
+  // 处理鼠标和触摸事件
+  if (e.type === 'mousedown') {
+    startMousePos.value = { x: e.clientX, y: e.clientY };
+  } else if (e.type === 'touchstart') {
+    startMousePos.value = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+  }
+
+  // 阻止默认行为和冒泡
+  e.preventDefault();
+  e.stopPropagation();
+};
+
+// 处理移动
+const handleMove = (e) => {
+  if (!isDragging.value) return;
+
+  let clientX, clientY;
+  if (e.type === 'mousemove') {
+    clientX = e.clientX;
+    clientY = e.clientY;
+  } else if (e.type === 'touchmove') {
+    clientX = e.touches[0].clientX;
+    clientY = e.touches[0].clientY;
+  }
+
+  const dx = clientX - startMousePos.value.x;
+  const dy = clientY - startMousePos.value.y;
+
+  position.value = {
+    x: startPos.value.x + dx,
+    y: startPos.value.y + dy
+  };
+
+  updatePosition();
+};
+
+// 结束拖动
+const endDrag = () => {
+  if (!isDragging.value) return;
+  isDragging.value = false;
+  snapToEdge();
+};
+
+// 自动吸附到边缘
+const snapToEdge = () => {
+  const windowWidth = window.innerWidth;
+  const windowHeight = window.innerHeight;
+
+  // 检查是否靠近左右边缘
+  if (position.value.x < props.snapThreshold) {
+    position.value.x = 0;
+  } else if (position.value.x > windowWidth - props.snapThreshold) {
+    position.value.x = windowWidth;
+  }
+
+  // 检查是否靠近上下边缘
+  if (position.value.y < props.snapThreshold) {
+    position.value.y = 0;
+  } else if (position.value.y > windowHeight - props.snapThreshold) {
+    position.value.y = windowHeight;
+  }
+
+  updatePosition();
+};
+
+// 更新位置样式
+const updatePosition = () => {
+  ballStyle.value = {
+    ...ballStyle.value,
+    left: `${position.value.x}px`,
+    top: `${position.value.y}px`
+  };
+};
+
+// 点击事件
+const handleClick = (e) => {
+  if (isDragging.value) {
+    // 如果是拖动结束的点击，不触发点击事件
+    isDragging.value = false;
+    return;
+  }
+  emit('click', e);
+};
+
+// 添加事件监听
+onMounted(() => {
+  window.addEventListener('mousemove', handleMove);
+  window.addEventListener('touchmove', handleMove);
+  window.addEventListener('mouseup', endDrag);
+  window.addEventListener('touchend', endDrag);
+});
+
+// 移除事件监听
+onUnmounted(() => {
+  window.removeEventListener('mousemove', handleMove);
+  window.removeEventListener('touchmove', handleMove);
+  window.removeEventListener('mouseup', endDrag);
+  window.removeEventListener('touchend', endDrag);
+});
+</script>
+
+<style scoped>
+.floating-ball {
+  position: fixed;
+  cursor: pointer;
+  width: 50px;
+  padding: 10px;
+  /* height: 50px; */
+  /* border-radius: 50%; */
+  /* background-color: #409eff; */
+  color: white;
+  /* display: flex;
+  justify-content: center;
+  align-items: center; */
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  z-index: 9999;
+  user-select: none;
+  /* transition: all 0.3s ease; */
+  transform: translate(-50%, -50%);
+}
+
+.ball-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.icon {
+  font-size: 24px;
+}
+
+.floating-ball:active {
+  opacity: 0.8;
+}
+</style>

src/components/fzq/iframe.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="iframe-container">
+    <el-dialog class="dialog-container" :model-value="modelValue" width="75%"  :show-close="false" @close="close">
+      <div style="height: 75vh;">
+        <div class="close" @click="close"><el-icon :size="30"><CircleClose /></el-icon></div>
+        <iframe :src="src" frameborder="0" width="100%" height="100%"></iframe>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  }, title: {
+    type: String,
+    default: '提示'
+  }, showFooter: {
+    type: Boolean,
+    default: true
+  }, src: {
+    type: String,
+    default: ''
+  }
+
+})
+const emit = defineEmits(['update:modelValue', 'submit', 'close'])
+const close = () => {
+  emit('update:modelValue', false)
+  emit('close')
+}
+const submit = () => {
+  emit('submit')
+}
+</script>
+
+<style lang="scss" scoped>
+.iframe-container {
+  ::v-deep .el-dialog__header {
+display: none;
+  }
+.close{
+  position: absolute;
+  top: 0px;
+  right: -35px;
+  cursor: pointer;
+  border-radius: 50%;
+  color: #fff;
+}
+  ::v-deep .el-dialog__body {
+    padding: 0 !important;
+  }
+}
+</style>

src/components/fzq/index.vue

@@ -0,0 +1,256 @@
+<template>
+  <Fxq :initial-position="{ x: position.x, y: position.y }" v-if="showFxq" :snapThreshold="50">
+    <div class="badge-container">
+      <div>
+        <div>
+          <el-tooltip effect="dark" content="林小警" placement="left-start">
+            <img style="width: 34px;height: 34px;"
+              @click.stop="skipIframe(`https://tyyy.lz.dsj.xz/embed/home?userId=${userId}&clientKey=${clientKey}&avatar=''`)"
+              class="box-item" src="@/assets/images/streetBi/lxj.png" />
+          </el-tooltip>
+          <el-tooltip effect="dark" content="切换门户" placement="left-start">
+            <img style="width: 34px;height: 34px;" @click.stop="SwitchSysDialogShow = true" class="box-item"
+              src="@/assets/images/streetBi/sst.png" />
+          </el-tooltip>
+          <el-tooltip effect="dark" content="蜂群消息" placement="left-start">
+            <img style="width: 34px;height: 34px; margin-bottom: 14px;"
+              @click.stop="skipIframe('https://fqxt.lz.dsj.xz:9020/fqxt/?source=other')" class="box-item"
+              src="@/assets/images/streetBi/fq.png" />
+          </el-tooltip>
+        </div>
+        <el-badge :value="xxListData.xtxxNumber" class="item badge-top-left">
+          <div class='fxq fxq1' @click.stop="opneMsg('xtxx')">
+            <div class="title">
+              <img src="@/assets/images/streetBi/xtxx.png" />
+              <span>系统消息</span>
+            </div>
+          </div>
+        </el-badge>
+        <el-badge :value="xxListData.tztgNumber" class="item badge-top-left">
+          <div class='fxq fxq2' @click.stop="opneMsg('tztg')">
+            <div class="title">
+              <img src="@/assets/images/streetBi/tztg.png" />
+              <span>通知通报</span>
+            </div>
+          </div>
+        </el-badge>
+      </div>
+    </div>
+  </Fxq>
+  <Iframe v-model='showIframe' :src='src' />
+  <SwitchSysDialog v-model="SwitchSysDialogShow" />
+  <Information v-model='showDialog' :title='title'>
+    <systemMessages :dict="{ BD_D_XXLX, BD_D_XXLY }" :idEntityCard='idEntityCard' :xxlx="showMsgLx" />
+  </Information>
+</template>
+
+<script setup>
+import { ref, nextTick, provide, onMounted, reactive, getCurrentInstance, onUnmounted } from "vue";
+import { queryWdxxPageList, queryWdxxDetail } from '@/api/commit.js'
+import SwitchSysDialog from '@/components/fzq/SwitchSysDialog.vue'
+import systemMessages from '@/components/fzq/systemMessages.vue'
+import Information from '@/components/fzq/information.vue'
+import Fxq from '@/components/fzq/fxq.vue'
+import { getItem } from '@/utils/storage.js'
+import { getCookie } from '@/utils/cookie'
+import Iframe from '@/components/fzq/iframe.vue'
+import emitter from "@/utils/eventBus.js";
+const { proxy } = getCurrentInstance();
+const { BD_D_XXLX, BD_D_XXLY } = proxy.$dict('BD_D_XXLX', 'BD_D_XXLY'); //获取字典
+const position = reactive({
+  x: window.innerWidth - 30,
+  y: window.innerHeight - 160
+})
+const idEntityCard = ref('')
+const xxListData = reactive({
+  xtxxNumber: 0,
+  tztgNumber: 0
+})
+//请求数据
+const handleClick = () => {
+  let promes = {
+    page: 1,
+    rows: 1,
+    jsrid: idEntityCard.value,
+    xxlx: ""
+  }
+  queryWdxxPageList({ ...promes, xxlx: 100 }).then((res) => {
+    xxListData.xtxxNumber = res.total
+  });
+  queryWdxxPageList({ ...promes, xxlx: 200 }).then((res) => {
+    xxListData.tztgNumber = res.total
+  });
+}
+
+const userId = getItem('USERID')
+const clientKey = getCookie('clientKey')
+const SwitchSysDialogShow = ref(false)
+
+const src = ref()
+const showIframe = ref(false)
+const skipIframe = (val) => {
+  src.value = val
+  showIframe.value = true
+}
+const title = ref('系统消息')
+const showDialog = ref(false)
+const showMsgLx = ref('')
+const showFxq = ref(true)
+const opneMsg = (val) => {
+  showDialog.value = true
+  showMsgLx.value = val
+  switch (val) {
+    case 'xtxx':
+      title.value = '系统消息'
+      break;
+    case 'tztg':
+      title.value = '通知通告'
+      break;
+  }
+}
+const intTime = ref(null)
+onMounted(() => {
+  if (window.parent !== window.self) {
+    showFxq.value = false
+  } else {
+    showFxq.value = true
+  }
+  emitter.on("handleClick", () => {
+    idEntityCard.value = getItem('idEntityCard')
+    handleClick()
+    intTime.value = setInterval(() => {
+      handleClick()
+    }, 60000)
+  });
+
+})
+onUnmounted(() => {
+  clearInterval(intTime.value)
+  emitter.off("handleClick")
+})
+</script>
+<style lang="scss" scoped>
+// 蜂群组件样式
+.fxqx {
+  border-radius: 34px;
+  width: 34px;
+  background-color: rgb(1, 127, 245);
+  margin-bottom: 18px;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  .title {
+    height: 34px;
+    line-height: 34px;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+
+    img {
+      margin-left: 9.5px;
+      width: 16px;
+      margin-right: 10px;
+      vertical-align: middle;
+      height: 16px;
+      flex-shrink: 0;
+    }
+
+    span {
+      opacity: 0;
+      transition: opacity 0.2s ease 0.1s;
+      padding-right: 15px;
+    }
+  }
+}
+
+.fxq {
+  border-radius: 34px;
+  width: 34px;
+  transition: width 0.3s ease;
+  background-color: rgb(1, 127, 245);
+  // overflow: hidden;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  .title {
+    height: 34px;
+    line-height: 34px;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+
+    img {
+      margin-left: 9.5px;
+      width: 16px;
+      margin-right: 10px;
+      vertical-align: middle;
+      height: 16px;
+      flex-shrink: 0;
+    }
+
+    span {
+      opacity: 0;
+      transition: opacity 0.2s ease 0.1s;
+      padding-right: 15px;
+    }
+  }
+}
+
+.fxq2 {
+  background-color: #9d88f9;
+}
+
+.fxq3 {
+  background-color: #00c07f;
+}
+
+.fxq:hover {
+  width: 120px;
+}
+
+.fxq:hover .title span {
+  opacity: 1;
+}
+
+.item {
+  margin-bottom: 10px;
+}
+
+
+
+.box-item {
+
+  margin-bottom: 10px;
+}
+
+.badge-content {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  max-height: 200px;
+  /* 默认展开的最大高度 */
+  min-height: 0;
+  /* 确保收缩时有足够空间显示第一个图标 */
+}
+
+.badge-content:not(.expanded) {
+  max-height: 0;
+}
+
+/* 收缩时只显示第一个图标，隐藏其他内容 */
+.badge-content:not(.expanded)> :not(:first-child) {
+  opacity: 0;
+  max-height: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+::v-deep .el-badge__content.is-fixed {
+  right: calc(100% + 6px);
+}
+</style>

src/components/fzq/information.vue

@@ -0,0 +1,53 @@
+<template>
+ <el-dialog class="dialog-container"
+   :model-value="modelValue"
+    :title="title"
+    :before-close="close" :destroy-on-close="true"
+
+  >
+
+     <slot></slot>
+    <template #footer v-if="showFooter">
+      <div class="dialog-footer"  >
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="submit">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {ref} from 'vue'
+const props=defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },title:{
+    type:String,
+    default:'提示'
+  },showFooter:{
+    type:Boolean,
+    default:true
+  }
+
+})
+const emit=defineEmits(['update:modelValue','submit','close'])
+const close = () => {
+  emit('update:modelValue',false)
+  emit('close')
+}
+const submit=()=>{
+  emit('submit')
+}
+</script>
+
+<style lang="scss" scoped>
+// @import "@/assets/css/homeScreen.scss";
+::v-deep .el-dialog__body{
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+</style>

src/components/fzq/systemMessages.vue

@@ -0,0 +1,184 @@
+<template>
+  <!-- <el-button type="success" style='position: absolute;right:30px;'>一键忽略</el-button> -->
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="chageHandle">
+    <el-tab-pane label="未查看" name="first">
+      <MyTable customClass="zdy_peo_table" :tableData="pageData.tableData" :tableColumn="pageData.tableColumn"
+        :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
+        :controlsWidth="pageData.controlsWidth">
+        <template #xxly="{ row }">
+          <DictTag :tag="false" :value="row.xxly" :options="dict.BD_D_XXLY" />
+        </template>
+        <template #xxlx="{ row }">
+          <DictTag :tag="false" :value="row.xxlx" :options="dict.BD_D_XXLX" />
+        </template>
+        <template #controls="{ row }">
+          <el-button size="small" type="primary" @click="handleDetail(row)">查看</el-button>
+        </template>
+      </MyTable>
+      <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
+        ...pageData.pageConfiger,
+        total: pageData.total
+      }"></Pages>
+    </el-tab-pane>
+    <el-tab-pane label="已查看" name="second">
+      <MyTable customClass="zdy_peo_table" :tableData="pageData.tableData" :tableColumn="pageData.tableColumn"
+        :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
+        :controlsWidth="pageData.controlsWidth">
+        <template #xxly="{ row }">
+          <DictTag :tag="false" :value="row.xxly" :options="dict.BD_D_XXLY" />
+        </template>
+        <template #xxlx="{ row }">
+          <DictTag :tag="false" :value="row.xxlx" :options="dict.BD_D_XXLX" />
+        </template>
+        <template #controls="{ row }">
+          <el-button size="small" type="primary" @click="handleDetail(row)">查看</el-button>
+        </template>
+      </MyTable>
+      <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
+        ...pageData.pageConfiger,
+        total: pageData.total
+      }"></Pages>
+    </el-tab-pane>
+  </el-tabs>
+  <Information v-model='showDialog' title='消息详情' :showFooter="false">
+    <Xtxi :item="msgDetail" v-if="xxlx == 'xtxx'" :dict="dict" />
+  </Information>
+</template>
+<script setup>
+import { ref, reactive } from 'vue'
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import Information from "./information.vue";
+import { queryYdxxPageList, queryWdxxPageList, queryWdxxDetail, queryYdxxDetail, qsXx } from '@/api/commit.js'
+import Xtxi from './xtxi.vue'
+const props = defineProps({
+  dict: {
+    type: Object,
+    default: () => {
+    }
+  }, idEntityCard: {
+    type: String,
+    default: ''
+  }, xxlx: {
+    type: String,
+    default: 'xtxx'
+  }
+})
+const activeName = ref('first')
+const pageData = reactive({
+  tableData: [],
+  keyCount: 0,
+  tableConfiger: {
+    loading: false,
+    rowHieght: 40,
+    haveControls: true,
+  },
+  controlsWidth: 160, //操作栏宽度
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  }, //分页
+  tableColumn: [
+    { label: "消息标题", prop: "xxbt", showOverflowTooltip: true },
+    { label: "消息来源", prop: "xxly", showOverflowTooltip: true, showSolt: true },
+    { label: "消息描述", prop: "xxms", showOverflowTooltip: true },
+    { label: "消息类型", prop: "xxlx", showOverflowTooltip: true, showSolt: true },
+  ], tableHeight: "calc(80vh - 350px)",
+});
+const chageHandle = () => {
+  pageData.pageConfiger.pageCurrent = 1
+  pageData.pageConfiger.pageSize = 20
+  handleClick()
+}
+//请求数据
+const handleClick = async () => {
+  let promes = {
+    page: pageData.pageConfiger.pageCurrent,
+    rows: pageData.pageConfiger.pageSize,
+    jsrid: props.idEntityCard,
+    xxlx: ""
+  }
+  switch (props.xxlx) {
+    case 'xtxx':
+      promes.xxlx = 100
+      const res = activeName.value == 'first' ? await queryWdxxPageList(promes) : await queryYdxxPageList(promes)
+      pageData.tableData = res.rows
+      pageData.total = res.total
+      break;
+    case 'tztg':
+      promes.xxlx = 200
+      const tztgRes = activeName.value == 'first' ? await queryWdxxPageList(promes) : await queryYdxxPageList(promes)
+      pageData.tableData = tztgRes.rows
+      pageData.total = tztgRes.total
+      break;
+    default:
+      break;
+  }
+}
+const changeNo = (val) => {
+  pageData.pageConfiger.pageCurrent = val
+  handleClick()
+}
+const changeSize = (val) => {
+  pageData.pageConfiger.pageSize = val
+  handleClick()
+}
+handleClick()
+// 查看详情
+const showDialog = ref(false)
+const msgDetail = ref({})
+const disposition = (item) => {
+  let arrId = ''
+  if (Array.isArray(item)) {
+    const itemMap = item.map(it => {
+      return it.id
+    })
+    arrId = itemMap.join(',')
+  } else {
+    arrId = item.id
+  }
+  const promes = {
+    xxlx: '100',
+    id: arrId
+  }
+  qsXx(promes).then((result) => {
+    handleClick()
+  }).catch((err) => {
+    console.log(err);
+
+  });
+}
+const handleDetail = async (item) => {
+  showDialog.value = true
+  const res = activeName.value == 'first' ? await queryWdxxDetail({ id: item.id }) : await queryYdxxDetail({ id: item.id })
+  if (res) {
+    msgDetail.value = res[0]
+    if (msgDetail.value.qszt == '0') {
+      disposition(item)
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+// @import "@/assets/css/homeScreen.scss";
+
+.zdy_peo_table td.el-table__cell {
+  color: #ffffff !important;
+}
+
+.zdy_peo_table th.el-table__cell {
+  color: #ffffff !important;
+  font-size: 15px;
+}
+
+.zdy_peo_table .el-table__body tr.el-table__row--striped td.el-table__cell {
+  background: transparent !important;
+}
+
+.zdy_peo_table .table_blue_row {
+  background: linear-gradient(to right, #001D4B 0%, rgba(0, 29, 75, 0.1) 100%) !important;
+}
+</style>

src/components/fzq/xtxi.vue

@@ -0,0 +1,53 @@
+<template>
+    <div style="height: 300px;overflow: auto;font-size: 16px;">
+      <div>通知标题：{{ item.xxbt }}</div>
+      <div class="mt">通知内容：{{ item.xxms }}</div>
+      <div class="flex align-center just-between mt">
+        <div class="flex align-center">接收类型：
+          <DictTag :tag="false" :value="item.xxlx" :options="dict.BD_D_XXLX" />
+        </div>
+        <div class="flex align-center">消息来源：
+          <DictTag :tag="false" :value="item.xxly" :options="dict.BD_D_XXLY" />
+        </div>
+      </div>
+    </div>
+</template>
+<script setup>
+import {ref} from 'vue'
+const props = defineProps({
+  item: {
+    type: Object,
+    default: () => {
+    }
+  }, dict: {
+    type: Object,
+    default: () => {
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+// @import "@/assets/css/homeScreen.scss";
+
+.zdy_peo_table td.el-table__cell {
+  color: #ffffff !important;
+}
+
+.zdy_peo_table th.el-table__cell {
+  color: #ffffff !important;
+  font-size: 15px;
+}
+
+.zdy_peo_table .el-table__body tr.el-table__row--striped td.el-table__cell {
+  background: transparent !important;
+}
+
+.zdy_peo_table .table_blue_row {
+  background: linear-gradient(to right, #001D4B 0%, rgba(0, 29, 75, 0.1) 100%) !important;
+}
+
+.mt {
+  margin-top: 20px;
+}
+</style>

src/components/video/index.vue

@@ -2,10 +2,9 @@
   <div class="videoBoxcnt" v-show="isShowVideo">
     <div class="videoMain">
       <div class="close" @click="isShowVideo = false">
-        <el-icon :size="22"><CircleClose /></el-icon>
+        <el-icon :size="28"  class="closeIcon"><CircleClose /></el-icon>
       </div>
       <div class="cnt-box">
-        <!-- <VideoPay :show="true" :src="url" /> -->
            <VideoPay :sbbh="sbbh"  v-if="sbbh" />
       </div>
     </div>
@@ -35,11 +34,8 @@ const url = ref();
 
 onMounted(() => {
   emitter.on("openGzyVideo", (res) => {
-    console.log(res,'111111');
-    
     sbbh.value = res.sbbh;
     isShowVideo.value=true
-    // getUrl(sbbh.value);
   });
 });
 onUnmounted(() => {
@@ -74,16 +70,29 @@ function getUrl(val) {
   display: flex;
   justify-content: center;
   align-items: center;
+  .videoMain{
+  background: #052342;
+  width: 60%;
+  height: 60vh;
+  }
 }
 .close {
   width: 100%;
-  text-align: right;
-  height: 24px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 10px;
+padding-right: 10px;
+  .closeIcon{
+    font-size: 16px;
+    color: #fff;
+  }
 }
 .cnt-box {
-  width: 50vw;
-  height: 50vh;
-  background: #fff;
+  width:100%;
+  height:100%;
+  background: #0d5ba8;
   // padding: 5px;
 }
 

src/components/wsIframe/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div style="width: 100%; height: 100%; overflow: hidden;">
-    <iframe  :src="'http://89.40.7.33:8877?sbbh=' + ssbhDm" style="border: none; width: 100%; height: 100%; "
+    <iframe  :src="'http://89.40.9.11:8877?sbbh=' + ssbhDm" style="border: none; width: 100%; height: 100%; "
       allowfullscreen allowtransparency scrolling="no"></iframe>
-      <!-- <iframe v-else src="https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209105011F0zPoYzHry.mp4" style="border: none; width: 100%; height: 100%; "
-      allowfullscreen allowtransparency scrolling="no"></iframe> -->
+
   </div>
 </template>
 

src/layout/components/Header.vue

@@ -1,6 +1,7 @@
 <template>
   <header>
-    <div class="logo flex align-center" @click="goToHome"><img width="45" class="mr10" src="@/assets/images/jinghui.png" alt="">林芝公安治安防控管理平台</div>
+    <div class="logo flex align-center" @click="goToHome"><img width="45" class="mr10" src="@/assets/images/jinghui.png"
+        alt="">林芝公安治安防控管理平台</div>
     <div class="right">
       <div><img src="@/assets/images/peo.png" /></div>
       <div class="detail">
@@ -8,20 +9,25 @@
           <div class="name">姓名：{{ username }}</div>
           <div class="work">单位：{{ deptName }}</div>
         </div>
-        <!-- <el-dropdown :hide-on-click="false">
+        <el-dropdown :hide-on-click="false">
           <span class="el-dropdown-link">
-            <el-icon :size="20" color="#fff"> <CaretBottom /> </el-icon>
+            <el-icon :size="20" color="#fff">
+              <CaretBottom />
+            </el-icon>
           </span>
           <template #dropdown>
+            <el-dropdown-menu class="loginOut" @click="goPath">
+              <el-dropdown-item command="logout">前往前台</el-dropdown-item>
+            </el-dropdown-menu>
             <el-dropdown-menu class="loginOut" @click="logout">
               <el-dropdown-item command="logout">退出登录</el-dropdown-item>
             </el-dropdown-menu>
           </template>
-        </el-dropdown> -->
+        </el-dropdown>
       </div>
-      <div @click="goToHome">
+      <!-- <div @click="goToHome">
         <img src="@/assets/images/meun.png" />
-      </div>
+      </div> -->
     </div>
   </header>
 </template>
@@ -55,10 +61,10 @@ onMounted(() => {
 });
 const logout = () => {
   store.dispatch("user/logout");
-  store.commit("app/clearTag", null, { immediate: true });
-  store.commit("permission/deleteRouter", { immediate: true });
-  store.commit("user/deleteKeepLiiveRoute", "home");
 };
+const goPath = () => {
+    router.push("/");
+}
 </script>
 
 <style lang="scss" scoped>

src/store/modules/user.js

@@ -104,6 +104,7 @@ export default {
               setItem("USERNAME", data.userName);
               setItem("SFRH", data.sfrh);
               setItem("USERID", data.userId);
+              setItem("SYSROLE", data.sysRole);
               setItem("PermissionsInfo", data.permissionsInfo);
               this.commit("user/setMenuList", data.menuList);
               setItem("menusPermission", data.menuCodeSet);
@@ -143,6 +144,7 @@ export default {
               this.commit("user/setUserName", data.userName);
               setItem('isOatuh', 0)
               setItem("USERNAME", data.userName);
+              setItem("SYSROLE", data.sysRole);
               setItem("SFRH", data.sfrh);
               setItem("USERID", data.userId);
               setItem("PermissionsInfo", data.permissionsInfo);
@@ -188,6 +190,8 @@ export default {
               this.commit("user/setUserName", data.userName);
               setItem("USERNAME", data.userName);
               setItem("SFRH", data.sfrh);
+              setItem("SYSROLE", data.sysRole);
+
               setItem("USERID", data.userId);
               setItem("PermissionsInfo", data.permissionsInfo);
               this.commit("user/setMenuList", data.menuList);
@@ -221,6 +225,8 @@ export default {
           authorization: parmas.jwtToken
         })
           .then((data) => {
+
+
             this.commit("user/setToken", "");
             this.commit("user/setToken", data.jwtToken);
             this.commit("user/setDeptList", data.deptList);
@@ -261,10 +267,9 @@ export default {
       this.commit("user/setUserInfo", res);
       return res;
     },
-
     /*
-     * 退出登录
-     */
+ * 退出登录
+ */
     async logout(ctx) {
       const res = await loginOut();
       if (res) {
@@ -277,11 +282,11 @@ export default {
         this.commit("permission/deleteRouter");
         removeAllItem();
         // 待补充 清理权限相关的配置
-        if (isOatuh) {
-          window.location.href = `http://155.240.22.188:9020`;
-        } else {
-          router.push("/login");
-        }
+        // if (isOatuh) {
+        window.location.href = `https://tyyy.lz.dsj.xz/portal/home`;
+        // } else {
+        //   router.push("/login");
+        // }
       }
     }
   }

src/styles/index.scss

@@ -109,4 +109,38 @@ div:focus {
 }
 .new-btn-class-sc:hover {
   border-bottom: 1px solid #f56c6c;
+}
+
+/* 全局设置滚动条颜色 */
+/* Webkit浏览器(Chrome, Safari等) */
+*::-webkit-scrollbar {
+  width: 6px; /* 垂直滚动条宽度 */
+  height: 6px; /* 水平滚动条高度 */
+}
+
+*::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1); /* 滚动条轨道颜色 */
+  border-radius: 3px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: rgba(102, 102, 102, 0.5); /* 滚动条滑块颜色 */
+  border-radius: 3px;
+  transition: background-color 0.3s ease;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: rgba(102, 102, 102, 0.8); /* 鼠标悬停时的滑块颜色 */
+}
+
+/* Firefox浏览器滚动条设置 */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(102, 102, 102, 0.5) rgba(0, 0, 0, 0.1);
+}
+
+/* 为确保所有需要滚动的元素都能正常工作，显式设置overflow属性 */
+.scrollable {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch; /* 为移动设备添加平滑滚动 */
 }

src/utils/request.js

@@ -1,11 +1,14 @@
-import axios from "axios";
-import store from "@/store";
-import { ElMessage } from "element-plus";
-import { isCheckTimeout } from "@/utils/auth";
-
+import axios from 'axios';
+import store from '@/store';
+import { ElMessage } from 'element-plus';
+import { isCheckTimeout } from '@/utils/auth';
+// import { saveAs } from 'file-saver'
+// import { tansParams, blobValidate } from "@/utils/ruoyi";
+let downloadLoadingInstance;
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API,
-  timeout: 100000
+  withCredentials: true,
+  timeout: 100000,
 });
 
 // 1.请求拦截器
@@ -22,6 +25,7 @@ service.interceptors.request.use(
       if (!config.url.startsWith("/jcApi")) {
         config.headers.Authorization = `${store.getters.token}`;
       }
+
     }
     //2.设置headers icode
     // config.headers.code = '';
@@ -37,35 +41,20 @@ service.interceptors.request.use(
 service.interceptors.response.use(
   // 请求成功的处理
   (response) => {
-    const { success, code, msg, message, data } = response.data;
+    const { success, code, msg, message, data, model } = response.data;
     // 需要判断当前请求是否成功
     if (success && code === 10000) {
-      return data; // 成功后返回解析后的数据
-      // return response.data;
-    } else if (
-      code === 200 ||
-      code == "00000" ||
-      code == "10000" ||
-      msg == "success"
-    ) {
-      return data; // 成功后返回解析后的数据
-      // return response.data;
+      return data ? data : response.data; // 成功后返回解析后的数据
+    } else if (code === 200 || code == "00000" || code == "10000" || msg == 'success' || model) {
+      return data ? data : response.data; // // 成功后返回解析后的数据
     } else if (code === 401) {
-      store.dispatch("user/logout");
-      // ElMessage.error(message); // 提示错误信息
-      ElMessage({
-        message: message || msg,
-        grouping: true,
-        type: "error"
-      });
+      store.dispatch('user/logout');
+      ElMessage.error(message); // 提示错误信息
+      ElMessage({ message: message || msg, grouping: true, type: 'error' })
     } else {
       // 失败（请求成功 ，业务失败） 弹出消息提示
-      ElMessage({
-        message: message || msg,
-        grouping: true,
-        type: "error"
-      });
-      return Promise.reject(new Error(message));
+      ElMessage({ message: message || msg, grouping: true, type: 'error' })
+      return Promise.reject(new Error(message + '数据格式错误'));
     }
   },
   // 请求失败处理
@@ -76,15 +65,36 @@ service.interceptors.response.use(
       error.response.data &&
       error.response.data.code === 401
     ) {
-      store.dispatch("user/logout");
+      console.log("Xxxxx");
+
+      store.dispatch('user/logout');
     }
-    ElMessage({
-      message: error.message,
-      grouping: true,
-      type: "error"
-    });
-    return Promise.reject(error);
   }
 );
 
+
+
+// 通用下载方法
+// export function download(url, params, filename, config) {
+//   return service.post(url, params, {
+//     transformRequest: [(params) => { return tansParams(params) }],
+//     headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+//     responseType: 'blob',
+//     ...config
+//   }).then(async (data) => {
+//     const isBlob = blobValidate(data);
+//     if (isBlob) {
+//       const blob = new Blob([data])
+//       saveAs(blob, filename)
+//     } else {
+//       const resText = await data.text();
+//       const rspObj = JSON.parse(resText);
+//       const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
+//       ElMessage.error(errMsg);
+//     }
+//   }).catch((r) => {
+//     ElMessage.error('下载文件出现错误，请联系管理员！')
+//   })
+// }
+
 export default service;

src/views/StationLevel/index.vue

@@ -1,34 +1,73 @@
 <template>
-  <div class="homeBox" @click="handless">
-    <Head :title="query.name" :query="query.name"></Head>
+  <div class="homeBox">
+
+    <Head :title="query.name" :query="query.name" :JczMsg="JczMsg"></Head>
     <div class="mainBox_jcz hidden flex">
       <ul class="asideBox">
-        <li class="asideItem" v-for="(item, idx) in meun.leftMeun" :key="idx">
-          <div class="title">{{ item }}</div>
-          <div class="asideCnt" @click="handless">
-            <PeoCollection :jczId="query.id" v-if="item == '人员数据采集'"></PeoCollection>
-            <PlowStatistics :jczId="query.id" v-if="item == '流入流出统计'"></PlowStatistics>
-            <WarningCount :jczId="query.id" v-if="item == '预警统计'"></WarningCount>
+        <template v-if="JczMsg.zqlx == '1'">
+          <li class="asideItem" v-for="(item, idx) in meun.leftMeun" :key="idx">
+            <div class="title">{{ item }}</div>
+            <div class="asideCnt">
+              <PeoCollection :jczId="query.id" v-if="item == '人员数据采集'"></PeoCollection>
+              <PlowStatistics :jczId="query.id" v-if="item == '流入流出统计'"></PlowStatistics>
+              <WarningCount :jczId="query.id" v-if="item == '预警统计'"></WarningCount>
+            </div>
+          </li>
+        </template>
+        <template v-if="JczMsg.zqlx == '2'">
+          <div class="asideItem">
+            <div class="title">预警统计</div>
+            <div class="asideCnt">
+              <WarningCount :jczId="query.id"></WarningCount>
+            </div>
           </div>
-        </li>
+          <div class="asideItems">
+            <div class="title">人员预警</div>
+            <div class="asideCnt">
+              <PeoWarning :jczId="query.id"></PeoWarning>
+            </div>
+          </div>
+
+        </template>
       </ul>
       <div class="mainBox">
         <div class="main-top">
           <VideoMore></VideoMore>
         </div>
         <div class="main-bottom">
-          <VideoFoot></VideoFoot>
+          <VideoFoot :JczMsg="JczMsg" v-show="JczMsg"></VideoFoot>
         </div>
       </div>
       <ul class="asideBox">
-        <li class="asideItem" v-for="(item, idx) in meun.rightMeun" :key="idx">
-          <div class="title">{{ item }}</div>
-          <div class="asideCnt">
-            <BeOnDuty :jczId="query.id" v-if="item == '值班备勤'"></BeOnDuty>
-            <CarWarning :jczId="query.id" v-if="item == '车辆预警'"></CarWarning>
-            <PeoWarning :jczId="query.id" v-if="item == '人员预警'"></PeoWarning>
+        <template v-if="JczMsg.zqlx == '1'">
+          <li class="asideItem" v-for="(item, idx) in meun.rightMeun" :key="idx">
+            <div class="title">{{ item }}</div>
+            <div class="asideCnt">
+              <BeOnDuty :jczId="query.id" v-if="item == '值班备勤'"></BeOnDuty>
+              <CarWarning :jczId="query.id" v-if="item == '车辆预警'"></CarWarning>
+              <PeoWarning :jczId="query.id" v-if="item == '人员预警'"></PeoWarning>
+            </div>
+          </li>
+        </template>
+        <template v-if="JczMsg.zqlx == '2'">
+          <div class="asideItem">
+            <div class="title">流入流出统计</div>
+            <div class="asideCnt">
+              <PlowStatistics :jczId="query.id"></PlowStatistics>
+            </div>
           </div>
-        </li>
+          <div class="asideItems">
+            <div class="title">车辆预警</div>
+            <div class="asideCnt">
+              <CarWarning :jczId="query.id"></CarWarning>
+            </div>
+          </div>
+          <!-- <CarWarning :jczId="query.id" v-if="item == '车辆预警'"></CarWarning> -->
+
+          <!-- <li class="asideItem" v-for="(item, idx) in meun.LxTowrightMeun" :key="idx">
+
+          </li> -->
+        </template>
       </ul>
     </div>
   </div>
@@ -46,14 +85,34 @@ import VideoMore from "./layout/VideoMore.vue";
 import VideoFoot from "./layout/VideoFoot.vue";
 import { useRoute } from "vue-router";
 import { ref, onMounted, onUnmounted, reactive, computed } from "vue";
+import {
+  JczselectById
+} from "@/api/mosty-jcz";
+import { template } from "lodash";
 const router = useRoute();
 const meun = reactive({
   leftMeun: ["人员数据采集", "流入流出统计", "预警统计"],
-  rightMeun: ["值班备勤", "车辆预警", "人员预警"]
+  rightMeun: ["值班备勤", "车辆预警", "人员预警"],
+  LxTowleftMeun: ["流入流出统计", "人员预警",],
+  LxTowrightMeun: ["预警统计", "车辆预警"]
 });
 const query = computed(() => {
   return router.query;
 });
+const JczMsg = ref({})
+const getJczselectById = () => {
+  const id = router.query.id
+  JczselectById({ id: id }).then((res) => {
+    console.log(res);
+
+    JczMsg.value = res
+  }).catch((err) => {
+
+  });
+}
+onMounted(() => {
+  getJczselectById()
+})
 </script>
 
 <style lang="scss" scoped>
@@ -78,23 +137,31 @@ const query = computed(() => {
       background-size: 100% 100%;
       padding: 0 10px;
       box-sizing: border-box;
+    }
 
-      .title {
-        height: 50px;
-        line-height: 50px;
-        padding-left: 20px;
-        font-size: 20px;
-        font-family: "YSBTH";
-        background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-      }
+    .asideItems {
+      height: calc(100% / 3 *2);
+      background: url("~@/assets/images/border_R_B.png") no-repeat;
+      background-size: 100% 100%;
+      padding: 0 10px;
+      box-sizing: border-box;
+    }
 
-      .asideCnt {
-        height: calc(100% - 50px);
-        overflow: hidden;
-        overflow-y: auto;
-      }
+    .title {
+      height: 50px;
+      line-height: 50px;
+      padding-left: 20px;
+      font-size: 20px;
+      font-family: "YSBTH";
+      background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .asideCnt {
+      height: calc(100% - 50px);
+      overflow: hidden;
+      overflow-y: auto;
     }
   }
 
@@ -105,11 +172,11 @@ const query = computed(() => {
     .main-top {
       background: url("~@/assets/images/bg_13.png") no-repeat;
       background-size: 100% 100%;
-      height: 70%;
+      height: 45%;
     }
 
     .main-bottom {
-      height: 30%;
+      height: 55%;
       background: url("~@/assets/images/bg_14.png") no-repeat;
       background-size: 100% 100%;
     }

src/views/StationLevel/layout/BeOnDuty.vue

@@ -2,11 +2,11 @@
   <div class="warning-container">
     <!-- 标签切换 -->
     <div class="tab-container">
-      <div class="tab-item" @click="showchenge(1)" :class="{ active: show == 1 }">
-        <div class="tab-content">值班人员</div>
+      <div class="tab-item itemwxz" @click="showchenge(1)" :class="{ 'tab-itemxz': show == 1 }">
+        <div class="tab-content" @click="showchenge(1)">值班人员</div>
       </div>
-      <div class="tab-item" @click="showchenge(2)" :class="{ active: show == 2 }">
-        <div class="tab-content">值班装备</div>
+      <div class="tab-item itemwxz" @click="showchenge(2)" :class="{ 'tab-itemxz': show ==2 }">
+        <div class="tab-content" @click="showchenge(2)">值班装备</div>
       </div>
     </div>
 
@@ -94,9 +94,16 @@ const warningListValue = (res) => {
     warningList.value.qxList = res.qxList && res.qxList.length > 0
       ? res.qxList.filter((item) => item.qxsl > 0)
       : [];
-    warningList.value.ryList = res.ryList.length > 0 ? res.ryList : [];
-    warningList.value.clList = res.clList.length > 0 ? res.clList : [];
+    warningList.value.ryList =res.ryList&& res.ryList.length > 0 ? res.ryList : [];
+    warningList.value.clList = res.clList && res.clList.length > 0 ? res.clList : [];
+    if (res.tcList && res.tcList.length > 0&&res.zdList&&res.zdList.length > 0) {
     warningList.value.sbList = [...res.tcList, ...res.zdList]
+    }else if (res.tcList && res.tcList.length > 0) {
+    warningList.value.sbList = res.tcList
+    } else if (res.zdList && res.zdList.length > 0) {
+    warningList.value.sbList = res.zdList
+    }
+
     emitter.emit("chengZ", res);
   } else {
     warningList.value = res;
@@ -122,31 +129,41 @@ getjczqueryById();
   line-height: 24px;
   position: relative;
   cursor: pointer;
+  z-index: 2;
+    background: url("~@/assets/images/bg_08.png") no-repeat center center;
+  background-size: 100% 100%;
+}
+
+.tab-itemwxz {
+
+}
+
+.tab-itemxz {
+  background: url("~@/assets/images/bg_09.png") no-repeat center center;
+  background-size: 100% 100%;
 }
 
 .tab-content {
   padding: 8px 30px;
   color: #fff;
   font-size: 16px;
-  position: relative;
-  z-index: 1;
 }
 
-.tab-item::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background: url("~@/assets/images/bg_08.png") no-repeat center center;
-  background-size: 100% 100%;
-}
+// .tab-item::before {
+//   content: "";
+//   position: absolute;
+//   left: 0;
+//   top: 0;
+//   width: 100%;
+//   height: 100%;
+//   // background: url("~@/assets/images/bg_08.png") no-repeat center center;
+//   background-size: 100% 100%;
+// }
 
-.tab-item.active::before {
-  background: url("~@/assets/images/bg_09.png") no-repeat center center;
-  background-size: 100% 100%;
-}
+// .tab-item.active::before {
+//   background: url("~@/assets/images/bg_09.png") no-repeat center center;
+//   background-size: 100% 100%;
+// }
 
 .warning-list {
   height: calc(100% - 50px);
@@ -225,7 +242,8 @@ getjczqueryById();
   font-size: 12px;
   margin-left: 10px;
 }
-.white-text{
+
+.white-text {
   color: #fff;
 }
 </style>

src/views/StationLevel/layout/CarWarning.vue

@@ -10,7 +10,8 @@
       :key="index"
     >
       <div class="warning-image">
-        <img :src="item.yjTp" alt="预警图片" />
+        <img :src="item.yjTp" alt="预警图片" v-if="item.yjTp&&!item.yjTp.includes('baidu')" />
+           <img src="@/assets/images/default_male.png" alt="预警图片" v-else/>
       </div>
       <div class="warning-info">
         <div class="info-item">

src/views/StationLevel/layout/PeoWarning.vue

@@ -10,7 +10,8 @@
       :key="index"
     >
       <div class="warning-image">
-        <img :src="item.yjTp" alt="预警图片" />
+        <img :src="item.yjTp" alt="预警图片" v-if="item.yjTp&&!item.yjTp.includes('baidu')" />
+          <img src="@/assets/images/default_male.png" alt="预警图片" v-else/>
       </div>
       <div class="warning-info">
         <div class="info-item">
@@ -113,7 +114,7 @@ getPageList();
 }
 
 .warning-image {
-  width: 100px;
+  width: 80px;
   height: 80px;
   img {
     width: 100%;

src/views/StationLevel/layout/VideoFoot.vue

@@ -1,65 +1,191 @@
 <template>
   <div class="image-carousel">
-    <el-carousel style="height: 100%;" motion-blur indicator-position="none" @change="handleCarouselChange"
-      :autoplay="false">
-      <el-carousel-item v-for="(item, index) in listSxt" :key="index">
-        <div class="video-grid" v-if="activeIndex == index">
-          <div v-for="(items,indexs) in item" :key="indexs" class="video-cell">
-            <div class="iconFont" @click.stop="showchenge(items)">
-              <el-icon :size="20"><UploadFilled /></el-icon>
+    <div class="flex full-height" v-if="JczMsg.jczlx=='01'">
+      <div class="column-container">
+        <div class="gradient-title">过站人员</div>
+        <div class="search-container">
+          <el-input v-model="timeData.ryXm" placeholder="请输入姓名" class="search-input" clearable />
+          <el-date-picker v-model="timeData.time" type="daterange" unlink-panels range-separator="至"
+            start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts" :size="size" />
+          <el-button type="primary" class="search-button">搜索</el-button>
+        </div>
+        <div class="waning-cards noScollLine">
+          <div class="warning-card" v-for="(item, index) in 20" :key="index">
+            <div class="warning-image">
+              <img :src="require('@/assets/images/default_male.png')" alt="抓拍图片" />
+            </div>
+            <div class="warning-info">
+              <div class="info-item">
+                <span class="label">姓名：</span>
+                <span>老王</span>
+                <span class="tag">老王预警</span>
+              </div>
+              <div class="info-item align-center">
+                <span class="label">性别：男</span>
+              </div>
+              <div class="info-item">
+                <span class="label">相似度：</span>
+                <span class="highlight">95%</span>
+              </div>
+              <div class="info-item">
+                <span class="label">抓拍时间：</span>
+                <span>2025-10-10 10:00:00</span>
+              </div>
+              <div class="info-item align-center">
+                <span class="label nowrap">抓拍地址：</span>
+                <span class="one_text_detail">上海市普陀区金沙江路 1518 弄</span>
+              </div>
             </div>
-            <WsIframe :sbbh="items.sbbh"  />
           </div>
         </div>
-      </el-carousel-item>
-    </el-carousel>
+      </div>
+      <div class="column-container">
+        <div class="gradient-title">过站车辆</div>
+        <div class="search-container">
+          <el-input v-model="clData.cph" placeholder="请输入车牌号" class="search-input" clearable />
+          <el-date-picker v-model="clData.time" type="daterange" unlink-panels range-separator="至"
+            start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts" :size="size" />
+          <el-button type="primary" class="search-button">搜索</el-button>
+        </div>
+        <div class="waning-cards noScollLine" >
+          <div class="warning-card" v-for="(item, index) in pageData.tableData" :key="index">
+            <div class="warning-image">
+              <img :src="require('@/assets/images/car.png')" alt="抓拍图片" />
+            </div>
+            <div class="warning-info">
+              <div class="info-item">
+                <span class="label">车牌号：</span>
+                <span>{{ item.cph }}</span>
+                <span class="tag">{{ item.bq }} </span>
+              </div>
+              <!-- <div class="info-item flex">
+                <span class="label">性别：男</span>
+              </div> -->
+              <div class="info-item">
+                <span class="label">相似度：</span>
+                <span class="highlight">{{ item.xsd }}</span>
+              </div>
+              <div class="info-item">
+                <span class="label">抓拍时间：</span>
+                <span>{{ item.time }}</span>
+              </div>
+              <div class="info-item align-center">
+                <span class="label nowrap">抓拍地址：</span>
+                <span class="one_text_detail">{{ item.fx }}{{ item.dz }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else>
+      <div>
+        <div>
+          <div style="display: flex;align-items: center;padding: 10px 0;">
+            <el-input v-model="timeData.ryXm" placeholder="请输入车牌号" style="width: 30%;margin-right: 10px;" clearable />
+            <el-date-picker v-model="timeData.time" type="daterange" range-separator="至" start-placeholder="开始时间"
+              end-placeholder="结束时间" style="width: 30%;;margin-right: 10px;" :size="size" />
+            <el-button type="primary">搜索</el-button>
+          </div>
+        </div>
+        <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" tableHeight="35vh"
+          :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
+          <template #tp="{ row }">
+            <el-image :src="row.tp" :preview-src-list="[row.tp]" alt="车辆类型" style="width: 80px; height: 100px;"/>
 
+          </template>
+
+          <!-- 操作 -->
+          <template #controls="{ row }">
+            <el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
+            <el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
+            <el-link type="primary" @click="delDictItem(row.id)">删除</el-link>
+          </template>
+        </MyTable>
+        <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
+          ...pageData.pageConfiger,
+          total: pageData.total
+        }"></Pages>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, watch, computed, onMounted, onUnmounted, reactive,nextTick } from 'vue'
-import WsIframe from '@/components/wsIframe/index.vue'
-import { useRoute } from "vue-router"
-import { sxtGetList } from '@/api/mosty-jcz.js'
-import emitter from "@/utils/eventBus.js";
-const activeIndex = ref(0)
-const cdList=ref([])
-const listSxt=ref([1])
-const handleCarouselChange = (index) => {
-  activeIndex.value = index
-}
-
-const getSxtGetList = (id) => {
-  const jczid = {
-    jczid: id
+import { ref, reactive } from 'vue'
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+const props=defineProps({
+  JczMsg: {
+    type: Object,
+    default: () => ({})
   }
-  sxtGetList(jczid).then(res => {
-   listSxt.value= Array.from({ length:Math.ceil(res.length / 12)==0?1:Math.ceil(res.length / 12) }, (_, row) => {
-   return res.slice(row * 12, row * 12 + 12)
-    }
-    );
-     cdList.value = listSxt.value[0].length < 4 ? listSxt.value[0]: listSxt.value[0].slice(0,4)
-    emitter.emit("getSxtGetList", cdList.value )
-  }).finally(()=>{
-  })
-}
-const route = useRoute()
-onMounted(() => {
-  const id = route.query.id
-  getSxtGetList(id)
 })
-const showchenge = (item) => {
-  const index = cdList.value.indexOf(item);
-if (index !== -1) {
-  // 如果数字已存在，先移除它
-  cdList.value.splice(index, 1);
-}
-// 添加到最前面
-  cdList.value.unshift(item);
 
-  emitter.emit("getSxtGetList", cdList.value )
-}
+const timeData = ref({
+  ryXm: '',
+  time: []
+})
+const clData = ref({
+  cph: '',
+  time: []
+})
+const pageData = reactive({
+  tableData: [{
+    tp: require("@/assets/images/cstp.png"),
+    cph: "豫DGL808",
+    time: "2025-11-02 09:18:00",
+    fx: "入林方向",
+    dz: "德吉路与光彩路入口处",
+    bm: "54040251001325030171",
+    cllx: "小型车辆",
+    bq: "前科人员车",
+    xsd: "80%",
+  }, {
+    tp: require("@/assets/images/cstp.png"),
+    cph: "豫DGL808",
+    time: "2025-11-02 15:18:00",
+    fx: "出林方向",
+    dz: "德吉路与光彩路出口处",
+    bm: "54040251001325030172",
+    cllx: "小型车辆",
+    bq: "前科人员车",
+       xsd: "90%",
+  }, {
+    tp: require("@/assets/images/cstp.png"),
+    cph: "豫DGL808",
+    time: "2025-11-02 21:18:00",
+    fx: "入林方向",
+    dz: "德吉路与光彩路入口处",
+    bm: "54040251001325030171",
+    cllx: "小型车辆",
+    bq: "前科人员车",
+    xsd: "95%",
+  }], //表格数据
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "null",
+    loading: false,
+    haveControls: false
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  }, //分页
+  controlsWidth: 250, //操作栏宽度
+  tableColumn: [
+    { label: "过车图片", prop: "tp", showOverflowTooltip: true, showSolt: true },
+    { label: "车牌号", prop: "cph", showOverflowTooltip: true },
+    { label: "过车时间", prop: "time", showOverflowTooltip: true },
+    { label: "卡口方向", prop: "fx", showOverflowTooltip: true },
+    { label: "车辆种类", prop: "cllx", showOverflowTooltip: true },
+    { label: "摄像头编码", prop: "bm", showOverflowTooltip: true },
+    { label: "抓拍摄像头", prop: "dz", showOverflowTooltip: true, },
+    { label: "标签", prop: "bq", showOverflowTooltip: true }
+  ]
+});
 </script>
 
 <style lang="scss" scoped>
@@ -67,7 +193,7 @@ if (index !== -1) {
   width: 100%;
   height: 100%;
   position: relative;
-  padding: 30px 20px;
+  padding: 35px 10px;
   box-sizing: border-box;
 
   .carousel-container {
@@ -116,7 +242,7 @@ if (index !== -1) {
 
 .video-grid {
   display: grid;
-  grid-template-columns: repeat(6, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   /* 6列 */
   grid-template-rows: repeat(2, auto);
   /* 2行 */
@@ -133,28 +259,283 @@ if (index !== -1) {
   // padding: 0 !important;;
 }
 
-/* 自定义滚动条样式 */
-::-webkit-scrollbar {
+// 自定义滚动条样式
+.noScollLine::-webkit-scrollbar {
   width: 0.5em;
   height: 0.5em;
 }
 
-::-webkit-scrollbar-track {
+.noScollLine::-webkit-scrollbar-track {
   background: #000000;
 }
 
-::-webkit-scrollbar-thumb {
+.noScollLine::-webkit-scrollbar-thumb {
   background: #021b31;
   border-radius: 0.25em;
 }
 
-::-webkit-scrollbar-thumb:hover {
+.noScollLine::-webkit-scrollbar-thumb:hover {
   background: #011733cd;
 }
-.video-cell{
-  position: relative;
+
+// 表格列样式
+.col-index {
+  width: 50px;
 }
-.iconFont{
-  position: absolute; top: 10px; text-align: right;  width: 100%;
+
+.col-image {
+  width: 80px;
+}
+
+.col-plate {
+  width: 100px;
+}
+
+.col-time {
+  width: 15%;
+}
+
+.col-direction {
+  width: 10%;
+}
+
+.col-type {
+  width: 10%;
+}
+
+.col-code {
+  width: 20%;
+}
+
+.col-camera {
+  width: 10%;
+}
+
+.col-tag {
+  width: calc(35% - 250px);
+}
+
+// 图片容器样式
+.image-container {
+  width: 80px;
+  height: 100px;
+  padding: 10px;
+}
+
+.vehicle-image {
+  width: 100%;
+  height: 100%;
+}
+
+// 特殊文本样式
+.plate-number {
+  color: blue;
+}
+
+// 滚动容器样式
+.scroll-container {
+  height: 38vh;
+  overflow: auto;
+}
+
+// 布局相关样式
+.full-height {
+  height: 100%;
+}
+
+.column-container {
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+  padding: 10px;
+}
+
+.gradient-title {
+  line-height: 40px;
+  font-size: 24px;
+  font-weight: bold;
+  text-align: center;
+  color: #000;
+  font-family: 'YSBTH';
+  background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.search-container {
+  display: flex;
+  justify-content: space-around;
+}
+
+.search-input {
+  margin-bottom: 10px;
+  width: 40%;
+}
+
+.search-button {
+  margin-bottom: 10px;
+}
+
+.align-center {
+  display: flex;
+  align-items: center;
+}
+
+.video-cell {
+  position: relative;
+
+}
+
+.iconFont {
+  position: absolute;
+  top: 10px;
+  text-align: right;
+  width: 100%;
+}
+
+.waning-cards {
+  height: calc(100% - 80px);
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.one_text_detail {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.warning-card {
+  background: url("~@/assets/images/bg_10.png") no-repeat center center;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 4px;
+  padding: 4px 4px 4px 10px;
+  box-sizing: border-box;
+}
+
+.warning-image {
+  width: 70px;
+  height: 80px;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.warning-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.warning-info {
+  flex: 1;
+}
+
+.info-item {
+  margin-bottom: 4px;
+  color: #fff;
+  font-size: 14px;
+}
+
+.label {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.highlight {
+  color: #00f0ff;
+}
+
+.tag {
+  background: rgba(250, 177, 21, 0.2);
+  border-radius: 8px;
+  border: 1px solid #ffac26;
+  color: #fff;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 12px;
+  margin-left: 10px;
+}
+
+.list-Box {
+  background-color: #0274ff;
+  color: #fff;
+  line-height: 50px;
+  text-align: center;
+  font-weight: bold;
+}
+
+.list-list {
+  background-color: #0017498a;
+  color: #000;
+  text-align: center;
+  line-height: 100px;
+  height: 100px;
+  color: #fff;
+}
+
+.listTr {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  // max-width: 100%;
+  cursor: pointer;
+}
+
+::v-deep .el-input__inner {
+  background-color: #273467d9;
+  color: #fff;
+  border: none;
+}
+
+::v-deep .el-range-input {
+  background-color: #273467d9;
+  color: #fff;
+}
+::v-deep .el-table{
+  border: none !important;
+  background-color: transparent !important;
+      --el-table-border-color: transparent !important;
+}
+::v-deep .el-table tr{
+  background-color: #072b56bf !important;
+}
+::v-deep .el-table th.el-table__cell {
+  background-color: #273467d9;
+  color: #fff;
+}
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
+  background-color: #094c9dbf !important;
+}
+::v-deep .el-table .el-table__cell{
+  z-index:0 !important;
+  position:static;
+}
+::v-deep .el-table td.el-table__cell{
+
+  color: #fff !important;
+}
+::v-deep .el-table--border .el-table__cell{
+  border-color: #3b3b3bbf !important;
+}
+::v-deep .el-pagination__total{
+  color: #fff !important;
+}
+::v-deep .el-pagination.is-background .btn-next:disabled, .el-pagination.is-background .btn-prev:disabled{
+      background-color: #212c59;
+}
+::v-deep .el-pagination.is-background .btn-next:disabled, .el-pagination.is-background .btn-prev:disabled{
+  background-color: #212c59 !important;
+}
+::v-deep .el-date-editor .el-range-separator{
+  color: #fff !important;
 }
 </style>

src/views/StationLevel/layout/VideoMore.vue

@@ -1,130 +1,304 @@
 <template>
-  <div class="video-more-container">
-    <el-carousel style="height: 100%;" motion-blur indicator-position="none" :autoplay="false"
-      @change="handleCarouselChange">
-      <el-carousel-item v-for="(item, index) in sbList" :key="index">
-        <div class="video-grid" v-if="activeIndex == index">
-          <div v-for="(items, indexs) in item" :key="indexs" class="video-cell">
-            <WsIframe :sbbh="items.sbbh" />
-          </div>
+  <div class="entrance">
+    <div class="flex just-between content ">
+      <div class="contentLeft">
+        <div v-if="listSxt.ClGzy.length>0">
+          <el-carousel style="height: 100%;" motion-blur indicator-position="none" @change="clhandleCarouselChange"
+            :autoplay="false">
+            <el-carousel-item v-for="(item, index) in listSxt.ClGzy" :key="index">
+              <div class="video-grid" v-if="clActiveIndex == index">
+                <div v-for="(items, indexs) in item" :key="indexs"
+                  :class="item.length == 2 ? 'video-cell' : 'video-cellMax'">
+                  <WsIframe :sbbh="items.sbbh" />
+                </div>
+              </div>
+            </el-carousel-item>
+          </el-carousel>
         </div>
-      </el-carousel-item>
-    </el-carousel>
+        <Empty v-else :show="listSxt.ClGzy.length ==0" />
+      </div>
+      <div class="contentRight">
+        <div v-if="listSxt.RlGzy.length >0">
+          <el-carousel style="height: 100%;" motion-blur indicator-position="none" @change="rlhandleCarouselChange"
+            :autoplay="false">
+            <el-carousel-item v-for="(item, index) in listSxt.RlGzy" :key="index">
+              <div class="video-grid" v-if="rlActiveIndex == index">
+                <div v-for="(items, indexs) in item" :key="indexs"
+                  :class="item.length == 2 ? 'video-cell' : 'video-cellMax'">
+                  <WsIframe :sbbh="items.sbbh" />
+                </div>
+              </div>
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+        <Empty v-else :show="listSxt.RlGzy.length == 0" />
+      </div>
+    </div>
+
   </div>
+
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import Empty from "@/components/MyComponents/Empty/index.vue";
+import {
+  JczselectById
+} from "@/api/mosty-jcz";
 import WsIframe from '@/components/wsIframe/index.vue'
-import emitter from "@/utils/eventBus.js";
-const activeIndex = ref(0)
-const handleCarouselChange = (index) => {
-  activeIndex.value = index
-}
-const sbList = ref([1])
-onMounted(() => {
-  emitter.on("getSxtGetList", (res) => {
-    sbList.value = Array.from({ length: Math.ceil(res.length / 4) == 0 ? 1 : Math.ceil(res.length / 4) }, (_, row) => {
-      return res.slice(row * 4, row * 4 + 4)
-    }
-    );
-  })
+import { useRoute } from 'vue-router'
+const listSxt = ref({
+  ClGzy: [],
+  RlGzy: [],
 })
+const routeId = ref()
+onMounted(() => {
+  routeId.value = route.query.id
+  getSxtGetList()
+})
+const route = useRoute()
+const clActiveIndex = ref(0)
+const rlActiveIndex = ref(0)
+const clhandleCarouselChange = (val) => {
+  clActiveIndex.value = val
+}
+const rlhandleCarouselChange = (val) => {
+  rlActiveIndex.value = val
+}
+const getSxtGetList = () => {
+  JczselectById({ id: routeId.value }).then(res => {
+    const clgzy = res.sxtList ? res.sxtList.filter(item => item.gzyfx == '01') : []
+    const rlgzy = res.sxtList ? res.sxtList.filter(item => item.gzyfx == '02') : []
+    listSxt.value.ClGzy = clgzy.length > 0 ? Array.from({ length: Math.ceil(clgzy.length / 2) == 0 ? 1 : Math.ceil(clgzy.length / 2) }, (_, row) => {
+      return clgzy.slice(row * 2, row * 2 + 2)
+    }) : []
+    listSxt.value.RlGzy = rlgzy.length > 0 ? Array.from({ length: Math.ceil(rlgzy.length / 2) == 0 ? 1 : Math.ceil(rlgzy.length / 2) }, (_, row) => {
+      return rlgzy.slice(row * 2, row * 2 + 2)
+    }) : []
+
+    console.log(listSxt.value);
+  })
+}
+
 </script>
 
-<style lang="scss" scoped>
-.video-more-container {
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-  box-sizing: border-box;
-  position: relative;
+<style scoped lang="scss">
+.entrance {
+  background-size: 100%;
 
-  .switch-btn {
+  // padding: 20px 0;
+  .cloes {
+    width: 23px;
     position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    cursor: pointer;
-    transition: all 0.3s;
-    color: #fff;
-    z-index: 1;
+    top: 4px;
+    left: 92%;
 
-    &.prev {
-      left: 0;
-      border-radius: 0 4px 4px 0;
-    }
-
-    &.next {
-      right: 0;
-      border-radius: 4px 0 0 4px;
+    img {
+      width: 100%;
     }
   }
 
-  .video-grid {
-    padding: 10px;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(2, 1fr);
-    gap: 10px;
-    height: 100%;
-  }
-
-  .video-cell {
-
-    position: relative;
-    background: url('~@/assets/images/bg13.png') no-repeat;
-    background-size: 100% 100%;
-    border-radius: 4px;
-    overflow: hidden;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
-  }
-
-  .video-wrapper {
-    background-color: #000;
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-
-  .video-player {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .video-controls {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 10px;
-    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  .bt {
+    margin-top: 14px;
     color: #fff;
+
+    .headline {
+      width: 70%;
+      background: url("~@/assets/images/tc/bt.png");
+      line-height: 38px;
+      background-repeat: no-repeat;
+      padding-left: 35px;
+      font-size: 16px;
+      font-family: "微软雅黑";
+      font-weight: 700;
+    }
+
+    .headbut {
+      width: 159px;
+      margin-right: 20px;
+      height: 43px;
+      line-height: 43px;
+      text-align: center;
+      background: url("~@/assets/images/streetBi/wxz.png");
+      background-size: 100% 100%;
+    }
   }
 
-  .time-display {
-    font-size: 14px;
-  }
+  .content {
+    width: 100%;
+    // margin-top: 10px;
+    color: #fff;
 
-  .control-buttons {
-    display: flex;
-    gap: 15px;
+    .contentLeft {
+      width: 50%;
 
-    i {
-      cursor: pointer;
-      font-size: 20px;
+      .leftImg {
+        width: 97px;
+        height: 98px;
+
+        img {
+          width: 100%;
+        }
+      }
+
+      .leftMag {
+        font-size: 20px;
+        height: 98px;
+        align-content: space-around;
+        margin-left: 10px;
+
+        .ld {
+          font-family: "YSBTH";
+          background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+
+        .name {
+          font-family: "方正黑体";
+        }
+      }
+
+      .dutyList {
+        padding-left: 16px;
+        margin-bottom: 5px;
+
+        .dutyImg {
+          width: 27px;
+        }
+
+        .occupation {
+          font-size: 20px;
+          font-family: "方正黑体";
+          width: calc(100% - 70px);
+
+          .number {
+            color: #02fafb;
+          }
+        }
+      }
+    }
+
+    .contentRight {
+      width: 50%;
+      // padding: 0 20px;
+
+      .right {
+        font-size: 18px;
+        font-family: "方正黑体";
+        margin-bottom: 11px;
+
+        .number {
+          width: 40%;
+          color: #02fafb;
+          font-size: 20px;
+        }
+      }
+    }
+
+    .box {
+      overflow: auto;
+      // height: 400px;
+    }
+
+    // 标题样式
+    .section-title {
+      padding: 10px 15px;
+      background: rgba(17, 94, 201, 0.3);
+      color: #fff;
+      font-size: 16px;
+      font-weight: bold;
+      // border-left: 3px solid #02fafb;
+      // margin-bottom: 10px;
+    }
+
+    // 感知源头列表样式
+    .flex.modesl {
+      padding: 10px 15px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      transition: background-color 0.3s;
 
       &:hover {
-        color: #409EFF;
+        background-color: rgba(17, 94, 201, 0.2);
+      }
+
+      // 信息容器样式
+      .info-container {
+        width: calc(100% - 60px);
+
+        .ld,
+        div {
+          color: #fff;
+          font-size: 16px;
+          margin-bottom: 5px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        div:last-child {
+          color: #02fafb;
+          font-size: 14px;
+          margin-bottom: 0;
+        }
+      }
+
+      // 播放按钮样式
+      >div:last-child {
+        background: url("~@/assets/images/streetBi/wxz.png") no-repeat;
+        background-size: 100% 100%;
+        padding: 5px 15px;
+        cursor: pointer;
+        transition: transform 0.2s;
+        font-size: 14px;
+        height: 30px;
+        line-height: 20px;
+        text-align: center;
+        min-width: 50px;
+
+        &:hover {
+          transform: scale(1.05);
+        }
       }
     }
   }
 }
 
+.demo-tabs {
+  padding: 0 15px;
+}
+
+::v-deep .el-tabs--border-card {
+  background-color: #ffffff00;
+  border: none;
+
+  .el-tabs__header {
+    background-color: #ffffff00;
+    border-color: #3b68c3;
+
+    .el-tabs__item {
+      color: #fff;
+    }
+  }
+
+  .el-tabs__item.is-active {
+    background-color: #115ec9;
+    color: #fff;
+    border-color: transparent;
+  }
+}
+
 ::v-deep .el-carousel__container {
-  height: 100% !important;
+  height: 420px;
+}
+
+.video-cell {
+  height: 210px;
+  padding: 2px 10px
+}
+
+.video-cellMax {
+  height: 400px;
+  padding: 25px;
 }
 </style>

src/views/backOfficeSystem/peopleManag/checkpoint/components/editAddForm.vue

@@ -63,11 +63,10 @@
         </el-form-item>
         <el-form-item style="width: 85%" prop="jd" label="坐标位置">
           <div class="latlng flex">
-            <el-input :disabled="true" v-model="listQuery.jd" clearable placeholder="请选择坐标"
+            <el-input :disabled="false" v-model="listQuery.jd" clearable placeholder="请选择坐标"
               style="width: 42%"></el-input>
-            <el-input :disabled="true" v-model="listQuery.wd" clearable placeholder="请选择坐标"
+            <el-input :disabled="false" v-model="listQuery.wd" clearable placeholder="请选择坐标"
               style="width: 42%; margin-left: 1%"></el-input>
-
             <el-button @click="selectLocation" :disabled="forbidden">选择定位</el-button>
           </div>
         </el-form-item>
@@ -213,16 +212,24 @@ const selectLocation = () => {
 //获取经纬度
 const chackLat = () => {
   const { jd, wd } = listQuery.value;
-  console.log(jd, wd);
-
+  let icon = require("@/assets/images/bi/gzy.png");
   emitter.emit("deletePointArea", "jczMap_Gzy");
+
+  if (listQuery.value.zqlx == '2') {
+    icon = require("@/assets/images/bi/gzy.png");
+  } else {
+    icon = require("@/assets/images/z.png");
+  }
+
   if (jd && wd) {
     setTimeout(() => {
+      emitter.emit("deletePointArea", "jczMap_Gzy");
       emitter.emit("addPointArea", {
         coords: [{ jd, wd }],
-        icon: require("@/assets/images/bi/gzy.png"),
+        icon,
         flag: "jczMap_Gzy"
       });
+      emitter.emit("setMapCenter", { location: [jd, wd], zoomLevel: 10 });
     }, 1000);
   }
 };

src/views/backOfficeSystem/peopleManag/checkpoint/components/gzyInfo.vue

@@ -23,7 +23,8 @@
         </div>
       </div>
       <div class="btn_bom">
-        <button class="dp-default small" @click="chooceItem(item)" style="margin-right: 10px;">选择</button>
+           <button class="dp-default small" @click="chooceItem(item,'cl')" style="margin-right: 10px;">设置出林</button>
+        <button class="dp-default small" @click="chooceItem(item,'rl')" style="margin-right: 10px;">设置入林</button>
         <button class="dp-default small" @click="openVideo(item)">视频播放</button>
       </div>
     </div>
@@ -40,8 +41,7 @@ const info = ref([]); //警情数据
 const emits = defineEmits(['chooseVideo'])
 onMounted(() => {
   emitter.on("showGzyInfo", (res) => {
-    console.log(res, 'resresresres')
-    info.value = [res];
+    info.value =res ;
     show.value = true;
   });
 });
@@ -49,14 +49,16 @@ onUnmounted(() => {
   emitter.off("showGzyInfo");
 });
 
-function chooceItem(item) {
-  emits('chooseVideo', item)
-}
+function chooceItem(item,type) {
+  if (type === 'cl') {
+      emits('chooseVideo', {...item,gzyfx:'02'})
+  } else {
+      emits('chooseVideo', {...item,gzyfx:'01'})
+  }
 
+}
 // 打开视频
 function openVideo(item) {
-  console.log(item, 'item');
-
   let params = {
     ...item,
     splitNum: 1
@@ -91,7 +93,7 @@ function close() {
     display: flex;
     justify-content: space-between;
     padding: 0;
-
+  background: #052342;
     .close {
       font-size: 20px;
       font-weight: 200;

src/views/backOfficeSystem/peopleManag/checkpoint/components/perceptionSource.vue

@@ -8,18 +8,26 @@
       </div>
     </div>
     <div class="cntinfo">
-      <el-form ref="formRef" :model="listQuery" :rules="rules" :inline="true" label-position="top">
-        <el-form-item style="width: 40%" label="感知源">
+      <el-form ref="formRef" :model="listQuery" :rules="rules" label-position="top">
+        <el-form-item label="检查站名称">
           <el-input v-model="JczMc" disabled />
         </el-form-item>
-        <el-form-item style="width: 40%" label="感知源">
-          <!-- <div class="diviput" @click="showJcz = true"> -->
-          <div class="diviput">
-            <span v-if="listQuery.sxtList && listQuery.sxtList.length > 0">
-              <el-tag closable @close="handleClose(index)" v-for="(item, index) in listQuery.sxtList" :key="index"> {{
+        <el-form-item label="入林感知源">
+          <div class="diviput" @click="openCl('rl')">
+            <span v-if="RlGzy && RlGzy.length > 0">
+              <el-tag closable @close="handleClose(index,'rl')" v-for="(item, index) in RlGzy" :key="index"> {{
                 item.sbmc }} </el-tag>
             </span>
-            <span class="placeholder" v-else> 请选择感知源</span>
+            <span class="placeholder" v-else> 请选择入林感知源</span>
+          </div>
+        </el-form-item>
+        <el-form-item label="出林感知源">
+          <div class="diviput" @click="openCl('cl')">
+            <span v-if="ClGzy && ClGzy.length > 0">
+              <el-tag closable @close="handleClose(index,'cl')" v-for="(item, index) in ClGzy" :key="index"> {{
+                item.sbmc }} </el-tag>
+            </span>
+            <span class="placeholder" v-else> 请选择出林感知源</span>
           </div>
         </el-form-item>
       </el-form>
@@ -41,15 +49,16 @@ import { sxtBatch, JczselectById } from '@/api/mosty-jcz'
 import { ElMessage } from "element-plus";
 import GdMap from "@/components/GdMap/index.vue";
 import gzyInfo from "./gzyInfo.vue";
-import { ysSxtGetList } from '@/api/yszx.js'
+import { ysSxtGetList, ysSxtgetPageList } from '@/api/yszx.js'
 import emitter from "@/utils/eventBus.js";
 const emit = defineEmits(['getjczgetXfllList'])
 const search = ref(null)
-
+const ClGzy = ref([])
+const RlGzy = ref([])
 const listQuery = ref({})
 onMounted(() => {
   tabHeightFn()
-  console.log("xxxx");
+
 });
 const data = ref([])
 
@@ -63,14 +72,26 @@ const init = (row) => {
   JczMc.value = row.jczmc
   JczselectById({ id: row.id }).then(res => {
     if (res) {
-      listQuery.value.sxtList = res.sxtList ? res.sxtList : [];
+      ClGzy.value=res.sxtList.filter(item => item.gzyfx=='02')
+      RlGzy.value=res.sxtList.filter(item => item.gzyfx=='01')
+      const icon = require("@/assets/images/z.png");
+      const iconjcz = require("@/assets/point/sp.png");
+      emitter.emit("setMapCenter", { location: [res.jd, res.wd], zoomLevel: 10 });
+      if (res.jczlx == '01') {
+        emitter.emit("addPointArea", { coords: [res], icon, flag: "jczMap_hm" });
+      } else {
+        emitter.emit("addPointArea", { coords: [res], icon: iconjcz, flag: "jczMap_hm" });
+      }
     }
   })
 };
 //保存
 const _onSave = () => {
-  sxtBatch(listQuery.value).then((res) => {
-    console.log(res);
+  const promes = {
+    ...listQuery.value,
+    sxtList: [...RlGzy.value, ...ClGzy.value]
+  }
+  sxtBatch(promes).then((res) => {
     ElMessage({ message: "新增成功", type: "success" });
     emit("getjczgetXfllList");
     close()
@@ -114,6 +135,7 @@ const pageDatas = reactive({
   ]
 });
 
+
 //页面关闭
 const close = () => {
   dialogGzy.value = false;
@@ -121,9 +143,16 @@ const close = () => {
 };
 // 选择视频
 function chooseVideo(sxt) {
-  console.log(sxt, 'sxt');
-  listQuery.value.sxtList.push(sxt)
+  if (sxt.gzyfx=='01') {
+   RlGzy.value.find(item => item.sbbh === sxt.sbbh)? ElMessage({ message: "入林感知源已选择", type: "warning" }) :  RlGzy.value.push(sxt)
+  } else {
+    ClGzy.value.find(item => item.sbbh === sxt.sbbh)? ElMessage({ message: "出林感知源已选择", type: "warning" }) :  ClGzy.value.push(sxt)
+  }
 }
+
+
+
+  // listQuery.value.sxtList.find(item => item.sbbh === sxt.sbbh) ? ElMessage({ message: "感知源已选择", type: "warning" }) : listQuery.value.sxtList.push(sxt)
 // 表格高度计算
 const tabHeightFn = () => {
   console.log(search.value);
@@ -134,22 +163,60 @@ const tabHeightFn = () => {
   };
 };
 const sxtGetList = () => {
+  const icon = require("@/assets/point/kk.png")
   ysSxtGetList().then(res => {
-    emitter.emit("addPointArea", {
-      coords: res,
-      icon: require("@/assets/point/sp.png"),
-      flag: "sp"
-    });
-
+    // 筛选出有效的地理坐标数据，经度范围(-180, 180)，纬度范围(-90, 90)
+    const coords = res.filter(item => {
+      // 确保经纬度存在且为有效数字，并在合理范围内
+      const jd = Number(item.jd)
+      const wd = Number(item.wd)
+      return !isNaN(jd) && jd > 0 && !isNaN(wd) && wd > 0
+    })
+    emitter.emit("addPoint",
+      {
+        coords: coords,
+        icon: icon,
+        flag: 'sp',
+        scale: 0.6,
+        fontColor: "#FF0000"
+      })
   })
 }
+
+
 defineExpose({ init });
+// 打开弹窗
+const lxSxt = ref('')
+const openCl = (val) => {
+  showJcz.value = true
+  lxSxt.value = val
+}
+
 const showJcz = ref(false)
 const GzyMsg = (val) => {
-  listQuery.value.sxtList = val
+  if (lxSxt.value == 'cl') {
+    ClGzy.value = val.map(item => {
+      return {
+        ...item,
+        gzyfx: '02'
+      }
+
+    })
+  } else if (lxSxt.value == 'rl') {
+    RlGzy.value = val.map(item => {
+      return {
+        ...item,
+        gzyfx: '01'
+      }
+    })
+  }
 }
-const handleClose = (idx) => {
-  listQuery.value.sxtList.splice(idx, 1)
+const handleClose = (idx,type) => {
+  if (type == 'cl') {
+    ClGzy.value.splice(idx, 1)
+  } else if (type == 'rl') {
+    RlGzy.value.splice(idx, 1)
+  }
 }
 </script>
 
@@ -261,6 +328,8 @@ const handleClose = (idx) => {
   border: 1px solid #c0c4cc;
   color: #000;
   min-height: 32px;
+  max-height: 100px;
+  overflow: auto;
   // line-height: 32px;
   padding: 0 10px;
   border-radius: 5px;

src/views/home/components/CarWarning.vue

@@ -8,9 +8,11 @@
       class="warning-card"
       v-for="(item, index) in warningList.data"
       :key="index"
+         @click="plotThetrajectory(item.yjRysfzh)"
     >
       <div class="warning-image">
-        <img :src="item.yjTp" alt="预警图片" />
+        <img :src="item.yjTp" alt="预警图片" v-if="item.yjTp&&!item.yjTp.includes('baidu')" />
+          <img src="@/assets/images/car.png" alt="预警图片" v-else/>
       </div>
       <div class="warning-info">
         <div class="info-item">
@@ -38,8 +40,9 @@
 
 <script setup>
 import { reactive, ref, getCurrentInstance } from "vue";
-import { jczgetPageList } from "@/api/mosty-jcz.js";
+import { jczgetPageList,tbYjxxGsgj } from "@/api/mosty-jcz.js";
 import Empty from "@/components/MyComponents/Empty/index.vue";
+import emitter from "@/utils/eventBus.js";
 const props = defineProps({
   jczId: {
     type: String,
@@ -82,6 +85,100 @@ const rollingLoading = () => {
     getPageList();
   }
 };
+// 轨迹上图
+const plotThetrajectory = (val) => {
+
+  tbYjxxGsgj({
+    startTime: null,
+    endTime: null,
+    yjRysfzh: val
+  }).then(res => {
+    console.log(res);
+    if (res && res[0].list.length > 0) {
+      let coords = res[0].list.map(item => {
+        return [item.jd, item.wd]
+      })
+      // const coords = [
+      //   [
+      //     94.3695802486277983689433312974870204925537109375,
+      //     29.659805088901098457654370577074587345123291015625
+      //   ],
+      //   [
+      //     94.369054723455093380835023708641529083251953125,
+      //     29.66032233866609857386720250360667705535888671875
+      //   ],
+      //   [
+      //     94.3684916577901020673380116932094097137451171875,
+      //     29.660979382630298317735650925897061824798583984375
+      //   ],
+      //   [
+      //     94.3683415069466065006054122932255268096923828125,
+      //     29.660755708570601285600787377916276454925537109375
+      //   ],
+      //   [
+      //     94.3675662718153063224235665984451770782470703125,
+      //     29.659987675165101705943015986122190952301025390625
+      //   ],
+      //   [
+      //     94.366890606904092919648974202573299407958984375,
+      //     29.659353928438999759009675472043454647064208984375
+      //   ],
+      //   [
+      //     94.3656729217579055557507672347128391265869140625,
+      //     29.6582345740253998656044132076203823089599609375
+      //   ],
+      //   [
+      //     94.3646650204280064144768402911722660064697265625,
+      //     29.657336173164399184543071896769106388092041015625
+      //   ],
+      //   [
+      //     94.364147680070203705327003262937068939208984375,
+      //     29.6567231392728984928908175788819789886474609375
+      //   ],
+      //   [
+      //     94.3636436022359958997185458429157733917236328125,
+      //     29.65662527779360146951148635707795619964599609375
+      //   ],
+      //   [
+      //     94.362367320062702447103220038115978240966796875,
+      //     29.6567138191363000032652053050696849822998046875
+      //   ],
+      //   [
+      //     94.3614396063849056872641085647046566009521484375,
+      //     29.656713819753800720491199172101914882659912109375
+      //   ],
+      //   [
+      //     94.3603242001151016893345513381063938140869140625,
+      //     29.65673712009380125209645484574139118194580078125
+      //   ],
+      //   [
+      //     94.358962121621999585840967483818531036376953125,
+      //     29.65674177535930056137658539228141307830810546875
+      //   ],
+      //   [
+      //     94.3576684689077040957272402010858058929443359375,
+      //     29.65681167375640114869383978657424449920654296875
+      //   ],
+      //   [
+      //     94.3564404495050013110812869854271411895751953125,
+      //     29.65685827438640131958891288377344608306884765625
+      //   ],
+      //   [
+      //     94.3547512464013067301493720151484012603759765625,
+      //     29.656946809372101370172458700835704803466796875
+      //   ]
+      // ]
+      emitter.emit('drawLineAnimation', {
+        type: "solid",
+        coords: coords,
+        isclear: true,
+        flag: "yjLine"
+      })
+    } else {
+      ElMessage({ message: '暂无轨迹数据', type: 'warning' });
+    }
+  })
+}
 getPageList();
 </script>
 
@@ -104,7 +201,7 @@ getPageList();
 }
 
 .warning-image {
-  width: 100px;
+  width: 60px;
   height: 80px;
   img {
     width: 100%;

src/views/home/components/PeoWarning.vue

@@ -8,9 +8,11 @@
       class="warning-card"
       v-for="(item, index) in warningList.data"
       :key="index"
+      @click="plotThetrajectory(item.yjRysfzh)"
     >
       <div class="warning-image">
-        <img :src="item.yjTp" alt="预警图片" />
+        <img :src="item.yjTp" alt="预警图片" v-if="item.yjTp&&!item.yjTp.includes('baidu')" />
+          <img src="@/assets/images/default_male.png" alt="预警图片" v-else/>
       </div>
       <div class="warning-info">
         <div class="info-item">
@@ -46,9 +48,11 @@
 
 <script setup>
 import { reactive, ref, getCurrentInstance } from "vue";
-import { jczgetPageList } from "@/api/mosty-jcz.js";
+import { jczgetPageList,tbYjxxGsgj } from "@/api/mosty-jcz.js";
 import { IdCard } from "@/utils/dict.js";
+import {ElMessage} from 'element-plus'
 import Empty from "@/components/MyComponents/Empty/index.vue";
+import emitter from "@/utils/eventBus.js";
 const props = defineProps({
   jczId: {
     type: String,
@@ -91,6 +95,101 @@ const rollingLoading = () => {
     getPageList();
   }
 };
+
+// 轨迹上图
+const plotThetrajectory = (val) => {
+
+  tbYjxxGsgj({
+    startTime: null,
+    endTime: null,
+    yjRysfzh: val
+  }).then(res => {
+    console.log(res);
+    if (res && res[0].list.length > 0) {
+      let coords = res[0].list.map(item => {
+        return [item.jd, item.wd]
+      })
+      // const coords = [
+      //   [
+      //     94.3695802486277983689433312974870204925537109375,
+      //     29.659805088901098457654370577074587345123291015625
+      //   ],
+      //   [
+      //     94.369054723455093380835023708641529083251953125,
+      //     29.66032233866609857386720250360667705535888671875
+      //   ],
+      //   [
+      //     94.3684916577901020673380116932094097137451171875,
+      //     29.660979382630298317735650925897061824798583984375
+      //   ],
+      //   [
+      //     94.3683415069466065006054122932255268096923828125,
+      //     29.660755708570601285600787377916276454925537109375
+      //   ],
+      //   [
+      //     94.3675662718153063224235665984451770782470703125,
+      //     29.659987675165101705943015986122190952301025390625
+      //   ],
+      //   [
+      //     94.366890606904092919648974202573299407958984375,
+      //     29.659353928438999759009675472043454647064208984375
+      //   ],
+      //   [
+      //     94.3656729217579055557507672347128391265869140625,
+      //     29.6582345740253998656044132076203823089599609375
+      //   ],
+      //   [
+      //     94.3646650204280064144768402911722660064697265625,
+      //     29.657336173164399184543071896769106388092041015625
+      //   ],
+      //   [
+      //     94.364147680070203705327003262937068939208984375,
+      //     29.6567231392728984928908175788819789886474609375
+      //   ],
+      //   [
+      //     94.3636436022359958997185458429157733917236328125,
+      //     29.65662527779360146951148635707795619964599609375
+      //   ],
+      //   [
+      //     94.362367320062702447103220038115978240966796875,
+      //     29.6567138191363000032652053050696849822998046875
+      //   ],
+      //   [
+      //     94.3614396063849056872641085647046566009521484375,
+      //     29.656713819753800720491199172101914882659912109375
+      //   ],
+      //   [
+      //     94.3603242001151016893345513381063938140869140625,
+      //     29.65673712009380125209645484574139118194580078125
+      //   ],
+      //   [
+      //     94.358962121621999585840967483818531036376953125,
+      //     29.65674177535930056137658539228141307830810546875
+      //   ],
+      //   [
+      //     94.3576684689077040957272402010858058929443359375,
+      //     29.65681167375640114869383978657424449920654296875
+      //   ],
+      //   [
+      //     94.3564404495050013110812869854271411895751953125,
+      //     29.65685827438640131958891288377344608306884765625
+      //   ],
+      //   [
+      //     94.3547512464013067301493720151484012603759765625,
+      //     29.656946809372101370172458700835704803466796875
+      //   ]
+      // ]
+      emitter.emit('drawLineAnimation', {
+        type: "solid",
+        coords: coords,
+        isclear: true,
+        flag: "yjLine"
+      })
+    } else {
+      ElMessage({ message: '暂无轨迹数据', type: 'warning' });
+    }
+  })
+}
 getPageList();
 </script>
 
@@ -113,7 +212,7 @@ getPageList();
 }
 
 .warning-image {
-  width: 100px;
+  width: 60px;
   height: 80px;
   img {
     width: 100%;

src/views/home/components/entrance.vue

@@ -5,75 +5,107 @@
     </div>
     <div class="flex just-between align-center bt">
       <div class="headline">{{ JczData.jczmc }}</div>
-      <div class="headbut"  @click="enterLevel">进入检查站</div>
+      <div class="headbut" @click="enterLevel">进入检查站</div>
     </div>
-    <div class="flex just-between content">
-      <div class="contentLeft">
-        <div class="flex">
-          <div class="leftImg">
-            <img src="@/assets/images/tc/zbld.png" alt="" srcset="" />
+    <el-tabs v-model="activeName" class="demo-tabs" type="border-card" @tab-click="handleClick">
+      <el-tab-pane label="检查站信息" name="检查站信息">
+        <div class="flex just-between content">
+          <div class="contentLeft">
+            <div class="flex">
+              <div class="leftImg">
+                <img src="@/assets/images/tc/zbld.png" alt="" srcset="" />
+              </div>
+              <div class="leftMag">
+                <div class="ld">值班领导</div>
+                <div class="name" v-if="BbMag.fzrXm">{{ BbMag?.fzrXm }}</div>
+                <div class="name" v-else>暂无报备数据</div>
+              </div>
+            </div>
+            <div class="flex">
+              <div class="leftImg">
+                <img src="@/assets/images/tc/zbld.png" alt="" srcset="" />
+              </div>
+              <div class="leftMag">
+                <div class="ld">联系电话</div>
+                <div class="name" v-if="BbMag.fzrXm">{{ BbMag?.fzrLxdh }}</div>
+                <div class="name" v-else>暂无报备数据</div>
+              </div>
+            </div>
+            <div class="dutyList flex just-between align-center">
+              <div class="dutyImg">
+                <img src="@/assets/images/tc/zbfj.png" alt="" srcset="" />
+              </div>
+              <div class="occupation">
+                值班民警：<span class="number">{{ BbMag.mjsl ? BbMag.mjsl : 0 }}</span>
+              </div>
+            </div>
+            <div class="dutyList flex just-between align-center">
+              <div class="dutyImg">
+                <img src="@/assets/images/tc/zbfj.png" alt="" srcset="" />
+              </div>
+              <div class="occupation">
+                值班辅警：<span class="number">{{ BbMag.fjsl ? BbMag.fjsl : 0 }}</span>
+              </div>
+            </div>
           </div>
-          <div class="leftMag">
-            <div class="ld">值班领导</div>
-            <div class="name" v-if="BbMag.fzrXm">{{ BbMag?.fzrXm }}</div>
-             <div class="name" v-else>暂无报备数据</div>
+          <div class="contentRight">
+            <div class="flex align-center right just-between" v-for="(item, index) in ArrList" :key="index">
+              <div>{{ item.name }}</div>
+              <div class="number">
+                <span>{{ item.count }}</span>
+              </div>
+            </div>
           </div>
         </div>
-        <div class="flex">
-          <div class="leftImg">
-            <img src="@/assets/images/tc/zbld.png" alt="" srcset="" />
+      </el-tab-pane>
+      <el-tab-pane label="感知源" name="感知源">
+        <div class="flex just-between content ">
+          <div class="contentLeft">
+            <div class="box">
+               <div class="section-title">
+                 入林感知源
+               </div>
+               <div v-for="(item,index) in gzyList.RlGzy" class="flex just-between modesl" :key="index">
+                   <div class="info-container">
+                     <div>{{ item.sbmc }}</div>
+                     <div>{{item .sbbh }}</div>
+                   </div>
+                  <div @click="openVideo(item)">播放</div>
+              </div>
+            </div>
           </div>
-          <div class="leftMag">
-            <div class="ld">联系电话</div>
-            <div class="name" v-if="BbMag.fzrXm">{{ BbMag?.fzrLxdh }}</div>
-            <div class="name" v-else>暂无报备数据</div>
+          <div class="contentRight">
+            <div class="box">
+               <div class="section-title">
+                 出林感知源
+               </div>
+                <div v-for="(item,index) in gzyList.ClGzy" class="flex just-between modesl" :key="index">
+                   <div class="info-container">
+                     <div>{{ item.sbmc }}</div>
+                     <div>{{item .sbbh }}</div>
+                   </div>
+                  <div @click="openVideo(item)">播放</div>
+              </div>
+            </div>
           </div>
         </div>
-        <div class="dutyList flex just-between align-center">
-          <div class="dutyImg">
-            <img src="@/assets/images/tc/zbfj.png" alt="" srcset="" />
-          </div>
-          <div class="occupation">
-            值班民警：<span class="number">{{ BbMag.mjsl?BbMag.mjsl:0 }}</span>
-          </div>
-        </div>
-        <!-- <div class="dutyList flex just-between align-center">
-          <div class="dutyImg">
-            <img src="@/assets/images/tc/zbfj.png" alt="" srcset="" />
-          </div>
-          <div class="occupation">
-            值班武警：<span class="number">{{ BbMag?.ryList.length }}</span>
-          </div>
-        </div> -->
-        <div class="dutyList flex just-between align-center">
-          <div class="dutyImg">
-            <img src="@/assets/images/tc/zbfj.png" alt="" srcset="" />
-          </div>
-          <div class="occupation">
-            值班辅警：<span class="number">{{ BbMag.fjsl?BbMag.fjsl:0 }}</span>
-          </div>
-        </div>
-      </div>
-      <div class="contentRight">
-        <div class="flex align-center right just-between" v-for="(item, index) in ArrList" :key="index">
-          <div>{{ item.name }}</div>
-          <div class="number">
-            <span>{{ item.count }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
+      </el-tab-pane>
+    </el-tabs>
+
   </div>
+  <VideoCnt/>
 </template>
 
 <script setup>
 import { ref, reactive } from "vue";
+import VideoCnt from "@/components/video/index.vue";
 import emitter from "@/utils/eventBus.js";
 import {
   jczqueryById,
   jczCountWay,
   jczgetcountCrl,
-  jczGzrycountCrl
+  jczGzrycountCrl,
+  JczselectById
 } from "@/api/mosty-jcz";
 import { useRouter } from "vue-router";
 const props = defineProps({
@@ -87,7 +119,7 @@ const BbMag = ref({ ryList: [] });
 const getjczqueryByIdFeign = () => {
   jczqueryById({ jczid: props.JczData.id }).then((res) => {
     BbMag.value = res;
-    if (res) {
+    if (res && res.ryList) {
       BbMag.value.mjsl = res.ryList.filter((el) => {
         return el.ryMfjlb == '01'
       }).length
@@ -110,6 +142,34 @@ const enterLevel = () => {
   });
   window.open(hrefs.href, "_blank");
 };
+
+
+
+const activeName = ref('检查站信息')
+const gzyList = ref({
+  RlGzy: [],
+  ClGzy: [],
+})
+function openVideo(item) {
+  let params = {
+    ...item,
+    splitNum: 1
+  }
+  console.log(params);
+
+  emitter.emit("openGzyVideo", params)
+}
+const getJczselectById=()=>{
+  JczselectById({ id: props.JczData.id }).then((res) => {
+    gzyList.value.RlGzy=res.sxtList?res.sxtList.filter(item => item.gzyfx=='01'):[]
+    gzyList.value.ClGzy=res.sxtList?res.sxtList.filter(item => item.gzyfx=='02'):[]
+  });
+}
+getJczselectById()
+const handleClick = (val) => {
+
+
+}
 const cloes = () => {
   emitter.emit("showJcz");
 };
@@ -225,10 +285,12 @@ countWays();
 <style scoped lang="scss">
 .entrance {
   position: absolute;
-  width: 596px;
-  height: 471px;
-  background: url("~@/assets/images/tc/bg.png");
-  z-index: 9999;
+  width: 700px;
+  height: 570px;
+
+  background: url("~@/assets/images/tc/bg.png") no-repeat;
+  background-size: 100%;
+  z-index: 99;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -274,6 +336,7 @@ countWays();
   .content {
     width: 100%;
     margin-top: 10px;
+    color: #fff;
 
     .contentLeft {
       width: 50%;
@@ -341,6 +404,93 @@ countWays();
         }
       }
     }
+
+    .box {
+      overflow: auto;
+      height: 400px;
+    }
+
+    // 标题样式
+    .section-title {
+      padding: 10px 15px;
+      background: rgba(17, 94, 201, 0.3);
+      color: #fff;
+      font-size: 16px;
+      font-weight: bold;
+      border-left: 3px solid #02fafb;
+      margin-bottom: 10px;
+    }
+
+    // 感知源头列表样式
+    .flex.modesl {
+      padding: 10px 15px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      transition: background-color 0.3s;
+
+      &:hover {
+        background-color: rgba(17, 94, 201, 0.2);
+      }
+
+      // 信息容器样式
+      .info-container {
+        width: calc(100% - 60px);
+        .ld,
+        div {
+          color: #fff;
+          font-size: 16px;
+          margin-bottom: 5px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        div:last-child {
+          color: #02fafb;
+          font-size: 14px;
+          margin-bottom: 0;
+        }
+      }
+
+      // 播放按钮样式
+      > div:last-child {
+        background: url("~@/assets/images/streetBi/wxz.png") no-repeat;
+        background-size: 100% 100%;
+        padding: 5px 15px;
+        cursor: pointer;
+        transition: transform 0.2s;
+        font-size: 14px;
+        height: 30px;
+        line-height: 20px;
+        text-align: center;
+        min-width: 50px;
+        &:hover {
+          transform: scale(1.05);
+        }
+      }
+    }    }
+  }
+
+.demo-tabs {
+  padding: 0 15px;
+}
+
+::v-deep .el-tabs--border-card {
+  background-color: #ffffff00;
+  border: none;
+
+  .el-tabs__header {
+    background-color: #ffffff00;
+    border-color: #3b68c3;
+
+    .el-tabs__item {
+      color: #fff;
+    }
+  }
+
+  .el-tabs__item.is-active {
+    background-color: #115ec9;
+    color: #fff;
+    border-color: transparent;
   }
 }
 </style>

src/views/home/components/warning.vue

@@ -22,7 +22,9 @@
         :key="index"
       >
         <div class="warning-image">
-          <img :src="item.yjTp" alt="预警图片" />
+          <img :src="item.yjTp" alt="预警图片" v-if="item.yjTp" />
+          <img src="@/assets/images/car.png" alt="预警图片" v-else-if="linkQuery.yjLx == 2" />
+          <img src="@/assets/images/default_male.png" alt="预警图片" v-else/>
         </div>
         <div class="warning-info">
           <div class="info-item" v-if="linkQuery.yjLx == 2">

src/views/home/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="homeBox">
-    <GdMap></GdMap>
+    <GdMap :minZoom="6.6" :maxZoom="6.6"></GdMap>
     <!-- 头部 -->
 
     <Head></Head>
@@ -25,7 +25,7 @@
         </div>
       </div>
     </div>
-          <!-- <Warning></Warning> -->
+    <!-- <Warning></Warning> -->
 
     <!-- 右边 内容-->
     <div class="home-aside asideR">
@@ -42,11 +42,9 @@
         </div>
       </div>
     </div>
-    <div class="asideB" >
-      <img src="@/assets/images/bi/gzy.png"  @click="getsxtGetList"/>
-    </div>
   </div>
   <Entrance v-if="showEntrance" :JczData="JczData" />
+
   <PopupWindows />
 </template>
 
@@ -63,52 +61,163 @@ import { jczgetJczList, sxtGetList } from "@/api/mosty-jcz";
 import { ysSxtGetList } from '@/api/yszx.js'
 import emitter from "@/utils/eventBus.js";
 import PopupWindows from "@/components/popupWindows/index.vue";
+import { bm, arrowhead, centralPoint } from '@/components/GdMap/xzqh.js'
+import { ref, onMounted, reactive } from "vue";
+import { getItem } from "@/utils/storage";
 
-import { ref, onMounted } from "vue";
 //获取所有检查站
 const getjczgetJczList = () => {
   jczgetJczList({}).then((res) => {
-    const point = res.filter((item) => item.jd && item.wd);
+    const gajcz = res.filter(item => item.zqlx == '1' && item.jd && item.wd)
+    const jcz = res.filter(item => item.zqlx == '2' && item.jd && item.wd)
     const icon = require("@/assets/images/z.png");
-    emitter.emit("addPointArea", { coords: point, icon, flag: "jczMap_hm" });
+    const iconjcz = require("@/assets/point/sp.png");
+    emitter.emit("addPointArea", { coords: gajcz, icon, flag: "jczMap_hm" });
+    emitter.emit("addPointArea", { coords: jcz, icon: iconjcz, flag: "jczMap_hm" });
   });
 };
+const makerCenter = () => {
+    const dw = require("@/assets/point/dingwei.png")
+  const coords = centralPoint.map(item => {
+    return { jd: item.point[0], wd: item.point[1], jzMc: item.name }
+  })
+  emitter.emit("addPointArea", { coords, icon: dw, flag: "hm", size: '14px', showTitle: true, offset: [0, -25] });
+}
 getjczgetJczList();
 const JczData = ref();
 const showEntrance = ref(false);
 onMounted(() => {
+  getDepId()
+  makerCenter()
   emitter.on("showJcz", (res) => {
     if (res) {
-      const promes = {
-        jczid: res.id,
-      }
+      // const promes = {
+      //   jczid: res.id,
+      // }
       showEntrance.value = true;
       JczData.value = res;
-      emitter.emit("deletePointArea", "jczMap_Gzy");
-      sxtGetList(promes).then(resData => {
-        emitter.emit("addPointArea", {
-          coords: resData,
-          icon: require("@/assets/point/sp.png"),
-          flag: "jczMap_Gzy"
-        });
-      })
+      // emitter.emit("deletePointArea", "jczMap_Gzy");
+      // sxtGetList(promes).then(resData => {
+      //   emitter.emit("addPointArea", {
+      //     coords: resData,
+      //     icon: require("@/assets/point/sp.png"),
+      //     flag: "jczMap_Gzy"
+      //   });
+      // })
     } else {
       showEntrance.value = false;
     }
   });
 });
-const getsxtGetList = () => {
-  ysSxtGetList().then(res => {
-    emitter.emit("deletePointArea", "jczMap_Gzy");
-    emitter.emit("addPoint", {
-      coords: res,
-      icon: require("@/assets/point/sp.png"),
-      flag: "jczMap_Gzy"
-    });
-  })
+
+const keyIndex = ref()
+const changeXzqh = (val, trg) => {
+  setTimeout(() => {
+    // 先移除已有的边界
+    // 如果传入的是多个区域数据（二维数组）
+    const features = val.map((area, index) => ({
+      geometry: {
+        type: "Polygon",
+        coordinates: [area] // 确保格式正确
+      },
+      properties: {
+      },
+      type: "Feature"
+    }))
+    // 循环为每个区域创建单独的多边形，这样可以设置不同的样式
+    features.forEach((feature, index) => {
+      emitter.emit('setBoundarys', {
+        data: {
+          type: "FeatureCollection",
+          features: [feature]
+        },
+        color: '#cf1010',
+        fillColor: 'rgba(255, 255, 255, 0)',
+        borderColor: index == keyIndex.value ? '#ff00ff' : 'red'
+      })
+    })
+    getMapData()
+  }, 3000)
 }
-const showDiclog = ref(true)
-getsxtGetList()
+
+const getDepId = () => {
+  const deptId = getItem('deptId')
+  const deptLevel = deptId[0].deptLevel ? deptId[0].deptLevel : null
+  const deptCode = deptId[0].deptCode ? deptId[0].deptCode : null
+  // if (deptLevel.startsWith('2')) {
+  const keyData = []
+  for (const key in bm) {
+    keyData.push(key)
+  }
+
+  const data = Object.values(bm).map(item => item);
+
+  // } else {
+  switch (deptCode) {
+    case '54040200000'://巴宜区
+      keyIndex.value = keyData.indexOf('542621')
+      // changeXzqh(bm[542621])
+      break;
+    case '54042400000'://波密县
+      keyIndex.value = keyData.indexOf('542625')
+      // changeXzqh(bm[542625])
+      break;
+    case '54042500000'://察隅县
+      keyIndex.value = keyData.indexOf('542626')
+      // changeXzqh(bm[542626])
+      break;
+    case '54042100000'://工布江达县
+      keyIndex.value = keyData.indexOf('542622')
+      // changeXzqh(bm[542622])
+      break;
+    case '54042600000'://朗县
+      keyIndex.value = keyData.indexOf('542627')
+      // changeXzqh(bm[542627])
+      break;
+    case '54042200000'://米林县
+      keyIndex.value = keyData.indexOf('542623')
+      // changeXzqh(bm[542623])
+      break;
+    case '54042300000'://墨脱县
+      keyIndex.value = keyData.indexOf('542624')
+      // changeXzqh(bm[542624])
+      break;
+    default:
+      const data = Object.values(bm).map(item => item);
+      changeXzqh(data, true)
+      break;
+  }
+  changeXzqh(data, true)
+
+  // }
+}
+// 箭头
+const getMapData = () => {
+  let jtData = []
+  for (const key in arrowhead) {
+    jtData.push({
+      position: [arrowhead[key].zb],
+      text: arrowhead[key].name,
+      pyl: arrowhead[key].pyl,
+    })
+  }
+  // 修复后的多边形绘制代码
+  for (let i = 0; i < jtData.length; i++) {
+    console.log("正在绘制第", i, "个多边形");
+    emitter.emit("echoPlane", {
+      flag: `polygon${i}`,
+      type: "polygon",
+      coords: [jtData[i]], // 保持使用第一个数据点进行测试
+      fontSize: "20px",
+      fontColor: '#000',
+      isclear: false, // 暂时设为false，避免清除之前的绘制
+      id: i,
+      pyl: jtData[i].pyl
+
+    });
+  }
+}
+
 </script>
 
 <style lang="scss" scoped>
@@ -165,9 +274,18 @@ getsxtGetList()
       background-size: 100% 100%;
     }
   }
-.asideB{
-  position: absolute;bottom: 50px;z-index:11;left: 50%;transform: translateX(-50%);height: 100px;width: 50%;padding: 0 30px;
-}
+
+  .asideB {
+    position: absolute;
+    bottom: 50px;
+    z-index: 11;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 100px;
+    width: 50%;
+    padding: 0 30px;
+  }
+
   // 公用
   .common-title {
     padding: 0 54px;
@@ -185,4 +303,6 @@ getsxtGetList()
     box-sizing: border-box;
   }
 }
+
+
 </style>

src/views/home/layout/head.vue

@@ -5,11 +5,31 @@
       <div class="f18 pl104">{{ hour + ":" + minute + ":" + second }}</div>
     </div>
     <div class="title absolute" @click="goPath">{{ props.title }}</div>
-    <!-- <div class="wd absolute">
-      <el-icon size="25px" style="top: 6px" color="#86C8EB"><Sunny /></el-icon>
-      <span> 温度 1~7°C </span>
-    </div> -->
-    <div class="zbbb" v-if="query" @click="show = true">值班报备</div>
+    <div class="zbbb" v-if="query&&JczMsg.zqlx == '1'" @click="show = true">值班报备</div>
+    <div v-else>
+      <div class="tc">
+         <div><img src="@/assets/images/peo.png" /></div>
+        <div class="hd">
+          <div class="name">姓名：{{ username }}</div>
+          <div class="work">单位：{{ deptName }}</div>
+        </div>
+        <el-dropdown :hide-on-click="false">
+          <span class="el-dropdown-link">
+            <el-icon :size="20" color="#fff">
+              <CaretBottom />
+            </el-icon>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu class="loginOut"  @click="goPath">
+              <el-dropdown-item command="logout" >前往后台</el-dropdown-item>
+            </el-dropdown-menu>
+            <el-dropdown-menu class="loginOut" @click="goAot">
+              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
   </div>
   <el-dialog v-model="show" width="800px" title="值班报备">
     <div style="height: 50vh; overflow: auto" v-if="show">
@@ -30,6 +50,7 @@
 import { useRouter } from "vue-router";
 import { getRecentDay, timeValidate } from "@/utils/tools.js";
 import emitter from "@/utils/eventBus.js";
+import { useStore } from "vuex";
 import {
   ref,
   onMounted,
@@ -38,7 +59,7 @@ import {
   getCurrentInstance
 } from "vue";
 import zbbb from "./zbbb.vue";
-
+const store =useStore()
 const { proxy } = getCurrentInstance();
 const {
   D_BZ_RYMFJLB,
@@ -65,6 +86,10 @@ const props = defineProps({
   query: {
     type: String,
     default: ""
+  },
+  JczMsg: {
+    type: Object,
+    default: () => ({})
   }
 });
 const show = ref(false);
@@ -77,10 +102,14 @@ const second = ref("00"); //秒
 const hour = ref("00"); //时
 const day = ref(0);
 const timersfm = ref(null);
-
+const deptName = ref('');
+const username = ref('');
 const router = useRouter();
 const row = ref();
 onMounted(() => {
+  //登陆用户信息
+  deptName.value = localStorage.getItem("deptId") ? JSON.parse(localStorage.getItem("deptId"))[0].deptName : ''
+  username.value = localStorage.getItem("USERNAME");
   emitter.on("chengZ", (res) => {
     row.value = res;
     console.log(res);
@@ -104,6 +133,9 @@ function CurrentTime() {
 function goPath() {
   router.push("/editPassword");
 }
+const goAot = () => {
+   store.dispatch("user/logout");
+}
 </script>
 
 <style lang="scss" scoped>
@@ -119,7 +151,7 @@ function goPath() {
   position: relative;
   width: 100%;
   height: 65px;
-  z-index: 2;
+  z-index: 1;
   background: #0e1b29;
 
   &::after {
@@ -177,5 +209,28 @@ function goPath() {
     color: #fff;
     cursor: pointer;
   }
+
+  .tc {
+    position: absolute;
+    right: 20px;
+    display: flex;
+    top: 14px;
+    // width: 162px;
+    height: 48px;
+    // line-height: 48px;
+    background-size: 100% 100%;
+    color: #fff;
+    // background: url("~@/assets/images/btnbb.png") no-repeat center center;
+    // background-color: #1a4e838c;
+    border-radius: 5px;
+    align-items: center;
+    padding: 0 10px;
+    cursor: pointer;
+
+    .hd {
+      text-align: left;
+    }
+  }
+
 }
 </style>

src/views/home/layout/zbbb.vue

@@ -6,6 +6,7 @@
         <MOSTY.Department v-model="listQuery.ssbmdm" placeholder="请选择部门" @getDepValue="changeDep" />
       </div>
       <!-- v-if="['add', 'edit'].includes(pageType)" -->
+
       <el-button size="small" type="primary" @click="_onSave" :disabled="loding">保存</el-button>
     </div>
     <el-form ref="formRef" class="info" :model="listQuery" :inline="true" :rules="rules">
@@ -290,18 +291,19 @@ const fz = (val) => {
 
 // 初始化数据
 const init = (type) => {
-  pageType.value = type;
+
+
+  pageType.value = type==undefined||type=='add'?"add":"detail";
   dialogForm.value = true;
   // 根据type和row初始化表单数据
-
   if (props.row) {
     listQuery.value = { ...props.row };
-    if (props.row.ryList.length > 0) {
+    if (props.row.ryList&&props.row.ryList.length > 0) {
       const data = fz(props.row.ryList);
       mjData.value = data.filter((item) => item.fl == "01");
       fjData.value = data.filter((item) => item.fl == "02");
     }
-    if (listQuery.value.qxList.length == 0) {
+    if (listQuery.value.qxList&&listQuery.value.qxList.length == 0) {
       listQuery.value.qxList = props.dic.D_BZ_JYQXFL.map((item) => {
         return { qxmc: item.label, qxsl: 0 };
       });

src/views/login/index.vue

@@ -108,7 +108,7 @@ const kaptchaUrl = ref("");
 // 数据源
 const loginForm = ref({
   userName: "admin",
-  password: "111111",
+  password: "123456",
   kaptcha: ""
 });
 const loginDialog = ref(false);

src/views/login/zeroTrust_login.vue

@@ -9,71 +9,103 @@ import {
 import {
   setItem
 } from "@/utils/storage";
-import { getSessionForSfzh, idCardNoLogin } from "@/api/user-manage";
-import {useRouter} from 'vue-router'
+import { getSessionForSfzh, idCardNoLogin, getSession } from "@/api/user-manage";
 import {
   setTimeStamp
 } from "@/utils/auth";
+import emitter from "@/utils/eventBus.js";
+const loginDialog = ref(false);
+const deptList = ref([]);
 const store = useStore();
-function redirectAuth() {
-  handleLogin();
-}
-const router = useRouter()
-const handleLogin = (e) => {
-  // 先尝试获取cookie中的clientKey
-  const token = getCookie("clientKey");
-
-  if (token) {
-    // 使用clientKey获取会话信息
-    getSessionForSfzh({ cookie: token }).then((res) => {
-      // 使用获取到的idEntityCard进行免登
-      idCardNoLogin({
-        idCardNo: res
-      }).then((resIdCard) => {
-        // 登录成功后设置token和用户信息到store
-        store.commit("user/setToken", resIdCard.jwtToken);
-        store.commit("user/setDeptList", resIdCard.deptList);
-        store.commit("user/setUserName", resIdCard.userName);
-        store.commit("user/setMenuList", resIdCard.menuList);
-        store.commit("user/setUserInfo", {
-          token: resIdCard.jwtToken,
-          permission: {
-            buttonPermission: ["removeTest", "viewTest"],
-            menus: resIdCard.menuCodeSet
-          },
-          menuList: resIdCard.menuList,
-          deptList: resIdCard.deptList
-        });
-        // 保存用户信息到本地存储
-        setItem("USERNAME", resIdCard.userName);
-        setItem("SFRH", resIdCard.sfrh);
-        setItem("USERID", resIdCard.userId);
-        setItem("menusPermission", resIdCard.menuCodeSet);
-        setItem("idEntityCard", resIdCard.idEntityCard);
-        setItem("deptId", resIdCard.deptList);
-        // 保存登录时间
-        setTimeStamp();
-        // 重定向到首页
-        setTimeout(() => {
-          window.location.hash = "/";
-          router.push("/");
-        }, 1000);
-      }).catch((error) => {
-        console.error("免登失败:", error);
-        // 免登失败时重定向到登录页面
-        // window.location.hash = "/login";
-      });
-    }).catch((error) => {
-      console.error("获取会话信息失败:", error);
-      // 获取会话信息失败时重定向到登录页面
-      // window.location.hash = "/login";
-    });
-  } else {
-    console.error("没有找到clientKey cookie");
-    // 没有cookie时重定向到登录页面
-    window.location.hash = "/login";
-  }
+// 处理页面可见性变化的函数
+const handleVisibilityChange = () => {
+  getSession().then(res => {
+    const { placeId, userId } = res.rows[0]
+    idCardNoLoginLogin(userId, placeId)
+  })
 };
+function redirectAuth() {
+  const url = window.location.href
+  const urlObj = new URL(url);
+  handleVisibilityChange()
+}
+
+
+// 身份证号进行登录
+const idCardNoLoginLogin = (idCard, orgId) => {
+  idCardNoLogin({
+    idCardNo: idCard,
+    orgCode: orgId
+  }).then((resIdCard) => {
+    // 登录成功后设置token和用户信息到store
+    store.commit("user/setToken", resIdCard.jwtToken);
+    store.commit("user/setDeptList", resIdCard.deptList);
+    store.commit("user/setUserName", resIdCard.userName);
+    store.commit("user/setMenuList", resIdCard.menuList);
+    store.commit("user/setUserInfo", {
+      token: resIdCard.jwtToken,
+      permission: {
+        buttonPermission: ["removeTest", "viewTest"],
+        menus: resIdCard.menuCodeSet
+      },
+      menuList: resIdCard.menuList,
+      deptList: resIdCard.deptList
+    });
+    // 保存用户信息到本地存储
+    setItem("USERNAME", resIdCard.userName);
+    setItem("SFRH", resIdCard.sfrh);
+    setItem("USERID", resIdCard.userId);
+    setItem("menusPermission", resIdCard.menuCodeSet);
+    setItem("idEntityCard", resIdCard.idEntityCard);
+    setItem("deptId", resIdCard.deptList);
+    // 保存登录时间
+    setTimeStamp();
+      emitter.emit("handleClick")
+    // 重定向到首页
+    setTimeout(() => {
+      if (window.parent !== window.self) {
+        window.location.hash = window.location.href.split("#")[1];
+      } else {
+        console.log("首页");
+        window.location.hash = "/";
+      }
+    }, 1000);
+  }).catch((error) => {
+    console.error("免登失败:", error);
+    // 免登失败时重定向到登录页面
+    // window.location.hash = "/login";
+  });
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 onMounted(() => {
   redirectAuth();
 });