'保安项目提交'

src/views/homeMy/components/dialog/JjrMb.vue

@@ -0,0 +1,256 @@
+<template>
+  <div>
+    <el-dialog :title="titleValue" width="1400px" v-model="modelValue" @close="closed">
+      <div v-if="modelValue">
+        <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
+          <el-form-item prop="zlbt" label="指令标题">
+            <el-input v-model="listQuery.jjrmc" placeholder="请输入指令标题"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="success" @click="handleFilter">查询</el-button>
+            <el-button type="info" @click="reset"> 重置 </el-button>
+          </el-form-item>
+        </el-form>
+        <div class="tabBox" style="margin-top: 0px" v-if="modelValue">
+          <el-table
+            ref="multipleUserRef"
+            @selection-change="handleSelectionChange"
+            :data="tableData"
+            :highlight-current-row="props.Single"
+            border
+            v-loading="loading"
+            style="width: 100%"
+            :row-key="keyid"
+            height="450">
+            <el-table-column type="selection" width="55" :reserve-selection="true" v-if="!props.Single"/>
+            <el-table-column width="55" #default="{ row }" v-else>
+              <el-radio v-model="ridioIndex" :label="row.id"></el-radio>
+            </el-table-column>
+            <el-table-column  type="index" align="center" width="60px" label="序号" />
+            <el-table-column prop="zlbt" align="center" label="指令标题"/>
+
+            <el-table-column prop="jjrq" align="center" label="指令等级" >
+              <template #default="{ row }">
+                <dict-tag :options="D_BZ_TYJB" :value="row.zldj" :tag="false" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="zllx" align="center" label="指令类型">
+              <template #default="{ row }">
+                <dict-tag :options="D_BZ_ZLLX" :value="row.zllx" :tag="false" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="ssbm" align="center" label="所属部门"/>
+            <el-table-column prop="zlnr" align="center" label="指令内容"/>
+          </el-table>
+        </div>
+        <div class="fenye" >
+          <el-pagination
+            class="pagination"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="listQuery.pageCurrent"
+            :page-sizes="[2, 5, 10, 20]"
+            :page-size="listQuery.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          ></el-pagination>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closed">取消</el-button>
+          <el-button type="primary" @click="onComfirm">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ElMessage } from "element-plus";
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import { defineProps, watch, ref, onMounted, getCurrentInstance } from "vue";
+const { proxy } = getCurrentInstance();
+const { D_BZ_TYJB ,D_BZ_ZLLX} = proxy.$dict("D_BZ_TYJB","D_BZ_ZLLX");
+const props = defineProps({
+  //是否显示
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  //标题
+  titleValue: {
+    type: String,
+    default: "选择预警节假日"
+  },
+  //是否单选
+  Single: {
+    type: Boolean,
+    default: false
+  },
+  //已经选中得数据回显
+  data: {
+    type: Array,
+    default: []
+  },
+  jjrId:String
+});
+const keyid = (row) => {
+  return row.id;
+};
+const ridioIndex = ref(null);
+const total = ref(0);
+const listQuery = ref({
+  pageCurrent: 1,
+  pageSize: 20,
+});
+const tableData = ref([]);
+const loading = ref(false)
+const emits = defineEmits(["update:modelValue", "choosedModel"]);
+const closed = () => {
+  listQuery.value = { pageCurrent: 1, pageSize: 20, };
+  emits("update:modelValue", false);
+};
+const reset = () => {
+  listQuery.value = { pageCurrent: 1, pageSize: 20, };
+  getListData();
+};
+// 判断传进来的选中数据和加载的选中数据不满足的数据
+const checkopenList = ref([]);
+
+// 确定选中
+const onComfirm = () => {
+  //单选
+  if (props.Single) {
+    if (![ridioIndex.value][0]) return proxy.$message.warning("请选择节假日");
+    const info = tableData.value.find((item) => {
+      return item.id === ridioIndex.value;
+    });
+    emits("choosedModel", [JSON.parse(JSON.stringify(info))]);
+  } else {
+    //多选
+    const jczList = JSON.parse(JSON.stringify(multipleSelectionUser.value));
+    if (jczList.length === 0) return proxy.$message.warning("请选择节假日");
+
+    let arr = [...jczList, ...checkopenList.value]
+    const map = new Map()
+    let newArr = arr.filter(v=> !map.has(v.id) && map.set(v.id,v))
+    emits("choosedModel",newArr );
+  }
+  closed();
+};
+onMounted(() => {
+  getListData();
+});
+/**
+ * pageSize 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getListData();
+};
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageCurrent = currentPage;
+  getListData();
+};
+//数据
+const getListData = async () => {
+  loading.value = true
+  let params = { ...listQuery.value, jjrid:props.jjrId, }
+  qcckGet(params, "/mosty-jmxf/tbyjmb").then((res) => {
+    tableData.value = res?.records;
+    loading.value = false
+    multipleUser(props.data, tableData.value);
+    total.value = Number(res.total);
+  }).catch(()=>{ loading.value = false });
+};
+const handleFilter = () => {
+  listQuery.value.pageCurrent = 1;
+  getListData();
+};
+
+const multipleUserRef = ref(null);
+const multipleSelectionUser = ref([]);
+const handleSelectionChange = (val) => {
+  multipleSelectionUser.value = val;
+  if (checkopenList.value) {
+    for (let i = 0; i < multipleSelectionUser.value.length; i++) {
+      const l = multipleSelectionUser.value[i];
+      for (let j = 0; j < checkopenList.value.length; j++) {
+        const z = checkopenList.value[j];
+        if (l.id == z.id) {
+          checkopenList.value.splice(j, 1);
+        }
+      }
+    }
+  }
+};
+//回显--用于多选表格
+function multipleUser(row, list) {
+  if (row) {
+    if (props.Single) {
+      row.forEach((item) => {
+        list.forEach((select) => {
+          if (typeof item == "object") {
+            if (item.id == select.id) {
+              ridioIndex.value = item.id;
+            }
+          } else {
+            if (item == select.id) {
+              ridioIndex.value = item;
+            }
+          }
+        });
+      });
+    } else {
+      row.forEach((item) => {
+        list.forEach((select) => {
+          if (item.id == select.id) {
+            if (multipleUserRef.value) {
+              multipleUserRef.value.toggleRowSelection(select, true);
+            }
+          }
+        });
+      });
+    }
+  }
+}
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val === true) {
+      ridioIndex.value = "";
+      handleFilter();
+    }
+  }
+);
+watch(
+  () => props.data,
+  (val) => {
+    if (multipleUserRef.value) multipleUser(val, tableData.value);
+    checkopenList.value = JSON.parse(JSON.stringify(val));
+    multipleSelectionUser.value = JSON.parse(JSON.stringify(val));
+  },{immediate:true,deep:true}
+);
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+::v-deep .el-form--inline {
+  padding-left: 0 !important;
+}
+::v-deep .el-radio__label {
+  display: none;
+}
+
+::v-deep .el-table__body tr.current-row > td.el-table__cell {
+  background: #106fdc;
+}
+</style>

src/views/homeMy/components/dialog/MessageLoad.vue

@@ -0,0 +1,873 @@
+<!--
+ * @Author: 孙总
+ * @Date: 2022-10-17 15:42:41
+ * @LastEditTime: 2022-12-26 19:01:06
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+-->
+<template>
+<!-- @click.stop="closed" -->
+  <div class="message" >
+    <div class="message_main" @click.stop>
+      <div class="message_title">
+        <span>指令详情</span>
+
+        <div class="foots">
+          <el-popover trigger="click" :width="320" placement="right" :visible="showVisible">
+            <template #reference>
+              <span @click="handleChoose" class="btnPromotion"><el-icon :size="16"><Promotion /></el-icon></span>
+            </template>
+            <MOSTY.Department width="100%" clearable multiple filterable v-model="zxrDtoList"/>
+            <div class="btnss" @click="handleDepment">确定</div>
+          </el-popover>
+          <Close @click="closed" style="width: 1.2em; height: 1.2em; cursor: pointer"/>
+        </div>
+      </div>
+      <div class="message_content">
+        <div class="zl_title">
+          {{ props.data.zlbt }}
+        </div>
+        <div class="zl_info">
+          <img v-if="props.data.zltp" :src="props.data.zltp" alt="" />
+          <div class="info_r">
+            <div class="r_title">
+              <span>{{ props.data.zlfqr }}</span>
+              <span v-if="props.data.zlfqr !== '系统'">{{ props.data.zlfqrSfzh.substr(props.data.zlfqrSfzh.length - 2,1) %2 ===0? "女": "男"}}</span>
+              <span class="block" :style="{color:props.data.zldj == 10? 'red' : props.data.zldj == 20? '#da5724': props.data.zldj == 30? 'yellow': 'blue'}">
+                指令等级：<dict-tag :options="D_BZ_TYJB" :value="props.data.zldj" :tag="false"/>>
+              </span>
+              <span class="qszt">
+                <dict-tag :options="D_BZ_ZXZTAI" :value="props.data.zlzxzt" :tag="false"/>
+              </span>
+            </div>
+            <div v-if="props.data.zlfqr !== '系统'"> 汉族 44岁 51033656582252258 &emsp; 指令类型：人员预警 </div>
+            <div class="block">
+              指令来源：<dict-tag :options="D_BZ_ZLLY" :value="props.data.zlly" :tag="false" />
+              位置：{{ props.data.zlfsdd }}
+            </div>
+
+          </div>
+        </div>
+        <div class="zl_nr">
+          内容：{{ props.data.zlnr }}
+          <span>附近监控</span>
+        </div>
+      </div>
+      <div class="message_list" ref="scroll">
+        <div v-for="item in list" :key="item.id">
+          <template v-if="item.xtCjrId == userId">
+            <p style="text-align: right; color: #82878f">  {{ item.zxsj }} </p>
+            <template v-if="item.fjid">
+              <p v-if="item.fileFormat == 'png'" style="text-align: right">
+                <el-image @click="setIndex(baseUrl + item.fjid)"
+                  style="width: 100px; height: 100px"
+                  :src="baseUrl + item.fjid"
+                  :preview-src-list="srcList"
+                  :initial-index="srcIndex"
+                  fit="cover"
+                  preview-teleported
+                />
+              </p>
+              <div class="audio-detail-msg msgRight_box" v-if="item.fileFormat == 'mp3'">
+                <div class="duration-seconds"> {{ item.yysc ? item.yysc : 1 }}s </div>
+                <div
+                  class="audio-style msgRight"
+                  style="margin-left: 8px"
+                  :class="{ 'add-animation': isPlay && audioId == item.fjid }"
+                  :style="{width: handleAudioStyleWidth(item.yysc ? item.yysc : 1)}"
+                  @click=" playAudio( item.fjid, item.yysc ? item.yysc : 1, item.audioUrl)">
+                  <div class="small"></div>
+                  <div class="middle"></div>
+                  <div class="large"></div>
+                </div>
+                <audio :id="item.fjid" style="display: none"></audio>
+              </div>
+              <div style="display: flex; position: relative" class="msgRight_box" v-if="item.fileFormat == 'mp4'">
+                <video :id="item.id" :src="item.videoUrl" style="width: 100px"></video>
+                <img class="rigth_video_play" src="@/assets/play.png" alt="" @click="onClickVideo(item.videoUrl)"/>
+              </div>
+              <div style="display: flex; justify-content: flex-end" v-if="item.fileFormat == 'file'">
+                <p class="wenjian" @click="downFile(item.fjid)"> {{ item.zxnr }} </p>
+              </div>
+            </template>
+            <div v-else style="text-align: right">
+              <div class="xx_item">
+                <span class="xx"> {{ item.zxnr }} </span>
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <p style="color: #82878f"> {{ item.zxsj }}&emsp;{{ item.zlzxrXm }} </p>
+            <template v-if="item.fjid">
+              <p v-if="item.fileFormat == 'png'">
+                <el-image @click="setIndex(baseUrl + item.fjid)"
+                  style="width: 100px; height: 100px"
+                  :src="baseUrl + item.fjid"
+                  :preview-src-list="srcList"
+                  :initial-index="srcIndex"
+                  preview-teleported
+                  fit="cover"
+                />
+              </p>
+              <div class="audio-detail-msg" v-if="item.fileFormat == 'mp3'">
+                <div
+                  class="audio-style"
+                  style="margin-right: 8px"
+                  :class="{ 'add-animation': isPlay && audioId == item.fjid }"
+                  :style="{width: handleAudioStyleWidth(item.yysc ? item.yysc : 1)}"
+                  @click=" playAudio( item.fjid, item.yysc ? item.yysc : 1, item.audioUrl)">
+                  <div class="small"></div>
+                  <div class="middle"></div>
+                  <div class="large"></div>
+                </div>
+                <div class="duration-seconds">
+                  {{ item.yysc ? item.yysc : 1 }}s
+                </div>
+                <audio :id="item.fjid" style="display: none"></audio>
+              </div>
+              <div style="display: flex; position: relative" v-if="item.fileFormat == 'mp4'">
+                <video :id="item.id" :src="item.videoUrl" style="width: 100px"></video>
+                <img class="left_video_play" src="@/assets/play.png" alt="" @click="onClickVideo(item.videoUrl)"/>
+              </div>
+              <div style="display: flex; justify-content: flex-end" v-if="item.fileFormat == 'file'">
+                <p class="wenjian" @click="downFile(item.fjid)">{{ item.zxnr }}</p>
+              </div>
+              <div v-if="item.fileFormat == 'file'" style="text-align: left">
+                <div class="xx_item">
+                  <span @click="downFile(item.fjid)" class="wenjian_l">{{ item.zxnr }}</span>
+                </div>
+              </div>
+            </template>
+            <div v-else>
+              <div class="xx_item">
+                <span class="xx_l">{{ item.zxnr }}</span>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+      <div class="message_form">
+        <input v-model="value" placeholder="请输入你描述的内容" @keyup.enter="submit"  style="width:100%;"/>
+        <el-upload
+          v-model:file-list="fileList"
+          :limit="1"
+          action="/mosty-base/minio/image/upload/id"
+          :on-change="upImgFile"
+          :on-success="upImg"
+          :show-file-list="false">
+          <CirclePlus color="#4e6e95" class="plus" style="width: 1.5em; height: 1.5em" />
+        </el-upload>
+        <el-button @click="submit">发送</el-button>
+      </div>
+    </div>
+    <div v-if="dialogShowVideo" class="dialogShowVideo" @click.stop="dialogShowVideo = false">
+      <video :src="langVideoUrl" class="video_box" controls></video>
+      <el-icon :size="40" color="#999" class="video_close"><CircleClose /> </el-icon>
+    </div>
+
+    <MjLoad v-model="visible" @choosedUsers="hanlderChooseMj" />
+    <XzLoad v-model="visibleJz" :Single='false' @choosedUsers="hanlderChooseJZ" />
+  </div>
+</template>
+
+<script setup>
+import axios from "axios";
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import MjLoad from "@/components/MyComponents/ChooseJz/MjLoad.vue";
+import XzLoad from "@/components/MyComponents/ChooseJz/xzLoad.vue";
+import * as MOSTY from "@/components/MyComponents/index";
+import { reactive, ref, defineProps, defineEmits, getCurrentInstance, onMounted, nextTick, onUnmounted, onBeforeUnmount } from "vue";
+import { getZxjlList, addZxjl, downFiles } from "@/api/instructCenter.js";
+import { IS_PNG, IS_MP3, IS_MP4 } from "@/utils/tools.js";
+import { getItem } from "@/utils/storage.js";
+import { Emitter } from "@fullcalendar/core";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  data: {
+    type: Object,
+    required: true
+  }
+});
+
+const showVisible = ref(false);
+const visible = ref(false);
+const visibleJz = ref(false);
+const zxrDtoList = ref([])
+
+const baseUrl = '/mosty-base/minio/image/download/'
+const fileList = ref([]);
+const imgLx = ["png", "jpg", "jpeg", "bmp", "gif"];//图片格式
+//音频格式
+const radioFormat = ["wav"];
+const srcIndex = ref(0);
+const { proxy } = getCurrentInstance();
+const { D_BZ_TYJB, D_BZ_ZLLY, D_BZ_ZLLX, D_BZ_ZXZTAI } = proxy.$dict("D_BZ_TYJB", "D_BZ_ZLLY", "D_BZ_ZLLX", "D_BZ_ZXZTAI");
+const userId = getItem("USERID");
+const copyVal = ref("");
+const list = ref([]);//消息列表
+const dialogShowVideo = ref(false); //视频放大
+const langVideoUrl = ref(""); //预览视频地址
+const srcList = ref([]);//图片预览列表
+const timer = ref(null);
+const scroll = ref(null);
+
+const isPlay = ref(false); //开始语音播放动画
+const playAudioTimer = ref(null); //语音播放定时器
+const audioId = ref(""); //被选中播放的音频ID
+const value = ref("");
+const fjId = ref(false);
+const emits = defineEmits(["update:modelValue", "upData"]);
+const closed = () => {
+  emits("update:modelValue", false);
+};
+
+const handleChoose = () =>{
+  switch(props.data.zljsdx){
+    case '01'://人员
+      visible.value = true;
+      break;
+    case '02'://部门
+      showVisible.value = !showVisible.value;
+      break;
+    case '03'://巡组
+      visibleJz.value = true;
+      break;
+  }
+}
+
+//选择警组
+function hanlderChooseJZ(arr) {
+  let list = arr.map((item) => {
+    return {
+      zxrXzid: item.id,
+      zxrLx: "03",
+      zxrXzmc: item.jzMc
+    };
+  });
+  addXfzl(list)
+}
+
+//选择民警
+function hanlderChooseMj(arr) {
+  let list = arr.map((item) => {
+    return {
+      zxrDh: item.lxdh,
+      zxrId: item.ryid,
+      zxrJllx: item.fl,
+      zxrLx: "01",
+      zxrSfz: item.sfzh,
+      zxrXm: item.xm
+    };
+  });
+  addXfzl(list)
+}
+
+//选择部门
+function handleDepment() {
+  let list = zxrDtoList.value.map(item=>{
+    return {
+      ssbmid: item,
+      zxrLx: "02"
+    }
+  })
+  addXfzl(list)
+}
+
+// 新增下发指令
+function addXfzl(val) {
+  let params = { zlId:props.data.id, zxrDtoList:val}
+  qcckPost(params,'/mosty-jmxf/tbZl/addZlZxr').then(res=>{
+    zxrDtoList.value = []
+    proxy.$message({ type: "success", message: "指令下发成功" });
+  })
+}
+
+//点击视频放大
+function onClickVideo(url) {
+  langVideoUrl.value = url;
+  dialogShowVideo.value = true;
+}
+//播放语音
+function playAudio(id, yysc, url) {
+  let au = document.getElementById(id);
+  au.src = url;
+  audioId.value = id;
+  if (isPlay.value) {
+    isPlay.value = false;
+    au.pause();
+    return;
+  }
+  isPlay.value = true;
+  playAudioTimer.value = setTimeout(() => {
+    isPlay.value = false;
+  }, parseInt(yysc * 1000));
+  au.play();
+}
+// 设置语音条宽度样式
+function handleAudioStyleWidth(yycs) {
+  if (yycs === 1) {
+    return "38px";
+  } else if (yycs > 1 && yycs < 20) {
+    return `${38 + (yycs / 10) * 36}px`;
+  } else if (yycs >= 20) {
+    return `${106.39 + (yycs / 10) * 18.935}px`;
+  }
+}
+//获取消息记录
+function getZxjl() {
+  let params = {zlid: props.data.id,time: list.value.length > 0 ? list.value[list.value.length - 1].zxsj : ""}
+  getZxjlList(params).then(async (res) => {
+    if (res && res.length > 0) {
+      for (let i = 0; i < res.length; i++) {
+        let item = res[i];
+        if (item.zxnr && item.fjid) {
+          //判断是那种文件类型.
+          let fjIndex = item.zxnr.lastIndexOf(".");
+          if (fjIndex != -1) {
+            let file_Format = item.zxnr.substring(
+              fjIndex + 1,
+              item.zxnr.length
+            );
+            if (IS_PNG(file_Format)) {
+              item.fileFormat = "png";
+            } else if (IS_MP3(file_Format)) {
+              await _getAudioAndVideoUrl(item.fjid).then((res) => {
+                item.audioUrl = res;
+              });
+              item.fileFormat = "mp3";
+            } else if (IS_MP4(file_Format)) {
+              item.fileFormat = "mp4";
+              await _getAudioAndVideoUrl(item.fjid).then((res) => {
+                item.videoUrl = res;
+              });
+            } else {
+              item.fileFormat = "file";
+            }
+          }
+        }
+        list.value.push(item);
+      }
+      srcList.value = list.value.filter((item) => isImg(item.zxnr) && item.fjid).map((item) => baseUrl + item.fjid);
+      nextTick(() => {
+        try {
+          scroll.value.scrollTop = scroll.value.scrollHeight;
+        } catch (error) {
+          return;
+        }
+      });
+    }
+  });
+}
+//获取视频音频地址
+function _getAudioAndVideoUrl(fjid) {
+  return new Promise((ok) => {
+    axios.get(`/mosty-base/minio/file/download/${fjid}`, {params: {}}).then((res) => {
+      if (res) ok(res.data.data.url);
+    });
+  });
+}
+function setIndex(e) {
+  srcIndex.value = srcList.value.indexOf(e);
+}
+//判断是否为图片
+function isImg(fileName) {
+  let suffix = fileName.substr(fileName.lastIndexOf(".") + 1, 4);
+  return imgLx.includes(suffix);
+}
+//下载文件
+function downFile(id) {
+  let el = document.createElement("a");
+  el.href = baseUrl+`${id}`;
+  el.click();
+  el.remove();
+}
+//发送消息
+function submit() {
+  if (!value.value) return false;
+  const data = {
+    zxnr: value.value,
+    jd: props.data.jd,
+    wd: props.data.wd,
+    zlId: props.data.id
+  };
+  value.value = "";
+  addZxjl(data).then(() => {
+    fileList.value = [];
+  });
+}
+
+function upImg(row) {
+  fjId.value = row.data;
+  const data = {
+    zxnr: copyVal.value,
+    jd: props.data.jd,
+    wd: props.data.wd,
+    zlId: props.data.id,
+    fjid: fjId.value
+  };
+  addZxjl(data).then(() => {
+    fileList.value = [];
+    fjId.value = false;
+  });
+}
+function upImgFile(row) {
+  copyVal.value = row.name;
+}
+onMounted(() => {
+  getZxjl();
+  timer.value = setInterval(() => {
+    getZxjl();//轮询
+  }, 2e3);
+});
+onUnmounted(() => {
+  clearInterval(timer.value);
+});
+onBeforeUnmount(() => {
+  clearTimeout(playAudioTimer.value);
+  playAudioTimer.value = null;
+});
+</script>
+<style lang="scss" scoped>
+p {
+  margin: 0;
+  padding: 0;
+}
+.message {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+
+  .message_main {
+    width: 820px;
+    background: #091e33;
+    border-radius: 8px;
+    overflow: hidden;
+    min-height: 650px;
+    .message_title {
+      display: flex;
+      justify-content: space-between;
+      padding: 6px 16px;
+      background: #14427e;
+      font-size: 18px;
+    }
+    .message_content {
+      background: #052342;
+      border-bottom: 2px solid #193b62;
+      .zl_title {
+        font-size: 16px;
+        line-height: 1.5em;
+        padding: 6px 12px 0;
+      }
+      .zl_nr {
+        color: #56759c;
+        line-height: 1.8em;
+        position: relative;
+        border-top: 1px solid #193b62;
+        padding: 4px 0;
+        padding-right: 55px;
+        margin: 0 12px;
+        > span {
+          position: absolute;
+          text-decoration: underline;
+          cursor: pointer;
+          bottom: 4px;
+          right: 0;
+          color: #027ce6;
+        }
+      }
+      .zl_info {
+        display: flex;
+        padding: 6px 12px;
+        color: #5a79a0;
+        > img {
+          width: 60px;
+          height: 60px;
+          margin-right: 12px;
+        }
+        .block div {
+          display: inline-block;
+          margin-right: 16px;
+        }
+        .info_r {
+          flex: 1;
+          line-height: 1.9em;
+          .r_title {
+            color: #fff;
+            font-size: 18px;
+            position: relative;
+            font-weight: 300;
+            span {
+              margin-right: 18px;
+            }
+            .qszt {
+              position: absolute;
+              right: 0px;
+              top: 0;
+              color: #027ce6;
+              font-size: 14px;
+              margin: 0;
+            }
+          }
+          .zxdt {
+            color: #027ce6;
+          }
+        }
+      }
+    }
+    .message_list {
+      height: 400px;
+      background: #091e33;
+      padding: 0 8px;
+      margin: 4px;
+      overflow: auto;
+      p {
+        line-height: 2em;
+      }
+      .xx_item {
+        text-align: right;
+        background: #12294c;
+        max-width: 500px;
+        width: auto;
+        display: inline-block;
+        padding: 4px 12px;
+        word-wrap: break-word;
+        border-radius: 4px;
+      }
+      .wenjian {
+        display: inline-block;
+        background: #12294c;
+        color: #00a0e0;
+        line-height: 2em;
+        padding: 0 12px;
+        border-radius: 4px;
+        cursor: pointer;
+        text-decoration: underline;
+      }
+      .wenjian_l {
+        display: inline-block;
+        background: #12294c;
+        color: #00a0e0;
+        line-height: 2em;
+        padding: 0 12px;
+        border-radius: 4px;
+        cursor: pointer;
+        text-decoration: underline;
+      }
+      .radio {
+        background: #052342;
+        display: inline-block;
+        padding: 4px 12px;
+        border-radius: 4px;
+        .sc {
+          display: inline-block;
+          padding-left: 12px;
+        }
+      }
+    }
+    .message_form {
+      background: #052342;
+      padding: 8px;
+      display: flex;
+      position: relative;
+      .el-button {
+        margin-left: 12px;
+        box-shadow: inset 0px 0px 8px 4px #0e3054;
+      }
+      .el-button:hover {
+        background: #0c376e;
+      }
+      .el-button:focus {
+        background: #0c376e;
+        border-color: #0c376e;
+      }
+      .plus {
+        position: absolute;
+        right: 83px;
+        top: 14px;
+      }
+      input {
+        outline: none;
+        flex: 1;
+        color: #fff;
+        background: #0d2a48;
+        border: none;
+        border-radius: 2px;
+        text-indent: 8px;
+        padding-right: 36px;
+      }
+    }
+  }
+}
+// 语音条
+.audio-detail-msg {
+  display: flex;
+  align-items: center;
+
+  .msgRight {
+    transform: rotate(180deg);
+  }
+  .audio-style {
+    display: flex;
+    align-items: center;
+    height: 32px;
+
+    padding: 0 10px;
+    border-radius: 4px;
+    background: rgba(149, 236, 105, 0.5);
+
+    .small {
+      border: 4px solid #fff;
+      border-top-color: transparent;
+      border-left-color: transparent;
+      border-bottom-color: transparent;
+    }
+    .middle {
+      width: 16px;
+      height: 16px;
+      margin-left: -11px;
+      opacity: 1;
+    }
+    .large {
+      width: 24px;
+      height: 24px;
+      margin-left: -19px;
+      opacity: 1;
+    }
+
+    & > div {
+      border: 2px solid #fff;
+      border-top-color: transparent;
+      border-left-color: transparent;
+      border-bottom-color: transparent;
+      border-radius: 50%;
+      box-sizing: border-box;
+    }
+
+    &.add-animation {
+      .middle {
+        animation: show2 1.2s ease-in-out infinite;
+      }
+
+      .large {
+        animation: show3 1.2s ease-in-out infinite;
+      }
+    }
+  }
+
+  // 语音播放动画
+  @keyframes show2 {
+    0% {
+      opacity: 0;
+    }
+
+    10% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes show3 {
+    0% {
+      opacity: 0;
+    }
+
+    50% {
+      opacity: 1;
+    }
+
+    60% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+
+  // 语音录制动画
+  @keyframes backgroundInfinite2 {
+    0% {
+      background: #666;
+    }
+
+    20% {
+      background: #f5f5f5;
+    }
+
+    95% {
+      background: #f5f5f5;
+    }
+
+    100% {
+      background: #666;
+    }
+  }
+
+  @keyframes backgroundInfinite3 {
+    0% {
+      background: #666;
+    }
+
+    30% {
+      background: #f5f5f5;
+    }
+
+    85% {
+      background: #f5f5f5;
+    }
+
+    100% {
+      background: #666;
+    }
+  }
+
+  @keyframes backgroundInfinite4 {
+    0% {
+      background: #666;
+    }
+
+    55% {
+      background: #f5f5f5;
+    }
+
+    75% {
+      background: #f5f5f5;
+    }
+
+    100% {
+      background: #666;
+    }
+  }
+
+  @keyframes backgroundInfinite5 {
+    0% {
+      background: #666;
+    }
+
+    45% {
+      background: #666;
+    }
+
+    60% {
+      background: #f5f5f5;
+    }
+
+    75% {
+      background: #f5f5f5;
+    }
+
+    100% {
+      background: #666;
+    }
+  }
+
+  @keyframes backgroundInfinite6 {
+    0% {
+      background: #666;
+    }
+
+    65% {
+      background: #666;
+    }
+
+    85% {
+      background: #f5f5f5;
+    }
+
+    100% {
+      background: #666;
+    }
+  }
+
+  @keyframes backgroundInfinite7 {
+    0% {
+      background: #666;
+    }
+
+    75% {
+      background: #666;
+    }
+
+    95% {
+      background: #f5f5f5;
+    }
+
+    100% {
+      background: #666;
+    }
+  }
+}
+.msgRight_box {
+  justify-content: flex-end;
+}
+.rigth_video_play {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  top: 50%;
+  right: 50px;
+  margin-top: -20px;
+  margin-right: -20px;
+}
+.left_video_play {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  top: 50%;
+  left: 50px;
+  margin-top: -20px;
+  margin-left: -20px;
+}
+.dialogShowVideo {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.9);
+  padding: 80px 0;
+  text-align: center;
+  .video_box {
+    height: 100%;
+  }
+  .video_close {
+    position: absolute;
+    top: 80px;
+    right: 50px;
+  }
+}
+.foots{
+  position: relative;
+  .btnPromotion{
+    position: absolute;
+    color: #5593d4;
+    top: 41px;
+    right: -1px;
+  }
+
+}
+.btnss{
+  text-align: center;
+  margin-top: 4px;
+  background: #234687;
+  color: #fff;
+  border-radius: 4px;
+  border: 1px solid #2868ab;
+  padding: 4px 0;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+</style>

src/views/homeMy/components/dialog/addQwDialog.vue

@@ -0,0 +1,259 @@
+<template>
+  <!--新增勤务等级 -->
+  <div>
+    <el-dialog
+      v-model="dialogFormVisiblejs"
+      title="新增勤务等级"
+      width="80%"
+      top="5vh"
+      :destroy-on-close="true"
+    >
+      <el-form
+        ref="elform"
+        :model="form"
+        :rules="rules"
+        :inline="true"
+        label-position="top"
+      >
+        <el-form-item prop="qwdj" label="勤务等级">
+          <el-select @change="checkQwdj" style="width: 100%" v-model="form.qwdj">
+            <el-option
+              v-for="dict in D_BZ_DJQW"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item style="width: 48%" required label="勤务起止时间">
+          <el-date-picker
+            style="width: 100%"
+            v-model="qwQzsj"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            format="YYYY-MM-DD HH:mm"
+            value-format="YYYY-MM-DD HH:mm:ss"
+          />
+        </el-form-item>
+        <el-form-item prop="zxfw" label="执行范围">
+          <el-select disabled style="width: 100%" v-model="form.zxfw">
+            <el-option
+              v-for="dict in D_BZ_ZXFW"
+              :key="dict.value"
+              :disabled="dict.value != '03'"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="jyzqrybl" label="建议执勤人员比例（%）">
+          <el-input-number
+            :max="100"
+            :min="0"
+            style="width: 100%"
+            v-model="form.jyzqrybl"
+            :step="1"
+          />
+        </el-form-item>
+        <el-form-item prop="jyzqclbl" label="建议执勤车辆比例（%）">
+          <el-input-number
+            style="width: 100%"
+            v-model="form.jyzqclbl"
+            :step="1"
+          />
+        </el-form-item>
+        <el-form-item
+          class="twoh"
+          style="width: 100%"
+          prop="qwyy"
+          label="勤务原因"
+        >
+          <el-input
+            v-model="form.qwyy"
+            placeholder="请填写勤务原因"
+            show-word-limit
+            type="textarea"
+          />
+        </el-form-item>
+        <el-form-item
+          class="twoh"
+          style="width: 100%"
+          prop="qwyq"
+          label="勤务要求"
+        >
+          <el-input
+            v-model="form.qwyq"
+            placeholder="请填写勤务要求"
+            show-word-limit
+            type="textarea"
+          />
+        </el-form-item>
+        <el-form-item style="width: 100%" prop="fjzl" label="附件资料">
+          <MOSTY.Upload
+            width="800px"
+            :limit="3"
+            :isImg="false"
+            v-model="form.fjzl"
+          ></MOSTY.Upload>
+        </el-form-item>
+        <el-form-item label="备注" style="width: 100%">
+          <el-input
+            v-model="form.bz"
+            placeholder="请输入关键字"
+            show-word-limit
+            type="textarea"
+          />
+        </el-form-item>
+      </el-form>
+      <div class="but_box">
+        <el-button
+          type="primary"
+          size="large"
+          :loading="btnLoading"
+          @click="submit"
+          >保存</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import emitter from "@/utils/eventBus.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { addQwdj } from "@/api/service/grade.js";
+import { getItem } from "@/utils/storage";
+import { reactive, ref, onMounted, onUnmounted, getCurrentInstance } from "vue";
+const { proxy } = getCurrentInstance();
+const { D_BZ_DJQW, D_BZ_ZXFW } = proxy.$dict("D_BZ_DJQW", "D_BZ_ZXFW"); //获取字典数据
+const dialogFormVisiblejs = ref(false); //是否显示对话框
+const elform = ref(null); //表单对象
+const btnLoading = ref(false); //按钮截流
+const qwQzsj = ref([]); //勤务起止时间
+//表单数据
+const form = ref({
+  jyzqclbl: 34,
+  jyzqrybl: 34,
+  zxfw: "03",
+  qwdj: "",
+  qwyy: "",
+  qwyq: "",
+  fjzl: "",
+  bz: ""
+});
+//表单验证
+const rules = reactive({
+  qwdj: [
+    {
+      required: true,
+      message: "请选择勤务等级",
+      trigger: "change"
+    }
+  ],
+  qwkssj: [
+    {
+      required: true,
+      message: "请选择勤务开始日期",
+      trigger: "change"
+    }
+  ],
+  qwjssj: [
+    {
+      required: true,
+      message: "请选择勤务结束日期",
+      trigger: "change"
+    }
+  ],
+  zxfw: [
+    {
+      required: true,
+      message: "请选择执行范围",
+      trigger: "change"
+    }
+  ]
+});
+onMounted(() => {
+  emitter.on("showAddQw", (res) => {
+    dialogFormVisiblejs.value = true;
+  });
+});
+onUnmounted(() => {
+  emitter.off("showAddQw");
+});
+//提交
+function submit() {
+  form.value.pzrId = getItem("USERID") + "";
+  elform.value.validate((valid) => {
+    if (valid) {
+      btnLoading.value = true;
+      setTimeout(() => {
+        btnLoading.value = false;
+      }, 1500);
+      addQwdj(form.value).then(() => {
+        proxy.$message({
+          type: "success",
+          message: "新增成功"
+        });
+        dialogFormVisiblejs.value = false;
+      });
+    }
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+.but_box {
+  text-align: center;
+}
+
+::v-deep .el-input__inner,
+::v-deep .el-input.is-disabled .el-input__inner {
+  border: 1px solid #03438b;
+  color: #fff;
+}
+
+::v-deep .el-range-separator {
+  color: #fff;
+}
+
+::v-deep .el-form--inline {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0rem 12rem 0rem 12rem;
+}
+
+::v-deep .el-form-item--default {
+  width: 23%;
+  padding-bottom: 1.5rem;
+  margin: 0 1%;
+}
+
+::v-deep .el-form-item--default.two {
+  width: 46%;
+  padding-bottom: 1.5rem;
+  margin: 0 1%;
+}
+
+::v-deep .el-form-item--default.one {
+  width: 92%;
+  padding-bottom: 1.5rem;
+  margin: 0 1%;
+}
+
+::v-deep .el-textarea__inner {
+  height: 5.5em;
+  border: 1px solid #07376d;
+  background-color: #02163b;
+  color: #fff;
+}
+::v-deep .el-form-item__label{
+  color: #fff;
+}
+::v-deep.el-form{
+  max-height: 74vh;
+  overflow: hidden;
+  overflow-y: auto;
+}
+</style>

src/views/homeMy/components/dialog/ajInfo.vue

@@ -0,0 +1,112 @@
+<!--
+ * @Author: your name
+ * @Date: 2024-07-01 10:34:30
+ * @LastEditTime: 2024-07-04 10:11:46
+ * @LastEditors: your name
+ * @Description: In User Settings Edit
+ * @FilePath: \my_web_new_gd\src\views\largeScreen\home\components\dialog\ajInfo.vue
+-->
+<template>
+  <div class="dialogBox">
+    <div class="title">
+      <span class="mc">警情详情</span>
+      <span @click="close" class="close">
+        <el-icon><Close /></el-icon>
+      </span>
+    </div>
+    <div class="box-contant" style="padding: 4px 10px; box-sizing: border-box">
+      <div v-for="(item, index) in props.data" :key="index">
+        <div class="infoBox">
+          <JqItm :data="item" :isDetail="true"></JqItm>
+        </div>
+        <div class="btnBox">
+          <button class="dp-default small" @click="handleGroup(item)">
+            推荐处警巡组
+          </button>
+          <button class="dp-default small">现场视频</button>
+          <button class="dp-default small" @click="handleVideo(item)">
+            周边视频
+          </button>
+          <button class="dp-default small" @click="XZBtnShowFn(item)">
+            指定处置
+          </button>
+          <button class="dp-default small" @click="goPath(item)">
+            指挥调度
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ElMessage } from "element-plus";
+import JqItm from "@/views/homeMy/components/jqIem.vue";
+import { ref, defineProps } from "vue";
+import { useRouter } from "vue-router";
+import emitter from "@/utils/eventBus.js"; // 左右折叠状态
+import { addNewEvent } from "@/api/dpApi/home.js";
+const props = defineProps({
+  data: {
+    type: Array,
+    default: []
+  }
+});
+const router = useRouter();
+
+//关闭弹窗
+function close() {
+  emitter.emit("showAj", false);
+  emitter.emit("deletePointArea", "jq");
+  emitter.emit("removePlot", "PIOT");
+}
+
+// 周边视频
+function handleVideo(item) {
+  emitter.emit("videoClick", item);
+}
+//出警巡组
+function handleGroup(item) {
+  if (item.jd && item.wd) {
+    emitter.emit("showZbxz", { data: item, type: "jq" });
+  } else {
+    ElMessage({ message: "该警情暂时没有经纬度!", type: "warning" });
+  }
+}
+
+//先用转为指令弹窗
+function XZBtnShowFn(item) {
+  let obj = { type: "jq", data: item };
+  emitter.emit("showXZBtn", obj);
+}
+
+// 跳转指挥调度
+function goPath (item) {
+  if(!item.jd && !item.wd) return ElMessage({ message: "该警情暂时没有经纬度!", type: "warning" });
+  const DDZHhref = router.resolve({
+    name: "commandDispatch", //这里是跳转页面的name
+    path: "/commandDispatch",
+    params:{id:item.id}
+  });
+  window.open(DDZHhref.href, "_self");
+  // window.open(DDZHhref.href, "_blank");
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+.box-contant {
+  max-height: 700px;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.btnBox{
+  text-align: center;
+  button{
+    margin: 0 1px;
+  }
+}
+.dialogBox{
+  width: 374px !important;
+}
+</style>

src/views/homeMy/components/dialog/baseInfo.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="groupInfo noScollLine">
+      <div class="inaInfo" v-for="(item,idex) in props.data" :key="idex">
+        <div class="inb">
+          <span class="spa">检查站名称 </span>
+          <span class="address">：{{ item.jczmc }}</span>
+        </div>
+        <div class="inb">
+          <span class="spa">点位类型 </span>
+          <span class="address">：
+            <dict-tag class="tagItem" :options="D_BZ_JCZLX" :value="item.jczlx" :tag="false"  color="#01c3fd" />
+          </span>
+        </div>
+        <div class="inb">
+          <span class="spa">负责人 </span>
+          <span class="address" v-if="item.fzr">：{{ item.fzr }}（{{ item.lxdh }}）</span>
+          <span class="address" v-else>：暂无</span>
+        </div>
+        <div class="inb">
+          <span class="spa">所属圈层 </span>
+          <span class="address">：{{ item.ssqcmc }}</span>
+        </div>
+        <div class="inb">
+          <span class="spa">区县 </span>
+          <span class="address">：{{ item.sssgaj }} - {{ item.ssxgaj }}</span>
+        </div>
+        <div class="inb">
+          <span class="spa">道路类型 </span>
+          <span class="address">：
+            <dict-tag class="tagItem" :options="D_BZ_DLLX" :value="item.dllx" :tag="false" color="#01c3fd"/>
+          </span>
+        </div>
+        <div class="inb">
+          <span class="spa">所属部门 </span>
+          <span class="address" :title="item.ssbm">：{{ item.ssbm }}</span>
+        </div>
+        <el-carousel height="150px" style="margin-top: 10px" v-if="item.fjid && item.fjid.length > 0">
+          <el-carousel-item v-for="itChild in item.fjid" :key="itChild">
+            <el-image
+              preview-teleported
+              :preview-src-list="[`/mosty-base/obs/download?id=${itChild}`]"
+              :initial-index="0"
+              fit="cover"
+              :src="`/mosty-base/obs/download?id=${itChild}`"
+            />
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+  </div>
+</template>
+<script setup>
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import { onMounted, ref, getCurrentInstance, defineProps, watch } from "vue";
+const { proxy } = getCurrentInstance();
+const { D_BZ_JCZLX, D_BZ_DLLX } = proxy.$dict("D_BZ_JCZLX", "D_BZ_DLLX");
+const props = defineProps({
+  data: Array
+});
+
+</script>>
+<style lang="scss" scoped >
+.groupInfo {
+  width: 100%;
+  height: 100%;
+  border-radius: 3px;
+  position: relative;
+  box-shadow: inset 0 0 10px#01c3ed;
+  padding: 5px 14px;
+  box-sizing: border-box;
+  overflow: hidden;
+  overflow-y: auto;
+
+  .inaInfo {
+    .inb {
+      margin-top: 2px;
+      font-size: 14px;
+      .spa {
+        color: #8ea6bf;
+        display: inline-block;
+        width: 70px;
+        text-align-last: justify;
+      }
+      .address {
+        line-height: 19px;
+        flex: 1;
+        color: #01c3fd;
+        margin-left: 4px;
+        .tagItem {
+          display: inline;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/homeMy/components/dialog/cyryInfo.vue

@@ -0,0 +1,147 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-09-20 10:22:51
+ * @LastEditTime: 2022-09-22 10:51:44
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ *
+-->
+<template>
+  <div class="dialogBox">
+    <div class="title">
+      <span class="mc">从业人员</span>
+      <span @click="close" class="close">
+        <el-icon><Close /></el-icon>
+      </span>
+    </div>
+    <div class="listBox noScollLine">
+      <div v-for="(item, index) in newList" :key="index">
+        <div class="infoBox">
+          <div class="content">姓名：{{ item.xm }} （ {{item.sfzh}} ）</div>
+          <div class="content">联系电话：{{ item.lxdh }}</div>
+          <div class="content">定位时间：{{ item.xtCjsj }}</div>
+          <div class="content">所属部门：{{ item.ssbm }}</div>
+          <div class="content">从业单位：
+            <template v-if="item.dwglList">
+              <div class="peoBox peoBoxtop"><span>单位名称</span><span>单位类型</span><span>单位分类</span></div>
+              <div v-for="it in item.dwglList" :key="it">
+                <div class="peoBox">
+                  <span>{{ it.dwmc }}</span>
+                  <span><dict-tag :options="D_BZ_DWLX" :value="it.dwlx" :tag="false" /></span>
+                  <span><dict-tag :options="D_BZ_DWFL" :value="it.dwfl" :tag="false" /></span>
+                </div>
+                <div class="adress">地址：{{it.dz}}</div>
+              </div>
+            </template>
+          </div>
+          <!-- <div class="address">
+            <img src="@/assets/images/dingwei.png" />
+            <span>{{ item.xxdz }}</span>
+          </div> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { qcckPost , qcckGet} from "@/api/qcckApi.js";
+import { ref, defineProps ,watch,getCurrentInstance} from "vue";
+// 左右折叠状态
+import emitter from "@/utils/eventBus.js";
+const { proxy } = getCurrentInstance();
+const { D_BZ_DWFL,D_BZ_DWLX } = proxy.$dict("D_BZ_DWFL","D_BZ_DWLX");
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: []
+  }
+});
+const newList = ref([])
+watch(()=>props.data,(val)=>{
+  console.log(val)
+  if(!val) return;
+  val.forEach(item=>{ getInfo(item.ryid) })
+},{ immediate: true, deep: true })
+
+function getInfo(id){
+  qcckGet({},'/mosty-jmxf/tbJcglXfCyry/'+id).then(res=>{
+    console.log(newList.value)
+    newList.value = res ? [res] : []
+  })
+}
+
+//关闭弹窗
+function close() {
+  emitter.emit("showCyry", false);
+}
+</script>
+<style lang="scss" scoped>
+@import "@/assets/css/largeScreen.scss";
+@import "@/assets/css/homeScreen.scss";
+.dialogBox {
+  .listBox {
+    padding: 4px 10px;
+    box-sizing: border-box;
+    max-height: 80vh;
+    overflow: hidden;
+    overflow-y: auto;
+    .infoBox {
+      padding: 4px 10px;
+      border: 1px solid #4190ad;
+      margin-bottom: 5px;
+      border-radius: 4px;
+      .other {
+        margin: 5 10px;
+        color: #779dcd;
+      }
+    }
+    .address {
+      margin-top: 10px;
+      border-top: 1px solid #18617e;
+      padding-top: 6px;
+      img {
+        margin-right: 10px;
+      }
+    }
+  }
+}
+.peoBox{
+  display: flex;
+  justify-content: space-between;
+  border:1px solid #296a78;
+  padding:1px 4px;
+  span{
+    flex:2;
+    color: rgb(173 203 231);
+    border-right:1px solid #296a78;
+    padding-left:4px;
+  }
+  span:nth-child(2){
+    text-align:center;
+    flex:1;
+  }
+  span:nth-child(3){
+    flex:1;
+    border-right:none;
+    text-align:center;
+  }
+}
+.peoBoxtop{
+  span{
+    color:#fff;
+  }
+  margin-bottom:4px;
+  background:rgba(106,103,103,0.5);
+}
+.adress{
+  border:1px solid #296a78;
+  border-top:none;
+  padding:1px 4px;
+  margin-bottom:4px;
+  color: rgb(173 203 231);
+}
+
+
+</style>

src/views/homeMy/components/dialog/dwModel.vue

@@ -0,0 +1,267 @@
+<template>
+  <div>
+    <el-dialog :title="titleValue" width="1400px" v-model="modelValue" @close="closed">
+      <div v-if="modelValue">
+        <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
+          <el-form-item prop="zlbt" label="单位名称">
+            <el-input v-model="listQuery.dwmc" placeholder="请输入单位名称"></el-input>
+          </el-form-item>
+           <el-form-item prop="dwfl" label="单位分类">
+              <el-select v-model="listQuery.dwfl">
+                <el-option v-for="item in D_BZ_DWFL" :key="item.value" :label="item.label" :value="item.value"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="dwlx" label="单位类型">
+              <el-select v-model="listQuery.dwlx">
+                <el-option v-for="item in D_BZ_DWLX" :key="item.value" :label="item.label" :value="item.value"></el-option>
+              </el-select>
+            </el-form-item>
+
+          <el-form-item>
+            <el-button type="success" @click="handleFilter">查询</el-button>
+            <el-button type="info" @click="reset"> 重置 </el-button>
+          </el-form-item>
+        </el-form>
+        <div class="tabBox" style="margin-top: 0px" v-if="modelValue">
+          <el-table
+            ref="multipleUserRef"
+            @selection-change="handleSelectionChange"
+            :data="tableData"
+            :highlight-current-row="props.Single"
+            border
+            v-loading="loading"
+            style="width: 100%"
+            :row-key="keyid"
+            height="450">
+            <el-table-column type="selection" width="55" :reserve-selection="true" v-if="!props.Single"/>
+            <el-table-column width="55" #default="{ row }" v-else>
+              <el-radio v-model="ridioIndex" :label="row.id"></el-radio>
+            </el-table-column>
+            <el-table-column  type="index" align="center" width="60px" label="序号" />
+
+            <el-table-column prop="dwmc" align="center" label="单位名称"/>
+
+            <el-table-column prop="dwlx" align="center" label="单位类型" >
+              <template #default="{ row }">
+                <dict-tag :options="D_BZ_DWLX" :value="row.dwlx" :tag="false" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="dwfl" align="center" label="单位分类">
+              <template #default="{ row }">
+                <dict-tag :options="D_BZ_DWFL" :value="row.dwfl" :tag="false" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="dz" align="center" label="单位地址"/>
+          </el-table>
+        </div>
+        <div class="fenye" >
+          <el-pagination
+            class="pagination"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="listQuery.pageCurrent"
+            :page-sizes="[2, 5, 10, 20]"
+            :page-size="listQuery.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          ></el-pagination>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closed">取消</el-button>
+          <el-button type="primary" @click="onComfirm">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ElMessage } from "element-plus";
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import { defineProps, watch, ref, onMounted, getCurrentInstance } from "vue";
+const { proxy } = getCurrentInstance();
+const { D_BZ_DWFL,D_BZ_DWLX } = proxy.$dict("D_BZ_DWFL","D_BZ_DWLX");
+const props = defineProps({
+  //是否显示
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  //标题
+  titleValue: {
+    type: String,
+    default: "选择单位"
+  },
+  //是否单选
+  Single: {
+    type: Boolean,
+    default: false
+  },
+  //已经选中得数据回显
+  data: {
+    type: Array,
+    default: []
+  },
+});
+const keyid = (row) => {
+  return row.id;
+};
+const ridioIndex = ref(null);
+const total = ref(0);
+const listQuery = ref({
+  pageCurrent: 1,
+  pageSize: 20,
+});
+const tableData = ref([]);
+const loading = ref(false)
+const emits = defineEmits(["update:modelValue", "choosedModel"]);
+
+onMounted(() => {
+  getListData();
+});
+
+const closed = () => {
+  listQuery.value = { pageCurrent: 1, pageSize: 20, };
+  emits("update:modelValue", false);
+};
+const reset = () => {
+  listQuery.value = { pageCurrent: 1, pageSize: 20, };
+  getListData();
+};
+// 判断传进来的选中数据和加载的选中数据不满足的数据
+const checkopenList = ref([]);
+
+// 确定选中
+const onComfirm = () => {
+  //单选
+  if (props.Single) {
+    if (![ridioIndex.value][0]) return proxy.$message.warning("请选择单位");
+    const info = tableData.value.find((item) => {
+      return item.id === ridioIndex.value;
+    });
+    emits("choosedModel", [JSON.parse(JSON.stringify(info))]);
+  } else {
+    //多选
+    const jczList = JSON.parse(JSON.stringify(multipleSelectionUser.value));
+    if (jczList.length === 0) return proxy.$message.warning("请选择单位");
+    let arr = [...jczList, ...checkopenList.value]
+    const map = new Map()
+    let newArr = arr.filter(v=> !map.has(v.id) && map.set(v.id,v))
+    emits("choosedModel",newArr );
+  }
+  closed();
+};
+
+/**
+ * pageSize 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getListData();
+};
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageCurrent = currentPage;
+  getListData();
+};
+//数据
+const getListData = async () => {
+  loading.value = true
+  let params = { ...listQuery.value }
+  qcckGet(params, "/mosty-jmxf/tbJcglXfDwgl").then((res) => {
+    tableData.value = res?.records;
+    loading.value = false
+    multipleUser(props.data, tableData.value);
+    total.value = Number(res.total);
+  }).catch(()=>{ loading.value = false });
+};
+const handleFilter = () => {
+  listQuery.value.pageCurrent = 1;
+  getListData();
+};
+
+const multipleUserRef = ref(null);
+const multipleSelectionUser = ref([]);
+
+const handleSelectionChange = (val) => {
+  multipleSelectionUser.value = val;
+  if (checkopenList.value) {
+    for (let i = 0; i < multipleSelectionUser.value.length; i++) {
+      const l = multipleSelectionUser.value[i];
+      for (let j = 0; j < checkopenList.value.length; j++) {
+        const z = checkopenList.value[j];
+        if (l.id == z.id) {
+          checkopenList.value.splice(j, 1);
+        }
+      }
+    }
+  }
+};
+//回显--用于多选表格
+function multipleUser(row, list) {
+  if (row) {
+    if (props.Single) {
+      row.forEach((item) => {
+        list.forEach((select) => {
+          if (typeof item == "object") {
+            if (item.id == select.id) {
+              ridioIndex.value = item.id;
+            }
+          } else {
+            if (item == select.id) {
+              ridioIndex.value = item;
+            }
+          }
+        });
+      });
+    } else {
+      row.forEach((item) => {
+        list.forEach((select) => {
+          if (item.id == select.id) {
+            if (multipleUserRef.value) {
+              multipleUserRef.value.toggleRowSelection(select, true);
+            }
+          }
+        });
+      });
+    }
+  }
+}
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val === true) {
+      ridioIndex.value = "";
+      handleFilter();
+    }
+  }
+);
+watch(() => props.data,(val) => {
+    if (multipleUserRef.value) multipleUser(val, tableData.value);
+    checkopenList.value = JSON.parse(JSON.stringify(val));
+    multipleSelectionUser.value = JSON.parse(JSON.stringify(val));
+  },{immediate:true,deep:true}
+);
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+::v-deep .el-form--inline {
+  padding-left: 0 !important;
+}
+::v-deep .el-radio__label {
+  display: none;
+}
+
+::v-deep .el-table__body tr.current-row > td.el-table__cell {
+  background: #106fdc;
+}
+</style>

src/views/homeMy/components/dialog/dzjg.vue

@@ -0,0 +1,74 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-09-20 10:22:51
+ * @LastEditTime: 2022-09-22 10:51:44
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ *
+-->
+<template>
+  <div class="dialogBox">
+    <div class="title">
+      <span class="mc">党政机关</span>
+      <span @click="close" class="close">
+        <el-icon><Close /></el-icon>
+      </span>
+    </div>
+    <div class="listBox">
+      <div v-for="(item, index) in props.data" :key="index">
+        <div class="infoBox">
+          <div class="content">{{ item.ysmc }}</div>
+          <div class="other">所属部门：{{ item.ssbm }}</div>
+          <div class="address">
+            <img src="@/assets/images/dingwei.png" />
+            <span>{{ item.yswzXz }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineProps } from "vue";
+// 左右折叠状态
+import emitter from "@/utils/eventBus.js";
+const props = defineProps({
+  data: {
+    type: Array,
+    default: []
+  }
+});
+
+//关闭弹窗
+function close() {
+  emitter.emit("showShzy", false);
+  emitter.emit("deletePointArea", "lang");
+}
+</script>
+<style lang="scss" scoped>
+@import "@/assets/css/largeScreen.scss";
+@import "@/assets/css/homeScreen.scss";
+.dialogBox {
+  .listBox {
+    padding: 4px 10px;
+    box-sizing: border-box;
+    .infoBox {
+      padding: 4px 10px;
+      .other {
+        margin: 5 10px;
+        color: #779dcd;
+      }
+    }
+    .address {
+      margin-top: 10px;
+      border-top: 1px solid #34334c;
+      padding-top: 6px;
+      img {
+        margin-right: 10px;
+      }
+    }
+  }
+}
+
+</style>

src/views/homeMy/components/dialog/fkDialog.vue

@@ -0,0 +1,146 @@
+<template>
+  <el-dialog title="反馈信息" width="1000px" v-model="modelValue" append-to-body @close="closed">
+    <el-form ref="formRef" :model="listQuery">
+      <el-form-item label="发现目标责任单位" class="two">
+        <MOSTY.Department style="width: 100%" clearable v-model="listQuery.mbzrdwdm" :placeholder="listQuery.mbzrdw" />
+      </el-form-item>
+      <el-form-item label="发现目标状态" prop="mbzt" class="two">
+        <el-select style="width: 100%" v-model="listQuery.mbzt" placeholder="请选择发现目标状态">
+          <el-option v-for="dict in D_BZ_SF" :key="dict.value" :value="dict.value" :label="dict.label"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="发现目标责任民警" prop="mbzrmjxm" class="two">
+        <el-input v-model="listQuery.mbzrmjxm" placeholder="请输入发现目标责任民警" clearable></el-input>
+      </el-form-item>
+      <el-form-item label="是否本人" prop="sfbr" class="two">
+        <el-select style="width: 100%" v-model="listQuery.sfbr" placeholder="请选择是否本人">
+          <el-option v-for="dict in D_BZ_SF" :key="dict.value" :value="dict.value" :label="dict.label"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="处置时间" prop="czsj" class="two">
+        <el-date-picker style="width: 100%" v-model="listQuery.czsj" placeholder="请选择" unlink-panels type="datetime"
+          format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
+      </el-form-item>
+      <el-form-item label="处置地址" prop="czdz" class="two">
+        <el-input v-model="listQuery.czdz" placeholder="请输入处置地址" clearable></el-input>
+      </el-form-item>
+      <el-form-item label="详细地址" prop="xxdz" class="two">
+        <el-input v-model="listQuery.xxdz" placeholder="请输入详细地址" clearable></el-input>
+      </el-form-item>
+      <el-form-item label="处置责任单位" class="two">
+        <MOSTY.Department style="width: 100%" clearable v-model="listQuery.czzrdwdm" :placeholder="listQuery.czzrdw" />
+      </el-form-item>
+      <el-form-item label="处置责任民警" prop="czzrmj" class="two">
+        <el-input v-model="listQuery.czzrmj" placeholder="请输入发现目标责任民警" clearable></el-input>
+      </el-form-item>
+      <el-form-item label="常控处置措施类型" prop="ckczcslx" class="two">
+        <el-select style="width: 100%" v-model="listQuery.ckczcslx" placeholder="请选择常控处置措施类型">
+          <el-option v-for="dict in D_YJXX_CZCSLX" :key="dict.value" :value="dict.value"
+            :label="dict.label"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="常控处置措施细类" prop="ckczcsxl" class="two">
+        <el-select style="width: 100%" v-model="listQuery.ckczcsxl" placeholder="请选择常控处置措施类型">
+          <el-option v-for="dict in D_YJXX_CZSSXZ" :key="dict.value" :value="dict.value"
+            :label="dict.label"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="常控处置结果" prop="ckczjg" class="two">
+        <el-select style="width: 100%" v-model="listQuery.ckczjg" placeholder="请选择常控处置结果">
+          <el-option v-for="dict in D_YJXX_CKCZJG" :key="dict.value" :value="dict.value"
+            :label="dict.label"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="常控立线侦察评估" prop="cklxzcpg" class="two">
+        <el-input v-model="listQuery.cklxzcpg" placeholder="请输入常控立线侦察评估" clearable></el-input>
+      </el-form-item>
+      <el-form-item label="常控立线侦察依据" prop="cklxzcpgyj" class="two">
+        <el-input v-model="listQuery.cklxzcpgyj" placeholder="请输入常控立线侦察依据" clearable></el-input>
+      </el-form-item>
+      <el-form-item label="常控从事职业类型" prop="ckzylx" class="two">
+        <el-select style="width: 100%" v-model="listQuery.ckzylx" placeholder="请选择常控从事职业类型">
+          <el-option v-for="dict in D_YJXX_CKZYLX" :key="dict.value" :value="dict.value"
+            :label="dict.label"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否尿检" prop="sfnj" class="two">
+        <el-select style="width: 100%" v-model="listQuery.sfnj" placeholder="请选择是否尿检">
+          <el-option v-for="dict in D_BZ_SF" :key="dict.value" :value="dict.value" :label="dict.label"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="常控不尿检理由" prop="ckbnjly" class="two">
+        <el-input v-model="listQuery.ckbnjly" placeholder="请输入常控不尿检理由" clearable></el-input>
+      </el-form-item>
+      <el-form-item label="常控处置反馈补充信息" prop="ckczbcxx" class="two">
+        <el-input v-model="listQuery.ckczbcxx" placeholder="请输入常控处置反馈补充信息" clearable></el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closed">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import * as MOSTY from "@/components/MyComponents/index";
+import emitter from "@/utils/eventBus.js";
+import { ref, onMounted, onUnmounted, reactive, getCurrentInstance } from "vue";
+//获取字典数据
+const { proxy } = getCurrentInstance();
+const {
+  D_YJXX_CZCSLX,
+  D_YJXX_CZSSXZ,
+  D_YJXX_CKCZJG,
+  D_YJXX_CKZYLX,
+  D_BZ_SF,
+} = proxy.$dict(
+  "D_YJXX_CZCSLX",
+  "D_YJXX_CZSSXZ",
+  "D_YJXX_CKCZJG",
+  "D_YJXX_CKZYLX",
+  "D_BZ_SF",
+);
+const list = reactive({
+  tableData: []
+});
+const listQuery = ref({
+  ssbmdm: "",
+});
+const loading = ref(false);
+const title = ref("");
+const clxx = ref('')
+const modelValue = ref(false);
+onMounted(() => {
+  emitter.on("fkDialogShow", (res) => {
+    modelValue.value = true;
+    listQuery.value = res;
+  });
+});
+
+function closed() {
+  modelValue.value = false;
+  console.log(modelValue.value, "modelValue");
+}
+onUnmounted(() => {
+  emitter.off("fkDialogShow");
+});
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+
+.el-form {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.two {
+  width: 46%;
+  padding-bottom: 20px;
+  margin: 0 1%;
+}
+</style>

src/views/homeMy/components/dialog/gazyInfo.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="dialogBox">
+    <div class="title">
+      <span class="mc">公安资源</span>
+      <span @click="close" class="close"><el-icon><Close /></el-icon></span>
+    </div>
+    <div v-if="info" class="containner">
+      <div class="info-contant" v-for="(ele, index1) in info.data" :key="index1">
+        <div class="infoBox">
+          <div>{{ ele.gajgmc }}</div>
+          <div class="other" v-if="ele.identification == 'kfd'" >快反点名称：<span>{{ ele.kfdMc }}</span> </div>
+          <div class="other" v-if="ele.identification == 'kfd'" >快反点地址：<span>{{ ele.kfdDz }}</span></div>
+          <div class="other">所属部门：<span>{{ ele.ssbm }}</span></div>
+        </div>
+        <div class="groupList" v-loading="loading" v-if=" ele.identification == 'jwz' || ele.identification == 'pcs' || ele.identification == 'xfq'">
+          <div class="other"><p>巡防巡组列表</p></div>
+          <ul v-if="ele.list && (ele.list instanceof Array)">
+            <li class="chidrensItem" v-for="(item, index) in ele.list" :key="index">
+              <div class="top">
+                <div class="top-cnt">
+                  <span class="dian online" title="巡逻中"></span>
+                  <span class="name">{{ item.jzMc }}</span><br />
+                  <span class="other">民警：{{ item.mjsl }}人，辅警{{ item.fjsl }}人，</span><br />
+                  <span class="other">联系电话：{{ item.fzrLxdh }}</span><br />
+                  <span>巡逻时长：{{ item.xfsc ? item.xfsc : 0 }} h，巡逻里程：{{ item.xflc ? item.xflc : 0 }}km</span>
+                  <img src="@/assets/images/shipin.png" style="margin:0 4px;" />
+                  <img src="@/assets/images/tel.png" />
+                </div>
+              </div>
+              <div class="address">
+                <img src="@/assets/images/dingwei.png" />
+                <span>{{ item.dqwz }}</span>
+              </div>
+            </li>
+          </ul>
+          <el-empty description="没有数据" :image-size="0.1" v-if="!loading && ele && ele.list.length <= 0"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, reactive, watch } from "vue";
+import { getSelectDeckList, pcsHasXz } from "@/api/dpApi/home.js";
+import emitter from "@/utils/eventBus.js"; // 左右折叠状态
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {}
+  }
+});
+const data = ref();
+const info = reactive({ data: [] }); //警情数据
+const loading = ref(false);
+watch(
+  () => props.data,
+  (val) => {
+    if(val.length>0){
+      info.data = val;
+      if (val[0].identification == "jwz") {
+        val.forEach((item) => { item.list = [] ; getList(item);  });
+      }
+      if (val[0].identification == "pcs") {
+        val.forEach((item) => { item.list = []; getPcsList(item); });
+      }
+      if (val[0].identification == "kfd") handleKFD(val)
+    }
+  },
+);
+// 警务站
+function getList(item) {
+  let data = { xfzt: 0, jd: item.jd,  wd: item.wd, pageSize: 10086, pageCurrent: 1, radius: 300};
+  getSelectDeckList(data).then((res) => {
+    loading.value = false;
+    item.list = res.records ? res.records : [];
+  }).catch(() => {
+    loading.value = false;
+  });
+}
+// 派出所
+function getPcsList(item) {
+  let data = { ysid: item.id};
+  pcsHasXz(data).then((res) => {
+    loading.value = false;
+    item.list = res.records ? res.records : [];
+  }).catch(() => {
+    loading.value = false;
+  });
+}
+
+function handleKFD(val) {
+  emitter.emit("deletePointArea", "kfdArea");
+  val.forEach(item=>{
+    item.yfzfw = item.yfzfw || []
+    item.sfzfw = item.sfzfw || []
+    item.wfzfw = item.wfzfw || []
+    //一分钟范围
+    if (item.yfzfw.length > 0) {
+      let obj = { position:[item.yfzfw], text:'', id: '11'}
+      emitter.emit("echoPlane", { type:'polygon', coords: [obj], flag: "kfdArea", color: "rgba(255,0,0,0.6)", linecolor:'#ff0000'});
+    }
+    //三分钟范围
+    if (item.sfzfw.length > 0) {
+      let obj1 = { position:[item.sfzfw], text:'', id: '211'}
+      emitter.emit("echoPlane", { type:'polygon', coords: [obj1], flag: "kfdArea", color: "rgba(253,174,46,0.5)",linecolor:'#fdae2e'});
+    }
+    //五分钟范围
+    if (item.wfzfw.length > 0) {
+      let obj2 = { position:[item.wfzfw], text:'', id: '131'}
+      emitter.emit("echoPlane", { type:'polygon', coords: [obj2], flag: "kfdArea", color: "rgba(0,102,255,0.4)", linecolor:'#0066ff'});
+    }
+  })
+}
+//关闭弹窗
+function close() {
+  emitter.emit("deletePointArea", "kfdArea");
+  emitter.emit("showGazy", false);
+}
+</script>
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+.containner {
+  max-height: 700px;
+  overflow: hidden;
+  overflow-y: auto;
+  .info-contant {
+    padding: 0px 14px;
+    box-sizing: border-box;
+    .infoBox {
+      position: relative;
+      margin-bottom: 4px;
+      border-bottom: 1px solid #1891b5;
+      .other {
+        color: #779dcd;
+        list-style: none;
+        span{
+          color:#fff;
+        }
+        p {
+          margin: 0 2px;
+        }
+      }
+    }
+    .address {
+      padding: 4px 0;
+      box-sizing: border-box;
+      border-top: 1px solid #193074;
+      border-bottom: 1px solid #193074;
+      margin: 4px 0;
+      img {
+        margin-right: 4px;
+      }
+    }
+  }
+ .chidrensItem {
+    .top {
+      border: 1px solid #197995;
+      boder-radius: 4px;
+      border-radius: 4px;
+      padding: 4px;
+      box-sizing: border-box;
+
+    }
+  }
+  .info-contant:last-child(1) {
+    .address {
+      margin-bottom: 0;
+      border-bottom: none;
+    }
+  }
+}
+</style>

src/views/homeMy/components/dialog/grouListBa.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="bigBox" v-if="modelValue">
+    <div class="container">
+      <div class="header">
+        <span class="title">{{ title }}</span>
+        <span class="close" @click="closeDialog">
+          <el-icon :size="22"><CircleClose /></el-icon>
+        </span>
+      </div>
+      <div class="search">
+        <el-form ref="formRef" :model="listQuery">
+          <el-form-item label="任务标题">
+            <el-input v-model="listQuery.rwbt" placeholder="请输入任务标题"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button class="serchBtn" @click="handleFilter"> 查询 </el-button>
+            <el-button @click="reset()"> 重置 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="datalist">
+        <el-table
+          ref="multipleUserRef"
+          :data="list.tableData"
+          border
+          width="100%"
+          height="100%"
+        >
+          <el-table-column
+            label="序号"
+            type="index"
+            align="center"
+            width="80"
+          />
+          <el-table-column
+            prop="xm"
+            show-overflow-tooltip
+            align="center"
+            label="姓名"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="zjhm"
+            show-overflow-tooltip
+            align="center"
+            label="证件号码"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="wpdw"
+            label="	外派单位"
+            show-overflow-tooltip
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            prop="csmc"
+            label="场所名称"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            prop="zsrq"
+            label="任务执行日期"
+            align="center"
+          ></el-table-column>
+        </el-table>
+      </div>
+      <div class="fenye">
+        <el-pagination
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listQuery.pageCurrent"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="listQuery.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import emitter from "@/utils/eventBus.js";
+import { http } from "@/api/service";
+import { ref, onMounted, reactive, onUnmounted } from "vue";
+const timeRange = ref([])
+const modelValue = ref(false);
+const list = reactive({
+  tableData: []
+});
+const title = ref("");
+const total = ref(0);
+const listQuery = ref({
+  pageCurrent: 1,
+  pageSize: 20,
+  ssbmdm: ""
+});
+onMounted(() => {
+  emitter.on("showBaWindow", (res) => {
+    title.value = '街面力量-保安'
+    modelValue.value = true;
+    getList();
+  });
+});
+
+onUnmounted(() => {
+  emitter.off("showBaWindow");
+});
+
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageCurrent = currentPage;
+  getList();
+};
+/**
+ * pageSize 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getList();
+};
+
+function closeDialog() {
+  modelValue.value = false;
+  listQuery.value.ssbmdm = "";
+  listQuery.value.pageCurrent = 1;
+  listQuery.value.pageSize = 10;
+  list.tableData = [];
+}
+// 搜索
+function handleFilter() {
+  listQuery.value.pageCurrent = 1;
+  getList();
+}
+//重置
+function reset() {
+  listQuery.value.ssbmdm = "";
+  listQuery.value.pageCurrent = 1;
+  timeRange.value = []
+  getList();
+}
+
+function getList() {
+  let pramas = {...listQuery.value };
+  http.getjBa(pramas).then((res) => {
+    list.tableData = res.records;
+    total.value = res.total
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+.bigBox {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 99;
+  .container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    width: 80%;
+    height: 80vh;
+    background: #052342;
+    padding: 0 20px;
+
+    .header {
+      width: 100%;
+      height: 60px;
+      line-height: 60px;
+
+      .title {
+        float: left;
+        font-size: 16px;
+      }
+
+      .close {
+        float: right;
+        font-size: 16px;
+        cursor: pointer;
+      }
+    }
+
+    .datalist {
+      height: 60vh;
+    }
+
+    .fenye {
+      height: 60px;
+    }
+  }
+}
+
+.el-form {
+  display: flex;
+}
+
+.serchBtn {
+  margin-left: 20px;
+}
+
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+::v-deep .el-form-item{
+  align-items: center;
+}
+::v-deep .el-input__inner{
+  margin: 0 !important;
+}
+::v-deep .el-table{
+  background: transparent;
+}
+::v-deep .el-table__inner-wrapper{
+  background: transparent;
+}
+::v-deep .el-table tr{
+  background: transparent;
+}
+
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: #9696964a; /* 修改背景颜色 */
+}
+
+::v-deep .el-table td.el-table__cell {
+  background: transparent;
+  color: #fff !important;
+}
+
+::v-deep .el-table th.el-table__cell{
+  background: #0d3482;
+  color: #fff;
+}
+
+::v-deep .el-table--border::after, .el-table--border::before,.el-table__border-left-patch{
+  background-color: #12367d;
+}
+
+::v-deep .el-table{
+  background-color: transparent;
+  --el-table-border-color: #12367d;
+  // --el-table-row-hover-bg-color: #f5f7fa;
+}
+::v-deep .el-form-item--default .el-form-item__label{
+  color: #fff;
+}
+
+</style>

src/views/homeMy/components/dialog/grouListClqk.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="bigBox" v-if="modelValue">
+    <div class="container">
+      <div class="header">
+        <span class="title">{{ title }}</span>
+        <span class="close" @click="closeDialog">
+          <el-icon :size="22"><CircleClose/></el-icon>
+        </span>
+      </div>
+      <div class="search">
+        <el-form ref="formRef" :model="listQuery">
+          <el-form-item label="所属部门">
+            <MOSTY.Department width="200px" clearable v-model="listQuery.ssbmdm" />
+          </el-form-item>
+          <el-form-item>
+            <el-button class="serchBtn" @click="getList"> 查询 </el-button>
+            <el-button @click="reset()"> 重置 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div class="datalist">
+        <el-table v-loading="loading" ref="multipleUserRef" :data="list.tableData" border width="100%" height="100%">
+          <el-table-column label="序号" type="index" align="center" width="80"/>
+          <el-table-column label="所属部门" show-overflow-tooltip align="center" prop="ssbm"></el-table-column>
+          <el-table-column label="设备名称" show-overflow-tooltip align="center" prop="sbmc"></el-table-column>
+          <el-table-column label="地址详址" show-overflow-tooltip align="center" prop="dzxz"></el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { qcckPost , qcckGet} from "@/api/qcckApi.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import emitter from "@/utils/eventBus.js";
+import { ref, onMounted, onUnmounted, reactive} from "vue";
+const list = reactive({
+  tableData: []
+});
+const listQuery = ref({
+  ssbmdm: "",
+});
+const loading = ref(false);
+const title = ref("");
+const clxx = ref('')
+onMounted(() => {
+  emitter.on("showClqkWindow", (res) => {
+    title.value = res == "xxcl" ? "车辆情况-小型车辆" : "车辆情况-摩托车";
+    clxx.value = res == "xxcl" ? '02' : '04'
+    getList();
+    modelValue.value = true;
+  });
+});
+//重置
+function reset() {
+  listQuery.value.ssbmdm = ''
+  getList();
+}
+onUnmounted(() => {
+  emitter.off("showZlzxWindow");
+});
+const modelValue = ref(false);
+function closeDialog() {
+  modelValue.value = false;
+  list.tableData = [];
+}
+
+// 车辆情况
+function getList() {
+  loading.value = true;
+  qcckGet({},'/mosty-jmxf/gxga/sbsswz/list?cllx='+clxx.value+'&ssbmdm='+listQuery.value.ssbmdm).then((res) => {
+    list.tableData = res || [];
+    loading.value = false;
+  }).catch(()=>{
+    loading.value = false
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+.bigBox {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 99;
+  .container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    width: 80%;
+    height: 80vh;
+    background: #052342;
+    padding: 0 20px;
+    .header {
+      width: 100%;
+      height: 60px;
+      line-height: 60px;
+      .title {
+        float: left;
+        font-size: 16px;
+      }
+      .close {
+        float: right;
+        font-size: 16px;
+        cursor: pointer;
+      }
+    }
+    .datalist {
+      height: 68vh;
+    }
+
+  }
+}
+.el-form {
+  display: flex;
+}
+.serchBtn {
+  margin-left: 20px;
+}
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+::v-deep .el-form-item{
+  align-items: center;
+}
+::v-deep .el-input__inner{
+  margin: 0 !important;
+}
+::v-deep .el-form-item{
+  align-items: center;
+}
+::v-deep .el-input__inner{
+  margin: 0 !important;
+}
+::v-deep .el-table{
+  background: transparent;
+}
+::v-deep .el-table__inner-wrapper{
+  background: transparent;
+}
+::v-deep .el-table tr{
+  background: transparent;
+}
+
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: #9696964a; /* 修改背景颜色 */
+}
+
+::v-deep .el-table td.el-table__cell {
+  background: transparent;
+  color: #fff !important;
+}
+
+::v-deep .el-table th.el-table__cell{
+  background: #0d3482;
+  color: #fff;
+}
+
+::v-deep .el-table--border::after, .el-table--border::before,.el-table__border-left-patch{
+  background-color: #12367d;
+}
+
+::v-deep .el-table{
+  background-color: transparent;
+  --el-table-border-color: #12367d;
+  // --el-table-row-hover-bg-color: #f5f7fa;
+}
+::v-deep .el-form-item--default .el-form-item__label{
+  color: #fff;
+}
+</style>

src/views/homeMy/components/dialog/grouListJl.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="bigBox" v-if="modelValue">
+    <div class="container">
+      <div class="header">
+        <span class="title">{{ title }}</span>
+        <span class="close" @click="closeDialog">
+          <el-icon :size="22"><CircleClose /></el-icon>
+        </span>
+      </div>
+      <div class="search">
+        <el-form ref="formRef" :model="listQuery">
+          <el-form-item label="所属部门">
+            <MOSTY.Department width="200px" clearable v-model="listQuery.ssbmdm" />
+          </el-form-item>
+          &nbsp;<el-form-item label=" 姓名">
+            <el-input v-model="listQuery.jlxm" placeholder="请输入姓名"/>
+          </el-form-item>
+          &nbsp;<el-form-item label=" 警号">
+            <el-input v-model="listQuery.jh" placeholder="请输入警号"/>
+          </el-form-item>
+          <el-form-item>
+            <el-button class="serchBtn" @click="handleFilter"> 查询 </el-button>
+            <el-button @click="reset()"> 重置 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="datalist">
+        <el-table ref="multipleUserRef" :data="list.tableData" border width="100%" height="100%">
+          <el-table-column label="序号"  type="index" align="center" width="80"/>
+          <el-table-column prop="jlxm" show-overflow-tooltip align="center" label="姓名" />
+          <el-table-column prop="xbdm" align="center" label="性别">
+            <template #default="{ row }">
+              <dict-tag :options="D_BZ_XB" :value="row.xbdm" :tag="false" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="sfzh" show-overflow-tooltip align="center" label="身份证号码" />
+          <el-table-column prop="ssbm" label="所属部门" align="center" />
+          <el-table-column prop="jh" label="警号" align="center" />
+        </el-table>
+      </div>
+      <div class="fenye">
+        <el-pagination
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listQuery.pageCurrent"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="listQuery.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        ></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import * as MOSTY from "@/components/MyComponents/index";
+import emitter from "@/utils/eventBus.js";
+import { getItem } from "@/utils/storage";
+import { timeValidate } from "@/utils/time.js";
+import { http } from "@/api/service";
+import { ref, onMounted, onUnmounted, getCurrentInstance, reactive } from "vue";
+
+const { proxy } = getCurrentInstance();
+const { D_BZ_XB } = proxy.$dict("D_BZ_XB");
+const list = reactive({
+  tableData: []
+});
+const title = ref("");
+const modelValue = ref(false);
+const total = ref(0);
+const listQueryDefault = ref({})
+const listQuery = ref({
+  pageCurrent: 1,
+  pageSize: 20,
+  ssbmdm: "",
+  jlxm: "",
+  jh: ""
+});
+
+onMounted(() => {
+  listQueryDefault.value = JSON.parse(JSON.stringify(listQuery.value))
+  emitter.on("showJLWindow", (res) => {
+    title.value = res == "mj" ? "在岗警力-民警":"在岗警力-辅警"
+    getList_Mj();
+    modelValue.value = true;
+  });
+});
+onUnmounted(() => {
+  emitter.off("showJLWindow");
+});
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageCurrent = currentPage;
+  getList_Mj();
+};
+// pageSize 改变触发
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getList_Mj();
+};
+// 关闭弹窗
+function closeDialog() {
+  modelValue.value = false;
+  listQuery.value = JSON.parse(JSON.stringify(listQueryDefault.value))
+  list.tableData = [];
+}
+// 搜索
+function handleFilter() {
+  listQuery.value.pageCurrent = 1;
+  getList_Mj();
+}
+//重置
+function reset() {
+  listQuery.value = JSON.parse(JSON.stringify(listQueryDefault.value))
+  handleFilter();
+}
+// 警力情况 - 民警 - 全部
+function getList_Mj() {
+  let pramas = {
+    pageCurrent: listQuery.value.pageCurrent,
+    pageSize: listQuery.value.pageSize,
+    ssbmdm: listQuery.value.ssbmdm,
+    jlxm: listQuery.value.jlxm,
+    jh: listQuery.value.jh,
+    bbrq: timeValidate(new Date(), 'ymd')
+  };
+
+  if (title.value == "在岗警力-民警") {
+    pramas.jllx = "01";
+    http.getJlmj(pramas).then((res) => {
+      list.tableData = res.records;
+      total.value = res.total;
+      listQuery.value.pageCurrent = res.current;
+    });
+  } else {
+    pramas.jllx = "02";
+    http.getJlfj(pramas).then((res) => {
+      list.tableData = res.records;
+      total.value = res.total;
+      listQuery.value.pageCurrent = res.current;
+    });
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bigBox {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 99;
+  .container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    width: 80%;
+    height: 80vh;
+    background: #052342;
+    padding: 0 20px;
+    .header {
+      width: 100%;
+      height: 60px;
+      line-height: 60px;
+      .title {
+        float: left;
+        font-size: 16px;
+      }
+      .close {
+        float: right;
+        font-size: 16px;
+        cursor: pointer;
+      }
+    }
+    .datalist {
+      height: 60vh;
+    }
+    .fenye {
+      height: 60px;
+    }
+  }
+}
+.el-form {
+  display: flex;
+}
+.serchBtn {
+  margin-left: 20px;
+}
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+::v-deep .el-form-item{
+  align-items: center;
+}
+::v-deep .el-input__inner{
+  margin: 0 !important;
+}
+::v-deep .el-table{
+  background: transparent;
+}
+::v-deep .el-table__inner-wrapper{
+  background: transparent;
+}
+::v-deep .el-table tr{
+  background: transparent;
+}
+
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: #9696964a; /* 修改背景颜色 */
+}
+
+::v-deep .el-table td.el-table__cell {
+  background: transparent;
+  color: #fff !important;
+}
+
+::v-deep .el-table th.el-table__cell{
+  background: #0d3482;
+  color: #fff;
+}
+
+::v-deep .el-table--border::after, .el-table--border::before,.el-table__border-left-patch{
+  background-color: #12367d;
+}
+
+::v-deep .el-table{
+  background-color: transparent;
+  --el-table-border-color: #12367d;
+  // --el-table-row-hover-bg-color: #f5f7fa;
+}
+::v-deep .el-form-item--default .el-form-item__label{
+  color: #fff;
+}
+</style>

src/views/homeMy/components/dialog/grouListJmll.vue

@@ -0,0 +1,295 @@
+<template>
+  <div class="bigBox" v-if="modelValue">
+    <div class="container">
+      <div class="header">
+        <span class="title">{{ title }}</span>
+        <span class="close" @click="closeDialog">
+          <el-icon :size="22"><CircleClose /></el-icon>
+        </span>
+      </div>
+      <div class="search">
+        <el-form ref="formRef" :model="listQuery">
+          <el-form-item label="所属部门">
+            <MOSTY.Department
+              width="200px"
+              clearable
+              v-model="listQuery.ssbmdm"
+            />
+          </el-form-item>
+          &nbsp;&nbsp;
+           <!-- <el-form-item label=" 时间段">
+            <el-date-picker
+              v-model="timeRange"
+              popper-class="jl-time"
+              type="datetimerange"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              range-separator="至"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择开始时间"
+            ></el-date-picker>
+          </el-form-item> -->
+          <el-form-item>
+            <el-button class="serchBtn" @click="handleFilter"> 查询 </el-button>
+            <el-button @click="reset()"> 重置 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="datalist">
+        <el-table
+          ref="multipleUserRef"
+          :data="list.tableData"
+          border
+          width="100%"
+          height="100%"
+        >
+          <el-table-column
+            label="序号"
+            type="index"
+            align="center"
+            width="80"
+          />
+          <el-table-column
+            prop="xm"
+            show-overflow-tooltip
+            align="center"
+            label="姓名"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="xbdm"
+            show-overflow-tooltip
+            align="center"
+            label="性别"
+          >
+            <template #default="{ row }">
+              {{ row.sfzh.charAt(16) % 2 ? "男" : "女" }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="sfzh"
+            show-overflow-tooltip
+            align="center"
+            label="身份证号码"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="ssbm"
+            label="所属部门"
+            show-overflow-tooltip
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            prop="lxdh"
+            label="联系电话"
+            align="center"
+          ></el-table-column>
+        </el-table>
+      </div>
+      <div class="fenye">
+        <el-pagination
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listQuery.pageCurrent"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="listQuery.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import * as MOSTY from "@/components/MyComponents/index";
+import emitter from "@/utils/eventBus.js";
+import { getItem } from "@/utils/storage";
+import { timeValidate } from "@/utils/time.js";
+import { http } from "@/api/service";
+import { ref, onMounted, reactive, onUnmounted } from "vue";
+const timeRange = ref([])
+const modelValue = ref(false);
+const list = reactive({
+  tableData: []
+});
+const title = ref("");
+const total = ref(0);
+const listQuery = ref({
+  pageCurrent: 1,
+  pageSize: 20,
+  ssbmdm: ""
+});
+onMounted(() => {
+  emitter.on("showJMLLWindow", (res) => {
+    title.value = res == "mj" ? "街面力量-民警" : "街面力量-辅警"
+    modelValue.value = true;
+    getList();
+  });
+});
+
+onUnmounted(() => {
+  emitter.off("showJMLLWindow");
+});
+
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageCurrent = currentPage;
+  getList();
+};
+/**
+ * pageSize 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getList();
+};
+
+function closeDialog() {
+  modelValue.value = false;
+  listQuery.value.ssbmdm = "";
+  listQuery.value.pageCurrent = 1;
+  listQuery.value.pageSize = 10;
+  list.tableData = [];
+  timeRange.value = []
+}
+// 搜索
+function handleFilter() {
+  listQuery.value.pageCurrent = 1;
+  getList();
+}
+//重置
+function reset() {
+  listQuery.value.ssbmdm = "";
+  listQuery.value.pageCurrent = 1;
+  timeRange.value = []
+  getList();
+}
+
+function getList() {
+  let pramas = {
+    pageNum: listQuery.value.pageCurrent,
+    pageSize: listQuery.value.pageSize,
+    xfbmdm: listQuery.value.ssbmdm
+  };
+  if(timeRange.value.length > 0){
+    pramas.startTime = timeRange.value[0]
+    pramas.endTime = timeRange.value[1]
+  }
+  pramas.fl = title.value == "街面力量-民警" ? '01' : '02'
+  http.getjMJLmj(pramas).then((res) => {
+    list.tableData = res.records;
+    total.value = res.total
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+.bigBox {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 99;
+  .container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    width: 80%;
+    height: 80vh;
+    background: #052342;
+    padding: 0 20px;
+
+    .header {
+      width: 100%;
+      height: 60px;
+      line-height: 60px;
+
+      .title {
+        float: left;
+        font-size: 16px;
+      }
+
+      .close {
+        float: right;
+        font-size: 16px;
+        cursor: pointer;
+      }
+    }
+
+    .datalist {
+      height: 60vh;
+    }
+
+    .fenye {
+      height: 60px;
+    }
+  }
+}
+
+.el-form {
+  display: flex;
+}
+
+.serchBtn {
+  margin-left: 20px;
+}
+
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+::v-deep .el-form-item{
+  align-items: center;
+}
+::v-deep .el-input__inner{
+  margin: 0 !important;
+}
+::v-deep .el-form-item{
+  align-items: center;
+}
+::v-deep .el-input__inner{
+  margin: 0 !important;
+}
+::v-deep .el-table{
+  background: transparent;
+}
+::v-deep .el-table__inner-wrapper{
+  background: transparent;
+}
+::v-deep .el-table tr{
+  background: transparent;
+}
+
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: #9696964a; /* 修改背景颜色 */
+}
+
+::v-deep .el-table td.el-table__cell {
+  background: transparent;
+  color: #fff !important;
+}
+
+::v-deep .el-table th.el-table__cell{
+  background: #0d3482;
+  color: #fff;
+}
+
+::v-deep .el-table--border::after, .el-table--border::before,.el-table__border-left-patch{
+  background-color: #12367d;
+}
+
+::v-deep .el-table{
+  background-color: transparent;
+  --el-table-border-color: #12367d;
+  // --el-table-row-hover-bg-color: #f5f7fa;
+}
+::v-deep .el-form-item--default .el-form-item__label{
+  color: #fff;
+}
+</style>

src/views/homeMy/components/dialog/grouListJmxz.vue

@@ -0,0 +1,309 @@
+<template>
+  <div class="bigBox" v-if="modelValue">
+    <div class="container" :class="title == '街面巡组-实际列表' ? 'container1' : ''">
+      <div class="header">
+        <span class="title">{{ title }}</span>
+        <span class="close" @click="closeDialog">
+          <el-icon :size="22">
+            <CircleClose />
+          </el-icon>
+        </span>
+      </div>
+      <div class="search">
+        <el-form ref="formRef" :model="listQuery">
+          <el-form-item label="所属部门">
+            <MOSTY.Department width="200px" clearable v-model="listQuery.ssbmdm" />
+          </el-form-item> &nbsp;&nbsp;
+          <el-form-item label=" 负责人">
+            <el-input v-model="listQuery.fzrXm" placeholder="请输入负责人" />
+          </el-form-item> &nbsp;&nbsp;
+          <!-- <el-form-item label=" 时间段">
+            <el-date-picker
+              v-model="timeRange"
+              popper-class="jl-time"
+              type="datetimerange"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              range-separator="至"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择开始时间"
+            ></el-date-picker>
+          </el-form-item> -->
+          <el-form-item>
+            <el-button class="serchBtn" @click="handleFilter"> 查询 </el-button>
+            <el-button @click="reset()"> 重置 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="datalist">
+        <el-table ref="multipleUserRef" :data="list.tableData" border width="100%" height="100%">
+          <el-table-column label="序号" type="index" align="center" width="80" />
+          <el-table-column label="部门名称" show-overflow-tooltip align="center" prop="ssbm" />
+          <el-table-column label="任务名称" align="center" prop="rwbt" />
+          <el-table-column label="巡逻路线" align="center">
+            <template #default="{ row }">
+         {{ row.bxx.bxxMc }}
+            </template>
+          </el-table-column>
+          <el-table-column label="任务时间" align="center" prop="kssj" width="146">
+            <template #default="{ row }">
+              <div >{{ row.rwkssj + "至" + row.rwjssj }}</div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="负责人" align="center" prop="fzrxm" />
+          <el-table-column label="任务民警" align="center" prop="mjxm"/>
+          <el-table-column label="任务辅警" align="center" prop="fjxm"/>
+          <el-table-column label="任务保安" align="center" prop="baxm"/>
+          <el-table-column label="网格员" align="center" prop="wgyxm"/>
+        </el-table>
+      </div>
+      <div class="fenye">
+        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :current-page="listQuery.pageCurrent" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
+          layout="total, sizes, prev, pager, next, jumper" :total="total">
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import * as MOSTY from "@/components/MyComponents/index";
+import emitter from "@/utils/eventBus.js";
+import { getItem } from "@/utils/storage";
+import { timeValidate } from "@/utils/time.js";
+import { http } from "@/api/service";
+import { ref, onMounted, getCurrentInstance, reactive, onUnmounted } from "vue";
+const { proxy } = getCurrentInstance();
+const { D_BZ_BBFS } = proxy.$dict("D_BZ_BBFS");
+const timeRange = ref([])
+const list = reactive({
+  tableData: []
+});
+const title = ref("");
+
+onMounted(() => {
+  emitter.on("showJMXZWindow", (res) => {
+    title.value = res == "jh" ? "街面巡组-计划列表" : "街面巡组-实际列表"
+    getList();
+    modelValue.value = true;
+  });
+});
+function checkJson(e) {
+  let data = [];
+  if (e) {
+    data = JSON.parse(e).map((item) => item.jdchphm);
+  }
+  return data;
+}
+onUnmounted(() => {
+  emitter.off("showJMXZWindow");
+});
+const modelValue = ref(false);
+const total = ref(0);
+const listQuery = ref({
+  pageCurrent: 1,
+  pageSize: 20,
+  ssbmdm: "",
+  fzrXm: ""
+});
+
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageCurrent = currentPage;
+  getList();
+};
+/**
+ * pageSize 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getList();
+};
+
+function closeDialog() {
+  modelValue.value = false;
+  listQuery.value.ssbmdm = "";
+  listQuery.value.fzrXm = "";
+  listQuery.value.pageCurrent = 1;
+  listQuery.value.pageSize = 20;
+  timeRange.value = []
+  list.tableData = [];
+}
+// 搜索
+function handleFilter() {
+  listQuery.value.pageCurrent = 1;
+  getList();
+}
+//重置
+function reset() {
+  listQuery.value.ssbmdm = "";
+  listQuery.value.fzrXm = "";
+  listQuery.value.pageCurrent = 1;
+  listQuery.value.pageSize = 20;
+  timeRange.value = []
+  getList();
+}
+
+function getList() {
+  let pramas = {
+    pageNum: listQuery.value.pageCurrent,
+    pageSize: listQuery.value.pageSize,
+    fzrXm: listQuery.value.fzrXm,
+    ssbmdm: listQuery.value.ssbmdm,
+    type: title.value == "街面巡组-计划列表" ? '0' : '1'
+  };
+  if (timeRange.value.length > 0) {
+    pramas.startTime = timeRange.value[0]
+    pramas.endTime = timeRange.value[1]
+  }
+  http.getJMXZ(pramas).then((res) => {
+    if (res.records) list.tableData = res.records;
+    total.value = res.total;
+  });
+  // if (title.value == "街面巡组-计划列表") {
+  //   pramas.xzlx = "01";
+  //   http.getJMXZ(pramas).then((res) => {
+  //     if (res.records) list.tableData = res.records;
+  //     total.value = res.total;
+  //   });
+  // } else {
+  //   pramas.xzlx = "02";
+  //   http.selectSjjmxzList(pramas).then((res) => {
+  //     if (res.records) {
+  //       res.records.forEach((item) => {
+  //         if (item.xfsc != 0) item.xfsc = (item.xfsc / 3600).toFixed(2) + "/h";
+  //         if (item.xflc != 0) item.xflc = (item.xflc / 1000).toFixed(2) + "/KM";
+  //       });
+  //       list.tableData = res.records;
+  //     }
+  //     total.value = res.total;
+  //   });
+  // }
+}
+</script>
+
+<style lang="scss" scoped>
+.bigBox {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 99;
+
+  .container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    width: 80%;
+    height: 80vh;
+    background: #052342;
+    padding: 0 20px;
+
+    .header {
+      width: 100%;
+      height: 60px;
+      line-height: 60px;
+
+      .title {
+        float: left;
+        font-size: 16px;
+      }
+
+      .close {
+        float: right;
+        font-size: 16px;
+        cursor: pointer;
+      }
+    }
+
+    .datalist {
+      height: 60vh;
+    }
+
+    .fenye {
+      height: 60px;
+    }
+  }
+
+  .container1 {
+    width: 82%;
+  }
+}
+
+.el-form {
+  display: flex;
+}
+
+.serchBtn {
+  margin-left: 20px;
+}
+
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+
+::v-deep .el-form-item {
+  align-items: center;
+}
+
+::v-deep .el-input__inner {
+  margin: 0 !important;
+}
+
+::v-deep .el-form-item {
+  align-items: center;
+}
+
+::v-deep .el-input__inner {
+  margin: 0 !important;
+}
+
+::v-deep .el-table {
+  background: transparent;
+}
+
+::v-deep .el-table__inner-wrapper {
+  background: transparent;
+}
+
+::v-deep .el-table tr {
+  background: transparent;
+}
+
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
+  background-color: #9696964a;
+  /* 修改背景颜色 */
+}
+
+::v-deep .el-table td.el-table__cell {
+  background: transparent;
+  color: #fff !important;
+}
+
+::v-deep .el-table th.el-table__cell {
+  background: #0d3482;
+  color: #fff;
+}
+
+::v-deep .el-table--border::after,
+.el-table--border::before,
+.el-table__border-left-patch {
+  background-color: #12367d;
+}
+
+::v-deep .el-table {
+  background-color: transparent;
+  --el-table-border-color: #12367d;
+  // --el-table-row-hover-bg-color: #f5f7fa;
+}
+
+::v-deep .el-form-item--default .el-form-item__label {
+  color: #fff;
+}
+</style>

src/views/homeMy/components/dialog/grouListPcgz.vue

@@ -0,0 +1,320 @@
+<template>
+  <div class="bigBox" v-if="modelValue">
+    <div class="container">
+      <div class="header">
+        <span class="title">{{ title }}</span>
+        <span class="close" @click="closeDialog">
+          <el-icon :size="22"><CircleClose /></el-icon>
+        </span>
+      </div>
+      <div class="search">
+        <el-form ref="formRef" :model="listQuery">
+          <el-form-item label="所属部门">
+            <MOSTY.Department width="200px" clearable v-model="listQuery.ssbmdm" />
+          </el-form-item> &nbsp;&nbsp;
+          <!-- <el-form-item label=" 时间段">
+            <el-date-picker
+              v-model="timeRange"
+              popper-class="jl-time"
+              type="datetimerange"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              range-separator="至"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择开始时间"
+            ></el-date-picker>
+          </el-form-item> -->
+          <el-form-item>
+            <el-button class="serchBtn" @click="handleFilter"> 查询 </el-button>
+            <el-button @click="reset()"> 重置 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="datalist">
+        <!-- 盘人 -->
+        <el-table
+          ref="multipleUserRef"
+          :data="list.tableData"
+          border
+          width="100%"
+          height="100%"
+          v-if="title == '盘查工作-盘人'"
+        >
+          <el-table-column
+            label="序号"
+            type="index"
+            align="center"
+            width="80"
+          />
+          <el-table-column
+            prop="xm"
+            show-overflow-tooltip
+            align="center"
+            label="姓名"
+          />
+          <el-table-column prop="xbdm" align="center" label="性别">
+            <template #default="{ row }">
+              <dict-tag :options="D_BZ_XB" :value="row.xbdm" :tag="false" />
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="sfzh"
+            align="center"
+            label="身份证号码"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            prop="bqxxsj"
+            align="center"
+            label="标签名称"
+            show-overflow-tooltip
+          />
+          <el-table-column prop="pcclJgmc" align="center" label="盘查结果" />
+          <el-table-column prop="pcsj" label="盘查时间" align="center" />
+          <el-table-column prop="pcmjXm" label="盘查民警姓名" align="center" />
+          <el-table-column prop="pcmjJh" label="盘查民警警号" align="center" />
+          <el-table-column
+            prop="ssbm"
+            label="所属部门"
+            align="center"
+            show-overflow-tooltip
+          />
+        </el-table>
+        <!-- 盘车 -->
+        <el-table
+          ref="multipleUserRef"
+          :data="list.tableData"
+          border
+          width="100%"
+          height="100%"
+          v-else
+        >
+          <el-table-column
+            label="序号"
+            type="index"
+            align="center"
+            width="80"
+          />
+          <el-table-column prop="hphm" align="center" label="号牌号码" />
+          <el-table-column prop="jdcsyr" align="center" label="车主" />
+          <el-table-column prop="pcclJgmc" align="center" label="盘查结果" />
+          <el-table-column prop="pcsj" label="盘查时间" align="center" />
+          <el-table-column prop="pcmjXm" align="center" label="盘查民警姓名" />
+          <el-table-column prop="pcmjJh" align="center" label="盘查民警警号" />
+          <el-table-column prop="ssbm" label="所属部门" align="center" />
+        </el-table>
+      </div>
+      <div class="fenye">
+        <el-pagination
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listQuery.pageCurrent"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="listQuery.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        ></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import * as MOSTY from "@/components/MyComponents/index";
+import emitter from "@/utils/eventBus.js";
+import { getItem } from "@/utils/storage";
+import { timeValidate } from "@/utils/time.js";
+import { getPcclList, getPcryList } from "@/api/dpApi/home.js";
+import { ref, onMounted, onUnmounted, getCurrentInstance, reactive } from "vue";
+const timeRange = ref([])
+const { proxy } = getCurrentInstance();
+const { D_BZ_XB } = proxy.$dict("D_BZ_XB");
+const list = reactive({
+  tableData: []
+});
+const title = ref("");
+const modelValue = ref(false);
+const total = ref(0);
+const listQuery = ref({
+  pageCurrent: 1,
+  pageSize: 20,
+  ssbmdm: ""
+});
+onMounted(() => {
+  emitter.on("showPCGZWindow", (res) => {
+    title.value = res == "pr" ? '盘查工作-盘人': '盘查工作-盘车'
+    res == "pr" ? getpcryList(): getpcclList()
+    modelValue.value = true;
+  });
+});
+onUnmounted(() => {
+  emitter.off("showPCGZWindow");
+});
+
+function closeDialog() {
+  modelValue.value = false;
+  listQuery.value.ssbmdm = "";
+  listQuery.value.pageCurrent = 1;
+  listQuery.value.pageSize = 20;
+  timeRange.value = []
+  list.tableData = [];
+}
+// 搜索
+function handleFilter() {
+  listQuery.value.pageCurrent = 1;
+  title.value == "盘查工作-盘人" ? getpcryList(): getpcclList()
+ 
+}
+//重置
+function reset() {
+  listQuery.value.ssbmdm = "";
+  listQuery.value.pageCurrent = 1;
+  timeRange.value = []
+  handleFilter()
+}
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageCurrent = currentPage;
+  title.value == "盘查工作-盘人" ? getpcryList(): getpcclList()
+};
+/**
+ * pageSize 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  title.value == "盘查工作-盘人" ? getpcryList(): getpcclList()
+};
+
+// 盘人
+function getpcryList() {
+  let pramas = {
+    pageCurrent: listQuery.value.pageCurrent,
+    pageSize: listQuery.value.pageSize,
+    ssbmdm:listQuery.value.ssbmdm
+  };
+  if(timeRange.value.length > 0){
+    pramas.startTime = timeRange.value[0]
+    pramas.endTime = timeRange.value[1]
+  }
+  getPcryList(pramas).then((res) => {
+    list.tableData = res.records;
+    total.value = res.total;
+    listQuery.value.pageCurrent = res.current;
+  });
+}
+
+//盘车
+function getpcclList() {
+  let pramas = {
+    pageCurrent: listQuery.value.pageCurrent,
+    pageSize: listQuery.value.pageSize,
+    ssbmdm:listQuery.value.ssbmdm
+  };
+  getPcclList(pramas).then((res) => {
+    list.tableData = res.records;
+    total.value = res.total;
+    listQuery.value.pageCurrent = res.current;
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+.bigBox {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 99;
+  .container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    width: 80%;
+    height: 80vh;
+    background: #052342;
+    padding: 0 20px;
+    .header {
+      width: 100%;
+      height: 60px;
+      line-height: 60px;
+      .title {
+        float: left;
+        font-size: 16px;
+      }
+      .close {
+        float: right;
+        font-size: 16px;
+        cursor: pointer;
+      }
+    }
+    .datalist {
+      height: 60vh;
+    }
+    .fenye {
+      height: 60px;
+    }
+  }
+}
+.el-form {
+  display: flex;
+}
+.serchBtn {
+  margin-left: 20px;
+}
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+::v-deep .el-form-item{
+  align-items: center;
+}
+::v-deep .el-input__inner{
+  margin: 0 !important;
+}
+::v-deep .el-form-item{
+  align-items: center;
+}
+::v-deep .el-input__inner{
+  margin: 0 !important;
+}
+::v-deep .el-table{
+  background: transparent;
+}
+::v-deep .el-table__inner-wrapper{
+  background: transparent;
+}
+::v-deep .el-table tr{
+  background: transparent;
+}
+
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: #9696964a; /* 修改背景颜色 */
+}
+
+::v-deep .el-table td.el-table__cell {
+  background: transparent;
+  color: #fff !important;
+}
+
+::v-deep .el-table th.el-table__cell{
+  background: #0d3482;
+  color: #fff;
+}
+
+::v-deep .el-table--border::after, .el-table--border::before,.el-table__border-left-patch{
+  background-color: #12367d;
+}
+
+::v-deep .el-table{
+  background-color: transparent;
+  --el-table-border-color: #12367d;
+  // --el-table-row-hover-bg-color: #f5f7fa;
+}
+::v-deep .el-form-item--default .el-form-item__label{
+  color: #fff;
+}
+</style>

src/views/homeMy/components/dialog/grouListXllsclc.vue

@@ -0,0 +1,291 @@
+<template>
+  <div class="bigBox" v-if="modelValue">
+    <div class="container">
+      <div class="header">
+        <span class="title">{{ title }}</span>
+        <span class="close" @click="closeDialog">
+          <el-icon :size="22"><CircleClose /></el-icon>
+        </span>
+      </div>
+      <div class="search">
+        <el-form ref="formRef" :model="listQuery">
+          <el-form-item label="所属部门">
+            <MOSTY.Department
+              width="200px"
+              clearable
+              v-model="listQuery.ssbmdm"
+            />
+          </el-form-item>&nbsp;&nbsp;
+          <!-- <el-form-item label=" 时间段">
+            <el-date-picker
+              v-model="timeRange"
+              popper-class="jl-time"
+              type="datetimerange"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              range-separator="至"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择开始时间"
+            ></el-date-picker>
+          </el-form-item> -->
+          <el-form-item>
+            <el-button class="serchBtn" @click="handleFilter"> 查询 </el-button>
+            <el-button @click="reset()"> 重置 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="datalist">
+        <el-table
+          ref="multipleUserRef"
+          :data="list.tableData"
+          border
+          width="100%"
+          height="100%"
+        >
+          <el-table-column label="序号" type="index" align="center" width="80"/>
+          <el-table-column label="部门名称" align="center" prop="ssbm" show-overflow-tooltip />
+          <el-table-column label="巡组名称" align="center" prop="jzMc" >
+              <template #default="{ row }">
+               {{ row.jzMc|| row.fzrXm }}
+            </template>
+          </el-table-column>
+            <el-table-column label="报备类型" align="center">
+            <template #default="{ row }">
+              <dict-tag :options="D_BZ_BBFS" :value="row.bblx" :tag="false" />
+            </template>
+          </el-table-column>
+          <el-table-column label="计划巡逻时间" align="center" prop="kssj">
+            <template #default="{ row }">
+              <span v-show="row.bblx != '02'">{{ row.kssj + "至" + row.jssj }}</span>
+            </template>
+          </el-table-column>
+          
+          <el-table-column label="实际巡逻时间" align="center" prop="bbkssj" />
+
+          <el-table-column label="巡逻车辆" align="center" prop="">
+            <template #default="{ row }">
+              <el-tag v-for="(item, index) in row.pbcl" :key="index">
+                {{ item.jdchphm }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="负责人" align="center" prop="fzrXm" />
+          <el-table-column label="巡逻时长" align="center" prop="xfsc" />
+          <el-table-column label="巡逻里程" align="center" prop="xflc" />
+        </el-table>
+      </div>
+      <div class="fenye">
+        <el-pagination
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listQuery.pageCurrent"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="listQuery.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        ></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import * as MOSTY from "@/components/MyComponents/index";
+import emitter from "@/utils/eventBus.js";
+import { getItem } from "@/utils/storage";
+import { timeValidate } from "@/utils/time.js";
+import { http } from "@/api/service";
+import {
+  defineProps,
+  watch,
+  ref,
+  onMounted,
+  nextTick,
+  onUnmounted,
+  getCurrentInstance,
+  reactive
+} from "vue";
+const timeRange = ref([])
+const { proxy } = getCurrentInstance();
+const { D_BZ_BBFS} = proxy.$dict("D_BZ_BBFS");
+const list = reactive({
+  tableData: []
+});
+const modelValue = ref(false);
+const total = ref(0);
+const listQuery = ref({
+  pageCurrent: 1,
+  pageSize: 20,
+  ssbmdm: ""
+});
+const title = ref("");
+
+onMounted(() => {
+  emitter.on("showXLSCWindow", (res) => {
+    title.value = res == "xs" ? "巡逻时长-小时(h)" : "巡逻时长-里程(km)"
+    getList_Mj();
+    modelValue.value = true;
+  });
+});
+onUnmounted(() => {
+  emitter.off("showXLSCWindow");
+});
+
+// page改变触发
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageCurrent = currentPage;
+  getList_Mj();
+};
+// pageSize 改变触发
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getList_Mj();
+};
+// 关闭弹窗
+function closeDialog() {
+  modelValue.value = false;
+  listQuery.value.ssbmdm = "";
+  listQuery.value.pageCurrent = 1;
+  listQuery.value.pageSize = 20;
+  list.tableData = [];
+  timeRange.value = []
+}
+// 搜索
+function handleFilter() {
+  listQuery.value.pageCurrent = 1;
+  getList_Mj();
+}
+//重置
+function reset() {
+  listQuery.value.ssbmdm = "";
+  timeRange.value = []
+  handleFilter()
+}
+// 在线
+function getList_Mj() {
+  let pramas = {
+    pageNum: listQuery.value.pageCurrent,
+    pageSize: listQuery.value.pageSize,
+    ssbmdm: listQuery.value.ssbmdm
+  };
+  if(timeRange.value.length > 0){
+    pramas.startTime = timeRange.value[0]
+    pramas.endTime = timeRange.value[1]
+  }
+  pramas.xzlx = "02";
+  http.selectSjjmxzList(pramas).then((res) => {
+    if (res.records) {
+      res.records.forEach((item) => {
+        if (item.xfsc != 0) item.xfsc = (item.xfsc / 3600).toFixed(2) + "/h";
+        if (item.xflc != 0) item.xflc = (item.xflc / 1000).toFixed(2) + "/KM";
+        item.pbcl = item.pbcl?JSON.parse(item.pbcl):[]
+      });
+      list.tableData = res.records;
+    }
+    total.value = res.total;
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+.bigBox {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 99;
+  .container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    width: 80%;
+    height: 80vh;
+    background: #052342;
+    padding: 0 20px;
+    .header {
+      width: 100%;
+      height: 60px;
+      line-height: 60px;
+      .title {
+        float: left;
+        font-size: 16px;
+      }
+      .close {
+        float: right;
+        font-size: 16px;
+        cursor: pointer;
+      }
+    }
+    .datalist {
+      height: 60vh;
+    }
+    .fenye {
+      height: 60px;
+    }
+  }
+}
+.el-form {
+  display: flex;
+}
+.serchBtn {
+  margin-left: 20px;
+}
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+::v-deep .el-form-item{
+  align-items: center;
+}
+::v-deep .el-input__inner{
+  margin: 0 !important;
+}
+::v-deep .el-form-item{
+  align-items: center;
+}
+::v-deep .el-input__inner{
+  margin: 0 !important;
+}
+::v-deep .el-table{
+  background: transparent;
+}
+::v-deep .el-table__inner-wrapper{
+  background: transparent;
+}
+::v-deep .el-table tr{
+  background: transparent;
+}
+
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: #9696964a; /* 修改背景颜色 */
+}
+
+::v-deep .el-table td.el-table__cell {
+  background: transparent;
+  color: #fff !important;
+}
+
+::v-deep .el-table th.el-table__cell{
+  background: #0d3482;
+  color: #fff;
+}
+
+::v-deep .el-table--border::after, .el-table--border::before,.el-table__border-left-patch{
+  background-color: #12367d;
+}
+
+::v-deep .el-table{
+  background-color: transparent;
+  --el-table-border-color: #12367d;
+  // --el-table-row-hover-bg-color: #f5f7fa;
+}
+::v-deep .el-form-item--default .el-form-item__label{
+  color: #fff;
+}
+</style>

src/views/homeMy/components/dialog/grouListZl.vue

@@ -0,0 +1,286 @@
+<template>
+  <div class="bigBox" v-if="modelValue">
+    <div class="container">
+      <div class="header">
+        <span class="title">{{ title }}</span>
+        <span class="close" @click="closeDialog">
+          <el-icon :size="22"><CircleClose/></el-icon>
+        </span>
+      </div>
+      <div class="search">
+        <el-form ref="formRef" :model="listQuery">
+          <el-form-item label="所属部门">
+            <MOSTY.Department
+              width="200px"
+              clearable
+              v-model="listQuery.ssbmdm"
+            />
+          </el-form-item>&nbsp;&nbsp;
+          <!-- <el-form-item label=" 时间段">
+            <el-date-picker
+              v-model="timeRange"
+              popper-class="jl-time"
+              type="datetimerange"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              range-separator="至"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择开始时间"
+            ></el-date-picker>
+          </el-form-item> -->
+          <el-form-item>
+            <el-button class="serchBtn" @click="handleFilter"> 查询 </el-button>
+            <el-button @click="reset()"> 重置 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="datalist">
+        <el-table
+          ref="multipleUserRef"
+          :data="list.tableData"
+          border
+          width="100%"
+          height="100%"
+        >
+          <el-table-column
+            label="序号"
+            type="index"
+            align="center"
+            width="80"
+          />
+          <el-table-column label="所属部门" show-overflow-tooltip align="center" prop="ssbm"></el-table-column>
+          <el-table-column label="指令标题" show-overflow-tooltip align="center" prop="zlbt"></el-table-column>
+          <el-table-column label="指令内容" show-overflow-tooltip align="center" prop="zlnr"></el-table-column>
+          <el-table-column label="接收警情数" show-overflow-tooltip align="center" width="100">0</el-table-column>
+          <el-table-column label="处置警情数" show-overflow-tooltip align="center" width="100">0</el-table-column>
+          <el-table-column label="接收指令数" show-overflow-tooltip align="center" width="100">0</el-table-column>
+          <el-table-column label="执行指令数" show-overflow-tooltip align="center" width="100">0</el-table-column>
+          <el-table-column label="盘查人员数" show-overflow-tooltip align="center" width="100">0</el-table-column>
+          <el-table-column label="盘查车辆数" show-overflow-tooltip align="center" width="100">0</el-table-column>
+        </el-table>
+      </div>
+      <div class="fenye">
+        <el-pagination
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listQuery.pageCurrent"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="listQuery.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        ></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import * as MOSTY from "@/components/MyComponents/index";
+import emitter from "@/utils/eventBus.js";
+import { getItem } from "@/utils/storage";
+import { dateFormat } from "@/utils/auth.js";
+import { http } from "@/api/service";
+import { getSelectLiist } from "@/api/dpApi/home.js";
+import {
+  defineProps,
+  watch,
+  ref,
+  onMounted,
+  onUnmounted,
+  nextTick,
+  getCurrentInstance,
+  reactive
+} from "vue";
+const timeRange = ref([])
+const { proxy } = getCurrentInstance();
+const { D_BZ_XB } = proxy.$dict("D_BZ_XB");
+
+const list = reactive({
+  tableData: []
+});
+const title = ref("");
+
+onMounted(() => {
+  emitter.on("showZlzxWindow", (res) => {
+    if (res == "zs") {
+      title.value = "指令执行情况-总数";
+    }
+    if (res == "zx") {
+      title.value = "指令执行情况-执行";
+    }
+    getList();
+    modelValue.value = true;
+  });
+});
+onUnmounted(() => {
+  emitter.off("showZlzxWindow");
+});
+const modelValue = ref(false);
+const total = ref(0);
+const listQuery = ref({
+  pageCurrent: 1,
+  pageSize: 20,
+  ssbmdm: ""
+});
+const form = ref({
+  current: 1,
+  size: 20,
+  zblx: "",
+  ssbm: "",
+  gzsj: ""
+});
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageCurrent = currentPage;
+  getList();
+};
+/**
+ * pageSize 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getList();
+};
+function closeDialog() {
+  modelValue.value = false;
+  listQuery.value.ssbmdm = "";
+  listQuery.value.pageCurrent = 1;
+  listQuery.value.pageSize = 20;
+  timeRange.value = []
+  list.tableData = [];
+}
+// 搜索
+function handleFilter() {
+  listQuery.value.pageCurrent = 1;
+  getList();
+}
+//重置
+function reset() {
+  listQuery.value.ssbmdm = "";
+  listQuery.value.pageCurrent = 1;
+  timeRange.value = []
+  getList();
+}
+// 警力情况 - 民警 - 全部
+function getList() {
+  let pramas = {
+    pageNum: listQuery.value.pageCurrent,
+    pageSize: listQuery.value.pageSize,
+    ssbmdm: listQuery.value.ssbmdm,
+    startTime: dateFormat(new Date(), "YY-MM-DD")+ ' 00:00:00',
+  };
+  if(timeRange.value.length > 0){
+    pramas.startTime = timeRange.value[0]
+    pramas.endTime = timeRange.value[1]
+  }
+  if (title.value == "指令执行情况-执行") {
+    pramas.zlwjzt  = "91";
+  }
+  getSelectLiist(pramas).then((res) => {
+    list.tableData = res.records;
+    total.value = res.total;
+    listQuery.value.pageCurrent = res.current;
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+.bigBox {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 99;
+  .container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    width: 80%;
+    height: 80vh;
+    background: #052342;
+    padding: 0 20px;
+    .header {
+      width: 100%;
+      height: 60px;
+      line-height: 60px;
+      .title {
+        float: left;
+        font-size: 16px;
+      }
+      .close {
+        float: right;
+        font-size: 16px;
+        cursor: pointer;
+      }
+    }
+    .datalist {
+      height: 60vh;
+    }
+    .fenye {
+      height: 60px;
+    }
+  }
+}
+.el-form {
+  display: flex;
+}
+.serchBtn {
+  margin-left: 20px;
+}
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+::v-deep .el-form-item{
+  align-items: center;
+}
+::v-deep .el-input__inner{
+  margin: 0 !important;
+}
+::v-deep .el-form-item{
+  align-items: center;
+}
+::v-deep .el-input__inner{
+  margin: 0 !important;
+}
+::v-deep .el-table{
+  background: transparent;
+}
+::v-deep .el-table__inner-wrapper{
+  background: transparent;
+}
+::v-deep .el-table tr{
+  background: transparent;
+}
+
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: #9696964a; /* 修改背景颜色 */
+}
+
+::v-deep .el-table td.el-table__cell {
+  background: transparent;
+  color: #fff !important;
+}
+
+::v-deep .el-table th.el-table__cell{
+  background: #0d3482;
+  color: #fff;
+}
+
+::v-deep .el-table--border::after, .el-table--border::before,.el-table__border-left-patch{
+  background-color: #12367d;
+}
+
+::v-deep .el-table{
+  background-color: transparent;
+  --el-table-border-color: #12367d;
+  // --el-table-row-hover-bg-color: #f5f7fa;
+}
+::v-deep .el-form-item--default .el-form-item__label{
+  color: #fff;
+}
+</style>

src/views/homeMy/components/dialog/gzyInfo.vue

@@ -0,0 +1,133 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-09-20 10:22:51
+ * @LastEditTime: 2024-02-19 11:40:22
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \rs-web\src\views\situationPresentation\dialog\gzyInfo.vue
+-->
+<template>
+  <div class="dialogBox" >
+    <div class="title">
+      <span class="mc">感知源</span>
+      <span @click="close" class="close"><el-icon><Close /></el-icon> </span>
+    </div>
+    <div class="videoLIstBox">
+      <div v-for="(item, index) in info" :key="index">
+        <div class="infoBox">
+          <div class="content">{{ item.sbmc }}</div>
+          <div class="other">
+            <p>设备编号：{{ item.sbbh }}</p>
+            <p>所属部门：{{ item.ssbm }}</p>
+            <p class="itemBox">
+              <span>厂商名称：{{ item.csmc }}</span>
+              <button class="dp-default small" v-if="item.isPlay" @click="closePlay(item.id)"> 关闭 </button>
+              <button v-else class="dp-default small" @click="openVideo(item)">播放 </button>
+            </p>
+            <div class="videoBox" :id="'id_'+item.sbbh" v-if="item.isPlay">
+              <VideoPay :sbbh="item.sbbh" />
+            </div>
+          </div>
+          <div class="addressBox">
+              <div class="ddd">
+               <img src="@/assets/images/dingwei.png" />
+               <span>{{ item.dzmc }}</span>
+              </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, getCurrentInstance, watch } from "vue";
+// import VideoPay from "@/components/wsVideoSenior/wsPlayOne/index";  //ws播放高阶
+// import VideoPay from "@/components/videoOne/index"; //ws播放
+import VideoPay from "@/components/wsVideoSenior/wsIframe/index"; //iframe播放
+import emitter from "@/utils/eventBus.js";
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  data:{
+    type:Array,
+    default:[]
+  }
+})
+const info = ref([])
+watch(()=>props.data,(val)=>{
+  info.value = val
+},{
+  immediate:true
+})
+// 打开视频
+function openVideo(item) {
+  item.isPlay = true
+  if (!item.sbbh) return proxy.$message({ type: "info", message: "暂无视频" });
+  // SPPUC.rdCard(item.sbbh, 1, ["10%", "40%"]);
+}
+//关闭视频
+function closePlay(id) {
+  info.value.forEach((item) => {
+    if (item.id == id) item.isPlay = false;
+  });
+}
+
+//关闭弹窗
+function close() {
+  emitter.emit("deletePointArea", "lang");
+  emitter.emit("showGzy", false);
+}
+</script>
+<style lang="scss" scoped>
+@import "@/assets/css/largeScreen.scss";
+@import "@/assets/css/homeScreen.scss";
+
+.dialogBox{
+  padding: 0 0 10px 0;
+  box-sizing: border-box;
+  .title {
+    border-bottom: 1px solid #275288;
+    margin-bottom: 6px;
+    .mc { margin-left: 10px; }
+  }
+  .videoLIstBox {
+    max-height: 640px;
+    padding: 4px 10px;
+    box-sizing: border-box;
+    overflow: hidden;
+    overflow-y: auto;
+    .infoBox {
+      position: relative;
+      padding: 4px 10px;
+      box-sizing: border-box;
+      border-bottom: 1px solid #20557c;
+      .content {
+        padding: 10px 10px 0 10px;
+        font-size: 14px;
+      }
+      .other {
+        margin: 0 10px;
+        padding: 0px;
+        color: #779dcd;
+        list-style: none;
+        .itemBox {
+          display: flex;
+          justify-content: space-between;
+          flex-wrap: nowrap;
+          span {
+            display: inline-block;
+          }
+        }
+        .videoBox {
+          height: 160px;
+          background: #000;
+        }
+        p { margin: 5px 0;  }
+      }
+    }
+  }
+}
+.ddd{
+
+}
+</style>

src/views/homeMy/components/dialog/imgBox.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="ingBigBox" v-if="isShowBigImg">
+    <div class="demo-image__preview">
+      <el-image
+        style="width: 100px; height: 100px"
+        :src="imgUrl"
+        :preview-src-list="srcList"
+        :initial-index="0"
+        fit="cover"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineEmits, onMounted, onUnmounted } from "vue";
+import emitter from "@/utils/eventBus.js";
+const isShowBigImg = ref(false);
+const imgUrl = "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg";
+const srcList = ["https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"];
+onMounted(() => {
+  emitter.on("showImg", (res) => {
+    isShowBigImg.value = res.show;
+    imgUrl.value = res.url;
+  });
+});
+onUnmounted(() => {
+  emitter.off("showImg");
+});
+</script>
+
+<style lang="scss" scoped>
+.ingBigBox {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 99;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .cnt-box {
+    width: 500px;
+    height: 500px;
+    background: #00143d;
+    padding: 10px 20px 20px;
+    .close {
+      width: 100%;
+      height: 20px;
+      text-align: right;
+      margin-bottom: 10px;
+    }
+    .imgBox {
+      width: 100%;
+      height: calc(100% - 30px);
+      border: 1px solid #275288;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+  }
+}
+
+.demo-image__error .image-slot {
+  font-size: 30px;
+}
+.demo-image__error .image-slot .el-icon {
+  font-size: 30px;
+}
+.demo-image__error .el-image {
+  width: 100%;
+  height: 200px;
+}
+</style>

src/views/homeMy/components/dialog/instructionsInfo.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="dialogBox">
+    <div class="title">
+      <span class="mc">指令信息</span
+      ><span @click="close" class="close">
+        <el-icon><Close /></el-icon>
+      </span>
+    </div>
+    <ul style="padding: 4px 10px; box-sizing: border-box;">
+      <li v-for="(item, index) in props.data" :key="index">
+        <div class="infoBox">
+          <ZlItm :data="item" :isDetail="true" :dic="{ zlzt: D_BZ_ZXZTAI }"/>
+        </div>
+        <div class="btnBox">
+          <button class="dp-default small" @click="policeGroupShowFn(item)" v-if="item.zlly != '03'">
+            推荐处警巡组
+          </button>
+          <button class="dp-default small" @click="videoShowSs(item)" v-if="item.zlly != '03'">
+            实时视频
+          </button>
+          <button class="dp-default small"  @click="warningListShowYjgj(item)" v-if="item.zlly != '03'">
+            预警轨迹
+          </button>
+          <button class="dp-default small" @click="CKDTShowFn(item)">
+            查看动态
+          </button>
+        </div>
+      </li>
+    </ul>
+    <MessageLoad
+      v-if="activeMessage"
+      v-model="activeMessage"
+      :data="zlxxInfo"
+      @upData="activeMessage = false"
+    />
+  </div>
+</template>
+
+<script setup>
+import ZlItm from "@/views/homeMy/components/zlItem.vue";
+import MessageLoad from "./MessageLoad.vue";
+import { ref, defineProps, getCurrentInstance } from "vue";
+import emitter from "@/utils/eventBus.js";
+import { ElMessage } from "element-plus";
+import { getDetailZl } from "@/api/dpApi/home.js";
+const props = defineProps({
+  data: {
+    type: Array,
+    default: []
+  }
+});
+const zlInfo = ref(false);
+const activeMessage = ref(false);
+const zlxxInfo = ref(null);
+const { proxy } = getCurrentInstance();
+const { D_BZ_ZXZTAI } = proxy.$dict("D_BZ_ZXZTAI");
+
+// 显示周边巡组
+function policeGroupShowFn(item) {
+  if(item.jd && item.wd){
+    emitter.emit("showZbxz", item);
+  }else{
+    ElMessage({ message: "暂无巡组信息", type: "warning" });
+  }
+}
+//显示实时视频
+function videoShowSs(item) {
+  emitter.emit("closeVideo", false);
+  if (item.zlly == "01") {
+    if (item.sbbh !== null) {
+      let params = { ...item, splitNum: 1 };
+      emitter.emit("openGzyVideo", params);
+    } else {
+      ElMessage({ message: "没有设备编号，无法播放视频", type: "warning" });
+    }
+  } else {
+    ElMessage({
+      message: "非预警指令，无感知源信息，无法播放视频",
+      type: "warning"
+    });
+  }
+}
+
+//查看动态按钮
+function CKDTShowFn(item) {
+  zlxxInfo.value = item;
+  activeMessage.value = true;
+}
+//显示预警轨迹
+function warningListShowYjgj(item) {
+  if (item.ywId) {
+    getDetailZl(item.ywId).then((res) => {
+      if (res) {
+        emitter.emit("showCcyj", res);
+      } else {
+        ElMessage({ message: "暂无预警轨迹信息", type: "warning" });
+      }
+    });
+  } else {
+    ElMessage({ message: "暂无预警轨迹信息", type: "warning" });
+  }
+}
+//关闭弹窗
+function close() {
+  emitter.emit("showYjzl", false);
+  emitter.emit("deletePointArea", "zl");
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/largeScreen.scss";
+@import "@/assets/css/homeScreen.scss";
+.btnBox{
+  display: flex;
+  justify-content: center;
+  .dp-default{
+    margin: 0 4px;
+  }
+}
+
+</style>

src/views/homeMy/components/dialog/jczInfo.vue

@@ -0,0 +1,118 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-09-20 10:22:51
+ * @LastEditTime: 2024-02-19 11:40:22
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \rs-web\src\views\situationPresentation\dialog\gzyInfo.vue
+-->
+<template>
+  <div class="dialogBox" >
+    <div class="title">
+      <span class="mc">{{ props.data[0].jczmc }}</span>
+      <span @click="close" class="close"><el-icon><Close /></el-icon> </span>
+    </div>
+    <div class="videoLIstBox">
+      <el-tabs v-model="tabsValue" @tab-click="handelTabs">
+        <el-tab-pane v-for="(item, index) in tabsList" :key="index" :label="item.lable" :name="item.value">
+        </el-tab-pane>
+      </el-tabs>
+      <div class="videoContent">
+        <BaseInfo v-if="tabsValue == 'jcxx'" :data="props.data" />
+        <Qdgzy v-if="tabsValue == 'qdgzy'" :data="props.data"   />
+        <Xcsp v-if="tabsValue == 'xcsp'" :data="props.data"  />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, getCurrentInstance, watch } from "vue";
+// import VideoPay from "@/components/wsVideoSenior/wsPlayOne/index";  //ws播放高阶
+// import VideoPay from "@/components/videoOne/index"; //ws播放
+import VideoPay from "@/components/wsVideoSenior/wsIframe/index"; //iframe播放
+import BaseInfo from './baseInfo.vue'
+import Qdgzy from './qdgzy.vue'
+import Xcsp from './xcsp.vue'
+import emitter from "@/utils/eventBus.js";
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  data:{
+    type:Array,
+    default:[]
+  }
+})
+const info = ref([])
+const tabsValue = ref("jcxx"); //默认显示基础信息
+const tabsList = ref([
+  { lable: "基础信息", value: "jcxx" },
+  { lable: "前端感知源", value: "qdgzy" },
+  { lable: "现场视频", value: "xcsp" },
+]);
+
+watch(()=>props.data,(val)=>{
+  info.value = val
+},{
+  immediate:true
+})
+
+// 按钮切换
+const handelTabs = () =>{
+
+}
+
+// 打开视频
+function openVideo(item) {
+  if (!item.sbbh) return proxy.$message({ type: "info", message: "暂无视频" });
+  SPPUC.rdCard(item.sbbh, 1, ["10%", "40%"]);
+}
+//关闭视频
+function closePlay(id) {
+  info.value.forEach((item) => {
+    if (item.id == id) item.isPlay = false;
+  });
+}
+
+//关闭弹窗
+function close() {
+  emitter.emit("showJcz", false);
+}
+</script>
+<style lang="scss" scoped>
+@import "@/assets/css/largeScreen.scss";
+@import "@/assets/css/homeScreen.scss";
+
+.dialogBox{
+  padding: 0 0 10px 0;
+  box-sizing: border-box;
+  .title {
+    border-bottom: 1px solid #275288;
+    margin-bottom: 6px;
+    .mc { margin-left: 10px; }
+  }
+  .videoLIstBox {
+    padding: 4px 10px;
+    box-sizing: border-box;
+    .videoContent{
+      min-height: 190px;
+      max-height: 600px;
+      overflow: hidden;
+      overflow-y: auto;
+    }
+  }
+}
+// tabs栏目
+::v-deep .el-tabs__item.is-active {
+  background: url("~@/assets/images/icon46.png") no-repeat center center;
+  background-size: 100% 100%;
+}
+::v-deep .el-tabs__nav-wrap::after{
+  height: 0;
+}
+::v-deep .el-tabs__item{
+  color: #fff;
+}
+::v-deep .el-tabs__nav{
+  margin-left: 40px;
+}
+</style>

src/views/homeMy/components/dialog/minDialog.vue

@@ -0,0 +1,127 @@
+<template>
+  <div
+    :style="{ top: props.topDistance }"
+    :class="['box',isButtom ? 'isButtom' : '',title == '圈层设置' ? 'bigbox1' : '']"
+    v-if="show"
+  >
+    <div class="title_box">
+      <span>{{ title }}{{ props.topDistance }}</span>
+      <el-icon size="16px" style="cursor: pointer" @click="handleGroup">
+        <Close />
+      </el-icon>
+    </div>
+    <!-- 自定义内容 -->
+    <slot />
+    <div class="address_box" v-if="showAddress">
+      <el-icon size="18px" color="#779DCD">
+        <LocationFilled />
+      </el-icon>
+      <span>四川省眉山市林芝市县红星路29号</span>
+    </div>
+    <div class="but_box" v-if="showbut">
+      <span
+        :class="['but', butList.length == 1 ? 'oneBut' : '']"
+        v-for="(item, index) in butList"
+        :key="item"
+        @click="onClickBut(index)"
+        >{{ item }}</span
+      >
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, getCurrentInstance, defineEmits } from "vue";
+const emit = defineEmits(["handleIdentity"]);
+const { proxy } = getCurrentInstance();
+//参数
+const props = defineProps({
+  //是否显示
+  show: Boolean,
+  //是否显示详情
+  //是否显示地址
+  showAddress: Boolean,
+  //是否显示按钮
+  showbut: Boolean,
+  //按钮数据
+  butList: Array,
+  //是否显示在底部
+  isButtom: Boolean,
+  //标题
+  title: String,
+  topDistance: String
+});
+//关闭弹窗
+function handleGroup() {
+  emit("handleIdentity", false);
+}
+
+function onClickBut(index) {
+  proxy.mittBus.emit("dialogClickBut", {
+    index,
+    count: props.butList.length
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+.box {
+  position: absolute;
+  width: 364px;
+  background: rgba(5, 35, 66, 0.98);
+  padding: 10px;
+  border-radius: 5px;
+  z-index: 11;
+  left: 388px;
+  top: 100px;
+
+  .but_box {
+    display: flex;
+    justify-content: center;
+
+    > span {
+      margin: 0 4px;
+    }
+  }
+
+  .address_box {
+    color: #779dcd;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px 0;
+
+    > span {
+      margin-left: 5px;
+    }
+  }
+
+  .title_box {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+// 按钮样式
+.but {
+  padding: 3px 7px;
+  background: rgba(37, 202, 255, 0);
+  border: 1px solid #3180ea;
+  box-shadow: 0px 0px 17px 1px rgba(43, 140, 230, 0.26);
+  border-radius: 4px;
+  color: #fff;
+  cursor: pointer;
+}
+
+.oneBut {
+  padding: 3px 25px;
+}
+
+.isButtom {
+  top: unset;
+  bottom: 0px !important;
+}
+::v-deep .el-form-item__label {
+  color: #fff;
+}
+</style>

src/views/homeMy/components/dialog/moreVideo.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="dialogBox">
+    <div class="title">
+      <span class="mc">{{ title }}</span>
+      <span class="close" @click="close">
+        <el-icon :size="22"><CircleClose /></el-icon>
+      </span>
+    </div>
+    <ul class="shebeiList" ref="scollVideo">
+      <li v-for="item in videoList.list" :key="item.id">
+        <div> {{ item.sbmc }} </div>
+        <div class="top">
+          <span class="other">{{ item.distance ? item.distance.toFixed(0) : 0 }}m</span>
+          <span>
+            <button class="dp-default small" v-if="!item.isPlay" @click="handlePlay(item)"> 播放 </button>
+            <button class="dp-default small" v-if="item.isPlay" @click="closePlay(item.id)" > 关闭 </button>
+          </span>
+        </div>
+        <div class="address">
+          <img src="@/assets/images/dingwei.png" />
+          <span>{{ item.dzmc }}</span>
+        </div>
+        <div class="videoBox" v-if="item.isPlay">
+          <VideoPay key="item.id" :vId="'sb_'+index" :sbbh="item.sbbh"></VideoPay>
+        </div>
+      </li>
+      <el-empty
+        description="没有数据"
+        :image-size="0.1"
+        v-if="!loading && videoList.list.length <= 0"
+      />
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { http } from "@/api/service";
+// import VideoPay from "@/components/wsVideoSenior/wsPlayOne/index";  //ws播放高阶
+// import VideoPay from "@/components/videoOne/index"; //ws播放
+import VideoPay from "@/components/wsVideoSenior/wsIframe/index"; //iframe播放
+import { getZbVideoList, getVideoSdList } from "@/api/dpApi/video.js";
+import {
+  ref,
+  defineEmits,
+  onMounted,
+  reactive,
+  onUnmounted,
+  defineProps,
+  getCurrentInstance
+} from "vue";
+const { proxy } = getCurrentInstance();
+import emitter from "@/utils/eventBus.js";
+const loading = ref(false);
+const page = ref(1);
+const total = ref(0);
+//周边视频列表
+const videoList = reactive({
+  list: []
+});
+const scollVideo = ref(null);
+const props = defineProps({
+  //某条预警详情
+  info: Object,
+  //弹框标题
+  title: String
+});
+const emit = defineEmits(["close"]);
+onMounted(() => {
+  //打开周边视频
+  _getZbVideoList(props.info);
+  scroll();
+  emitter.on("closeVideo", (res) => {
+    emit("close", res);
+  });
+});
+onUnmounted(() => {
+  emitter.off("closeVideo");
+});
+//关闭
+function close() {
+  emit("close", false);
+}
+
+// 获取地址
+function getws(item) {
+  let pramas = {
+    cameraIndexCode: item.sbbh
+  };
+  http.getSpWs(pramas).then((res) => {
+    item.src = "http://80.75.112.18:56233?ws=" + res.url;
+  });
+}
+
+//获取视频列表
+function _getZbVideoList(info) {
+  if (info.jd && info.wd) {
+    let data = {
+      jd: info.jd,
+      wd: info.wd,
+      radius: 300,
+      sblx: "01"
+    };
+    loading.value = true;
+    if (props.title == "周边视频") {
+      getZbVideoList(data).then((res) => {
+        videoList.list = res || [];
+        loading.value = false; })
+      .catch(() => {
+        loading.value = false;
+      });
+    } else {
+      //获取视频随动列表
+      data.pageSize = 4;
+      data.pageNum = 1;
+      getVideoSdList(data).then((res) => {
+        videoList.list = res.records ? res.records : [];
+        videoList.list.forEach(item=> { v.isPlay = false; });
+        loading.value = false;
+      }).catch(() => {
+        loading.value = false;
+      });
+    }
+  } else {
+    proxy.$message({type: "warning", message: "获取经纬度失败"});
+  }
+}
+
+// 处理播放
+function handlePlay(item) {
+  if (!item.sbbh) return proxy.$message({ type: "info", message: "暂无视频" });
+  SPPUC.rdCard(item.sbbh, 1, ["60%", "40%"]);
+}
+
+// 关闭播放
+function closePlay(id) {
+  videoList.list.forEach((item) => {
+    if (item.id == id) {
+      item.isPlay = false;
+    }
+  });
+}
+
+//触底加载
+function scroll() {
+  let scrollTargetBox = scollVideo.value;
+  scrollTargetBox.onscroll = (e) => {
+    var scrollHeight = scrollTargetBox.scrollHeight; //251
+    var scrollTop = scrollTargetBox.scrollTop; //0-18
+    var clientHeight = scrollTargetBox.clientHeight; //233
+    if (scrollHeight - clientHeight == scrollTop) {
+      //滚动条滚到最底部
+      if (videoList.list.length < total.value) {
+        page.value++;
+        _getZbVideoList(props.info);
+      }
+    }
+  };
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+.dialogBox{
+  padding: 0 0 10px 0;
+  box-sizing: border-box;
+  .title {
+    border-bottom: 1px solid #275288;
+    margin-bottom: 6px;
+    .mc { margin-left: 10px; }
+  }
+  .shebeiList {
+    padding: 4px 10px;
+    box-sizing: border-box;
+    max-height: 700px;
+    overflow: hidden;
+    overflow-y: auto;
+    li{
+      border: 1px solid #275288;
+      padding: 4px 10px;
+      box-sizing: border-box;
+      margin-bottom: 4px;
+      .top{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .address{
+      line-height: 30px;
+        img{
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+  .videoBox{
+    margin: 0 10px;
+    border: 1px solid#2b4462;
+    background: #000;
+    height: 200px;
+    margin-bottom: 8px;
+    >img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

src/views/homeMy/components/dialog/policeGroupBtnList.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="dialogBox" v-if="show">
+    <div class="title">
+      <span class="mc">巡组列表</span>
+      <span class="close" @click="show = false">×</span>
+    </div>
+    <div class="search">
+      <el-input v-model="keyWord" clearable placeholder="请输入部门或者负责人姓名">
+        <template #append>
+          <el-button icon="Search" @click="_ggetSelectDeckList('0,1,2')"></el-button>
+        </template>
+      </el-input>
+    </div>
+    <ul class="groupList noScollLine" v-loading="loading">
+      <li v-for="item in xzList.list" :key="item.id" @click="item.isChecked = !item.isChecked" :class="item.isChecked?'isChecked':''">
+        <div class="top">
+          <div class="top-cnt">
+            <span class="dian online"  title="巡逻中"  v-if="item.xfzt == 0" ></span>
+            <span class="dian busy" title="处警中" v-if="item.xfzt == 1"></span>
+            <span class="dian" title="离线" v-if="item.xfzt == 2"></span>
+            <span class="name">{{ item.jzMc?item.jzMc:item.fzrXm+'警组' }}</span><br />
+            <span class="other">民警：{{ item.mjsl }}人，辅警{{ item.fjsl }}人</span ><br />
+            <span class="other">联系电话：{{ item.fzrLxdh }}</span ><br />
+            <span>巡逻时长：{{ item.xfsc ? item.xfsc : 0 }} h<br />巡逻里程：{{ item.xflc ? item.xflc : 0  }}km</span>
+          </div>
+          <div class="imgBtn">
+            <img src="@/assets/images/shipin.png" />
+            <img src="@/assets/images/tel.png" />
+          </div>
+        </div>
+        <div class="address">
+          <img src="@/assets/images/dingwei.png" />
+          <span>{{ item.dqwz }}</span>
+        </div>
+      </li>
+      <el-empty description="没有数据" :image-size="0.1" v-if="!loading && xzList.list.length <= 0" />
+    </ul>
+    <div class="btnBox">
+      <button class="dp-default" @click="buttonSubmit">确定</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { qcckGet } from "@/api/qcckApi.js";
+import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
+import emitter from "@/utils/eventBus.js";
+import { getSelectDeckList } from "@/api/dpApi/home.js";
+const show = ref(false);
+const { proxy } = getCurrentInstance();
+let xzList = reactive({ list: [] }); //巡组数据
+const loading = ref(true); //警组加载
+const pageSize = ref(500);
+const pageCurrent = ref(1);
+const totalPage = ref(0);
+const type = ref("");
+const dataObj = ref({});
+const keyWord = ref('') //输入关键字
+onMounted(() => {
+  emitter.on("showXZBtn", (res) => {
+    show.value = true;
+    type.value = res.type;
+    dataObj.value = res.data;
+    xzList.list = []
+    _ggetSelectDeckList('0,1,2');
+  });
+  emitter.on("closeAllDialog", (res) => {
+    show.value = false;
+  });
+});
+onUnmounted(() => {
+  emitter.off("closeAllDialog");
+  emitter.off("showXZBtn");
+});
+
+//巡组列表
+function _ggetSelectDeckList(xfzt) {
+  let data = {
+    xfzt,
+    pageSize: pageSize.value,
+    pageCurrent: pageCurrent.value,
+    keyword:keyWord.value,
+  };
+  getSelectDeckList(data).then((res) => {
+    loading.value = false;
+    totalPage.value = res.records.length;
+    xzList.list = []
+    if (res.records.length > 0) {
+      for (let i = 0; i < res.records.length; i++) {
+        res.records[i].isChecked = false
+        let num = Number(res.records[i].xfsc) || 0
+        res.records[i].xfsc = (num/3600).toFixed(1)
+        let lc = Number(res.records[i].xflc) || 0
+        res.records[i].xflc = (lc/1000).toFixed(2)
+        xzList.list.push(res.records[i]);
+      }
+    }
+  }).catch(() => {
+    loading.value = false;
+  });
+}
+
+// 下发指令
+function buttonSubmit() {
+  let list = xzList.list.filter((item) => { return item.isChecked; });
+  let ids = list.map((res) => { return res.id; }).join(",");
+  if (ids.length <= 0) return proxy.$message({ type: "info", message: "请选择下发数据！" });
+  proxy.$confirm("确定要要下发指令", "警告", { type: "warning" }).then(() => {
+    let prams = { bbids: ids };
+    if (type.value == "jq") {
+      prams.jqid = dataObj.value.id;
+      qcckGet(prams, "/mosty-jmxf/tbZl/andJqZl").then((res) => {
+        proxy.$message({ type: "success", message: "下发成功" });
+      });
+    }
+    if (type.value == "yj") {
+      prams.yjid = dataObj.value.id;
+      qcckGet(prams, "/mosty-jmxf/tbZl/andYjZl").then((res) => {
+        proxy.$message({ type: "success", message: "下发成功" });
+      });
+    }
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/largeScreen.scss";
+@import "@/assets/css/homeScreen.scss";
+
+.dialogBox {
+  padding: 0 0 10px 0;
+  box-sizing: border-box;
+  .title {
+    border-bottom: 1px solid #275288;
+    .mc { margin-left: 10px; }
+  }
+  .search{
+    padding:  0 8px;
+    box-sizing: border-box;
+  }
+  ul.groupList {
+    height: calc(100vh - 570px);
+    overflow: hidden;
+    overflow-y: auto;
+    padding: 4px 10px;
+    box-sizing: border-box;
+    li{
+      border: 1px solid #275288;
+      padding: 4px 10px;
+      box-sizing: border-box;
+      margin-bottom: 10px;
+      .top{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .imgBtn{
+        display: flex;
+        img{ margin: 0 4px; }
+      }
+      .address{
+        line-height: 30px;
+        img{ margin-right: 10px; }
+      }
+    }
+    .isChecked{
+      border: 1px solid #cd6907;
+      box-shadow: inset 0 0 10px #ff6c00;
+    }
+  }
+}
+
+//加载时 取消背景
+::v-deep .el-loading-mask {
+    background-color: transparent !important;
+}
+
+.dialogBox > .btnBox{
+  margin-bottom: 0px;
+  padding-top: 0px;
+}
+::v-deep .el-input-group--append .el-input__inner{
+  background-color: #062a48;
+  border: 1px solid #114260;
+  color: #fff;
+}
+::v-deep .el-input-group__append{
+  background: transparent;
+  border: 1px solid #0c4e77;
+  border-left: none;
+}
+</style>

src/views/homeMy/components/dialog/policeGroupList.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="dialogBox">
+    <div class="title">
+      <span class="mc">推荐警力</span>
+      <span class="close" @click="closeDialog">×</span>
+    </div>
+    <ul class="groupList" v-loading="loading">
+      <li class="groupList-item" v-for="item in xzList" :key="item.id" >
+        <div class="top">
+          <div @click="handelClick">
+            <span class="dian" title="离线" v-if="item.xfzt == 3"></span>
+            <span class="dian online" title="巡逻中" v-if="item.xfzt == 0"></span>
+            <span class="dian busy" title="处警中" v-if="item.xfzt == 1"></span>
+            <span class="name">{{ item.jzMc ? item.jzMc : item.fzrXm +'巡组'}}</span> <br />
+            <span>负责人：{{ item.fzrXm }}({{ item.fzrLxdh }})</span><br />
+          </div>
+        </div>
+        <div class="address">
+          <div class="distance">
+            <img src="@/assets/images/dingwei.png" />
+            <span style="margin-right:10px">距离：{{ item.distance || 0 }}km</span>
+            <span>到达时间: {{ item.time || 0 }}min</span>
+          </div>
+          <div class="numbPopljgh" @click="clickXfzl(item)">
+            <span>下发指令</span>
+          </div>
+        </div>
+      </li>
+      <el-empty
+        description="没有数据"
+        :image-size="0.1"
+        v-if="xzList.length <= 0"
+      />
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { qcckGet ,qcckPost} from "@/api/qcckApi.js";
+import emitter from "@/utils/eventBus.js";
+import { ElMessage } from "element-plus";
+import { selectDeckList } from "@/api/dpApi/zzzh.js";
+import { ref, getCurrentInstance, watch } from "vue";
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {}
+  }
+});
+const loading = ref(false)
+const xzList = ref([]); //巡组列表
+const pageSize = ref(10);
+const pageCurrent = ref(1);
+const type = ref("");
+const dataObj = ref({});
+watch(
+  () => props.data,
+  (res) => {
+    type.value = res.type;
+    dataObj.value = res.data ? res.data : res;
+    _getSelectDeckList(dataObj.value);
+  },
+  {
+    immediate: true
+  }
+);
+
+//获取巡组信息,
+function _getSelectDeckList(val) {
+  let data = {
+    pageSize: pageSize.value,
+    pageCurrent: pageCurrent.value,
+    jd: val.jd,
+    wd: val.wd,
+    radius: 3000
+  };
+  loading.value = true
+  selectDeckList(data).then((res) => {
+    loading.value = false
+    xzList.value = res.records || [];
+    if (res.records.length == 0) return  ElMessage({ message: "暂无巡组信息", type: "warning" });
+    xzList.value.forEach((item, index) => {
+      let qd = `${val.jd},${val.wd}`;
+      let zd = `${item.jd},${item.wd}`;
+      item.time = 0;
+      if (val.jd && val.wd && item.jd && item.wd) getRouteLine(qd, zd, { jd: item.jd, wd: item.wd },item);
+    });
+  }).catch(()=>{
+    loading.value = false
+  });
+}
+// 获取路径 String origin, String destination
+function getRouteLine(origin, destination, obj,item) {
+  qcckPost({}, "/mosty-jmxf/lzJq/gdLjgh?origin="+origin+'&destination='+destination).then((res) => {
+    let data = res ? JSON.parse(res) : {}
+    let route = data[0].paths[0].features;
+    let coords = []
+    route.forEach(v=>{ coords = coords.concat(v.geometry.coordinates) })
+    let coods = { coords:[coords], text:'' }
+    emitter.emit("echoLine", { coords: [coods], flag: "route", type:'dash',width:6, isclear: false,color:'rgba(255,0,0,1)' });
+    let km = data[0].paths[0].distance ? data[0].paths[0].distance : 0;
+    let distance = (km / 1000).toFixed(2);
+    item.distance = distance
+
+    let sj = data[0].paths[0].duration ? data[0].paths[0].duration : 0;
+    item.time = sj == 0 ? 0 : sj < 60 ? 1 : parseInt(sj/60)
+
+    let prams = { points: [obj.jd,obj.wd], distance,flag:'distance'};
+    emitter.emit("showSquire", prams);
+  });
+}
+// 关闭弹窗
+function closeDialog() {
+  emitter.emit("showZbxz", false);
+  emitter.emit("deletePointArea", "route");
+  emitter.emit("deletePointArea", "distance");
+}
+//点击下发指令
+function clickXfzl(item) {
+  proxy.$confirm("确定要要下发指令", "警告", { type: "warning" }).then(() => {
+    let prams = { jqid: dataObj.value.id, bbids: item.id };
+    if (type.value == "jq") {
+      qcckGet(prams, "/mosty-jmxf/tbZl/andJqZl").then((res) => {
+        proxy.$message({ type: "success", message: "下发成功" });
+      });
+    }
+    if (type.value == "yj") {
+      qcckGet(prams, "/mosty-jmxf/tbZl/andYjZl").then((res) => {
+        proxy.$message({ type: "success", message: "下发成功" });
+      });
+    }
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/largeScreen.scss";
+@import "@/assets/css/homeScreen.scss";
+.dialogBox {
+  padding: 0 0 10px 0;
+  box-sizing: border-box;
+  .title {
+    border-bottom: 1px solid #275288;
+    margin-bottom: 6px;
+    .mc {
+      margin-left: 10px;
+    }
+  }
+  .groupList {
+    height: calc(100vh - 580px);
+    padding: 10px 20px;
+    box-sizing: border-box;
+    overflow: hidden;
+    overflow-y: auto;
+    .groupList-item {
+      padding: 10px;
+      box-sizing: border-box;
+      line-height: 20px;
+      font-size: 14px;
+      background: #052955;
+      margin-top: 4px;
+      box-shadow: inset 0 0 10px 10px #104675;
+      .address {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .distance {
+          img {
+            margin-right: 4px;
+          }
+        }
+        .numbPopljgh {
+          padding: 1px 10px;
+          box-sizing: border-box;
+          background: rgba(5, 35, 66, 0.5);
+          border: 1px solid #00fcff;
+          border-radius: 5px;
+          font-size: 12px;
+          color: #fff;
+          font-weight: 700;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/homeMy/components/dialog/qdgzy.vue

@@ -0,0 +1,144 @@
+<template>
+    <div class="groupInfo noScollLine">
+      <div class="inaInfo" v-for="(item, index) in dataList" :key="index">
+        <div class="title-top">
+          <div class="gzyzmc">{{ item.gzyzmc }}</div>
+        </div>
+        <div class="inb" :class="item.sxtList.length > 1 ? 'borderless' : ''" v-for="val in item.sxtList" :key="val">
+          <div>
+            <span class="spa">名称 </span>
+            <span class="address">：{{ val.sbmc }}</span>
+          </div>
+          <div>
+            <span class="spa">编号 </span>
+            <span class="address">：{{ val.sbbh }}</span>
+          </div>
+          <div>
+            <span class="spa">类型 </span>
+            <span class="address">：
+              <dict-tag class="tagItem" :options="D_BZ_SBLX" :value="val.sblx" :tag="false" color="#01c3fd" />
+            </span>
+          </div>
+          <div>
+            <span class="spa">地址 </span>
+            <span class="address">：{{ val.dzmc }}</span>
+          </div>
+          <div class="title-top">
+            <div></div>
+            <button class="dp-default small" v-if="!item.isPlay" @click="handlePlay(item)"> 播放 </button>
+            <button class="dp-default small" v-if="item.isPlay" @click="closePlay(item.id)" > 关闭 </button>
+          </div>
+          <div class="videoBox" v-if="item.isPlay">
+            <VideoPay :key="item.id" :vId="'sb_'+index" :sbbh="item.sbbh"></VideoPay>
+          </div>
+        </div>
+      </div>
+      <el-empty v-if="dataList.length == 0" :image-size="90" description="暂无数据"></el-empty>
+  </div>
+</template>
+<script setup>
+// import VideoPay from "@/components/wsVideoSenior/wsPlayOne/index";  //ws播放高阶
+// import VideoPay from "@/components/videoOne/index"; //ws播放
+import VideoPay from "@/components/wsVideoSenior/wsIframe/index"; //iframe播放
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import emitter from "@/utils/eventBus.js";
+import { onMounted, ref, getCurrentInstance, defineProps, watch } from "vue";
+const { proxy } = getCurrentInstance();
+const { D_BZ_SBLX } = proxy.$dict("D_BZ_SBLX");
+const props = defineProps({
+  data: Array
+});
+const dataList = ref([]);
+const queryList = ref({
+  pageSize: 500,
+  pageCurrent: 1,
+});
+
+watch(()=>props.data,(val)=>{
+  if(!val) return;
+  queryList.value.jczid = val[0].id;
+  getInfo();
+},{ immediate: true, deep: true })
+
+// 获取基本数据
+function getInfo() {
+  qcckGet(queryList.value, "/mosty-jmxf/gzyz/getPageList").then((res) => {
+    dataList.value = res.records ? res.records : [];
+  });
+}
+// 处理播放
+function handlePlay(item) {
+  if (!item.sbbh) return proxy.$message({ type: "info", message: "暂无视频" });
+  SPPUC.rdCard(item.sbbh, 1, ["60%", "40%"]);
+}
+
+// 关闭播放
+function closePlay(id) {
+  dataList.list.forEach((item) => {
+    if (item.id == id) item.isPlay = false;
+  });
+}
+
+</script>>
+<style lang="scss" scoped >
+.groupInfo {
+  width: 100%;
+  height: 100%;
+  border-radius: 3px;
+  position: relative;
+  overflow: hidden;
+  overflow-y: auto;
+  .inaInfo {
+    box-shadow: inset 0 0 10px #01c3ed;
+    padding: 8px 14px;
+    box-sizing: border-box;
+    margin-bottom: 14px;
+    .inb {
+      margin-top: 2px;
+      font-size: 14px;
+      .spa {
+        color: #8ea6bf;
+        display: inline-block;
+        text-align-last: justify;
+      }
+      .address {
+        line-height: 19px;
+        flex: 1;
+        color: #01c3fd;
+        margin-left: 4px;
+        .tagItem {
+          display: inline;
+        }
+      }
+    }
+    .title-top {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 10px;
+      .gzyzmc {
+        font-size: 18px;
+      }
+    }
+  }
+}
+.borderless {
+  border-top: 1px dashed;
+  margin-top: 15px !important;
+  padding-top: 10px;
+  box-sizing: border-box;
+}
+::v-deep .el-empty{
+  padding:25px 0;
+}
+ .videoBox{
+    margin: 0 10px;
+    border: 1px solid#2b4462;
+    background: #000;
+    height: 200px;
+    margin-bottom: 8px;
+    >img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>

src/views/homeMy/components/dialog/qfqz.vue

@@ -0,0 +1,213 @@
+<template>
+  <!--下发指令 -->
+  <MinDialog  @handleIdentity="close"  :show="showAddEvent" :butList="['提交']"  :showContent="true"  :showbut="false"  title="群防群治人员">
+    <el-form label-width="100px" :model="formInfo" :inline="true" label-position="top" :rules="rules" ref="elform">
+
+      <el-form-item label="事件坐标" style="width: 100%" prop="jwd">
+        <el-input v-model="formInfo.jwd" placeholder="请选择坐标" clearable style="width: 80%"/>
+        <el-button type="info" @click="selectLocation">选点</el-button>
+      </el-form-item>
+      <el-form-item label="下发内容" prop="nr" style="width:100%">
+        <el-input v-model="formInfo.nr" type="textarea" placeholder="请输入下发内容" style="width:100%" clearable ></el-input>
+      </el-form-item>
+      <el-form-item prop="chooseList" label="下发单位" style="width: 100%;">
+        <div class="tagbox" @click.stop="isChooseDw = true" >
+          <el-tag :key="tag" v-for="tag in formInfo.chooseList" closable :disabled-transitions="false" @close="handClose(tag)">
+            {{ tag.dwmc }}
+          </el-tag>
+        </div>
+      </el-form-item>
+      <div class="mapQx">
+        <el-button type="primary" style="padding: 0 14px" @click="selectLoop">空间查询</el-button>
+        <el-button type="primary" @click="submit">短信下发</el-button>
+      </div>
+    </el-form>
+   <DwModel v-model="isChooseDw" v-if="isChooseDw" :data="formInfo.chooseList" @choosedModel="choosedModel" />
+  </MinDialog>
+</template>
+
+<script setup>
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import { dateFormat } from "@/utils/auth.js";
+import { ElMessage } from "element-plus";
+import MinDialog from "@/views/homeMy/components/dialog/minDialog.vue";
+import emitter from "@/utils/eventBus.js";
+import DwModel from './dwModel.vue'
+import * as MOSTY from "@/components/MyComponents/index";
+import { reactive, ref, onMounted, getCurrentInstance, onUnmounted } from "vue";
+import { getSelectDeckList } from "@/api/dpApi/home.js";
+import { getAddressApi } from "@/utils/tools.js";
+const { proxy } = getCurrentInstance();
+const isChooseDw = ref(false)
+const showAddEvent = ref(false);
+const formInfo = reactive({
+  chooseList:[],
+});
+const elform = ref(null);
+const rules = reactive({
+  chooseList: [{ required: true, message: "请选择单位" ,trigger: "change"}],
+  nr: [{ required: true, message: "请输入下发内容" ,trigger: "blur"}],
+  jwd: [{ required: true, message: "请选择坐标" ,trigger: "change"}],
+});
+
+onMounted(() => {
+  emitter.on("showQfqz", (res) => {
+    showAddEvent.value = true;
+    formInfo.chooseList = []
+  });
+  emitter.on("closeAllDialog", (res) => {
+    showAddEvent.value = false;
+  });
+  emitter.on("coordString", (res) => {
+    if(res.type == 'point'){
+      formInfo.jwd = res.coord[0] + "," + res.coord[1];
+      formInfo.jd = res.coord[0];
+      formInfo.wd = res.coord[1];
+    }
+    if(res.type == 'circle'){
+      let data = { radius: Number(res.data.radius)*1000, jd: res.data.centerPoint[0], wd: res.data.centerPoint[1] };
+      if(showAddEvent.value) circleData(data);
+    }
+  });
+});
+
+// 删除
+function handClose(tag) {
+  formInfo.chooseList.splice(formInfo.chooseList.indexOf(tag), 1);
+}
+
+//关闭弹窗
+function close() {
+  showAddEvent.value = false;
+  formInfo.chooseList = [];
+  emitter.emit("removePlot", "PIOZL");
+  emitter.emit("removePlot", "quanXuan");
+  emitter.emit("deletePointArea", "centerpoint");
+}
+
+
+// 提价
+function submit() {
+  elform.value.validate((valid) => {
+    if(!valid) return false;
+    let data = {...formInfo}
+    data.dwids = (formInfo.chooseList.map(iv=>iv.id)).join(',')
+    delete data.chooseList
+    qcckPost(data,'/mosty-jmxf/tbJcglXfDwgl/xfDwDxxf').then(res=>{
+      close();
+      proxy.$message({ type: "success", message: "下发成功" });
+    })
+  });
+}
+
+function choosedModel(val) {
+  formInfo.chooseList = val
+}
+
+//选择点位
+function selectLocation() {
+  emitter.emit("removePlot", "PIOZL");
+  emitter.emit("drawShape", {flag:"PIOZL" , type:'point' });
+}
+
+//地图圈选
+function selectLoop() {
+  formInfo.chooseList = []
+  emitter.emit("deletePointArea", "centerpoint");
+  emitter.emit("drawShape", { flag: "quanXuan" ,type:'circle',isclear:true});
+}
+//获取圈选数据
+function circleData(data) {
+  qcckPost(data,'/mosty-jmxf/tbJcglXfDwgl/getList').then(res=>{
+    let crr = res ? res : [];
+    if (crr.length > 0) {
+      formInfo.chooseList = crr
+    } else {
+      ElMessage({ message: "暂无数据", type: "warning" });
+    }
+  })
+
+  getSelectDeckList(data).then((res) => {
+
+  });
+}
+
+onUnmounted(() => {
+  emitter.off("coordString");
+  emitter.off("closeAllDialog");
+  emitter.off("showQfqz");
+});
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+
+::v-deep .el-form-item__content {
+  flex-wrap: nowrap;
+}
+.ipt {
+  min-height: 32px;
+  border: 1px solid #224ab5;
+  border-radius: 4px;
+  box-sizing: border-box;
+  padding: 0 12px;
+  cursor: pointer;
+  width: 100%;
+  position: relative;
+  .el-tag {
+    margin-right: 12px;
+    background: #434449;
+  }
+}
+.tagbox {
+  width: 100%;
+  min-height: 32px;
+  border: 1px solid #409eff;
+  border-radius: 4px;
+  box-sizing: border-box;
+  padding: 4px 12px;
+  cursor: pointer;
+  position: relative;
+  margin-bottom: 4px;
+  max-height: 32vh;
+  overflow: hidden;
+  overflow: auto;
+}
+.ipt:hover {
+  border-color: rgb(62, 127, 247);
+}
+.ts::after {
+  content: "请选择指令接收对象";
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 12px;
+  line-height: 32px;
+  bottom: 0;
+  color: rgb(177, 177, 177);
+}
+.mapQx{
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 8px 0 13px 0;
+}
+::v-deep .el-tag--default.is-closable{
+  margin-bottom: 4px;
+  margin-right: 4px;
+}
+::v-deep .el-form--inline.el-form--label-top{
+  max-height: 78vh;
+  overflow: hidden;
+  overflow-y: auto;
+}
+::v-deep .el-cascader__search-input{
+  background: transparent;
+}
+::v-deep .el-textarea__inner{
+  background: transparent;
+  border: 1px solid #409eff;
+  color: #fff;
+}
+</style>

src/views/homeMy/components/dialog/routePlanning.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="bigBox" ref="bigBox">
+    <div class="container">
+      <div class="header">
+        <span class="title">{{ title }}</span>
+        <span class="close" @click="closeDialog">
+          <el-icon :size="22">
+            <CircleClose />
+          </el-icon>
+        </span>
+      </div>
+      <div class="search" style="color: aliceblue;" ref="searchBox">
+        <el-form ref="formRef" :model="listQuery"><el-form-item label=" 线路名称">
+            <el-input v-model="listQuery.xlmc" placeholder="请输入线路名称" />
+          </el-form-item>
+          <el-form-item>
+            <el-button class="serchBtn" @click="handleFilter"> 查询 </el-button>
+            <el-button @click="reset()"> 重置 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="datalist">
+        <div class="tabBox">
+          <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn"
+            :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
+            :controlsWidth="pageData.controlsWidth" @chooseData="chooseData">
+            <!-- 操作 -->
+             <template #rwsj="{ row }">
+              {{ row.rwkssj }}--{{ row.rwjssj }}
+            </template>
+            <template #controls="{ row }">
+              <el-link type="primary" @click="drawAline( row)">查看线路</el-link>
+            </template>
+          </MyTable>
+          <!-- <Pages @changeNo="handleSizeChange" @changeSize="handleCurrentChange" :tableHeight="pageData.tableHeight"
+            :pageConfiger="{
+              ...pageData.pageConfiger,
+              total: pageData.total
+            }"></Pages> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import * as MOSTY from "@/components/MyComponents/index";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import emitter from "@/utils/eventBus.js";
+import { ref, watch, onMounted, onUnmounted, getCurrentInstance, reactive } from "vue";
+import { handleSelectListDp } from "@/api/dpApi/home.js";
+import { qcckPost, qcckGet } from "@/api/qcckApi.js";
+import { tbQwXfAselectById } from '@/api/lz/backstage'
+const { proxy } = getCurrentInstance();
+const { D_BZ_XB } = proxy.$dict("D_BZ_XB");
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => { },
+  },
+});
+const list = reactive({
+  tableData: [],
+  pageCurrent: 1,
+  pageSize: 20,
+});
+const pageData = reactive({
+  tableData: [],
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "null",
+    loading: false,
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  },
+  controlsWidth: 200,
+  tableColumn: [
+    { label: "线路名称", prop: "xlmc" },
+    { label: "民警", prop: "mjxm" },
+    { label: "辅警", prop: "fjxm" },
+    { label: "保安", prop: "baxm" },
+    { label: "巡逻日期", prop: "rwsj",showSolt:true,width:"300px" },
+  ]
+});
+const title = ref("巡逻路线");
+const showBut = ref("")
+const listQuery = ref({});
+const loading = ref(false)
+function _ggetSelectDeckList(staus, qwlx) {
+  loading.value = true;
+  let data = { ...listQuery.value, ...pageData.pageConfiger };
+  handleSelectListDp(data).then((res) => {
+    loading.value = false;
+    pageData.tableData = res ? res : [];
+    pageData.total = res.total
+    //是否展示点位
+  }).catch(() => { loading.value = false; });
+}
+watch(() => props.data, (val) => {
+  showBut.value = val.type
+  _ggetSelectDeckList()
+}, { deep: true, immediate: true })
+onMounted(() => {
+  _ggetSelectDeckList()
+  tabHeightFn()
+});
+onUnmounted(() => {
+  emitter.off("showJLWindow");
+});
+const handleCurrentChange = (currentPage) => {
+  pageData.pageConfige.pageCurrent = currentPage;
+  _ggetSelectDeckList();
+};
+// pageSize 改变触发
+const handleSizeChange = (currentSize) => {
+  pageData.pageConfiger.pageSize = currentSize;
+  _ggetSelectDeckList();
+};
+// 关闭弹窗
+function closeDialog() {
+  emitter.emit("deletePointArea", "route");
+  emitter.emit("removeEara", 'point');
+  emitter.emit("openZdXl", { show: false });
+  list.tableData = [];
+}
+// 搜索
+function handleFilter() {
+  pageData.pageConfiger.pageCurrent = 1;
+  _ggetSelectDeckList();
+}
+//重置
+function reset() {
+  listQuery.value = {
+    ssbmdm: "", jzMc: ""
+  }
+  handleFilter()
+}
+const drawAline = (val) => {
+  emitter.emit("deletePointArea", "bxd");
+  emitter.emit("removeAll", "bxx");
+  emitter.emit("openZdXl", { show: false });
+  console.log(val);
+  let bxd = []
+  let coords = [{ coords: [val.bxx.zb], text: val.bxx.bxxMc }]
+  let zbd = val.bxx.bxds.map(item => {
+    return {
+      jd: item.jd,
+      wd: item.wd,
+      bxdMc:item.bxdMc,
+      icon: item.sfdk == '0' ? require("@/assets/point/zsdw.png") : require("@/assets/point/ydk.png")
+    }
+  })
+  bxd = [...bxd, ...zbd]
+  emitter.emit("echoLine", { coords, width: 4, flag: "bxx", type: 'dash', isclear: true, color: '#ff0000' });
+  handlePoint(bxd, "", "bxd", 0.6, '#FF0000');
+};
+// 处理撒点
+function handlePoint(arr, icon, flag, scale, fontColor) {
+  let list = arr.filter((item) => {
+    item.identification = flag;
+    return item.jd && item.wd;
+  });
+  if (list.length > 0) emitter.emit("addPointArea", { coords: list, icon: icon, flag: flag, scale, fontColor,showTitle:true });
+}
+const bigBox = ref() // 表格高度计算
+const searchBox = ref()
+const tabHeightFn = () => {
+  pageData.tableHeight = bigBox.value.offsetHeight - searchBox.value.offsetHeight - 320;
+  window.onresize = function () {
+    tabHeightFn();
+  };
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+
+.bigBox {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 99;
+
+  .container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    width: 80%;
+    height: 80vh;
+    background: #052342;
+    padding: 0 20px;
+
+    .header {
+      width: 100%;
+      height: 60px;
+      line-height: 60px;
+
+      .title {
+        float: left;
+        font-size: 16px;
+      }
+
+      .close {
+        float: right;
+        font-size: 16px;
+        cursor: pointer;
+      }
+    }
+
+    .datalist {
+      height: 60vh;
+    }
+
+    .fenye {
+      height: 60px;
+    }
+  }
+}
+
+.el-form {
+  display: flex;
+}
+
+.serchBtn {
+  margin-left: 20px;
+}
+
+
+
+::v-deep .el-table {
+  background: #052342;
+  --el-table-border-color: #25343f;
+  color: #ffffff;
+  --el-table-row-hover-bg-color: #063257 !important;
+  // --el-table-row-hover-bg-color: #737373;
+}
+
+::v-deep .el-table__inner-wrapper {
+  background: #052342;
+}
+
+::v-deep .el-table__inner-wrapper:hover {
+  background: #052342 !important;
+}
+
+::v-deep .el-table th.el-table__cell {
+  background: #052342 !important;
+  color: #ffffff;
+}
+
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
+  background: #005fbf37;
+}
+
+::v-deep .el-table td.el-table__cell {
+  color: #ffffff !important;
+  background: #052342;
+}
+
+::v-deep .el-form-item__label {
+  color: #ffffff;
+}
+
+::v-deep .el-table__body tr.current-row>td.el-table__cell {
+  background: #052342;
+}
+::v-deep .el-input__inner {
+  color: #fff;
+}
+</style>

src/views/homeMy/components/dialog/shzyInfo.vue

@@ -0,0 +1,111 @@
+<!--
+ * @Author: your name
+ * @Date: 2022-09-20 10:22:51
+ * @LastEditTime: 2022-09-22 10:51:44
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ *
+-->
+<template>
+  <div class="dialogBox">
+    <div class="title">
+      <span class="mc">社会资源</span>
+      <span @click="close" class="close">
+        <el-icon><Close /></el-icon>
+      </span>
+    </div>
+    <div class="listBox noScollLine">
+      <div v-for="(item, index) in props.data" :key="index">
+        <div class="infoBox">
+          <div class="content">单位名称：{{ item.dwmc }}</div>
+          <div class="content">从业人员：
+            <div v-for="it in item.cyry" :key="it" class="peoBox">
+              <span>{{ it.xm }}</span>
+              <span>{{ it.xb == 1 ? '男' :'女' }}</span>
+              <span>{{ it.lxdh }}</span>
+              <span>{{ it.sfzh }}</span>
+            </div>
+          </div>
+          <div class="content">所属部门：{{ item.ssbm }}</div>
+          <div class="address">
+            <img src="@/assets/images/dingwei.png" />
+            <span>{{ item.dz }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineProps } from "vue";
+// 左右折叠状态
+import emitter from "@/utils/eventBus.js";
+const props = defineProps({
+  data: {
+    type: Array,
+    default: []
+  }
+});
+
+//关闭弹窗
+function close() {
+  emitter.emit("showShzy", false);
+}
+</script>
+<style lang="scss" scoped>
+@import "@/assets/css/largeScreen.scss";
+@import "@/assets/css/homeScreen.scss";
+.dialogBox {
+  .listBox {
+    padding: 4px 10px;
+    box-sizing: border-box;
+    max-height: 80vh;
+    overflow: hidden;
+    overflow-y: auto;
+    .infoBox {
+      padding: 4px 10px;
+      border: 1px solid #4190ad;
+      margin-bottom: 5px;
+      border-radius: 4px;
+      .other {
+        margin: 5 10px;
+        color: #779dcd;
+      }
+    }
+    .address {
+      margin-top: 10px;
+      border-top: 1px solid #18617e;
+      padding-top: 6px;
+      img {
+        margin-right: 10px;
+      }
+    }
+  }
+}
+.peoBox{
+  display: flex;
+  justify-content: space-between;
+  span{
+    display: inline-block;
+    width: 15%;
+    color: rgb(173 203 231);;
+    &:nth-child(1){
+      text-align: justify;
+      text-align-last: justify;
+    }
+    &:nth-child(2){
+      width: 10%;
+      text-align: center;
+    }
+    &:nth-child(3){
+      width: 30%;
+    }
+    &:nth-child(4){
+      width: 45%;
+    }
+  }
+}
+
+
+</style>

src/views/homeMy/components/dialog/spxlDialog.vue

@@ -0,0 +1,123 @@
+<!--
+ * @Author: your name
+ * @Date: 2024-01-09 16:56:12
+ * @LastEditTime: 2024-01-09 17:11:04
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mosty-nc-zhpcs-web\src\views\normalization\componentNc\cards\spxl\component\spxlDialog.vue
+-->
+<template>
+  <div class="boxPlay flex pt2 2 pl2 pr2" :class="props.fps > 2 ? 'flex-warp' : ''">
+    <div class="playCnt">
+      <div class="close_box pointer" @click="handelClose">
+        <el-icon :size="20" color="#fff">
+          <Close></Close>
+        </el-icon>
+      </div>
+      <ul class="video_box flex just-between flex-warp" v-loading="loading">
+        <li class="video_item" v-for="item in props.list" :key="item" :class="changeHeight(props.list)">
+          <VideoPay :sbbh="item.sxtid" v-if="item.sxtid"> </VideoPay>
+          <!-- <img style="width: 100%; height: 100%" :src="require('@/assets/images/default_video.png')" v-else/> -->
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import VideoPay from "@/components/wsVideoSenior/wsIframe/index"; //ws播放高阶
+import emitter from "@/utils/eventBus.js";
+import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
+import {
+  onMounted,
+  defineProps,
+  defineEmits,
+  ref,
+  onUnmounted,
+  watch,
+  onBeforeUnmount
+} from "vue";
+const props = defineProps({
+  list: Array,
+  fps: Number,
+  modelValue: Boolean
+});
+const emits = defineEmits(["update:modelValue"]);
+function handelClose() {
+  emits("update:modelValue", false);
+}
+// 改变高度
+const changeHeight = (val) => {
+  let len = val.length;
+  switch (len) {
+    case 1:
+      return 'oneItem';
+    case 2:
+      return 'twoItem';
+    case 3:
+    case 4:
+      return 'moreItem';
+  }
+}
+onMounted(() => { });
+</script>
+
+<style lang="scss" scoped>
+.boxPlay {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: calc(33% - 35px);
+  width: 1200px;
+  height: 780px;
+  top: 100px;
+  z-index: 11;
+  background: #000;
+
+  .playCnt {
+    width: 100%;
+    height: 100%;
+    // background: url("~@/assets/images/langVideo.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .close_box {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    color: white;
+  }
+
+  .video_box {
+    width: 100%;
+    margin-top: 5px;
+    height: calc(100% - 42px);
+
+    .video_item {
+      height: 100%;
+      width: 100%;
+      border: 1px solid #03438b;
+    }
+
+    .oneItem {
+      height: 100%;
+      width: 100%;
+    }
+
+    .oneItem {
+      height: 100%;
+      width: 100%;
+    }
+
+    .twoItem {
+      height: 100%;
+      width: 49.5%;
+    }
+
+    .moreItem {
+      height: calc((100% / 2) - 6px);
+      width: 49.5%;
+    }
+  }
+}
+</style>

src/views/homeMy/components/dialog/warningInfo.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="dialogBox">
+    <div class="title">
+      <span class="mc">预警信息</span
+      ><span @click="close" class="close">
+        <el-icon><Close /></el-icon>
+      </span>
+    </div>
+    <div class="containerBox">
+      <div v-for="(item, index) in props.data" :key="index">
+        <div class="infoBox">
+          <YjItem :data="item" :isDetail="true" />
+        </div>
+        <div class="btnBox">
+          <button class="dp-default small" @click="policeGroupShowFn(item)">
+            推荐处警巡组
+          </button>
+          <button class="dp-default small" @click="videoShowSs(item)">
+            实时视频
+          </button>
+          <button class="dp-default small" @click="XZBtnShowFn(item)">
+            指定处置
+          </button>
+          <button class="dp-default small" @click="warningListShowYjgj(item)">
+            预警轨迹
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  getCurrentInstance,
+  onMounted,
+  onBeforeUpdate,
+  defineProps,
+  defineEmits
+} from "vue";
+import YjItem from "@/views/homeMy/components/yjItem.vue";
+import people from "@/assets/images/peo.png";
+import car from "@/assets/images/car.png";
+import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import emitter from "@/utils/eventBus.js";
+import { getVideoById, getVideoById2 } from "@/api/dpApi/video.js";
+const props = defineProps({
+  data: Array
+});
+const emits = defineEmits(["showYjxq"]);
+const router = useRouter();
+
+onMounted(() => {});
+
+//关闭弹窗
+function close() {
+  emitter.emit("showYjxq", false);
+  emitter.emit("deletePointArea", "yj");
+}
+// 显示周边巡组
+function policeGroupShowFn(item) {
+  if (item.jd && item.wd) {
+    emitter.emit("showZbxz", item);
+  } else {
+    ElMessage({ message: "暂无巡组信息", type: "warning" });
+  }
+}
+//显示预警轨迹
+function warningListShowYjgj(item) {
+  emitter.emit("showCcyj", item);
+}
+// 转为指令
+function XZBtnShowFn(item) {
+  let obj = { type: "yj", data: item };
+  emitter.emit("showXZBtn", obj);
+}
+// 显示视频回放
+function videoShowFn() {
+  ElMessage({
+    message: "暂无视频信息",
+    type: "warning"
+  });
+}
+//显示实时视频
+function videoShowSs(item) {
+  let id = item.yjGzyid;
+  getVideoById2(id).then((res) => {
+    if (res) {
+      let params = {
+        ...item,
+        splitNum: 1,
+        sbbh: res.sbbh
+      };
+      emitter.emit("openGzyVideo", params);
+    } else {
+      videoShowFn();
+    }
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/largeScreen.scss";
+@import "@/assets/css/homeScreen.scss";
+.dialogBox {
+  padding: 0 0 10px 0;
+  box-sizing: border-box;
+  .title {
+    border-bottom: 1px solid #275288;
+    margin-bottom: 6px;
+    .mc {
+      margin-left: 10px;
+    }
+  }
+  .containerBox {
+    max-height: 696px;
+    overflow: hidden;
+    overflow-y: auto;
+    padding: 4px 10px;
+    box-sizing: border-box;
+    .infoBox {
+      position: relative;
+      border: none;
+      padding: 10px 0;
+    }
+    .btnBox {
+      text-align: center;
+      button.dp-default.small {
+        margin: 0 1px;
+      }
+    }
+  }
+}
+</style>

src/views/homeMy/components/dialog/warningList.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="dialogBox" v-loading="loading">
+    <div class="title">
+      <span class="mc">{{ title }}</span>
+      <span class="close" @click="close">×</span>
+    </div>
+    <ul class="warningList" ref="gjyjList">
+      <li v-for="item in warningList" :key="item.id">
+        <YjItem :data="item"/>
+      </li>
+      <el-empty
+        description="没有数据"
+        :image-size="0.1"
+        v-if="!loading && warningList.length <= 0"
+      />
+    </ul>
+  </div>
+</template>
+<script setup>
+import YjItem from "@/views/homeMy/components/yjItem.vue";
+import { getSelectTrack } from "@/api/dpApi/zzzh.js";
+import { getSelectVigilantList } from "@/api/dpApi/home.js";
+import { ElMessage } from "element-plus";
+import {
+  ref,
+  reactive,
+  onMounted,
+  getCurrentInstance,
+  onUnmounted,
+  defineEmits,
+  defineProps,
+  watch
+} from "vue";
+import people from "@/assets/images/peo.png";
+import car from "@/assets/images/car.png";
+import emitter from "@/utils/eventBus.js";
+const { proxy } = getCurrentInstance();
+const { D_BZ_YJLX } = proxy.$dict("D_BZ_YJLX");
+const warningList = ref([]); //预警列表数据
+const pageSize = ref(4);
+const pageCurrent = ref(1);
+const pageTotal = ref(0);
+const yjInfo = ref(null); //预警信息
+const gjyjList = ref(null); //预警列表数据
+const loading = ref(false);
+//参数传递
+const props = defineProps({
+  //某条预警详情
+  info: {
+    type:Object,
+    default:{}
+  },
+  //标题数据
+  title: String
+});
+const emit = defineEmits(["close"]);
+onMounted(() => {
+  yjInfo.value = props.info;
+  _getSelectTrack(props.info);
+  scroll();
+});
+// 监听视频地址变化
+watch(
+  () => props.info,
+  (val) => {
+    pageCurrent.value = 1;
+    yjInfo.value = val;
+    _getSelectTrack(val);
+  },
+  { immediate: true, deep: true }
+);
+//关闭
+function close() {
+  emit("close", false);
+}
+
+//获取轨迹预警列表
+function _getSelectTrack(yjInfo) {
+  loading.value = true;
+  let data = {
+    pageSize: pageSize.value,
+    pageCurrent: pageCurrent.value,
+    yjRyxm: yjInfo.yjRyxm ? yjInfo.yjRyxm : "",
+    yjRysfzh: yjInfo.yjRysfzh ? yjInfo.yjRysfzh : "",
+    yjHplx: yjInfo.yjHplx ? yjInfo.yjHplx : "",
+    yjClcph: yjInfo.yjClcph ? yjInfo.yjClcph : ""
+  };
+  if (props.title == "轨迹预警") {
+    getSelectTrack(data).then((res) => {
+      loading.value = false;
+      if (pageCurrent.value == 1) {
+        warningList.value = res.records ? res.records : [];
+      } else {
+        let arr = res.records ? res.records : [];
+        warningList.value = warningList.value.concat(arr);
+      }
+      pageTotal.value = res.total;
+    });
+  } else {
+    //周边预警
+    data.radius = 300;
+    data.jd = props.info.jd;
+    data.wd = props.info.wd;
+    data.pageNum = pageCurrent.value;
+    getSelectVigilantList(data).then((res) => {
+      loading.value = false;
+      if (pageCurrent.value == 1) {
+        warningList.value = res.records ? res.records : [];
+      } else {
+        let arr = res.records ? res.records : [];
+        warningList.value = warningList.value.concat(arr);
+      }
+      pageTotal.value = res.total;
+    });
+  }
+}
+//触底加载
+function scroll() {
+  let scrollTargetBox = gjyjList.value;
+  scrollTargetBox.onscroll = (e) => {
+    var scrollHeight = scrollTargetBox.scrollHeight; //251
+    var scrollTop = scrollTargetBox.scrollTop; //0-18
+    var clientHeight = scrollTargetBox.clientHeight; //233
+    if (scrollHeight - clientHeight == scrollTop) {
+      //滚动条滚到最底部
+      if (warningList.value.length < pageTotal.value) {
+        pageCurrent.value++;
+        _getSelectTrack(yjInfo.value);
+      }
+    }
+  };
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+.dialogBox {
+  ul.warningList{
+    height: calc(100vh - 198px);
+    overflow: hidden;
+    overflow-y: auto;
+    padding: 7px 10px;
+    box-sizing: border-box;
+    .photo {
+      width: 60px;
+      height: 80px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+//加载时 取消背景
+::v-deep .el-loading-mask {
+  background-color: transparent !important;
+}
+
+</style>

src/views/homeMy/components/dialog/xcsp.vue

@@ -0,0 +1,139 @@
+<template>
+    <div class="groupInfo">
+      <div class="inaInfo" v-for="(item, index) in dataList" :key="index">
+        <div class="inb">
+          <div>
+            <span class="spa">设备名称 </span>
+            <span class="address">：{{ item.sbmc }}</span>
+          </div>
+          <div>
+            <span class="spa">设备编号 </span>
+            <span class="address">：{{ item.sbbh }}</span>
+          </div>
+          <div>
+            <span class="spa">地址 </span>
+            <span class="address">：{{ item.dzmc }}</span>
+          </div>
+          <div class="title-top">
+            <div></div>
+            <div>
+              <span class="small" v-if="!item.isPlay" @click="handlePlay(item)"> 播放 </span>
+              <span class="small" v-if="item.isPlay" @click="closePlay(item.id)" > 关闭 </span>
+            </div>
+          </div>
+          <div class="videoBox" v-if="item.isPlay">
+            <VideoPay key="item.id" :vId="'sb_'+index" :sbbh="item.sbbh"></VideoPay>
+          </div>
+        </div>
+      </div>
+      <el-empty v-if="dataList.length==0" :image-size="90" description="暂无数据"></el-empty>
+    </div>
+</template>
+<script setup>
+// import VideoPay from "@/components/wsVideoSenior/wsPlayOne/index";  //ws播放高阶
+// import VideoPay from "@/components/videoOne/index"; //ws播放
+import VideoPay from "@/components/wsVideoSenior/wsIframe/index"; //ifr
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import { onMounted, ref, defineProps, watch } from "vue";
+import emitter from "@/utils/eventBus.js";
+const props = defineProps({
+  data: Array
+});
+const dataList = ref([]);
+watch(() => props.data,(val) => {
+  if (!val) return false;
+  getInfo(val[0].id);
+},{ immediate: true ,deep: true });
+
+// 获取基本数据
+function getInfo(jczid) {
+  // 01.远端感知 02.视频天网
+  let params = { dyLx:'02', jczid };
+  qcckPost(params, "/mosty-jmxf/tbYsSxt/getJczSxt").then((res) => {
+    dataList.value = res ? res : [];
+  });
+}
+
+// 处理播放
+function handlePlay(item) {
+  if (!item.sbbh) return proxy.$message({ type: "info", message: "暂无视频" });
+  SPPUC.rdCard(item.sbbh, 1, ["60%", "40%"]);
+}
+
+// 关闭播放
+function closePlay(id) {
+  dataList.list.forEach((item) => {
+    if (item.id == id) item.isPlay = false;
+  });
+}
+
+</script>>
+<style lang="scss" scoped >
+.groupInfo {
+  width: 100%;
+  height: 100%;
+  border-radius: 3px;
+  position: relative;
+  overflow: hidden;
+  overflow-y: auto;
+  .inaInfo {
+    box-shadow: inset 0 0 10px #01c3ed;
+    padding: 8px 14px;
+    box-sizing: border-box;
+    margin-bottom: 14px;
+    .inb {
+      margin-top: 2px;
+      font-size: 14px;
+      .spa {
+        color: #8ea6bf;
+        display: inline-block;
+        text-align-last: justify;
+      }
+      .address {
+        line-height: 19px;
+        flex: 1;
+        color: #01c3fd;
+        margin-left: 4px;
+        .tagItem {
+          display: inline;
+        }
+      }
+    }
+    .title-top {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 10px;
+      .gzyzmc {
+        font-size: 18px;
+      }
+    }
+  }
+}
+.borderless {
+  border-top: 1px dashed;
+  margin-top: 15px !important;
+  padding-top: 10px;
+  box-sizing: border-box;
+}
+::v-deep .el-empty{
+  padding:25px 0;
+}
+.videoBox{
+    margin: 0 10px;
+    border: 1px solid#2b4462;
+    background: #000;
+    height: 200px;
+    margin-bottom: 8px;
+    >img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .small{
+    padding: 2px 6px;
+    box-sizing: border-box;
+    border: 1px solid rgb(32 ,123 ,175);
+    border-radius: 4px;
+    cursor: pointer;
+  }
+</style>

src/views/homeMy/components/dialog/xiafaZl.vue

@@ -0,0 +1,396 @@
+<template>
+  <!--下发指令 -->
+  <MinDialog  @handleIdentity="close"  :show="showAddEvent" :butList="['提交']"  :showContent="true"  :showbut="false"  title="下发指令">
+    <div class="form_box">
+      <el-form label-width="100px" :model="formInfo" :inline="true" label-position="top" :rules="rules" ref="elform">
+        <div @click="visibleJjr = true" class="btnn">
+          <el-select v-model="vacation" placeholder="请选择节假日">
+            <el-option v-for="(it,idx) in vacationList" :key="idx" :label="it.jjrmc" :value="it.id"/>
+          </el-select>
+          <el-button :disabled="vacation ? false : true" @click="visibleJjr = true" >节假日</el-button>
+        </div>
+
+        <el-form-item label="指令标题" style="width: 100%" prop="zlbt">
+          <el-input v-model="formInfo.zlbt" placeholder="请输入指令标题" clearable/>
+        </el-form-item>
+        <el-form-item label="指令类型" style="width: 100%" prop="zllx">
+          <el-select style="width: 100%" v-model="formInfo.zllx" placeholder="请选择指令类型">
+            <el-option v-for="dict in D_BZ_RGZLLX" :key="dict.value + 'zllx'" :label="dict.label" :value="dict.value"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="指令等级" style="width: 100%" prop="zldj">
+          <el-select style="width: 100%" v-model="formInfo.zldj" placeholder="请选择指令等级">
+            <el-option v-for="dict in D_BZ_TYJB" :key="dict.value + 'zldj'" :label="dict.label" :value="dict.value"/>
+          </el-select>
+        </el-form-item>
+         <el-form-item label="指令下发类型" style="width: 100%" prop="zlxflx">
+          <el-select style="width: 100%" v-model="formInfo.zlxflx" placeholder="请选择指令类型">
+            <el-option v-for="dict in D_BZ_ZLXFLX" :key="dict.value" :label="dict.label" :value="dict.value"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="指令接收对象" style="width: 100%" prop="zljsdx">
+          <el-select @change="formInfo.zxrDtoList = []" style="width: 100%" v-model="formInfo.zljsdx" placeholder="请选择指令接收对象">
+            <el-option v-for="dict in D_BZ_ZLJSDX" :key="dict.value + 'zljsdx'" :label="dict.label" :value="dict.value"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="事件坐标" style="width: 100%" prop="jwd">
+          <el-input v-model="formInfo.jwd" placeholder="请选择坐标" clearable style="width: 80%"/>
+          <el-button type="info" @click="selectLocation">选点</el-button>
+        </el-form-item>
+
+        <el-form-item label="指令内容" style="width: 100%" prop="zlnr">
+          <el-input v-model="formInfo.zlnr" placeholder="请输入指令内容" clearable/>
+        </el-form-item>
+
+        <el-form-item label="附件上传" style="width: 100%" prop="fjmc">
+          <el-input v-model="formInfo.fjmc" placeholder="请选择上传文件" style="width: 80%"/>
+          <el-upload :limit="1" action="/mosty-base/minio/image/upload/id" :on-change="upImgFile" :on-success="upImg" :show-file-list="false">
+            <el-button type="primary" style="padding: 0 14px">上传</el-button>
+          </el-upload>
+        </el-form-item>
+        <el-form-item v-if="formInfo.zljsdx === '01'" label="指令接收者" style="width: 100%" prop="zlnr">
+          <div @click.stop="visible = true" :class="formInfo.zxrDtoList.length === 0 ? 'ipt ts' : 'ipt'">
+            <el-tag v-for="tag in formInfo.zxrDtoList" :key="tag.id" class="mx-1" closable :type="tag.type" @close="handleClose(tag)">
+              {{ tag.jsrmc }}
+            </el-tag>
+          </div>
+        </el-form-item>
+        <el-form-item v-if="formInfo.zljsdx === '02'" label="指令接收部门" style="width: 100%" prop="zlnr">
+          <MOSTY.Department width="100%" clearable multiple filterable v-model="formInfo.zxrDtoList"/>
+        </el-form-item>
+        <div class="mapQx" v-if="formInfo.zljsdx === '03'">
+          <span>地图圈选 - 圈选人员</span>
+          <el-button type="primary" style="padding: 0 14px" @click="selectLoop">空间查询</el-button>
+        </div>
+        <div class="tagbox" placeholder="请选择人员" @click.stop="visibleJz = true"  v-if="formInfo.zljsdx === '03'">
+          <el-tag :key="tag" v-for="tag in formInfo.zxrDtoList" closable :disabled-transitions="false" @close="handClose(tag)">
+            {{ tag.jzMc ? tag.jzMc : tag.fzrXm + '巡组' }}
+          </el-tag>
+        </div>
+      </el-form>
+      <div style="text-align:right;">
+        <el-button type="primary" @click="submit">发送</el-button>
+      </div>
+    </div>
+  </MinDialog>
+  <MjLoad v-model="visible" @choosedUsers="hanlderChooseMj" />
+  <XzLoad v-model="visibleJz" :roleId="roleIdJz" :Single='false' @choosedUsers="hanlderChooseJZ" />
+  <JjrMb v-model="visibleJjr" :Single="true" @choosedModel="choosedModel" :jjrId="vacation" />
+</template>
+
+<script setup>
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import { ElMessage } from "element-plus";
+import MinDialog from "@/views/homeMy/components/dialog/minDialog.vue";
+import MjLoad from "@/components/MyComponents/ChooseJz/MjLoad.vue";
+import XzLoad from "@/components/MyComponents/ChooseJz/xzLoad.vue";
+import emitter from "@/utils/eventBus.js";
+import JjrMb from './JjrMb.vue'
+import * as MOSTY from "@/components/MyComponents/index";
+import { reactive, ref, onMounted, getCurrentInstance, onUnmounted } from "vue";
+import { getXfbbList, addZl } from "@/api/situationPresentation/zlXf.js";
+import { getSelectDeckList } from "@/api/dpApi/home.js";
+const { proxy } = getCurrentInstance();
+const {  D_BZ_RGZLLX,D_BZ_ZLXFLX, D_BZ_ZLJSDX, D_BZ_TYJB } = proxy.$dict("D_BZ_RGZLLX","D_BZ_ZLXFLX","D_BZ_ZLJSDX","D_BZ_TYJB");
+const visible = ref(false); //民警弹窗
+const visibleJjr = ref(false); //节假日弹窗
+
+const visibleJz = ref(false); //警组弹窗
+const roleIdJz = ref([]) //警组的选中数据
+
+const vacation = ref('') //选中的节假日
+const vacationList = ref([]) //节假日数据
+
+//巡组搜索参数
+const xzQuery = reactive({
+  xfzt: "0,1,2",
+  pageCurrent: 1,
+  pageSize: 20,
+  jzMc: "",
+  xfzt: "0,1,2"
+});
+//巡组数据
+const showAddEvent = ref(false);
+const formInfo = ref({
+  zxrDtoList: [],
+  zlfsdd: "",
+  zlbt:'抓捕疑似在逃人员',
+  zllx:'05',
+  zldj:'10',
+  zljsdx:'03',
+  zlnr:'抓捕疑似在逃人员',
+});
+const elform = ref(null);
+const rules = reactive({
+  zlbt: [{ required: true, message: "请填写指令标题" }],
+  zllx: [{ required: true, message: "请选择指令类型" }],
+  zlly: [{ required: true, message: "请选择指令来源" }],
+  zldj: [{ required: true, message: "请选择指令等级" }],
+  zljsdx: [{ required: true, message: "请选择指令接收对象" }],
+  jwd: [{ required: true, message: "请选择点位" }]
+});
+const fjmc = ref("");
+onMounted(() => {
+  getListData()
+  emitter.on("showZlxf", (res) => {
+    showAddEvent.value = true;
+    formInfo.value.zxrDtoList = []
+    roleIdJz.value = []
+  });
+  emitter.on("closeAllDialog", (res) => {
+    showAddEvent.value = false;
+  });
+   emitter.on("coordString", (res) => {
+    console.log(res,'======99')
+    if(res.type == 'point' && res.flag == 'PIOZL'){
+      formInfo.value.jwd = res.coord[0] + "," + res.coord[1];
+      formInfo.value.jd = res.coord[0];
+      formInfo.value.wd = res.coord[1];
+      let data = { jd: res.coord[0], wd: res.coord[1] };
+      let img = require("@/assets/point/jq.png");
+      emitter.emit("deletePointArea", "jq");
+      emitter.emit("addPointArea", { coords: [data], icon: img, flag: "jq"});
+    }
+    if(res.type == 'circle'){
+      let data = { pageCurrent: 1, pageSize: 20, radius: Number(res.data.radius)*1000, jd: res.data.centerPoint[0], wd: res.data.centerPoint[1] };
+      formInfo.value.jwd = res.data.centerPoint[0] + "," + res.data.centerPoint[1];
+      formInfo.value.jd = res.data.centerPoint[0];
+      formInfo.value.wd = res.data.centerPoint[1];
+      if(showAddEvent.value) circleData(data);
+    }
+  });
+
+});
+onUnmounted(() => {
+  emitter.off("closeAllDialog");
+  emitter.off("coordString");
+  emitter.off("showZlxf");
+});
+
+// 删除指令接收者
+function handleClose(tag) {
+  formInfo.value.zxrDtoList.splice(formInfo.value.zxrDtoList.indexOf(tag), 1);
+}
+// 删除巡组
+function handClose(tag) {
+  formInfo.value.zxrDtoList.splice(formInfo.value.zxrDtoList.indexOf(tag), 1);
+  roleIdJz.value = formInfo.value.zxrDtoList.map((item, index) => {
+    return item.id;
+  });
+}
+
+//选择民警
+function hanlderChooseMj(arr) {
+  formInfo.value.zxrDtoList = arr.map((item) => {
+    return { jsrid: item.ryid, jsrmc: item.xm, jsrsfzh: item.sfzh, jsrlxdh: item.lxdh, jsrlx: item.fl, xm: item.xm };
+  });
+}
+
+//选择警组
+function hanlderChooseJZ(arr) {
+  formInfo.value.zxrDtoList = arr;
+  roleIdJz.value = arr.map((item, index) => {
+    return item.id;
+  });
+}
+
+// 選擇節假日
+const choosedModel = (val) =>{
+  if(!val) return;
+  formInfo.value.zlbt = val[0].zlbt;
+  formInfo.value.zllx = val[0].zllx;
+  formInfo.value.zldj = val[0].zldj;
+  formInfo.value.zlnr = val[0].zlnr;
+  if(val[0].jd && val[0].wd){
+    formInfo.value.jd = val[0].jd;
+    formInfo.value.wd = val[0].wd;
+    formInfo.value.jwd = val[0].jd+','+val[0].wd;
+    let img = require("@/assets/point/jq.png");
+    emitter.emit("deletePointArea", "jq");
+    emitter.emit("addPointArea", { coords: [data], icon: img, flag: "jq"});
+  }
+}
+
+//关闭弹窗
+function close() {
+  showAddEvent.value = false;
+  formInfo.value = { zxrDtoList: [] };
+  emitter.emit("deletePointArea", "jq");
+  emitter.emit("deletePoint", "jqMap");
+  emitter.emit("deletePoint", "yjMap");
+  emitter.emit("deletePoint", "sp");
+  emitter.emit("deletePoint", "kk");
+  emitter.emit("removePlot", "quanXuan");
+  emitter.emit("deletePointArea", "centerpoint");
+}
+//下发指令
+function submit() {
+  elform.value.validate((valid) => {
+    const data = {
+      zllx: "06",
+      fjId: formInfo.value.fjId,
+      jd: formInfo.value.jd,
+      wd: formInfo.value.wd,
+      zlbt: formInfo.value.zlbt,
+      zldj: formInfo.value.zldj,
+      zljsdx: formInfo.value.zljsdx,
+      zlnr: formInfo.value.zlnr,
+      zlfsdd:formInfo.value.zlfsdd,
+      zlxflx:formInfo.value.zlxflx,
+    };
+    // 指令接收者 - 人员
+    if (data.zljsdx === "01") {
+      data.zxrDtoList = formInfo.value.zxrDtoList.map((item) => {
+        return { zxrLx: "01", zxrDh: item.jsrlxdh, zxrId: item.jsrid, zxrJllx: item.jsrlx, zxrSfz: item.jsrsfzh, zxrXm: item.xm };
+      });
+    }
+    if (data.zljsdx === "02") {
+      // 指令接收 - 部门
+      data.zxrDtoList = formInfo.value.zxrDtoList.map((item) => {
+        return { ssbmdm: item, zxrLx: "02" };
+      });
+    }
+    // 指令接 - 巡组
+    if (data.zljsdx === "03") {
+      data.zxrDtoList = formInfo.value.zxrDtoList.map((item) => {
+        return {
+          zxrXzid: item.id,
+          zxrLx: "03",
+          zxrXzmc: item.jzMc ? item.jzMc : item.fzrXm + '巡组'
+        };
+      });
+    }
+    addZl(data).then(() => {
+      close();
+      proxy.$message({ type: "success", message: "指令下发成功" });
+    });
+  });
+}
+// //选择点位
+function selectLocation() {
+  emitter.emit("removePlot", "PIOZL");
+  emitter.emit("drawShape", {flag:"PIOZL" , type:'point' });
+}
+// 上传附件
+function upImgFile(row) {
+  fjmc.value = row.name;
+}
+// 上传图片
+function upImg(row) {
+  formInfo.value.fjId = row.data;
+  formInfo.value.fjmc = fjmc.value;
+}
+
+
+//地图圈选
+function selectLoop() {
+  emitter.emit("deletePointArea", "jqMap");
+  emitter.emit("deletePointArea", "yjMap");
+  emitter.emit("deletePointArea", "sp");
+  emitter.emit("deletePointArea", "kk");
+  emitter.emit("deletePointArea", "jq");
+  formInfo.value.zxrDtoList = []
+  emitter.emit("deletePointArea", "centerpoint");
+  emitter.emit("drawShape", { flag: "quanXuan" ,type:'circle',isclear:true});
+}
+//获取圈选数据
+function circleData(data) {
+  getSelectDeckList(data).then((res) => {
+    if (res.records.length > 0) {
+      formInfo.value.zxrDtoList = res.records;;
+      roleIdJz.value = res.records.map((item, index) => {
+        return item.id;
+      });
+    } else {
+      ElMessage({ message: "暂无巡组信息", type: "warning" });
+    }
+  });
+}
+
+// 获取节假日数据
+const getListData = () => {
+  let params = {pageCurrent: 1, pageSize: 200,};
+  qcckPost(params, "/mosty-jmxf/tbQwJjr/getPageList").then((res) => {
+    vacationList.value = res?.records;
+  })
+};
+
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+
+.form_box {
+  padding: 10px;
+  max-height: 84vh;
+  overflow-y: auto;
+}
+::v-deep .el-form-item__content {
+  flex-wrap: nowrap;
+}
+.ipt {
+  min-height: 32px;
+  border: 1px solid #224ab5;
+  border-radius: 4px;
+  box-sizing: border-box;
+  padding: 0 12px;
+  cursor: pointer;
+  width: 100%;
+  position: relative;
+  .el-tag {
+    margin-right: 12px;
+    background: #434449;
+  }
+}
+.tagbox {
+  min-height: 32px;
+  border: 1px solid #409eff;
+  border-radius: 4px;
+  box-sizing: border-box;
+  padding: 4px 12px;
+  cursor: pointer;
+  width: 100%;
+  position: relative;
+  margin-bottom: 4px;
+  max-height: 100px;
+  overflow: hidden;
+  overflow: auto;
+}
+.ipt:hover {
+  border-color: rgb(62, 127, 247);
+}
+.ts::after {
+  content: "请选择指令接收对象";
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 12px;
+  line-height: 32px;
+  bottom: 0;
+  color: rgb(177, 177, 177);
+}
+.mapQx{
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 13px;
+}
+::v-deep .el-tag--default.is-closable{
+  margin-bottom: 4px;
+  margin-right: 4px;
+}
+::v-deep .el-form--inline.el-form--label-top{
+  max-height: 78vh;
+  overflow: hidden;
+  overflow-y: auto;
+}
+::v-deep .el-cascader__search-input{
+  background: transparent;
+}
+.btnn{
+  width: 100%;
+  height: 34px;
+  margin-bottom: 6px;
+}
+</style>

src/views/homeMy/components/dialog/zlxfList.vue

@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <el-dialog title="群防下发短信详情"  width="1400px"  v-model="isShowZldetail" @close="closed" >
+       <!-- 搜索 -->
+      <div ref="searchBox">
+        <Search :searchArr="searchConfiger" @submit="onSearch" />
+      </div>
+      <!-- 表格 -->
+      <div class="tabBoxa">
+        <MyTable
+          :tableData="pageData.tableData"
+          :tableColumn="pageData.tableColumn"
+          :tableHeight="pageData.tableHeight"
+          :key="pageData.keyCount"
+          :tableConfiger="pageData.tableConfiger"
+          :controlsWidth="pageData.controlsWidth"
+          @chooseData="chooseData"
+        >
+          <template #dwglList="{ row }">
+            <span v-for="(it,idx) in row.dwglList" :key="idx">{{it.dwmc}} <span v-if="row.dwglList.length - 1 != idx">、</span> </span>
+          </template>
+          <template #ryList="{ row }">
+            <span v-for="(it,idx) in row.ryList" :key="it">{{it.xm}} <span v-if="row.ryList.length - 1 != idx">、</span> </span>
+          </template>
+        </MyTable>
+        <Pages
+          @changeNo="changeNo"
+          @changeSize="changeSize"
+          :tableHeight="pageData.tableHeight"
+          :pageConfiger="{
+            ...pageData.pageConfiger,
+            total: pageData.total
+          }"
+        ></Pages>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import emitter from "@/utils/eventBus.js";
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import Search from "@/components/aboutTable/Search.vue";
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import { reactive, ref, onMounted ,onUnmounted} from "vue";
+const isShowZldetail = ref(false) //指令下发详情
+const searchConfiger = reactive([
+  {
+    showType: "input",
+    prop: "nr",
+    placeholder: "请输入内容",
+    label: "内容",
+  },
+])
+
+const listQuery = ref({})
+const pageData = reactive({
+  tableData: [], //表格数据
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType:'null',
+    loading:false,
+    haveControls:false
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageNum: 1
+  }, //分页
+  controlsWidth: 210, //操作栏宽度
+  tableHeight:520,
+  tableColumn: [
+    {
+      label: "内容",
+      prop: "nr"
+    },
+    {
+      label: "下发人员",
+      prop: "xtCjr"
+    },
+    {
+      label: "下发部门",
+      prop: "ssbm"
+    },
+    {
+      label: "下发时间",
+      prop: "xfsj"
+    },
+    {
+      label: "短信签收人员",
+      prop: "ryList",
+      showSolt :true,
+    },
+    {
+      label: "巡访_单位管理",
+      prop: "dwglList",
+      showSolt :true,
+    },
+  ]
+});
+onMounted(() => {
+  emitter.on('showZlDetail',()=>{
+    isShowZldetail.value = true;
+  })
+  getData() //获取数据
+});
+
+onUnmounted(() => {
+  emitter.off('showZlDetail')
+});
+
+// 搜索
+const onSearch = (val)=>{
+  listQuery.value = {...listQuery.value,...val,}
+  getData()
+}
+
+// 获取数据
+const getData = ()=>{
+  let pramas = {
+    pageSize:pageData.pageConfiger.pageSize,
+    pageCurrent:pageData.pageConfiger.pageNum,
+    ...listQuery.value
+  }
+  pageData.tableConfiger.loading = true
+  qcckPost(pramas,'/mosty-jmxf/tbJcglXfDwgl/getDxList').then(res=>{
+    pageData.tableData = res.records || []
+    pageData.tableConfiger.loading = false
+    pageData.total = res.total
+  }).catch(()=> { pageData.tableConfiger.loading = false })
+}
+
+const changeNo = (val) =>{
+  pageData.pageConfiger.pageNum = val;
+  getData()
+}
+const changeSize = (val) =>{
+  pageData.pageConfiger.pageSize = val;
+  getData()
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+::v-deep .el-form--inline {
+  padding-left: 0 !important;
+}
+::v-deep .el-radio__label {
+  display: none;
+}
+
+::v-deep .el-table__body tr.current-row > td.el-table__cell {
+  background: #106fdc;
+}
+.tabBoxa{
+  height:60vh;
+  background:#061639;
+  padding: 4px 0px 4px 22px;
+  box-sizing: border-box;
+}
+</style>