'保安项目提交'

src/views/homeMy/components/addDialog.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <el-dialog title="模型预警"  @close="closed" width="1400px" :model-value="props.modelValue">
+      <el-form :model="listQuery" label-width="100px">
+        <el-form-item prop="mxlx" label="模型类型">
+          <el-select v-model="listQuery.mxlx">
+            <el-option
+              v-for="(dict, index) in gzyList"
+              :key="index"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="模型名称" prop="mxmc">
+          <el-input
+            v-model="listQuery.mxmc"
+            placeholder="请输入模型名称"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="感知源" prop="gzy">
+          <el-input v-model="listQuery.gzy" readonly clearable />
+        </el-form-item>
+        <el-form-item prop="yjsc" label="预警时长">
+          <div class="itemText">
+            <el-select v-model="listQuery.yjsc">
+              <el-option
+                v-for="(dict, index) in arrList"
+                :key="index"
+                :label="dict.label"
+                :value="dict.value"
+              ></el-option>
+            </el-select>
+            <el-input v-model="listQuery.sc" readonly clearable />
+            <div class="text">分钟</div>
+          </div>
+        </el-form-item>
+        <el-form-item prop="yjry" label="预警人员">
+          <div class="itemText">
+            <el-select v-model="listQuery.yjry">
+              <el-option
+                v-for="(dict, index) in arrList"
+                :key="index"
+                :label="dict.label"
+                :value="dict.value"
+              ></el-option>
+            </el-select>
+            <el-input v-model="listQuery.rysc" readonly clearable />
+            <div class="text">人</div>
+          </div>
+        </el-form-item>
+        <el-form-item prop="rylb" label="人员类别">
+          <el-select v-model="listQuery.rylb">
+            <el-option
+              v-for="(dict, index) in D_BZ_RYBQ"
+              :key="index"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <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 { ref, getCurrentInstance, defineProps,defineEmits } from "vue";
+const props = defineProps({
+  type: String,
+  modelValue:Boolean
+});
+const emits = defineEmits(["update:modelValue"]);
+const { proxy } = getCurrentInstance();
+const { D_BZ_RYBQ } = proxy.$dict("D_BZ_RYBQ");
+const listQuery = ref({
+  gzy: "所有",
+  mxlx: "01",
+  sc: 0,
+  rysc:0
+});
+const gzyList = ref([
+  { label: "感知源模型", value: "01" },
+  { label: "位置模型", value: "02" },
+  { label: "关注对象模型", value: "03" }
+]);
+const arrList = ref([
+  { label: "小于", value: "01" },
+  { label: "大于", value: "02" },
+  { label: "等于", value: "03" },
+  { label: "小于等于", value: "04" },
+  { label: "大于等于", value: "05" }
+]);
+const modelValue = ref(false);
+
+const closed = () => {
+  emits("update:modelValue", false);
+};
+</script>
+
+<style lang="scss" scoped>
+.itemText {
+  display: flex;
+  width: 100%;
+  .text{
+      width: 60px;
+  }
+}
+</style>

src/views/homeMy/components/centerDialog.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="centerBox">
+    <!-- 警力的弹框 -->
+    <GrouListJl />
+    <!-- 车辆情况 -->
+    <GrouListClqk />
+    <!-- 巡组的弹框 -->
+    <GrouListJmxz />
+    <!-- 街面力量的弹框 -->
+    <GrouListJmll />
+    <!--  保安的弹框 -->
+    <GrouListBa />
+    <!-- 巡逻时长的弹框 -->
+    <GrouListXllsclc />
+    <!-- 盘查工作的弹框 -->
+    <GrouListPcgz />
+    <!-- 指令弹窗 -->
+    <GrouListZl />
+    <!-- 单独播放视频弹窗 -->
+    <ViedeoDialog />
+    <!-- 新增勤务 -->
+    <AddQwDialog />
+    <!-- 展示大图 -->
+    <ImgBox />
+    <!--路径规划 -->
+    <RoutePlanning v-if="planning" :data="planningData" />
+  </div>
+</template>
+
+<script setup>
+import GrouListJl from "./dialog/grouListJl.vue";
+import GrouListClqk from "./dialog/grouListClqk.vue";
+import GrouListJmxz from "./dialog/grouListJmxz.vue";
+import GrouListJmll from "./dialog/grouListJmll.vue";
+import GrouListBa from "./dialog/grouListBa.vue";
+import GrouListXllsclc from "./dialog/grouListXllsclc.vue";
+import GrouListPcgz from "./dialog/grouListPcgz.vue";
+import GrouListZl from "./dialog/grouListZl.vue";
+import ViedeoDialog from "@/components/video/index.vue";
+import AddQwDialog from "./dialog/addQwDialog.vue";
+import ImgBox from "./dialog/imgBox.vue";
+import RoutePlanning from './dialog/routePlanning.vue'
+import { ref, defineProps, onMounted, onUnmounted, reactive } from "vue";
+import emitter from "@/utils/eventBus.js";
+const planning = ref(false)
+const planningData = ref({})
+onMounted(() => {
+  emitter.on("openZdXl", (res) => {
+    planning.value = res.show ? true : false
+    console.log(res);
+
+    planningData.value = res ? res : {}
+  });
+})
+
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+</style>

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>

src/views/homeMy/components/groupDialog.vue

@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/homeMy/components/jqIem.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="jqItm"  :class="props.isDetail?'':'jqItmline'">
+    <div class="time" v-if="!props.isDetail">
+      <span>{{ props.data.bjsj }}</span>
+      <span style="display:flex;align-items: center;">
+        <el-popover placement="left" width="400" trigger="click">
+          <template #reference>
+            <span @click="get_cjd_detail" style="font-size:17px;cursor: pointer;margin-right:10px;"><el-icon style="margin-top:4px;" color="#58a4fa" ><WarningFilled/></el-icon></span>
+          </template>
+          <div class="detail_cnt_box">
+            <el-timeline>
+              <el-timeline-item color="#409eff" :timestamp="it.time" placement="top" v-for="(it,idx) in detailList" :key="idx">
+                <el-card>
+                  <div class="detailinfo">{{it.mode1}}</div>
+                  <div class="detailinfo">{{it.units}}（{{it.jjyxm}}）</div>
+                  <audio :id="'radius_' + it.id">
+                    <source :src="it.lyh" />
+                  </audio>
+                  <div class="address">
+                <div style="text-align:right;" v-if="it.lyh">
+                  <img class="playImg" v-if="!it.isPlay" src="@/assets/my/play.png" @click.stop="playRadio(it)" />
+                  <img class="playImg" v-else src="@/assets/my/pause.png" @click.stop="closeRadio(it)" />
+                </div>
+              </div>
+                </el-card>
+              </el-timeline-item>
+            </el-timeline>
+            <el-empty description="暂无数据" :image-size="0.1" v-if="detailList.length <= 0"/>
+          </div>
+        </el-popover>
+        <!-- <span style="color: #58a4fa;cursor: pointer;" @click.stop="changePoint( props.data)">
+          <el-icon style="top: 2px;"><RefreshRight/></el-icon>
+          重新定位
+        </span> -->
+      </span>
+    </div>
+    <div class="card" :class="changeBorder(props.data.color)"  @click="getDetaill(props.data)">
+      <div class="title">{{ props.data.bjnr }}</div>
+      <div class="text">
+        报警人：<span class="info">{{ props.data.bjrmc || '未知'}} <span v-if="!props.isDetail">({{props.data.bjdh}})</span></span>
+      </div>
+      <div class="text">
+        报警时间：<span class="info">{{ props.data.bjsj }}</span>
+      </div>
+      <div class="text">
+        警情类别：<span class="info"><dict-tag :options="dic.JQLB" :value="props.data.jqlbdm" :tag="false" /></span>
+      </div>
+      <div class="text">
+        警情类型：<span class="info"><dict-tag :options="dic.JQLX" :value="props.data.jqlxdm" :tag="false" /></span>
+      </div>
+      <div class="text">
+        警情细类：<span class="info"> <dict-tag :options="dic.JQXL" :value="props.data.jqxldm" :tag="false" /></span>
+      </div>
+      <div class="text">
+        警情子类：<span class="info">   <dict-tag :options="dic.JQZL" :value="props.data.jqzldm" :tag="false" />    </span>
+      </div>
+       <div class="text">
+        管辖单位：<span class="info">{{ props.data.gxdwmc}}</span>
+      </div>
+      <div class="text" v-if="props.isDetail">
+        报警人电话：<span class="info">{{ props.data.bjdh}}</span>
+        <span class="checkInfo" v-if="!props.isZhzx">核查身份</span>
+      </div>
+      <div class="text" style="display:flex;">
+        处置状态：<span class="info"><dict-tag :options="props.dic.D_BZ_CZZT" :value="props.data.jqclztdm" :tag="false" /></span>
+      </div>
+       <audio :id="'radius_' + props.data.id" v-if="props.data.jjlyh && props.data.jjlyh !='nofile'" >
+        <source :src="props.data.jjlyh" />
+      </audio>
+      <div class="address">
+        <span>
+          <img class="addImg" src="@/assets/images/dingwei.png" />
+          <span>{{ props.data.sfdz }}</span>
+        </span>
+        <span v-if="!props.isDetail && props.data.jjlyh && props.data.jjlyh !='nofile'" >
+          <img class="playImg" v-if="!props.data.isPlay" src="@/assets/my/play.png" @click.stop="playRadio(props.data)" />
+          <img class="playImg" v-else src="@/assets/my/pause.png" @click.stop="closeRadio(props.data)" />
+        </span>
+        <span v-if="props.isZhzx" class="checkInfo">指派处置</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { qcckGet } from "@/api/qcckApi.js";
+import emitter from "@/utils/eventBus.js";
+import { reactive, ref,defineProps,defineEmits } from "vue";
+const props = defineProps({
+  data: Object,
+  isDetail:Boolean,
+  isZhzx:Boolean,
+  dic:{
+    type:Object,
+    default:{}
+  }
+});
+const changeItemPoint = ref({}); //切换警情的经纬度
+const detailList = ref([])
+const isOpen = ref(false)
+const emit = defineEmits(['lookDetail','changePoint'])
+
+// 查看详情
+function getDetaill(item){
+  emit('lookDetail',item)
+}
+// 播放语音
+function playRadio(item) {
+  item.isPlay = true;
+  let ID = "radius_"+item.id;
+  let dom = document.getElementById(ID);
+  dom.load();
+  dom.play();
+}
+
+// 切换定位
+function changePoint(item) {
+  emit('changePoint',item)
+  emitter.emit("removePlot", "PIOT");
+  emitter.emit("drawShape", {flag:"PIOT" , type:'point' });
+}
+
+// 改变边框
+function changeBorder(val){
+  switch(val){
+      case '1':
+        return 'red'
+        break;
+      case '2':
+        return 'orange'
+        break;
+      case '3':
+        return 'yellow'
+        break;
+      case '4':
+        return 'blue'
+        break;
+      default:
+        return 'blue'
+    }
+
+
+}
+
+// 关闭语音
+function closeRadio(item) {
+  item.isPlay = false;
+  let ID = "radius_" + item.id;
+  let dom = document.getElementById(ID);
+  dom.pause();
+}
+
+// 获取详情
+function get_cjd_detail(){
+  isOpen.value = !isOpen.value;
+  if(isOpen.value){
+    qcckGet({jjdbh:props.data.gljjdbh},'/mosty-jmxf/lzJq/getListCzxx').then(res=>{
+      detailList.value = res || [];
+      detailList.value.forEach(v=>{
+        if(v.lyh) v.lyh = '/data/rec' + v.lyh;
+        v.isPlay = false;
+      })
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.jqItm {
+  position: relative;
+  padding: 0 10px 10px 14px;
+  box-sizing: border-box;
+  .time {
+    margin-bottom: 10px;
+    padding-left: 10px;
+    display: flex;
+    color: #1872FF;
+    justify-content: space-between;
+  }
+  .card {
+    padding: 10px 10px 0 10px;
+    box-sizing: border-box;
+    line-height: 20px;
+    font-size: 14px;
+    background: #052955;
+    .title{
+      color: #fff;
+      margin-bottom: 6px;
+    }
+    .text {
+      font-size: 12px;
+      color: #fff;
+      display: flex;
+      span {
+        color: #7CBFFF;
+      }
+
+    }
+    .address {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 12px;
+      padding-top: 4px;
+      padding-bottom: 4px;
+      box-sizing: border-box;
+      border-top: 1px solid #1B7EF2;
+      color: #fff;
+      .addImg {
+        margin-right: 4px;
+        vertical-align: text-top;
+      }
+      .playImg{
+        width: 20px;
+      }
+    }
+    .checkInfo{
+      display: inline-block;
+      padding: 0px 8px;
+      box-sizing: border-box;
+      color: #fff;
+      border-radius: 4px;
+      box-shadow:inset 0 0px 17px 1px rgba(43,140,230,0.26);
+      border: 1px solid #3180EA;
+      margin-left: 10px;
+      cursor: pointer;
+    }
+  }
+  .red{
+    border-top: 2px solid #ff0526;
+  }
+  .orange{
+    border-top: 2px solid #FF7E00;
+  }
+  .yellow{
+    border-top: 2px solid #FFE21F;
+  }
+  .blue{
+    border-top: 2px solid #1C97FF;
+  }
+  .time::before {
+    position: absolute;
+    content: "";
+    width: 26px;
+    height: 26px;
+    background: url("~@/assets/my/icon.png") no-repeat;
+    top: -7px;
+    left: -14px;
+    z-index: 22;
+  }
+}
+.jqItmline{
+  border-left: 1px solid rgb(46, 67, 116);
+  margin-left: 10px;
+}
+.detail_cnt_box{
+  max-width: 600px;
+  max-height: 60vh;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.detail_cnt_box .el-card{
+  color: #ffffff;
+  border: 1px solid #19408d;
+  background-color: #052955;
+}
+::v-deep .el-timeline-item__timestamp{
+  color: #fff;
+}
+
+</style>
+<style>
+.el-popper.is-light,
+ .el-popper.is-light .el-popper__arrow::before {
+  background: #0d2944;
+  border: 1px solid #03438b;
+}
+
+</style>

src/views/homeMy/components/leftDialog.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="all-dialog noScollLine" :style="{ left: props.isPosition ? '0px' : '440px' }"
+    style="transition: all 0.5s">
+    <!-- 预警信息弹框 -->
+    <WarningInfo v-if="isShow.showYj" :data="list.yjxqInfo" />
+    <!--警情弹框 -->
+    <AjInfo v-show="isShow.showJq" :data="list.jqxqList" />
+    <!-- 指令信息弹框 -->
+    <InstructionsInfo v-if="isShow.showZl" :data="list.zlxqList" />
+    <!-- 公安资源弹窗 -->
+    <GazyInfo v-show="isShow.showGazy" :data="list.gzjgxqList" />
+    <!-- 社会资源弹窗 -->
+    <ShzyInfo v-if="isShow.showShzy" :data="list.shzyxqList" />
+    <!-- 检查站弹窗 -->
+    <JczInfo v-if="isShow.showJcz" :data="list.jczList" />
+    <!-- 从业人员 -->
+    <CyryInfo v-if="isShow.showCyry" :data="list.cyryList" />
+    <!-- 感知源弹窗 -->
+    <GzyInfo v-if="isShow.showGzy" :data="list.gzyxqList" />
+    <!-- 周边巡组 -->
+    <PoliceGroupList v-if="isShow.showZbxz" :data="list.zbxzxqList" />
+    <!--转为指令 -->
+    <PoliceGroupBtnList />
+  </div>
+</template>
+
+<script setup>
+import emitter from "@/utils/eventBus.js";
+import GzyInfo from "./dialog/gzyInfo.vue";
+
+import PoliceGroupList from "./dialog/policeGroupList.vue";
+import PoliceGroupBtnList from "./dialog/policeGroupBtnList.vue";
+import ShzyInfo from "./dialog/shzyInfo.vue";
+import CyryInfo from "./dialog/cyryInfo.vue";
+import JczInfo from "./dialog/jczInfo.vue";
+import WarningInfo from "./dialog/warningInfo.vue";
+import AjInfo from "./dialog/ajInfo.vue";
+import GazyInfo from "./dialog/gazyInfo.vue";
+import InstructionsInfo from "./dialog/instructionsInfo.vue";
+import { ref, defineProps, onMounted, onUnmounted, reactive } from "vue";
+const props = defineProps({
+  isPosition: Boolean
+});
+
+const isShowDefault = ref({});
+const isShow = ref({
+  showYj: false, //预警弹窗
+  showJq: false, //警情弹窗
+  showZl: false, //指令弹窗
+  showGazy: false, //公安机关弹窗
+  showShzy: false, //社会资源关弹窗
+  showGzy: false, //社会资源关弹窗
+  showJcz: false, //检查站弹窗
+  showCyry: false, //从业人员弹窗
+  showZbxz: false //周边巡组弹窗
+});
+const list = reactive({
+  yjxqInfo: [], //预警数据
+  jqxqList: [], //警情数据
+  zlxqList: [], //指令数据
+  gzjgxqList: {}, //公安机关数据
+  shzyxqList: [], //社会资源数据
+  jczList: [], //从业人员数据
+  cyryList: [], //检查站数据
+  gzyxqList: [], //感知元数据
+  zbxzxqList: Object //周边巡组数据
+});
+
+onMounted(() => {
+  isShowDefault.value = JSON.parse(JSON.stringify(isShow.value));
+  // 展示预警
+  emitter.on("showYjxq", (res) => {
+    isShow.value.showYj = res ? true : false;
+    if (res) list.yjxqInfo = res;
+  });
+  // 展示警情
+  emitter.on("showAj", (res) => {
+    isShow.value.showJq = res ? true : false;
+    if (res) list.jqxqList = res;
+  });
+  // 展示指令
+  emitter.on("showYjzl", (res) => {
+    isShow.value.showZl = res ? true : false;
+    if (res) list.zlxqList = res;
+  });
+
+  // 展示公安机关
+  emitter.on("showGazy", (res) => {
+    isShow.value.showGazy = res ? true : false;
+    if (!isShow.value.showGazy) emitter.emit("deleteText"); //清除巡防区文字
+    if (res) list.gzjgxqList = res;
+  });
+  // 社会资源
+  emitter.on("showShzy", (res) => {
+    isShow.value.showShzy = res ? true : false;
+    if (res) {
+      res.forEach(item => {
+        item.cyry = item.cyry ? JSON.parse(item.cyry) : [];
+      });
+      list.shzyxqList = res
+    }
+  });
+  // 检查站
+  emitter.on("showJcz", (res) => {
+    isShow.value.showJcz = res ? true : false;
+    if (res) list.jczList = res;
+  });
+  // 从业人员
+  emitter.on("showCyry", (res) => {
+    isShow.value.showCyry = res ? true : false;
+    if (res) list.cyryList = res;
+  });
+
+  // 感知源
+  emitter.on("showGzy", (res) => {
+    isShow.value.showGzy = res ? true : false;
+    console.log(res);
+
+    if (res) {
+      list.gzyxqList = res.map((item) => {
+        item.isPlay = false;
+        return item;
+      });
+    }
+  });
+
+  // 周边巡组
+  emitter.on("showZbxz", (res) => {
+    isShow.value.showZbxz = res ? true : false;
+    if (res) list.zbxzxqList = res;
+  });
+  // 关闭所有弹窗
+  emitter.on("closeAllDialog", (res) => {
+    isShow.value = JSON.parse(JSON.stringify(isShowDefault.value));
+    emitter.emit("drawLineAnimation", "route");
+  });
+});
+onUnmounted(() => {
+  emitter.off("showCcyj");
+  emitter.off("clickZbyj");
+  emitter.off("closeVideo");
+  emitter.off("showGzy");
+  emitter.off("showGazy");
+  emitter.off("showShzy");
+  emitter.off("showJcz");
+  emitter.off("showAj");
+  emitter.off("showYjxq");
+  emitter.off("showYjzl");
+  emitter.off("showZbxz");
+  emitter.off("closeAllDialog");
+});
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+
+.all-dialog {
+  z-index: 9;
+  position: absolute;
+  width: 370px;
+  top: 130px;
+  max-height: 90vh;
+  overflow: hidden;
+  overflow-y: auto;
+  padding-right: 10px;
+  box-sizing: border-box;
+
+}
+</style>

src/views/homeMy/components/rightDialog.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="rightDilog noScollLine" :style="{ right: props.isPosition ? '0px' : '388px' }" style="transition: all 0.5s" >
+    <!-- 周边视频更多视频三个视频列表的时候 -->
+    <MoreVideo
+      @close="onVideoClose('zb')"
+      :info="jqDetail"
+      :title="'周边视频'"
+      v-if="showVideoWindow"
+    />
+    <!--视频随动 -->
+    <MoreVideo
+      @close="onVideoClose('sd')"
+      :info="xzDetail"
+      :title="'视频随动'"
+      v-if="showVideoSpsdWindow"
+    />
+         <!-- 轨迹预警 -->
+    <DialogWarningList
+      @close="onClose('gj')"
+      :info="yjDetail"
+      :title="'轨迹预警'"
+      v-if="showYjWindow"
+    />
+    <!-- 周边预警 -->
+    <DialogWarningList
+      @close="onClose('zb')"
+      :info="zbyjDetail"
+      :title="'周边预警'"
+      v-if="showZbyjWindow"
+    />
+  </div>
+</template>
+
+<script setup>
+import emitter from "@/utils/eventBus.js";
+import MoreVideo from "./dialog/moreVideo.vue";
+import DialogWarningList from "./dialog/warningList.vue";
+import { ref, defineProps, onMounted, onUnmounted } from "vue";
+const props = defineProps({
+  isPosition: Boolean
+});
+const zbyjDetail = ref(null); //周边预警详情
+const yjDetail = ref(null); //某条预警详情
+const showZbyjWindow = ref(false); //是否显示周边预警
+const jqDetail = ref(null); // 某条警情详情
+const showVideoWindow = ref(false); //是否显示周边视频
+const xzDetail = ref(null); //巡组详情
+const showVideoSpsdWindow = ref(false); //吃否显示视频随动
+const showYjWindow = ref(false); //是否显示预警轨迹弹窗
+onMounted(()=>{
+    emitter.on("videoClick", (res) => {
+    jqDetail.value = res;
+    showVideoWindow.value = true;
+  });
+  emitter.on("closeVideo", (res) => {
+    showVideoWindow.value = false;
+    showVideoSpsdWindow.value = false;
+  });
+   emitter.on("clickZbyj", (res) => {
+    zbyjDetail.value = res;
+    showZbyjWindow.value = true;
+  });
+   emitter.on("showCcyj", (res) => {
+    yjDetail.value = res;
+    showYjWindow.value = true;
+  });
+  // 视频随动
+  emitter.on("clickSpsd", (res) => {
+    xzDetail.value = res;
+    showVideoSpsdWindow.value = true;
+  });
+})
+//关闭周边视频 || 视频随动
+function onVideoClose(type) {
+  if (type == "zb") {
+    showVideoWindow.value = false;
+  } else {
+    showVideoSpsdWindow.value = false;
+  }
+}
+//关闭轨迹预警 || 周边预警
+function onClose(type) {
+  if (type == "gj") {
+    showYjWindow.value = false;
+  } else {
+    showZbyjWindow.value = false;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+.rightDilog {
+  position: absolute;
+  top: 91px;
+  width: 360px;
+  right: 380px ;
+  z-index:9;
+  max-height: 90vh;
+  overflow: hidden;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+</style>

src/views/homeMy/components/search.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="searchBox">
+    <el-form :model="listQuery">
+      <el-form-item label="开始时间" prop="startTime">
+        <el-date-picker
+          style="width: 100%"
+          v-model="listQuery.startTime"
+          type="datetime"
+          placeholder="请选择日期时间"
+          format="YYYY/MM/DD HH:mm:ss"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </el-form-item>
+      <el-form-item label="结束时间" prop="endTime">
+        <el-date-picker
+          style="width: 100%"
+          v-model="listQuery.endTime"
+          type="datetime"
+          placeholder="请选择日期时间"
+          format="YYYY/MM/DD HH:mm:ss"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </el-form-item>
+      <el-form-item prop="ssbmid" v-if="props.type == '01'" label="所属辖区">
+        <MOSTY.Department
+          placeholder="请选择所属辖区"
+          width="100%"
+          clearable
+          filterable
+          v-model="listQuery.ssbmid"
+        />
+      </el-form-item>
+      <el-form-item prop="zdjqtjlx" v-if="props.type == '01'" label="警情类型">
+        <el-select v-model="listQuery.zdjqtjlx">
+          <el-option
+            v-for="(dict, index) in D_BZ_ZDJQTJLX"
+            :key="index"
+            :label="dict.label"
+            :value="dict.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="yjlx" v-if="props.type == '02'" label="预警类型">
+        <el-select clearable style="width: 100%" v-model="listQuery.yjLx">
+          <el-option
+            v-for="(dict, index) in D_BZ_YJLX"
+            :key="index"
+            :label="dict.label"
+            :value="dict.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item prop="yjdj" v-if="props.type == '02'" label="预警等级">
+        <el-select v-model="listQuery.yjJb">
+          <el-option
+            v-for="(dict, index) in D_BZ_tyjb"
+            :key="index"
+            :label="dict.label"
+            :value="dict.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="zlczzt" v-if="props.type == '03'" label="处置状态">
+        <el-select v-model="listQuery.zlczzt">
+          <el-option
+            v-for="(dict, index) in D_BZ_CZZT"
+            :key="index"
+            :label="dict.label"
+            :value="dict.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <div class="footer">
+        <el-button @click="handleFilter">筛选</el-button>
+        <el-button @click="reset()"> 重置 </el-button>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { ref, getCurrentInstance, defineProps, defineEmits, watch } from "vue";
+import * as MOSTY from "@/components/MyComponents/index";
+const props = defineProps({
+  type: String,
+  searchForm: Object
+});
+const emit = defineEmits(["handelSearch", "resetSearch"]);
+const { proxy } = getCurrentInstance();
+const { D_BZ_tyjb, D_BZ_CZZT, D_BZ_ZDJQTJLX,D_BZ_YJLX } = proxy.$dict(
+  "D_BZ_tyjb",
+  "D_BZ_CZZT",
+  "D_BZ_ZDJQTJLX",
+  "D_BZ_YJLX"
+);
+const listQuery = ref({});
+
+watch(
+  () => props.searchForm,
+  (val) => {
+    listQuery.value = val;
+  },
+  { immediate: true }
+);
+// 筛选
+function handleFilter() {
+  let params = {
+    ...listQuery.value,
+    lx: props.type
+  };
+  emit("handelSearch", params);
+}
+//  重置
+function reset() {
+  listQuery.value = {};
+  emit("resetSearch", props.type);
+}
+</script>
+
+<style lang="scss" scoped>
+.searchBox {
+  //   width: 340px;
+  background: #000;
+  padding: 10px 8px;
+  box-sizing: border-box;
+  .el-form {
+    width: 100%;
+    height: 100%;
+    .footer {
+      text-align: center;
+    }
+  }
+}
+</style>

src/views/homeMy/components/xfqJq/barEchats.vue

@@ -0,0 +1,129 @@
+<template>
+  <div id="barEchars" style="width: 100%; height: 100%"></div>
+</template>
+
+<script setup>
+import * as echarts from "echarts";
+import { ref, onMounted, watch, defineProps, nextTick } from "vue";
+const props = defineProps({
+  data:{
+      type:Object,
+      default:{}
+  }
+});
+
+const lineChartFn = (list) => {
+  var myChart = echarts.init(document.getElementById("barEchars"));
+  var option = {
+    legend: {
+      type: "plain",
+      show: true,
+      left: 0,
+      textStyle: {
+        color: "#fff"
+      },
+      data: [ '警情','同比','环比']
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
+      }
+    },
+    grid: {
+      top: "14%",
+      right: "3%",
+      left: "5%",
+      bottom: "12%"
+    },
+    xAxis: [
+      {
+        type: "category",
+        axisLabel:{ interval:0 },
+        axisLine: { lineStyle: { color: "#fff" } },
+        data:list.map(iv=>{return iv.key})
+      }
+    ],
+    yAxis: [
+      {
+        axisLabel: { formatter: "{value}" ,color: "#fff"},
+        axisLine: {
+          show: false,
+          lineStyle: { color: "rgba(255,255,255,1)"  }
+        },
+        splitLine: {
+          lineStyle: { color: "rgba(255,255,255,0.25)" }
+        }
+      }
+    ],
+    series: [
+      {
+        name: "警情",
+        type: "bar",
+        data:list.map(iv=>{return iv.zs}),
+        barWidth: "15px",
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0,0,1,[{offset: 0,color: "rgba(0,244,255,1)"},{offset: 1,color: "rgba(0,77,167,1)" }],false),
+            barBorderRadius: [15, 15, 0, 0],
+            shadowColor: "rgba(0,160,221,0.5)",
+            shadowBlur: 4
+          }
+        },
+        label: { normal: { show: true } }
+      },
+      {
+        name: "同比",
+        type: "bar",
+        data:list.map(iv=>{return iv.tb}),
+        barWidth: "15px",
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0,0,0,1,[{ offset: 0,color: "rgba(24, 232, 229, 1)" },{ offset: 1, color: "rgba(3, 110, 83, 1)" }],false),
+            barBorderRadius: [15, 15, 0, 0],
+            shadowColor: "rgba(0,160,221,0.5)",
+            shadowBlur: 4
+          }
+        },
+        label: { normal: { show: true } }
+      },
+      {
+        name: "环比",
+        type: "bar",
+        data:list.map(iv=>{return iv.hb}),
+        barWidth: "15px",
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0,0,0,1,[{ offset: 0, color: "rgba(230, 10, 241, 1)"},{ offset: 1, color: "rgba(124, 2, 107, 1)"}],false),
+            barBorderRadius: [15, 15, 0, 0],
+            shadowColor: "rgba(0,160,221,0.5)",
+            shadowBlur: 4
+          }
+        },
+        label: {
+          normal: { show: true  },
+          position: "top"
+        }
+      }
+    ]
+  };
+
+  option && myChart.setOption(option);
+  window.onresize = function () {
+    myChart.resize();
+  };
+}
+
+watch(()=>props.data,(val)=>{
+  if(val && val.List) {
+    nextTick(()=>{
+      lineChartFn(val.List); //处理数据
+    })
+  }
+})
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/homeMy/components/xfqJq/index.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="xfq-jq-box" v-if="isShowDialog">
+      <div class="top-title">
+          <span>分类统计</span>
+          <span>
+              <span class="mx" @click="isShow = !isShow">明细</span>
+              <el-icon size="20px" @click="closeInfo"><Close/></el-icon>
+          </span>
+      </div>
+      <Search :searchArr="searchConfiger" @submit="onSearch" />
+      <div class="xq-cntBox" v-loading="loading">
+          <Bar v-show="isShow" :data="listData" />
+          <List v-show="!isShow" :data="listData" :isShow="isShow" />
+      </div>
+  </div>
+</template>
+
+<script setup>
+import { timeValidate } from "@/utils/time.js";
+import emitter from "@/utils/eventBus.js";
+import { qcckPost } from "@/api/qcckApi.js"
+import Search from "@/components/aboutTable/Search.vue";
+import Bar from './barEchats.vue'
+import List from './list.vue'
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
+const isShow = ref(true)
+const isShowDialog = ref(false)
+const loading = ref(false)
+const listData = ref([]) //获取的数据
+const searchConfiger = reactive([
+  {
+    showType: "datetimerange",
+    prop: "daterange",
+    placeholder: "请选择时间",
+    label: "选择时间",
+    defaultVal:[timeValidate(new Date(), "ymd")+' 00:00:00',timeValidate(new Date(), "ymd")+' 23:59:59']
+  }
+])
+const queryDate = ref({
+    kssj:timeValidate(new Date(), "ymd")+' 00:00:00',
+    jssj:timeValidate(new Date(), "ymd")+' 23:59:59',
+    pgis:[[]]
+})
+onMounted(()=>{
+    // 展示犯罪预测
+  emitter.on("showXFQinfo", (res) => {
+      isShowDialog.value = res ? res : false;
+      queryDate.value.pgis = res ? (JSON.parse(res.position))[0] :[[]]
+      if(res) getData(res)
+  })
+})
+
+// 搜搜
+const onSearch = (val) =>{
+    queryDate.value.kssj = val.daterange ? val.daterange[0]:timeValidate(new Date(), "ymd")+' 00:00:00'
+    queryDate.value.jssj = val.daterange ? val.daterange[1]:timeValidate(new Date(), "ymd")+' 23:59:59'
+    getData()
+}
+
+// 获取数据
+const getData = () =>{
+    loading.value = true
+    let data = { ...queryDate.value}
+    qcckPost(data,'/mosty-jmxf/tbJq/fwJqtj').then(res=>{
+        loading.value = false
+        listData.value = res ? res : {};
+    }).catch(()=>{
+        loading.value = false
+    })
+}
+
+const closeInfo = () =>{
+    isShowDialog.value = false
+    isShow.value = true
+    queryDate.value.kssj = timeValidate(new Date(), "ymd")+' 00:00:00'
+    queryDate.value.jssj = timeValidate(new Date(), "ymd")+' 23:59:59'
+}
+
+onUnmounted(()=>{
+    emitter.off("showXFQinfo")
+})
+
+</script>
+
+<style lang="scss" scoped>
+.xfq-jq-box{
+    position:absolute;
+    top:90px;
+    right:400px;
+    width:618px;
+    background:#052955;
+    padding: 4px 10px;
+    box-sizing: border-box;
+    color: #fff;
+    .top-title{
+        height: 26px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 16px;
+        font-weight: 600;
+        .mx{
+            font-size: 14px;
+            cursor: pointer;
+            font-weight: normal;
+            margin-right: 10px;
+        }
+        ::v-deep .el-icon{
+            top: 5px;
+        }
+    }
+    .xq-cntBox{
+        width:600px;
+        height:300px;
+        margin-top: 10px;
+    }
+}
+::v-deep .pageSearch .box .item{
+  margin-right: 8px;
+  width: 75%;
+}
+</style>

src/views/homeMy/components/xfqJq/list.vue

@@ -0,0 +1,253 @@
+<template>
+  <div class="listBox">
+    <DarkTable
+    :tableData="pageData.tableData"
+    :tableColumn="pageData.tableColumn"
+    :tableHeight="pageData.tableHeight"
+    :key="pageData.keyCount"
+    :tableConfiger="pageData.tableConfiger"
+    >
+    <!-- 表头 -->
+    <template #zshead="{column}">
+        <span> {{column.label}}</span>
+        <el-popover :append-to-body="true" trigger="click" :visible="visible1" width="242px">
+            <template #reference>
+            <el-icon color ="#bfcbd9" @click.stop="visible1 = !visible1 , visible2 = false , visible3 = false"><QuestionFilled/></el-icon>
+            </template>
+            <span style="color:#fff">警情数量是以报警时间为标准统计</span>
+        </el-popover>
+    </template>
+    <template #tbhead="{column}">
+        <span> {{column.label}}</span>
+        <el-popover :append-to-body="true" trigger="click" :visible="visible2" width="394px">
+            <template #reference>
+            <el-icon color ="#bfcbd9" @click.stop="visible2 = !visible2, visible1 = false , visible3 = false"><QuestionFilled/></el-icon>
+            </template>
+            <div style="color:#fff">
+                <div>同比:</div>
+                <div>报警时间为
+                    <span style="color:red">{{props.data.kssj}} 至 {{props.data.jssj}}</span> 与
+                    <span style="color:red">{{props.data.tbkssj}} 至 {{props.data.tbjssj}} </span> 的警情数据进行对比负数表示降低，正数表示上涨
+                </div>
+            </div>
+        </el-popover>
+    </template>
+    <template #hbhead="{column}">
+        <span> {{column.label}}</span>
+        <el-popover :append-to-body="true" trigger="click" :visible="visible3" width="394px">
+            <template #reference>
+            <el-icon color ="#bfcbd9" @click.stop="visible3 = !visible3, visible2 = false , visible1 = false"><QuestionFilled/></el-icon>
+            </template>
+            <div style="color:#fff">
+                <div>环比:</div>
+                <div>报警时间为
+                    <span style="color:red">{{props.data.kssj}} 至 {{props.data.jssj}}</span> 与
+                    <span style="color:red">{{props.data.hbkssj}} 至 {{props.data.hbjssj}} </span> 的警情数据进行对比负数表示降低，正数表示上涨
+                </div>
+            </div>
+        </el-popover>
+    </template>
+    <!-- 内容 -->
+    <template #xh="{row}">
+        <span class="order" :class="row.xh == 1?'red':row.xh == 2 ?'orange':row.xh == 3 ?'blue':'green'">{{row.xh}}</span>
+    </template>
+    <template #zs="{row}">
+        <span @click="chooseData(row,'zsId')" >{{row.zs}}</span>
+    </template>
+    <template #tb="{row}">
+        <span @click="chooseData(row,'tbId')"  :style="{color:row.tbbl > 0 ? '#ff0000':'#57d040'}">{{row.tb}} ({{row.tbbl || 0}}) % </span>
+    </template>
+    <template #hb="{row}">
+        <span @click="chooseData(row,'hbId')" :style="{color:row.hbbl > 0 ? '#ff0000':'#57d040'}"> {{row.hb}} ({{row.hbbl || 0}}) % </span>
+    </template>
+    </DarkTable>
+    <el-dialog @close="closed" v-model="showDetail" title="数据详情" width="1200px" :show-close="true">
+        <DarkTable
+            :tableData="pageData1.tableData"
+            :tableColumn="pageData1.tableColumn"
+            :tableHeight="pageData1.tableHeight"
+            :key="pageData1.keyCount"
+            :tableConfiger="pageData1.tableConfiger"
+        >
+        <!-- 内容 -->
+        <template #xh="{row}">
+            <span class="order" :class="row.xh == 1?'red':row.xh == 2 ?'orange':row.xh == 3 ?'blue':'green'">{{row.xh}}</span>
+        </template>
+        <template #tb="{row}">
+            <span :style="{color:row.zs > 0 ? '#ff0000':'#57d040'}">{{row.tb}} ({{row.tbbl || 0}}) % </span>
+        </template>
+        <template #hb="{row}">
+            <span :style="{color:row.zs > 0 ? '#ff0000':'#57d040'}"> {{row.hb}} ({{row.hbbl || 0}}) % </span>
+        </template>
+        </DarkTable>
+        <Pages
+            @changeNo="changeNo"
+            @changeSize="changeSize"
+            :tableHeight="pageData1.tableHeight"
+            :pageConfiger="{
+            ...pageData1.pageConfiger,
+            total: pageData1.total
+            }"
+        ></Pages>
+    </el-dialog>
+  </div>
+
+</template>
+
+<script setup>
+import { qcckPost } from "@/api/qcckApi.js"
+import DarkTable from "@/components/aboutTable/DarkTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import { reactive, ref ,onMounted,getCurrentInstance, watch } from 'vue';
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+    data:{
+        type:Object,
+        default:{}
+    },
+    isShow:Boolean
+})
+const showDetail = ref(false)
+const visible1 = ref(false)
+const visible2 = ref(false)
+const visible3 = ref(false)
+const pageData = reactive({
+  tableData: [], //表格数据
+  tableConfiger: {
+    loading: false,
+    rowHieght: 61,
+    showSelectType:'null',
+    showIndex:false,
+    haveControls:false,
+  },
+  tableColumn:300,
+  tableColumn: [
+    { label: "序号",  prop: "xh",showSolt:true },
+    { label: "分类",  prop: "key"},
+    { label: "警情",  prop: "zs",showSolt:true ,showSoltHeader:true,sortable:true},
+    { label: "同比",  prop: "tb",showSolt:true ,showSoltHeader:true},
+    { label: "环比",  prop: "hb",showSolt:true ,showSoltHeader:true},
+  ]
+});
+
+const pageData1 = reactive({
+  tableData: [], //表格数据
+  tableConfiger: {
+    loading: false,
+    rowHieght: 61,
+    showSelectType:'null',
+    showIndex:false,
+    haveControls:false,
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageNum: 1
+  }, //分页
+  tableHeight:550,
+  tableColumn: [
+    { label: "警情编号",  prop: "ajbh" ,showOverflowTooltip:true},
+    { label: "接警单编号", prop: "gljjdbh",showOverflowTooltip:true},
+    { label: "警情类别",  prop: "bjlbmc",showOverflowTooltip:true},
+    { label: "简要案情",  prop: "bjnr",showOverflowTooltip:true},
+    { label: "事发地址",  prop: "sfdz",showOverflowTooltip:true},
+    { label: "处警单位",  prop: "ssbm",showOverflowTooltip:true},
+    { label: "报警时间",  prop: "bjsj",showOverflowTooltip:true},
+  ]
+});
+
+const chooseIds = ref([]) //选择的数据
+
+// 處理數據
+const handleData = (val) =>{
+    let list = val || [];
+    pageData.tableData = list.map((item,index)=>{
+        item.xh = index+1
+        return item;
+    })
+}
+
+// 选择列表
+const chooseData = (val,lx) =>{
+    if(val[lx] && val[lx].length >0){
+        chooseIds.value = val[lx];
+        getDate()
+    }else{
+        proxy.$message({ type: "warning", message: "暂无数据"  });
+    }
+}
+
+// 获取数据
+const getDate = () =>{
+    pageData1.tableConfiger.loading = true;
+    showDetail.value = true
+    let data = { "idList": chooseIds.value,...pageData1.pageConfiger}
+    qcckPost(data,'/mosty-jmxf/tbJq/selectByIdList').then(res=>{
+        pageData1.tableConfiger.loading = false
+        pageData1.tableData = res ? res.records : [];
+        pageData1.total = res ? res.total : 0
+    }).catch(()=>{
+        pageData1.tableConfiger.loading = false
+    })
+
+}
+// 分页
+const changeNo = (val) =>{
+    pageData1.pageConfiger.pageNum = val;
+    getDate()
+}
+// 页数
+const changeSize = (val) =>{
+    pageData1.pageConfiger.pageSize = val;
+    getDate()
+}
+
+// 关闭详情
+const closed = () =>{
+    chooseIds.value = [];
+    showDetail.value = false
+}
+
+
+watch(()=>props.data,(val)=>{
+    if(val && val.List) handleData(val.List); //处理数据
+})
+watch(()=>props.isShow,(val)=>{
+    visible1.value = false;
+    visible2.value = false;
+    visible3.value = false;
+},{immediate:true})
+</script>
+
+<style lang="scss" scoped>
+.listBox{
+    width:100%;
+    height:100%;
+    .order{
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        text-align: center;
+        line-height: 20px;
+        color: #fff;
+        border-radius: 3px;
+    }
+    .red{ background: rgb(255, 108, 108); }
+    .orange{ background: rgb(252, 175, 97); }
+    .blue{ background: #4259af; }
+    .green{ background: rgb(143, 212, 153);}
+    ::v-deep .el-icon{
+        top: 3px !important;
+        left:4px;
+        right:5px;
+    }
+}
+
+::v-deep .el-input__inner{
+    color: #000 !important;
+}
+::v-deep .el-pagination.is-background .btn-prev{
+    color: #000;
+}
+</style>

src/views/homeMy/components/yaItem.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="jqItm"  :class="props.isDetail?'':'jqItmline'">
+    <div class="time" v-if="!props.isDetail">
+      <span>{{ props.data.fasj }}</span>
+    </div>
+    <div class="card" :class="changeBorder(props.data.color)"  @click="getDetaill(props.data)">
+      <div class="text">
+        预案名称：<span class="info">{{ props.data.yamc || '未知'}}</span>
+      </div>
+      <div class="text">
+        预案代号：<span class="info">{{ props.data.bjsj }}</span>
+      </div>
+      <div class="text">
+        预案等级：<span class="info"><dict-tag :options="dic.JQLB" :value="props.data.jqlbdm" :tag="false" /></span>
+      </div>
+      <div class="text">
+        预案类型：<span class="info"><dict-tag :options="dic.JQLX" :value="props.data.jqlxdm" :tag="false" /></span>
+      </div>
+      <div class="text flex just-between">
+        <div class="flex">启动状态：<span class="info"> <dict-tag :options="dic.D_BZ_ZXZTAI" :value="props.data.qdzt" :tag="false" /></span></div>
+         <div><el-button type="primary" size="small">启动预案</el-button></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { qcckGet } from "@/api/qcckApi.js";
+import emitter from "@/utils/eventBus.js";
+import { reactive, ref,defineProps,defineEmits } from "vue";
+const props = defineProps({
+  data: Object,
+  isDetail:Boolean,
+  isZhzx:Boolean,
+  dic:{
+    type:Object,
+    default:{}
+  }
+});
+const changeItemPoint = ref({}); //切换警情的经纬度
+const detailList = ref([])
+const isOpen = ref(false)
+const emit = defineEmits(['lookDetail','changePoint'])
+
+// 查看详情
+function getDetaill(item){
+  emit('lookDetail',item)
+}
+// 播放语音
+function playRadio(item) {
+  item.isPlay = true;
+  let ID = "radius_"+item.id;
+  let dom = document.getElementById(ID);
+  dom.load();
+  dom.play();
+}
+
+// 切换定位
+function changePoint(item) {
+  emit('changePoint',item)
+  emitter.emit("removePlot", "PIOT");
+  emitter.emit("drawShape", {flag:"PIOT" , type:'point' });
+}
+
+// 改变边框
+function changeBorder(val){
+  switch(val){
+      case '1':
+        return 'red'
+        break;
+      case '2':
+        return 'orange'
+        break;
+      case '3':
+        return 'yellow'
+        break;
+      case '4':
+        return 'blue'
+        break;
+      default:
+        return 'blue'
+    }
+
+
+}
+
+// 关闭语音
+function closeRadio(item) {
+  item.isPlay = false;
+  let ID = "radius_" + item.id;
+  let dom = document.getElementById(ID);
+  dom.pause();
+}
+
+// 获取详情
+function get_cjd_detail(){
+  isOpen.value = !isOpen.value;
+  if(isOpen.value){
+    qcckGet({jjdbh:props.data.gljjdbh},'/mosty-jmxf/lzJq/getListCzxx').then(res=>{
+      detailList.value = res || [];
+      detailList.value.forEach(v=>{
+        if(v.lyh) v.lyh = '/data/rec' + v.lyh;
+        v.isPlay = false;
+      })
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.jqItm {
+  position: relative;
+  padding: 0 10px 10px 14px;
+  box-sizing: border-box;
+  .time {
+    margin-bottom: 10px;
+    padding-left: 10px;
+    display: flex;
+    color: #1872FF;
+    justify-content: space-between;
+  }
+  .card {
+    padding: 10px 10px 0 10px;
+    box-sizing: border-box;
+    line-height: 20px;
+    font-size: 14px;
+    background: #052955;
+    .title{
+      color: #fff;
+      margin-bottom: 6px;
+    }
+    .text {
+      font-size: 12px;
+      color: #fff;
+      display: flex;
+      span {
+        color: #7CBFFF;
+      }
+
+    }
+    .address {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 12px;
+      padding-top: 4px;
+      padding-bottom: 4px;
+      box-sizing: border-box;
+      border-top: 1px solid #1B7EF2;
+      color: #fff;
+      .addImg {
+        margin-right: 4px;
+        vertical-align: text-top;
+      }
+      .playImg{
+        width: 20px;
+      }
+    }
+    .checkInfo{
+      display: inline-block;
+      padding: 0px 8px;
+      box-sizing: border-box;
+      color: #fff;
+      border-radius: 4px;
+      box-shadow:inset 0 0px 17px 1px rgba(43,140,230,0.26);
+      border: 1px solid #3180EA;
+      margin-left: 10px;
+      cursor: pointer;
+    }
+  }
+  .red{
+    border-top: 2px solid #ff0526;
+  }
+  .orange{
+    border-top: 2px solid #FF7E00;
+  }
+  .yellow{
+    border-top: 2px solid #FFE21F;
+  }
+  .blue{
+    border-top: 2px solid #1C97FF;
+  }
+  .time::before {
+    position: absolute;
+    content: "";
+    width: 26px;
+    height: 26px;
+    background: url("~@/assets/my/icon.png") no-repeat;
+    top: -7px;
+    left: -14px;
+    z-index: 22;
+  }
+}
+.jqItmline{
+  border-left: 1px solid rgb(46, 67, 116);
+  margin-left: 10px;
+}
+.detail_cnt_box{
+  max-width: 600px;
+  max-height: 60vh;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.detail_cnt_box .el-card{
+  color: #ffffff;
+  border: 1px solid #19408d;
+  background-color: #052955;
+}
+::v-deep .el-timeline-item__timestamp{
+  color: #fff;
+}
+
+</style>
+<style>
+.el-popper.is-light,
+ .el-popper.is-light .el-popper__arrow::before {
+  background: #0d2944;
+  border: 1px solid #03438b;
+}
+
+</style>

src/views/homeMy/components/yjItem.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="yjItm" :class="props.isDetail ? '' : 'yjItmline'">
+    <div class="time" v-if="!props.isDetail">{{ props.data.yjSj }}</div>
+    <div class="card">
+      <div class="card-cnt">
+        <div class="leftImg">
+          <el-image style="width: 100%" :src="props.data.yjTp" :preview-src-list="[props.data.yjTp, props.data.yjXtp]"
+            :hide-on-click-modal="true" close-on-press-escape fit="cover" lazy>
+            <template #error>
+              <div class="image-slot">
+                <el-image v-if="props.data.yjLx == 1" :src="people" :preview-src-list="[people, props.data.yjXtp]"
+                  fit="cover"></el-image>
+                <el-image v-else :src="car" :preview-src-list="[car, props.data.yjXtp]" fit="cover"></el-image>
+              </div>
+            </template>
+          </el-image>
+        </div>
+        <div class="rightInfo" @click="getDetaill(props.data)">
+          <div class="title">{{ props.data.yjRyxm }}
+            <span class="status">{{ props.data.yjbq }}</span>
+          </div>
+          <div><span class="zjhm" v-if="props.data.yjRysfzh">{{ IdCard(props.data.yjRysfzh, 2) }}</span>
+            <span class="zjhm" v-if="props.data.yjRysfzh">{{ IdCard(props.data.yjRysfzh, 3) }} 岁</span>
+          </div>
+          <div>
+            <span class="zjhm" @click.stop="copySfzh(props.data.yjRysfzh)">{{ props.data.yjRysfzh }}</span>
+          </div>
+        </div>
+      </div>
+      <div @click="getDetaill(props.data)">
+        <div class="text textflex" v-if="!props.isDetail">
+          <span>车牌号码：<span class="info">{{ props.data.yjClcph }}</span></span>
+          <span>车牌类型：<span class="info">{{ props.data.yjHplx }}</span></span>
+        </div>
+        <div class="text">
+          抓拍时间：<span class="info">{{ props.data.yjFssj }}</span>
+        </div>
+        <div class="text">
+          抓拍地点：<span class="info">{{ props.data.yjGzymc }}</span>
+        </div>
+        <div class="text">
+          预警时间：<span class="info">{{ props.data.yjSj }}</span>
+        </div>
+        <div class="text">
+          预警次数：<span class="info">{{ props.data.yjCs || 0 }}次</span>
+        </div>
+        <div class="text text_detail">
+          预警详情：<span class="info" :title="props.data.yjbqmc">{{ props.data.yjbqmc }}</span>
+        </div>
+        <div class="text text_detail" v-if="props.data.bz">
+          管控原因：<span class="info" :title="props.data.bz">{{ props.data.bz }}</span>
+        </div>
+        <div style="color:yellow ;" v-if="props.isDetail">
+          研判结果：<span class="info">相似度{{ props.data.xsd * 100 }}%</span>
+        </div>
+        <div class="flex just-between">
+          <div></div>
+          <span class="smallbtn" @click.stop="handleQsFk(props.data, '查看反馈')">查看反馈</span>
+        </div>
+      </div>
+      <!-- <div class="phtos">
+        <el-carousel indicator-position="outside" :autoplay="isAutoplay">
+          <el-carousel-item v-for="v in 1" :key="v">
+            <div v-for="it in 4" :key="it" class="imgList">
+              <img :src="people" alt="" />
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </div> -->
+      <div class="address">
+        <img class="addImg" src="@/assets/images/dingwei.png" />
+        <span>{{ props.data.yjDz }}</span>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { qcckPost, qcckGet, qcckPut } from "@/api/qcckApi.js";
+import { IdCard } from '@/utils/validate.js'
+import people from "@/assets/images/peo.png";
+import emitter from "@/utils/eventBus.js";
+import car from "@/assets/images/car.png";
+import { reactive, ref, defineProps, defineEmits, getCurrentInstance } from "vue";
+const { proxy } = getCurrentInstance();
+import FkDialog from "./dialog/fkDialog.vue";
+const emit = defineEmits(['lookDetail'])
+const isAutoplay = ref(false);
+const props = defineProps({
+  data: Object,
+  isDetail: Boolean,
+});
+// 查看详情
+function getDetaill(item) {
+  emit('lookDetail', item)
+}
+const handleQsFk = () => {
+  qcckGet({}, "/mosty-gsxt/tbYjxx/getInfo/" + props.data.id).then((res) => {
+    let list = res.fkList || []
+    let obj = list.length > 0 ? list[0] : {};
+    emitter.emit("fkDialogShow", obj)
+  });
+}
+// 复制身份证
+const copySfzh = (text) => {
+  const input = document.createElement('input');
+  input.value = text;
+  document.body.appendChild(input)
+  input.select()
+  document.execCommand('copy')
+  document.body.removeChild(input)
+  proxy.$message({ message: "复制成功", type: "success" });
+}
+</script>
+
+<style lang="scss" scoped>
+.yjItm {
+  position: relative;
+  padding: 0 10px 10px 14px;
+  box-sizing: border-box;
+
+  .time {
+    color: #1872FF;
+    margin-bottom: 10px;
+    padding-left: 10px;
+  }
+
+  .card {
+    padding: 10px 10px 4px 10px;
+    box-sizing: border-box;
+    border-top: 2px solid #00bfff;
+    line-height: 20px;
+    font-size: 14px;
+    background: #052955;
+
+    .card-cnt {
+      display: flex;
+      background: rgba(255, 255, 255, 0.05);
+      margin-bottom: 4px;
+
+      .leftImg {
+        width: 60px;
+        margin-right: 10px;
+
+        .el-image {
+          width: 100%;
+          max-height: 90px;
+        }
+      }
+
+      .rightInfo {
+        flex: 1;
+
+        .title {
+          width: 100%;
+          color: #0095FF;
+          line-height: 28px;
+          margin-right: 20px;
+        }
+
+        .status {
+          padding: 1px 6px;
+          border-radius: 4px;
+          background: #FF3A3A;
+          color: #fff;
+        }
+
+        .zjhm {
+          color: #7CBFFF;
+          margin-right: 10px;
+        }
+
+        .textflex {
+          display: flex;
+          justify-content: space-between;
+        }
+
+        .text {
+          font-size: 12px;
+          color: #6585af;
+
+          .info {
+            color: #fff;
+          }
+        }
+
+        .newinfo {
+          color: yellow;
+        }
+      }
+    }
+
+    .address {
+      justify-content: space-between;
+      margin-top: 4px;
+      padding-top: 6px;
+      box-sizing: border-box;
+      border-top: 1px solid #3b3737;
+      color: #fff;
+
+      .addImg {
+        margin-right: 4px;
+        vertical-align: text-top;
+      }
+    }
+
+    .phtos {
+      height: 110px;
+      padding-top: 10px;
+      box-sizing: border-box;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      border-top: 1px dashed #3d3d3d;
+      margin-top: 6px;
+      box-sizing: border-box;
+
+      ::v-deep .el-carousel {
+        width: 100%;
+        height: 100%;
+
+        .el-carousel__container {
+          height: 72%;
+        }
+
+        .el-carousel__item {
+          height: 100%;
+          display: flex;
+          justify-content: space-between;
+        }
+      }
+
+      img {
+        width: 60px;
+        height: 70px;
+      }
+    }
+  }
+
+  .time::before {
+    position: absolute;
+    content: "";
+    width: 26px;
+    height: 26px;
+    background: url("~@/assets/my/icon.png") no-repeat;
+    top: -7px;
+    left: -14px;
+    z-index: 22;
+  }
+}
+
+.textflex {
+  display: flex;
+  justify-content: space-between;
+}
+
+.text {
+  font-size: 12px;
+  color: #FFF;
+
+  .info {
+    color: #7CBFFF;
+  }
+}
+
+.yjItmline {
+  border-left: 1px solid rgb(151, 147, 147);
+  margin-left: 10px;
+}
+
+.smallbtn {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 4px;
+  background: #0072ff;
+  border-radius: 5px 5px 5px 5px;
+  margin-top: 6px;
+}
+</style>

src/views/homeMy/components/zlItem.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="zlItm" :class="!isDetail ? 'zlItmLine' : ''">
+    <div class="time" v-if="!isDetail">{{ props.data.zlfqsj }}</div>
+    <div class="card">
+      <div class="card-cnt">
+        <div class="leftImg">
+          <el-image
+            style="width: 100%"
+            :src="props.data.zltp"
+            :preview-src-list="[props.data.zltp]"
+            :hide-on-click-modal="true"
+            close-on-press-escape
+            fit="cover"
+            lazy
+          >
+            <template #error>
+              <div class="image-slot">
+                <el-image :src="people" fit="cover"></el-image>
+              </div>
+            </template>
+          </el-image>
+        </div>
+        <div class="rightInfo" @click="getDetaill(props.data)">
+          <div class="title">
+            <span>
+              <span class="xinxi">{{ props.data.zlfqr }}</span>
+              <span class="xinxi" v-if="props.data.zlfqrSfzh">{{IdCard(props.data.zlfqrSfzh, 2)}}</span>
+            </span>
+            <span class="status">{{ handelZt(props.data.zlzxzt) }}</span>
+          </div>
+          <div>
+            <!-- <span class="zjhm">{{ IdCard(props.data.zlfqrSfzh, 3) }}岁</span>
+            <span class="zjhm">{{ props.data.zlfqrSfzh }}</span> -->
+          </div>
+          <div class="text text_detail">
+            内容：
+            <el-tooltip :placement="isDetail ? 'right':'left'">
+              <template #content>
+                <div style="max-width:400px;">{{props.data.zlnr}}</div>
+              </template>
+              {{props.data.zlnr}}
+            </el-tooltip>
+          </div>
+          <div class="newinfo">
+            <div class="text_detail"> 最新动态：
+              <el-tooltip :placement="isDetail ? 'right':'left'">
+                <template #content>
+                  <div style="max-width:400px;">{{props.data.zlzxqk}}</div>
+                </template>
+                {{ props.data.zlzxqk }}
+              </el-tooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="address">
+        <img class="addImg" src="@/assets/images/dingwei.png"/>
+        <span>{{ props.data.zlfsdd }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { IdCard } from "@/utils/validate.js";
+import people from "@/assets/images/default_male.png";
+import { reactive, ref, defineProps, defineEmits, onMounted } from "vue";
+const emit = defineEmits(["lookDetail"]);
+const props = defineProps({
+  data: Object,
+  dic: Object,
+  isDetail: Boolean
+});
+// 获取指令状态
+function handelZt(val) {
+  let obj = props.dic.zlzt.find((item) => {
+    return item.value == val;
+  });
+  return obj ? obj.label : "";
+}
+// 查看详情
+function getDetaill(item) {
+  emit("lookDetail", item);
+}
+</script>
+
+<style lang="scss" scoped>
+.zlItm {
+  position: relative;
+  padding: 0 10px 10px 14px;
+  box-sizing: border-box;
+  .time {
+    margin-bottom: 10px;
+    padding-left: 10px;
+    color: #1872FF;
+  }
+  .card {
+    padding: 10px 10px 4px 10px;
+    box-sizing: border-box;
+    border-top: 2px solid #00bfff;
+    line-height: 20px;
+    font-size: 14px;
+    background: #052955;
+    .card-cnt {
+      display: flex;
+      .leftImg {
+        width: 60px;
+        margin-right: 10px;
+        .el-image {
+          width: 100%;
+          max-height: 90px;
+        }
+      }
+      .rightInfo {
+        flex: 1;
+        .title {
+          display: flex;
+          justify-content: space-between;
+          width: 100%;
+          .xinxi {
+            color: #01e9ed;
+            margin-right: 10px;
+          }
+          .status {
+            padding: 1px 6px;
+            border: 1px solid #347fe9;
+            border-radius: 4px;
+            color: #25c9ff;
+          }
+        }
+        .zjhm {
+          color: #25c9ff;
+          margin-right: 10px;
+          font-size: 13px;
+        }
+
+        .text {
+          font-size: 13px;
+          color: #7CBFFF;
+          line-height: 22px;
+          margin-top: 4px;
+          span {
+            color: #7CBFFF;
+          }
+        }
+        .newinfo {
+          font-size: 13px;
+          line-height: 22px;
+          color: yellow;
+        }
+      }
+    }
+    .address {
+      justify-content: space-between;
+      margin-top: 4px;
+      padding-top: 6px;
+      box-sizing: border-box;
+      border-top: 1px solid #3b3737;
+      color: #6486ae;
+      .addImg {
+        margin-right: 4px;
+        vertical-align: text-top;
+      }
+    }
+  }
+  .time::before {
+    position: absolute;
+    content: "";
+    width: 26px;
+    height: 26px;
+    background: url("~@/assets/my/icon.png") no-repeat;
+    top: -7px;
+    left: -14px;
+    z-index: 22;
+  }
+}
+.zlItmLine {
+  border-left: 1px solid rgb(151, 147, 147);
+  margin-left: 10px;
+}
+
+.ss-content:hover {
+  .toolTips::after {
+    @include ShowToolTips;
+  }
+}
+.newinfo:hover {
+  .toolTips::after {
+    @include ShowToolTips;
+  }
+}
+// </style>

src/views/homeMy/index.vue

@@ -0,0 +1,971 @@
+<!--
+ * @Author: ZR
+ * @Date: 2023-11-06 09:43:52
+ * @LastEditTime: 2024-10-09 10:29:23
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+-->
+<template>
+  <div class="bigScrenn">
+    <!-- 头部 -->
+    <GdMap :isShow="true" />
+
+    <Head></Head>
+    <div class="leftSiecle transition" :style="{ left: showClassL ? '-20px' : '442px' }"
+      @click="showClassL = !showClassL"></div>
+    <div class="asideBox transition" :style="{ left: showClassL ? '-446px' : '0px' }">
+      <!-- 工作情况 -->
+      <div class="boder-small back-color">
+        <WorkCondition />
+      </div>
+      <!-- 街面巡组 -->
+      <div class="boder-small">
+        <StreetGroup />
+      </div>
+      <div class="boder-small">
+        <Spxl />
+        <!-- <div class="common-title flex">
+          <div>视频巡逻</div>
+          <div class="flex">
+            <el-select v-model="spTwoValue" class="mr6" placeholder="Select">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+            <el-select v-model="spTwoValue" placeholder="Select">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </div>
+        </div>
+        <div class="comom-cnt">
+          <VideoPatrols></VideoPatrols>
+        </div> -->
+      </div>
+    </div>
+    <div class="search_box">
+      <el-input v-model="keywords" style="max-width: 600px" placeholder="请输入关键词">
+        <template #append>
+          <el-button @click="searchFn" type="primary" style="background-color: #409eff;border: none;color: #fff;">搜索</el-button>
+        </template>
+      </el-input>
+    </div>
+    <div class="rightSiecle transition" :style="{ right: showClassR ? '-20px' : '442px' }"
+      @click="showClassR = !showClassR"></div>
+    <div class="asideBox transition" :style="{ right: showClassR ? '-446px' : '0px' }">
+      <div class="lineOption">
+        <div class="option" @click="openZdXl('ck')">
+          <div>巡逻</div>
+          <div>路线</div>
+        </div>
+        <div class="option" @click="openZdXl('zd')">
+          <div>制定</div>
+          <div>路线</div>
+        </div>
+      </div>
+      <div class="boder-middle">
+        <StreetCondition />
+      </div>
+      <div class="boder-small">
+        <div class="common-title flex">
+          无人机巡逻
+          <el-select v-model="spTwoValue" placeholder="Select">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </div>
+        <div class="comom-cnt">
+          <DronePatrols></DronePatrols>
+        </div>
+      </div>
+    </div>
+    <div class="statisModel" :class="isShowCount ? 'showCount' : 'heddenCount'">
+      <CountModel />
+    </div>
+    <!-- 底部按钮 -->
+    <BottomBtn />
+    <!-- 指令时间按钮 -->
+    <div class="addBox transition" :style="{ right: showClassR ? '0px' : '394px' }">
+      <el-popover :width="481" trigger="click" placement="left" v-model:visible="showVisibleZdrw"
+        :append-to-body="false">
+        <template #reference>
+          <div @click="clickAddZdrw" class="imgBox">
+            <span>指导巡逻</span>
+          </div>
+        </template>
+        <div class="depBox">
+          关键字：
+          <div style="margin-left: 14px; width: 80%">
+            <el-input v-model="listQueryZd.keyWord" placeholder="请输入关键字"></el-input>
+          </div>
+        </div>
+        <div class="depBox">
+          是否巡逻：
+          <div style="width: 80%">
+            <el-select v-model="listQueryZd.sfxl" placeholder="请选择是否巡逻" style="width: 100%">
+              <el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value">{{ item.label
+              }}</el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="depBox">
+          所属部门：
+          <MOSTY.Department clearable width="80%" v-model="listQueryZd.ssbmdm" />
+        </div>
+        <el-radio-group v-model="selectTime_Zd" @change="changeYcTime">
+          <el-radio label="今日" />
+          <el-radio label="昨日" />
+          <el-radio label="本周" />
+          <el-radio label="本月" />
+          <el-radio label="近30日" />
+          <el-radio label="本季度" />
+          <el-radio label="近半年" />
+          <el-radio label="近一年" />
+          <el-radio label="自定义" />
+        </el-radio-group>
+        <div>
+          <el-date-picker v-model="zdTime" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期" :teleported="false" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 95%"
+            :readonly="zdTime == '自定义' ? false : true" />
+        </div>
+        <CheckBox :data="zldwList" @changeData="changeDataZldrw" />
+        <div class="footerBtns">
+          <el-button @click="handleZd">上图</el-button>
+          <el-button @click="calcelZd('cancel')">取消</el-button>
+        </div>
+      </el-popover>
+
+      <el-popover :width="481" trigger="click" placement="left" v-model:visible="showVisible" :append-to-body="false">
+        <template #reference>
+          <div @click="clickAddEvent" class="imgBox">
+            <span>重点巡逻</span>
+          </div>
+        </template>
+        <div class="depBox">
+          关键字：
+          <div style="margin-left: 14px; width: 80%">
+            <el-input v-model="listQuery.keyWord" placeholder="请输入关键字"></el-input>
+          </div>
+        </div>
+        <div class="depBox">
+          是否巡逻：
+          <div style="width: 80%">
+            <el-select v-model="listQuery.sfxl" placeholder="请选择是否巡逻" style="width: 100%">
+              <el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value">{{ item.label
+              }}</el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="depBox">
+          所属部门：
+          <MOSTY.Department clearable width="80%" v-model="listQuery.ssbmdm" />
+        </div>
+        <el-radio-group v-model="selectTime_yc" @change="changeYcTime">
+          <el-radio label="今日" />
+          <el-radio label="昨日" />
+          <el-radio label="本周" />
+          <el-radio label="本月" />
+          <el-radio label="近30日" />
+          <el-radio label="本季度" />
+          <el-radio label="近半年" />
+          <el-radio label="近一年" />
+          <el-radio label="自定义" />
+        </el-radio-group>
+        <div>
+          <el-date-picker v-model="fzycTime" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期" :teleported="false" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 95%"
+            :readonly="selectTime_yc == '自定义' ? false : true" />
+        </div>
+        <CheckBox :data="timeList" @changeData="changeDataBC" />
+        <div class="footerBtns">
+          <el-button @click="handleFzyc">上图</el-button>
+          <el-button @click="calcelFzyc('cancel')">取消</el-button>
+        </div>
+      </el-popover>
+      <el-popover :width="226" trigger="click" placement="left" v-model:visible="showVisibleWarning"
+        :append-to-body="false">
+        <template #reference>
+          <div @click="showVisibleWarning = !showVisibleWarning" class="imgBox">
+            <span>下发指令</span>
+          </div>
+        </template>
+        <div class="footerBtns">
+          <el-button @click="clickXfzl">公安资源</el-button>
+          <el-button @click="clickQfqz">群防群治人员</el-button>
+        </div>
+      </el-popover>
+    </div>
+    <!-- 左边弹窗 -->
+    <LeftDialog :isPosition="showClassL" />
+    <!-- 中间边弹窗 -->
+    <CenterDialog />
+    <!-- 右边弹窗 -->
+    <RightDialog :isPosition="showClassR" />
+    <!-- 警组弹框弹框 -->
+    <PoliceGroupInfo v-if="show.jzgroup" :data="jzxqList" />
+    <!-- 下发指令 -->
+    <XiafaZl />
+    <!-- 群防群治 -->
+    <QFQZ />
+    <!-- 下发指令详情 -->
+    <ZlxfList />
+    <!-- 犯罪预测 -->
+    <FzycDialog v-if="show.fzyc" :data="fzycInfo" />
+    <!-- 选房区警情 -->
+    <XfqJq />
+    <!-- 意见收集 -->
+    <YjsjDialog :isShow="show.yisj" v-if="show.yisj" @closeDialog="show.yisj = false" />
+    // 指定路线
+    <ZdlxDialog :isShow="show.zdlx" v-if="show.zdlx" @closeDialog="show.zdlx = false" />
+  </div>
+  <teleport to="#app" v-if="visibleDialog">
+    <WarningCenter v-model="show.yjzx" v-if="show.yjzx" @closeDialog="visibleDialog = false" />
+    <XssbInfo v-model="show.xssb" v-if="show.xssb" @closeDialog="visibleDialog = false" />
+    <BbtsInfo v-model="show.bbts" v-if="show.bbts" @closeDialog="visibleDialog = false" />
+    <PiliceCaseCount v-model="show.jqtj" v-if="show.jqtj" @closeDialog="visibleDialog = false" />
+    <DwryCount v-model="show.dwryts" v-if="show.dwryts" @closeDialog="visibleDialog = false" />
+  </teleport>
+  <!-- @refresh="getList" -->
+  <XfrwDialog ref="xfDiloag"></XfrwDialog>
+</template>
+
+<script setup>
+import { Search } from '@element-plus/icons-vue'
+import { timeValidate } from "@/utils/tools.js";
+import { qcckGet, qcckPost } from '@/api/qcckApi'
+import { ElNotification } from "element-plus";
+import WarningCenter from "./modelDialog/warningCenter.vue";
+import YjsjDialog from "./modelDialog/yjsjDialog.vue";
+import ZdlxDialog from "./modelDialog/zdlxDialog.vue";
+import XssbInfo from "./modelDialog/xssbInfo.vue";
+import BbtsInfo from "./modelDialog/bbtsInfo.vue";
+import PiliceCaseCount from "./modelDialog/piliceCaseCount.vue";
+import DwryCount from "./modelDialog/dwryCount.vue";
+import { queryListfzyc, queryListZdrw, tbYsSxtList, getSelectVigilant } from "@/api/dpApi/home.js";
+import { getRecentDay, getThistWeekDare } from "@/utils/tools.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import emitter from "@/utils/eventBus.js";
+import GdMap from "@/components/GdMap/index.vue";
+import Head from "./layout/head.vue";
+import CheckBox from "@/components/checkBox/index";
+import XiafaZl from "./components/dialog/xiafaZl.vue";
+import QFQZ from "./components/dialog/qfqz.vue";
+import ZlxfList from "./components/dialog/zlxfList.vue";
+import XfqJq from "./components/xfqJq/index.vue";
+import WorkCondition from "./layout/workCondition.vue";
+import Spxl from "./layout/spxl.vue";
+import StreetGroup from "./layout/streetGroup.vue";
+import StreetCondition from "./layout/streetCondition.vue";
+import CountModel from "./layout/statisticsModel.vue";
+import LeftDialog from "./components/leftDialog.vue";
+import CenterDialog from "./components/centerDialog.vue";
+import RightDialog from "./components/rightDialog.vue";
+import BottomBtn from "./layout/bottomBtn.vue";
+import PoliceGroupInfo from "./layout/streetInfo.vue";
+import FzycDialog from "./layout/fzycDialog.vue";
+import { tbQwXfAddBxx } from '@/api/lz/backstage'
+// import { queryListZdrw } from '@/api/dpApi/home'
+import XfrwDialog from '@/views/backOfficeSystem/AlarmLinkage/PatrolLine/components/xfrwDialog.vue'
+import {
+  onMounted,
+  ref,
+  onUnmounted,
+  watch,
+  getCurrentInstance,
+  reactive
+} from "vue";
+const visibleDialog = ref(false);
+const keywords = ref("")
+const show = reactive({
+  yjzx: false,
+  jqtj: false,
+  bbts: false, //群访信息
+  xssb: false, //线索上报
+  dwryts: false, //单位人员统计
+  yisj: false, //意见收集
+  fzyc: false, //犯罪预测
+  zdlx: false, //制定路线
+  jzgroup: false //展示警组弹窗
+});
+
+const showVisibleZdrw = ref(false);
+const showVisibleWarning = ref(false);
+const { proxy } = getCurrentInstance();
+const { D_BZ_SF, D_BZ_SD } = proxy.$dict("D_BZ_SF", "D_BZ_SD");
+const showVisible = ref(false);
+const selectTime_yc = ref("今日"); //犯罪预测时间类型
+const selectTime_Zd = ref("今日"); //犯罪预测时间类型
+const listQuery = ref({});
+const listQueryZd = ref({});
+const fzycTime = ref([getRecentDay(0), getRecentDay(0)]);
+const zdTime = ref([getRecentDay(0), getRecentDay(0)]);
+const circleList = ref([]);
+const showClassL = ref(false); //左列折叠
+const showClassR = ref(false); //右列折叠
+const jzxqList = ref({}); //警组列表详情
+const fzycInfo = ref({}); //犯罪预测
+const spvalue = ref("Option1");
+const spTwoValue = ref("Option1");
+const options = ref([
+  {
+    value: "Option1",
+    label: "Option1"
+  },
+  {
+    value: "Option2",
+    label: "Option2"
+  },
+  {
+    value: "Option3",
+    label: "Option3"
+  },
+  {
+    value: "Option4",
+    label: "Option4"
+  },
+  {
+    value: "Option5",
+    label: "Option5"
+  }
+]);
+const timeList = ref({
+  list: [
+    "09:00-13:00",
+    "13:00-17:00",
+    "17:00-21:00",
+    "21:00-01:00",
+    "01:00-09:00"
+  ],
+  hasChoose: []
+});
+const condition = ref()
+const zldwList = reactive({
+  list: [],
+  hasChoose: []
+});
+const isShowCount = ref(false); //是否展示统计
+watch(
+  () => showClassR.value,
+  (val) => {
+    emitter.emit("followUp", !val);
+  }
+);
+watch(
+  () => D_BZ_SD,
+  (val) => {
+    zldwList.list = val.value.map((v) => {
+      return v.label;
+    });
+  },
+  { immediate: true, deep: true }
+);
+onMounted(() => {
+  window.openTk = openTk;
+  getListData();
+  // 融合通迅
+  let idEntityCard = window.localStorage.getItem("idEntityCard");
+  let sfrh = window.localStorage.getItem("SFRH");
+  if (sfrh == 1 && idEntityCard) {
+    try {
+      SPPUC.init(
+        idEntityCard,
+        "",
+        function () { },
+        function (device_id, type, [lng, lat, speed]) { }
+      );
+    } catch { }
+  }
+  // 展示犯罪预测
+  emitter.on("showFzycInfo", (res) => {
+    show.fzyc = res.type ? true : false;
+    fzycInfo.value = res.info;
+  });
+
+  // 展示警组
+  emitter.on("showJzInfo", (res) => {
+    show.jzgroup = res ? true : false;
+    if (res) {
+      res.txzb =
+        typeof res.txzb == "string"
+          ? JSON.parse(res.txzb)
+          : res.txzb
+            ? res.txzb
+            : [];
+      res.pbmj =
+        typeof res.pbmj == "string"
+          ? JSON.parse(res.pbmj)
+          : res.pbmj
+            ? res.pbmj
+            : [];
+      res.pbfj =
+        typeof res.pbfj == "string"
+          ? JSON.parse(res.pbfj)
+          : res.pbfj
+            ? res.pbfj
+            : [];
+      res.jyqx =
+        typeof res.jyqx == "string"
+          ? JSON.parse(res.jyqx)
+          : res.jyqx
+            ? res.jyqx
+            : [];
+      res.pbcl =
+        typeof res.pbcl == "string"
+          ? JSON.parse(res.pbcl)
+          : res.pbcl
+            ? res.pbcl
+            : [];
+      jzxqList.value = res;
+      jzxqList.value.openJyqx = [];
+      jzxqList.value.openTxzb = [];
+    }
+    if (!show.jzgroup) {
+      emitter.emit("deleteText"); //清除巡防区文字
+      emitter.emit("deletePointArea", "xfq"); //清除巡防区
+    }
+  });
+  //获取条件
+  emitter.on("conditions", (val) => {
+    condition.value = val
+  });
+  emitter.on("showWarning", (val) => {
+    visibleDialog.value = true;
+    switch (val) {
+      case "YJZX": //预警中心
+        show.yjzx = true;
+        break;
+      case "JQTJ": //警情统计
+        show.jqtj = true;
+        break;
+      case "QFXS": //群防线索
+        show.xssb = true;
+        break;
+      case "BBTS": //报备提示
+        show.bbts = true;
+        break;
+      case "DWRYTJ": //单位人员统计
+        show.dwryts = true;
+        break;
+      case "YJSJ": //意见收集
+        show.yisj = true;
+        break;
+    }
+  });
+
+  // 线索上报 推送播放
+  emitter.on("socketXSSB", (val) => {
+    val.tp = val.tp ? val.tp.split(",") : [];
+    let html = `
+    <div class="newCard">
+      <div class="title two_text_detail">${val.nr}</div>
+      <div class="text">
+        上报人：<span class="info">${val.xm}（ ${val.lxdh} ）</span></span>
+      </div>
+      <div class="text">
+        线索上报类型：<span class="info">${val.lxmc}</span></span>
+      </div>
+      <div class="text">图片：`;
+    val.tp.forEach((it) => {
+      html += `<img style="width:60px; height:60px; margin-left:2px;" src="/mosty-base/minio/image/download/${it}" />`;
+    });
+    html += ` </div></div>`;
+    ElNotification({
+      type: "warning",
+      title: "线索上报",
+      showClose: true,
+      dangerouslyUseHTMLString: true,
+      position: "bottom-right",
+      message: html
+    }); //消息推送
+  });
+});
+
+const openTk = (id) => {
+  let obj = circleList.value.find((item) => {
+    return item.id == id;
+  });
+  if (obj) emitter.emit("showAj", [obj]);
+};
+// 搜索
+const searchFn = () => {
+  emitter.emit("deletePointArea", "search_bxd");
+  emitter.emit("removeAll", "search_bxx");
+  qcckGet({ keyword: keywords.value }, "/mosty-jmxf/jbldBxx/getBxxByKeyWord").then(res => {
+    let lis = res || []
+    let coords = []
+    let bxd = []
+    lis.forEach(v => {
+      let obj = { coords: [v.zb], text: v.bxxMc }
+      let zbd= v.bxds?v.bxds.map(item => {
+        return {
+          jd: item.jd,
+          wd: item.wd,
+          bxdMc:item.bxdMc,
+          icon: item.sfdk == '0' || item.sfdk==null ? require("@/assets/point/zsdw.png") : require("@/assets/point/ydk.png")
+        }
+      }):[]
+      bxd = [...bxd, ...zbd]
+      coords.push(obj)
+    })
+    emitter.emit("echoLine", { coords, width: 4, flag: "search_bxx", type: 'dash', isclear: true, color: '#ff0000' });
+    handlePoint(bxd, "", "search_bxd", 0.6, '#FF0000');
+  })
+}
+// 获取列表
+function getListData() {
+  // , zdjqtjlx: "03", czzt: "0,1"
+  let data = { pageSize: 1000, pageNum: 1 };
+  getSelectVigilant(data).then((res) => {
+    circleList.value = res.records;
+    for (let i = 0; i < res.records.length; i++) {
+      const el = res.records[i];
+      emitter.emit("SsCircle", el);
+      let { jd, wd } = el;
+      emitter.emit("addPointArea", {
+        coords: [{ jd, wd }],
+        icon: require("@/assets/point/sos.png"),
+        flag: "sosPoint"
+      });
+    }
+  });
+}
+//点击下发指令
+function clickXfzl() {
+  emitter.emit("removePlot", "quanXuan");
+  emitter.emit("deletePointArea", "centerpoint");
+  emitter.emit("closeAllDialog");
+  emitter.emit("showZlxf");
+}
+//点击群防群治
+function clickQfqz() {
+  emitter.emit("removePlot", "quanXuan");
+  emitter.emit("deletePointArea", "centerpoint");
+  emitter.emit("closeAllDialog");
+  emitter.emit("showQfqz");
+}
+//点击犯罪预测
+function clickAddEvent() {
+  showVisible.value = !showVisible.value;
+  if (!showVisible.value) calcelFzyc("");
+}
+
+//点击指导任务
+function clickAddZdrw() {
+  showVisibleZdrw.value = !showVisibleZdrw.value;
+  if (!showVisibleZdrw.value) calcelZd("");
+}
+
+// 犯罪预测时间选择
+function changeYcTime(val) {
+  let time = [];
+  switch (val) {
+    case "今日":
+      time = [getRecentDay(0), getRecentDay(0)];
+      break;
+    case "昨日":
+      time = [getRecentDay(-1), getRecentDay(-1)];
+      break;
+    case "本周":
+      time = getThistWeekDare("week");
+      break;
+    case "本月":
+      time = getThistWeekDare("month");
+      break;
+    case "近30日":
+      time = [getRecentDay(-30), getRecentDay(0)];
+      break;
+    case "本季度":
+      time = getThistWeekDare("quarter");
+      break;
+    case "近半年":
+      time = [getRecentDay(-181), getRecentDay(0)];
+      break;
+    case "近一年":
+      time = [getRecentDay(-365), getRecentDay(0)];
+      break;
+  }
+  fzycTime.value = time;
+}
+
+// 取消犯罪预测
+function calcelFzyc(val) {
+  fzycTime.value = [getRecentDay(0), getRecentDay(0)];
+  listQuery.value = { ssbmdm: "" };
+  selectTime_yc.value = "今日";
+  showVisible.value = false;
+  timeList.value.hasChoose = [];
+}
+// 取消犯罪预测
+function calcelZd(val) {
+  zdTime.value = [getRecentDay(0), getRecentDay(0)];
+  listQueryZd.value = { ssbmdm: "" };
+  selectTime_Zd.value = "今日";
+  showVisibleZdrw.value = false;
+  zldwList.hasChoose = [];
+}
+// 选择班次
+function changeDataBC(val) {
+  timeList.value.hasChoose = val;
+}
+
+// 选择指导任务
+function changeDataZldrw(val) {
+  zldwList.hasChoose = val;
+}
+
+// 指导巡逻
+function handleZd() {
+  emitter.emit("deletePointArea", "zdxl_zdrw");
+  let list = D_BZ_SD.value.filter((v) => {
+    if (zldwList.hasChoose.includes(v.label)) return v;
+  });
+
+  let params = {
+    ...listQueryZd.value,
+    sdList: list.map((v) => {
+      return v.value;
+    }),
+    kssj: zdTime.value[0],
+    jssj: zdTime.value[1]
+  };
+  queryListZdrw(params).then((res) => {
+    if (res.length == 0) return false;
+    let cc = [];
+    let list = res.map((el, index) => {
+      let centerPoint = [el.zxX, el.zxY];
+      if (index == 0) cc = centerPoint;
+      let position = [
+        [Number(el.x1), Number(el.y1)],
+        [Number(el.x2), Number(el.y2)]
+      ];
+      let text = el.dz + " " + el.xfsd;
+      let obj = {
+        position: position,
+        text,
+        id: el.id,
+        userData: el,
+        sfxl: el.sfxl
+      };
+      return obj;
+    });
+    let arr1 = list.filter((v) => {
+      return v.sfxl == 1;
+    });
+    let arr2 = list.filter((v) => {
+      return v.sfxl != 1;
+    });
+    let params1 = {
+      fontColor: "#b51209",
+      coords: arr2,
+      type: "rectangle",
+      flag: "zdxl_zdrw",
+      color: "rgba(255,255,0,0.5)",
+      linecolor: "#f51616"
+    };
+    let params2 = {
+      fontColor: "#b51209",
+      coords: arr1,
+      type: "rectangle",
+      flag: "zdxl_zdrw",
+      color: "rgba(255,255,0,0.5)",
+      linecolor: "#1C97FF"
+    };
+    emitter.emit("echoPlane", params1);
+    emitter.emit("echoPlane", params2);
+    emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
+  });
+}
+
+// 犯罪预测
+function handleFzyc() {
+  emitter.emit("deletePointArea", "zdxl_fzyc");
+  let list = timeList.value.hasChoose.map((item) => {
+    return item.slice(0, 2) + item.slice(5, 8);
+  });
+  let params = {
+    ...listQuery.value,
+    bcList: list,
+    kssj: fzycTime.value[0],
+    jssj: fzycTime.value[1]
+  };
+  queryListfzyc(params).then((res) => {
+    if (res.length == 0) return false;
+    let cc = [];
+    let list = res.map((el, index) => {
+      let centerPoint = [el.zxX, el.zxY];
+      if (index == 0) cc = centerPoint;
+      let position = [
+        [Number(el.x1), Number(el.y1)],
+        [Number(el.x2), Number(el.y2)]
+      ];
+      let text = el.realDate + " " + el.bc;
+      let obj = {
+        position: position,
+        text,
+        id: el.id,
+        userData: el,
+        sfxl: el.sfxl
+      };
+      return obj;
+    });
+    let arr1 = list.filter((v) => {
+      return v.sfxl == 1;
+    });
+    let arr2 = list.filter((v) => {
+      return v.sfxl != 1;
+    });
+    let params1 = {
+      fontColor: "#12fdb8",
+      coords: arr2,
+      type: "rectangle",
+      flag: "zdxl_fzyc",
+      color: "rgba(2,20,51,0.5)",
+      linecolor: "#f51616"
+    };
+    let params2 = {
+      fontColor: "#12fdb8",
+      coords: arr1,
+      type: "rectangle",
+      flag: "zdxl_fzyc",
+      color: "rgba(2,20,51,0.5)",
+      linecolor: "#1C97FF"
+    };
+    emitter.emit("echoPlane", params1);
+    emitter.emit("echoPlane", params2);
+    emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
+  });
+}
+const xfDiloag = ref(false)
+//打开定制路线
+const openZdXl = (val) => {
+  if (val == 'zd') {
+    show.zdlx = true;
+  } else {
+    emitter.emit("openZdXl", { show: true, type: 'ck' });
+  }
+};
+// 处理撒点
+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 });
+}
+onUnmounted(() => {
+  emitter.off("showWarning");
+});
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+
+// 中间统计数据
+.statisModel {
+  position: absolute;
+  top: 100px;
+  left: 50%;
+  transform: translateX(-50%);
+  overflow: hidden;
+}
+
+.Rank {
+  left: 500px;
+  position: absolute;
+  z-index: 999;
+  color: #010f30;
+  font-size: 20px;
+  top: 100px;
+  left: 390px;
+  cursor: pointer;
+}
+
+.showCount {
+  width: 1100px;
+  height: 90px;
+  transition: height 1s;
+  -webkit-transition: height 1s;
+}
+
+.heddenCount {
+  width: 1100px;
+  height: 0px;
+  transition: height 1s;
+  -webkit-transition: height 1s;
+}
+
+.transition {
+  transition: all 0.5s;
+}
+
+.lineOption {
+  position: absolute;
+  z-index: 99;
+  bottom: 100px;
+  left: -100px;
+
+  .option {
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+    background: url('~@/assets/images/quan.png') no-repeat center center;
+    background-size: 100% 100%;
+    width: 80px;
+    margin-bottom: 10px;
+    margin: auto;
+    height: 80px;
+    border-radius: 50%;
+    margin: auto 0;
+    color: #0f6cd4;
+
+    div {
+      width: 99%;
+      text-align: center;
+
+    }
+  }
+}
+
+.depBox {
+  display: flex;
+  align-items: center;
+  color: #00bfff;
+  margin-bottom: 10px;
+}
+
+.addBox {
+  color: #fff;
+
+  ::v-deep .el-radio {
+    width: 74px;
+    margin-right: 15px;
+    color: #fff;
+  }
+}
+
+.footerBtns {
+  margin-top: 10px;
+  text-align: center;
+}
+
+::v-deep .el-input__inner {
+  background-color: transparent;
+  border: 1px solid #224ab5;
+  // color: #fff;
+  margin-right: 10px;
+}
+
+::v-deep .el-range-editor .el-range-input {
+  background: transparent;
+  // color: #fff;
+}
+
+::v-deep .el-date-editor .el-range-separator {
+  color: #fff;
+}
+
+::v-deep .el-checkbox {
+  color: #fff;
+}
+
+::v-deep .el-popper.is-light {
+  background: #00314e;
+  border: 1px solid #00314e;
+}
+
+::v-deep .el-popper.is-light .el-popper__arrow::before {
+  background: #00314e;
+}
+
+.common-title {
+  padding: 0 10px 0 54px;
+  box-sizing: border-box;
+  font-size: 22px;
+  font-family: "YSBTH";
+  background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
+  -webkit-background-clip: text;
+  justify-content: space-between;
+}
+
+.comom-cnt {
+  height: calc(100% - 30px);
+  padding: 4px 20px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+::v-deep .el-select .el-input__inner {
+  // width: 100px;
+  height: 30px;
+  // background: #061628;
+  // background: url("~@/assets/images/streetBi/xzk.png") no-repeat center center;
+  background-size: 100% 100%;
+  // border: 1px solid #0072ff;
+  border-radius: 2px;
+  // color: #fff !important;
+}
+
+.search_box {
+  position: absolute;
+  top: 90px;
+  left: 448px;
+  z-index: 99;
+
+  ::v-deep .el-input__inner {
+    color: #606266 !important;
+    width: 20vw;
+    margin-right: 0;
+  }
+}
+</style>
+
+<style>
+.el-notification {
+  background: #052955;
+  border: 1px solid #ff0526;
+  box-shadow: inset 0 0 10px #ff0526;
+}
+
+.el-notification__content,
+.el-notification__title {
+  color: #fff;
+}
+
+.newCard {
+  line-height: 20px;
+  font-size: 14px;
+  background: #052955;
+}
+
+.newCard .text {
+  font-size: 12px;
+  color: #6585af;
+}
+
+.newCard .text span {
+  color: #0093ed;
+}
+
+.newCard .picture {
+  display: flex;
+}
+
+.newCard .picture .pictureLeft {
+  width: 60px;
+  height: 60px;
+  margin-right: 2px;
+}
+
+.el-notification.right {
+  right: 410px;
+}
+
+.el-notification .el-notification--warning {
+  color: #ff0526;
+}
+
+.el-notification .el-notification__closeBtn {
+  color: #fff;
+  top: 4px;
+  right: 4px;
+}
+</style>

src/views/homeMy/layout/chooseTable.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="tableBox1" v-if="props.visible">
+    <MyTable :tableData="tableData.tableData" :tableColumn="tableData.tableColumn" :tableHeight="tableData.tableHeight"
+      :key="tableData.keyCount" :tableConfiger="tableData.tableConfiger">
+    </MyTable>
+  </div>
+</template>
+
+<script setup>
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import MyTable from "@/components/aboutTable/DarkTable.vue";
+import { reactive, defineProps, ref, watch, watchEffect } from "vue";
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {}
+  },
+  visible: Boolean
+});
+const tableData = reactive({
+  tableData: [],
+  tableColumn: [
+    { label: "报警人", prop: "bjrXm" },
+    { label: "报警电话", prop: "bjdh", showOverflowTooltip: true },
+    { label: "报警类别", prop: "bjlbmc", showOverflowTooltip: true },
+    { label: "报警时间", prop: "bjsj", showOverflowTooltip: true },
+    { label: "警情内容", prop: "bjnr", showOverflowTooltip: true },
+    { label: "事发地址", prop: "sfdz", showOverflowTooltip: true }
+  ],
+  tableHeight: 561,
+  keyCount: 0,
+  tableConfiger: {
+    loading: false,
+    rowHieght: 61,
+    showSelectType: "null",
+    haveControls: false,
+    showIndex: false
+  },
+})
+
+
+
+// 获取数据
+const getData = () => {
+  qcckGet({ fzycid: props.data.id }, '/mosty-jmxf/tbFzyc/getFzycJq').then(res => {
+    tableData.tableData = res || [];
+  })
+}
+watch(() => props.data, (val) => {
+  if (val) getData();
+}, { immediate: true, deep: true })
+
+
+</script>
+
+<style lang="scss" scoped>
+.tableBox1 {
+  width: 956px;
+  height: 100%;
+  padding-left: 20px;
+
+}
+</style>

src/views/homeMy/layout/dialogModular.vue

@@ -0,0 +1,116 @@
+<!--
+ * @Author: your name
+ * @Date: 2023-01-05 16:04:29
+ * @LastEditTime: 2023-01-30 15:44:49
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \lz_web_new\src\views\lz\home\layout\dialogModular.vue
+-->
+<template>
+<div class="modelDialogBox">
+  <el-dialog
+    v-model="dialogVisible"
+    title="系统模块"
+    width="800px"
+    :show-close="false"
+    :center="true"
+    :before-close="handleClose"
+  >
+    <ul class="modularList">
+      <li @click="gotoPage('/serviceManagement')">
+        <div class="itemBG">
+          <div>
+            <img src="@/assets/images/ydImg/qwzx.png" />
+          </div>
+          <div>勤务中心</div>
+        </div>
+      </li>
+      <li @click="gotoPage('/warningCenters')">
+        <div class="itemBG">
+          <div>
+            <img src="@/assets/images/ydImg/yjzx.png" />
+          </div>
+          <div>预警中心</div>
+        </div>
+      </li>
+      <li @click="gotoPage('/taskCenters')">
+        <div class="itemBG">
+          <div>
+            <img src="@/assets/images/ydImg/rwzx.png" />
+          </div>
+          <div>任务中心</div>
+        </div>
+      </li>
+   
+    
+      <li @click="gotoPage('/editPassword')">
+        <div class="itemBG">
+          <div>
+            <img src="@/assets/images/ydImg/ht.png" />
+          </div>
+          <div>前往后台</div>
+        </div>
+      </li>
+    </ul>
+  </el-dialog>
+</div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { defineEmits } from "vue";
+import { useRoute, useRouter } from "vue-router";
+const emit = defineEmits(["modularShowFn"]);
+const dialogVisible = ref(true);
+const router = useRouter();
+function handleClose() {
+  emit("modularShowFn", false);
+}
+// 跳转页面
+function gotoPage(url){
+  router.replace(url);
+  handleClose()
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-footer button:first-child {
+  margin-right: 10px;
+}
+ul.modularList {
+  overflow: hidden;
+  li {
+    text-align: center;
+    float: left;
+    width: 25%;
+    font-size: 14px;
+    color: #fff;
+    line-height: 24px;
+    height: 180px;
+    .itemBG {
+      margin: 0 auto;
+      width: 140px;
+      height: 180px;
+      background: url("~@/assets/images/ydImg/bg.png") no-repeat center center;
+      background-size: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+  }
+}
+
+
+</style>
+<style>
+.modelDialogBox .el-dialog{
+  margin-top: 20vh;
+}
+.modelDialogBox .el-dialog__header{
+  border-bottom: 2px solid;
+  border-top: 2px solid;
+  border-image: linear-gradient(90deg,rgba(0,216,247,0) 0%,#2FD5FE 50%,rgba(0,216,247,0) 99%) 2 2 2 2;
+  background: linear-gradient(90deg,rgba(7,28,76,.3), rgba(3,70,156,.9) ,rgba(7,28,76,.3));
+  border-radius: 5px;
+}
+</style>

src/views/homeMy/layout/fzycDialog.vue

@@ -0,0 +1,300 @@
+<template>
+  <div
+    class="dialogBox"
+    :style="`right:${elRight}px;bottom:${elBottom}px`"
+    draggable="true"
+    ref="dialogBoxYpfx"
+    @dragstart="dragstart($event)"
+    @dragend="dragend($event)"
+  >
+    <div class="title">
+      <span>
+       <span class="mc">犯罪预测</span>
+       <span class="btn" @click="isShowTable = true ">警情</span>
+       <span class="btn" @click="isShowTable = false">返回</span>
+      </span>
+      <span @click="close" class="close"><el-icon><Close /></el-icon></span>
+    </div>
+    <div class="info-Big-Box" v-if="!isShowTable">
+      <div class="tableBox noScollLine" v-loading="loading">
+        <!-- 标题 -->
+        <el-row>
+          <el-col :span="4" class="grid-content-top">所属部门</el-col>
+          <el-col :span="5" class="grid-content-top">时间</el-col>
+          <el-col :span="15">
+            <el-row  style="width:100%;">
+              <el-col :span="3" class="grid-content-top">巡逻警组</el-col>
+              <el-col :span="3" class="grid-content-top">巡逻时长</el-col>
+              <el-col :span="3" class="grid-content-top">巡逻里程</el-col>
+              <el-col :span="3" class="grid-content-top">警情数</el-col>
+              <el-col :span="3" class="grid-content-top">签收状态</el-col>
+              <el-col :span="3" class="grid-content-top">盘查人员</el-col>
+              <el-col :span="3" class="grid-content-top">盘查车辆</el-col>
+              <el-col :span="3" class="grid-content-top">操作</el-col>
+            </el-row>
+          </el-col>
+        </el-row>
+        <div class="null" v-if="list.length <= 0 && !loading" >
+          <el-empty description="没有数据" />
+        </div>
+        <!-- 循环数据 -->
+        <el-row v-for="(item,index) in list" :key="index">
+            <el-col :span="4" class="grid-content-nr">
+                <el-tooltip :content="item.ssbm" placement="bottom">
+                  <div class="flexTool"><div class="w-78">{{item.ssbm}}</div></div>
+                </el-tooltip>
+            </el-col>
+          <el-col :span="20" v-if="item.children && item.children.length > 0">
+            <el-row style="width:100%;" v-for="(it,idx) in item.children" :key="idx+0.1">
+              <el-col :span="6" class="grid-content-nr">
+                <el-tooltip :content="it.xlkssj +' ~ ' + it.xlkssj" placement="bottom" >
+                  <div class="flexTool"><div class="w-115">{{it.xlkssj}} ~ {{it.xlkssj}}</div></div>
+                </el-tooltip>
+              </el-col>
+              <el-col :span="18">
+                <el-row style="width:100%;">
+                  <el-col :span="3" class="grid-content-nr">{{it.xzmc}}</el-col>
+                  <el-col :span="3" class="grid-content-nr">{{(it.xfsc/3600).toFixed(2)}}</el-col>
+                  <el-col :span="3" class="grid-content-nr">{{(it.xflc/1000).toFixed(2)}}</el-col>
+                  <el-col :span="3" class="grid-content-nr">{{ props.data.prob}}</el-col>
+                  <el-col :span="3" class="grid-content-nr"> <el-text type="warning">{{it.sfqsmc}}</el-text> </el-col>
+                  <el-col :span="3" class="grid-content-nr">{{it.pcry}}</el-col>
+                  <el-col :span="3" class="grid-content-nr">{{it.pccl}}</el-col>
+                  <el-col :span="3" class="grid-content-top" @click="ganhdleGJHF(it)">轨迹回放</el-col>
+                </el-row>
+              </el-col>
+            </el-row>
+          </el-col>
+          <el-col :span="20" v-else>
+            <el-row style="width:100%;">
+              <el-col :span="6" class="grid-content-nr">
+                <el-tooltip :content="item.xlkssj +' ~ ' + item.xlkssj" placement="bottom" >
+                  <div class="flexTool"><div class="w-115">{{item.xlkssj}} ~ {{item.xlkssj}}</div></div>
+                </el-tooltip>
+              </el-col>
+              <el-col :span="18">
+                <el-row style="width:100%;">
+                  <el-col :span="3" class="grid-content-nr">{{item.xzmc}}</el-col>
+                  <el-col :span="3" class="grid-content-nr">{{(item.xfsc/3600).toFixed(2)}}</el-col>
+                  <el-col :span="3" class="grid-content-nr">{{(item.xflc/1000).toFixed(2)}}</el-col>
+                  <el-col :span="3" class="grid-content-nr"> {{ props.data.prob}} </el-col>
+                  <el-col :span="3" class="grid-content-nr"> <el-text type="warning">{{item.sfqsmc}}</el-text> </el-col>
+                  <el-col :span="3" class="grid-content-nr">{{item.pcry}}</el-col>
+                  <el-col :span="3" class="grid-content-nr">{{item.pccl}}</el-col>
+                  <el-col :span="3" class="grid-content-top" @click="ganhdleGJHF(item)">轨迹回放</el-col>
+                </el-row>
+              </el-col>
+            </el-row>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <div class="info-Big-Box">
+      <!-- 警情 -->
+      <ChooseTable title="警情详情" :visible="isShowTable" :data="props.data" v-if="isShowTable" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import ChooseTable from './chooseTable.vue'
+import { queryQfzxl } from "@/api/dpApi/home.js";
+import { getRecentDay,getThistWeekDare } from "@/utils/tools.js";
+import { qcckPost } from "@/api/qcckApi.js";
+import { ref, onMounted, onUnmounted,reactive, defineProps, getCurrentInstance,  watch } from "vue";
+import { timeValidate } from "@/utils/time.js";
+import emitter from "@/utils/eventBus.js";
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {}
+  }
+});
+const daterangeTime = ref([])
+const radioTime = ref('今日')
+const dialogBoxYpfx = ref();
+const initWidth = ref(0); //父元素宽度
+const initHeight = ref(0); //父元素高度
+const startClientX = ref(0); //元素拖拽前距离浏览器X轴位置
+const startClientY = ref(0); //元素拖拽前距离浏览器Y轴位置
+const elRight = ref(10); //元素右偏移量
+const elBottom = ref(120); //元素底偏移量
+const dateRange = ref([getRecentDay(0), getRecentDay(0)])
+const list = ref([])
+const loading = ref(false)
+
+const isShowTable = ref(false) //展示
+
+watch(() => props.data,(val) => {
+  if(val) fzyjcJL(val.id);
+},{immediate:true,deep:true});
+
+onMounted(() => {
+  initBodySize();
+});
+
+
+
+function fzyjcJL (id){
+  loading.value = true
+  queryQfzxl({ id }).then((res) => {
+    loading.value = false
+    let arr = res || []
+    let brr = [];
+    let dms = []
+    arr.forEach((item) => {
+      if(!dms.includes(item.ssbmdm)){
+        dms.push(item.ssbmdm);
+        let obj = {...item}
+        obj.children = [item];
+        brr.push(obj)
+      }else{
+        let inx = dms.findIndex(val=> val == item.ssbmdm)
+        brr[inx].children.push(item)
+      }
+    });
+    list.value = brr;
+  }).catch(()=>{ loading.value = false });
+};
+
+
+//初始化
+const initBodySize = () => {
+  initWidth.value = dialogBoxYpfx.value.clientWidth;
+  initHeight.value = dialogBoxYpfx.value.clientHeight;
+};
+//拖拽开始
+const dragstart = (e) => {
+  startClientX.value = e.clientX;
+  startClientY.value = e.clientY;
+};
+//拖拽结束
+const dragend = (e) => {
+  let x = e.clientX - startClientX.value;
+  let y = e.clientY - startClientY.value;
+  elRight.value -= x;
+  elBottom.value -= y;
+};
+// 轨迹回放
+function ganhdleGJHF(item){
+  emitter.emit("deletePointArea", "routeGj");;
+  let arr = item.zbList || [];
+  if (arr.length > 0) {
+    emitter.emit("drawLineAnimation", {coords:arr,isClear:true,flag:'routeGj'});
+  } else {
+    proxy.$message({ type: "warning", message: `没有轨迹数据` });
+  }
+}
+
+
+
+//关闭弹窗
+function close() {
+  isShowTable.value = false;
+  emitter.emit("showFzycInfo", { type: false });
+  emitter.emit("deletePointArea", "routeGj");
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/largeScreen.scss";
+@import "@/assets/css/homeScreen.scss";
+.dialogBox {
+  position: absolute;
+  padding: 0;
+  box-sizing: border-box;
+  width: 1000px !important;
+  .title {
+    border-bottom: 1px solid #275288;
+    margin-bottom: 6px;
+    margin-left: 11px;
+    margin-right: 20px;
+    .mc {
+      margin-left: 10px;
+    }
+    .btn{
+      padding: 5px 10px;
+      background: #23aadd;
+      border-radius: 7px;
+      margin: 0 10px;
+      cursor: pointer;
+    }
+  }
+  .info-Big-Box {
+    padding: 4px 10px;
+    box-sizing: border-box;
+    .tableBox{
+      padding:10px 20px;
+      box-sizing: border-box;
+      height:57vh;
+      overflow: hidden;
+      overflow-y: auto;
+      .grid-content-top{
+        background: #052466;
+        border: 1px solid #013995;
+        text-align: center;
+        padding: 4px 0;
+        box-sizing: border-box;
+      }
+      .grid-content-nr{
+        border: 1px solid #013995;
+        text-align: center;
+        padding: 4px 0;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+.el-radio-group{
+  margin-left: 20px;
+}
+.el-radio-button{
+  margin: 0 2px;
+}
+
+::v-deep .el-collapse {
+  width: 100%;
+  --el-collapse-header-height: auto;
+  --el-collapse-header-bg-color: transparent;
+  --el-collapse-border-color: transparent;
+}
+::v-deep .el-collapse-item__header {
+  color: #00bfff;
+}
+::v-deep .el-collapse-item__wrap {
+  background-color: transparent;
+}
+::v-deep .el-collapse-item__content {
+  color: #fff;
+}
+
+.flexTool{
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.w-78{
+  width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-left: 4px;
+}
+.w-115{
+  width: 188px;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-left: 4px;
+  text-overflow: ellipsis;
+}
+.null{
+  text-align: center;
+}
+
+</style>
+<style>
+  .el-loading-mask{
+    background-color: rgba(0,0,0,.3) !important;
+  }
+</style>

src/views/homeMy/layout/head.vue

@@ -0,0 +1,244 @@
+<template>
+  <div class="head-container">
+    <div class="home-head-box relative">
+      <div class="time absolute">
+        <div class="f18" style="line-height: 18px;">{{ datatime }}</div>
+        <div class="f16 pl36" style="line-height: 16px;">{{ hour + ":" + minute + ":" + second }}</div>
+      </div>
+      <div class="title absolute" @click="goPath">{{ props.title }}</div>
+      <div class="top-right">
+        <div class="info">
+          <img class="photo" src="@/assets/my/photo.png" />
+          <div class="text">
+            <div>姓名：{{ username }}</div>
+            <div class="dept" :tabindex="deptName">
+              单位：<el-tooltip :content="deptName">{{ deptName }}</el-tooltip>
+            </div>
+          </div>
+          <el-dropdown :hide-on-click="false">
+            <span class="el-dropdown-link">
+              <el-icon :size="20" color="#fff">
+                <CaretBottom />
+              </el-icon>
+            </span>
+            <template #dropdown>
+              <el-dropdown-menu class="loginOut" @click="logout">
+                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+        <div class="meun" @click="modularShowFn" title="后台">
+          <img src="@/assets/my/meun.png" />
+        </div>
+         <el-popover trigger="click" placement="bottom" v-model:visible="showVisible" :append-to-body="false">
+          <template #reference>
+            <span class="el-dropdown-tools" @click="showVisible = !showVisible">
+              <span class="el-dropdown-tools-n">
+                <el-icon :size="26" color="#28426a">
+                  <Tools />
+                </el-icon>
+              </span>
+            </span>
+          </template>
+          <div @click="handleRhtx" class="settingItem"><el-icon>
+              <Notification />
+            </el-icon>融合通信 </div>
+          <div @click="handleJxkh" class="settingItem"><el-icon>
+              <Notification />
+            </el-icon>绩效考核</div>
+        </el-popover>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from "vue-router";
+import { getRecentDay, timeValidate } from "@/utils/tools.js";
+import { useStore } from "vuex";
+import { ref, onMounted, defineProps, onUnmounted } from "vue";
+const props = defineProps({
+  title: {
+    type: String,
+    default: "街面智慧巡防"
+  }
+});
+const showVisible = ref(false)
+const store = useStore();
+const datatime = ref(getRecentDay(0));
+const minute = ref("00"); //分
+const second = ref("00"); //秒
+const hour = ref("00"); //时
+const day = ref(0);
+const timersfm = ref(null);
+const username = localStorage.getItem("USERNAME");
+const deptName = ref(JSON.parse(localStorage.getItem("deptId"))?.[0].deptName);
+const router = useRouter();
+
+onMounted(() => {
+  timersfm.value = setInterval(() => {
+    CurrentTime();
+  }, 1000);
+});
+// 获取时分秒
+function CurrentTime() {
+  const date = new Date();
+  hour.value = date.getHours();
+  minute.value = date.getMinutes();
+  second.value = date.getSeconds();
+  day.value = day.value < 10 ? "0" + day.value : day.value;
+  hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
+  minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
+  second.value = second.value < 10 ? "0" + second.value : second.value;
+}
+// 退出
+const logout = () => {
+  store.dispatch("user/logout");
+  store.commit("app/clearTag", null, { immediate: true });
+  store.commit("permission/deleteRouter", { immediate: true });
+  store.commit("user/deleteKeepLiiveRoute", "lz/home");
+};
+// 打开菜单弹窗
+function modularShowFn(val) {
+  router.replace('/editPassword');
+}
+function goPath() {
+  console.log(21222);
+  router.replace('/editPassword');
+}
+</script>
+
+<style lang="scss" scoped>
+.head-container {
+  width: 100%;
+  height: 70px;
+  position: relative;
+  background: #263445;
+  z-index: 2;
+}
+
+.home-head-box {
+  width: 100%;
+  height: 138px;
+  background: url("~@/assets/images/home_head.png") no-repeat center center;
+  z-index: 2;
+
+  .title {
+    font-size: 36px;
+    left: 50%;
+    top: 10px;
+    transform: translateX(-50%);
+    font-family: "YSBTH";
+    background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .title-tow {
+    background: #fff;
+    position: absolute;
+    height: 70px;
+    width: 500px;
+    top: 50px;
+    left: calc(50% - 270px);
+    font-size: 36px;
+    font-family: "YSBTH";
+    background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-align: center;
+    line-height: 100px;
+
+    .back {
+      background: url("~@/assets/images/bi/fbt.png") no-repeat center center;
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  .time {
+    font-family: "DigifaceWide";
+    color: #fff;
+    left: 25%;
+    top: 18px;
+  }
+
+  .wd {
+    right: 26%;
+    top: 16px;
+    font-size: 16px;
+    font-family: "DigifaceWide";
+    color: #fff;
+  }
+
+  .zbbb {
+    position: absolute;
+    right: 20px;
+    top: 22px;
+    font-size: 16px;
+    width: 162px;
+    height: 48px;
+    text-align: center;
+    line-height: 48px;
+    font-size: 16px;
+    background: url("~@/assets/images/btnbb.png") no-repeat center center;
+    background-size: 100% 100%;
+  }
+}
+
+.top-right {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  right: 2%;
+  top: 12%;
+
+  .info {
+    display: flex;
+    align-items: center;
+
+    .text {
+      color: #e6ffff;
+      font-size: 15px;
+      margin-left: 14px;
+      line-height: 23px;
+
+      .dept {
+        max-width: 200px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  .meun {
+    margin-left: 30px;
+    margin-right: 4px;
+  }
+
+  .el-dropdown-tools {
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    border: 1px solid rgb(20, 135, 180);
+    border-radius: 50%;
+    text-align: center;
+
+    .el-dropdown-tools-n {
+      display: inline-block;
+      width: 34px;
+      height: 34px;
+      border: 1px solid #fff;
+      border-radius: 50%;
+      background: #9ec6fc;
+      text-align: center;
+      line-height: 32px;
+      margin-top: 2px;
+      padding-top: 2px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>

src/views/homeMy/layout/header.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="headBox">
+    <div class="top">
+      <div class="top-left">
+        <div>
+          <img v-if="qwlevel == null " src="@/assets/my/ct_qw.png" style="width: 130px;" />
+          <img v-if="qwlevel == '01' " src="@/assets/my/red_qw.png" style="width: 130px;" />
+          <img v-if="qwlevel == '02' " src="@/assets/my/orange_qw.png" style="width: 130px;" />
+          <img v-if="qwlevel == '03' " src="@/assets/my/yellow_qw.png" style="width: 130px;" />
+        </div>
+        <div class="time">
+          <div class="timer">{{ hour + ":" + minute + ":" + second }}</div>
+          <div class="week">{{weekenday}} {{ datatime }}</div>
+        </div>
+      </div>
+      <div class="top-center" @click="goToHome"></div>
+
+      <div class="top-right">
+        <div class="info">
+          <img class="photo" src="@/assets/my/photo.png" />
+          <div class="text">
+            <div>姓名：{{ username }}</div>
+            <div class="dept" :tabindex="deptName">
+              单位：<el-tooltip :content="deptName">{{ deptName }}</el-tooltip>
+            </div>
+          </div>
+          <el-dropdown :hide-on-click="false">
+            <span class="el-dropdown-link">
+              <el-icon :size="20" color="#fff"><CaretBottom /> </el-icon>
+            </span>
+            <template #dropdown>
+              <el-dropdown-menu class="loginOut" @click="logout">
+                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+        <div class="meun" @click="modularShowFn" title="后台">
+          <img src="@/assets/my/meun.png" />
+        </div>
+        <el-popover trigger="click" placement="bottom" v-model:visible="showVisible" :append-to-body="false">
+          <template #reference>
+            <span class="el-dropdown-tools"  @click="showVisible = !showVisible">
+              <span class="el-dropdown-tools-n">
+                <el-icon :size="26" color="#28426a"><Tools /> </el-icon>
+              </span>
+            </span>
+          </template>
+          <div @click="handleRhtx" class="settingItem"><el-icon><Notification/></el-icon>融合通信 </div>
+          <div @click="handleJxkh" class="settingItem"><el-icon><Notification/></el-icon>质量监督</div>
+          <div @click="downloadBao" class="settingItem"><el-icon><Notification/></el-icon>
+            <a href="http://80.93.7.13:9009/myga/绵阳巡防.exe"> 安装包下载 </a>
+          </div>
+          <div @click="openWarning('YJZX')" class="settingItem"><el-icon><Notification/></el-icon>预警中心</div>
+          <div @click="openWarning('JQTJ')" class="settingItem"><el-icon><Notification/></el-icon>警情统计</div>
+          <div @click="downInfo" class="settingItem"><el-icon><Notification/></el-icon>群防信息</div>
+          <div @click="openWarning('QFXS')" class="settingItem"><el-icon><Notification/></el-icon>群防线索</div>
+          <div @click="openWarning('BBTS')" class="settingItem"><el-icon><Notification/></el-icon>报备提示</div>
+          <div @click="openWarning('DWRYTJ')" class="settingItem"><el-icon><Notification/></el-icon>单位人员统计</div>
+          <div @click="openWarning('YJSJ')" class="settingItem"><el-icon><Notification/></el-icon>意见收集</div>
+        </el-popover>
+      </div>
+    </div>
+    <Performance v-model="modelValue"/>
+  </div>
+
+</template>
+
+<script setup>
+import { qcckPost, qcckGet, qcckPut, qcckDelete } from "@/api/qcckApi.js";
+import emitter from "@/utils/eventBus.js";
+import { getRecentDay ,timeValidate} from "@/utils/tools.js";
+import { useRouter, useRoute, onBeforeRouteLeave } from "vue-router";
+import { useStore } from "vuex";
+import { ref, onMounted, defineEmits, onUnmounted } from "vue";
+import Performance from './performance.vue'
+const modelValue = ref(false)
+const showVisible = ref(false)
+const store = useStore();
+const router = useRouter();
+const route = useRoute();
+const username = ref("");
+const weekenday = ref('') //星期几
+const datatime = ref(getRecentDay(0));
+const minute = ref("00"); //分
+const second = ref("00"); //秒
+const hour = ref("00"); //时
+const day = ref(0);
+const deptName = ref(JSON.parse(localStorage.getItem("deptId"))?.[0].deptName);
+const modularShow = ref(false);
+const timersfm = ref(null);
+const qwlevel = ref(null)
+onMounted(() => {
+  getWeek()
+  getQwLevel()// 获取勤务等级
+  username.value = localStorage.getItem("USERNAME");
+  timersfm.value = setInterval(() => {
+    CurrentTime();
+  }, 1000);
+});
+
+// 打开融合通信页面
+function handleRhtx(params) {
+  const DDZHhref = router.resolve({
+    name: "rhtx", //这里是跳转页面的name
+    path: "/rhtx"
+  });
+  window.open(DDZHhref.href, "_blank");
+}
+
+// 获取勤务等级s
+function getQwLevel(){
+  qcckGet({},'/mosty-jmxf/tbQwQwdj/currentQwdj?dateTime='+timeValidate()).then(res=>{
+    qwlevel.value = res ? res.qwdj : null
+  })
+}
+
+// 打开绩效考核
+function handleJxkh(){
+  modelValue.value = true;
+  showVisible.value = false
+}
+
+function getWeek(){
+  let week = new Date().getDay()
+  switch(week){
+    case 0:
+      return weekenday.value = '星期日'
+      break;
+    case 1:
+      return weekenday.value = '星期一'
+      break;
+    case 2:
+      return weekenday.value = '星期二'
+      break;
+    case 3:
+      return weekenday.value = '星期三'
+      break;
+    case 4:
+      return weekenday.value = '星期四'
+      break;
+    case 5:
+      return weekenday.value = '星期五'
+      break;
+    case 6:
+      return weekenday.value = '星期六'
+      break;
+  }
+}
+
+
+// 获取时分秒
+function CurrentTime() {
+  const date = new Date();
+  hour.value = date.getHours();
+  minute.value = date.getMinutes();
+  second.value = date.getSeconds();
+  day.value = day.value < 10 ? "0" + day.value : day.value;
+  hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
+  minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
+  second.value = second.value < 10 ? "0" + second.value : second.value;
+}
+// 打开菜单弹窗
+function modularShowFn(val) {
+  router.replace('/editPassword');
+}
+
+// 退出
+const logout = () => {
+  window.opener = null;
+  window.open('', '_self');
+  window.close();
+  store.commit("app/clearTag", null, { immediate: true });
+  store.commit("permission/deleteRouter", { immediate: true });
+  store.commit("user/deleteKeepLiiveRoute", "home");
+};
+
+// 路由跳转
+function goToHome() {
+  window.location.href = "/";
+}
+
+const openWarning = (val) =>{
+  showVisible.value = false
+  emitter.emit('showWarning',val)
+}
+
+const downInfo = () =>{
+  showVisible.value = false
+  emitter.emit('showZlDetail')
+}
+
+onUnmounted(() => {
+  clearInterval(timersfm.value)
+});
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+.settingItem{
+  color: #fff;
+  display: flex;
+  align-items: center;
+  height: 30px;
+  border-bottom: 1px solid #143d91;
+  padding-left: 10px;
+  box-sizing: border-box;
+  cursor: pointer;
+  .el-icon{
+    margin-right: 10px;
+  }
+}
+.settingItem:hover{
+  background: #143d91;
+}
+</style>

src/views/homeMy/layout/jqTable.vue

@@ -0,0 +1,143 @@
+<template>
+  <el-popover :append-to-body="false" :placement="getConfiger.placement" :visible="visible"  :width="getConfiger.width" :trigger="getConfiger.trigger">
+    <template #reference>
+      <span @click="visible = !visible"><slot name="info" ></slot></span>
+    </template>
+    <div class="titleTop">
+      <span>{{title}}</span>
+      <el-icon @click="visible = false"><Close/></el-icon>
+    </div>
+    <div class="tableBox">
+      <MyTable
+        :tableData="pageData.tableData"
+        :tableColumn="pageData.tableColumn"
+        :tableHeight="pageData.tableHeight"
+        :key="pageData.keyCount"
+        :tableConfiger="pageData.tableConfiger"
+      >
+        <template #czzt="{row}">
+          <dict-tag :options="D_BZ_CZZT" :value="row.czzt" :tag="false" />
+        </template>
+      </MyTable>
+      <Pages
+        @changeNo="changeNo"
+        @changeSize="changeSize"
+        :tableHeight="pageData.tableHeight"
+        :pageConfiger="{
+          ...pageData.pageConfiger,
+          total: pageData.total
+        }"
+      ></Pages>
+    </div>
+  </el-popover>
+</template>
+
+<script setup>
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import MyTable from "@/components/aboutTable/DarkTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import { reactive, defineProps,ref ,getCurrentInstance, watch ,watchEffect} from "vue";
+const props = defineProps({
+  configer:{
+    type:Object,
+    default:{}
+  },
+  data:{
+    type:Object,
+    default:{}
+  },
+});
+const { proxy } = getCurrentInstance();
+const { D_BZ_CZZT } = proxy.$dict("D_BZ_CZZT");
+const visible = ref(false)
+const pageData = reactive({
+  tableData: [],
+  tableColumn: [],
+  tableHeight: 360,
+  keyCount: 0,
+  tableConfiger: {
+    loading: false,
+    rowHieght: 61,
+    showSelectType: "null",
+    haveControls: false,
+    showIndex:false
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 10,
+    pageNum: 1
+  }, //分页
+})
+let getConfiger = reactive({
+  placement:'right',//方向 right/left/bottom/top/top-start/top-end .....
+  trigger:'click',//气泡框类型 = click (点击),hover(鼠标滑过),
+  isRadio:false,//是否单选
+  width:1000,//宽度
+  selectName:'选择',
+  lx:null,//查询的类型 - 警情(jq)
+})
+const title = ref('')
+const url = ref('')
+// 接收数据类型
+const handleData = (val) =>{
+    let data = {}
+  switch(val){
+    case 'jq':
+      title.value = '警情详情'
+      url.value = '/mosty-jmxf/tbQwXfbb/getXfbbJqPage';
+      pageData.tableColumn = [
+        { label: "报警人", prop: "bjrXm" },
+        { label: "报警电话", prop: "bjdh" ,showOverflowTooltip:true },
+        { label: "报警类别", prop: "bjlbmc" ,showOverflowTooltip:true },
+        { label: "报警时间", prop: "bjsj",showOverflowTooltip:true },
+        { label: "警情内容", prop: "bjnr",showOverflowTooltip:true },
+        { label: "事发地址", prop: "sfdz",showOverflowTooltip:true},
+        { label: "处置状态", prop: "czzt",showSolt:true},
+      ];
+      data = { bbid:props.data.id, pageCurrent:pageData.pageConfiger.pageNum, pageSize:pageData.pageConfiger.pageSize }
+      break;
+  }
+  if(val) getData(data)
+};
+
+// 获取数据
+const getData = (data) =>{
+  qcckPost(data,url.value).then(res=>{
+    pageData.tableData = res.records || [];
+    pageData.total = res.total
+  })
+}
+
+const changeNo = (val) =>{
+    pageData.pageConfiger.pageNum = val;
+    handleData(getConfiger.lx);
+}
+const changeSize = (val) =>{
+    pageData.pageConfiger.pageSize = val
+    handleData(getConfiger.lx);
+}
+
+watch(()=>visible.value,(val)=>{
+  if(val && getConfiger.lx) handleData(getConfiger.lx);
+})
+
+watch(()=>props.data,(val)=>{
+  visible.value = false
+},{immediate:true})
+
+watchEffect(()=>{
+  getConfiger = { ...getConfiger, ...props.configer};
+})
+
+
+</script>
+
+<style lang="scss" scoped>
+.titleTop{
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+  height: 26px;
+  color: #fff;
+}
+</style>

src/views/homeMy/layout/patrolGroup.vue

@@ -0,0 +1,298 @@
+<template>
+  <div>
+    <div class="pubTitle">
+      <div class="text">街面巡组</div>
+    </div>
+    <div style="padding-top: 8px; overflow: hidden">
+      <div style="float: left">
+        <el-checkbox
+          label="1"
+          v-for="(item, index) in checkList"
+          :key="item.value"
+          v-model="item.checked"
+          @change="onChangeXfzt(index)"
+        >
+          <span class="dian online" v-if="item.value == 0"></span>
+          <span class="dian busy" v-if="item.value == 1"></span>
+          <span class="dian" v-if="item.value == 2"></span>
+          {{ item.label }}
+        </el-checkbox>
+      </div>
+      <div style="float: right">
+        <button class="dp-default small">全部呼叫</button>
+      </div>
+    </div>
+    <ul class="groupList" v-loading="loading">
+      <li v-for="item in xzList.list" :key="item.id" @click="handelClick(item)">
+        <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 }}人，联系电话：{{
+                item.fzrLxdh
+              }}</span
+            ><br />
+            <span
+              >巡逻时长：{{
+                item.xfsc != "" && item.xfsc > 0
+                  ? (item.xfsc / 3600).toFixed(2)
+                  : 0
+              }}
+              h <br />巡逻里程：{{
+                item.xflc ? (item.xflc / 1000).toFixed(2) : 0
+              }}
+              m
+            </span>
+          </div>
+        </div>
+        <div
+          class="address"
+          style="display: flex; justify-content: space-between"
+        >
+          <span>
+            <img src="@/assets/images/dingwei.png" />
+            <span>{{ item.dqwz }}</span>
+          </span>
+          <span>
+            <img
+              style="width: 20px"
+              src="@/assets/images/light-gray.png"
+            />
+          </span>
+        </div>
+      </li>
+      <el-empty
+        description="没有数据"
+        :image-size="0.1"
+        v-if="!loading && xzList.list.length <= 0"
+      />
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { getSelectDeckList } from "@/api/dpApi/home.js";
+import emitter from "@/utils/eventBus.js";
+import openWebSocket from "@/utils/webSocket.js";
+import { ref, reactive, onMounted,defineEmits } from "vue";
+//状态数据
+const checkList = reactive([
+  {
+    value: 0,
+    label: "巡逻中",
+    checked: true
+  },
+  {
+    value: 1,
+    label: "处警中",
+    checked: true
+  },
+  {
+    value: 2,
+    label: "离线",
+    checked: true
+  }
+]);
+let xzList = reactive({
+  list: []
+}); //巡组数据
+const loading = ref(true); //警组加载
+const pageSize = ref(500);
+const pageCurrent = ref(1);
+const totalPage = ref(0);
+const status = ref([]); //巡组状态
+const jd = ref(104.14637342);
+onMounted(() => {
+  checkList.forEach((item) => {
+    if (item.checked === true) {
+      status.value.push(item.value);
+    }
+  });
+  // 查询巡逻中数据
+  _ggetSelectDeckList("0,1,2");
+  scroll();
+  getWebSocketData();
+});
+
+// 获取WebSocket数据
+function getWebSocketData() {
+  let dws = openWebSocket.getInstance();
+  dws.connect((res) => {
+    // 接收发送消息
+    dws.ws.onmessage = (e) => {
+      let dataInfo = JSON.parse(e.data).data;
+      if (e && e.data) {
+        let newsDate = JSON.parse(e.data);
+        switch (newsDate.type) {
+          case "03":
+            if (typeof status.value == "string") { status.value = status.value.split(","); }
+            status.value.forEach((item, index) => {
+              if (item == dataInfo.xfzt) {
+                xzList.list.unshift(JSON.parse(e.data).data);
+                addPointMaker(dataInfo); //撒点
+              }
+            });
+            break;
+          case "04":
+            xzList.list.forEach((value, index) => {
+              if (value.id == dataInfo.id) {
+                delPointMaker(dataInfo); //清除原来的撒点
+                xzList.list.splice(index, 1);
+                xzList.list.unshift(dataInfo);
+                addPointMaker(dataInfo); //撒点
+                emitter.emit("setMapCenter", {
+                  location: [dataInfo.jd,dataInfo.wd],
+                  zoomLevel: '10'
+                });
+              }
+            });
+            break;
+          case "05":
+            xzList.list.forEach((value, index) => {
+              if (value.id == dataInfo.id) {
+                delPointMaker(dataInfo); //清除原来的撒点
+                xzList.list.splice(index, 1);
+                addPointMaker(dataInfo); //撒点
+              }
+            });
+            break;
+        }
+      }
+    };
+  });
+}
+
+const addPointMaker = (data) => {
+  emitter.emit("addPointTakeTittle", {
+    coords: [data],
+    icon: require(`@/assets/point/specialPolice.png`),
+    flag: "rx",
+    undel: true
+  });
+};
+const delPointMaker = (data) => {
+  emitter.emit("deletePointAreaPolice", { flag: "rx", id: data.id });
+};
+
+//选择巡防状态
+function onChangeXfzt(e) {
+  let xfztList = [];
+  checkList.forEach((item) => {
+    if (item.checked === true) {
+      xfztList.push(item.value);
+    }
+  });
+  status.value = xfztList.join(",");
+  pageCurrent.value = 1;
+  _ggetSelectDeckList(status.value);
+  scroll();
+}
+
+//查看警组信息
+function handelClick(item) {
+  emitter.emit("closeAllDialog");
+  emitter.emit("showJzInfo", item);
+  emitter.emit("closeVideo");
+  if (item.jd && item.wd) {
+    emitter.emit("setMapCenter", {
+      location: [item.jd, item.wd],
+      zoomLevel: 14
+    });
+  }
+}
+
+//巡组列表
+function _ggetSelectDeckList(xfzt) {
+  let data = {
+    xfzt,
+    pageSize: pageSize.value,
+    pageCurrent: pageCurrent.value
+  };
+  getSelectDeckList(data)
+    .then((res) => {
+      loading.value = false;
+      if (res.records.length > 0) {
+        let newArry = [];
+        for (let i = 0; i < res.records.length; i++) {
+          if (res.records[i].pbfj != null) {
+            res.records[i].pbfj = JSON.parse(res.records[i].pbfj);
+          }
+          if (res.records[i].pbmj != null) {
+            res.records[i].pbmj = JSON.parse(res.records[i].pbmj);
+          }
+          xzList.list = res.records;
+          if (res.records[i].jd && res.records[i].wd) {
+          } else {
+            res.records[i].queryAddress = "没有经纬度";
+          }
+        }
+
+        let sdList = xzList.list.filter((v) => {
+          return v.jd && v.wd;
+        });
+        emitter.emit("addPointTakeTittle", {
+          coords: sdList,
+          icon: require(`@/assets/point/police-car-bx.png`),
+          flag: "rx"
+        });
+        emitter.emit("setMapCenter", {
+          location: [sdList[0].jd,sdList[0].wd],
+          zoomLevel: '10'
+        });
+        // 结尾
+        totalPage.value = res.records.length;
+      } else if (res.records.length === 0) {
+        xzList.list = res.records;
+        emitter.emit("deletePointArea", "cx");
+        emitter.emit("deletePointArea", "rx");
+      }
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+//触底加载
+function scroll() {
+  let scrollTargetBox = document.querySelector(".groupList");
+  scrollTargetBox.onscroll = (e) => {
+    var scrollHeight = scrollTargetBox.scrollHeight; //251
+    var scrollTop = scrollTargetBox.scrollTop; //0-18
+    var clientHeight = scrollTargetBox.clientHeight; //233
+    if (scrollHeight - clientHeight == scrollTop) {
+      //滚动条滚到最底部
+      if (totalPage.value < pageSize.value) return;
+      pageCurrent.value++;
+      _ggetSelectDeckList(status.value);
+    }
+  };
+}
+
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/largeScreen.scss";
+
+//加载时 取消背景
+::v-deep .el-loading-mask {
+  background-color: transparent !important;
+}
+
+::v-deep .el-checkbox {
+  height: 24px;
+  font-size: 12px;
+}
+
+::v-deep .el-checkbox__label {
+  font-size: 12px;
+}
+</style>

src/views/homeMy/layout/performance.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <el-dialog
+      v-model="modelValue"
+      title="系统模块"
+      width="100%"
+      :before-close="handleClose"
+      :append-to-body="false"
+    >
+      <div class="cntBox"><CntBox /></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import CntBox from "@/views/backOfficeSystem/performanceMenu/achievements/index.vue";
+import { ref, defineEmits, defineProps } from "vue";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  }
+});
+const emits = defineEmits(["update:modelValue"]);
+function handleClose() {
+  emits("update:modelValue", false);
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog {
+  margin: 0;
+  --el-dialog-width: 100% !important;
+}
+::v-deep .el-dialog__body {
+  padding: 10px;
+  box-sizing: border-box;
+}
+.cntBox {
+  height: calc(100vh - 74px);
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+::v-deep .el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  background-color: #20606d !important;
+}
+::v-deep .el-table__border-left-patch {
+  background-color: #20606d !important;
+}
+::v-deep .el-table {
+  --el-table-border-color: #20606d !important;
+}
+::v-deep .margin-bt-10 {
+  align-items: center;
+}
+::v-deep .el-input__inner {
+  margin: 0 !important;
+}
+::v-deep .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+  font-size: 20px;
+}
+::v-deep .el-table tr {
+  background-color: #060537;
+}
+::v-deep
+  .el-table--enable-row-hover
+  .el-table__body
+  tr:hover
+  > td.el-table__cell {
+  background-color: rgba(34, 83, 140, 0.7);
+}
+::v-deep .popBody {
+  height: 70vh;
+  .el-table {
+    background-color: #060537;
+  }
+  .el-table__body-wrapper {
+    height: 64vh;
+  }
+}
+::v-deep .qs-box {
+  .popBody {
+    height: 88vh !important;
+    max-height: 88vh !important;
+  }
+}
+</style>

src/views/homeMy/layout/spxl.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="boxContent">
+    <div class="flex just-between">
+      <div class="box-title">视频巡逻</div>
+      <div class="flex just-between align-center">
+        <div class="ww46">
+          <el-select v-model="pageData.selectXlfa" class="m-2" placeholder="请选择巡逻方案" @change="onChangeXlfa">
+            <el-option v-for="item in pageData.faList" :key="item" :label="item.label" :value="item.value" />
+          </el-select>
+        </div>
+        <div class="ww46">
+          <el-select v-model="pageData.selectSxtz" class="m-2" :disabled="pageData.selectXlfa ? false : true"
+            placeholder="请选择感知源组" @change="onChangeSxt">
+            <el-option v-for="item in pageData.gzyzList" :key="item" :label="item.label" :value="item.value" />
+          </el-select>
+        </div>
+        <div class="flex just-between align-center pointer" @click="showDlalog = true">
+          <el-icon :size="22">
+            <FullScreen></FullScreen>
+          </el-icon>
+        </div>
+      </div>
+    </div>
+    <div class="boxInfo">
+      <ul class="video_box flex just-between flex-warp" v-loading="loading">
+        <li class="video_item" v-for="item in pageData.sxtList" :key="item" :class="changeHeight(pageData.sxtList)">
+          <VideoPay :sbbh="item.sxtid" v-if="item.sxtid" />
+          <!-- <img v-else style="width: 100%; height: 100%" :src="require('@/assets/images/default_video.png')" /> -->
+        </li>
+        <el-empty description="暂无数据" v-if="pageData.sxtList.length == 0" :image-size="80" style="margin-left:40%" />
+      </ul>
+    </div>
+    <teleport to="#app" v-if="showDlalog">
+      <SpxlDialog v-model="showDlalog" v-if="showDlalog" :list="pageData.sxtList" :fps="pageData.selectFp.fps"
+        @CloseshowDialog="showDlalog = false" />
+    </teleport>
+  </div>
+</template>
+
+<script setup>
+import SpxlDialog from "@/views/homeMy/components/dialog/spxlDialog";
+import VideoPay from "@/components/wsVideoSenior/wsIframe/index"; //ws播放高阶
+import emitter from "@/utils/eventBus.js";
+import { qcckPost, qcckGet } from "@/api/qcckApi.js";
+import { getItem } from "@/utils/storage";
+import { reactive, onMounted, ref, defineProps, onUnmounted } from "vue";
+const loading = ref(false);
+const showDlalog = ref(false);
+let deptCode = getItem("deptId")[0].deptCode;
+const props = defineProps({
+  configer: Object
+});
+const timer = ref()
+const pageData = reactive({
+  faList: [], //巡逻方案数据
+  gzyzList: [], //感知源组信息
+  sxtList: [], //摄像头信息
+  selectXlfa: "",
+  selectSxtz: "",
+  selectFp: { fps: 1 } //选中的分屏对象
+});
+onMounted(() => {
+  _getData();
+});
+//获取数据
+const _getData = () => {
+  qcckGet({ ssbmdm: deptCode, pageNum: 1, pageSize: 10 }, "/mosty-jmxf/tbSpxlSpxlfa/queryPage").then((res) => {
+    if (res.records && res.records.length > 0) {
+      pageData.faList = res.records.map((item) => {
+        return { label: item.famc, value: item.id, fps: Number(item.fps), jgsj: item.jgsj };
+      });
+      pageData.selectXlfa = res.records[0].id;
+      _getGzyzData(res.records[0].id);
+      pageData.selectFp = pageData.faList[0];
+    }
+  });
+};
+//选择巡逻方案
+const onChangeXlfa = (val) => {
+  pageData.selectFp = pageData.faList.find((item) => item.value == val);
+  _getGzyzData(val);
+};
+//选择摄像头
+const onChangeSxt = (val) => {
+  const list = pageData.gzyzList.find((item) => item.value === val);
+  if (list) pageData.sxtList = list.sxtList;
+};
+// 定时刷视频巡逻
+const handlTime = (index) => {
+  pageData.sxtList = pageData.gzyzList[index].sxtList;
+}
+const _getGzyzData = (faid) => {
+  loading.value = true;
+  qcckGet({ faid }, "/mosty-jmxf/tbSpxlSpxlfaSxt").then((res) => {
+    if (res) {
+      pageData.selectSxtz = res.sxtzList[0]?.id;
+      pageData.gzyzList = res.sxtzList.map((item, index) => {
+        if (index == 0) pageData.sxtList = item.sxtList;
+        return { label: item.sxtzmc, value: item.id, sxtList: item.sxtList };
+      });
+      // 重复切换感知源组
+      if (pageData.gzyzList.length > 1) {
+        let idx = 0;
+        timer = setInterval(() => {
+          idx++;
+          if (idx >= pageData.gzyzList.length) idx = 0;
+          pageData.selectSxtz = pageData.gzyzList[idx]?.value;
+          handlTime(idx);
+        }, pageData.selectFp.jgsj * 1000);
+      }
+    }
+  }).finally(() => {
+    loading.value = false;
+  });
+};
+
+// 改变高度
+const changeHeight = (val) => {
+  let len = val.length;
+  switch (len) {
+    case 1:
+      return 'oneItem';
+    case 2:
+      return 'twoItem';
+    case 3:
+    case 4:
+      return 'moreItem';
+  }
+}
+onUnmounted(() => {
+  clearInterval(timer.value)
+})
+
+</script>
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+
+.video_box {
+  margin-top: 5px;
+  height: 100%;
+
+  .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%;
+  }
+}
+
+::v-deep .el-loading-mask {
+  background: rgba(0, 0, 0, .5);
+}
+
+::v-deep .el-input__inner {
+  background: #081542;
+  color: #fff;
+  border: 1px solid rgba(124, 191, 255, 0.4)
+}
+
+::v-deep .el-select .el-input .el-select__caret {
+  color: #00FCFF;
+}
+
+::v-deep .el-input.is-disabled .el-input__inner {
+  background: transparent;
+  border: 1px solid #224ab5;
+}
+.box-title{
+  width: 200px;
+}
+</style>

src/views/homeMy/layout/statisticsModel.vue

@@ -0,0 +1,210 @@
+<template>
+  <!-- 地图上方翻转框 -->
+  <div class="m-midN">
+    <div class="turn-box">
+      <!-- 正面 -->
+      <div class="front">
+        <div class="fornt-item" style="opacity: 1">
+          <img :src="imgList.wsztry" alt="" width="55" height="75" />
+          <div class="text-box">
+            <span class="text-num">{{ fzList.ztry }}</span>
+            <span class="text-title">网上在逃人员</span>
+          </div>
+        </div>
+        <div class="fornt-item" style="opacity: 1">
+          <img :src="imgList.sjgzqjry" alt="" width="55" height="75" />
+          <div class="text-box">
+            <span class="text-num">{{ fzList.sjgzdjry }}</span>
+            <span class="text-title">收缴管制器具人员 </span>
+          </div>
+        </div>
+        <div class="fornt-item" style="opacity: 1">
+          <img :src="imgList.xzlqca" alt="" width="55" height="75" />
+          <div class="text-box">
+            <span class="text-num">{{ fzList.xzlqcaj }}</span>
+            <span class="text-title">行政类侵财案件</span>
+          </div>
+        </div>
+        <div class="fornt-item" style="opacity: 1">
+          <img :src="imgList.xslqcaj" alt="" width="55" height="75" />
+          <div class="text-box">
+            <span class="text-num">{{ fzList.xslqcaj }}</span>
+            <span class="text-title">刑事类侵财案件</span>
+          </div>
+        </div>
+        <div class="fornt-item" style="opacity: 1">
+          <img :src="imgList.jzzs" alt="" width="55" height="75" />
+          <div class="text-box">
+            <span class="text-num">{{ fzList.jzzs }}</span>
+            <span class="text-title">救助自杀</span>
+          </div>
+        </div>
+        <div class="fornt-item" style="opacity: 1">
+          <img :src="imgList.jzzslret" alt="" width="55" height="75" />
+          <div class="text-box">
+            <span class="text-num">{{ fzList.jzzslret }}</span>
+            <span class="text-title">救助走失老人儿童</span>
+          </div>
+        </div>
+        <div class="fornt-item" style="opacity: 1">
+          <img :src="imgList.mdjf" alt="" width="55" height="75" />
+          <div class="text-box">
+            <span class="text-num">{{ fzList.mdjf }}</span>
+            <span class="text-title">成功化解矛盾纠纷</span>
+          </div>
+        </div>
+        <div class="fornt-item" style="opacity: 1">
+          <img :src="imgList.other" alt="" width="55" height="75" />
+          <div class="text-box">
+            <span class="text-num">{{ fzList.qtaj }}</span>
+            <span class="text-title">其他类刑事案件</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { getYjCount ,getXfbbCount,getPcryCount,getPcclCount} from '@/api/instructCenter.js'
+import { ref, onMounted} from "vue";
+const cardIndex = ref(0)
+const titleList = ref([])
+const imgList = ref({
+  wsztry: require(`../../../assets/images/wsztry.png`),
+  sjgzqjry: require(`../../../assets/images/sjgzqjry.png`),
+  xzlqca: require(`../../../assets/images/xzlqca.png`),
+  xslqcaj: require(`../../../assets/images/xslqcaj.png`),
+  jzzs: require(`../../../assets/images/jzzs.png`),
+  jzzslret: require(`../../../assets/images/jzzslret.png`),
+  mdjf: require(`../../../assets/images/mdjf.png`),
+  other: require(`../../../assets/images/other.png`),
+})
+const fzList = ref({
+  ztry: 0,//网上在逃人员
+  sjgzdjry:0,//收缴管制器具人员
+  xzlqcaj:0,//行政类侵财案件
+  xslqcaj:0,//刑事类侵财案件
+  jzzs:0,//救助自杀
+  jzzslret:0,//救助走失老人儿童
+  mdjf:0,//成功化解矛盾纠纷
+  qtaj:0,//其他类刑事案件
+})
+const timer = ref(null)
+
+onMounted(() => {
+  _getPcryCount() //获取大屏被盘查统计
+})
+
+//获取大屏被盘查人员统计
+function _getPcryCount(){
+  getPcryCount({}).then(res=>{
+    fzList.value.ztry = res.zt //在逃
+    fzList.value.sdry = res.sd //涉毒
+    fzList.value.pcry = res.all //盘查人员
+  })
+}
+
+</script>
+<style lang="scss" scoped>
+.m-midN {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  color: #eee;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.turn-box {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    to right,
+    rgba(36, 55, 102, 0.3) 0%,
+    rgba(17, 29, 59, 0.8) 50%,
+    rgba(36, 55, 102, 0.3) 100%
+  );
+  position: relative;
+  transition: all 80s;
+  transform-style: preserve-3d;
+  /* 3d呈现，让背后盒子立体呈现，不然永远是前面一个盒子朝向我们 */
+  cursor: pointer;
+  // animation: rotate 10s linear infinite alternate forwards;
+}
+.turn-box > div {
+  position: absolute;
+  top: 0;
+  /* 让子盒子重叠一起 */
+  width: 100%;
+  height: 100%;
+  // border-radius: 50%;
+  /* 背面是不可见的 */
+  backface-visibility: hidden;
+}
+.front {
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+}
+.back {
+  transform: rotateX(180deg);
+  display: flex;
+  justify-content: space-between;
+  /* 这里让back盒的先翻转180在front的后面 */
+}
+.turn-box:hover {
+  animation-play-state: paused;
+  /* 悬停事件，使得整个父盒子旋转动画停止 */
+}
+// @keyframes rotate {
+//   0% {
+//     transform: rotateX(0);
+//   }
+//   25% {
+//     transform: rotateX(0);
+//   }
+//   50% {
+//     transform: rotateX(180deg);
+//   }
+//   75% {
+//     transform: rotateX(180deg);
+//   }
+//   100% {
+//     transform: rotateX(180deg);
+//   }
+// }
+.fornt-item {
+  flex:1;
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .text-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 10px;
+    .text-num {
+      font-size: 26px;
+      margin-bottom: 6px;
+      color: rgba(58, 173, 231, 1);
+      @supports (-webkit-background-clip: text) or (background-clip: text) {
+        background: linear-gradient(
+          to bottom,
+          rgb(193, 217, 252),
+          rgba(58, 173, 231, 1)
+        );
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+      }
+    }
+    .text-title {
+      font-size: 12px;
+    }
+  }
+}
+</style>

src/views/homeMy/layout/streetCondition.vue

@@ -0,0 +1,837 @@
+<template>
+  <div class="boxContent zdy-scrll">
+    <!-- 警情推送提示 -->
+    <audio ref="audioRef"><source :src="PlaySrc" /></audio>
+    <div class="box-title box-jmqk" style="margin-top: -10px;">
+      <span>街面情况</span>
+      <!-- <el-tooltip  class="media" effect="dark" :content="isPlay? '关闭警情推送提示音':'打开警情推送提示音'"  placement="top-start">
+        <el-switch v-model="isPlay" @change="changeSwitch" inline-prompt active-text="开" style="--el-switch-on-color:#13ce66;--el-switch-off-color:#ff4949"  inactive-text="关"></el-switch>
+      </el-tooltip> -->
+    </div>
+    <div class="boxInfo1">
+      <div class="buttonBox">
+        <img src="@/assets/my/up.png"  />
+        <span class="btnsItem" :class="isActive == item ? 'isActiveBg' : ''" @click="changeDate(item)" v-for="item in btns" :key="item" >{{ item }}</span>
+      </div>
+      <div class="choose_Box" v-show="isActive == '预警'">
+        <div class="SxBox">
+          <div>
+            <!-- <el-radio-group v-model="radioyj">
+              <el-radio v-for="item in radioList1" :key="item" :label="item" @change="changeData">{{item}}</el-radio>
+            </el-radio-group> -->
+            <el-radio-group v-model="radioyjType" v-if="radioyj == '触网'">
+              <CheckBox :data="checkDataYj" @changeData="_getSelectVigilantList"/>
+              <!-- <el-radio v-for="item in radioList2" :key="item" :label="item" @change="changeData">{{item}}</el-radio> -->
+            </el-radio-group>
+          </div>
+          <el-popover placement="left" :visible="visibleyj" width="460px">
+            <template #reference>
+              <el-icon @click="visibleyj = !visibleyj" color="#fff"> <Grid/> </el-icon>
+            </template>
+            <div class="detail_cnt_box">
+              <el-form :model="listQuery" :inline="true" label-width="80px">
+                <el-form-item label="预警时间" style="width:100%;">
+                  <el-date-picker v-model="listQuery.bjsj" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-M-D HH:mm:ss" format="YYYY-M-D HH:mm:ss" @change="handelTime" />
+                </el-form-item>
+                <el-form-item label="预警内容" style="width:100%;">
+                  <el-input v-model="listQuery.yjNr" placeholder="请输入报警内容"></el-input>
+                </el-form-item>
+                <el-form-item label="是否按照次数排序" style="width:100%;" label-width="136px">
+                  <el-radio-group v-model="listQuery.px">
+                    <el-radio v-for="item in D_BZ_SF" :key="item" :label="item.value">{{item.label}}</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <div class="footBtm">
+                  <el-button @click="handleFilter"> 查询 </el-button>
+                  <el-button @click="reset"> 重置 </el-button>
+                </div>
+              </el-form>
+            </div>
+          </el-popover>
+        </div>
+      </div>
+      <div class="choose_Box" v-show="isActive == '警情'">
+        <div class="SxBox">
+          <!-- <CheckBox :data="checkData" @changeData="changeDataJQBox"/> -->
+           <!-- <el-radio-group v-model="radio">
+              <el-radio v-for="item in radioList" :key="item" :label="item" @change="changeDataJQ">{{item}}</el-radio>
+            </el-radio-group> -->
+            <el-popover placement="left" :visible="visible" width="460px">
+              <template #reference>
+                <el-icon @click="openSearch" title="筛选" color="#fff"> <Grid/> </el-icon>
+              </template>
+              <div class="detail_cnt_box">
+                <el-form :model="listQuery" :inline="true" label-width="80px">
+                  <el-form-item label="报警时间" style="width:100%;">
+                    <el-date-picker v-model="listQuery.bjsj" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-M-D HH:mm:ss" format="YYYY-M-D HH:mm:ss" @change="handelTime" />
+                  </el-form-item>
+                  <el-form-item label="报警内容" style="width:100%;">
+                    <el-input v-model="listQuery.bjnr" placeholder="请输入报警内容"></el-input>
+                  </el-form-item>
+                  <el-form-item label="报警人" style="width:100%;">
+                    <el-input v-model="listQuery.bjrmc" placeholder="请输入报警人"></el-input>
+                  </el-form-item>
+                  <div>
+                    <div style="color:#fff">警情类型：</div>
+                    <CheckBox :data="checkDataType" @changeData="changeTypeJQ"/>
+                  </div>
+                  <div class="footBtm">
+                    <el-button @click="handleFilter"> 查询 </el-button>
+                    <el-button @click="reset"> 重置 </el-button>
+                  </div>
+                </el-form>
+              </div>
+            </el-popover>
+        </div>
+        <!-- <div class="SxBox colorChecked">
+          <CheckBox :data="checkColor" @changeData="changeDataJQColorBox"/>
+          <el-icon @click="handleModel" color="#fff"> <Grid/> </el-icon>
+        </div> -->
+      </div>
+      <div class="choose_Box" style="position:relative" v-show="isActive == '调度情况'">
+        <div class="SxBox choose_Box_zl">
+            <el-popover placement="left" :visible="visible" width="460px">
+              <template #reference>
+                <el-icon @click="openSearch" title="筛选" color="#fff"> <Grid/> </el-icon>
+              </template>
+              <div class="detail_cnt_box">
+                <el-form :model="listQuery" :inline="true" label-width="80px">
+                  <el-form-item label="报警时间" style="width:100%;">
+                    <el-date-picker v-model="listQuery.bjsj" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-M-D HH:mm:ss" format="YYYY-M-D HH:mm:ss" @change="handelTime" />
+                  </el-form-item>
+                  <div class="footBtm">
+                    <el-button @click="handleFilter"> 查询 </el-button>
+                    <el-button @click="reset"> 重置 </el-button>
+                  </div>
+                </el-form>
+              </div>
+            </el-popover>
+        </div>
+      </div>
+      <ul class="cntBox" :class="[isActive == '预警' ?'cntBox-yj':isActive == '警情'?'cntBox-jq':'',radioyj == '触网' ? 'cntBox-yj-cw':'']" v-loading="loading" ref="jmxzScroll">
+        <li class="cntBox-item" v-for="item in dataList" :key="item.id">
+          <!-- 警情 -->
+          <JqItm v-if="isActive == '警情'" :dic="{D_BZ_CZZT,JQLB,JQLX,JQXL,JQZL}" :data="item" @lookDetail="lookDetail" @changePoint="changePoint"/>
+          <!-- 预警 -->
+          <YjItem v-if="isActive == '预警'" :data="item" @lookDetail="lookDetail"/>
+          <!-- 调度情况 -->
+          <ZlItem v-if="isActive == '调度情况'" :data="item" @lookDetail="lookDetail" :dic="{ zlzt : D_BZ_ZXZTAI }"/>
+           <!-- 指引 -->
+          <ZlItem v-if="isActive == '指引'" :data="item" @lookDetail="lookDetail" :dic="{ zlzt : D_BZ_ZXZTAI }"/>
+          <YaItem v-if="isActive == '预案'" :data="item" @lookDetail="lookDetail" :dic="{ D_BZ_ZXZTAI,JQXL }"/>
+        </li>
+        <el-empty description="没有数据" :image-size="0.1"  v-if="!loading && dataList.length <= 0"/>
+      </ul>
+    </div>
+  </div>
+  <FkDialog />
+</template>
+
+<script setup>
+import { ElNotification } from "element-plus";
+import { IdCard } from '@/utils/validate.js'
+import FkDialog from "../components/dialog/fkDialog.vue";
+import CheckBox from "@/components/checkBox/index";
+import people from "@/assets/images/peo.png";
+import car from "@/assets/images/car.png";
+import emitter from "@/utils/eventBus.js";
+import { qcckPost, qcckGet, qcckPut } from "@/api/qcckApi.js";
+import { getSelectVigilant, getGxYjList, getSelectInstructList } from "@/api/dpApi/home.js";
+import JqItm from "../components/jqIem.vue";
+import YjItem from "../components/yjItem.vue";
+import ZlItem from "../components/zlItem.vue";
+import YaItem from "../components/yaItem.vue";
+import { onMounted, reactive, ref ,getCurrentInstance,onUnmounted, onBeforeUnmount,watch} from "vue";
+const { proxy } = getCurrentInstance();
+const { D_BZ_ZXZTAI,D_BZ_CZZT,D_BZ_SF,JQLB,JQLX,JQXL,JQZL} = proxy.$dict("D_BZ_ZXZTAI","D_BZ_CZZT","D_BZ_SF","JQLB","JQLX","JQXL","JQZL");
+
+const checkDataYj = reactive({
+  list: ['侵财','临控'],
+  hasChoose: ['侵财','临控']
+});
+
+// const checkData = reactive({
+//   // list: ["特巡警","交通警情","其他"],
+//   list: ["异常情况","110接处警"],
+//   hasChoose: []
+// });
+
+const checkDataType = reactive({
+  list:[],
+  hasChoose: []
+});
+
+const checkColor = reactive({
+  list: ["红","橙","黄","蓝"],
+  hasChoose: ["红","橙","黄","蓝"]
+});
+const lxStr = ref('') //警情类型
+const colorStr = ref('1,2,3,4') //颜色类型
+
+const visibleyj = ref(false) //预警的筛选
+
+const jmxzScroll = ref(null);
+const btns = reactive(["警情", "预警", "调度情况","预案"]);
+const isActive = ref("警情");
+const dataList = ref([]);
+const loading = ref(false);
+const total = ref(0);
+const pageNum = ref(1)
+const src = require("@/assets/sound.wav")
+const src1 = require("@/assets/video/901028.wav")
+const PlaySrc = ref(require("@/assets/sound.wav"))
+const listQuery = ref({px:'0'})
+const changeItemPoint = ref({})
+const visible = ref(false)
+const isPlay = ref(true)
+const radio = ref('全部')
+const radioList = ref(['全部', "特巡警","交通警情","其他"])
+const radioyj = ref('全部')
+const radioList1 = ref(['全部',"在逃",'侵财','触网','无人机'])
+const radioyjType = ref('')
+const radioList2 = ref(['侵财','临控'])
+const colorList = ref(['全部',"红", "橙", "黄",'蓝'])
+const colors = ref('全部')
+const audioRef = ref()
+const timer = ref(null)
+
+watch(()=>JQLB,val=>{
+  checkDataType.list = val.value.map(item=>{ return item.label })
+},{deep:true})
+
+onMounted(()=>{
+  _getSelectVigilant();//警情
+  scroll();
+  emitter.on("coordString", (res) => {
+    if (res.type === "point" && res.flag == 'PIOT') {
+      changeItemPoint.value.jd = res.coord[0];
+      changeItemPoint.value.wd = res.coord[1];
+      proxy.$confirm("确定要修改点位吗？", "警告", { type: "warning" }).then(() => {
+        qcckPut(changeItemPoint.value, "/mosty-jmxf/tbJq").then((res) => {
+          proxy.$message({ type: "success", message: "修改成功" });
+          emitter.emit("removePlot", "PIOT");
+          emitter.emit("deletePointArea", "jq");
+          dataList.value = dataList.value.map(v=>{
+            if(v.id == changeItemPoint.value.id) v = changeItemPoint.value
+            return v
+          })
+        });
+      }).catch(() => {
+        proxy.$message.info("已取消");
+        emitter.emit("deletePointArea", "jq");
+        emitter.emit("removePlot", "PIOT");
+      });
+    }
+  });
+
+
+  // 警情-预警 推送播放
+  emitter.on('socketJQYJ',(val)=>{
+    // lx:06(警情) 07(预警)
+    PlaySrc.value = val.lx == '06' ? src :src1;
+    if(val.lx == '06') handleJQts(val);
+    if(val.lx == '07'){
+      if(isActive.value == '预警') dataList.value.unshift(val.data);
+      if(isPlay.value) playVideo(); //播放
+      soketPass(val.data,'07') //处理警情和预警推送时的数据
+    }
+  })
+})
+
+onUnmounted(()=>{
+  emitter.off('socketJQYJ')
+})
+
+// 处理警情推送
+function handleJQts(val) {
+  let hasType = lxStr.value.split(',') //警情类型
+  let hasColor = colorStr.value.split(',') //颜色
+  // 必须选择类型和颜色才会推送数据
+  if(hasColor.length > 0 && hasType.length >0 ){
+    if( hasType.includes(val.data.bmlx) && hasColor.includes(val.data.color) ) {
+      if(isActive.value == '警情') dataList.value.unshift(val.data);
+      if(isPlay.value && val.data.color == '1') playVideo(); //播放
+      soketPass(val.data,'06')  //处理警情和预警推送时的数据
+    }
+  }
+}
+
+// 播放警报通知2s
+function playVideo() {
+  let count = 0
+  audioRef.value.play();
+  timer.value = setInterval(() => {
+    if(count < 2) audioRef.value.play();
+    count++
+  }, 0.2e3);
+  if(count > 2){ clearInterval(timer.value); }
+}
+
+// 处理警情和预警推送时的数据
+function soketPass(val,lx){
+  // lx:06(警情) 07(预警)
+  let html = ''
+    if(lx == '06' && val.color == '1'){
+      html += `
+      <div class="newCard">
+        <div class="title two_text_detail">${val.bjnr }</div>
+        <div class="text">
+          报警人：<span class="info">${val.bjrmc|| '未知'} <span>(${val.bjrLxdh})</span></span>
+        </div>
+        <div class="text">
+          报警时间：<span class="info">${val.bjsj }</span>
+        </div>
+        <div class="text">
+          警情类别：<span class="info">${val.bjlbmc }</span>
+        </div>
+        <div class="text">
+          警情类型：<span class="info">${val.bjlxmc }</span>
+        </div>
+        <div class="text">
+          警情细类：<span class="info">${val.bjxlmc ? val.bjxlmc : '未知'}</span>
+        </div>
+        <div class="text">
+          报警人电话：<span class="info">${val.bjrLxdh}</span>
+        </div>
+      </div>
+      `
+     ElNotification({ type:'warning',title:"警情", showClose:true, dangerouslyUseHTMLString:true,  position:'bottom-right', message:html }) //消息推送
+    }
+    if(lx == '07'){
+      html += `
+      <div class="newCard">
+        <div class="picture">
+          <div class="pictureLeft">
+            <img style="width: 100%;height:100%;" src="${val.yjTp}" />
+          </div>
+          <div>
+            <div class="text">
+              报警人：
+              <span class="info">
+                <span>${val.yjRyxm|| '未知'}</span> &nbsp;
+                <span>${IdCard(val.yjRysfzh,2) }</span> &nbsp
+                <span>${IdCard(val.yjRysfzh,3) }岁</span>
+              </span>
+            </div>
+            <div class="text">身份证号：<span class="info">${val.yjRysfzh }</span></div>
+            <div class="text">抓拍时间：<span class="info">${val.yjFssj }</span></div>
+          </div>
+        </div>
+
+        <div class="text">${val.yjBt }</div>
+        <div class="text">
+          抓拍地点：<span class="info">${val.yjGzymc }</span>
+        </div>
+        <div class="text">
+          预警时间：<span class="info">${val.yjSj}</span>
+        </div>
+      </div>
+      `
+      ElNotification({ type:'warning',title:"预警", showClose:true, dangerouslyUseHTMLString:true,  position:'bottom-right', message:html }) //消息推送
+    }
+}
+
+// change播放
+function changeSwitch(val){
+  isPlay.value = val
+  if(!val) clearInterval(timer.value);
+}
+
+// 打开警情搜索
+function openSearch(){
+  if(!visible.value) listQuery.value = {px:'0'}
+  if(isActive.value == '警情' || isActive.value == '调度情况') visible.value = !visible.value;
+}
+
+// 模拟数据
+function handleModel(){
+  qcckGet({},'/mosty-jmxf/lzJq/ysJq').then(res=>{})
+}
+
+// 时间处理
+function handelTime(val){
+  listQuery.value.startTime = val ? val[0] : ''
+  listQuery.value.endTime = val ? val[1] : ''
+}
+// 搜索警情
+function handleFilter(){
+  pageNum.value = 1
+  if(isActive.value == '警情') _getSelectVigilant();//警情
+  if(isActive.value == '预警') _getSelectVigilantList();//预警
+  if(isActive.value == '调度情况') _getSelectInstructList();//调度情况
+}
+// 重置警情
+function reset(){
+  listQuery.value = {px:'0'};//筛选表单
+  visible.value = false;//警情
+  visibleyj.value = false;//预警
+  checkDataType.hasChoose = []
+  if(isActive.value == '警情') _getSelectVigilant();//警情
+  if(isActive.value == '预警') _getSelectVigilantList();//预警
+  if(isActive.value == '调度情况') _getSelectInstructList();//调度情况
+}
+
+// 警情切换经纬度
+function changePoint(val){
+  changeItemPoint.value = JSON.parse(JSON.stringify(val));
+}
+
+// 切换数据
+function changeDate(val) {
+  visible.value = false;
+  isActive.value = val;
+  pageNum.value = 1;
+  emitter.emit("deletePointArea", "yj");
+  emitter.emit("deletePointArea", "jq");
+  emitter.emit("deletePointArea", "zl");
+  emitter.emit("closeAllDialog");
+  dataList.value = []; //清空列表
+  total.value = 0; // 总数
+  listQuery.value = {px:'0'};
+  radioyjType.value = ''
+  getList(val);
+}
+// 根据不同类型掉接口
+function getList(val){
+  switch (val) {
+    case "警情":
+      _getSelectVigilant();
+      break;
+    case "预警":
+      _getSelectVigilantList();
+      break;
+    case "调度情况":
+    case "指引":
+      _getSelectInstructList();
+      break;
+    case "预案":
+      dataList.value=[
+        {
+          yamc:'测试',
+          fasj:'2025-08-26 00:00:00',
+          qdzt:'01'
+        }
+      ]
+      break;
+  }
+}
+
+
+
+// 警情类型 单选
+function changeDataJQ(val){
+  pageNum.value = 1;
+  dataList.value = [];
+  colors.value = '全部';
+  _getSelectVigilant();//警情
+}
+
+
+function changeTypeJQ(val){
+  checkDataType.hasChoose = val
+}
+
+// 警情类型 单选
+// function changeDataJQBox(val){
+//   pageNum.value = 1;
+//   checkData.hasChoose = val
+//   dataList.value = [];
+// let jqly=[]
+//   val.forEach(v=>{
+//     if(v == '异常情况') jqly.push('02')
+//     if(v == '110接处警') jqly.push('01')
+//   })
+//   lxStr.value = jqly.join(',')
+//   _getSelectVigilant();//警情
+// }
+
+// 警情颜色 单选
+function changeDataJQColor(val){
+  pageNum.value = 1;
+  dataList.value = [];
+  _getSelectVigilant();//警情
+}
+// 警情颜色 多选
+function changeDataJQColorBox(val){
+  pageNum.value = 1;
+  dataList.value = [];
+  checkColor.hasChoose = val
+  let colors = []
+  val.forEach(v=>{
+    if(v == '红') colors.push('1')
+    if(v == '橙') colors.push('2')
+    if(v == '黄') colors.push('3')
+    if(v == '蓝') colors.push('4')
+  })
+  colorStr.value = colors.join(',')
+  _getSelectVigilant();//警情
+}
+//获取警情数据列表
+function _getSelectVigilant() {
+  loading.value = true;
+  let data = { pageSize: 10, pageNum: pageNum.value,...listQuery.value };
+  delete data.bjsj;
+  // if(lxStr.value) data.jqly = lxStr.value
+  // if(colorStr.value) data.colors = colorStr.value
+  if(checkDataType.hasChoose.length > 0){
+    let arr = JQLB.value.filter(v=>{
+      if(checkDataType.hasChoose.includes(v.label)) return v
+    })
+    data.jqlbdm = (arr.map(v=> v.value)).join(',')
+  }
+  getSelectVigilant(data).then((res) => {
+    let arr = res.records ? res.records : [];
+    handleDate(arr, res.total);
+  }).catch(() => {
+    loading.value = false;
+  });
+}
+
+// 预警类型 单选
+function changeData(val){
+  pageNum.value = 1;
+  emitter.emit("removePlot", "PIOT");
+  _getSelectVigilantList()
+}
+
+
+//获取预警数据列表
+function _getSelectVigilantList(val) {
+  loading.value = true;
+  let data = { pageSize: 10, pageNum: pageNum.value ,...listQuery.value};
+  delete data.bjsj;
+  switch(radioyj.value){
+    case '视觉':
+      data.yjlyids = '01'
+      break;
+    case '融合':
+      data.yjlyids = '02'
+      break;
+    case '在逃':
+      data.bqfl = '01'
+      break;
+    case '侵财':
+      data.bqfl = '02'
+      break;
+    case '触网':
+      data.sfcw = '1'
+      break;
+    case '无人机':
+      data.yjGzyid = 'wrj'
+      break;
+  }
+  if(val){
+    let lx = []
+    val.forEach(v=>{
+      if(v == '侵财') lx.push('02')
+      if(v == '临控') lx.push('03')
+    })
+    data.cwlx =  lx.join(',')
+  }
+  // if(radioyjType.value == '侵财') data.bqfl = "02";
+  // if(radioyjType.value == '临控') data.bqfl = "03";
+  getGxYjList(data).then((res) => {
+    let arr = res.records ? res.records : [];
+    arr.forEach((item) => {
+      item.bqlist = item.yjlyBqmc ? item.yjlyBqmc.split(",") : [];
+    });
+    handleDate(arr, res.total);
+  }).catch(() => {
+    loading.value = false;
+  });
+}
+//获取调度情况数据列表
+function _getSelectInstructList() {
+  loading.value = true;
+  let data = { pageSize: 10, pageNum: pageNum.value };
+  let time = listQuery.value.bjsj
+  if(time && time.length >0 ){
+    data.startTime= time[0]
+    data.endTime= time[1]
+  }
+  if(isActive.value == '指引') data.zlxflx = 3
+  getSelectInstructList(data).then((res) => {
+    let arr = res.records ? res.records : [];
+    handleDate(arr, res.total);
+  })
+  .catch(() => {
+    loading.value = false;
+  });
+}
+// 获取接口返回的数据
+function handleDate(arr, all) {
+  loading.value = false;
+  dataList.value = pageNum.value == 1 ? arr : dataList.value.concat(arr);
+  total.value = all;
+}
+
+// 查看详情
+function lookDetail(item){
+  emitter.emit("closeAllDialog");
+  emitter.emit("closeVideo");
+  emitter.emit("deletePointArea", 'jq');
+  emitter.emit("deletePointArea", 'yj');
+  emitter.emit("deletePointArea", 'zl');
+  emitter.emit("removePlot", "PIOT");
+  switch (isActive.value) {
+    case "警情":
+      // _setPointsAndShowModle(item, 'jq', "showAj",0.8);
+      break;
+    case "预警":
+      _setPointsAndShowModle(item, 'yj', "showYjxq");
+      break;
+    case "调度情况":
+    case "指引":
+       _setPointsAndShowModle(item, "zl", "showYjzl");
+      break;
+  }
+}
+
+///显示详情及撒点
+const _setPointsAndShowModle = (item, flag, modle,scale) => {
+  if (item.jd && item.wd) {
+    emitter.emit("addPoint", { coords: [item], icon: require(`@/assets/point/${flag}.png`), flag, scale });
+    emitter.emit("setMapCenter", { location: [item.jd, item.wd], zoomLevel: 15 });
+  }
+  emitter.emit(modle, [item]);
+};
+
+//触底加载
+function scroll() {
+  let scrollTargetBox = jmxzScroll.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 (dataList.value.length < total.value) {
+        pageNum.value++;
+        getList(isActive.value); //根据不同类型掉接口
+      }
+    }
+  };
+}
+</script>
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+.boxInfo1 {
+  height: 100%;
+  padding: 10px 0 10px 12px;
+  box-sizing: border-box;
+  .buttonBox {
+    display: flex;
+    align-items: center;
+    .btnsItem {
+      display: inline-block;
+      width: 90px;
+      height: 43px;
+      text-align: center;
+      line-height: 43px;
+      background: url("~@/assets/my/btn.png") no-repeat;
+      background-size:  100% 100%;
+      color: #fff;
+    }
+    .isActiveBg {
+      width:  90px;
+      height: 43px;
+      background: url("~@/assets/my/btnActive.png") no-repeat;
+      background-size:  100% 100%;
+    }
+  }
+  .cntBox {
+    height: calc(100% - 66px);
+    padding-top: 10px;
+    box-sizing: border-box;
+    overflow: hidden;
+    overflow-y: auto;
+  }
+  .cntBox-yj{
+    height: calc(100% - 73px);
+  }
+  .cntBox-yj-cw{
+    height: calc(100% - 105px);
+  }
+  .cntBox-jq{
+    height: calc(100% - 90px);
+  }
+}
+::v-deep .el-loading-mask{
+  background: rgba(0,0,0,.3);
+}
+::v-deep .el-checkbox__label{
+  color:#fff;
+}
+::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
+  color:#ffe954;
+}
+::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
+  background-color: #ffe954;
+  border-color:#ffe954;
+}
+::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
+  background-color: #ffe954;
+  border-color:#ffe954;
+}
+::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
+  background:#000;
+}
+::v-deep .el-checkbox__inner{
+  background:#0e365d ;
+  border:1px solid #2678fA;
+}
+::v-deep .el-checkbox__inner::after{
+  border:2px solid #000;
+  border-left:0;
+  border-top:0;
+  left:4px;
+  top:1px;
+}
+::v-deep .el-checkbox{
+  margin-right: 14px;
+}
+::v-deep .el-radio {
+  margin-right: 16px;
+  color: #fff;
+}
+.footBtm{
+  text-align: center;
+}
+::v-deep .el-form-item__label{
+  color: #000;
+}
+.box-jmqk{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .media{
+    font-size: 12px;
+    text-shadow: none;
+  }
+}
+.choose_Box_zl{
+  position: absolute;
+  right: 20px;
+  top: 10px;
+  z-index: 9;
+  cursor: pointer;
+}
+.SxBox{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+::v-deep .el-popper.is-light{
+  background: #00314e;
+  border: 1px solid #00314e;
+}
+::v-deep .el-popper.is-light .el-popper__arrow::before{
+  background: #00314e;
+}
+::v-deep  .el-form-item__label{
+  color: #fff;
+}
+
+::v-deep .el-radio__label{
+  padding-left: 5px;
+}
+::v-deep .el-radio__inner{
+  background: #021936;
+}
+::v-deep .el-radio__input.is-checked .el-radio__inner{
+  border-color: #0095FF;
+  background: #000;
+}
+::v-deep .el-radio__inner::after{
+  width: 7px;
+  height: 7px;
+  background: #0095FF;
+}
+</style>
+
+<style lang="scss">
+@mixin wz ($color){
+  border: 2px solid $color;
+  border-left: 0;
+  border-top: 0;
+  left: 4px;
+  top: 1px;
+}
+@mixin bg ($bg,$bor){
+  background: $bg!important;
+  border-color:$bor !important;;
+}
+
+.colorChecked{
+  .el-checkbox-group{
+    .el-checkbox:nth-child(1){
+      .el-checkbox__input.is-checked .el-checkbox__inner{
+        @include bg(rgba(241, 12, 12, 0.5),red);
+      }
+      .el-checkbox__inner::after{
+        @include wz(red);
+      }
+      .el-checkbox__input.is-checked + .el-checkbox__label{
+        color: red;
+      }
+    }
+    .el-checkbox:nth-child(2){
+      .el-checkbox__input.is-checked .el-checkbox__inner{
+        @include bg(rgba(241, 170, 17, 0.5),orange);
+      }
+      .el-checkbox__inner::after{
+        @include wz(orange)
+      }
+      .el-checkbox__input.is-checked + .el-checkbox__label{
+        color: orange;
+      }
+    }
+    .el-checkbox:nth-child(3){
+      .el-checkbox__input.is-checked .el-checkbox__inner{
+        @include bg(rgba(229, 233, 10, 0.5),yellow);
+      }
+      .el-checkbox__inner::after{
+        @include wz(yellow)
+      }
+      .el-checkbox__input.is-checked + .el-checkbox__label{
+        color: yellow;
+      }
+    }
+    .el-checkbox:nth-child(4){
+      .el-checkbox__input.is-checked .el-checkbox__inner{
+        @include bg(rgba(6, 161, 233, 0.5),skyblue);
+      }
+      .el-checkbox__inner::after{
+        @include wz(skyblue);
+      }
+      .el-checkbox__input.is-checked + .el-checkbox__label{
+        color: skyblue;
+      }
+    }
+  }
+}
+
+
+
+</style>
+
+<style lang="scss">
+.zdy-scrll{
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 8px;
+    background-color: #3a4b5f !important;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: #0f9ee0 !important;
+    border-radius: 50px;
+  }
+  ::-webkit-scrollbar-track {
+    background-color: #3a4b5f !important;
+  }
+  ::-webkit-scrollbar-corner {
+    background-color: #142141 !important;
+  }
+
+}
+</style>

src/views/homeMy/layout/streetGroup.vue

@@ -0,0 +1,455 @@
+<template>
+  <div class="boxContent">
+    <div class="box-title">巡逻任务</div>
+    <div class="searchInfo-xf">
+      <el-popover placement="left" width="300px" :append-to-body="false" :visible="visible" trigger="click">
+         <template #reference>
+          <Search size="20" @click="visible = !visible"/>
+        </template>
+         <template #default>
+           <el-form :model="dataForm" :inline="true" >
+              <el-form-item label="关键字" label-width="68px">
+                <el-input v-model="dataForm.keyword" placeholder="请输入关键字" clearable />
+              </el-form-item>
+              <el-form-item label="所属部门" label-width="68px">
+                <MOSTY.Department width="176px" placeholder="请输入所属部门" clearable v-model="dataForm.ssbmdm"/>
+              </el-form-item>
+              <el-form-item label="负责人" label-width="68px" >
+                <el-input v-model="dataForm.fzrXm" placeholder="请输入负责人" clearable />
+              </el-form-item>
+              <el-form-item label="警组"  label-width="68px">
+                <el-input v-model="dataForm.jzMc" placeholder="请输入警组" clearable />
+              </el-form-item>
+              <div style="text-align: center;">
+                <el-button type="success" @click="handleFilter">查询</el-button>
+                <el-button type="info" @click="reset"> 重置 </el-button>
+              </div>
+           </el-form>
+        </template>
+      </el-popover>
+    </div>
+    <div class="boxInfo">
+      <div class="checkBox">
+        <CheckBox :data="checkData" @changeData="changeData"></CheckBox>
+      </div>
+      <ul class="groupList noScollLine" v-loading="loading">
+        <li :class="item.isChecked?'active':''" v-for="item in xzList.list" :key="item.id" @click="handelClick(item)" >
+          <div class="leftInfo">
+            <div class="top-cnt">
+              <div class="top-cnt-title">
+                <img :src="item.lx == '02' ? JJ : item.lx == '03'? PCSMJ : TJ" />
+                <span>{{ item.jzMc ? item.jzMc : item.fzrXm + "巡组" }}</span>
+              </div>
+              <div class="text">
+                负责人：{{ item.fzrXm }} {{ item.fzrLxdh }}
+              </div>
+              <div class="text" v-if="item.qwlx=='03'">
+                原因：<span class="bz">{{ item.bz }} </span>
+              </div>
+            </div>
+            <div class="address">
+              <img src="@/assets/images/dingwei.png" />
+              <span class="tools"><el-tooltip :content="item.dqwz" placement="top">{{ item.dqwz  }}</el-tooltip></span>
+            </div>
+          </div>
+          <div class="sxt"><img src="@/assets/my/sxt.png" /></div>
+          <div class="xlStatus" :class="item.xfzt == 1?'lineing':item.xfzt == 2?'unline':'line'">
+           {{item.xfzt == 1?'处警中':item.xfzt == 2?'离线':'巡逻中'}}
+          </div>
+        </li>
+        <el-empty description="没有数据" :image-size="0.1"  v-if="!loading && xzList.list.length <= 0"   />
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+import * as MOSTY from "@/components/MyComponents/index";
+import emitter from "@/utils/eventBus.js";
+import CheckBox from "@/components/checkBox/index";
+import { getSelectDeckList } from "@/api/dpApi/home.js";
+import openWebSocket from "@/utils/webSocket.js";
+import { useStore } from "vuex";
+import { ref, reactive, onMounted, defineEmits,onBeforeUnmount,getCurrentInstance } from "vue";
+const checkData = reactive({
+  list: ["巡逻中", "离线"],
+  hasChoose: ["巡逻中"]
+});
+const { proxy } = getCurrentInstance();
+const { D_BZ_BMYWLX } = proxy.$dict( "D_BZ_BMYWLX");
+const TJ = require(`@/assets/point/specialPolice.png`);
+const JJ = require(`@/assets/point/trafficPolice.png`);
+const PCSMJ = require(`@/assets/point/peoplePolice.png`);
+const store = useStore();
+const loading = ref(false); //警组加载
+let xzList = reactive({
+  list: []
+}); //巡组数据
+const zzlx = ref(null)
+const total = ref(0);
+const status = ref([0,1,2]); //巡组状态
+const qwlx = ref('01,02')
+const dataForm = ref({
+  pageCurrent:1,
+  pageSize:500
+})
+const visible = ref(false)
+const isTootChange = ref(false)
+const peoLx = ref('') //人员类型  01-特警，02-交警，03-派出所民警
+const kfdLx = ref({}) //快返点类型
+const isShowPoint = ref(true) //是否展示点位
+let timer;
+onMounted(() => {
+  _ggetSelectDeckList("0,1,2");// 查询巡逻中数据
+  getWebSocketData();//websoket
+  handelscroll()//滚动加载
+  emitter.on("changeGroupPoint",val=>{
+    if(!val) {
+      isTootChange.value = true; //判断点击警情 - 预警是否加载页面
+      peoLx.value = ''
+      kfdLx.value = {}
+    }
+
+    if(val && val.lx == 'cancel_xfq') peoLx.value = '';
+    if(val && val.lx == 'cancel_kfd')  kfdLx.value = {}
+
+
+    isShowPoint.value = (val && val.lx ) == 'cancel' ? false : true //是否展示点位
+    if(val && val.lx == 'xfq'){
+      peoLx.value = ''
+      let obj = D_BZ_BMYWLX.value.find(item=>{return item.dm == val.dm})
+      if(obj && obj.label == '特巡警') peoLx.value ='01';
+      if(obj && obj.label == '交警')  peoLx.value ='02';
+      if(obj && obj.label == '派出所')  peoLx.value ='03';
+    }
+    if(val && (val.lx == 'kfd' || val.lx == 'kfd-x')){
+      if(val.lx == 'kfd-x') peoLx.value = ''
+      kfdLx.value = {}
+      kfdLx.value.xffwlx = val.xffwlx
+      if(val.xffwid) kfdLx.value.xffwid = val.xffwid
+    }
+    _ggetSelectDeckList("0,1,2");// 查询巡逻中数据
+  })
+});
+
+
+onBeforeUnmount(()=>{
+  openWebSocket.close()
+  emitter.off("changeGroupPoint")
+})
+// 获取WebSocket数据
+function getWebSocketData() {
+  let dws = openWebSocket.getInstance();
+  dws.connect((res) => {
+    // 接收发送消息
+    dws.ws.onmessage = (e) => {
+      let dataInfo = JSON.parse(e.data).data;
+      if (e && e.data) {
+        let newsDate = JSON.parse(e.data);
+        switch (newsDate.type) {
+          //一键报警
+         case "01":
+            let { jd, wd } = newsDate.data;
+            emitter.emit("addPointArea", { coords: [{ jd, wd }], icon: require("@/assets/point/sos.png"), flag: "sosPoint"});
+            emitter.emit("SsCircle", JSON.parse(e.data).data);
+            break;
+            //一键报警处置完成
+          case "02":
+            let ids = document.getElementById(JSON.parse(e.data).data);
+            ids.parentElement.removeChild(ids);
+            break;
+          // 新增报备
+          case "03":
+            // isShowGroupPoint  是否取消推送
+            if (typeof status.value == "string") { status.value = status.value.split(","); }
+            status.value.forEach((item, index) => {
+              if (item == dataInfo.xfzt && isShowGroupPoint) {
+                xzList.list.unshift(dataInfo);
+                addPointMaker([dataInfo]); //撒点
+              }
+            });
+            break;
+          //报备位置更新
+          case "04":
+            xzList.list.forEach((value, index) => {
+              if (value.id == dataInfo.id && isShowGroupPoint) {
+                delPointMaker(dataInfo); //清除原来的撒点
+                xzList.list.splice(index, 1);
+                if(dataInfo.xfzt != 2){
+                  xzList.list.unshift(dataInfo);
+                  addPointMaker([dataInfo]); //撒点
+                }
+              }
+            });
+            break;
+            // 结束报备
+          case "05":
+            xzList.list.forEach((value, index) => {
+              if (value.id == dataInfo.id && isShowGroupPoint) {
+                delPointMaker(dataInfo); //清除原来的撒点
+                xzList.list.splice(index, 1);
+              }
+            });
+            break;
+          case "06": //警情
+          case "07": //预警
+            emitter.emit("socketJQYJ", {data:dataInfo,lx:newsDate.type});
+            break;
+          case '08':// 从业人员位置
+            emitter.emit("socketCYRY", dataInfo);
+            break;
+          case '09': //线索上报
+            emitter.emit("socketXSSB", dataInfo);
+            break;
+        }
+      }
+    };
+  });
+}
+
+
+function handleFilter(){
+  changeData(checkData.hasChoose)
+  visible.value = false
+}
+function reset(){
+  dataForm.value = { pageCurrent:1 ,pageSize:500}
+  visible.value = false
+  handleFilter()
+}
+
+//选择巡防状态
+function changeData(val) {
+  dataForm.value.pageCurrent = 1;
+  checkData.hasChoose = val;
+  isTootChange.value = false;
+  let scrollTargetBox = document.querySelector(".groupList");
+  scrollTargetBox.scrollTop = 0
+  if(val.length == 0){
+    emitter.emit("deletePointArea", "rx");//取消警力
+    emitter.emit("deletePointArea", "gpsZb");//取消装备
+    status.value = ''
+    xzList.list = []
+  }else{
+    let arr = []
+    let brr = []
+    zzlx.value = null
+    val.forEach(item=>{
+      if(item == '巡逻中') arr.push(0)
+      if(item == '处警中') arr.push(1)
+      if(item == '离线') arr.push(2)
+      if(item == '机关值班') brr.push('01')
+      if(item == '动中备勤') brr.push('02')
+      if(item == '其他勤务') brr.push('03')
+      if(item == '便衣') zzlx.value = '1'
+    })
+    status.value = arr.join(',')
+    qwlx.value = brr.join(',')
+    _ggetSelectDeckList(status.value,qwlx.value);
+  }
+}
+//巡组列表
+function _ggetSelectDeckList(staus,qwlx) {
+  if(!isTootChange.value) loading.value = true;
+  let data = { ...dataForm.value, xfzt:staus, qwlx:qwlx ,...kfdLx.value};
+  if(zzlx.value && checkData.hasChoose.length != 7) data.zzlx = zzlx.value;
+  if(peoLx.value) data.lxs = peoLx.value;
+  getSelectDeckList(data).then((res) => {
+    emitter.emit("deletePointArea", "rx");//取消警力
+    emitter.emit("deletePointArea", "gpsZb");//取消装备
+    loading.value = false;
+    let arr = res.records ? res.records : [];
+    total.value = res.total
+    xzList.list =  dataForm.value.pageCurrent == 1 ? arr : xzList.list.concat(arr);
+    let brrSd = xzList.list.filter((v) => { return v.jd && v.wd; });
+    //是否展示点位
+    if(isShowPoint.value) addPointMaker(brrSd) //撒点
+  }).catch(() => { loading.value = false; });
+}
+
+
+// 删除点位
+const delPointMaker = (data) => {
+  emitter.emit("deletePointAreaOne", { flag: "rx", id: data.id });
+};
+// 撒点
+const addPointMaker = (data) => {
+  let pramas = { coords: data,isBounds:true,showTitle:true,flag: "rx" }
+  emitter.emit("addPointArea", pramas);
+};
+//查看警组信息
+function handelClick(item) {
+  emitter.emit("deletePointArea", "xfq");
+  emitter.emit("deletePointArea", "route");
+  emitter.emit("deletePointArea", "kfdArea");
+  emitter.emit("deletePointArea", "kfd");
+  xzList.list.forEach(v=>{ if(v.id != item.id) v.isChecked = false})
+  item.isChecked = !item.isChecked
+  emitter.emit("showJzInfo", item);
+  if (item.jd && item.wd) {
+    store.commit("user/setActiveId", item.id);
+    emitter.emit("setMapCenter", { location: [item.jd, item.wd],  zoomLevel: 12 });
+  }
+}
+//触底加载
+function handelscroll() {
+  let scrollTargetBox = document.querySelector(".groupList");
+  scrollTargetBox.onscroll = (e) => {
+    var scrollHeight = scrollTargetBox.scrollHeight; //251
+    var scrollTop = scrollTargetBox.scrollTop; //0-18
+    var clientHeight = scrollTargetBox.clientHeight; //233
+    if (scrollHeight - clientHeight == scrollTop) {
+      isTootChange.value = false;
+      //滚动条滚到最底部
+      if (xzList.list.length == total.value ) return;
+      dataForm.value.pageCurrent++;
+      let statusStr = status.value.join(',')
+      _ggetSelectDeckList(statusStr);
+    }
+  };
+}
+
+</script>
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+
+::v-deep .el-checkbox__label{
+  color:#fff;
+}
+::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
+  color:#ffe954;
+}
+::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
+  background-color: #ffe954;
+  border-color:#ffe954;
+}
+::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
+  background-color: #ffe954;
+  border-color:#ffe954;
+}
+::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
+  background:#000;
+}
+::v-deep .el-checkbox__inner{
+  background:#0e365d ;
+  border:1px solid #2678fA;
+}
+::v-deep .el-checkbox__inner::after{
+  border:2px solid #000;
+  border-left:0;
+  border-top:0;
+  left:4px;
+  top:1px;
+}
+.boxContent{
+  position: relative;
+  // z-index:99;
+  .searchInfo-xf{
+    position:absolute;
+    top:52px;
+    right:20px;
+    ::v-deep .icon{
+      width:20px ;
+      height:20px;
+    }
+    ::v-deep .el-popper.is-light{
+      background: #0a1d43;
+      border: 1px solid #4565a4;
+    }
+    ::v-deep .el-popper.is-light .el-form-item__label{
+      color:#fff;
+    }
+    ::v-deep .el-popper.is-light .el-popper__arrow::before{
+        border: 1px solid #4565a4;
+        background: #0a1d43;
+    }
+  }
+}
+ul.groupList {
+  height: calc(100% - 35px);
+  overflow-y: auto;
+  margin-top: 8px;
+  margin-bottom: 0 !important;
+  li {
+    position: relative;
+    display: flex;
+    margin-top: 8px;
+    padding-bottom: 3px;
+    border:1px solid #004A89;
+    border-radius: 2px;
+    &:hover {
+      box-shadow: inset 0px 0px 15px #0474c3;
+    }
+    .leftInfo {
+      flex: 1;
+      .top-cnt {
+        padding: 0 12px;
+        padding-top: 8px;
+        line-height: 22px;
+        padding-bottom: 6px;
+        .top-cnt-title {
+          width: 80%;
+          font-size: 14px;
+          color:#fff;
+          img {
+            vertical-align: bottom;
+            margin-right: 4px;
+            width:15px;
+          }
+        }
+        .text {
+          color: #2678f7;
+          line-height: 33px;
+        }
+        .bz{
+          color: #fff;
+        }
+      }
+      .address {
+        margin: 0 14px;
+        border-top: 1px solid rgba(113,169,255,0.3);
+        height: 30px;
+        line-height: 30px;
+        color: #ABC0D6;
+        display:flex;
+        align-items: center;
+        img {
+          margin-right: 6px;
+          vertical-align: text-top;
+        }
+        .tools{
+          display:inline-block;
+          max-width:270px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+    .sxt {
+      position: relative;
+      width: 30px;
+      margin-left: 10px;
+      img {
+        position: absolute;
+        bottom: 4px;
+        right: 10px;
+      }
+    }
+  }
+  li.active {
+    border: 1px solid #108fe7;
+    box-shadow:inset 0 0 10px #108fe7;
+  }
+}
+::v-deep .el-loading-mask {
+  background: rgba(0, 0, 0, 0.3);
+}
+::v-deep .el-checkbox{
+  margin-right: 11px;
+}
+.boxInfo{
+  padding-left:10px;
+}
+</style>

src/views/homeMy/layout/streetInfo.vue

@@ -0,0 +1,465 @@
+<template>
+  <div
+    class="dialogBox"
+    :style="`left:${elLeft}px;top:${elTop}px`"
+    draggable="true"
+    ref="dialogBoxYpfx"
+    @dragstart="dragstart($event)"
+    @dragend="dragend($event)"
+  >
+    <div class="title">
+      <span class="mc">{{ props.data.jzMc ? props.data.jzMc : props.data.fzrXm + "巡组" }}</span>
+      <span @click="close" class="close">
+        <el-icon><Close /></el-icon>
+      </span>
+    </div>
+    <div class="info-Big-Box noScollLine">
+      <div class="infoBox">
+        <div class="xlStatus" :class="props.data.xfzt == 1 ? 'lineing' : props.data.xfzt == 2 ? 'unline': 'line'">
+          {{props.data.xfzt == 1? "处警中": props.data.xfzt == 2? "离线": "巡逻中"}}
+        </div>
+        <div class="text">
+          负责人：<span class="tag mj">民警</span>
+          <el-tooltip :content=" '身份证号： ' + props.data.fzrSfzh  " placement="bottom">
+            <span class="name">{{ props.data.fzrXm }} ({{ props.data.fzrLxdh }})</span>
+          </el-tooltip>
+        </div>
+        <div class="text">
+          开始时间：<span class="name">{{ props.data.bbkssj }}</span>
+        </div>
+        <!-- <div class="time">
+          (计划 ( {{ props.data.kssj }} ~ {{ props.data.jssj }} )
+        </div> -->
+        <div class="text">
+          组员：
+          <span v-for="(item, index) in props.data.pbmj" :key="index" class="jc_box">
+            <span class="tag mj">民警</span>
+            <span class="name">{{ item.jlxm }}</span>
+          </span>
+          <span v-for="(item, index) in props.data.pbfj" :key="index" class="jc_box">
+            <span class="tag fj">辅警</span>
+            <span class="name">{{ item.jlxm }}</span>
+          </span>
+        </div>
+        <div class="text">
+          单位：<span class="name">{{ props.data.ssbm }}</span>
+        </div>
+        <div class="text zblist" v-if="props.data.txzb.length <= 0">
+          通讯装备：<span>暂无数据</span>
+        </div>
+
+        <div class="text zblist" v-else>
+          <el-collapse v-model="props.data.openTxzb">
+            <el-collapse-item title="通讯装备：" name="1">
+              <span class="zb-item" v-for="(item, index) in props.data.txzb" :key="index">
+                <span class="sbinfo">{{ item.sbmc }}</span>
+                <el-tooltip :content="'呼叫(' + item.hh + ')'" placement="bottom">
+                  <img style="width: 22px" src="@/assets/my/sxt.png" @click="getZFJLY(item)"/>
+                </el-tooltip>
+              </span>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+
+        <div class="text zblist" v-if="props.data.jyqx.length <= 0">
+          常用装备：<span>暂无数据</span>
+        </div>
+
+        <div class="text zblist" v-else>
+          <el-collapse v-model="props.data.openJyqx">
+            <el-collapse-item title="常用装备：" name="1">
+              <span class="zb-item" v-for="(item, index) in props.data.jyqx" :key="index">
+                <span class="qxinfo">{{ item.qxmc }}（{{ item.qxsl }}）个</span>
+              </span>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+        <div class="text zblist">
+          警用车辆：
+          <span class="zb-item" v-for="(item, index) in props.data.pbcl" :key="index">
+            <span class="qxinfo">{{ item.jdchphm }}</span>
+          </span>
+          <span v-if="props.data.pbcl.length <= 0">暂无</span>
+        </div>
+        <div class="text" v-if="props.data.bz != ''">
+          备注： <span class="name">{{ props.data.bz }}</span>
+        </div>
+      </div>
+    </div>
+    <el-popover placement="bottom" :visible="visible" :width="476" :append-to-body="false">
+        <template #reference>
+          <div class="btnBox">
+            <button class="dp-default small" v-if="props.data.xffwlx == 1" @click="getXfqData">巡防区</button>
+            <!-- <button class="dp-default small" v-else-if="props.data.xffwlx == 2"  @click="getKfdData">快反点</button> -->
+            <!-- <button class="dp-default small" v-else @click="getKfdData">检查站</button> -->
+            <button class="dp-default small" @click="onClickZbyj">周边预警</button>
+            <button class="dp-default small" @click="onClickSpsd">视频随动</button>
+            <button class="dp-default small" @click="visible = !visible">轨迹回放</button>
+            <!-- <JqTable :configer="{ placement:'right',lx:'jq',width:600}" :data="props.data">
+              <template #info>
+                <button class="dp-default small" >关联警情</button>
+              </template>
+            </JqTable> -->
+          </div>
+        </template>
+        <div class="timeBox">
+          <div class="time1">{{ dateRange[0] }}</div>
+          <el-slider
+            class="playtime-slider"
+            v-model="playTime"
+            id="playtimeSlider"
+            :range="true"
+            :min="sliderMIn"
+            :max="sliderMax"
+            :format-tooltip="playTimeFormat"
+            @change="playTimeChange"
+            :key="videoTndex"
+          >
+          </el-slider>
+          <div class="time1">{{ dateRange[1] }}</div>
+        </div>
+        <div style="text-align: center; width: 100%">
+          <el-button @click.stop="chooseTime">确定</el-button>
+          <el-button @click.stop="onClickGjhf">回放</el-button>
+        </div>
+    </el-popover>
+  </div>
+</template>
+
+<script setup>
+import Axios from "axios";
+import JqTable from './jqTable.vue'
+import { qcckPost,qcckGet} from "@/api/qcckApi.js";
+import { ref, onMounted, onUnmounted, defineProps, getCurrentInstance, watch } from "vue";
+import { timeValidate } from "@/utils/time.js";
+import emitter from "@/utils/eventBus.js";
+import { getTbWzXfwzSelectTrack } from "@/api/dpApi/zzzh.js";
+import { getTbJcglXfqySelectById, getTpJcglKfdSelectByid, queryListfzyc } from "@/api/dpApi/home.js";
+import { getXfgj } from "@/api/yjCenter.js";
+import { ElMessage } from "element-plus";
+import { useRouter } from "vue-router";
+import { all } from "ol/events/condition";
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {}
+  }
+});
+const visible = ref(false);
+const times = ref(null);
+const router = useRouter();
+
+const zbList = ref(); //犯罪坐标
+const fzycFlag = ref(false);
+
+const dialogBoxYpfx = ref();
+const initWidth = ref(0); //父元素宽度
+const initHeight = ref(0); //父元素高度
+const startClientX = ref(0); //元素拖拽前距离浏览器X轴位置
+const startClientY = ref(0); //元素拖拽前距离浏览器Y轴位置
+const elLeft = ref(440); //元素左偏移量
+const elTop = ref(130); //元素右偏移量
+
+const dateRange = ref([]); //时间
+const playTime = ref();
+const sliderMIn = ref(0)
+const sliderMax = ref(0)
+const videoTndex = ref(1)
+watch(
+  () => props.data,
+  (val) => {
+    visible.value = false;
+    let ks  = val.bbkssj
+    let js  = val.bbjssj ? val.bbjssj : timeValidate(new Date())
+    dateRange.value = [ks,js]
+    let start = new Date(ks).getTime()
+    let end = new Date(js).getTime()
+    sliderMIn.value = start
+    sliderMax.value = end
+    playTime.value = [start,end]
+  },{
+    immediate:true,
+    deep:true
+  }
+);
+onMounted(() => {
+  initBodySize();
+});
+
+
+//初始化
+const initBodySize = () => {
+  initWidth.value = dialogBoxYpfx.value.clientWidth;
+  initHeight.value = dialogBoxYpfx.value.clientHeight;
+};
+//拖拽开始
+const dragstart = (e) => {
+  startClientX.value = e.clientX;
+  startClientY.value = e.clientY;
+};
+//拖拽结束
+const dragend = (e) => {
+  let x = e.clientX - startClientX.value;
+  let y = e.clientY - startClientY.value;
+  elLeft.value += x;
+  elTop.value += y;
+};
+
+// 执法记录仪呼叫
+function getZFJLY(item) {
+  if (item.sfrh == "1") SPPUC.rdCard(item.hh, 6, ["60%", "40%"]);
+}
+//关闭弹窗
+function close() {
+  emitter.emit("deletePointArea", "largeIcon");
+  visible.value = false;
+  emitter.emit("showJzInfo", false);
+  emitter.emit("deletePointArea", "xfq");
+  emitter.emit("deletePointArea", "sp");
+  emitter.emit("deletePointArea", "route");
+  emitter.emit("deletePointArea", "kfdArea");
+  emitter.emit("deletePointArea", "kfd");
+}
+
+// 滑块提示
+function playTimeFormat(val) {
+  let time = new Date(val)
+  return timeValidate(time)
+}
+
+  //选中时间
+function playTimeChange(val) {
+  let kssj = timeValidate(val[0])
+  let jssj = timeValidate(val[1])
+  dateRange.value = [kssj,jssj]
+}
+
+//获取轨迹回放数据
+function _getTbWzXfwzSelectTrack() {
+  getTbWzXfwzSelectTrack().then((res) => {});
+}
+// 根据时间来画轨迹
+function chooseTime() {
+  let params = {
+    bbId: props.data.id,
+    kssj: dateRange.value.length > 0 ? dateRange.value[0] : "",
+    jssj: dateRange.value.length > 0 ? dateRange.value[1] : ""
+  };
+
+  emitter.emit("deletePointArea", "route");
+  qcckPost(params, "/mosty-jmxf/tbWzXfwz/selectLswz").then((res) => {
+    let arr = res || [];
+    let points = [];
+    arr.forEach((item) => { points.push([item.jd, item.wd]) });
+    if (points.length > 0) {
+      emitter.emit("drawLineAnimation", {coords:points,isClear:true,flag:'route'});
+    } else {
+      proxy.$message({ type: "warning", message: `没有轨迹数据` });
+    }
+  });
+}
+// 巡防轨迹
+function onClickGjhf() {
+  emitter.emit("deletePointArea", "route");
+  getXfgj({ bbid: props.data.id }).then((res) => {
+    if (res && res.zbList && res.zbList.length > 0) {
+      emitter.emit("drawLineAnimation", {coords:res.zbList,isClear:true,flag:'route'});
+    } else {
+      proxy.$message({ type: "warning", message: `没有轨迹数据` });
+    }
+  });
+}
+// 巡防轨迹-把数据拆分个多个-模拟动态加载
+function handleAnimation(arr, subLen) {
+  let newAarry = [];
+  let index = 0;
+  while (index < arr.length) {
+    newAarry.push(arr.slice(index, (index += subLen)));
+  }
+  return newAarry;
+}
+//获取巡防区数据
+function getXfqData() {
+  emitter.emit("deletePointArea", "xfq");
+  emitter.emit("deletePointArea", "kfd");
+  emitter.emit("deletePointArea", "sp");
+  let ids = props.data.xffwid.split(",");
+  if (ids.length > 0) {
+    ids.forEach((el) => {
+      getTbJcglXfqySelectById({id: el }).then((res) => {
+        if (!res) return ElMessage({ message: "暂无巡防区数据", type: "warning" });
+        if (res.jd && res.wd) emitter.emit("setMapCenter", { location: [res.jd, res.wd], zoomLevel: 14 });
+        if (res.pgis.length <= 0) return;
+        getSp(res.pgis)
+        let obj = { position:[res.pgis], text:res.xfqMc, id: res.id}
+        emitter.emit("echoPlane", { type:'polygon', coords: [obj], flag: "xfq",isclear: false });
+      });
+    });
+  } else {
+    ElMessage({ message: "暂无巡防区数据", type: "warning" });
+  }
+}
+
+ function getSp(pgis) {
+   qcckPost({pgis},'/mosty-jmxf/tbYsSxt/getList').then(res=>{
+    let list = res ? res : [];
+    let icon = require("@/assets/point/sp.png");
+    list = list.filter((item) => { return item.jd && item.wd;});
+    if(list.length > 0) emitter.emit("addPoint", { coords: list, icon: icon, flag: 'sp',fontColor:'#FF0000' });
+   })
+ }
+
+// 获取范围中心的
+function getCenterPoint(dm, text) {
+  qcckPost(dm, "/mosty-base/other/getZxd").then((res) => {
+    let points = [res.x, res.y];
+    emitter.emit("addTEXT", { points, text });
+  });
+}
+//获取快反点数据
+function getKfdData() {
+  emitter.emit("deletePointArea", "xfq");
+  emitter.emit("deletePointArea", "sp");
+  getTpJcglKfdSelectByid({ id: props.data.xffwid }).then((res) => {
+    if (res) {
+      //点位数据
+      if (!res.jd || !res.wd) return;
+      //一分钟范围
+      if (res.yfzfw.length > 0) {
+        let obj = { position:[res.yfzfw], text:'', id: '11'}
+        emitter.emit("echoPlane", { type:'polygon', coords: [obj], flag: "kfdArea", color: "rgba(255,0,0,0.6)", linecolor:'#ff0000'});
+      }
+      //三分钟范围
+      if (res.sfzfw.length > 0) {
+        let obj1 = { position:[res.sfzfw], text:'', id: '211'}
+        emitter.emit("echoPlane", { type:'polygon', coords: [obj1], flag: "kfdArea", color: "rgba(253,174,46,0.5)",linecolor:'#fdae2e'});
+      }
+      //五分钟范围
+      if (res.wfzfw.length > 0) {
+        let obj2 = { position:[res.wfzfw], text:'', id: '131'}
+        emitter.emit("echoPlane", { type:'polygon', coords: [obj2], flag: "kfdArea", color: "rgba(0,102,255,0.4)", linecolor:'#0066ff'});
+      }
+      let icon = require("@/assets/point/kfd.png");
+      emitter.emit("showPoint", { coords: [res], icon: icon, flag: "kfd" });
+      emitter.emit("setMapCenter", { location: [res.jd, res.wd], zoomLevel: 14 });
+    } else {
+      ElMessage({ message: "暂无快反点数据", type: "warning" });
+    }
+  });
+}
+
+//点击视频随动
+function onClickSpsd() {
+  emitter.emit("closeVideo");
+  let { jd, wd } = props.data;
+  emitter.emit("clickSpsd", { jd, wd });
+}
+//点击周边预警
+function onClickZbyj() {
+  emitter.emit("closeVideo");
+  let { jd, wd } = props.data;
+  emitter.emit("clickZbyj", { jd, wd });
+}
+
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+.dialogBox {
+  position: absolute;
+  padding: 0;
+  width: 484px !important;
+  .title {
+    border-bottom: 1px solid #275288;
+    margin-bottom: 6px;
+    .mc {
+      margin-left: 10px;
+    }
+  }
+  .info-Big-Box {
+    max-height: 70vh;
+    overflow: hidden;
+    overflow: auto;
+    padding: 4px 10px;
+    box-sizing: border-box;
+  }
+  .infoBox {
+    position: relative;
+    padding: 10px !important;
+    .text {
+      color: #00bfff;
+      line-height: 26px;
+    }
+    .tag {
+      margin: 0 4px;
+    }
+    .name {
+      color: #fff;
+    }
+    .time {
+      color: #3ad2d4;
+    }
+    .jc_box {
+      margin: 0 4px;
+    }
+    .zblist {
+      display: flex;
+      flex-wrap: wrap;
+      .zb-item {
+        margin-right: 10px;
+        .sbinfo {
+          color: yellow;
+        }
+        img {
+          margin-left: 4px;
+          cursor: pointer;
+        }
+        .qxinfo {
+          color: rgb(127, 177, 217);
+          padding: 2px 4px;
+          border: 1px solid rgb(61, 116, 219);
+          border-radius: 4px;
+          display: inline;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}
+.all-dialog .dialogBox > .btnBox {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.timeBox{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  .time1{
+    margin: 0 10px;
+    text-align: center;
+    color: #fff;
+  }
+}
+
+::v-deep .el-collapse{
+  width: 100%;
+  --el-collapse-header-height:auto;
+  --el-collapse-header-bg-color:transparent;
+  --el-collapse-border-color:transparent;
+}
+::v-deep .el-collapse-item__header{
+  color: #00bfff;
+}
+::v-deep .el-collapse-item__wrap{
+  background-color:transparent;
+}
+::v-deep .el-collapse-item__content {
+  color: #fff;
+  padding-bottom: 0;
+}
+.null{
+  text-align: center;
+}
+
+</style>

src/views/homeMy/layout/workCondition.vue

@@ -0,0 +1,263 @@
+<!--
+ * @Author: your name
+ * @Date: 2023-11-15 11:21:20
+ * @LastEditTime: 2024-07-24 09:39:24
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \my_web_new\src\views\lz\home\components\workCondition.vue
+-->
+<template>
+  <div class="boxContent">
+    <div class="box-title">工作情况</div>
+    <ul class="working-conditions noScollLine">
+      <li class="item-back" v-for="(item, index) in info" :key="`info${index}`">
+        <div class="left">
+          <img :src="item.img" :alt="item.name" height="45" />
+          <div class="name">{{ item.name }}</div>
+        </div>
+        <ul class="right">
+          <li @click="show_Dialog(el.type, el.typeStr)" v-for="(el, i) in item.data" :key="`info${i}`" class="flex row flex just-between align-center">
+            <div class="title">{{ el.title }}</div>
+            <div class="num f16">{{ el.num }}</div>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import emitter from "@/utils/eventBus.js";
+import { getSelectDeck, getSelectCarCount, getSelectCrewCount } from "@/api/dpApi/home.js";
+import { ref, onMounted, onUnmounted } from "vue";
+const timer = ref(null)
+const info = ref([
+  {
+    img: require("@/assets/images/streetBi/jmxz.png"),
+    name: "街面巡组",
+    data: [
+      { title: "计划", num: 0, type: "jmxz", typeStr: "jh" },
+      { title: "已完成", num: 0, type: "jmxz", typeStr: "sj" }
+    ]
+  },
+  {
+    img: require("@/assets/images/streetBi/jmll.png"),
+    name: "街面力量",
+    data: [
+      { title: "民警", num: 0, type: "jmll", typeStr: "mj" },
+      { title: "辅警", num: 0, type: "jmll", typeStr: "fj" },
+      { title: "保安", num: 0, type: "jmba", typeStr: "ba" },
+    ]
+  },
+  {
+    img: require("@/assets/images/streetBi/pcgz.png"),
+    name: "盘查工作",
+    data: [
+      { title: "盘人", num: 0, type: "pcgz", typeStr: "pr" },
+      { title: "盘车", num: 0, type: "pcgz", typeStr: "pc" }
+    ]
+  },
+]);
+onMounted(() => {
+  init()
+  timer.value = setInterval(() => {
+    init()
+  }, 10e3);
+});
+onUnmounted(() => {
+  clearInterval(timer.value);
+});
+
+function init() {
+  _getSelectDeck();
+  _getSelectCarCount();
+  _getSelectCrewCount();
+}
+
+// 街面巡组 | 巡逻时长里程 |街面力量
+function _getSelectDeck() {
+  getSelectDeck().then((res) => {
+    info.value[0].data[0].num = res.jhsl ? res.jhsl : 0;
+    info.value[0].data[1].num = res.sjsl;
+    info.value[1].data[0].num = res.jmmjsl ? res.jmmjsl : 0;
+    info.value[1].data[1].num = res.jmfjsl;
+    info.value[1].data[2].num = res.basl || 0;
+  });
+}
+
+//查询车辆
+function _getSelectCarCount() {
+  getSelectCarCount().then((res) => {
+    info.value[2].data[1].num = res ? res : 0;
+  });
+}
+//查询人员
+function _getSelectCrewCount() {
+  getSelectCrewCount().then((res) => {
+    info.value[2].data[0].num = res ? res : 0;
+  });
+}
+
+// 展示弹窗
+function show_Dialog(val, type) {
+  switch (val) {
+    case 'zgjl':
+      emitter.emit("showJLWindow", type); //展示在岗警力的弹框
+      break;
+    case 'jmxz':
+      emitter.emit("showJMXZWindow", type); //展示在巡组的弹框
+      break;
+    case 'jmll':
+      emitter.emit("showJMLLWindow", type); //展示街面力量的弹框
+      break;
+    case 'jmba':
+      emitter.emit("showBaWindow", type); //展示街面力量-保安的弹框
+      break;
+    case 'xlsc':
+      emitter.emit("showXLSCWindow", type); //巡逻时长的弹框
+      break;
+    case 'pcgz':
+      emitter.emit("showPCGZWindow", type); //展示盘查工作的弹框
+      break;
+    case 'zlzx':
+      emitter.emit("showZlzxWindow", type); //点击打开指令弹窗
+      break;
+    case 'clqk':
+      emitter.emit("showClqkWindow", type); //点击车辆情况弹窗
+      break;
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+
+.cntinfo {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .item {
+    display: flex;
+    align-items: center;
+    padding: 0 6px;
+    box-sizing: border-box;
+    flex: 1;
+    line-height: 34px;
+    background-image: linear-gradient(to right, rgba(0, 149, 255, 0.0), rgba(0, 149, 255, .2), rgba(0, 149, 255, .0));
+    margin-bottom: 4px;
+    >span {
+      flex: 1;
+    }
+
+    .bt {
+      color: #0095ff;
+      display: inline-block;
+      width: 80px;
+      font-size: 16px;
+      font-weight: 700;
+    }
+
+    .xbt {
+      display: inline-block;
+      cursor: pointer;
+    }
+
+    .num-one {
+      color: #00BFFF;
+      font-size: 14px;
+      cursor: pointer;
+
+    }
+
+    .num-two {
+      color: #00BFFF;
+      font-size: 14px;
+      cursor: pointer;
+    }
+
+    .label {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: #fff;
+    }
+  }
+
+  .item:nth-child(2n) {
+    .bt {
+      color: #ffe854;
+    }
+
+    background-image: linear-gradient(to right, rgba(255, 232, 84, 0.6), rgba(255, 232, 84, .2), rgba(255, 232, 84, .0));
+  }
+}
+
+.working-conditions {
+  padding: 10px;
+  height: calc(100% - 36px);
+  overflow: hidden;
+  // overflow-y: auto;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  .item-back {
+    flex: 1;
+    width: 100%;
+    height: 32%;
+    background: url("~@/assets/images/streetBi/item-k.png") no-repeat center center;
+    background-size: 100% 100%;
+    display: flex;
+    padding-bottom: 10px;
+    padding-right: 20px;
+    box-sizing: border-box;
+    &:nth-child(2) {
+      height: 40%;
+    }
+
+  }
+
+  .left {
+    width: 132px;
+    text-align: center;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .name {
+      font-weight: bold;
+      font-size: 14px;
+      color: #ffffff;
+      text-shadow: 0 0 10px #fff;
+    }
+  }
+
+  .right {
+    display: flex;
+    flex-direction: column;
+    width: calc(100% - 132px);
+    position: relative;
+    .row {
+      flex: 1 0 0;
+      background: url("~@/assets/images/streetBi/line_kj.png") no-repeat bottom center;
+      background-size: 100% auto;
+      padding: 0 20px;
+      box-sizing: border-box;
+      .title{
+        width: 45px;
+        text-align-last: justify;
+      }
+      .num {
+        font-weight: 600;
+        color: #00d7fe;
+      }
+      &:nth-last-child(1) {
+        background: none;
+      }
+
+    }
+  }
+}
+</style>

src/views/homeMy/modelDialog/addPoints.vue

@@ -0,0 +1,264 @@
+<template>
+  <div>
+    <el-dialog custom-class="point-dialog-bbd" :destroy-on-close="true" v-model="dialogForm" :title="`巡逻点位${title}`"
+      width="800px" @close="close" top="10vh">
+      <el-form ref="FormRef" :model="listQuery" :rules="rules" :inline="true" label-width="120px">
+        <el-form-item prop="bxdLx" label="巡逻点位类型" style="width:100%">
+          <el-select ref="selectRef" v-model="pegPoint" style="width:100%" filterable remote reserve-keyword
+            placeholder="请选择巡逻点位" :popper-append-to-body="false" remote-show-suffix :remote-method="changePoint"
+            clearable @change="changeSelect">
+            <el-option v-for="item in dateList" :key="item.dzid" :label="item.dzmc" :value="item.dzid" />
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="bxdMc" label="巡逻点位名称" style="width:100%">
+          <el-input v-model="listQuery.bxdMc" placeholder="请输入巡逻点位名称" clearable style="width: 100%" />
+        </el-form-item>
+        <el-form-item prop="bxdLx" label="巡逻点位类型" style="width:100%">
+          <el-select v-model="listQuery.bxdLx" placeholder="请选择巡逻点位类型" style="width: 100%">
+            <el-option v-for="(item, index) in props.dic.D_BZ_BXDLX" :key="index" :label="item.label"
+              :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="jd" label="坐标位置" label-width="120px" style="width:100%">
+          <div class="latlng">
+            <el-input v-model="listQuery.jd" clearable style="width: 45%" />
+            <el-input v-model="listQuery.wd" clearable style="width: 45%" />
+            <el-button @click="chackLat">选取坐标</el-button>
+          </div>
+        </el-form-item>
+        <el-form-item style="width:100%">
+          <div class="map">
+            <GdMap mapid="mapSmallbxd" v-if="dialogFormVisible" />
+          </div>
+        </el-form-item>
+      </el-form>
+      <div class="tc mt10">
+        <el-button type="primary" @click="save">保存</el-button>
+        <el-button @click="close">关闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import FormMessage from "@/components/aboutTable/FormMessage.vue";
+import { ref, defineProps, reactive, defineEmits, onMounted, nextTick,onUnmounted } from 'vue';
+import { doBzdzSelect } from '@/api/solrSearcher'
+import GdMap from "@/components/GdMap/index.vue";
+import emitter from "@/utils/eventBus.js";
+const emit = defineEmits(["refresh"]);
+const props = defineProps({
+  dic: {
+    type: Object,
+    default: () => ({})
+  }
+});
+const dialogForm = ref(false);
+const dialogFormVisible = ref(false);
+const title = ref('');
+const FormRef = ref();
+const listQuery = ref({});
+const rules = reactive({
+  bxdMc: [{ required: true, message: "请输入巡逻点位名称", trigger: "blur" }],
+  bxdLx: [{ required: true, message: "请输入巡逻点位类型", trigger: "blur" }],
+});
+onMounted(() => {
+  emitter.on("coordString", (res => {
+    console.log(res,'res');
+    
+    if (res.type == 'point'&& res.flag=="lxdw") {
+      listQuery.value.jd = res.coord[0];
+      listQuery.value.wd = res.coord[1];
+      let icon = require('@/assets/point/zsdw.png');
+      emitter.emit("showPoint", { coords: [{ jd: res.coord[0], wd: res.coord[1] }], icon, flag: 'lxdw' });
+    }
+  }))
+})
+// 初始化数据
+const init = (type, row) => {
+  dialogForm.value = true;
+  setTimeout(() => {
+    dialogFormVisible.value = true;
+  }, 200);
+  title.value = type == "add" ? "新增" : "编辑";
+  listQuery.value = row ? { ...row } : {};
+  initScrollListener()
+  getData()
+};
+// 选择巡逻路线
+const chackLat = () => {
+  emitter.emit("removePlot", "lxdw");
+  listQuery.value.jd = "";
+  listQuery.value.wd = "";
+  emitter.emit("drawShape", { type: 'point', flag: 'lxdw', isclear: true })
+}
+const save = () => {
+  FormRef.value.validate(() => {
+    let data = JSON.parse(JSON.stringify(listQuery.value));
+    data.id = data.id || new Date().getTime();
+    let obj = {
+      data: data,
+      type: title.value == "新增" ? "add" : "edit"
+    }
+    emit("changeDxd", obj);
+    close();
+  });
+}
+
+const close = () => {
+  dialogForm.value = false;
+  dialogFormVisible.value = false;
+  pegPoint.value = ''
+  removeScrollListener()
+};
+const pegPoint = ref()
+const queryFrom = reactive({
+  page: 1,
+  rows: 20
+})
+const dateList = ref()
+const total = ref(0)
+const screenData = ref()
+const loadingLock = ref(false)
+const changePoint = (val) => {
+  screenData.value = val
+  dateList.value = []
+  queryFrom.page = 1
+  if (loadingLock.value) return
+  loadingLock.value = true
+  getData()
+  // 添加短暂延迟后再释放锁
+  setTimeout(() => {
+    loadingLock.value = false
+  }, 300)
+}
+const getData = () => {
+  const promes = {
+    ...queryFrom,
+    dzmc: screenData.value
+  }
+  doBzdzSelect(promes).then((res) => {
+    dateList.value = queryFrom.page == 1 ? res.rows : [...dateList.value, ...res.rows]
+    total.value = res.total
+  }).catch((err) => {
+  }).finally(() => {
+    // dialogForm.value = false;
+  });
+}
+defineExpose({ init })
+const dropdownElement = ref()
+const scrollHandler = ref(null)
+const selectRef = ref()
+const getDropdownElement = () => {
+  if (selectRef.value) {
+    return selectRef.value.$el.querySelector('.el-select-dropdown .el-scrollbar__wrap')
+  }
+  return null
+}
+const changeSelect = (e) => {
+  const data = dateList.value.find(item => item.dzid == e)
+  listQuery.value.bxdMc = data.dzmc
+  // listQuery.value.jd = data.dzmc
+  // listQuery.value.wd=data.dzmc
+}
+// 初始化滚动监听
+const initScrollListener = () => {
+  nextTick(() => {
+    dropdownElement.value = getDropdownElement()
+    if (dropdownElement.value) {
+      addScrollListener()
+    }
+  })
+}
+
+// 添加滚动监听
+function addScrollListener() {
+  if (dropdownElement.value && !scrollHandler.value) {
+    scrollHandler.value = handleScroll
+    dropdownElement.value.addEventListener('scroll', scrollHandler.value)
+  }
+}
+
+// 移除滚动监听
+const removeScrollListener = () => {
+  if (dropdownElement.value && scrollHandler.value) {
+    dropdownElement.value.removeEventListener('scroll', scrollHandler.value)
+    scrollHandler.value = null
+  }
+}
+
+// 滚动处理
+const handleScroll = (event) => {
+  const target = event.target
+  const { scrollTop, scrollHeight, clientHeight } = target
+  // 距离底部阈值时触发加载
+  if (scrollHeight - scrollTop - clientHeight <= 10) {
+    console.log(scrollHeight - scrollTop - clientHeight);
+    loadMore()
+  }
+}
+
+const loadMore = () => {
+  if (loadingLock.value) return
+  loadingLock.value = true
+  queryFrom.page++
+  if (dateList.value.length < total.value) {
+    getData()
+  }
+  // 添加短暂延迟后再释放锁
+  setTimeout(() => {
+    loadingLock.value = false
+  }, 300)
+}
+onUnmounted(() => {
+  emitter.off("coordString");
+});
+
+</script>
+
+<style lang="scss" scoped>
+.map {
+  width: 100%;
+  height: 400px;
+  overflow: hidden;
+}
+
+::v-deep .el-form--inline .el-form-item {
+  margin-right: 0;
+}
+
+::v-deep .el-dialog {
+  --el-dialog-bg-color: #fff;
+}
+
+::v-deep .el-dialog__title {
+  color: #333;
+  font-size: 16px;
+}
+</style>
+<style lang="scss">
+::v-deep .point-dialog-bbd {
+  --el-dialog-bg-color: #fff !important;
+  background: #fff !important;
+
+  ::v-deep .el-dialog__header {
+    background-color: #f7fafb;
+    border-bottom: 1px solid #e3e7ed;
+  }
+
+  .el-dialog__title {
+    color: #333;
+    font-size: 16px;
+  }
+}
+
+::v-deep .el-select__popper.el-popper {
+  background-color: #fff !important;
+}
+
+.latlng {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+</style>

src/views/homeMy/modelDialog/bbtsInfo.vue

@@ -0,0 +1,189 @@
+<template>
+  <el-dialog top="0px" width="100%" v-model="props.visibleDialog" destroy-on-close :show-close="false"
+    :close-on-click-modal="false" custom-class="zdy-dialog">
+    <template #title>
+      <div class="my-header">
+        <div class="left">
+          <span>报备提示</span>
+          <Search :searchArr="searchArr" @submit="onSearch"></Search>
+        </div>
+        <el-icon color="#23c3f3" @click="closeDialog">
+          <Close />
+        </el-icon>
+      </div>
+    </template>
+    <div class="contant-dialog">
+      <DarkTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :key="pageData.keyCount"
+        :tableHeight="pageData.tableHeight" :tableConfiger="pageData.tableConfiger" />
+      <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
+        ...pageData.pageConfiger,
+        total: pageData.total
+      }" />
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
+import Search from "@/components/aboutTable/Search.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import DarkTable from "@/components/aboutTable/DarkTable.vue";
+import { ref, defineProps, defineEmits, reactive, onMounted } from 'vue'
+const emits = defineEmits(["update:modelValue", 'closeDialog']);
+const props = defineProps({
+  visibleDialog: Boolean
+})
+const searchArr = reactive([
+  {
+    showType: "input",
+    prop: "fzrXm",
+    label: '负责人姓名'
+  },
+  {
+    showType: "department",
+    prop: "ssbmdm",
+    label: '所属部门'
+  },
+]);
+const listQuery = ref({}) //搜索
+
+const pageData = reactive({
+  tableData: [], //表格数据
+  tableConfiger: {
+    loading: false,
+    rowHieght: 61,
+    showSelectType: 'null',
+    haveControls: false,
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 30,
+    pageNum: 1
+  }, //分页
+  tableHeight: 840,
+  tableColumn: [
+    { label: "负责人姓名", prop: "fzrXm" },
+    { label: "警组名称", prop: "jzMc" },
+    { label: "通知时间", prop: "tzsj" },
+    { label: "通知内容", prop: "text" },
+    { label: "所属部门", prop: "ssbm" },
+  ]
+});
+onMounted(() => {
+  getDataList()
+})
+
+// 搜索
+function onSearch(val) {
+  listQuery.value = { ...val }
+  getDataList()
+}
+
+// 获取数据
+const getDataList = () => {
+  let pramas = {
+    pageSize: pageData.pageConfiger.pageSize,
+    pageCurrent: pageData.pageConfiger.pageNum,
+    ...listQuery.value
+  }
+  pageData.tableConfiger.loading = true
+  qcckPost(pramas, '/mosty-jmxf/tbQwXfbb/getPageBbtx').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;
+  getDataList()
+}
+const changeSize = (val) => {
+  pageData.pageConfiger.pageSize = val;
+  getDataList()
+}
+
+
+// 關閉
+function closeDialog(params) {
+  emits('update:modelValue', false)
+  emits('closeDialog', false)
+}
+</script>
+
+<style lang="scss" scoped>
+.my-header {
+  background: url('~@/assets/images/add-title.png') no-repeat center center;
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: space-between;
+  height: 80px;
+  align-items: center;
+  padding: 0 10px 0 20px;
+  box-sizing: border-box;
+  font-size: 30px;
+
+  .left {
+    display: flex;
+    align-items: center;
+
+    span {
+      font-family: "HANYILINGXINTIJIAN";
+    }
+  }
+}
+
+.contant-dialog {
+  height: calc(100vh - 80px);
+  overflow: hidden;
+  padding: 10px 20px;
+  box-sizing: border-box;
+
+}
+
+::v-deep .el-input__inner {
+  background-color: transparent;
+  border: 1px solid #68d0ff;
+  color: #fff;
+}
+
+::v-deep .el-date-editor .el-range-input {
+  background-color: transparent;
+  color: #fff;
+}
+
+::v-deep .el-date-editor .el-range-separator {
+  color: #e9e9e9;
+}
+</style>
+
+<style>
+.zdy-dialog .el-dialog__body {
+  padding: 0 !important;
+  ;
+}
+
+.zdy-dialog .el-dialog__header {
+  padding: 0 !important;
+}
+
+.zdy-dialog {
+  margin: 0 !important;
+}
+
+.searchBox {
+  border: none;
+  background: transparent;
+  position: unset;
+  font-size: 16px;
+  padding-top: 10px;
+  margin: 17px 0 0 0 !important;
+}
+
+.searchBox::after {
+  content: none;
+}
+
+.searchBox::before {
+  content: none;
+}
+</style>

src/views/homeMy/modelDialog/components/barCharts.vue

@@ -0,0 +1,135 @@
+<template>
+  <div :id="'barEchars_'+props.id" style="width: 100%; height: 100%"></div>
+</template>
+
+<script setup>
+import * as echarts from "echarts";
+import { ref, onMounted, watch, defineProps, nextTick, watchEffect } from "vue";
+const props = defineProps({
+  id:String,
+  data:{
+    type:Object,
+    default:{
+      List:[],//数据
+      title:[],//标题
+    }
+  },
+  barWidth:{
+    type:String,
+    default:'15px'
+  },
+});
+
+watch(()=>props.data,(val)=>{
+  nextTick(()=>{
+    if(val) lineChartFn(val); //处理数据
+  })
+},{immediate: true,deep: true})
+
+const lineChartFn = (val) => {
+  var myChart = echarts.init(document.getElementById("barEchars_"+props.id));
+  var option = {
+    legend: {
+      type: "plain",
+      show: true,
+      left: 0,
+      textStyle: {
+        color: "#fff"
+      },
+      data: val.title
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
+      }
+    },
+    grid: {
+      top: "14%",
+      right: "3%",
+      left: "5%",
+      bottom: "12%"
+    },
+    xAxis: [
+      {
+        type: "category",
+        axisLabel:{ interval:0 ,rotate:20},
+        axisLine: { lineStyle: { color: "#fff" } },
+        data:val.list.map(iv=>{return iv.mc || iv.key || iv.ssbm})
+      }
+    ],
+    yAxis: [
+      {
+        axisLabel: { formatter: "{value}" ,color: "#fff"},
+        axisLine: {
+          show: false,
+          lineStyle: { color: "rgba(255,255,255,1)"  }
+        },
+        splitLine: {
+          lineStyle: { color: "rgba(255,255,255,0.25)" }
+        }
+      }
+    ],
+    series: [
+      {
+        name: val.title[0],
+        type: "bar",
+        data:val.list.map(iv=>{return iv.zs}),
+        barWidth: props.barWidth,
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0,0,1,[{offset: 0,color: "rgba(0,244,255,1)"},{offset: 1,color: "rgba(0,77,167,1)" }],false),
+            barBorderRadius: [15, 15, 0, 0],
+            shadowColor: "rgba(0,160,221,0.5)",
+            shadowBlur: 4
+          }
+        },
+        label: { normal: { show: true } }
+      },
+      {
+        name: val.title[1],
+        type: "bar",
+        data:val.list.map(iv=>{return iv.tb}),
+        barWidth: props.barWidth,
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0,0,0,1,[{ offset: 0,color: "rgba(24, 232, 229, 1)" },{ offset: 1, color: "rgba(3, 110, 83, 1)" }],false),
+            barBorderRadius: [15, 15, 0, 0],
+            shadowColor: "rgba(0,160,221,0.5)",
+            shadowBlur: 4
+          }
+        },
+        label: { normal: { show: true } }
+      },
+      {
+        name: val.title[2],
+        type: "bar",
+        data:val.list.map(iv=>{return iv.hb}),
+        barWidth: props.barWidth,
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0,0,0,1,[{ offset: 0, color: "rgba(230, 10, 241, 1)"},{ offset: 1, color: "rgba(124, 2, 107, 1)"}],false),
+            barBorderRadius: [15, 15, 0, 0],
+            shadowColor: "rgba(0,160,221,0.5)",
+            shadowBlur: 4
+          }
+        },
+        label: {
+          normal: { show: true  },
+          position: "top"
+        }
+      }
+    ]
+  };
+
+  option && myChart.setOption(option);
+  window.onresize = function () {
+    myChart.resize();
+  };
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/homeMy/modelDialog/components/barChartsOne.vue

@@ -0,0 +1,100 @@
+<template>
+  <div :id="'barEchars_'+props.id" style="width: 100%; height: 100%"></div>
+</template>
+
+<script setup>
+import * as echarts from "echarts";
+import { ref, onMounted, watch, defineProps, nextTick, watchEffect } from "vue";
+const props = defineProps({
+  id:String,
+  data:{
+    type:Object,
+    default:{
+      count:[],//数据
+      title:[],//标题
+    }
+  },
+  barWidth:{
+    type:String,
+    default:'15px'
+  },
+});
+
+watch(()=>props.data,(val)=>{
+  nextTick(()=>{
+    if(val) lineChartFn(val); //处理数据
+  })
+},{immediate: true,deep: true})
+
+const lineChartFn = (val) => {
+  var myChart = echarts.init(document.getElementById("barEchars_"+props.id));
+  var option = {
+   legend: {
+      type: "plain",
+      show: true,
+      left: 0,
+      textStyle: {
+        color: "#fff"
+      },
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
+      }
+    },
+    grid: {
+      top: "14%",
+      right: "3%",
+      left: "5%",
+      bottom: "12%"
+    },
+    yAxis: [
+      {
+        type: "category",
+        axisLabel:{ interval:0 ,rotate:20},
+        axisLine: { lineStyle: { color: "#fff" } },
+        data:val.map(iv=>{return iv.dwflmc})
+      }
+    ],
+    xAxis: [
+      {
+        axisLabel: { formatter: "{value}" ,color: "#fff"},
+        axisLine: {
+          show: false,
+          lineStyle: { color: "rgba(255,255,255,1)"  }
+        },
+        splitLine: {
+          lineStyle: { color: "rgba(255,255,255,0.25)" }
+        }
+      }
+    ],
+    series: [
+      {
+        type: "bar",
+        data:val.map(iv=>{return iv.count}),
+        barWidth: props.barWidth,
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0,1,0,[{offset: 0,color: "rgba(0,244,255,1)"},{offset: 1,color: "rgba(0,77,167,1)" }],false),
+            barBorderRadius: [0, 15, 15, 0],
+            shadowColor: "rgba(0,160,221,0.5)",
+            shadowBlur: 4
+          }
+        },
+        label: { normal: { show: true } }
+      },
+    ]
+  };
+
+  option && myChart.setOption(option);
+  window.onresize = function () {
+    myChart.resize();
+  };
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/homeMy/modelDialog/components/detailDialog.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-dialog :append-to-body="true" @close="closed" v-model="props.modelValue" title="数据详情" width="1200px" :show-close="true" >
+        <DarkTable
+            :tableData="pageData.tableData"
+            :tableColumn="pageData.tableColumn"
+            :tableHeight="pageData.tableHeight"
+            :key="pageData.keyCount"
+            :tableConfiger="pageData.tableConfiger">
+        <template #xh="{row}">
+            <span class="order" :class="row.xh == 1?'red':row.xh == 2 ?'orange':row.xh == 3 ?'blue':'green'">{{row.xh}}</span>
+        </template>
+        <template #tb="{row}">
+            <span :style="{color:row.zs > 0 ? '#ff0000':'#57d040'}">{{row.tb}} ({{row.tbbl || 0}}) % </span>
+        </template>
+        <template #hb="{row}">
+            <span :style="{color:row.zs > 0 ? '#ff0000':'#57d040'}"> {{row.hb}} ({{row.hbbl || 0}}) % </span>
+        </template>
+        </DarkTable>
+        <Pages
+            @changeNo="changeNo"
+            @changeSize="changeSize"
+            :tableHeight="pageData.tableHeight"
+            :pageConfiger="{
+            ...pageData.pageConfiger,
+            total: pageData.total
+            }"
+        ></Pages>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import DarkTable from "@/components/aboutTable/DarkTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import {ref,defineProps,reactive,defineEmits, watchEffect, watch} from 'vue';
+const props = defineProps({
+    modelValue:Boolean,
+    searchDate:Object
+})
+const emits = defineEmits(["update:modelValue"]);
+const pageData = reactive({
+  tableData: [], //表格数据
+  tableConfiger: {
+    loading: false,
+    rowHieght: 61,
+    showSelectType:'null',
+    showIndex:false,
+    haveControls:false,
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageNum: 1
+  }, //分页
+  tableHeight:600,
+  tableColumn: [
+    { label: "警情编号",  prop: "ajbh" ,showOverflowTooltip:true},
+    { label: "接警单编号", prop: "gljjdbh",showOverflowTooltip:true},
+    { label: "警情类别",  prop: "bjlbmc",showOverflowTooltip:true},
+    { label: "简要案情",  prop: "bjnr",showOverflowTooltip:true},
+    { label: "事发地址",  prop: "sfdz",showOverflowTooltip:true},
+    { label: "处警单位",  prop: "ssbm",showOverflowTooltip:true},
+    { label: "报警时间",  prop: "bjsj",showOverflowTooltip:true},
+  ]
+});
+
+watch(()=>props.searchDate,val=>{
+    if(val && val.lx == 'ddsj') {
+      pageData.tableColumn.push({label: "到达现场时间",  prop: "ddxcsj",showOverflowTooltip:true})
+    }
+},{ immediate:true,deep:true })
+// 获取数据
+function getDate(){
+    pageData.tableConfiger.loading = true;
+    let data = {
+        ...props.searchDate,
+        ...pageData.pageConfiger
+    }
+    delete data.lx;
+    qcckPost(data,'/mosty-jmxf/tbJq/ListPage').then(res=>{
+        pageData.tableConfiger.loading = false
+        pageData.tableData = res ? res.records : [];
+        pageData.total = res ? res.total : 0
+    }).catch(()=>{
+        pageData.tableConfiger.loading = false
+    })
+}
+// 分页
+const changeNo = (val) =>{
+    pageData.pageConfiger.pageNum = val;
+    getDate()
+}
+// 页数
+const changeSize = (val) =>{
+    pageData.pageConfiger.pageSize = val;
+    getDate()
+}
+// 关闭详情
+const closed = () =>{
+    emits('update:modelValue',false)
+}
+watchEffect(()=>{
+    if(props.modelValue) getDate();
+})
+</script>
+
+<style>
+
+</style>

src/views/homeMy/modelDialog/components/jqzs.vue

@@ -0,0 +1,125 @@
+<template>
+  <ul class="yjtjBox">
+    <li class="borderblueSky">
+      <div class="title">警情总数</div>
+      <div class="other" @click="lookDetail('zs')">
+        <Statis :count="props.data.zs" bg="redTags" />
+        <div class="persont"></div>
+      </div>
+    </li>
+    <li class="borderGreen">
+      <div class="title">同比</div>
+      <div class="other"  @click="lookDetail('tb')">
+        <Statis :count="props.data.tb" bg="bgGreen" />
+        <div class="persont">({{props.data.tbbl}}%)</div>
+      </div>
+    </li>
+    <li class="borderBlue">
+      <div class="title">环比</div>
+      <div class="other"  @click="lookDetail('hb')">
+       <Statis :count="props.data.hb" bg="bgBlue" />
+       <div class="persont">({{props.data.hbbl}}%)</div>
+      </div>
+    </li>
+  </ul>
+
+</template>
+
+<script setup>
+
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import Statis from './statis.vue'
+import { getTime } from "@/utils/time.js";
+import { ref, reactive, watch, onMounted,defineProps,defineEmits } from "vue";
+const props = defineProps({
+  data:Object
+})
+const emits = defineEmits(["lookDetail"]);
+
+function lookDetail (val){
+  emits('lookDetail',{lx:'jqqb',type:val})
+}
+
+
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/largeScreen.scss";
+ul.yjtjBox {
+  height: 100%;
+  padding: 0 4px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  > li {
+    flex:1 0 0;
+    height: 100%;
+    border: 1px solid #0a79d6;
+    box-shadow: inset 0 0 10px #0a79d6;
+    box-sizing: border-box;
+    overflow:hidden;
+    .title {
+      text-align: center;
+      border-right: 1px solid #0a79d6;
+      box-shadow: inset 0 0 10px #0a79d6;
+      box-sizing: border-box;
+      font-size: 24px;
+      height: 100px;
+      line-height: 100px;
+    }
+    .other {
+      height: calc(100% - 100px);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      .persont{
+        height:22px;
+      }
+    }
+    .numb {
+      font-size: 24px;
+      color: #0a79d6;
+    }
+    .bijiao{
+      font-size: 24px;
+    }
+    .arrow {
+      margin: 0 4px 0 0;
+      transform: rotate(180deg);
+    }
+    &.borderblueSky {
+      border: 1px solid #1eb8cf;
+      box-shadow: inset 0 0 10px #1eb8cf;
+      color: #1eb8cf;
+      .title {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        border-right: 1px solid #1eb8cf;
+        box-shadow: inset 0 0 10px #1eb8cf;
+      }
+    }
+    &.borderGreen {
+      border: 1px solid #2ec938;
+      box-shadow: inset 0 0 10px #2ec938;
+      color: #2ec938;
+      .title {
+        box-shadow: inset 0 0 10px #2ec938;
+      }
+    }
+    &.borderBlue {
+      border: 1px solid #0d81e0;
+      box-shadow: inset 0 0 10px #0d81e0;
+      color: #0d81e0;
+      .title {
+        border-right: 1px solid #0d81e0;
+        box-shadow: inset 0 0 10px #0d81e0;
+      }
+    }
+  }
+   > li:nth-child(2){
+     margin: 0 4px;
+   }
+}
+</style>

src/views/homeMy/modelDialog/components/lineChart.vue

@@ -0,0 +1,71 @@
+<template>
+    <div id="lineCharts"  class="chartsBox" style="wdith:100%;height:100%;"></div>
+</template>
+
+<script setup>
+import { getTime } from "@/utils/time.js";
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import * as echarts from "echarts";
+import { ref,reactive,defineProps, watchEffect} from "vue";
+const props = defineProps({
+  data:Object
+})
+const timeList = ["0","2","4","6","8","10","12","14","16","18","20","22",'23'];
+const num = ref([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0])
+
+function getList() {
+  qcckPost(props.data,'/mosty-jmxf/tbYjxx/gsdyjNew').then((res) => {
+    timeList.value = res.map(item=>{ return item.sd});
+    num.value = res.map(item=>{ return item.sl});
+    lineChartFn();
+  });
+}
+function lineChartFn() {
+  var chartDom = document.getElementById("lineCharts");
+  var myChart = echarts.init(chartDom, "dark");
+  var option = {
+    tooltip: { trigger: "axis" },
+    legend: { data: ["时段预警"] },
+    grid: {
+      left: "3%",
+      right: "5%",
+      bottom: "3%",
+      top: "18%",
+      containLabel: true
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: timeList.value
+    },
+    yAxis: { type: "value" },
+    series: [
+      {
+        name: "时段预警",
+        type: "line",
+        data: num.value,
+        smooth: true,
+        itemStyle: {normal: { color: "#177FFF" }}
+      }
+    ]
+  };
+  option && myChart.setOption(option);
+  window.onresize = function () {
+    myChart.resize();
+  };
+}
+
+watchEffect(()=>{
+  getList()
+})
+
+
+</script>
+
+<style lang="scss" scoped>
+.chartsBox {
+  padding: 10px 0;
+  box-sizing: border-box;
+}
+
+</style>

src/views/homeMy/modelDialog/components/lineChartMore.vue

@@ -0,0 +1,107 @@
+<template>
+    <div :id="'lineCharts_'+props.id"  class="chartsBox" style="wdith:100%;height:100%;"></div>
+</template>
+
+<script setup>
+import { getTime } from "@/utils/time.js";
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import * as echarts from "echarts";
+import { ref,reactive,defineProps,watch, nextTick} from "vue";
+const props = defineProps({
+  data:Object,
+  id:String
+})
+const timeList = ["0","2","4","6","8","10","12","14","16","18","20","22",'23'];
+const num = ref([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0])
+
+watch(()=>props.data,val=>{
+  nextTick(()=>{
+    let numZs = JSON.parse(JSON.stringify(num.value));
+    let numTb = JSON.parse(JSON.stringify(num.value));
+    let numHb = JSON.parse(JSON.stringify(num.value));
+    if(val.data.zs && val.data.zs.length > 0) numZs = val.data.zs.map(v=>{return v.sl})
+    if(val.data.tb && val.data.tb.length > 0) numTb = val.data.tb.map(v=>{return v.sl})
+    if(val.data.hb && val.data.hb.length > 0) numHb = val.data.hb.map(v=>{return v.sl})
+    lineChartFn(numZs,numTb,numHb)
+  })
+},{immediate:true,deep:true})
+
+function lineChartFn(zs,tb,hb) {
+  var chartDom = document.getElementById("lineCharts_"+props.id);
+  var myChart = echarts.init(chartDom);
+  var option = {
+    tooltip: { trigger: "axis" },
+
+    legend: {
+      textStyle: {
+        color: "#fff"
+      },
+      data: props.data.title
+    },
+    grid: {
+      left: "3%",
+      right: "5%",
+      bottom: "3%",
+      top: "18%",
+      containLabel: true
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+       axisLine: { lineStyle: { color: "#fff" } },
+      data: timeList.value
+    },
+    yAxis: {
+      axisLabel: { formatter: "{value}" ,color: "#fff"},
+      axisLine: {
+        show: false,
+        lineStyle: { color: "rgba(255,255,255,1)"  }
+      },
+      splitLine: {
+        lineStyle: { color: "rgba(255,255,255,0.25)" }
+      }
+     },
+    series: [
+      {
+        name: "总数",
+        type: "line",
+        data: zs,
+        showSymbol:false,
+        type:'line',
+        itemStyle: {normal: { color: "rgba(0,77,167,1)" }}
+      },
+      {
+        name: "同比",
+        type: "line",
+        showSymbol:false,
+        data: tb,
+        type:'line',
+        itemStyle: {normal: { color: "rgba(3, 110, 83, 1)" }}
+      },
+      {
+        name: "环比",
+        type: "line",
+        showSymbol:false,
+        data: hb,
+        type:'line',
+        itemStyle: {normal: { color: "rgba(124, 2, 107, 1)" }}
+      },
+    ]
+  };
+  option && myChart.setOption(option);
+  window.onresize = function () {
+    myChart.resize();
+  };
+}
+
+
+
+</script>
+
+<style lang="scss" scoped>
+.chartsBox {
+  padding: 10px 0;
+  box-sizing: border-box;
+}
+
+</style>

src/views/homeMy/modelDialog/components/list.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="listBoxJQ">
+    <DarkTable
+        :tableData="pageData.tableData"
+        :tableColumn="pageData.tableColumn"
+        :key="pageData.keyCount"
+        :tableHeight="pageData.tableHeight"
+        :tableConfiger="pageData.tableConfiger"
+        >
+        <!-- 表头 -->
+        <template #zshead="{column}">
+            <span> {{column.label}}</span>
+            <el-popover :append-to-body="true" trigger="click" :visible="visible1" width="242px">
+                <template #reference>
+                <el-icon color ="#bfcbd9" @click.stop="visible1 = !visible1 , visible2 = false , visible3 = false"><QuestionFilled/></el-icon>
+                </template>
+                <span style="color:#fff">警情数量是以报警时间为标准统计</span>
+            </el-popover>
+        </template>
+        <template #tbhead="{column}">
+            <span> {{column.label}}</span>
+            <el-popover :append-to-body="true" trigger="click" :visible="visible2" width="394px">
+                <template #reference>
+                <el-icon color ="#bfcbd9" @click.stop="visible2 = !visible2, visible1 = false , visible3 = false"><QuestionFilled/></el-icon>
+                </template>
+                <div style="color:#fff">
+                    <div>同比:</div>
+                    <div>报警时间为
+                        <span style="color:red">{{props.data.kssj}} 至 {{props.data.jssj}}</span> 与
+                        <span style="color:red">{{props.data.tbkssj}} 至 {{props.data.tbjssj}} </span> 的警情数据进行对比负数表示降低，正数表示上涨
+                    </div>
+                </div>
+            </el-popover>
+        </template>
+        <template #hbhead="{column}">
+            <span> {{column.label}}</span>
+            <el-popover :append-to-body="true" trigger="click" :visible="visible3" width="394px">
+                <template #reference>
+                <el-icon color ="#bfcbd9" @click.stop="visible3 = !visible3, visible2 = false , visible1 = false"><QuestionFilled/></el-icon>
+                </template>
+                <div style="color:#fff">
+                    <div>环比:</div>
+                    <div>报警时间为
+                        <span style="color:red">{{props.data.kssj}} 至 {{props.data.jssj}}</span> 与
+                        <span style="color:red">{{props.data.hbkssj}} 至 {{props.data.hbjssj}} </span> 的警情数据进行对比负数表示降低，正数表示上涨
+                    </div>
+                </div>
+            </el-popover>
+        </template>
+        <!-- 内容 -->
+        <template #xh="{row}">
+            <span class="order" :class="row.xh == 1?'red':row.xh == 2 ?'orange':row.xh == 3 ?'blue':'green'">{{row.xh}}</span>
+        </template>
+        <template #zs="{row}">
+            <span @click="chooseData(row,'zs')" >{{row.zs}}</span>
+        </template>
+        <template #tb="{row}">
+            <span @click="chooseData(row,'tb')"  :style="{color:row.tbbl > 0 ? '#ff0000':'#57d040'}">{{row.tb}} ({{row.tbbl || 0}}) % </span>
+        </template>
+        <template #hb="{row}">
+            <span @click="chooseData(row,'hb')" :style="{color:row.hbbl > 0 ? '#ff0000':'#57d040'}"> {{row.hb}} ({{row.hbbl || 0}}) % </span>
+        </template>
+    </DarkTable>
+    <DetailDialog :time="time" />
+  </div>
+</template>
+
+<script setup>
+import DetailDialog from './detailDialog.vue'
+import { qcckPost } from "@/api/qcckApi.js"
+import DarkTable from "@/components/aboutTable/DarkTable.vue";
+import Detail from './detailDialog.vue'
+import { reactive, ref ,onMounted,defineEmits,getCurrentInstance, watch } from 'vue';
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+    data:{
+        type:Object,
+        default:{}
+    },
+    lx:String,
+    isShow:Boolean
+})
+const emits = defineEmits(["lookDetail"]);
+const time = ref([]) //选择的时间
+const showDetail = ref(false)
+const visible1 = ref(false)
+const visible2 = ref(false)
+const visible3 = ref(false)
+const pageData = reactive({
+  tableData: [], //表格数据
+  tableConfiger: {
+    loading: false,
+    rowHieght: 61,
+    showSelectType:'null',
+    showIndex:false,
+    haveControls:false,
+  },
+  tableHeight:377,
+  tableColumn: [
+    { label: "序号",  prop: "xh",showSolt:true },
+    { label: "名称",  prop: "mc"},
+    { label: "警情",  prop: "zs",showSolt:true ,showSoltHeader:true,sortable:true},
+    { label: "同比",  prop: "tb",showSolt:true ,showSoltHeader:true},
+    { label: "环比",  prop: "hb",showSolt:true ,showSoltHeader:true},
+  ]
+});
+const chooseIds = ref([]) //选择的数据
+
+
+// 處理數據
+const handleData = (val) =>{
+    let list = val || [];
+    pageData.tableData = list.map((item,index)=>{
+        item.xh = index+1
+        return item;
+    })
+}
+
+// 选择列表
+const chooseData = (val,type) =>{
+    let obj = {lx:props.lx,type}
+    switch(props.lx){
+        case 'jqbm'://部门
+            obj.ssbmdm = val.ssbmdm;
+            break;
+        case 'jqlb'://类别
+            obj.bjlb = val.key;
+            break;
+        case 'jmll'://六类
+           obj.bjxl = val.bjxl;
+           obj.bjzl = val.bjzl;
+            break;
+        case 'ddsj'://达到
+            let arr = val.key.split(',')
+            obj.kssd = arr[0]
+            obj.jssd = arr[1]
+            break;
+    }
+    emits('lookDetail',obj)
+}
+
+watch(()=>props.data,(val)=>{
+    if(val && val.List) handleData(val.List); //处理数据
+},{immediate:true,deep:true})
+
+watch(()=>props.isShow,(val)=>{
+    visible1.value = false;
+    visible2.value = false;
+    visible3.value = false;
+},{immediate:true})
+</script>
+
+<style lang="scss" scoped>
+.listBoxJQ{
+    width:100%;
+    height:100%;
+    .order{
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        text-align: center;
+        line-height: 20px;
+        color: #fff;
+        border-radius: 3px;
+    }
+    .red{ background: rgb(255, 108, 108); }
+    .orange{ background: rgb(252, 175, 97); }
+    .blue{ background: #4259af; }
+    .green{ background: rgb(143, 212, 153);}
+    ::v-deep .el-icon{
+        top: 3px !important;
+        left:4px;
+        right:5px;
+    }
+}
+
+::v-deep .el-input__inner{
+    color: #000 !important;
+}
+::v-deep .el-pagination.is-background .btn-prev{
+    color: #000;
+}
+</style>

src/views/homeMy/modelDialog/components/peopleRanking.vue

@@ -0,0 +1,96 @@
+<template>
+    <ul class="rankingBox noScollLine" v-if="list.length > 0">
+      <li v-for="item in list" :key="item.yj_rysfzh">
+        <div class="leftBox">
+          <div class="top">
+            <span class="dian blue"></span>
+            <span class="name">{{ item.yj_ryxm }}<span v-if="item.yj_ryxm.length < 4">（{{ item.yj_rysfzh }}）</span></span>
+          </div>
+          <div class="jdtBox">
+            <div class="jdt" :style="{ width: (parseInt(item.total) / totalWidth) * 100 + '%' }"></div>
+          </div>
+        </div>
+        <div class="rightBox">
+          <span class="numb">{{ item.total }}</span> 次
+        </div>
+      </li>
+    </ul>
+    <div v-else-if="list.length === 0" class="empty-box">暂无数据</div>
+</template>
+
+<script setup>
+import { getTime } from "@/utils/time.js";
+import { getManRankYj } from "@/api/yjCenter.js";
+import { ref, reactive,defineProps, watchEffect } from "vue";
+const props = defineProps({
+  data:Object
+})
+const list = ref([]);
+const totalWidth = ref(0);
+const dataLoad = ref(true);
+
+function getList() {
+  getManRankYj(props.data).then((res) => {
+    list.value = res;
+    if (list.value && list.value.length > 0) {
+      dataLoad.value = false;
+      totalWidth.value = Math.max(...list.value.map(item=>item.total))
+    }
+  }).catch((err) => {
+    dataLoad.value = false;
+  });
+}
+watchEffect(()=>{
+  getList();
+})
+
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/largeScreen.scss";
+ul.rankingBox {
+  height: 100%;
+  padding: 4px 10px;
+  box-sizing: border-box;
+  overflow: auto;
+  li {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 8px;
+    .leftBox {
+      flex: 1;
+      .top {
+        height: 28px;
+        .name {
+          font-size: 14px;
+          vertical-align: middle;
+        }
+      }
+      .jdtBox {
+        height: 7px;
+        background: #092a4e;
+        border-radius: 4px;
+        overflow: hidden;
+        .jdt {
+          background: #00c0fa;
+          height: 100%;
+          border-radius: 4px;
+        }
+      }
+    }
+    .rightBox {
+      width: 68px;
+      text-align: right;
+      color: #4896ff;
+      font-size: 14px;
+      line-height: 50px;
+      height: 34px;
+      .numb {
+        font-size: 14px;
+        font-weight: bold;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>

src/views/homeMy/modelDialog/components/ranking.vue

@@ -0,0 +1,105 @@
+
+<template>
+  <ul class="rankingBox noScollLine" v-if="list.length > 0">
+    <li v-for="item in list" :key="item.yj_gzyid">
+      <div class="leftBox">
+        <el-tooltip effect="dark" :content="item.yj_gzymc" placement="top-start">
+          <div class="top">
+            <span class="dian blue"></span>
+            <span class="name">{{ item.yj_gzymc }}</span>
+          </div>
+        </el-tooltip>
+        <div class="jdtBox">
+          <div class="jdt" :style="{ width: (parseInt(item.total) / totalWidth) * 100 + '%' }"></div>
+        </div>
+      </div>
+      <div class="rightBox">
+        <span class="numb">{{ item.total }}</span> 次
+      </div>
+    </li>
+  </ul>
+  <div v-if="list.length === 0" class="empty-box">暂无数据</div>
+</template>
+
+<script setup>
+import { getGzyYj } from "@/api/yjCenter.js";
+import { ref, reactive,defineProps,watchEffect } from "vue";
+const props = defineProps({
+  data:Object
+})
+
+const list = ref([]);
+const totalWidth = ref(0);
+const dataLoad = ref(true);
+
+function getList() {
+  getGzyYj(props.data).then((res) => {
+    list.value = res;
+    if (list.value && list.value.length > 0) {
+      dataLoad.value = false;
+      totalWidth.value = Math.max(...list.value.map((item) => item.total));
+    }
+  }).catch((err) => {
+    dataLoad.value = false;
+  });
+}
+
+watchEffect(()=>{
+  getList();
+})
+
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/largeScreen.scss";
+ul.rankingBox {
+  height:100%;
+  overflow: auto;
+  padding:4px 10px;
+  box-sizing: border-box;
+  li {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 8px;
+    .leftBox {
+      flex: 1;
+      width: 290px;
+      .top {
+        height: 28px;
+        .name {
+          display: inline-block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          width: 240px;
+          font-size: 14px;
+          vertical-align: middle;
+        }
+      }
+      .jdtBox {
+        height: 7px;
+        background: #092a4e;
+        border-radius: 4px;
+        overflow: hidden;
+        .jdt {
+          background: #00c0fa;
+          height: 100%;
+          border-radius: 4px;
+        }
+      }
+    }
+    .rightBox {
+      width: 60px;
+      text-align: right;
+      color: #4896ff;
+      font-size: 14px;
+      line-height: 50px;
+      height: 34px;
+      .numb {
+        font-size: 14px;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>

src/views/homeMy/modelDialog/components/statis.vue

@@ -0,0 +1,102 @@
+
+<template>
+  <div class="demo">
+    <ul class="fp-box">
+      <!-- 默认进来是7位，超过自动加 -->
+      <li ref="lis" v-for="i in countStr.length > 5 ? countStr.length : 5"  :key="i" :class="bg" >
+        <!-- 每列中的10行数字 -->
+        <span v-for="num in 10" :key="num">
+          <span class="line"></span>
+          <span class="num-wrap">{{ num - 1 }}</span>
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>
+<script setup>
+import { onMounted, ref, watch } from "vue";
+const props = defineProps({
+  count: Number,
+  bg: String
+});
+const lis = ref();
+const list = ref([]);
+const countStr = ref(""); // 需要展示的数字
+const numberArr = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]); // 固定每列中的19行数字
+const numStr = ref(""); // 需要展示的数字字符串
+const numArr = ref([0, 0, 0, 0, 0]); // 默认展示7个数字数组
+watch(() => props.count,(val) => {
+  countStr.value = val.toString();
+  initNumCard();
+},{immediate: true,deep: true}
+);
+onMounted(() => {
+  initNumCard();
+});
+function initNumCard() {
+  numStr.value = countStr.value;
+  numArr.value = numStr.value.split("");
+  const numArrlen = numArr.value.length;
+  // 展示数字的处理，不够7位前面补0
+  // 默认进来是7位，超过自动加
+  for (let i = 0; i < (countStr.value.length > 5 ? countStr.value.length : 5) - numArrlen;i++) {
+    numArr.value.unshift(0);
+  }
+  if (lis.value) {
+    lis.value.forEach((item, index) => {
+      const ty = numArr.value[index];
+      item.style.transform = `translateY(-${ty * 32}px)`; // 滚动数字(li标签)
+    });
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fp-box {
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  li {
+    width: 26px;
+    height: 32px;
+    flex-direction: column;
+    transition: transform 1s ease-in-out;
+    margin-right: 2px;
+    & > span {
+      text-align: center;
+      background: url("~@/assets/images/bgBlue.png") no-repeat;
+      background-size: 100% 100%;
+      font-size: 24px;
+      color: #ffffff;
+      display: flex;
+      display: inline-block;
+      width: 26px;
+      height: 32px;
+      line-height: 32px;
+      float: left;
+      position: relative;
+      font-family: "DigifaceWide";
+      .line {
+        display: inline-block;
+        height: 1px;
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 23px;
+      }
+      .num-wrap {
+        font-family: "DigifaceWide";
+      }
+    }
+  }
+  .redTags > span {
+    background: url("~@/assets/images/bgSky.png") no-repeat;
+  }
+  .bgGreen > span {
+    background: url("~@/assets/images/bgGreen.png") no-repeat;
+  }
+  .bgBlue > span {
+    background: url("~@/assets/images/bgBlue.png") no-repeat;
+  }
+}
+</style>

src/views/homeMy/modelDialog/components/warningStatistics.vue

@@ -0,0 +1,128 @@
+<template>
+  <ul class="yjtjBox">
+    <li class="borderblueSky">
+      <div class="title">预警总数</div>
+      <div class="other">
+        <Statis :count="count.zs" bg="redTags" />
+      </div>
+    </li>
+    <li class="borderGreen">
+      <div class="title">同比</div>
+      <div class="other">
+        <Statis :count="count.tb" bg="bgGreen" /><span>({{count.tbbl}}%)</span>
+      </div>
+    </li>
+    <li class="borderBlue">
+      <div class="title">环比</div>
+      <div class="other">
+       <Statis :count="count.hb" bg="bgBlue" /><span>({{count.hbbl}}%)</span>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script setup>
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import Statis from './statis.vue'
+import { getTime } from "@/utils/time.js";
+import { ref, reactive, watch, onMounted,defineProps, watchEffect } from "vue";
+const props = defineProps({
+  data:Object
+})
+
+const count = reactive({
+  zs:0,
+  tb:0,
+  tbbl:0,
+  hb:0,
+  hbbl:0,
+});
+function getList() {
+  qcckPost(props.data,'/mosty-jmxf/yjzx/getyjTbHb').then((res) => {
+    count.hb  = res.hb || 0
+    count.tb  = res.tb || 0
+    count.tbbl  = res.tbbl || 0
+    count.hbbl  = res.hbbl || 0
+    count.zs  = res.zs || 0
+  })
+}
+watchEffect(()=>{
+  getList()
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/largeScreen.scss";
+ul.yjtjBox {
+  height: 100%;
+  padding: 12px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  > li {
+    flex:1 0 0;
+    height: 100%;
+    border: 1px solid #0a79d6;
+    box-shadow: inset 0 0 10px #0a79d6;
+    box-sizing: border-box;
+    .title {
+      text-align: center;
+      border-right: 1px solid #0a79d6;
+      box-shadow: inset 0 0 10px #0a79d6;
+      box-sizing: border-box;
+      font-size: 24px;
+      height: 100px;
+      line-height: 100px;
+    }
+    .other {
+      height: calc(100% - 100px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .numb {
+      font-size: 24px;
+      color: #0a79d6;
+    }
+    .bijiao{
+      font-size: 24px;
+    }
+    .arrow {
+      margin: 0 4px 0 0;
+      transform: rotate(180deg);
+    }
+    &.borderblueSky {
+      border: 1px solid #1eb8cf;
+      box-shadow: inset 0 0 10px #1eb8cf;
+      color: #1eb8cf;
+      .title {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        border-right: 1px solid #1eb8cf;
+        box-shadow: inset 0 0 10px #1eb8cf;
+      }
+    }
+    &.borderGreen {
+      border: 1px solid #2ec938;
+      box-shadow: inset 0 0 10px #2ec938;
+      color: #2ec938;
+      .title {
+        box-shadow: inset 0 0 10px #2ec938;
+      }
+    }
+    &.borderBlue {
+      border: 1px solid #0d81e0;
+      box-shadow: inset 0 0 10px #0d81e0;
+      color: #0d81e0;
+      .title {
+        border-right: 1px solid #0d81e0;
+        box-shadow: inset 0 0 10px #0d81e0;
+      }
+    }
+  }
+   > li:nth-child(2){
+     margin: 0 4px;
+   }
+}
+</style>

src/views/homeMy/modelDialog/dwryCount.vue

@@ -0,0 +1,213 @@
+<template>
+    <el-dialog top="0px" width="100%" v-model="props.visibleDialog" destroy-on-close :show-close="false" :close-on-click-modal="false" custom-class="zdy-dialog">
+        <template #title>
+        <div class="my-header">
+            <div class="left">
+                <span>单位人员统计</span>
+                <Search :searchArr="searchArr" @submit="onSearch"></Search>
+            </div>
+            <el-icon color="#23c3f3" @click="closeDialog"><Close/></el-icon>
+        </div>
+        </template>
+        <div class="contant-dialog dddd">
+            <div class="dialogItem">
+                <div class="it-title">
+                    <div>人员分类</div>
+                    <div style="display:flex;align-items: center;">
+                        人员总数 :  <Statis :count="dataObj.ryzs" bg="bgBlue" />
+                    </div>
+                </div>
+                <div class="it-cnt">
+                    <BarCharts :data="dataObj.ryfl" id="ryfl" barWidth="10px" :key="'rr'+keynum" />
+                </div>
+            </div>
+            <div class="dialogItem">
+                <div class="it-title">
+                    <div>单位分类</div>
+                    <div style="display:flex;align-items: center;">
+                        单位总数 : <Statis :count="dataObj.dwzs" bg="bgGreen"/>
+                    </div>
+                </div>
+                <div class="it-cnt">
+                    <BarCharts :data="dataObj.dwfl" id="dwfl" barWidth="10px" :key="'ddr'+keynum"  />
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<script setup>
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import Search from "@/components/aboutTable/Search.vue";
+import BarCharts from  './components/barChartsOne.vue'
+import Statis from  './components/statis.vue'
+import { ref ,defineProps,defineEmits,reactive, onMounted} from 'vue'
+const emits = defineEmits(["update:modelValue"]);
+const props = defineProps({
+    visibleDialog:Boolean
+})
+const keynum = ref(0)
+const searchArr = reactive([
+  {
+    showType: "department",
+    prop: "ssbmdm",
+    label:'所属部门'
+  },
+]);
+const dateQuery = ref({}) //搜索
+
+const dataObj = ref({
+    ryzs:'000',
+    dwzs:'000',
+    ryfl:[],
+    dwfl:[],
+})
+
+onMounted(()=>{
+    init()
+})
+
+
+// 搜索
+function onSearch(val) {
+  dateQuery.value.ssbmdm = val.ssbmdm || '';
+  keynum.value++
+  init()
+}
+
+const init = () =>{
+    qcckGet(dateQuery.value,'/mosty-jmxf/tbJcglXfDwgl/xfDwTj').then(res=>{
+        dataObj.value.ryzs = res.ryzs || 0;
+        dataObj.value.dwzs = res.dwzs || 0;
+        dataObj.value.ryfl = res.ryfl
+        dataObj.value.dwfl = res.dwfl
+    })
+}
+
+// 關閉
+function closeDialog(params) {
+    emits('update:modelValue',false)
+}
+</script>
+
+<style lang="scss" scoped>
+
+.my-header{
+    background: url('~@/assets/images/add-title.png') no-repeat center center;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: space-between;
+    height: 80px;
+    align-items: center;
+    padding: 0 10px 0 20px;
+    box-sizing: border-box;
+    font-size: 30px;
+    .left{
+        display: flex;
+        align-items: center;
+        span{
+            font-family: "HANYILINGXINTIJIAN";
+        }
+    }
+}
+.contant-dialog{
+    height: calc(100vh - 80px);
+    overflow: hidden;
+    overflow-y: auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 10px 20px;
+    box-sizing: border-box;
+    .dialogItem{
+        width: 49%;
+        height: calc(100% - 10px );
+        margin-top: 10px;
+        .it-title{
+            display:flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 47px;
+            line-height: 47px;
+            padding-left: 20px;
+            font-size: 20px;
+            background: url('~@/assets/images/add-title11.png') no-repeat center center;
+            background-size: 100% 100%;
+            font-family: 'DigifaceWide';
+        }
+        .it-cnt{
+            height: calc(100% - 47px);
+            box-sizing: 10px;
+            box-sizing: border-box;
+            background: #052342;
+            position: relative;
+            overflow:hidden;
+            &::after {
+                content: "";
+                position: absolute;
+                bottom: -1px;
+                left: -1px;
+                width: 10px;
+                height: 10px;
+                border: solid #6fb2ff;
+                border-width: 0 0 2px 2px;
+            }
+
+            &::before {
+                content: "";
+                position: absolute;
+                bottom: -1px;
+                right: -1px;
+                width: 10px;
+                height: 10px;
+                border: solid #6fb2ff;
+                border-width: 0 2px 2px 0;
+            }
+        }
+    }
+
+}
+::v-deep .el-input__inner{
+  background-color:transparent;
+  border:1px solid #68d0ff;
+   color: #fff !important;
+}
+::v-deep .el-date-editor .el-range-input{
+  background-color:transparent;
+  color:#fff;
+}
+::v-deep .el-date-editor .el-range-separator{
+  color:#e9e9e9;
+}
+
+</style>
+
+<style>
+.zdy-dialog .el-dialog__body{
+    padding: 0 !important;;
+}
+.zdy-dialog .el-dialog__header{
+    padding: 0 !important;
+}
+.zdy-dialog{
+    margin: 0 !important;
+}
+.searchBox::after{
+    content: none;
+}
+.searchBox::before{
+    content: none;
+}
+.detail{
+    cursor: pointer;
+}
+
+::v-deep .fp-box{
+ margin-bottom: 0 !important;
+}
+</style>
+<style>
+.dddd .fp-box{
+    margin-bottom: 0 ;
+}
+</style>

src/views/homeMy/modelDialog/piliceCaseCount.vue

@@ -0,0 +1,424 @@
+<template>
+    <el-dialog top="0px" width="100%" v-model="props.visibleDialog" destroy-on-close :show-close="false" :close-on-click-modal="false" custom-class="zdy-dialog">
+        <template #title>
+        <div class="my-header">
+            <div class="left">
+                <span>警情统计</span>
+                <Search :searchArr="searchArr" @submit="onSearch"></Search>
+            </div>
+            <el-icon color="#23c3f3" @click="closeDialog"><Close/></el-icon>
+        </div>
+        </template>
+        <div class="contant-dialog">
+            <div class="dialogItem">
+                <div class="it-title">警情全部</div>
+                <div class="it-cnt"><JqZs lx="jqqb" :data="dataObj.count" @lookDetail="lookDetail" /></div>
+            </div>
+            <div class="dialogItem">
+                <div class="it-title">
+                    <span>警情部门统计同比环比</span>
+                    <span class="detail" @click="show.depShow = !show.depShow ,isShow = false" :isShow="isShow">详情</span>
+                </div>
+                <div class="it-cnt">
+                    <List :data="dataObj.jqDep.data" v-if="show.depShow" lx='jqbm' @lookDetail="lookDetail" />
+                    <BarCharts :data="dataObj.jqDep" id="dep" barWidth="10px" v-else />
+                </div>
+            </div>
+            <div class="dialogItem">
+                <div class="it-title">
+                    <span>警情类别</span>
+                    <span class="detail" @click="show.lbShow = !show.lbShow ,isShow = false" :isShow="isShow">详情</span>
+                </div>
+                <div class="it-cnt">
+                    <List :data="dataObj.jqTypes.data"  lx='jqlb' v-if="show.lbShow" @lookDetail="lookDetail"  />
+                    <BarCharts :data="dataObj.jqTypes" id="marks" v-else />
+                </div>
+            </div>
+            <div class="dialogItem">
+                <div class="it-title">
+                    <span>街面六类同比环比</span>
+                    <span class="detail" @click="show.llShow = !show.llShow ,isShow = false" :isShow="isShow">详情</span>
+                </div>
+                <div class="it-cnt">
+                    <List :data="dataObj.streetType.data"  lx='jmll' v-if="show.llShow" @lookDetail="lookDetail"  />
+                    <BarCharts :data="dataObj.streetType" id="street" v-else />
+                </div>
+            </div>
+             <div class="dialogItem">
+                <div class="it-title">
+                    <span>达到时间</span>
+                    <span class="detail" @click="show.ddsjShow = !show.ddsjShow ,isShow = false" :isShow="isShow">详情</span>
+                </div>
+                <div class="it-cnt">
+                    <List :data="dataObj.jqTime.data" lx='ddsj' v-if="show.ddsjShow" @lookDetail="lookDetail"  />
+                    <BarCharts :data="dataObj.jqTime" id="arriveTime" v-else />
+                </div>
+            </div>
+             <div class="dialogItem">
+                <div class="it-title">报警时段同比环比</div>
+                <div class="it-cnt"><LineChartMore :data="dataObj.timeRange" id="timeRange" /></div>
+            </div>
+        </div>
+        <DetailDialog :searchDate="searchDate" v-model="isShowDetail" v-if="isShowDetail" />
+    </el-dialog>
+</template>
+
+<script setup>
+import DetailDialog from './components/detailDialog.vue'
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import Search from "@/components/aboutTable/Search.vue";
+import BarCharts from  './components/barCharts.vue'
+import List from  './components/list.vue'
+import JqZs from  './components/jqzs.vue'
+import LineChartMore from  './components/lineChartMore.vue'
+import { ref ,defineProps,defineEmits,reactive, onMounted} from 'vue'
+const emits = defineEmits(["update:modelValue"]);
+const props = defineProps({
+    visibleDialog:Boolean
+})
+const searchDate = ref({})
+
+const isShowDetail = ref(false) //查看详情
+const searchArr = reactive([
+  {
+    showType: "datetimerange",
+    prop: "timerange",
+    rangeSeparator:'至',
+    startPlaceholder:'请选择开始时间',
+    endPlaceholder:'请选择结束时间',
+    label:'时间'
+  },
+  {
+    showType: "department",
+    prop: "ssbmdm",
+    label:'所属部门'
+  },
+]);
+const dateQuery = ref({}) //搜索
+
+const dataObj = reactive({
+    jqTime:{
+        title:['警情达到时间','同比','环比'],
+        data:{},
+        list:[],
+    },
+    jqDep:{
+        title:['警情部门','同比','环比'],
+        data:{},
+        list:[],
+    },
+    jqTypes:{
+        title:['警情类型','同比','环比'],
+        data:{},
+        list:[],
+    },
+    streetType:{
+        title:['街面六类','同比','环比'],
+        data:{},
+        list:[],
+    },
+    timeRange:{
+        title:['总数','同比','环比'],
+        data:{},
+    },
+    count:{
+        zs:0,
+        tb:0,
+        tbbl:0,
+        hb:0,
+        hbbl:0,
+        data:{}
+    }
+})
+
+const show = reactive({
+    isShow:false,
+    depShow:false,//部门
+    lbShow:false,//类别
+    llShow:false,//六类
+    ddsjShow:false,//达到时间
+})
+onMounted(()=>{
+    init()
+})
+
+function lookDetail(val) {
+    searchDate.value = {...val }
+    searchDate.value.ssbmdm = dateQuery.value.ssbmdm
+    switch(val.lx){
+         case 'jqbm'://部门
+            if(val.type == 'tb'){
+                searchDate.value.startTime = dataObj.jqDep.data.tbkssj
+                searchDate.value.endTime = dataObj.jqDep.data.tbjssj
+            }
+            if(val.type == 'hb'){
+                searchDate.value.startTime = dataObj.jqDep.data.hbkssj
+                searchDate.value.endTime = dataObj.jqDep.data.hbjssj
+            }
+            if(val.type == 'zs'){
+                searchDate.value.startTime = dataObj.jqDep.data.kssj
+                searchDate.value.endTime = dataObj.jqDep.data.jssj
+            }
+            searchDate.value.ssbmdm = val.ssbmdm
+            break;
+        case 'jqlb'://类别
+
+            if(val.type == 'tb'){
+                searchDate.value.startTime = dataObj.jqTypes.data.tbkssj
+                searchDate.value.endTime = dataObj.jqTypes.data.tbjssj
+            }
+            if(val.type == 'hb'){
+                searchDate.value.startTime = dataObj.jqTypes.data.hbkssj
+                searchDate.value.endTime = dataObj.jqTypes.data.hbjssj
+            }
+            if(val.type == 'zs'){
+                searchDate.value.startTime = dataObj.jqTypes.data.kssj
+                searchDate.value.endTime = dataObj.jqTypes.data.jssj
+            }
+
+            break;
+        case 'jmll'://六类
+
+            if(val.type == 'tb'){
+                searchDate.value.startTime = dataObj.streetType.data.tbkssj
+                searchDate.value.endTime = dataObj.streetType.data.tbjssj
+            }
+            if(val.type == 'hb'){
+                searchDate.value.startTime = dataObj.streetType.data.hbkssj
+                searchDate.value.endTime = dataObj.streetType.data.hbjssj
+            }
+            if(val.type == 'zs'){
+                searchDate.value.startTime = dataObj.streetType.data.kssj
+                searchDate.value.endTime = dataObj.streetType.data.jssj
+            }
+
+            break;
+        case 'ddsj'://达到
+           if(val.type == 'tb'){
+                searchDate.value.startTime = dataObj.jqTime.data.tbkssj
+                searchDate.value.endTime = dataObj.jqTime.data.tbjssj
+            }
+            if(val.type == 'hb'){
+                searchDate.value.startTime = dataObj.jqTime.data.hbkssj
+                searchDate.value.endTime = dataObj.jqTime.data.hbjssj
+            }
+            if(val.type == 'zs'){
+                searchDate.value.startTime = dataObj.jqTime.data.kssj
+                searchDate.value.endTime = dataObj.jqTime.data.jssj
+            }
+
+            break;
+        case 'jqqb'://警情全部
+            if(val.type == 'tb'){
+                searchDate.value.startTime = dataObj.count.data.tbkssj
+                searchDate.value.endTime = dataObj.count.data.tbjssj
+            }
+            if(val.type == 'hb'){
+                searchDate.value.startTime = dataObj.count.data.hbkssj
+                searchDate.value.endTime = dataObj.count.data.hbjssj
+            }
+            if(val.type == 'zs'){
+                searchDate.value.startTime = dataObj.count.data.kssj
+                searchDate.value.endTime = dataObj.count.data.jssj
+            }
+
+            break;
+    }
+    delete searchDate.value.type
+    isShowDetail.value = true
+}
+
+
+// 搜索
+function onSearch(val) {
+  dateQuery.value.kssj = val.timerange ? val.timerange[0] :'';
+  dateQuery.value.jssj = val.timerange ? val.timerange[1] :'';
+  dateQuery.value.ssbmdm = val.ssbmdm || '';
+  init()
+}
+
+const init = () =>{
+    getjqtime()
+    getjqDep()
+    getjqTypes()
+    getjqStreet()
+    gettimeRange()
+    getList()
+}
+
+// 全部
+function getList() {
+  qcckPost(dateQuery.value,'/mosty-jmxf/tbJq/getJqtbhb').then((res) => {
+    let obj = res.List || {}
+    dataObj.count.hb  = obj.hb || 0
+    dataObj.count.tb  = obj.tb || 0
+    dataObj.count.tbbl  = obj.tbbl || 0
+    dataObj.count.hbbl  = obj.hbbl || 0
+    dataObj.count.zs  = obj.zs || 0;
+    dataObj.count.data = res;
+  })
+}
+
+// 警情时段
+const gettimeRange = () =>{
+    qcckPost(dateQuery.value,'/mosty-jmxf/tbJq/getBjsdTj').then(res=>{
+        dataObj.timeRange.data = res || {}
+    })
+}
+
+
+// 警情部门统计同比环比
+const getjqDep = () =>{
+    qcckPost(dateQuery.value,'/mosty-jmxf/tbJq/jqBmTj').then(res=>{
+        dataObj.jqDep.data = res || {}
+        dataObj.jqDep.list = res.List || []
+    })
+}
+
+// 警情类别同比环比
+const getjqTypes = () =>{
+    qcckPost(dateQuery.value,'/mosty-jmxf/tbJq/getBjlxTj').then(res=>{
+        dataObj.jqTypes.data = res || {}
+        dataObj.jqTypes.list = res.List || []
+    })
+}
+
+
+
+// 获取警情达到时间同比环比
+const getjqtime = () =>{
+    qcckPost(dateQuery.value,'/mosty-jmxf/tbJq/ddsjTj').then(res=>{
+        dataObj.jqTime.data = res || {}
+        dataObj.jqTime.list = res.List || []
+    })
+}
+
+
+// 街面六类同比环比
+const getjqStreet = () =>{
+    qcckPost(dateQuery.value,'/mosty-jmxf/tbJq/fwJqtj').then(res=>{
+        dataObj.streetType.data = res || {}
+        dataObj.streetType.list = res.List || []
+    })
+}
+
+// 關閉
+function closeDialog(params) {
+    emits('update:modelValue',false)
+}
+</script>
+
+<style lang="scss" scoped>
+
+.my-header{
+    background: url('~@/assets/images/add-title.png') no-repeat center center;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: space-between;
+    height: 80px;
+    align-items: center;
+    padding: 0 10px 0 20px;
+    box-sizing: border-box;
+    font-size: 30px;
+    .left{
+        display: flex;
+        align-items: center;
+        span{
+            font-family: "HANYILINGXINTIJIAN";
+        }
+    }
+}
+.contant-dialog{
+    height: calc(100vh - 80px);
+    overflow: hidden;
+    overflow-y: auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 10px 20px;
+    box-sizing: border-box;
+    .dialogItem{
+        width: 33%;
+        height: calc(50% - 10px );
+        margin-top: 10px;
+        .it-title{
+            display:flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 47px;
+            line-height: 47px;
+            padding-left: 20px;
+            font-size: 20px;
+            background: url('~@/assets/images/add-title11.png') no-repeat center center;
+            background-size: 100% 100%;
+            font-family: 'DigifaceWide';
+        }
+        .it-cnt{
+            height: calc(100% - 47px);
+            box-sizing: 10px;
+            box-sizing: border-box;
+            background: #052342;
+            position: relative;
+            overflow:hidden;
+            &::after {
+                content: "";
+                position: absolute;
+                bottom: -1px;
+                left: -1px;
+                width: 10px;
+                height: 10px;
+                border: solid #6fb2ff;
+                border-width: 0 0 2px 2px;
+            }
+
+            &::before {
+                content: "";
+                position: absolute;
+                bottom: -1px;
+                right: -1px;
+                width: 10px;
+                height: 10px;
+                border: solid #6fb2ff;
+                border-width: 0 2px 2px 0;
+            }
+        }
+    }
+
+}
+::v-deep .el-input__inner{
+  background-color:transparent;
+  border:1px solid #68d0ff;
+   color: #fff !important;
+}
+::v-deep .el-date-editor .el-range-input{
+  background-color:transparent;
+  color:#fff;
+}
+::v-deep .el-date-editor .el-range-separator{
+  color:#e9e9e9;
+}
+
+</style>
+
+<style>
+.zdy-dialog .el-dialog__body{
+    padding: 0 !important;;
+}
+.zdy-dialog .el-dialog__header{
+    padding: 0 !important;
+}
+.zdy-dialog{
+    margin: 0 !important;
+}
+.searchBox::after{
+    content: none;
+}
+.searchBox::before{
+    content: none;
+}
+.detail{
+    cursor: pointer;
+}
+
+
+</style>

src/views/homeMy/modelDialog/warningCenter.vue

@@ -0,0 +1,180 @@
+<template>
+    <el-dialog top="0px" width="100%" v-model="props.visibleDialog" destroy-on-close :show-close="false" :close-on-click-modal="false" custom-class="zdy-dialog">
+        <template #title>
+        <div class="my-header">
+            <div class="left">
+                <span>预警中心</span>
+                <Search :searchArr="searchArr" @submit="onSearch"></Search>
+            </div>
+            <el-icon color="#23c3f3" @click="closeDialog"><Close/></el-icon>
+        </div>
+        </template>
+        <div class="contant-dialog">
+            <div class="dialogItem">
+                <div class="it-title">预警统计</div>
+                <div class="it-cnt"> <WarningStatistics :data="dateQuery" /> </div>
+            </div>
+            <div class="dialogItem">
+                <div class="it-title">各时段预警</div>
+                <div class="it-cnt"><LineChart :data="dateQuery" /></div>
+            </div>
+            <div class="dialogItem">
+                <div class="it-title">感知源预警排名</div>
+                <div class="it-cnt"><Ranking :data="dateQuery" /></div>
+            </div>
+            <div class="dialogItem">
+                <div class="it-title">人员预警排名</div>
+                <div class="it-cnt"><PeopleRanking :data="dateQuery" /></div>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<script setup>
+import Search from "@/components/aboutTable/Search.vue";
+import WarningStatistics from  './components/warningStatistics.vue'
+import LineChart from  './components/lineChart.vue'
+import Ranking from  './components/ranking.vue'
+import PeopleRanking from  './components/peopleRanking.vue'
+import { ref ,defineProps,defineEmits,reactive} from 'vue'
+const emits = defineEmits(["update:modelValue",'closeDialog']);
+const props = defineProps({
+    visibleDialog:Boolean
+})
+const searchArr = reactive([
+  {
+    showType: "datetimerange",
+    prop: "timerange",
+    rangeSeparator:'至',
+    startPlaceholder:'请选择开始时间',
+    endPlaceholder:'请选择结束时间',
+    label:'时间'
+  },
+  {
+    showType: "department",
+    prop: "ssbmdm",
+    label:'所属部门'
+  },
+]);
+const dateQuery = ref({}) //搜索
+// 搜索
+function onSearch(val) {
+  dateQuery.value.kssj = val.timerange ? val.timerange[0] :'';
+  dateQuery.value.jssj = val.timerange ? val.timerange[1] :'';
+  dateQuery.value.ssbmdm = val.ssbmdm || '';
+}
+
+// 關閉
+function closeDialog(params) {
+    emits('update:modelValue',false)
+    emits('closeDialog',false)
+}
+</script>
+
+<style lang="scss" scoped>
+
+.my-header{
+    background: url('~@/assets/images/add-title.png') no-repeat center center;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: space-between;
+    height: 80px;
+    align-items: center;
+    padding: 0 10px 0 20px;
+    box-sizing: border-box;
+    font-size: 30px;
+    .left{
+        display: flex;
+        align-items: center;
+        span{
+            font-family: "HANYILINGXINTIJIAN";
+        }
+    }
+}
+.contant-dialog{
+    height: calc(100vh - 80px);
+    overflow: hidden;
+    overflow-y: auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 10px 20px;
+    box-sizing: border-box;
+    .dialogItem{
+        width: 49.5%;
+        height: calc(50% - 10px );
+        margin-top: 10px;
+        .it-title{
+            height: 47px;
+            line-height: 47px;
+            padding-left: 20px;
+            font-size: 20px;
+            background: url('~@/assets/images/add-title11.png') no-repeat center center;
+            background-size: 100% 100%;
+            font-family: 'DigifaceWide';
+        }
+        .it-cnt{
+            height: calc(100% - 47px);
+            box-sizing: 10px;
+            box-sizing: border-box;
+            background: #052342;
+            position: relative;
+            &::after {
+                content: "";
+                position: absolute;
+                bottom: -1px;
+                left: -1px;
+                width: 10px;
+                height: 10px;
+                border: solid #6fb2ff;
+                border-width: 0 0 2px 2px;
+            }
+
+            &::before {
+                content: "";
+                position: absolute;
+                bottom: -1px;
+                right: -1px;
+                width: 10px;
+                height: 10px;
+                border: solid #6fb2ff;
+                border-width: 0 2px 2px 0;
+            }
+        }
+    }
+    .dialogItem:nth-child(2n){
+        margin-left: 1%;
+    }
+}
+::v-deep .el-input__inner{
+  background-color:transparent;
+  border:1px solid #68d0ff;
+}
+::v-deep .el-date-editor .el-range-input{
+  background-color:transparent;
+  color:#fff;
+}
+::v-deep .el-date-editor .el-range-separator{
+  color:#e9e9e9;
+}
+
+</style>
+
+<style>
+.zdy-dialog .el-dialog__body{
+    padding: 0 !important;;
+}
+.zdy-dialog .el-dialog__header{
+    padding: 0 !important;
+}
+.zdy-dialog{
+    margin: 0 !important;
+}
+.searchBox::after{
+    content: none;
+}
+.searchBox::before{
+    content: none;
+}
+
+</style>

src/views/homeMy/modelDialog/xfrwDialog.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="uplodBox">
+    <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item prop="rwbt" label="任务名称">
+            <el-input v-model="formData.rwbt" placeholder="请输入任务名称"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item prop="rwsj" label="任务时间">
+            <el-date-picker @change="handleChangeTime" v-model="formData.rwsj" type="datetimerange" unlink-panels
+              range-separator="至" :start-placeholder="'开始时间'" :end-placeholder="'结束时间'"
+              value-format="YYYY-MM-DD HH:mm:ss" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-divider> 巡逻人员 </el-divider>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item prop="fzrxm" label="负责人">
+            <el-input v-model="formData.fzrxm" readonly placeholder="请选择负责人"
+              @click="handleClick('fzr', '选择负责人')"></el-input>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24">
+          <el-form-item prop="mjlist" label="民警">
+            <div class="tagBox" @click="handleClick('mj', '选择民警', 'mjlist')">
+              <span class="txet" v-if="!formData.mjlist || formData.mjlist.length == 0">请选择民警</span>
+              <span class="txet" v-else>
+                <el-tag v-for="item in formData.mjlist" :key="item.id" closable
+                  @close.stop="removeTag(item, 'mjlist')">{{ item.xm }}</el-tag>
+              </span>
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item prop="fjlist" label="辅警">
+            <div class="tagBox" @click="handleClick('fj', '选择辅警', 'fjlist')">
+              <span class="txet" v-if="!formData.fjlist || formData.fjlist.length == 0">请选择辅警</span>
+              <span class="txet" v-else>
+                <el-tag v-for="item in formData.fjlist" :key="item.id" closable
+                  @close.stop="removeTag(item, 'fjlist')">{{ item.xm }}</el-tag>
+              </span>
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item prop="baryList" label="保安">
+            <div class="tagBox" @click="handleClick('ba', '选择保安', 'baryList')">
+              <span class="txet" v-if="!formData.baryList || formData.baryList.length == 0">请选择保安</span>
+              <span class="txet" v-else>
+                <el-tag v-for="item in formData.baryList" :key="item.id" closable
+                  @close.stop="removeTag(item, 'baryList')">{{ item.xm }}</el-tag>
+              </span>
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item prop="wgyjson" label="网格员">
+            <div class="tagBox" @click="handleClick('wgy', '选择网格员', 'wgyjson')">
+              <span class="txet" v-if="!formData.wgyjson || formData.wgyjson.length == 0">请选择网格员</span>
+              <span class="txet" v-else>
+                <el-tag v-for="item in formData.wgyjson" :key="item.id" closable
+                  @close.stop="removeTag(item, 'wgyjson')">{{ item.xm }}</el-tag>
+              </span>
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item prop="qfqzjson" label="群防群治">
+            <div class="tagBox" @click="handleClick('qfqz', '选择群防群治', 'qfqzjson')">
+              <span class="txet" v-if="!formData.qfqzjson || formData.qfqzjson.length == 0">请选择群防群治</span>
+              <span class="txet" v-else>
+                <el-tag v-for="item in formData.qfqzjson" :key="item.id" closable
+                  @close.stop="removeTag(item, 'qfqzjson')">{{ item.xm }}</el-tag>
+              </span>
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+  <div class="foot tc">
+    <el-button @click="handleClose">取消</el-button>
+    <el-button type="primary" :loading="loading" @click="onComfirm">确认</el-button>
+  </div>
+  <!-- 选择人员列表 -->
+  <ChooseList :data="chooseType" v-model="showDialog" @choosed="choosedList"></ChooseList>
+</template>
+
+<script setup>
+import { ElMessage } from "element-plus";
+import { qcckPost, qcckGet } from "@/api/qcckApi.js";
+import ChooseList from "@/components/ChooseList/index.vue";
+import { reactive, ref, defineEmits } from "vue";
+const isShow = ref(false);
+const formData = ref({});
+const emits=defineEmits(["close","saveFn"])
+const rules = reactive({
+  rwbt: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
+  rwsj: [{ required: true, message: "请选择任务时间", trigger: "change" }],
+  fzrxm: [{ required: true, message: "请选择负责人", trigger: "change" }],
+  mjlist: [{ required: true, message: "请选择民警", trigger: "change" }],
+  fjlist: [{ required: true, message: "请选择辅警", trigger: "change" }],
+});
+const loading = ref(false)
+const showDialog = ref(false);
+const chooseType = reactive({
+  title: '选择列表',
+  type: 'user',//选择类型
+  Single: false,//是否单选
+  roleIds: [],//回显的数据
+});
+const formRef = ref()
+// 点击选择数据
+function handleClick(type, title, val) {
+  chooseType.type = type;
+  chooseType.title = title;
+  chooseType.roleIds = [];
+  chooseType.Single = type == 'fzr' ? true : false;
+  if (!formData.value[val]) formData.value[val] = [];
+  chooseType.roleIds = formData.value[val].map(item => item.id);
+  showDialog.value = true;
+}
+
+// 选择数据
+function choosedList(data) {
+  switch (chooseType.type) {
+    case 'fzr':
+      formData.value.fzrxm = data[0].xm;
+      formData.value.fzrlxfs = data[0].lxdh;
+      formData.value.fzrsfzh = data[0].sfzh;
+      break;
+    case 'mj':
+      formData.value.mjlist = data;
+      break;
+    case 'fj':
+      formData.value.fjlist = data;
+      break;
+    case 'ba':
+      formData.value.baryList = data;
+      break;
+    case 'wgy':
+      console.log(data,'data');
+      formData.value.wgyjson = data?.map((el)=>{
+        return {xm:el.username,...el}
+      });
+      break;
+    case 'qfqz':
+      formData.value.qfqzjson = data;
+      break;
+  }
+}
+// 删除数据
+function removeTag(item, type) {
+  formData.value[type] = formData.value[type].filter((i) => i.id !== item.id);
+}
+
+// 关闭弹窗
+function handleClose() {
+  isShow.value = false;
+  formData.value = {};
+  formRef.value.resetFields();
+  emits("close")
+}
+
+function handleChangeTime(val) {
+  formData.value.rwkssj = val ? val[0] : '';
+  formData.value.rwjssj = val ? val[1] : '';
+}
+
+// 提交
+function onComfirm() {
+  formRef.value.validate((valid) => {
+    if (!valid) return;
+    let params = { ...formData.value }
+    params.basl = params.baryList ? params.baryList.length : 0;
+    params.baxm = params.baryList ? params.baryList.map(item => item.xm).join(',') : '';
+    params.jlryList = [...params.mjlist, ...params.fjlist];
+    params.mjsl = params.mjlist ? params.mjlist.length : 0;
+    params.fjsl = params.fjlist ? params.fjlist.length : 0;
+    params.mjxm = params.mjlist ? params.mjlist.map(item => item.xm).join(',') : '';
+    params.fjxm = params.fjlist ? params.fjlist.map(item => item.xm).join(',') : '';
+    params.wgyxm = params.wgyjson ? params.wgyjson.map(item => item.xm).join(',') : '';
+    params.wgyjson = params.wgyjson ? JSON.stringify(params.wgyjson) : '';
+    params.qfqz = params.qfqzjson ? params.qfqzjson.map(item => item.xm).join(',') : '';
+    params.qfqzjson = params.qfqzjson ? JSON.stringify(params.qfqzjson) : '';
+    emits("saveFn",params);
+  });
+}
+
+const init = (row) => {
+  formData.value.xlid = row.id;
+  formData.value.xlmc = row.bxxMc;
+  isShow.value = true;
+}
+
+defineExpose({ init })
+
+</script>
+
+<style lang="scss" scoped>
+.tagBox {
+  width: 100%;
+  min-height: 24px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 2px 5px;
+  box-sizing: border-box;
+
+  .txet {
+    color: #999;
+    font-size: 14px;
+  }
+}
+</style>
+
+<style lang="scss">
+.patrol-line-dialog {
+  .el-date-editor .el-range-separator {
+    color: #333 !important;
+  }
+}
+</style>

src/views/homeMy/modelDialog/xssbInfo.vue

@@ -0,0 +1,186 @@
+<template>
+  <el-dialog top="0px" width="100%" v-model="props.visibleDialog" destroy-on-close :show-close="false"
+    :close-on-click-modal="false" custom-class="zdy-dialog">
+    <template #title>
+      <div class="my-header">
+        <div class="left">
+          <span>线索上报</span>
+          <Search :searchArr="searchArr" @submit="onSearch"></Search>
+        </div>
+        <el-icon color="#23c3f3" @click="closeDialog">
+          <Close />
+        </el-icon>
+      </div>
+    </template>
+    <div class="contant-dialog">
+      <DarkTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :key="pageData.keyCount"
+        :tableHeight="pageData.tableHeight" :tableConfiger="pageData.tableConfiger" />
+      <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
+        ...pageData.pageConfiger,
+        total: pageData.total
+      }" />
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
+import Search from "@/components/aboutTable/Search.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import DarkTable from "@/components/aboutTable/DarkTable.vue";
+import { ref, defineProps, defineEmits, reactive, onMounted } from 'vue'
+const emits = defineEmits(["update:modelValue", 'closeDialog']);
+const props = defineProps({
+  visibleDialog: Boolean
+})
+const searchArr = reactive([
+  {
+    showType: "input",
+    prop: "xm",
+    label: '上报人'
+  },
+  {
+    showType: "input",
+    prop: "lxdh",
+    label: '联系电话'
+  },
+  {
+    showType: "department",
+    prop: "ssbmdm",
+    label: '所属部门'
+  },
+]);
+const listQuery = ref({}) //搜索
+
+const pageData = reactive({
+  tableData: [], //表格数据
+  tableConfiger: {
+    loading: false,
+    rowHieght: 61,
+    showSelectType: 'null',
+    haveControls: false,
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 30,
+    pageNum: 1
+  }, //分页
+  tableHeight: 840,
+  tableColumn: [
+    { label: "上报人", prop: "xm" },
+    { label: "联系电话", prop: "lxdh" },
+    { label: "类型名称", prop: "lxmc" },
+    { label: "上报地址", prop: "sbdz" },
+    { label: "内容", prop: "nr" },
+    { label: "所属部门", prop: "ssbm" },
+  ]
+});
+onMounted(() => {
+  getDataList()
+})
+
+// 搜索
+function onSearch(val) {
+  listQuery.value = { ...val }
+  getDataList()
+}
+
+// 获取数据
+const getDataList = () => {
+  let pramas = {
+    pageSize: pageData.pageConfiger.pageSize,
+    pageCurrent: pageData.pageConfiger.pageNum,
+    ...listQuery.value
+  }
+  pageData.tableConfiger.loading = true
+  qcckPost(pramas, '/mosty-jmxf/tbJcglXfCyry/getPageXssb').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;
+  getDataList()
+}
+const changeSize = (val) => {
+  pageData.pageConfiger.pageSize = val;
+  getDataList()
+}
+
+
+// 關閉
+function closeDialog(params) {
+  emits('update:modelValue', false)
+  emits('closeDialog', false)
+}
+</script>
+
+<style lang="scss" scoped>
+.my-header {
+  background: url('~@/assets/images/add-title.png') no-repeat center center;
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: space-between;
+  height: 80px;
+  align-items: center;
+  padding: 0 10px 0 20px;
+  box-sizing: border-box;
+  font-size: 30px;
+
+  .left {
+    display: flex;
+    align-items: center;
+
+    span {
+      font-family: "HANYILINGXINTIJIAN";
+    }
+  }
+}
+
+.contant-dialog {
+  height: calc(100vh - 80px);
+  overflow: hidden;
+  padding: 10px 20px;
+  box-sizing: border-box;
+
+}
+
+::v-deep .el-input__inner {
+  background-color: transparent;
+  border: 1px solid #68d0ff;
+  color: #fff;
+}
+
+::v-deep .el-date-editor .el-range-input {
+  background-color: transparent;
+  color: #fff;
+}
+
+::v-deep .el-date-editor .el-range-separator {
+  color: #e9e9e9;
+}
+</style>
+
+<style>
+.zdy-dialog .el-dialog__body {
+  padding: 0 !important;
+  ;
+}
+
+.zdy-dialog .el-dialog__header {
+  padding: 0 !important;
+}
+
+.zdy-dialog {
+  margin: 0 !important;
+}
+
+.searchBox::after {
+  content: none;
+}
+
+.searchBox::before {
+  content: none;
+}
+</style>

src/views/homeMy/modelDialog/yjsjDialog.vue

@@ -0,0 +1,108 @@
+<template>
+    <el-dialog top="120px" width="45%" v-model="props.isShow" destroy-on-close :show-close="false" :close-on-click-modal="false" custom-class="zdy-yjsj-dialog">
+        <template #title>
+        <div class="my-header">
+            <div class="left">
+                <span>意见收集</span>
+            </div>
+            <el-icon color="#23c3f3" @click="closeDialog"><Close/></el-icon>
+        </div>
+        </template>
+        <div class="contant-dialog">
+            <el-form :model="listQuery" >
+                <el-form-item label="意见类型">
+                    <el-input v-model="listQuery.yjlx" placeholder="请输入意见类型" clearable />
+                </el-form-item>
+                <el-form-item label="系统来源">
+                    <el-input v-model="listQuery.xtly" placeholder="请输入系统来源" clearable />
+                </el-form-item>
+                <el-form-item label="意见名称">
+                    <el-input v-model="listQuery.yjmc" placeholder="请输入意见名称" clearable />
+                </el-form-item>
+                <el-form-item label="意见描述">
+                    <el-input v-model="listQuery.yjms" placeholder="请输入意见名称" clearable />
+                </el-form-item>
+                <el-form-item label="文件上传">
+                    <el-input v-model="listQuery.wjsc" placeholder="请输入意见名称" clearable />
+                </el-form-item>
+            </el-form>
+            <div style="text-align:center">
+                <el-button @click="closeDialog">取消 </el-button>
+                <el-button @click="closeDialog"> 保存 </el-button>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<script setup>
+import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
+import { ref ,defineProps,defineEmits,reactive, onMounted} from 'vue'
+const emits = defineEmits(["update:modelValue",'closeDialog']);
+const props = defineProps({
+    isShow:Boolean
+})
+const listQuery = ref({})
+onMounted(()=>{
+})
+
+// 關閉
+function closeDialog(params) {
+    emits('update:modelValue',false)
+    emits('closeDialog',false)
+}
+</script>
+
+<style lang="scss" scoped>
+.my-header{
+    background: url('~@/assets/images/add-title.png') no-repeat center center;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: space-between;
+    height: 80px;
+    align-items: center;
+    padding: 0 10px 0 20px;
+    box-sizing: border-box;
+    font-size: 30px;
+    .left{
+        display: flex;
+        align-items: center;
+        span{
+            font-family: "HANYILINGXINTIJIAN";
+        }
+    }
+}
+.contant-dialog{
+    padding: 10px 20px;
+    box-sizing: border-box;
+}
+.el-form{
+    max-height:60vh;
+    overflow: hidden;
+}
+::v-deep .el-input__inner{
+  background-color:transparent;
+  border:1px solid #68d0ff;
+  color: #fff;
+}
+::v-deep .el-date-editor .el-range-input{
+  background-color:transparent;
+  color:#fff;
+}
+::v-deep .el-date-editor .el-range-separator{
+  color:#e9e9e9;
+}
+
+::v-deep .el-form-item__label{
+    color: #fff;
+}
+</style>
+
+<style>
+.zdy-yjsj-dialog .el-dialog__body{
+    padding: 0 !important;;
+}
+.zdy-yjsj-dialog .el-dialog__header{
+    padding: 0 !important;
+}
+
+</style>

src/views/homeMy/modelDialog/zdlxDialog.vue

@@ -0,0 +1,222 @@
+<template>
+    <el-dialog top="120px" width="1200px" custom-class="zdlx_dialog" v-model="props.isShow" destroy-on-close
+        :show-close="false" :close-on-click-modal="false">
+        <template #title>
+            <div class="my-header">
+                <div class="left">
+                    <span>制定路线</span>
+                </div>
+                <el-icon color="#23c3f3" @click="closeDialog">
+                    <Close />
+                </el-icon>
+            </div>
+        </template>
+        <div class="contant-dialog">
+            <el-steps style="max-width: 600px" :active="stepActive" finish-status="success">
+                <el-step title="步骤1" />
+                <el-step title="步骤2" />
+                <el-step title="步骤3" />
+            </el-steps>
+            <div v-if="stepActive == 0">
+                <el-input v-model="listQuery.zb" placeholder="请选择巡逻路线">
+                    <template #append><el-button type="primary" @click="chackLat('line', 'zdlx')">开始绘制</el-button></template>
+                </el-input>
+                <div class="mapBox relative mb10">
+                    <GdMap v-if="mapShow" mapid="mapSmall"></GdMap>
+                </div>
+            </div>
+            <div v-else-if="stepActive == 1">
+                <el-button type="primary" style="margin-bottom: 10px;" @click="addEditPoint('add')">新增</el-button>
+                <div>
+                    <MyTable :tableData="listQuery.bxds" :tableColumn="pageData.tableColumn"
+                        :tableHeight="pageData.tableHeight" :key="pageData.keyCount"
+                        :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
+                        <template #ewm="{ row }">
+                            <el-image :src="`${baseUrl}${row.ewm}`" preview-teleported>
+                            </el-image>
+                        </template>
+                        <template #bxdLx="{ row }">
+                            <DictTag :value="row.bxdLx" :tag="false" :options="D_BZ_BXDLX" />
+                        </template>
+                        <template #controls="{ row }">
+                            <el-link type="primary" @click="addEditPoint('edit', row)">编辑</el-link>
+                            <el-link type="danger" @click="deleteRow(row)">删除</el-link>
+                        </template>
+                    </MyTable>
+                </div>
+            </div>
+            <XfrwDialog v-else-if="stepActive == 2" @close="closeDialog" @saveFn="getXfrwInfo" />
+            <div style="text-align:center;margin-top: 10px;" v-if="stepActive == 0 || stepActive == 1">
+                <el-button @click="closeDialog">取消 </el-button>
+                <el-button @click="saveFn"> 下一步 </el-button>
+            </div>
+        </div>
+    </el-dialog>
+    <AddPoints ref="addPoint" @changeDxd="changeDxd" :dic="{ D_BZ_BXDLX }" />
+</template>
+
+<script setup>
+import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
+import { ref, defineProps, defineEmits, reactive, onMounted, getCurrentInstance, nextTick, onUnmounted } from 'vue'
+import GdMap from "@/components/GdMap/index.vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import AddPoints from "./addPoints.vue";
+import XfrwDialog from "./xfrwDialog.vue";
+import emitter from "@/utils/eventBus.js";
+const { proxy } = getCurrentInstance();
+const { D_BZ_BXDLX } = proxy.$dict("D_BZ_BXDLX");
+const emits = defineEmits(["update:modelValue", 'closeDialog']);
+const props = defineProps({
+    isShow: Boolean
+})
+const addPoint = ref();
+const stepActive = ref(0)
+const listQuery = ref({
+    bxds: []
+})
+const pageData = reactive({
+    keyCount: 0,
+    tableConfiger: {
+        rowHieght: 61,
+        showSelectType: "null",
+    },
+    tableHeight: 400,
+    controlsWidth: 200,
+    tableColumn: [
+        { label: "巡逻点位名称", prop: "bxdMc" },
+        { label: "经度", prop: "jd" },
+        { label: "纬度", prop: "wd" },
+        { label: "二维码", prop: "ewm", showSolt: true },
+        { label: "巡逻点位类型", prop: "bxdLx", showSolt: true },
+    ]
+});
+const mapShow = ref(false)
+// 關閉
+function closeDialog(params) {
+    emits('update:modelValue', false)
+    emits('closeDialog', false)
+}
+onMounted(() => {
+    setTimeout(() => {
+        mapShow.value = true
+    }, 100);
+    emitter.on("coordString", (res => {
+        console.log(res, 'res');
+        if (res?.flag == 'zdlx') listQuery.value.zb = res.coord;
+    }))
+})
+// 详情
+const addEditPoint = (type, row) => {
+    if (!listQuery.value.zb) return proxy.$message.warning("请先选择巡逻路线");
+    nextTick(() => {
+        addPoint.value.init(type, row, listQuery.value.zb);
+    });
+};
+// 删除
+const deleteRow = (row) => {
+    listQuery.value.bxds.splice(row, 1);
+    emitter.emit("deletePointArea", 'lxdw');
+    emitter.emit("removePlot", 'lxdw');
+};
+// 选择经纬度
+const chooseJwd = (row) => {
+    changeItem.value = row;
+    emitter.emit("deletePointArea", 'bxd' + row.id);
+    emitter.emit("removePlot", 'point' + row.id);
+    emitter.emit("drawShape", { type: 'point', flag: 'point' + row.id });
+};
+// 选择巡逻路线
+const chackLat = (type, flag) => {
+    emitter.emit("removeAll");
+    emitter.emit("removePlot", flag);
+    listQuery.value.zb = [];
+    emitter.emit("drawShape", { type, flag, isclear: true })
+}
+// 保存
+const saveFn = () => {
+    switch (stepActive.value) {
+        case 0:
+            if (!listQuery.value.zb) proxy.$message.warning("请先规划路线");
+            else stepActive.value++
+            break
+        case 1:
+            if (!listQuery.value.bxds || listQuery.value.bxds.length == 0) proxy.$message.warning("请先新增巡逻点位");
+            else stepActive.value++
+            break
+    }
+}
+// 提交数据
+const getXfrwInfo=(val)=>{
+    let params={...val,...listQuery.value}
+    qcckPost(params,"/mosty-jmxf/jbldBxx/addBxxBxd").then(res=>{
+        proxy.$message.success("新增成功");
+        closeDialog()
+    })
+}
+// 新增或者编辑比巡店
+const changeDxd = (val) => {
+    if (val.type == 'add') {
+        listQuery.value.bxds.push(val.data);
+    } else {
+        let index = listQuery.value.bxds.findIndex(item => item.id == val.data.id);
+        listQuery.value.bxds.splice(index, 1, val.data);
+    }
+    listQuery.bxdsl = listQuery.value.bxds.length;
+    pageData.keyCount++;
+};
+onUnmounted(() => {
+    emitter.off("coordString");
+});
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+
+.my-header {
+    background: url("~@/assets/images/add-title.png") no-repeat center center;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: space-between;
+    height: 60px;
+    align-items: center;
+    padding: 0 10px 0 20px;
+    box-sizing: border-box;
+    font-size: 30px;
+
+    .left {
+        display: flex;
+        align-items: center;
+
+        span {
+            font-family: "HANYILINGXINTIJIAN";
+        }
+    }
+}
+
+.contant-dialog {
+    padding: 10px 20px;
+    box-sizing: border-box;
+}
+
+.el-form {
+    max-height: 60vh;
+    overflow: hidden;
+}
+
+::v-deep.el-input__inner {
+    color: #000;
+}
+
+.mapBox {
+    width: 100%;
+    height: 400px;
+    overflow: hidden;
+}
+</style>
+<style lang="scss">
+.zdlx_dialog {
+    .el-dialog__header {
+        padding: 0;
+    }
+}
+</style>