fix: statistic tooltips

models/send_tasks_logs.go

@@ -127,8 +127,11 @@ type StatisticData struct {
 }
 
 type LatestSendData struct {
-	Day string `json:"day"`
-	Num int    `json:"num"`
+	Day          string `json:"day"`
+	Num          int    `json:"num"`
+	SuccNum      int    `json:"succ_num"`
+	DaySuccNum   int    `json:"day_succ_num"`
+	DayFailedNum int    `json:"day_failed_num"`
 }
 
 type WayCateData struct {
@@ -161,6 +164,8 @@ SUM(CASE WHEN status != 1 or status is null THEN 1 ELSE 0 END) AS today_failed_n
 		Table(logt).
 		Select(`
     CAST(DATE(created_on) AS CHAR) AS day,
+	SUM(CASE WHEN status = 1 THEN 1 ELSE 0 END) AS day_succ_num,
+	SUM(CASE WHEN status != 1 or status is null THEN 1 ELSE 0 END) AS day_failed_num,
     COUNT(*) AS num`).
 		Where(" created_on >= CURDATE() - INTERVAL ? DAY", days).
 		Group("DATE(created_on)").

web/src/echarts.js

@@ -10,6 +10,7 @@ import {
     GridComponent,
     DatasetComponent,
     TransformComponent,
+    LegendComponent,
 } from "echarts/components";
 
 // 标签自动布局，全局过渡动画等特性
@@ -28,6 +29,7 @@ echarts.use([
     PieChart,
     LabelLayout,
     UniversalTransition,
+    LegendComponent,
     CanvasRenderer,
     LineChart,
 ]);

web/src/views/tabsTools/statistic/statistic.vue

@@ -46,8 +46,8 @@
       <el-divider />
 
       <div class="echarts-box">
-        <div id="daily-chart" style="width: 65%; height: 350px;"></div>
-        <div id="send-cate-chart" style="width: 35%; height: 350px;"></div>
+        <div ref="dailyChart" style="width: 65%; height: 350px;"></div>
+        <div ref="sendCateChart" style="width: 35%; height: 320px;"></div>
       </div>
 
     </div>
@@ -61,7 +61,7 @@ import {
   CaretTop,
   Warning,
 } from '@element-plus/icons-vue'
-import { reactive, toRefs, onMounted, onUnmounted, inject } from 'vue'
+import { reactive, toRefs, onMounted, onUnmounted, inject, ref } from 'vue'
 import { request } from '@/api/api'
 import { useRouter } from 'vue-router';
 import { CommonUtils } from "@/util/commonUtils.js";
@@ -71,11 +71,12 @@ export default {
     ArrowRight,
   },
   setup() {
+    const dailyChart = ref(null);
+    const sendCateChart = ref(null);
     const router = useRouter();
     const state = reactive({
       data: {},
-      dailyChart: {},
-      sendCateChart: {},
+      displayCharts: [],
     });
 
     const echart = inject('$echarts');
@@ -112,24 +113,33 @@ export default {
     });
 
     onUnmounted(() => {
-      state.dailyChart.dispose();
-      state.sendCateChart.dispose();
+      state.displayCharts.forEach(element => {
+        element.dispose();
+      });
     });
 
+    const getLasteDetailData = (key) => {
+      let result = [];
+      state.data.latest_send_data.forEach(element => {
+        result.push(element[key]);
+      })
+      return result;
+    }
+
     // 最近30天数据图
     function initDailyChart() {
-      state.dailyChart = echart.init(document.getElementById("daily-chart"));
+      let chartobj = echart.init(dailyChart.value);
+      state.displayCharts.push(chartobj);
 
       let xAxisdata = [];
       state.data.latest_send_data.forEach(element => {
         xAxisdata.push(element.day);
       });
-      let yAxisdata = [];
-      state.data.latest_send_data.forEach(element => {
-        yAxisdata.push(element.num);
-      });
 
-      state.dailyChart.setOption({
+      chartobj.setOption({
+        tooltip: {
+          trigger: 'axis'
+        },
         title: {
           subtext: '最近消息30天发送数据',
           top: 0,
@@ -139,7 +149,8 @@ export default {
           },
         },
         xAxis: {
-          type: "category",
+          type: 'category',
+          boundaryGap: false,
           data: xAxisdata
         },
         tooltip: {
@@ -148,28 +159,46 @@ export default {
         yAxis: {
           type: "value"
         },
+        // legend: {
+        //   data: ['发送数', '成功数', '失败数']
+        // },
         series: [
           {
-            data: yAxisdata,
+            name: '发送数',
+            data: getLasteDetailData('num'),
             type: "line",
             smooth: true
-          }
+          },
+          {
+            name: '成功数',
+            data: getLasteDetailData('day_succ_num'),
+            type: "line",
+            smooth: true
+          },
+          {
+            name: '失败数',
+            data: getLasteDetailData('day_failed_num'),
+            type: "line",
+            smooth: true
+          },
         ]
       });
 
-      window.onresize = function () {
-        state.dailyChart.resize();
-      };
     }
 
     // 发送消息实例类别图
     function initSendCateChart() {
-      state.sendCateChart = echart.init(document.getElementById("send-cate-chart"));
+      let chartobj = echart.init(sendCateChart.value);
+      state.displayCharts.push(chartobj);
+
       let data = [];
       state.data.way_cate_data.forEach(element => {
         data.push({ name: element.way_name, value: element.count_num });
       });
-      state.sendCateChart.setOption({
+      chartobj.setOption({
+        tooltip: {
+          trigger: 'item'
+        },
         grid: {
           width: '60%',
           height: '60%',
@@ -191,14 +220,10 @@ export default {
           }
         ]
       });
-
-      window.onresize = function () {
-        state.sendCateChart.resize();
-      };
     }
 
     return {
-      ...toRefs(state), formatFailedNumStyle, clickErrorNumDetail
+      ...toRefs(state), formatFailedNumStyle, clickErrorNumDetail, dailyChart, sendCateChart
     };
   }
 }