2025年05月06日18:33:50

src/views/monitoringCenter/deviceLocationMap.vue

@@ -49,9 +49,9 @@ const getLocateRecord = () => {
     startDate: `${format(d, "YYYY-MM-DD")} 00:00:00`,
     endDate: `${format(d, "YYYY-MM-DD")} 23:59:59`,
   }).then((res) => {
+    newMap.clearMap();
     if (res && res.length) {
       let list = res;
-      newMap.clearMap();
       newMap.setCenter([list[0].lng, list[0].lat]);
       newMap.polyline(list);
       let startIcon = newMap.newIcon({

src/views/monitoringCenter/deviceModel.vue

@@ -2,18 +2,18 @@
   <div class="device">
     <div class="device-head">
       <div class="title">设备列表</div>
-      <el-select class="select" v-model="mode" @change="props.handelMode">
+      <el-select class="select" v-model="mode" @change="handelMode">
         <el-option label="全部" value="" />
         <el-option label="常规模式" value="0" />
         <el-option label="审讯模式" value="1" />
         <el-option label="户外押送" value="2" />
       </el-select>
     </div>
-    <template v-if="props.list.length">
-      <div v-infinite-scroll="props.load" :infinite-scroll-immediate="false" class="device-list noScrollbar infinite-list" style="overflow: auto">
-        <el-popover :width="350" class="box-item" placement="right" v-for="item in props.list" :key="item.id">
+    <template v-if="deviceData.length">
+      <div v-infinite-scroll="handelLoad" :infinite-scroll-immediate="false" class="device-list noScrollbar infinite-list" style="overflow: auto">
+        <el-popover :width="350" class="box-item" placement="right" v-for="item in deviceData" :key="item.id">
           <template #reference>
-            <div class="item" :class="{ active: props.deviceInfo?.deviceId === item.deviceId }" @click="emit('click', item)">
+            <div class="item" :class="{ active: deviceId === item.deviceId }" @click="handelItem(item)">
               <div class="item-img">
                 <img src="@/assets/img/handcuffs.png" alt="" srcset="" />
               </div>
@@ -74,7 +74,8 @@
 </template>
 <script setup lang="ts">
 import { TDevice } from "@/api/index.d";
-import { ref, watch } from "vue";
+import { ref, watch, reactive, onMounted } from "vue";
+import { deviceList } from "@/api/index";
 
 const statusColor = ["danger", "success", "warning"];
 const modeColor = ["primary", "danger", "warning"];
@@ -91,35 +92,47 @@ enum modeEnum {
 const emit = defineEmits(["click"]);
 const mode = ref("");
 
-const props = defineProps({
-  list: {
-    type: Array<TDevice.IListRes>,
-    default: () => [],
-  },
-  handelMode: {
-    type: Function,
-    default: () => {},
-  },
-  load: {
-    type: Function,
-    default: () => {},
-  },
-  paging: {
-    type: Object,
-    default: () => {},
-  },
-  deviceInfo: {
-    type: Object,
-    default: undefined,
-  },
+const devicePaging = reactive({
+  page: 1,
+  size: 10,
+  mode: undefined,
+  useStatus: 1,
+  monitor: 1,
+});
+const deviceData = ref<TDevice.IListRes[]>([]);
+const loadFlag = ref(false);
+const deviceId = ref(0);
+
+const getdeviceList = async () => {
+  const res = await deviceList(devicePaging);
+  deviceData.value = [...deviceData.value, ...res.records];
+  if (deviceData.value.length >= res.total) {
+    loadFlag.value = true;
+  }
+  if (res.records.length > 0) {
+    deviceId.value = res.records[0].deviceId;
+    emit("click", res.records[0]);
+  }
+};
+
+const handelLoad = () => {
+  if (loadFlag.value) return;
+  devicePaging.page += 1;
+  getdeviceList();
+};
+const handelMode = (e) => {
+  devicePaging.mode = e;
+  devicePaging.page = 1;
+  deviceData.value = [];
+  getdeviceList();
+};
+const handelItem = (item) => {
+  deviceId.value = item.deviceId;
+  emit("click", item);
+};
+onMounted(() => {
+  getdeviceList();
 });
-watch(
-  () => props.paging,
-  (newValue) => {
-    mode.value = newValue.mode;
-  },
-  { deep: true }
-);
 </script>
 <style scoped lang="less">
 .device {

src/views/monitoringCenter/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div class="el-row-left">
-      <DeviceInfo :deviceInfo="deviceInfo" :paging="devicePaging" :list="deviceData" :handelMode="handelMode" :load="handelLoad" @click="handelClickDevice" />
+      <DeviceModel @click="handelClickDevice" />
     </div>
     <div class="el-row-right scrollbar">
       <MonitoringTop :funcList="funcList" />
@@ -30,20 +30,20 @@
   </div>
 </template>
 <script lang="ts" setup>
-import DeviceInfo from "./deviceInfo.vue";
+import DeviceModel from "./deviceModel.vue";
 import MonitoringTop from "./monitoringTop.vue";
 import DeviceHistory from "./deviceHistory.vue";
 import DeviceRecord from "./deviceRecord.vue";
 import DeviceLocationMap from "./deviceLocationMap.vue";
-import { deviceList, healthLatestData } from "@/api/index";
+import { healthLatestData } from "@/api/index";
 import { TDevice, THealthLatestData } from "@/api/index.d";
-import { onMounted, ref, reactive, onUnmounted } from "vue";
+import { ref, onUnmounted } from "vue";
 import heart from "@/assets/img/heart.png";
 import temperature from "@/assets/img/temperature.png";
 import blood from "@/assets/img/blood.png";
 
 const devHisRef = ref(null);
-const loadFlag = ref(false);
+
 let Interval = null;
 let funcList = ref([
   { title: "当前心率", en: "DANGQIANXINLV", icon: heart, unit: "次/分", num: 0, color: "#FF0303" },
@@ -51,29 +51,8 @@ let funcList = ref([
   { title: "当前体表温度", en: "DANGQIANTIBIAOWENDU", icon: temperature, unit: "℃", num: 0, color: "#FF6905" },
 ]);
 
-const devicePaging = reactive({
-  page: 1,
-  size: 10,
-  mode: undefined,
-  useStatus: 1,
-  status: 1,
-});
 const HealthData = ref<THealthLatestData.TRes>();
 const deviceInfo = ref<TDevice.IListRes>();
-const deviceData = ref<TDevice.IListRes[]>([]);
-
-const getdeviceList = async () => {
-  const res = await deviceList(devicePaging);
-  deviceData.value = [...deviceData.value, ...res.records];
-  if (deviceData.value.length >= res.total) {
-    loadFlag.value = true;
-  }
-  if (res.records.length > 0) {
-    deviceInfo.value = res.records[0];
-    getHealthLatestData();
-    IntervalFn();
-  }
-};
 
 const getHealthLatestData = () => {
   healthLatestData({ deviceId: deviceInfo.value.deviceId }).then((res) => {
@@ -99,26 +78,16 @@ const IntervalFn = () => {
     getHealthLatestData();
   }, 60000);
 };
-const handelMode = (e) => {
-  devicePaging.mode = e;
-  devicePaging.page = 1;
-  deviceData.value = [];
-  getdeviceList();
-};
-const handelLoad = () => {
-  if (loadFlag.value) return;
-  devicePaging.page += 1;
-  getdeviceList();
-};
+
 const handelClickDevice = (val: TDevice.IListRes) => {
   devHisRef.value.radio = "1";
   deviceInfo.value = val;
   getHealthLatestData();
+  if (!Interval) {
+    IntervalFn();
+  }
 };
 
-onMounted(() => {
-  getdeviceList();
-});
 onUnmounted(() => {
   clearInterval(Interval);
 });