修改功能

src/components/GdMap/index.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="关闭路况"
+    <el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况" style="--el-switch-color:#13ce66;--el-switch-off-color:#ff4949;" />
-      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">
@@ -89,32 +88,27 @@ onMounted(() => {
 
   map = new EliMap({
     id: props.mapid,
-    crs: "EPSG:4490",
+    crs: "EPSG:3857",
     style: {
       glyphs: "./fonts/{fontstack}/{range}.pbf",
-      center: [94.36057012, 29.64276831],
+      center: [94.36,29.65],
-      zoom: 15
+      zoom: 10
     },
-    minZoom: 7,
+    transformRequest: (url) => {
-    maxZoom: 18,
+      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(
+     map.addGaudLayer({
-      "/PGIS_S_TileMapServer/Maps/XZDJ_SL/EzMap",
+      url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
-      {
+    })
-        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);
@@ -172,7 +166,7 @@ onMounted(() => {
   });
   // 回显线
   emitter.on("echoLine", (res) => {
-    mapUtil.value.createLine(res, res.flag);
+    mapUtil.value.createLine(res);
   });
   //创建边界面（geojson）
   emitter.on("setBoundarys", (res) => {
@@ -203,6 +197,11 @@ onMounted(() => {
     mapUtil.value.diffusionCircle(res);
   });
 
+  // 清除全部覆盖物
+  emitter.on("removeElementAll", () => {
+    mapUtil.value.removeElementAll();
+  });
+
   // 展示盘曲
   emitter.on("showGapText", (obj) => {
     mapUtil.value.gapText(obj);
@@ -301,6 +300,7 @@ onUnmounted(() => {
   emitter.off("diffusionCircle");
   emitter.off("SsCircle");
   emitter.off("ClearssCircle");
+  emitter.off("removeElementAll");
 });
 </script>
 
@@ -323,35 +323,29 @@ onUnmounted(() => {
   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;
   }

src/components/video/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="videoBoxcnt" v-show="isShowVideo">
+    <div class="videoMain">
+      <div class="close" @click="isShowVideo = false">
+        <el-icon :size="22"><CircleClose /></el-icon>
+      </div>
+      <div class="cnt-box">
+        <!-- <VideoPay :show="true" :src="url" /> -->
+           <VideoPay :sbbh="sbbh"  v-if="sbbh" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ElMessage } from "element-plus";
+// import VideoPay from "@/components/VideoPay/index.vue";
+import VideoPay from "@/components/wsIframe/index"; //iframe播放
+import { dateFormat } from "@/utils/auth";
+import { http } from "@/api/service";
+import emitter from "@/utils/eventBus.js";
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  reactive,
+  computed,
+  getCurrentInstance
+} from "vue";
+const isShowVideo = ref(false);
+const player = ref(null);
+const { proxy } = getCurrentInstance();
+const sbbh = ref(null);
+const url = ref();
+
+onMounted(() => {
+  emitter.on("openGzyVideo", (res) => {
+    console.log(res,'111111');
+    
+    sbbh.value = res.sbbh;
+    isShowVideo.value=true
+    // getUrl(sbbh.value);
+  });
+});
+onUnmounted(() => {
+  emitter.off("openGzyVideo");
+});
+
+function getUrl(val) {
+  http.previewURLs({ sbbh: val }).then((res) => {
+    let data = JSON.parse(res);
+    if(data.data){
+      isShowVideo.value = true;
+      url.value = data.data.url;
+    }else{
+      isShowVideo.value = false
+      ElMessage.info("暂无数据源");
+    }
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+.videoBoxcnt {
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.close {
+  width: 100%;
+  text-align: right;
+  height: 24px;
+}
+.cnt-box {
+  width: 50vw;
+  height: 50vh;
+  background: #fff;
+  // padding: 5px;
+}
+
+.splitBtn {
+  display: inline-block;
+  padding: 4px 14px;
+  border: 1px solid #e5e5e5;
+  border-radius: 4px;
+  margin-left: 4px;
+  margin-bottom: 6px;
+  color: #000;
+}
+.isBtnActive {
+  border: 1px solid #ffcc00;
+}
+</style>
+<style scoped>
+/* @import "~@/components/h5player/static/css/antd.min.css"; */
+.name {
+  width: 60px;
+  display: inline-block;
+  text-align-last: justify;
+  margin-right: 4px;
+}
+</style>

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

@@ -3,146 +3,78 @@
     <div class="head_box">
       <span class="title">{{ pageInfo[pageType].title }}</span>
       <div>
-        <el-button
+        <el-button size="small" type="primary" v-if="['add', 'edit'].includes(pageType)" @click="_onSave">保存</el-button>
-          size="small"
-          type="primary"
-          v-if="['add', 'edit'].includes(pageType)"
-          @click="_onSave"
-          >保存</el-button
-        >
         <el-button size="small" @click="close">关闭</el-button>
       </div>
     </div>
     <div class="cntinfo">
-      <el-form
+      <el-form ref="formRef" :model="listQuery" :rules="rules" :inline="true" label-position="top">
-        ref="formRef"
-        :model="listQuery"
-        :rules="rules"
-        :inline="true"
-        label-position="top"
-      >
         <el-form-item style="width: 40%" prop="ssbmdm" label="所属部门">
-          <MOSTY.Department
+          <MOSTY.Department width="100%" clearable :disabled="forbidden" v-model="listQuery.ssbmdm"
-            width="100%"
+            :placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'" />
-            clearable
-            :disabled="forbidden"
-            v-model="listQuery.ssbmdm"
-            :placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'"
-          />
         </el-form-item>
         <el-form-item style="width: 40%" prop="jczmc" label="环林卡口名称">
-          <el-input :disabled="forbidden"
+          <el-input :disabled="forbidden" v-model="listQuery.jczmc" placeholder="请输入环林卡口名称" style="width: 100%"
-            v-model="listQuery.jczmc"
+            clearable />
-            placeholder="请输入环林卡口名称"
-            style="width: 100%"
-            clearable
-          />
         </el-form-item>
 
         <el-form-item style="width: 40%" prop="zqlx" label="执勤类型">
           <el-select :disabled="forbidden" v-model="listQuery.zqlx" placeholder="请选择执勤类型">
-            <el-option
+            <el-option v-for="dict in dict.D_BZ_ZQLX" :key="dict.value" :value="dict.value"
-              v-for="dict in dict.D_BZ_ZQLX"
+              :label="dict.label"></el-option>
-              :key="dict.value"
-              :value="dict.value"
-              :label="dict.label"
-            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item style="width: 40%" prop="jczlx" label="环林卡口类型">
           <el-select :disabled="forbidden" v-model="listQuery.jczlx" placeholder="请选择环林卡口类型">
-            <el-option
+            <el-option v-for="dict in dict.D_BZ_JCZLX" :key="dict.value" :value="dict.value"
-              v-for="dict in dict.D_BZ_JCZLX"
+              :label="dict.label"></el-option>
-              :key="dict.value"
-              :value="dict.value"
-              :label="dict.label"
-            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item style="width: 40%" prop="jczjb" label="环林卡口级别">
           <el-select :disabled="forbidden" v-model="listQuery.jczjb" placeholder="请选择环林卡口级别">
-            <el-option
+            <el-option v-for="dict in dict.D_BZ_JCZJB" :key="dict.value" :value="dict.value"
-              v-for="dict in dict.D_BZ_JCZJB"
+              :label="dict.label"></el-option>
-              :key="dict.value"
-              :value="dict.value"
-              :label="dict.label"
-            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item style="width: 40%" prop="fzr" label="负责人">
-          <el-input :disabled="forbidden"
+          <el-input :disabled="forbidden" v-model="listQuery.fzr" placeholder="请输入负责人" style="width: 100%" clearable />
-            v-model="listQuery.fzr"
-            placeholder="请输入负责人"
-            style="width: 100%"
-            clearable
-          />
         </el-form-item>
         <el-form-item style="width: 40%" prop="lxdh" label="联系电话">
-          <el-input :disabled="forbidden"
+          <el-input :disabled="forbidden" v-model="listQuery.lxdh" placeholder="请输入联系电话" style="width: 100%"
-            v-model="listQuery.lxdh"
+            clearable />
-            placeholder="请输入联系电话"
-            style="width: 100%"
-            clearable
-          />
         </el-form-item>
         <el-form-item style="width: 40%" prop="dllx" label="道路类型">
           <el-select :disabled="forbidden" v-model="listQuery.dllx" placeholder="请选择道路类型">
-            <el-option
+            <el-option v-for="dict in dict.D_BZ_DLLX" :key="dict.value" :value="dict.value"
-              v-for="dict in dict.D_BZ_DLLX"
+              :label="dict.label"></el-option>
-              :key="dict.value"
-              :value="dict.value"
-              :label="dict.label"
-            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item style="width: 40%" prop="xxdz" label="环林卡口地址">
-          <el-input :disabled="forbidden"
+          <el-input :disabled="forbidden" v-model="listQuery.xxdz" placeholder="请输入环林卡口地址" style="width: 100%"
-            v-model="listQuery.xxdz"
+            clearable />
-            placeholder="请输入环林卡口地址"
-            style="width: 100%"
-            clearable
-          />
         </el-form-item>
         <el-form-item label="示意图(最多3张)" prop="fjid" style="width: 40%">
-          <MOSTY.Upload :disableds="forbidden"
+          <MOSTY.Upload :disableds="forbidden" :isImg="true" width="100%" :limit="3" v-model="listQuery.fjid">
-            :isImg="true"
+          </MOSTY.Upload>
-            width="100%"
-            :limit="3"
-            v-model="listQuery.fjid"
-          ></MOSTY.Upload>
         </el-form-item>
-        <el-form-item
+        <el-form-item label="全景图(正面、侧面、俯视共3张)" prop="qjfjid" style="width: 48%">
-          label="全景图(正面、侧面、俯视共3张)"
+          <MOSTY.Upload :disableds="forbidden" width="100%" :isImg="true" :limit="3" v-model="listQuery.qjfjid">
-          prop="qjfjid"
+          </MOSTY.Upload>
-          style="width: 48%"
-        >
-          <MOSTY.Upload :disableds="forbidden"
-            width="100%"
-            :isImg="true"
-            :limit="3"
-            v-model="listQuery.qjfjid"
-          ></MOSTY.Upload>
         </el-form-item>
         <el-form-item style="width: 85%" prop="jd" label="坐标位置">
           <div class="latlng flex">
-            <el-input :disabled="true"
+            <el-input :disabled="true" v-model="listQuery.jd" clearable placeholder="请选择坐标"
-              v-model="listQuery.jd"
+              style="width: 42%"></el-input>
-              clearable
+            <el-input :disabled="true" v-model="listQuery.wd" clearable placeholder="请选择坐标"
-              placeholder="请选择坐标"
+              style="width: 42%; margin-left: 1%"></el-input>
-              style="width: 42%"
-            ></el-input>
-            <el-input  :disabled="true"
-              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>
         <el-form-item style="width: 100%">
-          <div class="mapbox"><GdMap /></div>
+          <div class="mapbox">
+            <GdMap />
+          </div>
         </el-form-item>
       </el-form>
     </div>
@@ -317,21 +249,25 @@ defineExpose({ init });
 <style lang="scss" scoped>
 .dialog {
   padding: 20px;
+
   .head_box {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
   }
+
   .cntinfo {
     height: calc(100% - 70px);
     overflow: hidden;
     overflow-y: auto;
   }
 }
+
 .my_transfer {
   height: calc(100% - 50px);
   display: flex;
+
   .btn {
     width: 50px;
     display: flex;
@@ -339,58 +275,71 @@ defineExpose({ init });
     justify-content: center;
     margin: 0 10px;
   }
+
   .left {
     margin: 12px;
     flex: 1;
     position: relative;
+
     .tableBox {
       position: absolute;
       width: 100%;
     }
+
     .serch {
       position: relative;
       width: 100%;
+
       // height: 96px;
       >.el-form--inline {
         display: block;
         width: 100%;
         padding: 0;
+
         >.el-form-item--default {
           width: 31%;
         }
       }
     }
+
     .tableBox {
       width: 100%;
     }
   }
+
   .right {
     width: 380px;
     margin: 12px;
   }
 }
+
 .phone {
   width: 95px;
   height: 120px;
+
   .el-image {
     width: 95px;
     max-height: 120px;
   }
 }
+
 ::v-deep .el-upload {
   width: 90px;
   height: 100px;
   border: 1px dashed #000000;
   margin-bottom: 14px;
+
   .el-icon {
     margin-top: 34px;
     font-size: 26px;
   }
+
   .el-image {
     width: 100%;
     height: 100%;
   }
 }
+
 .mapbox {
   width: 1000px;
   padding: 0 10px;

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

@@ -0,0 +1,183 @@
+<template>
+  <div class="dialogBox" v-if="show">
+    <div class="title">
+      <span>感知源</span><span @click="close" class="close">
+        <el-icon>
+          <Close />
+        </el-icon>
+      </span>
+    </div>
+    <div v-for="(item, index) in info" :key="index + 'gzy'">
+      <div class="infoBox">
+        <div class="content">{{ item.sbmc }}</div>
+        <div class="other">
+          <p>设备编号：{{ item.sbbh }}</p>
+          <p>所属部门：{{ item.ssbm }}</p>
+          <p>厂商名称：{{ item.csmc }}</p>
+        </div>
+        <div class="addressBox">
+          <div>
+            <img src="@/assets/images/dingwei.png" />
+            <span>{{ item.dzmc }}</span>
+          </div>
+        </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="openVideo(item)">视频播放</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, defineEmits } from "vue";
+
+// 左右折叠状态
+import emitter from "@/utils/eventBus.js";
+const show = ref(false);
+const info = ref([]); //警情数据
+const emits = defineEmits(['chooseVideo'])
+onMounted(() => {
+  emitter.on("showGzyInfo", (res) => {
+    console.log(res, 'resresresres')
+    info.value = [res];
+    show.value = true;
+  });
+});
+onUnmounted(() => {
+  emitter.off("showGzyInfo");
+});
+
+function chooceItem(item) {
+  emits('chooseVideo', item)
+}
+
+// 打开视频
+function openVideo(item) {
+  console.log(item, 'item');
+
+  let params = {
+    ...item,
+    splitNum: 1
+  }
+  emitter.emit("openGzyVideo", params)
+}
+//关闭弹窗
+function close() {
+  show.value = false;
+  emitter.emit("showGzy", false);
+  emitter.emit("deletePointArea", "lang");
+}
+</script>
+
+<style lang="scss" scoped>
+.dialogBox {
+  width: 360px;
+  max-height: 78vh;
+  overflow: hidden;
+  overflow-y: auto;
+  padding: 0 12px;
+  position: absolute;
+  top: 30px;
+  left: 10px;
+  background: #052342;
+  z-index: 9;
+  border-radius: 4px;
+
+  .title {
+    height: 38px;
+    line-height: 38px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0;
+
+    .close {
+      font-size: 20px;
+      font-weight: 200;
+      cursor: pointer;
+    }
+  }
+
+  .addressBox {
+    border-top: 1px solid #162f55;
+    margin: 0 10px;
+    line-height: 30px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .infoBox {
+    border: 1px solid #275288;
+    position: relative;
+    margin-bottom: 15px;
+
+    .content {
+      padding: 10px 10px 0 10px;
+      font-size: 14px;
+    }
+
+    .other {
+      margin: 0 10px;
+      padding: 0px;
+      color: #779dcd;
+      list-style: none;
+    }
+  }
+}
+
+.btn_bom {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 12px;
+
+  span {
+    background: #2c7ee3;
+    border-radius: 4px;
+    padding: 2px 12px;
+    cursor: pointer;
+  }
+
+  span:hover {
+    background: #497dbd;
+    border-radius: 4px;
+    padding: 2px 12px;
+    cursor: pointer;
+  }
+}
+</style>
+<style lang="scss" scoped>
+// @import "@/assets/css/largeScreen.scss";
+
+.infoBox {
+  position: relative;
+  margin-bottom: 15px;
+}
+
+.content {
+  padding: 10px 10px 0 10px;
+  font-size: 14px;
+}
+
+.other {
+  margin: 0 10px;
+  padding: 0px;
+  color: #779dcd;
+  list-style: none;
+
+  p {
+    margin: 5px 0;
+  }
+}
+
+.itemBox {
+  display: flex;
+  justify-content: space-between;
+
+  span {
+    display: inline-block;
+    width: 80%;
+  }
+}
+</style>

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

@@ -13,7 +13,8 @@
           <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" @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"> {{
                 item.sbmc }} </el-tag>
@@ -22,16 +23,26 @@
           </div>
         </el-form-item>
       </el-form>
+      <el-main class="box_sp box_map">
+        <GdMap />
+        <gzy-info @chooseVideo="chooseVideo"></gzy-info>
+      </el-main>
     </div>
   </div>
   <Gzyloder v-model="showJcz" :Single="false" @choosedJcz="GzyMsg" :data="data" />
+  <VideoCnt />
 </template>
 
 <script setup>
+import VideoCnt from "@/components/video/index.vue";
 import { ref, reactive, onMounted } from "vue";
 import Gzyloder from '@/components/loder/Gzyloder.vue'
 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 emitter from "@/utils/eventBus.js";
 const emit = defineEmits(['getjczgetXfllList'])
 const search = ref(null)
 
@@ -46,6 +57,7 @@ const dialogGzy = ref(false)
 const JczMc = ref()
 // 初始化数据
 const init = (row) => {
+  sxtGetList()
   dialogGzy.value = true;
   listQuery.value.jczid = row.id
   JczMc.value = row.jczmc
@@ -107,7 +119,11 @@ const close = () => {
   dialogGzy.value = false;
   listQuery.value = {}
 };
-
+// 选择视频
+function chooseVideo(sxt) {
+  console.log(sxt, 'sxt');
+  listQuery.value.sxtList.push(sxt)
+}
 // 表格高度计算
 const tabHeightFn = () => {
   console.log(search.value);
@@ -117,13 +133,23 @@ const tabHeightFn = () => {
     tabHeightFn();
   };
 };
+const sxtGetList = () => {
+  ysSxtGetList().then(res => {
+    emitter.emit("addPointArea", {
+      coords: res,
+      icon: require("@/assets/point/sp.png"),
+      flag: "sp"
+    });
+
+  })
+}
 defineExpose({ init });
 const showJcz = ref(false)
 const GzyMsg = (val) => {
   listQuery.value.sxtList = val
 }
-const handleClose = (val) => {
+const handleClose = (idx) => {
-  listQuery.value.sxtList.splice(listQuery.value.sxtList.indexOf(val), 1)
+  listQuery.value.sxtList.splice(idx, 1)
 }
 </script>
 
@@ -243,4 +269,19 @@ const handleClose = (val) => {
     color: #b5b5b5;
   }
 }
+
+.box_sp {
+  .sxtz_btn {
+    margin-top: 20px;
+    text-align: right;
+  }
+
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.box_map {
+  position: relative;
+  height: 57vh;
+}
 </style>

src/views/home/index.vue

@@ -90,7 +90,7 @@ const sxtGetList = () => {
 
   })
 }
-sxtGetList()
+// sxtGetList()
 </script>
 
 <style lang="scss" scoped>

vue.config.js

@@ -5,7 +5,7 @@ function resolve(dir) {
 }
 
 // const serverHost = "http://192.192.8.9:8006";
-const serverHost = "http://192.168.1.32:8066"
+const serverHost = "http://192.168.0.231:8006"
 // const serverHost = "http://127.0.0.1:8006"
 module.exports = {
   publicPath: "./",