From 22442cd73ab2be27125871e9dd44a0df3de747b6 Mon Sep 17 00:00:00 2001
From: song <srf428110@163.com>
Date: Fri, 29 Oct 2021 17:52:55 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=BF=AE=E6=94=B9=E9=BB=98=E8=AE=A4=E7=AB=99?=
 =?UTF-8?q?=E7=82=B9=202.=E6=97=B6=E9=97=B4=E6=88=B3=203.=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4console?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                       |  1 +
 src/components/data-search-bar.vue | 57 +++++++++++++++---------------
 src/components/realtime-data.vue   |  1 -
 src/components/search-bar-data.vue | 32 ++++++++++-------
 src/components/search-bar.vue      | 25 ++++++++++---
 src/store/index.js                 |  1 -
 src/views/data-history.vue         |  9 +++--
 src/views/device-list.vue          | 20 ++++++-----
 src/views/month-data.vue           | 47 ++++++++++++++----------
 src/views/statistical-history.vue  | 37 +++++++++----------
 src/views/statistical-realtime.vue | 25 +++++--------
 11 files changed, 142 insertions(+), 113 deletions(-)

diff --git a/package.json b/package.json
index c3054c2..00e4081 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@antv/g2plot": "^2.3.39",
     "@vitejs/plugin-vue": "^1.9.3",
     "axios": "^0.23.0",
+    "dayjs": "^1.10.7",
     "element-plus": "^1.1.0-beta.24",
     "lodash": "^4.17.21",
     "vite": "^2.6.4",
diff --git a/src/components/data-search-bar.vue b/src/components/data-search-bar.vue
index d3ffac5..ce1683b 100644
--- a/src/components/data-search-bar.vue
+++ b/src/components/data-search-bar.vue
@@ -1,14 +1,14 @@
 <template>
   <el-form :inline="true" :model="searchDevice" ref="searchDeviceForm">
     <el-form-item label="选择站点">
-      <el-select v-model="searchDevice.device" placeholder="请选择站点">
+      <el-select v-model="searchDevice.deviceId" placeholder="请选择站点" @change="change">
         <el-option label="全部" value=""></el-option>
         <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="选择日期">
       <el-date-picker
-        v-model="searchDevice.value1"
+        v-model="searchDevice.date"
         type="monthrange"
         range-separator="~"
         start-placeholder="开始月份"
@@ -23,41 +23,42 @@
 </template>
 
 <script setup>
-import { reactive, ref, computed, defineEmits } from 'vue';
+import { reactive, ref, computed, defineEmits, watch } from 'vue';
 import { useStore } from 'vuex';
+import dayjs from 'dayjs';
 
-const emit = defineEmits(['getDate']);
-
-const searchDevice = reactive({ device: '', value1: '' });
-
+const emit = defineEmits(['search']);
+const searchDevice = reactive({ deviceId: '', date: '' });
 const searchDeviceForm = ref(null); // form
-
 const store = useStore();
 const devices = computed(() => store.state.device.devices);
+const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
+
+// 监听currentDeviceId
+watch(
+  () => currentDeviceId.value,
+  newValue => {
+    if (newValue && searchDevice.deviceId !== newValue) {
+      searchDevice.deviceId = newValue;
+    }
+  },
+  { immediate: true },
+);
 
-/**
- * 格式化日期
- * @param {Date} date 选择的日期
- */
-const formatDate = date => {
-  const year = date.getFullYear();
-  const month = date.getMonth() + 1;
-  const day = date.getDate();
-  return `${year}-${month}-${day}`;
+const change = e => {
+  store.commit('device/setCurrentDeviceId', e);
 };
 
 const onSubmit = () => {
-  searchDeviceForm.value.validate(valid => {
-    if (valid) {
-      const options = { ...searchDevice };
-      let date = [];
-      if (options.value1) {
-        const start = formatDate([...options.value1][0]);
-        const end = formatDate([...options.value1][1]);
-        date = [start, end];
-      }
-      const params = { deviceId: options.device, date };
-      emit('getDate', params);
+  searchDeviceForm.value.validate(() => {
+    const { deviceId, date } = { ...searchDevice };
+    if (date) {
+      const start = dayjs(date[0]).format('X');
+      const end = dayjs(date[1]).format('X');
+      const daterange = [start, end];
+      emit('search', { deviceId, date: daterange });
+    } else {
+      emit('search', { deviceId, date });
     }
   });
 };
diff --git a/src/components/realtime-data.vue b/src/components/realtime-data.vue
index f749ac6..594cdeb 100644
--- a/src/components/realtime-data.vue
+++ b/src/components/realtime-data.vue
@@ -24,7 +24,6 @@ const setDate = data => {
   noData.value = false;
 
   if (bar) {
-    console.log('重新加载');
     bar.changeData(data);
     return;
   }
diff --git a/src/components/search-bar-data.vue b/src/components/search-bar-data.vue
index 1cfa5b6..b227740 100644
--- a/src/components/search-bar-data.vue
+++ b/src/components/search-bar-data.vue
@@ -1,7 +1,7 @@
 <template>
   <el-form :inline="true" :model="searchDevice" ref="searchDeviceForm">
     <el-form-item label="选择站点">
-      <el-select v-model="searchDevice.deviceId" placeholder="请选择站点">
+      <el-select v-model="searchDevice.deviceId" placeholder="请选择站点" @change="change">
         <el-option label="全部" value></el-option>
         <el-option :label="item.address" :value="item.deviceId" v-for="item in devices" :key="item.deviceId"></el-option>
       </el-select>
@@ -24,24 +24,30 @@
 </template>
 
 <script setup>
-import { reactive, ref, computed, defineEmits } from 'vue';
+import { reactive, ref, computed, defineEmits, watch } from 'vue';
 import { useStore } from 'vuex';
+import dayjs from 'dayjs';
 
 const emit = defineEmits(['search']);
 const searchDevice = reactive({ deviceId: '', date: '' });
 const searchDeviceForm = ref(null); // form
 const store = useStore();
 const devices = computed(() => store.state.device.devices);
+const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
 
-/**
- * 格式化日期
- * @param {Date} date 选择的日期
- */
-const formatDate = date => {
-  const year = date.getFullYear();
-  const month = date.getMonth() + 1;
-  const day = date.getDate();
-  return `${year}-${month}-${day}`;
+// 监听currentDeviceId
+watch(
+  () => currentDeviceId.value,
+  newValue => {
+    if (newValue && searchDevice.deviceId !== newValue) {
+      searchDevice.deviceId = newValue;
+    }
+  },
+  { immediate: true },
+);
+
+const change = e => {
+  store.commit('device/setCurrentDeviceId', e);
 };
 
 // 提交
@@ -49,7 +55,9 @@ const onSubmit = () => {
   searchDeviceForm.value.validate(() => {
     const { deviceId, date } = searchDevice;
     if (date) {
-      const daterange = [formatDate(date[0]), formatDate(date[1])];
+      const start = dayjs(date[0]).format('X');
+      const end = dayjs(date[1]).format('X');
+      const daterange = [start, end];
       emit('search', { deviceId, date: daterange });
     } else {
       emit('search', { deviceId, date });
diff --git a/src/components/search-bar.vue b/src/components/search-bar.vue
index eb5c246..427b2f7 100644
--- a/src/components/search-bar.vue
+++ b/src/components/search-bar.vue
@@ -1,7 +1,7 @@
 <template>
   <el-form :inline="true" :model="searchDevice" ref="searchDeviceForm">
     <el-form-item label="选择站点">
-      <el-select v-model="searchDevice.device" placeholder="请选择站点">
+      <el-select v-model="searchDevice.deviceId" placeholder="请选择站点" @change="change">
         <el-option label="全部" value></el-option>
         <el-option :label="item.address" :value="item.deviceId" v-for="item in devices" :key="item.deviceId"></el-option>
       </el-select>
@@ -13,22 +13,37 @@
 </template>
 
 <script setup>
-import { reactive, ref, computed, defineEmits } from 'vue';
+import { reactive, ref, computed, defineEmits, watch } from 'vue';
 import { useStore } from 'vuex';
 
 const emit = defineEmits(['getDate']);
 
-const searchDevice = reactive({ device: '' });
+const searchDevice = reactive({ deviceId: '' });
 
 const searchDeviceForm = ref(null); // form
 
 const store = useStore();
 const devices = computed(() => store.state.device.devices);
+const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
+
+// 监听currentDeviceId
+watch(
+  () => currentDeviceId.value,
+  newValue => {
+    if (newValue && searchDevice.deviceId !== newValue) {
+      searchDevice.deviceId = newValue;
+    }
+  },
+  { immediate: true },
+);
+
+const change = e => {
+  store.commit('device/setCurrentDeviceId', e);
+};
 
 const onSubmit = () => {
   searchDeviceForm.value.validate(() => {
-    const { device } = searchDevice;
-    emit('search', { deviceId: device });
+    emit('search');
   });
 };
 </script>
diff --git a/src/store/index.js b/src/store/index.js
index 37706ae..d06b59f 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -9,7 +9,6 @@ export default createStore({
   getters: {},
   mutations: {
     toggleCollapse(state) {
-      console.log('1');
       state.menu.collapse = !state.menu.collapse;
     },
   },
diff --git a/src/views/data-history.vue b/src/views/data-history.vue
index f1d9251..a436243 100644
--- a/src/views/data-history.vue
+++ b/src/views/data-history.vue
@@ -9,6 +9,7 @@ const page = ref({ page: 2, size: 10 });
 let timer = null;
 const store = useStore();
 const token = computed(() => store.getters['user/token']);
+const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
 let contentHeight = 600;
 const data = ref(null);
 
@@ -16,8 +17,12 @@ const data = ref(null);
 const getData = async () => {
   try {
     if (token) {
-      const params = { search: { ...search.value }, page: { page: page.value.page, size: page.value.size } };
-      console.log('params: ', params);
+      const options = { ...search.value };
+      const date = options && options.date ? options.date : [];
+      const params = {
+        search: { deviceId: currentDeviceId.value, date },
+        page: { page: page.value.page, size: page.value.size },
+      };
       const resData = await getHistories(params);
       data.value = resData.data;
       page.value = resData.page;
diff --git a/src/views/device-list.vue b/src/views/device-list.vue
index 4d6c85b..231a32d 100644
--- a/src/views/device-list.vue
+++ b/src/views/device-list.vue
@@ -91,14 +91,18 @@ const editting = ref(false);
 
 // 获取设备完整信息列表
 const getDevicesAllData = () => {
-  if (token) {
-    store.dispatch('device/getDevicesAll');
-    timer && clearTimeout(timer);
-    timer = null;
-  } else {
-    timer = setTimeout(() => {
-      getDevicesAllData();
-    });
+  try {
+    if (token) {
+      store.dispatch('device/getDevicesAll');
+      timer && clearTimeout(timer);
+      timer = null;
+    } else {
+      timer = setTimeout(() => {
+        getDevicesAllData();
+      });
+    }
+  } catch (error) {
+    console.log('error: ', error);
   }
 };
 
diff --git a/src/views/month-data.vue b/src/views/month-data.vue
index 2215509..20c9954 100644
--- a/src/views/month-data.vue
+++ b/src/views/month-data.vue
@@ -1,5 +1,5 @@
 <template>
-  <DataSearchBar @getDate="getDate" />
+  <DataSearchBar @search="getDate" />
   <IntegralElectric ref="child1" class="mt-4" />
   <TotalCorrosion ref="child2" class="mt-4" />
   <MoistTime ref="child3" class="mt-4" />
@@ -23,26 +23,37 @@ const token = computed(() => store.getters['user/token']);
 const electricData = computed(() => store.state.statistics.electricData);
 const corrosionData = computed(() => store.state.statistics.corrosionData);
 const moistTimeData = computed(() => store.state.statistics.moistTimeData);
+const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
 
 // 获取月累计数据
+/**
+ * 获取月累计数据
+ * @param {*} deviceId // 站点 设备id
+ * @param {*} date // 年月时间段
+ * @param {*} sort // 1 -> 按时间正序 -1->按时间倒序
+ */
 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->按时间倒序
-    };
-    await store.dispatch('statistics/getMonthsDate', params);
-    timer && clearTimeout(timer);
-    timer = null;
-    // 渲染图表
-    child1.value.setDate(electricData.value);
-    child2.value.setDate(corrosionData.value);
-    child3.value.setDate(moistTimeData.value);
-  } else {
-    timer = setTimeout(() => {
-      getDate();
-    });
+  try {
+    if (token) {
+      const params = {
+        deviceId: currentDeviceId.value,
+        date: options && options.date && options.date.length ? options.date : [],
+        sort: 1,
+      };
+      await store.dispatch('statistics/getMonthsDate', params);
+      timer && clearTimeout(timer);
+      timer = null;
+      // 渲染图表
+      child1.value.setDate(electricData.value);
+      child2.value.setDate(corrosionData.value);
+      child3.value.setDate(moistTimeData.value);
+    } else {
+      timer = setTimeout(() => {
+        getDate();
+      });
+    }
+  } catch (error) {
+    console.log('error: ', error);
   }
 };
 
diff --git a/src/views/statistical-history.vue b/src/views/statistical-history.vue
index ff26912..8894060 100644
--- a/src/views/statistical-history.vue
+++ b/src/views/statistical-history.vue
@@ -1,5 +1,5 @@
 <template>
-  <SearchBar @search="getDate" />
+  <SearchBar @search="onSearch" />
   <HistoryData ref="childRef" class="mt-4" />
 </template>
 
@@ -15,17 +15,8 @@ let timer = 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}`;
-};
+const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
+const search = ref({});
 
 /**
  * 历史数据统计
@@ -36,18 +27,13 @@ const formatDate = date => {
  * @param {*} size // 每页多少条
  * @param {*} type // 0查全部
  */
-const getDate = async options => {
+const getDate = async () => {
   try {
     if (token) {
-      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 options = { ...search.value };
       const params = {
-        deviceId: options && options.deviceId ? options.deviceId : '',
-        date: options && options.date && options.date.length ? options.date : date,
+        deviceId: currentDeviceId.value,
+        date: options && options.date && options.date.length ? options.date : [],
         sort: 1,
         page: 1,
         size: 10,
@@ -68,4 +54,13 @@ const getDate = async options => {
 };
 
 getDate();
+
+/**
+ * 监听search信息
+ * @param {object} payload search组件emit的数据
+ */
+const onSearch = payload => {
+  search.value = { ...payload };
+  getDate();
+};
 </script>
diff --git a/src/views/statistical-realtime.vue b/src/views/statistical-realtime.vue
index 6f8ab23..2ea2395 100644
--- a/src/views/statistical-realtime.vue
+++ b/src/views/statistical-realtime.vue
@@ -4,10 +4,11 @@
 </template>
 
 <script setup>
-import { computed, ref, onUnmounted } from 'vue';
-import { useStore } from 'vuex';
 import SearchBar from 'components/search-bar.vue';
 import RealtimeData from 'components/realtime-data.vue';
+import { computed, ref, onUnmounted } from 'vue';
+import { useStore } from 'vuex';
+import dayjs from 'dayjs';
 
 const childRef = ref(null);
 
@@ -16,17 +17,7 @@ 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}`;
-};
+const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
 
 /**
  * 实时数据统计
@@ -37,15 +28,15 @@ const formatDate = date => {
  * @param {*} size // 每页多少条
  * @param {*} type // 0查全部
  */
-const getDate = async options => {
+const getDate = async () => {
   try {
     if (token) {
       const startTime = new Date(new Date(new Date().toLocaleDateString()).getTime());
-      const start = formatDate(startTime);
-      const end = formatDate(new Date());
+      const start = dayjs(startTime).format('X');
+      const end = dayjs(new Date()).format('X');
 
       const params = {
-        deviceId: options && options.deviceId ? options.deviceId : '',
+        deviceId: currentDeviceId.value,
         date: [start, end],
         sort: 1,
         page: 1,