添加月累计数据统计界面

package.json

@@ -12,15 +12,16 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@antv/g2plot": "^2.3.39",
+    "@vitejs/plugin-vue": "^1.9.3",
     "axios": "^0.23.0",
-    "element-plus": "^1.1.0-beta.21",
+    "element-plus": "^1.1.0-beta.24",
+    "vite": "^2.6.4",
+    "vite-plugin-windicss": "^1.4.11",
     "vue": "^3.2.16",
     "vue-router": "^4.0.12",
     "vuex": "^4.0.2",
-    "windicss": "^3.1.9",
-    "@vitejs/plugin-vue": "^1.9.3",
-    "vite": "^2.6.4",
-    "vite-plugin-windicss": "^1.4.11"
+    "windicss": "^3.1.9"
   },
   "devDependencies": {
     "@commitlint/cli": "^13.2.1",

src/apis/index.js

@@ -12,3 +12,12 @@ export const getDevices = () => http.get(`${corrosion}/devices`);
 
 // 获取设备列表 完整信息
 export const getDevicesAll = () => http.get(`${corrosion}/devices/all`);
+
+// 获取数据统计 积分电量
+export const getIntegralElectric = () => http.get(`${corrosion}/monthes/integralElectric`);
+
+// 获取数据统计 月累计腐蚀
+export const getTotalCorrosion = () => http.get(`${corrosion}/monthes/totalCorrosion`);
+
+// 获取数据统计 月累计湿润时间图
+export const getMoistTime = () => http.get(`${corrosion}/monthes/moistTime`);

src/components/integral-electric.vue

@@ -0,0 +1,51 @@
+<template>
+  <div id="container"></div>
+</template>
+
+<script setup>
+import { onMounted, computed } from 'vue';
+import { Bar } from '@antv/g2plot';
+import { useStore } from 'vuex';
+
+let timer = null;
+const store = useStore();
+const token = computed(() => store.getters['user/token']);
+const electricData = computed(() => store.state.statistics.electricData);
+
+// 获取积分电量数据
+const getElectricData = async () => {
+  if (token) {
+    await store.dispatch('statistics/getElectricData');
+    timer && clearTimeout(timer);
+    timer = null;
+  } else {
+    timer = setTimeout(() => {
+      getElectricData();
+    });
+  }
+};
+
+// 设置表格高度
+onMounted(async () => {
+  await getElectricData();
+  const bar = new Bar('container', {
+    title: '积分电量',
+    data: electricData.value,
+    xField: 'value',
+    yField: 'year',
+    // legend: {
+    //   position: 'top-left',
+    // },
+    slider: {
+      start: 0.1,
+      end: 0.2,
+    },
+    meta: {
+      value: { alias: '积分电量' },
+      year: { alias: '年月' },
+    },
+  });
+
+  bar.render();
+});
+</script>

src/routers/index.js

@@ -27,6 +27,12 @@ export const routes = [
     meta: { title: '设备管理' },
     component: () => import('@/views/device-list.vue'),
   },
+  {
+    path: '/monthes',
+    name: 'monthes',
+    meta: { title: '月累计数据分析' },
+    component: () => import('@/views/month-data.vue'),
+  },
   {
     path: '/test',
     name: 'test',

src/store/index.js

@@ -1,9 +1,10 @@
 import { createStore } from 'vuex';
 import device from './device';
 import user from './user';
+import statistics from './statistics';
 
 export default createStore({
-  modules: { user, device },
+  modules: { user, device, statistics },
   state: {},
   getters: {},
   mutations: {},

src/store/statistics.js

@@ -0,0 +1,78 @@
+import { getIntegralElectric, getTotalCorrosion, getMoistTime } from 'apis/index';
+
+export default {
+  namespaced: true,
+
+  state: {
+    electricData: null,
+    corrosionData: null,
+    moistTimeData: null,
+  },
+
+  getters: {},
+
+  mutations: {
+    /**
+     * 设置积分电量数据
+     * @param {*} state
+     * @param {array} data
+     */
+    setElectricData(state, data) {
+      console.log('data: ', data);
+      state.electricData = data;
+    },
+
+    /**
+     * 设置月累计腐蚀的数据
+     * @param {*} state
+     * @param {*} data
+     */
+    setCorrosionData(state, data) {
+      state.corrosionData = data;
+    },
+
+    /**
+     * 设置月累计湿润时间图的数据
+     * @param {*} state
+     * @param {*} data
+     */
+    setMoistTimeData(state, data) {
+      state.moistTimeData = data;
+    },
+  },
+
+  actions: {
+    // 获取积分电量数据
+    async getElectricData({ commit }) {
+      try {
+        const data = await getIntegralElectric();
+        commit('setElectricData', data || null);
+        return data;
+      } catch (error) {
+        throw new Error(error);
+      }
+    },
+
+    // 获取月累计腐蚀数据
+    async getCorrosionData({ commit }) {
+      try {
+        const data = await getTotalCorrosion();
+        commit('setCorrosionData', data || null);
+        return data;
+      } catch (error) {
+        throw new Error(error);
+      }
+    },
+
+    // 获取月累计湿润时间图数据
+    async getMoistTimeData({ commit }) {
+      try {
+        const data = await getMoistTime();
+        commit('setMoistTimeData', data || null);
+        return data;
+      } catch (error) {
+        throw new Error(error);
+      }
+    },
+  },
+};

src/views/month-data.vue

@@ -0,0 +1,9 @@
+<template>
+  <SearchBar />
+  <IntegralElectric />
+</template>
+
+<script setup>
+import SearchBar from 'components/search-bar.vue';
+import IntegralElectric from 'components/integral-electric.vue';
+</script>