2025年04月24日10:12:01

src/components/alarm.vue

@@ -20,9 +20,9 @@
               <div class="alarmTable-item" v-for="(item, index) in warningList" :key="index">
                 <div class="alarmTable-item-text">{{ item.deviceId }}</div>
                 <div class="alarmTable-item-text">{{ warnTypeEnum[item.type] }}</div>
-                <div class="alarmTable-item-text">{{ item.useName }}</div>
+                <div class="alarmTable-item-text">{{ item.user }}</div>
                 <div class="alarmTable-item-text">{{ item.createTime }}</div>
-                <div class="alarmTable-item-text" @click="toIncidentDispose(item.deviceId)">去处理</div>
+                <div class="alarmTable-item-text" @click="toIncidentDispose(item.warnId)">去处理</div>
               </div>
             </div>
           </div>
@@ -41,6 +41,7 @@ interface TWarning {
   useName: string;
   createTime: string;
   type: number;
+  warnId: number;
 }
 
 enum warnTypeEnum {

src/views/login.vue

@@ -12,7 +12,7 @@
         </el-form-item>
 
         <el-form-item>
-          <el-button type="primary" @click="submitForm(ruleFormRef)" class="btn" size="large">登 录</el-button>
+          <el-button type="primary" :disabled="disabled" @click="submitForm(ruleFormRef)" class="btn" size="large">登 录</el-button>
         </el-form-item>
         <div class="hint">
           如遇到账号问题，请联系管理员<br />
@@ -39,6 +39,7 @@ const validatePass = (rule: any, value: any, callback: any) => {
   if (rule.field == "password" && !ruleForm.password) return callback(new Error("请输入密码"));
   callback();
 };
+const disabled = ref(false);
 const ruleForm = reactive({
   username: "",
   password: "",
@@ -53,8 +54,10 @@ const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate((valid, fields) => {
     if (valid) {
+      disabled.value = true;
       localStorage.setItem("isReload", "true");
-      fetchLogin(ruleForm).then((res) => {
+      fetchLogin(ruleForm)
+        .then((res) => {
           comm.setUser(res);
           comm.getRoleList();
           ElMessage({
@@ -64,6 +67,9 @@ const submitForm = async (formEl: FormInstance | undefined) => {
           setTimeout(() => {
             router.push("/");
           }, 1000);
+        })
+        .finally(() => {
+          disabled.value = false;
         });
     }
   });

src/views/monitoringCenter/deviceHistory.vue

@@ -16,6 +16,7 @@ import { ref } from "vue";
 
 const radio = ref("1");
 const emit = defineEmits(["change"]);
+defineExpose({ radio });
 
 const change = (e) => {
   emit("change", e);

src/views/monitoringCenter/deviceInfo.vue

@@ -2,7 +2,7 @@
   <div class="device">
     <div class="device-head">
       <div class="title">设备列表</div>
-      <el-select class="select" v-model="props.paging.mode" @change="handelMode">
+      <el-select class="select" v-model="mode" @change="props.handelMode">
         <el-option label="全部" value="" />
         <el-option label="常规模式" value="0" />
         <el-option label="审讯模式" value="1" />
@@ -10,7 +10,7 @@
       </el-select>
     </div>
     <template v-if="props.list.length">
-      <div v-infinite-scroll="load" :infinite-scroll-immediate="false" class="device-list noScrollbar infinite-list" style="overflow: auto">
+      <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 #reference>
             <div class="item" :class="{ active: props.deviceInfo?.deviceId === item.deviceId }" @click="emit('click', item)">
@@ -66,6 +66,7 @@
 </template>
 <script setup lang="ts">
 import { TDevice } from "@/api/index.d";
+import { ref, watch } from "vue";
 
 const statusColor = ["danger", "success", "warning"];
 const modeColor = ["primary", "danger", "warning"];
@@ -80,14 +81,18 @@ enum modeEnum {
   "户外押送",
 }
 const emit = defineEmits(["click"]);
-// const { list, paging, api, deviceInfo }
+const mode = ref("");
 
 const props = defineProps({
   list: {
     type: Array<TDevice.IListRes>,
     default: () => [],
   },
-  api: {
+  handelMode: {
+    type: Function,
+    default: () => {},
+  },
+  load: {
     type: Function,
     default: () => {},
   },
@@ -100,15 +105,13 @@ const props = defineProps({
     default: undefined,
   },
 });
-
+watch(
-const handelMode = () => {
+  () => props.paging,
-  props.paging.page += 1;
+  (newValue) => {
-  props.api();
+    mode.value = newValue.mode;
-};
+  },
-const load = () => {
+  { deep: true }
-  props.paging.page += 1;
+);
-  props.api();
-};
 </script>
 <style scoped lang="less">
 .device {

src/views/monitoringCenter/index.vue

@@ -2,7 +2,7 @@
   <div class="container">
     <el-row class="el-row" :gutter="20">
       <el-col :span="6" class="el-row-left"
-        ><DeviceInfo :deviceInfo="deviceInfo" :paging="devicePaging" :api="getdeviceList" :list="deviceData" @click="handelClickDevice"
+        ><DeviceInfo :deviceInfo="deviceInfo" :paging="devicePaging" :list="deviceData" :handelMode="handelMode" :load="handelLoad" @click="handelClickDevice"
       /></el-col>
       <el-col :span="18" class="el-row-right scrollbar">
         <MonitoringTop :funcList="funcList" />
@@ -10,7 +10,7 @@
           <div class="monitoringMap" id="mapcontainer"></div>
           <el-row :gutter="20" style="margin-top: 20px">
             <el-col :span="12">
-              <DeviceHistory @change="handelRadio">
+              <DeviceHistory @change="handelRadio" ref="devHisRef">
                 <template #chart>
                   <div ref="chartRef" style="width: 100%; height: 100%"></div>
                 </template>
@@ -24,7 +24,7 @@
         <div v-else>
           <el-row :gutter="20" style="margin-top: 20px">
             <el-col :span="24" style="height: 400px">
-              <DeviceHistory @change="handelRadio">
+              <DeviceHistory @change="handelRadio" ref="devHisRef">
                 <template #chart>
                   <div ref="chartRef" style="width: 100%; height: 100%"></div>
                 </template>
@@ -56,6 +56,8 @@ import blood from "@/assets/img/blood.png";
 import location from "@/assets/img/location.png";
 
 const chartRef = ref(null);
+const devHisRef = ref(null);
+const loadFlag = ref(false);
 let myChart = null;
 let newMap = null;
 let Interval = null;
@@ -117,7 +119,10 @@ const deviceData = ref<TDevice.IListRes[]>([]);
 
 const getdeviceList = async () => {
   const res = await deviceList(devicePaging);
-  deviceData.value = res.records;
+  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();
@@ -189,7 +194,19 @@ const IntervalFn = () => {
     getLocateRecord();
   }, 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();
   getLocateRecord();

src/views/statisticalCenter/index.vue

@@ -126,9 +126,9 @@ let option2 = ref({
 });
 const paging = reactive({
   page: 1,
-  size: 10,
+  size: 5,
   total: 0,
-  deviceId: "",
+  deviceId: null,
   startDate: `${format(d, "YYYY-MM-DD")} 00:00:00`,
   endDate: `${format(d, "YYYY-MM-DD")} 23:59:59`,
 });
@@ -167,8 +167,8 @@ const getStatisticsUseCount = () => {
     myChart1.setOption(option1.value);
   });
 };
-const getStatisticsContent = (res) => {
+const getStatisticsContent = (req) => {
-  statisticsContent(res).then((res) => {
+  statisticsContent(req).then((res) => {
     option.value.xAxis.data = res?.times;
     option.value.series = [
       {
@@ -196,8 +196,8 @@ const getStatisticsContent = (res) => {
         type: "line",
       },
     ];
-  });
     myChart.setOption(option.value);
+  });
 };
 const getStatisticsCount = () => {
   statisticsCount().then((res) => {
@@ -220,11 +220,6 @@ const handleResize = debounce(() => {
 }, 200);
 
 onMounted(() => {
-  getData();
-  getStatisticsCount();
-  getStatisticsWarningApi();
-  getStatisticsUseCount();
-
   try {
     new MapCustom({ dom: "mapcontainer" });
   } catch (error) {}
@@ -241,6 +236,15 @@ onMounted(() => {
 
     window.addEventListener("resize", handleResize);
   }
+  getData();
+  getStatisticsCount();
+  getStatisticsWarningApi();
+  getStatisticsUseCount();
+  getStatisticsContent({
+    startDate: `${format(d, "YYYY-MM-DD")} 00:00:00`,
+    endDate: `${format(d, "YYYY-MM-DD")} 23:59:59`,
+    type: "hour",
+  });
 });
 onUnmounted(() => {
   window.removeEventListener("resize", handleResize);