格式化日期

src/components/data-search-bar.vue

@@ -6,7 +6,7 @@
         <el-option :label="item.address" :value="item.deviceId" v-for="item in devices" :key="item.deviceId"></el-option>
       </el-select>
     </el-form-item>
-    <el-form-item label="选择日期" class="ml-6">
+    <el-form-item label="选择日期">
       <el-date-picker
         v-model="searchDevice.value1"
         type="monthrange"
@@ -35,13 +35,15 @@ const searchDeviceForm = ref(null); // form
 const store = useStore();
 const devices = computed(() => store.state.device.devices);
 
-// 日期格式转换
-const timeChange = time => {
-  const d = new Date(time);
-  const y = d.getFullYear();
-  let m = d.getMonth() + 1;
-  m = m < 10 ? `0${m}` : m;
-  return `${y}-${m}`;
+/**
+ * 格式化日期
+ * @param {Date} date 选择的日期
+ */
+const formatDate = date => {
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  return `${year}-${month}-${day}`;
 };
 
 const onSubmit = () => {
@@ -50,8 +52,8 @@ const onSubmit = () => {
       const options = { ...searchDevice };
       let date = [];
       if (options.value1) {
-        const start = timeChange([...options.value1][0]);
-        const end = timeChange([...options.value1][1]);
+        const start = formatDate([...options.value1][0]);
+        const end = formatDate([...options.value1][1]);
         date = [start, end];
       }
       const params = { deviceId: options.device, date };

src/components/realtime-data.vue

@@ -22,9 +22,13 @@ onMounted(() => {
 // 设置图表
 const setDate = data => {
   noData.value = false;
+
   if (bar) {
-    bar.destroy();
+    console.log('重新加载');
+    bar.changeData(data);
+    return;
   }
+
   bar = new Line('realtimeContainer', {
     data,
     padding: 'auto',

src/components/search-bar.vue

@@ -13,9 +13,11 @@
 </template>
 
 <script setup>
-import { reactive, ref, computed } from 'vue';
+import { reactive, ref, computed, defineEmits } from 'vue';
 import { useStore } from 'vuex';
 
+const emit = defineEmits(['getDate']);
+
 const searchDevice = reactive({ device: '' });
 
 const searchDeviceForm = ref(null); // form
@@ -26,6 +28,8 @@ const devices = computed(() => store.state.device.devices);
 const onSubmit = () => {
   searchDeviceForm.value.validate(valid => {
     console.log(valid, { ...searchDevice });
+    const { device } = searchDevice;
+    emit('search', { deviceId: device });
   });
 };
 </script>

src/views/statistical-history.vue

@@ -8,28 +8,55 @@ import SearchBar from 'components/search-bar-data.vue';
 import HistoryData from 'components/history-data.vue';
 import { computed, ref } from 'vue';
 import { useStore } from 'vuex';
-import { getHistories } from 'apis/index';
 
 const childRef = ref(null);
 
 let timer = null;
-const page = ref({ page: 2, size: 10 });
-const data = ref(null);
-const search = ref({});
 const store = useStore();
 const token = computed(() => store.getters['user/token']);
+const realtimeData = computed(() => store.state.statistics.realtimeData);
 
-// 实时数据统计
-const getDate = async () => {
+/**
+ * 格式化日期
+ * @param {Date} date 选择的日期
+ */
+const formatDate = date => {
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  return `${year}-${month}-${day}`;
+};
+
+/**
+ * 历史数据统计
+ * @param {*} deviceId // 站点 设备id
+ * @param {*} date // 年月时间段
+ * @param {*} sort // 1 -> 按时间正序 -1->按时间倒序
+ * @param {*} page // 第几页
+ * @param {*} size // 每页多少条
+ * @param {*} type // 0查全部
+ */
+const getDate = async options => {
   try {
     if (token) {
-      const params = { search: { ...search.value }, page: { page: page.value.page, size: page.value.size } };
-      const resData = await getHistories(params);
-      data.value = resData.data;
-      page.value = resData.page;
+      let date = [];
+      const startTime = new Date(new Date(new Date().toLocaleDateString()).getTime());
+      const start = formatDate(startTime);
+      const end = formatDate(new Date());
+      date = [start, end];
+
+      const params = {
+        deviceId: options && options.deviceId ? options.deviceId : '',
+        date: options && options.date && options.date.length ? options.date : date,
+        sort: 1,
+        page: 1,
+        size: 10,
+        type: 0,
+      };
+      await store.dispatch('statistics/getRealtimeData', params);
       timer && clearTimeout(timer);
       timer = null;
-      childRef.value.changeDate(data.value);
+      childRef.value.changeDate(realtimeData.value);
     } else {
       timer = setTimeout(() => {
         getDate();

src/views/statistical-realtime.vue

@@ -1,41 +1,78 @@
 <template>
-  <DataSearchBar @getDate="getDate" />
+  <SearchBar @search="getDate" />
   <RealtimeData ref="childRef" class="mt-4" />
 </template>
 
 <script setup>
-import DataSearchBar from 'components/data-search-bar.vue';
-import RealtimeData from 'components/realtime-data.vue';
-import { computed, ref } from 'vue';
+import { computed, ref, onUnmounted } from 'vue';
 import { useStore } from 'vuex';
+import SearchBar from 'components/search-bar.vue';
+import RealtimeData from 'components/realtime-data.vue';
 
 const childRef = ref(null);
 
 let timer = null;
+let apiTimer = null;
 const store = useStore();
 const token = computed(() => store.getters['user/token']);
 const realtimeData = computed(() => store.state.statistics.realtimeData);
 
-// 实时数据统计
+/**
+ * 格式化日期
+ * @param {Date} date 选择的日期
+ */
+const formatDate = date => {
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  return `${year}-${month}-${day}`;
+};
+
+/**
+ * 实时数据统计
+ * @param {*} deviceId // 站点 设备id
+ * @param {*} date // 年月时间段
+ * @param {*} sort // 1 -> 按时间正序 -1->按时间倒序
+ * @param {*} page // 第几页
+ * @param {*} size // 每页多少条
+ * @param {*} type // 0查全部
+ */
 const getDate = async options => {
-  if (token) {
-    const params = {
-      deviceId: options && options.deviceId ? options.deviceId : '', // 站点 设备id
-      date: options && options.date && options.date.length ? options.date : [], // 年月时间段
-      sort: 1, // 1 -> 按时间正序 -1->按时间倒序
-      page: 1, // 第几页
-      size: 10, // 每页多少条
-    };
-    await store.dispatch('statistics/getRealtimeData', params);
-    timer && clearTimeout(timer);
-    timer = null;
-    childRef.value.changeDate(realtimeData.value);
-  } else {
-    timer = setTimeout(() => {
-      getDate();
-    });
+  try {
+    if (token) {
+      const startTime = new Date(new Date(new Date().toLocaleDateString()).getTime());
+      const start = formatDate(startTime);
+      const end = formatDate(new Date());
+
+      const params = {
+        deviceId: options && options.deviceId ? options.deviceId : '',
+        date: [start, end],
+        sort: 1,
+        page: 1,
+        size: 10,
+        type: 0,
+      };
+      await store.dispatch('statistics/getRealtimeData', params);
+      timer && clearTimeout(timer);
+      timer = null;
+      childRef.value.changeDate(realtimeData.value);
+    } else {
+      timer = setTimeout(() => {
+        getDate();
+      });
+    }
+  } catch (error) {
+    console.log('error: ', error);
   }
 };
 
 getDate();
+apiTimer = setInterval(() => {
+  getDate();
+}, 5000);
+
+onUnmounted(() => {
+  apiTimer && clearInterval(apiTimer);
+  apiTimer = null;
+});
 </script>