2025年04月30日10:50:02

.env.development

@@ -1,8 +1,8 @@
-VITE_APP_URL = 'http://192.168.3.116:8001/'
+# VITE_APP_URL = 'http://192.168.3.116:8001/'
-VITE_APP_URL_WEBSOCKET = 'http://192.168.3.116:8000/api/websocket'
+# VITE_APP_URL_WEBSOCKET = 'http://192.168.3.116:8000/api/websocket'
 
-# VITE_APP_URL = 'http://47.112.185.26:8001/'
+VITE_APP_URL = 'http://47.112.185.26:8001/'
-# VITE_APP_URL_WEBSOCKET = 'ws://47.112.185.26:8000/api/websocket'
+VITE_APP_URL_WEBSOCKET = 'ws://47.112.185.26:8000/api/websocket'
 
 # VITE_APP_URL = 'http://api.handcuff.zhuhaiguangdun.cn'
 # VITE_APP_URL_WEBSOCKET = 'ws://device.handcuff.zhuhaiguangdun.cn:8000/api/websocket'

components.d.ts

@@ -46,6 +46,7 @@ declare module '@vue/runtime-core' {
     InfoWindow: typeof import('./src/components/InfoWindow.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SectionDate: typeof import('./src/components/sectionDate.vue')['default']
     Sidebar: typeof import('./src/components/sidebar.vue')['default']
     TableCustom: typeof import('./src/components/table-custom.vue')['default']
     TableDetail: typeof import('./src/components/table-detail.vue')['default']

src/components/sectionDate.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="condition">
+    <el-radio-group v-model="radioType">
+      <el-radio-button label="时" value="hour" />
+      <el-radio-button label="天" value="day" />
+      <el-radio-button label="周" value="week" />
+    </el-radio-group>
+    <div class="condition-time">
+      <el-date-picker
+        v-if="radioType == 'hour'"
+        style="width: 350px"
+        v-model="value"
+        type="datetimerange"
+        format="YYYY-MM-DD HH:mm:ss"
+        value-format="YYYY-MM-DD HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="handleDateChange"
+      />
+      <el-date-picker
+        v-else-if="radioType == 'day'"
+        style="width: 350px"
+        v-model="value1"
+        type="daterange"
+        value-format="YYYY-MM-DD HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="handleDateChange"
+      />
+
+      <el-date-picker v-else style="width: 370px" v-model="value2" type="week" value-format="YYYY-MM-DD" placeholder="请选择周" @change="handleWeekChange" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { format } from "@/utils";
+import { ref } from "vue";
+const value = ref("");
+const value1 = ref("");
+const value2 = ref("");
+const radioType = ref("hour");
+const emit = defineEmits(["change"]);
+
+const handleWeekChange = (val) => {
+  value.value = "";
+  value1.value = "";
+  let time = new Date(val).getTime() + 6 * 24 * 60 * 60 * 1000;
+  emit("change", { startDate: `${val} 00:00:00`, endDate: `${format(time, "YYYY-MM-DD")} 00:00:00`, type: radioType.value });
+};
+const handleDateChange = (val) => {
+  if (radioType.value === "hour") {
+    value1.value = "";
+    value2.value = "";
+  } else {
+    value.value = "";
+    value2.value = "";
+  }
+  emit("change", { startDate: val[0], endDate: val[1], type: radioType.value });
+};
+</script>
+
+<style scoped lang="less">
+.condition {
+  display: flex;
+  align-items: center;
+  margin-left: 20px;
+  .condition-time {
+    overflow: hidden;
+    margin-left: 20px;
+  }
+}
+</style>

src/views/statisticalCenter/deviceHistory.vue

@@ -2,59 +2,20 @@
   <div class="deviceStatistics card">
     <div class="card-head">
       <div class="title">内容数据</div>
-      <div class="condition">
+      <SectionDate @change="api" />
-        <el-radio-group v-model="radioType">
-          <el-radio-button label="时" value="hour" />
-          <el-radio-button label="天" value="day" />
-          <el-radio-button label="周" value="week" />
-        </el-radio-group>
-        <div class="condition-time">
-          <el-date-picker
-            style="width: 370px"
-            v-if="radioType == 'week'"
-            v-model="value"
-            type="week"
-            value-format="YYYY-MM-DD"
-            placeholder="请选择周"
-            @change="handleWeekChange"
-          />
-          <el-date-picker
-            v-else
-            style="width: 350px"
-            v-model="value1"
-            type="datetimerange"
-            format="YYYY-MM-DD HH:mm:ss"
-            value-format="YYYY-MM-DD HH:mm:ss"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="handleDateChange"
-          />
-        </div>
-      </div>
     </div>
     <slot name="chart"></slot>
   </div>
 </template>
 <script setup>
-import { format } from "@/utils";
+import SectionDate from "@/components/sectionDate.vue";
-import { ref } from "vue";
+
-const value = ref("");
+const props = defineProps({
-const value1 = ref("");
-const radioType = ref("hour");
-const { api } = defineProps({
   api: {
     type: Function,
     required: true,
   },
 });
-
-const handleWeekChange = (val) => {
-  let time = new Date(val).getTime() + 6 * 24 * 60 * 60 * 1000;
-  api({ type: radioType.value, startDate: `${val} 00:00:00`, endDate: `${format(time, "YYYY-MM-DD")} 00:00:00` });
-};
-const handleDateChange = (val) => {
-  api({ type: radioType.value, startDate: val[0], endDate: val[1] });
-};
 </script>
 <style scoped lang="less">
 .card {
@@ -87,15 +48,6 @@ const handleDateChange = (val) => {
         background: #061451;
       }
     }
-    .condition {
-      display: flex;
-      align-items: center;
-      margin-left: 20px;
-      .condition-time {
-        overflow: hidden;
-        margin-left: 20px;
-      }
-    }
   }
 }
 </style>

src/views/statisticalCenter/index.vue

@@ -122,7 +122,6 @@ let option2 = ref({
       { value: 0, name: "SOS告警" },
       { value: 0, name: "围栏告警" },
       { value: 0, name: "破坏告警" },
-      { value: 0, name: "低电告警" },
       { value: 0, name: "心率告警" },
       { value: 0, name: "血氧告警" },
       { value: 0, name: "体温告警" },
@@ -154,7 +153,6 @@ const getStatisticsWarningApi = () => {
       { value: res?.sosCount, name: "SOS告警" },
       { value: res?.railCount, name: "围栏告警" },
       { value: res?.destroyCount, name: "破坏告警" },
-      { value: res?.batteryCount, name: "低电告警" },
       { value: res?.heartRateCount, name: "心率告警" },
       { value: res?.bloodOxygenCount, name: "血氧告警" },
       { value: res?.tempCount, name: "体温告警" },
@@ -175,28 +173,24 @@ const getStatisticsUseCount = () => {
 const getStatisticsContent = (req) => {
   statisticsContent(req).then((res) => {
     if (res.times && res.times.length) {
-      option.value.xAxis.data = res.times;
+      option.value.xAxis.data = res.times.map((item) => (req.type == "hour" ? format(item) : format(item, "YYYY-MM-DD")));
       option.value.series = [
         {
-          stack: "Total",
           name: "SOS预警数组",
           data: res?.sosArr,
           type: "line",
         },
         {
-          stack: "Total",
           name: "围栏预警数组",
           data: res?.railArr,
           type: "line",
         },
         {
-          stack: "Total",
           name: "破坏预警数组",
           data: res?.destroyArr,
           type: "line",
         },
         {
-          stack: "Total",
           name: "生理预警数组",
           data: res?.healthArr,
           type: "line",

src/views/synthesizeManage/mapLocation/index.vue

@@ -3,57 +3,10 @@
     <div class="box">
       <div class="editTool">
         <span>时间区间：</span>
-        <el-radio-group v-model="sectionType">
+        <SectionDate @change="sectionDateChange" />
-          <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="结束时间"
-            v-model="time"
-            @change="timeChange"
-          />
-          <el-date-picker v-model="week" v-else type="week" value-format="YYYY-MM-DD" 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>
     </div>
-    <!-- <el-row :gutter="20">
-      <el-col :span="6">
-        <div class="incidentList">
-          <div class="head">
-            <div class="head-text">选择设备（SN列表）</div>
-          </div>
-          <div class="list scrollbar">
-            <div class="list-item" :class="`${index == 0 ? 'active' : ''}`" v-for="(item, index) in 15" :key="item">
-              <div class="img">
-                <img :src="handcuffs" alt="" />
-              </div>
-              <div class="content">
-                <div class="content-name">设备序号：10</div>
-                <div class="content-time">2025/03/26 18:33:32</div>
-              </div>
-              <el-icon v-if="index == 0"><View /></el-icon>
-              <el-icon v-else><Hide /></el-icon>
-            </div>
-          </div>
-        </div>
-      </el-col>
-      <el-col :span="24" class="container-right">
-      </el-col>
-    </el-row> -->
     <div :style="{ display: 'none' }">
       <InfoWindow class="infoBox" :value="deviceInfo" @close="InfoWin.close()" />
     </div>
@@ -72,14 +25,12 @@ import InfoWindow from "@/components/InfoWindow.vue";
 import ViaMarker from "@/assets/img/via-marker.png";
 import endMarker from "@/assets/img/end-marker.png";
 import startMarker from "@/assets/img/start-marker.png";
+import SectionDate from "@/components/sectionDate.vue";
 
 const { query } = useRoute();
 let d = new Date();
 let newMap = null;
-let time = ref([new Date(`${format(d, "YYYY-MM-DD")} 00:00:00`), new Date(`${format(d, "YYYY-MM-DD")} 23:59:59`)]);
-let week = ref(d);
 let deviceInfo = ref({});
-let sectionType = ref(1);
 let InfoWin = null;
 
 const params = reactive<TLocateRecord.TReq>({
@@ -88,23 +39,18 @@ const params = reactive<TLocateRecord.TReq>({
   endDate: `${format(d, "YYYY-MM-DD")} 23:59:59`,
 });
 
-const weekChange = (val: any) => {
+const sectionDateChange = (val) => {
-  let endTime = new Date(val).getTime() + 6 * 24 * 60 * 60 * 1000;
+  params.startDate = val.startDate;
-  params.startDate = `${val} 00:00:00`;
+  params.endDate = val.endDate;
-  params.endDate = `${format(endTime, "YYYY-MM-DD")} 23:59:59`;
-  getLocateRecord();
-};
-const timeChange = (val: any) => {
-  params.startDate = `${format(val[0], "YYYY-MM-DD")} 00:00:00`;
-  params.endDate = `${format(val[1], "YYYY-MM-DD")} 23:59:59`;
   getLocateRecord();
 };
 
 const getLocateRecord = () => {
   locateRecord(params).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({
@@ -136,6 +82,7 @@ const getLocateRecord = () => {
           InfoWin.open(newMap.map, marker.getPosition());
         });
       });
+    } else {
     }
   });
 };