修改功能

2025-09-15 13:35:45 +08:00
parent 210f9cc44e
commit b1246a864a
10 changed files with 435 additions and 157 deletions
--- a/src/views/backOfficeSystem/peopleManag/checkpoint/components/editAddForm.vue
+++ b/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
-          size="small"
-          type="primary"
-          v-if="['add', 'edit'].includes(pageType)"
-          @click="_onSave"
-          >保存</el-button
-        >
+        <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
-        ref="formRef"
-        :model="listQuery"
-        :rules="rules"
-        :inline="true"
-        label-position="top"
-      >
+      <el-form ref="formRef" :model="listQuery" :rules="rules" :inline="true" label-position="top">
        <el-form-item style="width: 40%" prop="ssbmdm" label="所属部门">
-          <MOSTY.Department
-            width="100%"
-            clearable
-            :disabled="forbidden"
-            v-model="listQuery.ssbmdm"
-            :placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'"
-          />
+          <MOSTY.Department width="100%" 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"
-            v-model="listQuery.jczmc"
-            placeholder="请输入环林卡口名称"
-            style="width: 100%"
-            clearable
-          />
+          <el-input :disabled="forbidden" v-model="listQuery.jczmc" 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
-              v-for="dict in dict.D_BZ_ZQLX"
-              :key="dict.value"
-              :value="dict.value"
-              :label="dict.label"
-            ></el-option>
+            <el-option v-for="dict in dict.D_BZ_ZQLX" :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
-              v-for="dict in dict.D_BZ_JCZLX"
-              :key="dict.value"
-              :value="dict.value"
-              :label="dict.label"
-            ></el-option>
+            <el-option v-for="dict in dict.D_BZ_JCZLX" :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
-              v-for="dict in dict.D_BZ_JCZJB"
-              :key="dict.value"
-              :value="dict.value"
-              :label="dict.label"
-            ></el-option>
+            <el-option v-for="dict in dict.D_BZ_JCZJB" :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"
-            v-model="listQuery.fzr"
-            placeholder="请输入负责人"
-            style="width: 100%"
-            clearable
-          />
+          <el-input :disabled="forbidden" 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"
-            v-model="listQuery.lxdh"
-            placeholder="请输入联系电话"
-            style="width: 100%"
-            clearable
-          />
+          <el-input :disabled="forbidden" v-model="listQuery.lxdh" 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
-              v-for="dict in dict.D_BZ_DLLX"
-              :key="dict.value"
-              :value="dict.value"
-              :label="dict.label"
-            ></el-option>
+            <el-option v-for="dict in dict.D_BZ_DLLX" :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"
-            v-model="listQuery.xxdz"
-            placeholder="请输入环林卡口地址"
-            style="width: 100%"
-            clearable
-          />
+          <el-input :disabled="forbidden" v-model="listQuery.xxdz" placeholder="请输入环林卡口地址" style="width: 100%"
+            clearable />
        </el-form-item>
        <el-form-item label="示意图(最多3张)" prop="fjid" style="width: 40%">
-          <MOSTY.Upload :disableds="forbidden"
-            :isImg="true"
-            width="100%"
-            :limit="3"
-            v-model="listQuery.fjid"
-          ></MOSTY.Upload>
+          <MOSTY.Upload :disableds="forbidden" :isImg="true" width="100%" :limit="3" v-model="listQuery.fjid">
+          </MOSTY.Upload>
        </el-form-item>
-        <el-form-item
-          label="全景图(正面、侧面、俯视共3张)"
-          prop="qjfjid"
-          style="width: 48%"
-        >
-          <MOSTY.Upload :disableds="forbidden"
-            width="100%"
-            :isImg="true"
-            :limit="3"
-            v-model="listQuery.qjfjid"
-          ></MOSTY.Upload>
+        <el-form-item label="全景图(正面、侧面、俯视共3张)" prop="qjfjid" 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"
-              v-model="listQuery.jd"
-              clearable
-              placeholder="请选择坐标"
-              style="width: 42%"
-            ></el-input>
-            <el-input  :disabled="true"
-              v-model="listQuery.wd"
-              clearable
-              placeholder="请选择坐标"
-              style="width: 42%; margin-left: 1%"
-            ></el-input>
+            <el-input :disabled="true" v-model="listQuery.jd" clearable placeholder="请选择坐标"
+              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>
+            <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>
@ -159,7 +91,7 @@ import { ElMessage } from "element-plus";
 const props = defineProps({
  dict: {
    type: Object,
-    default: () => {}
+    default: () => { }
  }
 });
 const rules = reactive({
@ -173,7 +105,7 @@ const rules = reactive({
    {
      required: true,
      message: "请选择执勤类型",
-         trigger: "change"
+      trigger: "change"
    }
  ],
  jczlx: [
@ -229,17 +161,17 @@ onMounted(() => {
  });
 });
 let pageType = ref("add");
-const forbidden=ref(false)
+const forbidden = ref(false)
 // 初始化数据
 const init = (type, row) => {
  pageType.value = type;
  dialogForm.value = true;
  // 根据type和row初始化表单数据
  tabHeightFn();
-  if (type == "edit"||type == "detail") {
+  if (type == "edit" || type == "detail") {
    listQuery.value = { ...row };
    if (type == "detail") {
-      forbidden.value=true
+      forbidden.value = true
    }
    chackLat();
  } else {
@ -281,7 +213,7 @@ const selectLocation = () => {
 //获取经纬度
 const chackLat = () => {
  const { jd, wd } = listQuery.value;
-  console.log(jd, wd );
+  console.log(jd, wd);

  emitter.emit("deletePointArea", "jczMap_Gzy");
  if (jd && wd) {
@ -296,13 +228,13 @@ const chackLat = () => {
 };
 // 初始化时展示地图图标
 const mapIcon = (val) => {
-console.log(val);
+  console.log(val);

 }
 //页面关闭
 const close = () => {
  dialogForm.value = false;
-  forbidden.value=false
+  forbidden.value = false
  listQuery.value = {};
 };
 // 表格高度计算
@ -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 {
+      >.el-form--inline {
        display: block;
        width: 100%;
        padding: 0;
-        > .el-form-item--default {
+
+        >.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;
--- a/src/views/backOfficeSystem/peopleManag/checkpoint/components/gzyInfo.vue
+++ b/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>
--- a/src/views/backOfficeSystem/peopleManag/checkpoint/components/perceptionSource.vue
+++ b/src/views/backOfficeSystem/peopleManag/checkpoint/components/perceptionSource.vue
@ -13,8 +13,9 @@
          <el-input v-model="JczMc" disabled />
        </el-form-item>
        <el-form-item style="width: 40%" label="感知源">
-          <div class="diviput" @click="showJcz = true">
-            <span v-if="listQuery.sxtList&&listQuery.sxtList.length>0">
+          <!-- <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>
            </span>
@ -22,17 +23,27 @@
          </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 { sxtBatch, JczselectById } from '@/api/mosty-jcz'
 import { ElMessage } from "element-plus";
-const emit=defineEmits(['getjczgetXfllList'])
+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)

 const listQuery = ref({})
@ -46,13 +57,14 @@ const dialogGzy = ref(false)
 const JczMc = ref()
 // 初始化数据
 const init = (row) => {
+  sxtGetList()
  dialogGzy.value = true;
  listQuery.value.jczid = row.id
  JczMc.value = row.jczmc
-  JczselectById({id:row.id}).then(res => {
-   if(res){
-     listQuery.value.sxtList = res.sxtList?res.sxtList:[];
-   }
+  JczselectById({ id: row.id }).then(res => {
+    if (res) {
+      listQuery.value.sxtList = res.sxtList ? res.sxtList : [];
+    }
  })
 };
 //保存
@ -105,9 +117,13 @@ const pageDatas = reactive({
 //页面关闭
 const close = () => {
  dialogGzy.value = false;
-  listQuery.value={}
+  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
+  listQuery.value.sxtList = val
 }
-const handleClose = (val) => {
-  listQuery.value.sxtList.splice(listQuery.value.sxtList.indexOf(val), 1)
+const handleClose = (idx) => {
+  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>
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@ -90,7 +90,7 @@ const sxtGetList = () => {

  })
 }
-sxtGetList()
+// sxtGetList()
 </script>

 <style lang="scss" scoped>