完善统计图

src/apis/index.js

@@ -13,11 +13,8 @@ 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 getMonthesDate = params => http.get(`${corrosion}/statistics/monthes`, { params });
 
-// 获取数据统计 月累计腐蚀
+// 获取实时数据统计
-export const getTotalCorrosion = () => http.get(`${corrosion}/monthes/totalCorrosion`);
+export const getRealtimeData = params => http.get(`${corrosion}/statistics/realtime`, { params });
-
-// 获取数据统计 月累计湿润时间图
-export const getMoistTime = () => http.get(`${corrosion}/monthes/moistTime`);

src/components/data-search-bar.vue

@@ -0,0 +1,62 @@
+<template>
+  <el-form :inline="true" :model="searchDevice" ref="searchDeviceForm">
+    <el-form-item label="选择站点">
+      <el-select v-model="searchDevice.device" placeholder="请选择站点">
+        <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="选择日期" class="ml-6">
+      <el-date-picker
+        v-model="searchDevice.value1"
+        type="monthrange"
+        range-separator="~"
+        start-placeholder="开始月份"
+        end-placeholder="结束月份"
+      >
+      </el-date-picker>
+    </el-form-item>
+    <el-form-item class="ml-6">
+      <el-button type="primary" @click="onSubmit">查询</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { reactive, ref, computed, defineEmits } from 'vue';
+import { useStore } from 'vuex';
+
+const emit = defineEmits(['getDate']);
+
+const searchDevice = reactive({ device: '', value1: '' });
+
+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}`;
+};
+
+const onSubmit = () => {
+  searchDeviceForm.value.validate(valid => {
+    if (valid) {
+      const options = { ...searchDevice };
+      let date = [];
+      if (options.value1) {
+        const start = timeChange([...options.value1][0]);
+        const end = timeChange([...options.value1][1]);
+        date = [start, end];
+      }
+      const params = { deviceId: options.device, date };
+      emit('getDate', params);
+    }
+  });
+};
+</script>

src/components/history-data.vue

@@ -0,0 +1,115 @@
+<template>
+  <el-card class="box-card">
+    <el-empty description="暂无数据" v-if="noData"></el-empty>
+    <div id="realtimeContainer"></div>
+  </el-card>
+</template>
+
+<script setup>
+import { onMounted, ref, defineExpose } from 'vue';
+import { Line } from '@antv/g2plot';
+
+const show = ref(false);
+const noData = ref(true);
+let bar = null;
+
+// 设置图表
+onMounted(() => {
+  show.value = true;
+  noData.value = false;
+});
+
+// 设置图表
+const setDate = data => {
+  noData.value = false;
+  if (bar) {
+    bar.destroy();
+  }
+  bar = new Line('realtimeContainer', {
+    data,
+    padding: 'auto',
+    xField: 'time',
+    yField: 'value',
+    seriesField: 'category',
+    slider: {
+      start: 0.1,
+      end: 0.2,
+    },
+    height: 700,
+    // smooth: true,
+    point: {
+      size: 2,
+      shape: 'circular',
+      style: {
+        fill: 'white',
+        lineWidth: 2,
+      },
+    },
+  });
+
+  bar.render();
+};
+
+// 处理数据
+const changeDate = value => {
+  if (!value.length) return;
+  const arr = [];
+  value.forEach(element => {
+    const item = { ...element };
+
+    const so2Item = { category: 'SO2' };
+    const saltItem = { category: '盐分' };
+    const environmentTemperatureItem = { category: '环温' };
+    const environmentHumidityItem = { category: '环湿' };
+    const deviceTemperatureItem = { category: '机温' };
+    const deviceHumidityItem = { category: '机湿' };
+    const corrosion1Item = { category: '腐流1' };
+    const corrosion2Item = { category: '腐流2' };
+    const corrosion3Item = { category: '腐流3' };
+    const corrosion4Item = { category: '腐流4' };
+
+    so2Item.time = item.time;
+    so2Item.value = item.so2;
+    arr.push(so2Item);
+
+    saltItem.time = item.time;
+    saltItem.value = item.salt;
+    arr.push(saltItem);
+
+    environmentTemperatureItem.time = item.time;
+    environmentTemperatureItem.value = item.environmentTemperature;
+    arr.push(environmentTemperatureItem);
+
+    environmentHumidityItem.time = item.time;
+    environmentHumidityItem.value = item.environmentHumidity;
+    arr.push(environmentHumidityItem);
+
+    deviceTemperatureItem.time = item.time;
+    deviceTemperatureItem.value = item.deviceTemperature;
+    arr.push(deviceTemperatureItem);
+
+    deviceHumidityItem.time = item.time;
+    deviceHumidityItem.value = item.deviceHumidity;
+    arr.push(deviceHumidityItem);
+
+    corrosion1Item.time = item.time;
+    corrosion1Item.value = item.corrosion1;
+    arr.push(corrosion1Item);
+
+    corrosion2Item.time = item.time;
+    corrosion2Item.value = item.corrosion2;
+    arr.push(corrosion2Item);
+
+    corrosion3Item.time = item.time;
+    corrosion3Item.value = item.corrosion3;
+    arr.push(corrosion3Item);
+
+    corrosion4Item.time = item.time;
+    corrosion4Item.value = item.corrosion4;
+    arr.push(corrosion4Item);
+  });
+  setDate(arr);
+};
+
+defineExpose({ changeDate });
+</script>

src/components/integral-electric.vue

@@ -1,51 +1,51 @@
 <template>
-  <div id="container"></div>
+  <el-card class="box-card">
+    <div class="text-sm">积分电量(C)</div>
+    <el-empty description="暂无数据" v-if="noData"></el-empty>
+    <div id="container"></div>
+  </el-card>
 </template>
 
 <script setup>
-import { onMounted, computed } from 'vue';
+import { onMounted, ref, defineExpose } from 'vue';
-import { Bar } from '@antv/g2plot';
+import { Column } from '@antv/g2plot';
-import { useStore } from 'vuex';
 
-let timer = null;
+const show = ref(false);
-const store = useStore();
+const noData = ref(true);
-const token = computed(() => store.getters['user/token']);
+let bar = null;
-const electricData = computed(() => store.state.statistics.electricData);
 
-// 获取积分电量数据
+// 设置图表
-const getElectricData = async () => {
+onMounted(() => {
-  if (token) {
+  show.value = true;
-    await store.dispatch('statistics/getElectricData');
+});
-    timer && clearTimeout(timer);
-    timer = null;
-  } else {
-    timer = setTimeout(() => {
-      getElectricData();
-    });
-  }
-};
 
-// 设置表格高度
+const setDate = data => {
-onMounted(async () => {
+  noData.value = false;
-  await getElectricData();
+  if (bar) {
-  const bar = new Bar('container', {
+    bar.destroy();
-    title: '积分电量',
+  }
-    data: electricData.value,
+  bar = new Column('container', {
-    xField: 'value',
+    data,
-    yField: 'year',
+    layout: 'vertical',
-    // legend: {
+    xField: 'time',
-    //   position: 'top-left',
+    yField: 'value',
-    // },
+    padding: [30, 16, 60, 50],
+    columnWidthRatio: 0.6, // 宽度占比
+    yAxis: {
+      title: {
+        text: '积分电量',
+        spacing: 20,
+      },
+    },
     slider: {
       start: 0.1,
-      end: 0.2,
+      end: 0.5,
-    },
-    meta: {
-      value: { alias: '积分电量' },
-      year: { alias: '年月' },
     },
+    meta: { value: { alias: '积分电量(C)' } },
   });
 
   bar.render();
-});
+};
+
+defineExpose({ setDate });
 </script>

src/components/moist-time.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-card class="box-card">
+    <div class="text-sm">月累计湿润时间（h）</div>
+    <el-empty description="暂无数据" v-if="noData"></el-empty>
+    <div id="moistTimeDataContainer"></div>
+  </el-card>
+</template>
+
+<script setup>
+import { onMounted, ref, defineExpose } from 'vue';
+import { Column } from '@antv/g2plot';
+
+const show = ref(false);
+const noData = ref(true);
+let bar = null;
+
+// 设置图表
+onMounted(() => {
+  show.value = true;
+});
+
+const setDate = data => {
+  noData.value = false;
+  if (bar) {
+    bar.destroy();
+  }
+  bar = new Column('moistTimeDataContainer', {
+    data,
+    layout: 'vertical',
+    xField: 'time',
+    yField: 'value',
+    // height: 200,
+    padding: [30, 16, 60, 50],
+    color: '#C280FF',
+    columnWidthRatio: 0.6, // 宽度占比
+    yAxis: {
+      title: {
+        text: '月累计湿润时间',
+        spacing: 20,
+      },
+    },
+    slider: {
+      start: 0.1,
+      end: 0.5,
+    },
+    meta: { value: { alias: '月累计湿润时间（h）' } },
+  });
+
+  bar.render();
+};
+
+defineExpose({ setDate });
+</script>

src/components/realtime-data.vue

@@ -0,0 +1,115 @@
+<template>
+  <el-card class="box-card">
+    <el-empty description="暂无数据" v-if="noData"></el-empty>
+    <div id="realtimeContainer"></div>
+  </el-card>
+</template>
+
+<script setup>
+import { onMounted, ref, defineExpose } from 'vue';
+import { Line } from '@antv/g2plot';
+
+const show = ref(false);
+const noData = ref(true);
+let bar = null;
+
+// 设置图表
+onMounted(() => {
+  show.value = true;
+  noData.value = false;
+});
+
+// 设置图表
+const setDate = data => {
+  noData.value = false;
+  if (bar) {
+    bar.destroy();
+  }
+  bar = new Line('realtimeContainer', {
+    data,
+    padding: 'auto',
+    xField: 'time',
+    yField: 'value',
+    seriesField: 'category',
+    slider: {
+      start: 0.1,
+      end: 0.2,
+    },
+    height: 700,
+    // smooth: true,
+    point: {
+      size: 2,
+      shape: 'circular',
+      style: {
+        fill: 'white',
+        lineWidth: 2,
+      },
+    },
+  });
+
+  bar.render();
+};
+
+// 处理数据
+const changeDate = value => {
+  if (!value.length) return;
+  const arr = [];
+  value.forEach(element => {
+    const item = { ...element };
+
+    const so2Item = { category: 'SO2' };
+    const saltItem = { category: '盐分' };
+    const environmentTemperatureItem = { category: '环温' };
+    const environmentHumidityItem = { category: '环湿' };
+    const deviceTemperatureItem = { category: '机温' };
+    const deviceHumidityItem = { category: '机湿' };
+    const corrosion1Item = { category: '腐流1' };
+    const corrosion2Item = { category: '腐流2' };
+    const corrosion3Item = { category: '腐流3' };
+    const corrosion4Item = { category: '腐流4' };
+
+    so2Item.time = item.time;
+    so2Item.value = item.so2;
+    arr.push(so2Item);
+
+    saltItem.time = item.time;
+    saltItem.value = item.salt;
+    arr.push(saltItem);
+
+    environmentTemperatureItem.time = item.time;
+    environmentTemperatureItem.value = item.environmentTemperature;
+    arr.push(environmentTemperatureItem);
+
+    environmentHumidityItem.time = item.time;
+    environmentHumidityItem.value = item.environmentHumidity;
+    arr.push(environmentHumidityItem);
+
+    deviceTemperatureItem.time = item.time;
+    deviceTemperatureItem.value = item.deviceTemperature;
+    arr.push(deviceTemperatureItem);
+
+    deviceHumidityItem.time = item.time;
+    deviceHumidityItem.value = item.deviceHumidity;
+    arr.push(deviceHumidityItem);
+
+    corrosion1Item.time = item.time;
+    corrosion1Item.value = item.corrosion1;
+    arr.push(corrosion1Item);
+
+    corrosion2Item.time = item.time;
+    corrosion2Item.value = item.corrosion2;
+    arr.push(corrosion2Item);
+
+    corrosion3Item.time = item.time;
+    corrosion3Item.value = item.corrosion3;
+    arr.push(corrosion3Item);
+
+    corrosion4Item.time = item.time;
+    corrosion4Item.value = item.corrosion4;
+    arr.push(corrosion4Item);
+  });
+  setDate(arr);
+};
+
+defineExpose({ changeDate });
+</script>

src/components/total-corrosion.vue

@@ -0,0 +1,52 @@
+<template>
+  <el-card class="box-card">
+    <div class="text-sm">月累计腐蚀（g/m²）</div>
+    <el-empty description="暂无数据" v-if="noData"></el-empty>
+    <div id="corrosionContainer"></div>
+  </el-card>
+</template>
+
+<script setup>
+import { onMounted, ref, defineExpose } from 'vue';
+import { Column } from '@antv/g2plot';
+
+const show = ref(false);
+const noData = ref(true);
+let bar = null;
+
+// 设置图表
+onMounted(() => {
+  show.value = true;
+});
+
+const setDate = data => {
+  noData.value = false;
+  if (bar) {
+    bar.destroy();
+  }
+  bar = new Column('corrosionContainer', {
+    data,
+    layout: 'vertical',
+    xField: 'time',
+    yField: 'value',
+    padding: [30, 16, 60, 50],
+    color: '#70B603',
+    columnWidthRatio: 0.6, // 宽度占比
+    yAxis: {
+      title: {
+        text: '月累计腐蚀',
+        spacing: 20,
+      },
+    },
+    slider: {
+      start: 0.1,
+      end: 0.5,
+    },
+    meta: { value: { alias: '月累计腐蚀（g/m²）' } },
+  });
+
+  bar.render();
+};
+
+defineExpose({ setDate });
+</script>

src/routers/index.js

@@ -33,6 +33,18 @@ export const routes = [
     meta: { title: '月累计数据分析' },
     component: () => import('@/views/month-data.vue'),
   },
+  {
+    path: '/statistical-realtime',
+    name: 'statistical-realtime',
+    meta: { title: '实时数据统计' },
+    component: () => import('@/views/statistical-realtime.vue'),
+  },
+  {
+    path: '/statistical-history',
+    name: 'statistical-history',
+    meta: { title: '历史数据统计' },
+    component: () => import('@/views/statistical-history.vue'),
+  },
   {
     path: '/test',
     name: 'test',

src/store/statistics.js

@@ -1,4 +1,4 @@
-import { getIntegralElectric, getTotalCorrosion, getMoistTime } from 'apis/index';
+import { getMonthesDate, getRealtimeData } from 'apis/index';
 
 export default {
   namespaced: true,
@@ -7,6 +7,7 @@ export default {
     electricData: null,
     corrosionData: null,
     moistTimeData: null,
+    realtimeData: null,
   },
 
   getters: {},
@@ -18,7 +19,6 @@ export default {
      * @param {array} data
      */
     setElectricData(state, data) {
-      console.log('data: ', data);
       state.electricData = data;
     },
 
@@ -39,36 +39,36 @@ export default {
     setMoistTimeData(state, data) {
       state.moistTimeData = data;
     },
+
+    /**
+     * 设置实时数据统计的数据
+     * @param {*} state
+     * @param {*} data
+     */
+    setRealtimeData(state, data) {
+      state.realtimeData = data;
+    },
   },
 
   actions: {
     // 获取积分电量数据
-    async getElectricData({ commit }) {
+    async getMonthesDate({ commit }, params) {
-      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();
+        const data = await getMonthesDate(params);
-        commit('setCorrosionData', data || null);
+        commit('setElectricData', data.powers || null);
+        commit('setCorrosionData', data.corrosions || null);
+        commit('setMoistTimeData', data.humids || null);
         return data;
       } catch (error) {
         throw new Error(error);
       }
     },
 
-    // 获取月累计湿润时间图数据
+    // 获取实时数据统计数据
-    async getMoistTimeData({ commit }) {
+    async getRealtimeData({ commit }, params) {
       try {
-        const data = await getMoistTime();
+        const data = await getRealtimeData(params);
-        commit('setMoistTimeData', data || null);
+        commit('setRealtimeData', data || null);
         return data;
       } catch (error) {
         throw new Error(error);

src/views/month-data.vue

@@ -1,9 +1,50 @@
 <template>
-  <SearchBar />
+  <DataSearchBar @getDate="getDate" />
-  <IntegralElectric />
+  <IntegralElectric ref="child1" class="mt-4" />
+  <TotalCorrosion ref="child2" class="mt-4" />
+  <MoistTime ref="child3" class="mt-4" />
 </template>
 
 <script setup>
-import SearchBar from 'components/search-bar.vue';
+import DataSearchBar from 'components/data-search-bar.vue';
 import IntegralElectric from 'components/integral-electric.vue';
+import TotalCorrosion from 'components/total-corrosion.vue';
+import MoistTime from 'components/moist-time.vue';
+import { computed, ref } from 'vue';
+import { useStore } from 'vuex';
+
+const child1 = ref(null);
+const child2 = ref(null);
+const child3 = ref(null);
+
+let timer = null;
+const store = useStore();
+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 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/getMonthesDate', 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();
+    });
+  }
+};
+
+getDate();
 </script>

src/views/statistical-history.vue

@@ -0,0 +1,41 @@
+<template>
+  <DataSearchBar @getDate="getDate" />
+  <HistoryData ref="childRef" class="mt-4" />
+</template>
+
+<script setup>
+import DataSearchBar from 'components/data-search-bar.vue';
+import HistoryData from 'components/history-data.vue';
+import { computed, ref } from 'vue';
+import { useStore } from 'vuex';
+
+const childRef = ref(null);
+
+let timer = null;
+const store = useStore();
+const token = computed(() => store.getters['user/token']);
+const realtimeData = computed(() => store.state.statistics.realtimeData);
+
+// 实时数据统计
+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();
+    });
+  }
+};
+
+getDate();
+</script>

src/views/statistical-realtime.vue

@@ -0,0 +1,41 @@
+<template>
+  <DataSearchBar @getDate="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 { useStore } from 'vuex';
+
+const childRef = ref(null);
+
+let timer = null;
+const store = useStore();
+const token = computed(() => store.getters['user/token']);
+const realtimeData = computed(() => store.state.statistics.realtimeData);
+
+// 实时数据统计
+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();
+    });
+  }
+};
+
+getDate();
+</script>