2025年04月02日18:40:16

components.d.ts

@@ -7,8 +7,12 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    2: typeof import('./src/components/alarm copy 2.vue')['default']
+    Alarm: typeof import('./src/components/alarm.vue')['default']
     BatchImp: typeof import('./src/components/batch-imp.vue')['default']
+    copy: typeof import('./src/components/alarm copy.vue')['default']
     Countup: typeof import('./src/components/countup.vue')['default']
+    DeviceInfo: typeof import('./src/components/deviceInfo.vue')['default']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
@@ -46,6 +50,7 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Sidebar: typeof import('./src/components/sidebar.vue')['default']
+    StudentInfo: typeof import('./src/components/studentInfo.vue')['default']
     TableCustom: typeof import('./src/components/table-custom.vue')['default']
     TableDetail: typeof import('./src/components/table-detail.vue')['default']
     TableEdit: typeof import('./src/components/table-edit.vue')['default']

src/assets/css/main.css

@@ -80,6 +80,18 @@ i {
   padding-bottom: 0;
 }
 
+.el-dialog__body {
+  overflow: hidden;
+}
+
+.el-dialog__body img {
+  width: 100%;
+}
+
+.el-icon--close-tip {
+  display: none !important;
+}
+
 [hidden] {
   display: none !important;
 }

src/components/alarm.vue

@@ -0,0 +1,246 @@
+<template>
+  <teleport to="body">
+    <transition name="emergency-modal">
+      <div class="modal-mask" @click.self="$emit('close')">
+        <div class="emergency-modal" :class="{ 'emergency-pulse': show }">
+          <div class="glow"></div>
+          <div class="modal-header">
+            <div class="warning-icon">⚠️</div>
+            <h2>{{ title }}</h2>
+          </div>
+
+          <div class="modal-content">
+            <p>{{ content }}</p>
+          </div>
+
+          <button class="emergency-button" @click="handleAudioEnd">
+            <span class="button-text">立即处理</span>
+            <div class="button-glow"></div>
+          </button>
+
+          <!-- <audio ref="audioPlayer" autoplay loop>
+            <source src="../assets/audio/alarm.mp3" type="video/mp3" />
+          </audio> -->
+        </div>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+const audioPlayer = ref(null);
+
+defineProps({
+  show: Boolean,
+  title: {
+    type: String,
+    default: "紧急警报！",
+  },
+  content: {
+    type: String,
+    default: "检测到危险操作，请立即处理！",
+  },
+});
+
+defineEmits(["close", "confirm"]);
+
+const handleAudioEnd = () => {
+  if (audioPlayer.value) {
+    audioPlayer.value.play().catch((error) => {
+      console.error("自动播放被阻止:", error);
+    });
+  }
+};
+
+onMounted(() => {
+  // 确保在DOM完全加载后播放音频
+  // if (audioPlayer.value) {
+  //   setTimeout(() => {
+  //     audioPlayer.value.play();
+  //   });
+  //   audioPlayer.value.play();
+  //   // 设置音频静音，浏览器允许自动播放
+  //   audioPlayer.value
+  //     .play()
+  //     .then(() => {
+  //       // 自动播放成功后取消静音
+  //       audioPlayer.value.muted = false;
+  //     })
+  //     .catch((error) => {
+  //       console.log("自动播放失败", error);
+  //     });
+  // }
+});
+</script>
+
+<style scoped>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.emergency-modal {
+  position: relative;
+  width: 300px;
+  padding: 2rem;
+  background: #2a0a0a;
+  border-radius: 12px;
+  border: 2px solid #ff4444;
+  box-shadow: 0 0 40px rgba(255, 68, 68, 0.3);
+  transform-origin: center;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.glow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle at 50% 50%, rgba(255, 68, 68, 0.3) 0%, rgba(255, 68, 68, 0) 70%);
+  animation: glow-pulse 2s infinite;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.warning-icon {
+  font-size: 3rem;
+  margin-right: 1rem;
+  animation: shake 0.8s ease infinite;
+}
+
+h2 {
+  color: #ff4444;
+  font-size: 1.8rem;
+  margin: 0;
+}
+
+.modal-content {
+  color: #ffaaaa;
+  margin-bottom: 2rem;
+  line-height: 1.5;
+}
+
+.emergency-button {
+  position: relative;
+  padding: 1rem 2rem;
+  background: linear-gradient(45deg, #ff4444, #ff0000);
+  border: none;
+  border-radius: 8px;
+  color: white;
+  font-weight: bold;
+  cursor: pointer;
+  overflow: hidden;
+  transition: transform 0.2s;
+}
+
+.button-glow {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 200%;
+  height: 100%;
+  background: linear-gradient(45deg, transparent 25%, rgba(255, 255, 255, 0.2) 50%, transparent 75%);
+  animation: slide 1.5s infinite;
+}
+
+.emergency-button:hover {
+  transform: scale(1.05);
+}
+
+.emergency-button:active {
+  transform: scale(0.95);
+}
+
+/* 动画效果 */
+@keyframes emergency-pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes shake {
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  50% {
+    transform: translateX(5px);
+  }
+  75% {
+    transform: translateX(-3px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes glow-pulse {
+  0% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.6;
+  }
+}
+
+@keyframes slide {
+  to {
+    left: 100%;
+  }
+}
+
+.emergency-modal-enter-active {
+  animation: emergency-modal-in 0.3s;
+}
+
+.emergency-modal-leave-active {
+  animation: emergency-modal-in 0.3s reverse;
+}
+
+@keyframes emergency-modal-in {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  60% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.emergency-pulse {
+  animation: emergency-pulse 1.5s infinite;
+}
+</style>

src/components/deviceInfo.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="infoBox">
+    <div class="infoBox-head">
+      <div class="item">
+        <div class="span">姓名：</div>
+        <div class="span">{{ value.username }}</div>
+      </div>
+      <div class="item">
+        <i class="el-icon-close" style="font-size: 24px; cursor: pointer" @click="$emit('close')" />
+      </div>
+    </div>
+    <div class="infoBox-content">
+      2
+      <div class="item">
+        <div class="item-left">IMEI号</div>
+        <div class="item-right">{{ value.deviceId }}</div>
+      </div>
+      <div class="item">
+        <div class="item-left">定位方式</div>
+        <div class="item-right">{{ locateEnum[value.locateType == -1 ? 3 : value.locateType] }}</div>
+      </div>
+      <div class="item">
+        <div class="item-left">定位时间</div>
+        <div class="item-right">{{ value.locateTime }}</div>
+      </div>
+      <div class="item">
+        <div class="item-left">位置</div>
+        <div class="item-right">{{ value.address }}</div>
+      </div>
+    </div>
+    <div class="triangle"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  value: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+enum locateEnum {
+  "WIFI" = 0,
+  "LBS",
+  "GPS",
+  "未知",
+}
+</script>
+
+<style lang="scss" scoped>
+.infoBox {
+  width: 400px;
+  background: #fff;
+  margin: 10px;
+  padding: 10px;
+  border-radius: 8px;
+  position: relative;
+
+  .triangle {
+    width: 0;
+    height: 0;
+    border-top: 20px solid #fff;
+    border-left: 15px solid transparent;
+    border-right: 15px solid transparent;
+    position: absolute;
+    bottom: -15px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .infoBox-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #eef1f3;
+    padding-bottom: 10px;
+
+    .item {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      color: #333;
+      font-weight: 400;
+
+      .span {
+        flex-shrink: 0;
+        font-weight: 700;
+      }
+
+      .battery {
+        width: 34px;
+        height: 16px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        margin-right: 10px;
+
+        .battery-left {
+          height: 100%;
+          flex: 1;
+          border-radius: 1px;
+          display: flex;
+          align-items: center;
+          padding: 1px;
+          font-size: 10px;
+          border-style: solid;
+          border-width: 2px;
+        }
+
+        .battery-right {
+          border-width: 2px;
+          border-style: solid;
+          height: 50%;
+          background: red;
+        }
+      }
+    }
+  }
+
+  .infoBox-content {
+    border-bottom: 1px solid #eef1f3;
+    padding-bottom: 10px;
+
+    .item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 10px;
+      font-size: 14px;
+      font-weight: 500;
+      color: #333;
+
+      .item-left {
+        flex-shrink: 0;
+        margin-right: 50px;
+      }
+
+      .item-right {
+        flex: 1;
+        text-align: right;
+      }
+    }
+  }
+
+  .infoBox-foot {
+    display: flex;
+    justify-content: space-around;
+
+    .item {
+      margin-top: 10px;
+      font-size: 12px;
+      font-weight: 300;
+      color: #0091ff;
+      cursor: pointer;
+      text-align: center;
+
+      i {
+        font-size: 18px;
+        margin-bottom: 5px;
+      }
+    }
+  }
+}
+</style>

src/components/table-edit.vue

@@ -46,11 +46,10 @@
         </el-form-item>
       </el-col>
     </el-row>
-
+    <div class="btns">
-    <el-form-item>
+      <el-button @click="emit('close')">取 消</el-button>
-      <!-- <el-button @click="emit('cancel')">取 消</el-button> -->
       <el-button type="primary" @click="saveEdit(formRef)">保 存</el-button>
-    </el-form-item>
+    </div>
   </el-form>
 </template>
 
@@ -78,7 +77,7 @@ const { options, formData, edit, update } = defineProps({
   },
 });
 
-const emit = defineEmits(["cancel"]);
+const emit = defineEmits(["close"]);
 
 const form = ref({ ...(edit ? formData : {}) });
 
@@ -126,4 +125,8 @@ const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile) =>
   height: 178px;
   text-align: center;
 }
+.btns {
+  display: flex;
+  justify-content: flex-end;
+}
 </style>

src/utils/mapCustom.js

@@ -32,6 +32,47 @@ export class MapCustom {
       });
     });
   }
+
+  track(list) {
+    let markerList = []
+    let lineArr = list.map((item) => [item.lng, item.lat])
+
+    const newIcon = this.map.icon({
+      size: new AMap.Size(50, 50),
+      image: require('../../../assets/location.png'), // Icon的图像
+      imageSize: new AMap.Size(50, 50)
+    })
+
+    list.forEach((item, index) => {
+      let marker = this.map.marker({
+        position: this.map.lngLat(item.lng, item.lat),
+        icon: newIcon, // 添加 Icon 图标 URL
+        offset: new AMap.Pixel(-25, -50)
+      })
+
+      marker.setMap(this.map)
+      markerList.push(marker)
+      marker.on('click', () => {
+        this.studentInfo = item
+        this.InfoWindow = this.map.infoWindow({
+          anchor: 'bottom-center',
+          isCustom: true, //使用自定义窗体
+          content: document.querySelector('.infoBox'),
+          offset: new AMap.Pixel(0, -90)
+        })
+        this.InfoWindow.open(this.map, marker.getPosition())
+      })
+    })
+    this.map.polyline({
+      map: this.map,
+      path: lineArr,
+      showDir: true,
+      strokeColor: '#28F', //线颜色
+      strokeWeight: 6 //线宽
+    })
+
+  }
+
   clearMap() {
     this.map.clearMap();
   }

src/views/incidentDispose/index.vue

@@ -31,11 +31,11 @@
       <el-col :span="7">
         <div class="info scrollbar">
           <div class="info-text">设备序号：05</div>
-          <div class="info-text">设备SN号：860116079430636</div>
+          <div class="info-text">IMEI号：860116079430636</div>
           <div class="info-text">告警时间：2025/03/26 18:33:32</div>
-          <div class="info-text">告警类型：体表温度过低</div>
+          <div class="info-text">告警类型：<span style="color: red">体表温度过低</span></div>
-          <div class="info-text">绑定关联人名称：管理员</div>
+          <div class="info-text">绑定关联人名称：张三</div>
-          <div class="info-text">绑定关联人警号：欧尼蒋</div>
+          <div class="info-text">绑定关联人警号：123456</div>
           <div class="info-text">现在状态：禁用</div>
           <div class="info-text">紧急电话：10000000000</div>
           <div class="info-text">隶属辖区：87</div>

src/views/monitoringCenter/deviceInfo.vue

@@ -10,7 +10,7 @@
       </el-select>
     </div>
     <div class="device-list noScrollbar">
-      <el-popover class="box-item" title="Title" content="Top Left prompts info" placement="bottom" v-for="item in 4" :key="item">
+      <el-popover :width="400" class="box-item" placement="bottom" v-for="item in 4" :key="item">
         <template #reference>
           <div class="item">
             <div class="item-img">
@@ -31,6 +31,34 @@
             </div>
           </div>
         </template>
+        <template #default>
+          <div class="demo-rich-conent">
+            <div>
+              <span class="lable">手铐关联人：</span>
+              张三
+            </div>
+            <div>
+              <span class="lable">类型：</span>
+              警察
+            </div>
+            <div>
+              <span class="lable">警号：</span>
+              123456
+            </div>
+            <div>
+              <span class="lable">联系电话：</span>
+              13007777555
+            </div>
+            <div>
+              <span class="lable">佩戴者编号：</span>
+              BJ-0112
+            </div>
+            <div>
+              <span class="lable">阈值：</span>
+              12
+            </div>
+          </div>
+        </template>
       </el-popover>
     </div>
   </div>
@@ -131,4 +159,13 @@
     }
   }
 }
+.demo-rich-conent {
+  display: flex;
+  flex-direction: column;
+  .lable {
+    display: inline-block;
+    width: 90px;
+    text-align: right;
+  }
+}
 </style>

src/views/statisticalCenter/emergencyList.vue

@@ -3,7 +3,7 @@
     <div class="card-head">
       <div class="title">内容数据</div>
       <div class="condition">
-        <el-input style="width: 240px" placeholder="搜索设备SN号" :suffix-icon="Search" />
+        <el-input style="width: 240px" placeholder="搜索设备IMEI号" :suffix-icon="Search" />
       </div>
     </div>
     <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :refresh="getData" :currentPage="page.index" :changePage="changePage">

src/views/synthesizeManage/areaManage/index.vue

@@ -37,6 +37,7 @@ import TableSearch from "@/components/table-search.vue";
 import AddFence from "./addFence.vue";
 import { TableItem } from "@/types/table";
 import { FormOptionList } from "@/types/form-option";
+import Alarm from "@/components/alarm.vue";
 
 // 查询相关
 const query = reactive({

src/views/synthesizeManage/deviceManage/index.vue

@@ -4,32 +4,79 @@
     <div class="table-container">
       <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :refresh="getData" :currentPage="page.index" :changePage="changePage">
         <template #toolbarBtn>
-          <el-button type="primary" @click="handleAdd">新增</el-button>
+          <!-- <el-button type="primary" @click="handleAdd">新增</el-button> -->
-          <el-button @click="visible = true">手铐关联</el-button>
+          <el-button @click="handleEdit">手铐关联</el-button>
-          <el-button>地图位置</el-button>
+          <!-- <el-button>地图位置</el-button> -->
-          <el-button>导出</el-button>
+          <!-- <el-button>导出</el-button> -->
-          <el-button type="danger">删除</el-button>
         </template>
         <template #money="{ rows }"> ￥{{ rows.money }} </template>
         <template #thumb="{ rows }">
           <el-image class="table-td-thumb" :src="rows.thumb" :z-index="10" :preview-src-list="[rows.thumb]" preview-teleported> </el-image>
         </template>
         <template #state="{ rows }">
-          <el-tag :type="rows.state ? 'success' : 'danger'">
+          <el-switch />
-            {{ rows.state ? "正常" : "异常" }}
-          </el-tag>
         </template>
         <template #operator="{ rows }">
           <el-button link type="primary" size="small" @click="router.push('deviceInfo')"> 详细信息 </el-button>
           <el-button link type="primary" size="small" @click="router.push('mapLocation')"> 地图位置 </el-button>
           <el-button link type="primary" size="small" @click="router.push('setting')"> 专项配置 </el-button>
+          <el-button link type="primary" size="small" @click="visible1 = true"> 设备控制 </el-button>
           <el-button link type="primary" size="small" @click="handleEdit(rows)"> 修改 </el-button>
-          <el-button link type="danger" size="small" @click="handelDel(rows)"> 删除 </el-button>
+          <!-- <el-button link type="danger" size="small" @click="handelDel(rows)"> 删除 </el-button> -->
         </template>
       </TableCustom>
     </div>
     <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close :close-on-click-modal="false" @close="closeDialog">
-      <TableEdit :form-data="rowData" :options="TableEditOptions" :edit="isEdit" :update="updateData" />
+      <TableEdit :form-data="rowData" :options="TableEditOptions" :edit="isEdit" :update="updateData" @close="closeDialog" />
+    </el-dialog>
+    <el-dialog title="设备控制" v-model="visible1" width="700px" destroy-on-close :close-on-click-modal="false" @close="closeDialog">
+      <!-- <TableEdit :form-data="rowData" :options="controlOptions" :update="updateData" /> -->
+      <el-form label-width="auto">
+        <el-row :gutter="20" style="margin-top: 20px">
+          <el-col :span="8">
+            <el-form-item label="关机：">
+              <el-button type="primary" @click="handelControl(1)">关机</el-button>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="重启：">
+              <el-button type="primary" @click="handelControl(2)">重启</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20" style="margin-top: 20px">
+          <el-col :span="8">
+            <el-form-item label="获取实时定位：">
+              <el-button type="primary" @click="handelControl(2)">获取实时定位</el-button>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="恢复出厂：">
+              <el-button type="primary" @click="handelControl(3)">恢复出厂</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="模式选择：">
+              <el-select placeholder="请选择模式" v-model="controlForm.pattern" style="width: 240px" @change="handelControl(4)">
+                <el-option label="审讯模式" :value="1" />
+                <el-option label="户外押送" :value="2" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="定位模式：">
+              <el-select placeholder="请选择定位模式" v-model="controlForm.location" style="width: 240px" @change="handelControl(5)">
+                <el-option label="室内" :value="1" />
+                <el-option label="室外" :value="2" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
     </el-dialog>
   </div>
 </template>
@@ -79,6 +126,9 @@ let columns = ref([
   { prop: "money", label: "绑定警察名称" },
   { prop: "thumb", label: "绑定警察账户" },
   { prop: "state", label: "当前状态" },
+  { prop: "state", label: "当前模式" },
+  { prop: "state", label: "电量" },
+  { prop: "state", label: "版本号" },
   { prop: "state", label: "登录时间" },
   { prop: "state", label: "最近使用时间" },
   { prop: "state", label: "关联辖区编号" },
@@ -89,6 +139,11 @@ const page = reactive({
   size: 10,
   total: 200,
 });
+const controlForm = reactive({
+  pattern: "",
+  location: "",
+});
+
 const tableData = ref<TableItem[]>([]);
 const getData = async () => {
   const res = await fetchData();
@@ -101,6 +156,7 @@ const changePage = (val: number) => {
   getData();
 };
 
+const visible1 = ref(false);
 const visible = ref(false);
 const isEdit = ref(false);
 const rowData = ref({});
@@ -111,13 +167,24 @@ const handleAdd = () => {
 };
 
 // 编辑
-const handleEdit = (row: TableItem) => {
+const handleEdit = (row?: TableItem) => {
   // rowData.value = { ...row };
   TableEditOptions.value.list = editOp;
   isEdit.value = true;
   visible.value = true;
 };
-
+const handelControl = (type: number) => {
+  if (type < 4) {
+    ElMessageBox.confirm("确定要关机吗？", "提示", {
+      type: "warning",
+    })
+      .then(async () => {
+        // ElMessage.success("删除成功");
+      })
+      .catch(() => {});
+  }
+  visible1.value = false;
+};
 // 删除
 const handelDel = (row: TableItem) => {
   ElMessageBox.confirm("确定要删除吗？", "提示", {

src/views/synthesizeManage/mapLocation/index.vue

@@ -1,6 +1,48 @@
 <template>
   <div class="container">
-    <el-row :gutter="20">
+    <div class="box">
+      <div class="editTool">
+        <span>时间区间：</span>
+        <el-radio-group v-model="sectionType">
+          <el-radio-button :value="1">小时</el-radio-button>
+          <el-radio-button :value="2">天</el-radio-button>
+          <el-radio-button :value="3">周</el-radio-button>
+        </el-radio-group>
+
+        <div class="editTool-time">
+          <el-date-picker
+            v-if="sectionType != 3"
+            style="width: 300px"
+            type="datetimerange"
+            range-separator="-"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+          />
+          <el-date-picker v-else type="week" value-format="YYYY-MM-DD/ww" placeholder="请选择周" @change="weekChange" />
+        </div>
+        <el-select
+          v-model="value"
+          multiple
+          filterable
+          remote
+          reserve-keyword
+          placeholder="请输入设备IMEI"
+          :remote-method="remoteMethod"
+          :loading="loading"
+          style="width: 240px"
+        >
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+
+        <!-- <span>位置样式：</span>
+        <el-radio-group v-model="styleType">
+          <el-radio-button :value="1">点</el-radio-button>
+          <el-radio-button :value="2">线</el-radio-button>
+        </el-radio-group> -->
+      </div>
+      <div id="mapcontainer" style="flex: 1"></div>
+    </div>
+    <!-- <el-row :gutter="20">
       <el-col :span="6">
         <div class="incidentList">
           <div class="head">
@@ -21,35 +63,9 @@
           </div>
         </div>
       </el-col>
-      <el-col :span="18" class="container-right">
+      <el-col :span="24" class="container-right">
-        <div class="editTool">
-          <span>时间区间：</span>
-          <el-radio-group v-model="sectionType">
-            <el-radio-button :value="1">小时</el-radio-button>
-            <el-radio-button :value="2">天</el-radio-button>
-            <el-radio-button :value="3">周</el-radio-button>
-          </el-radio-group>
-
-          <div class="editTool-time">
-            <el-date-picker
-              v-if="sectionType != 3"
-              style="width: 300px"
-              type="datetimerange"
-              range-separator="-"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-            />
-            <el-date-picker v-else type="week" value-format="YYYY-MM-DD/ww" placeholder="请选择周" @change="weekChange" />
-          </div>
-          <span>位置样式：</span>
-          <el-radio-group v-model="styleType">
-            <el-radio-button :value="1">点</el-radio-button>
-            <el-radio-button :value="2">线</el-radio-button>
-          </el-radio-group>
-        </div>
-        <div id="mapcontainer" style="flex: 1"></div>
       </el-col>
-    </el-row>
+    </el-row> -->
   </div>
 </template>
 
@@ -58,7 +74,10 @@ import handcuffs from "@/assets/img/handcuffs.png";
 import { onMounted } from "vue";
 import { MapCustom } from "@/utils/mapCustom";
 import { ref } from "vue";
-
+interface ListItem {
+  value: string;
+  label: string;
+}
 let tabs = [
   { label: "全部", value: "0" },
   { label: "未处理", value: "1" },
@@ -67,8 +86,26 @@ let tabs = [
 let sectionType = ref(1);
 let styleType = ref(1);
 
+const list = ref<ListItem[]>([]);
+const options = ref<ListItem[]>([]);
+const value = ref<string[]>([]);
+const loading = ref(false);
+
 //处理展示数据
 const weekChange = (value: any) => {};
+const remoteMethod = (query: string) => {
+  if (query) {
+    loading.value = true;
+    setTimeout(() => {
+      loading.value = false;
+      options.value = list.value.filter((item) => {
+        return item.label.toLowerCase().includes(query.toLowerCase());
+      });
+    }, 200);
+  } else {
+    options.value = [];
+  }
+};
 
 onMounted(() => {
   new MapCustom({ dom: "mapcontainer" });
@@ -78,6 +115,24 @@ onMounted(() => {
 <style scoped lang="less">
 .container {
   overflow: hidden;
+  .box {
+    background-color: #ffffff;
+    border: 1px solid #e4e7ed;
+    overflow: hidden;
+    transition: 0.3s;
+    border-radius: 5px;
+    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+  }
+  .el-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
   .el-row {
     height: 100%;
     .el-col {
@@ -156,7 +211,8 @@ onMounted(() => {
 .container-right {
   display: flex;
   flex-direction: column;
-  .editTool {
+}
+.editTool {
   min-width: 761px;
   background: #fff;
   padding: 0 20px;
@@ -165,10 +221,9 @@ onMounted(() => {
   align-items: center;
   font-size: 14px;
   margin-bottom: 20px;
-  }
+}
 
-  .editTool-time {
+.editTool-time {
   margin: 0 10px;
-  }
 }
 </style>

src/views/synthesizeManage/userManage/index.vue

@@ -4,11 +4,11 @@
     <div class="table-container">
       <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :refresh="getData" :currentPage="page.index" :changePage="changePage">
         <template #toolbarBtn>
-          <el-button type="primary" @click="visible = true">类型编辑</el-button>
+          <el-button type="primary" @click="typeVisible = true">类型编辑</el-button>
           <el-button type="primary" @click="visible = true">新增用户</el-button>
           <el-button @click="handleImp">批量创建用户</el-button>
-          <el-button @click="visible = true">导出</el-button>
+          <el-button>导出</el-button>
-          <el-button type="danger" @click="visible = true">删除</el-button>
+          <el-button type="danger">删除</el-button>
         </template>
         <template #money="{ rows }"> ￥{{ rows.money }} </template>
         <template #thumb="{ rows }">
@@ -27,10 +27,10 @@
       </TableCustom>
     </div>
     <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close :close-on-click-modal="false" @close="closeDialog">
-      <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData" @cancel="closeDialog" />
+      <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData" @close="closeDialog" />
     </el-dialog>
     <el-dialog title="重置密码" v-model="pwdVisible" width="700px" destroy-on-close :close-on-click-modal="false" @close="closeDialog">
-      <TableEdit :form-data="rowData" :options="pwdOptions" :edit="true" :update="updateData" @cancel="handelCancel" />
+      <TableEdit :form-data="rowData" :options="pwdOptions" :edit="true" :update="updateData" @close="handelCancel" />
     </el-dialog>
     <el-dialog title="编辑类型" v-model="typeVisible" width="800px" destroy-on-close :close-on-click-modal="false" @close="closeDialog">
       <UserType />