实现首页委办-应用-接口三级统计

src/api/count.js

@@ -0,0 +1,169 @@
+import {
+    postform
+} from '../utils/request'
+
+const dmsPath = "http://127.0.0.1:10081/dms"
+
+const multiSearch = dmsPath + "/content/multipleFormsOfJointInvestigation"
+
+
+export async function countUnitUse(start, end) {
+    let data = {
+        "columnId": 1652,
+        "conditionsList": JSON.stringify([
+            ...notNullAndEmptyCheckers("precount","c_path_comment"),
+            ...notNullAndEmptyCheckers("precount","c_application"),
+            ...notNullAndEmptyCheckers("precount","c_unit"),
+            ...timeCheckers(start, end)
+        ]),
+        "autoSelectItem": false,
+        "page": 1,
+        "pageSize": 2000,
+        "columnAlias": "precount",
+        "selectItem": JSON.stringify([
+            {
+                "table": "precount",
+                "column": "c_unit",
+                "alias": "name"
+            },
+            {
+                "table": "precount",
+                "column": "c_count",
+                "function": "sum",
+                "alias": "count"
+            }
+        ]),
+        "groupBy": JSON.stringify([
+            {
+                "table": "precount",
+                "column": "c_unit"
+            }
+        ])
+    }
+    return resolveDmsMultiTableResult(postform(multiSearch, data));
+}
+
+export async function countAppUseByUnitName(start, end, unitName) {
+    let data = {
+        "columnId": 1652,
+        "conditionsList": JSON.stringify([
+            ...notNullAndEmptyCheckers("precount","c_path_comment"),
+            ...notNullAndEmptyCheckers("precount","c_application"),
+            ...timeCheckers(start, end),
+            {
+                "columnId": "precount",
+                "columnName": "c_unit",
+                "condition": "=",
+                "value": unitName
+            },
+        ]),
+        "autoSelectItem": false,
+        "page": 1,
+        "pageSize": 2000,
+        "columnAlias": "precount",
+        "selectItem": JSON.stringify([
+            {
+                "table": "precount",
+                "column": "c_application",
+                "alias": "name"
+            },
+            {
+                "table": "precount",
+                "column": "c_count",
+                "function": "sum",
+                "alias": "count"
+            }
+        ]),
+        "groupBy": JSON.stringify([
+            {
+                "table": "precount",
+                "column": "c_application"
+            }
+        ])
+    }
+
+    return resolveDmsMultiTableResult(postform(multiSearch, data));
+}
+
+export async function countServiceUseByApp(start, end, app) {
+    let data = {
+        "columnId": 1652,
+        "conditionsList": JSON.stringify([
+            ...notNullAndEmptyCheckers("precount","c_path_comment"),
+            ...timeCheckers(start, end),
+            {
+                "columnId": "precount",
+                "columnName": "c_application",
+                "condition": "=",
+                "value": app
+            },
+        ]),
+        "autoSelectItem": false,
+        "page": 1,
+        "pageSize": 2000,
+        "columnAlias": "precount",
+        "selectItem": JSON.stringify([
+            {
+                "table": "precount",
+                "column": "c_path_comment",
+                "alias": "name"
+            },
+            {
+                "table": "precount",
+                "column": "c_count",
+                "function": "sum",
+                "alias": "count"
+            }
+        ]),
+        "groupBy": JSON.stringify([
+            {
+                "table": "precount",
+                "column": "c_path_comment"
+            }
+        ])
+    }
+
+    return resolveDmsMultiTableResult(postform(multiSearch, data));
+}
+
+function timeCheckers(start, end) {
+    return [
+        {
+            "columnId": "precount",
+            "columnName": "c_date",
+            "condition": ">=",
+            "value": start.toLocaleString('zh-CN')
+
+        },
+        {
+            "columnId": "precount",
+            "columnName": "c_date",
+            "condition": "<",
+            "value": end.toLocaleString('zh-CN')
+        }
+    ]
+}
+function notNullAndEmptyCheckers(targetTable,target) {
+    return [{
+        "columnId": targetTable,
+        "columnName": target,
+        "condition": "is not null"
+    },
+    {
+        "columnId": targetTable,
+        "columnName": target,
+        "condition": "!=",
+        "value": ""
+    }]
+}
+
+async function resolveDmsMultiTableResult(result) {
+    result = await result;
+    if (result.code == 200) {
+        return result.content.data
+    } else if (result.code == 202) {
+        return [];
+    } else {
+        return null;
+    }
+}

src/views/HomePage.vue

@@ -83,14 +83,25 @@
           </div>
         </div>
         <div class="lighter-container" style="flex: 3;">
+          <div class="between-row">
+            <div class="third-title">
+              <el-icon color="#0071e3" size="30px">
+                <Histogram />
+              </el-icon>
+              <div>委办调用情况</div>
 
-          <div class="third-title ">
-            <el-icon color="#0071e3" size="30px">
-              <Histogram />
-            </el-icon>
-            <div>委办调用情况(近7天)</div>
+            </div>
+            <span>
+              <el-button v-show="this.chartMluLevel != 'unit'" text size="large" circle @click="chartMluBack()">
+                <el-icon color="#0071e3" size="30px">
+                  <Back />
+                </el-icon>
+              </el-button>
+              <el-date-picker v-model="chartMluTimeRange" type="daterange" range-separator="到" start-placeholder="开始日期"
+                end-placeholder="结束日期" @change="chartMluFocus()" />
+            </span>
           </div>
-          <div id="echart2"></div>
+          <div id="echartMultiLevelUse"></div>
 
         </div>
       </div>
@@ -448,7 +459,12 @@
 </template>
 
 <script>
+import { countAppUseByUnitName, countServiceUseByApp, countUnitUse } from "@/api/count";
 import * as echarts from "echarts";
+
+let chart1 = null;
+let chartMultiLevelUse = null;
+
 export default {
   name: "Home",
   data() {
@@ -586,14 +602,21 @@ export default {
         ],
       },
       activeUseCase: "dataProcass",
-      chart1: null,
-      chart2: null
+      chartMluLevel: "unit",
+      chartMluUnitName: null,
+      chartMluAppName: null,
+      chartMluTimeRange: null,
+
     };
   },
   mounted() {
     this.handleTotalCallNumber(667507060);
     this.initChart1();
-    this.initChart2();
+    this.initchartMultiLevelUse();
+    const nowDate = new Date();
+    nowDate.setHours(0, 0, 0, 0);
+    this.chartMluTimeRange = [new Date(new Date(nowDate).setDate(nowDate.getDate() - 7)), new Date(nowDate)];
+    this.chartMluFocusRoot()
   },
   methods: {
     gotoDetail() {
@@ -681,17 +704,34 @@ export default {
       };
       // 绘制图表
       myChart.setOption(option);
-      this.chart1 = myChart
+      chart1 = myChart
     },
-    initChart2() {
-      var myChart = echarts.init(document.getElementById("echart2"));
+    initchartMultiLevelUse() {
+      var myChart = echarts.init(document.getElementById("echartMultiLevelUse"));
       let option = {
         tooltip: {
           trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
+          show: true,
+          formatter: '{b}: {c}',
+          backgroundColor: 'rgba(50, 50, 50, 0.7)',
+          borderColor: '#333',
+          textStyle: {
+            color: '#fff'
           }
         },
+        title: {
+          text: '所有委办',
+          left: 'center',
+          top: 20,
+          textStyle: {
+            color: '#fff',
+            fontSize: 18,
+            fontWeight: 'bold'
+          },
+        },
+        axisPointer: {
+          type: 'shadow'
+        },
         grid: {
           left: '3%',
           right: '4%',
@@ -701,7 +741,7 @@ export default {
         xAxis: [
           {
             type: 'value',
-            axisLine: { lineStyle: { color: "#fff" } },
+            axisLine: { lineStyle: { color: "#fff" } }
           }
         ],
         yAxis: [
@@ -709,29 +749,16 @@ export default {
             type: 'category',
             axisLine: { lineStyle: { color: "#fff" } },
             inverse: true,
-            data: [
-              "temperature", "humidity", "score", "age", "price",
-              "quantity", "speed", "distance", "weight", "height",
-              "population", "rating", "level", "voltage", "current",
-              "pressure", "frequency", "duration", "count", "percentage",
-              "altitude", "depth", "width", "length", "area",
-              "volume", "density", "intensity", "efficiency", "accuracy"
-            ],
+            data: [""]
           }
         ],
         series: [
           {
+            cursorSize: 20,
             name: 'Direct',
             type: 'bar',
             barWidth: '60%',
-            data: [
-              25.5, 65, 88.3, 28, 299.99,
-              150, 120.7, 350, 75.2, 180.5,
-              125, 4.7, 3, 220, 15.2,
-              101.3, 50, 3600, 42, 85.5,
-              1500, 300, 45, 120, 2500,
-              600, 1.2, 150, 92.8, 99.1
-            ]
+            data: [0]
           }
         ],
         dataZoom: [
@@ -748,10 +775,167 @@ export default {
       };
 
       myChart.setOption(option);
-      this.chart2 = myChart
+
+      myChart.on("click", this.chartMluClick)
+
+      chartMultiLevelUse = myChart
+    },
+    chartMluFocus(level, farther) {
+      if (level == null) {
+        level = this.chartMluLevel
+      }
+      switch (level) {
+        case "unit":
+        default: {
+          this.chartMluFocusRoot();
+          this.chartMluUpdateTitle("所有委办")
+          break;
+        }
+        case "app": {
+          let unit = farther ?? this.chartMluUnitName ?? ""
+          this.chartMluFocusApp(unit);
+          this.chartMluUpdateTitle("委办："+unit)
+          break;
+        }
+        case "service": {
+          let app = farther ?? this.chartMluAppName ?? ""
+          this.chartMluFocusService(app);
+          this.chartMluUpdateTitle("应用："+app)
+          break;
+        }
+      }
+
+    },
+    chartMluClick(event) {
+      switch (this.chartMluLevel) {
+        case "unit": {
+          this.chartMluLevel = "app";
+          this.chartMluUnitName = event.name
+          break;
+        }
+        case "app": {
+          this.chartMluLevel = "service";
+          this.chartMluAppName = event.name
+          break;
+        }
+        case "service":
+        default: {
+          // do nothing
+        }
+      }
+      this.chartMluFocus();
+    },
+    chartMluBack(level) {
+      //自动回退
+      if (level == null) {
+        switch (this.chartMluLevel) {
+          default:
+          case "unit": level = "unit"; break;
+          case "app": level = "unit"; break;
+          case "service": level = "app"; break;
+        }
+      }
+      this.chartMluLevel = level;
+      this.chartMluFocus()
+    },
+    async chartMluFocusRoot() {
+      const data = await countUnitUse(...this.chartMluTimeRange);
+      const names = [];
+      const values = [];
+      for (let index = 0; index < data.length; index++) {
+        const e = data[index];
+        names.push(e.name);
+        values.push(e.count);
+      }
+      this.chartMluUpdateData(names, values)
+    },
+    async chartMluFocusApp(father) {
+      const data = await countAppUseByUnitName(...this.chartMluTimeRange, father);
+      const names = [];
+      const values = [];
+      for (let index = 0; index < data.length; index++) {
+        const e = data[index];
+        names.push(e.name);
+        values.push(e.count);
+      }
+      this.chartMluUpdateData(names, values)
+    },
+    async chartMluFocusService(father) {
+      const data = await countServiceUseByApp(...this.chartMluTimeRange, father);
+      const names = [];
+      const values = [];
+      for (let index = 0; index < data.length; index++) {
+        const e = data[index];
+        names.push(e.name);
+        values.push(e.count);
+      }
+      this.chartMluUpdateData(names, values)
+    },
+    chartMluUpdateData(names, values) {
+      chartMultiLevelUse.setOption({
+        yAxis: [
+          {
+            data: names,
+          }
+        ],
+        series: [
+          {
+            data: values
+          }
+        ]
+      })
+      this.chartMluCheckChangeToLog(values)
+    },
+    chartMluCheckChangeToLog(values) {
+      let toLog = false;
+      values.sort((a, b) => a - b);
+      let min = values[0];
+      let max = values[values.length - 1]
+      if (max / min > 3000) {
+        toLog = true
+      }
+
+      if (toLog) {
+        chartMultiLevelUse.setOption(
+          {
+            xAxis: [{
+              type: 'log',
+              logBase: 10,
+              min: 1,
+
+              axisLine: { lineStyle: { color: "#fff" } },
+              axisLabel: {
+                formatter: function (value) {
+                  // 格式化显示
+                  if (value >= 1000) return value / 1000 + 'k';
+                  return value;
+                }
+              },
+            }]
+          }
+        )
+      } else {
+        chartMultiLevelUse.setOption(
+          {
+            xAxis: [{
+              type: 'value',
+              min: 0,
+
+              axisLine: { lineStyle: { color: "#fff" } },
+            }]
+          }
+        )
+      }
+    },
+    chartMluUpdateTitle(newTitle) {
+      chartMultiLevelUse.setOption({
+        title: {
+          text: newTitle,
+        }
+      })
     }
   }
-};
+}
 </script>
 
 <style lang="less" scoped>
@@ -848,7 +1032,8 @@ export default {
 }
 
 .row,
-.warp-row {
+.warp-row,
+.between-row {
   display: flex !important;
   justify-content: space-around;
   padding: 0;
@@ -859,6 +1044,10 @@ export default {
   flex-wrap: wrap;
 }
 
+.between-row {
+  justify-content: space-between;
+}
+
 .col {
   display: flex !important;
   justify-content: space-around;
@@ -1033,7 +1222,7 @@ export default {
   height: 450px;
 }
 
-#echart2 {
+#echartMultiLevelUse {
   width: 100%;
   height: 450px;
 }