perf: 整体优化业务数据分析

portal-manager-ui/admin/src/api/dataActuary.js

@@ -65,3 +65,8 @@ export function pageLlist(params) {
 export function userSiteBus(params) {
   return http.get(`${BASEURL}/inter/statistic/busIdForName`, params);
 }
+
+// 获取排号业务列表
+export function businessPtree(params) {
+  return http.get(`${BASEURL}/admin/business/businessPtree`, params);
+}

portal-manager-ui/admin/src/utils/index.js

@@ -79,3 +79,19 @@ export class SessionCrypto {
     window.sessionStorage.removeItem(key);
   }
 }
+
+// 扁平化树形结构（有子数组返回子数组否则返回本身）
+export function filterarrays(arr, field = "children") {
+  let data = [];
+  function recursiveSearch(subArr) {
+    for (let item of subArr) {
+      if (item[field] && item[field].length) {
+        recursiveSearch(item[field]);
+      } else {
+        data.push(item);
+      }
+    }
+  }
+  recursiveSearch(arr);
+  return data;
+}

portal-manager-ui/admin/src/views/dataActuary/business/Component/line/index.vue

 <template>
-    <div>
-        <div :id="id" :style="{height: this.height+'px', width: this.width+'px'}"></div>
-    </div>
+  <div>
+    <div
+      :id="id"
+      :style="{ height: this.height + 'px', width: this.width + 'px' }"
+    ></div>
+  </div>
 </template>
 <script>
-import * as echarts from 'echarts'
-let myChart= null
+import * as echarts from "echarts";
 export default {
-    props: {
-		id: {
-			type: String
-		},
-		height: {
-			type: String | Number
-		},
-		width:{
-			type: String | Number,
-		},
-		datas: Object
-
+  props: {
+    id: {
+      type: String,
+    },
+    height: {
+      type: String | Number,
+    },
+    width: {
+      type: String | Number,
     },
-    data() {
-        return {
-		}
+    datas: Object,
+  },
+  data() {
+    return {
+      myChart: null,
+    };
+  },
+  watch: {
+    datas: function (obj) {
+      let arr = [];
+      if (obj) {
+        obj.dataList.map((item) => {
+          let obj = {
+            name: "",
+            type: "line",
+            emphasis: {
+              focus: "series",
+            },
+            data: [],
+          };
+          if (item) {
+            obj.name = item.name;
+            obj.data = item.data;
+            arr.push(obj);
+          }
+        });
+        this.lineInit(obj.title, obj.legend, obj.xData, arr, obj);
+      }
+    },
+  },
+  methods: {
+    autoResize() {
+      this.myChart && this.myChart.resize();
+    },
+
+    lineInit(title, legend, xData, data, datas) {
+      if (!this.myChart) {
+        this.myChart = echarts.init(document.getElementById(this.id));
+      }
+      let option = {
+        title: {
+          text: title,
+          textStyle: {
+            fontSize: "14",
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: legend,
+        },
+        dataZoom: {
+          type: "inside",
+          startValue: datas.startValue ? datas.startValue : 0,
+          endValue: datas.endValue ? datas.endValue : 16,
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: xData,
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+          },
+        ],
+        series: data,
+      };
+      this.myChart.setOption(option);
+      // 让图表跟随屏幕自动的去适应
+      window.addEventListener("resize", this.autoResize);
     },
-	watch:{
-		datas: function(obj){
-			let arr= []
-			if(obj){
-				obj.dataList.map((item)=>{
-					let obj= {
-						name: '',
-						type: 'line',
-						emphasis: {
-							focus: 'series'
-						},
-						data: []
-					}
-					if(item){
-						obj.name= item.name
-						obj.data= item.data
-						arr.push(obj)
-					}
-				})
-				this.lineInit(obj.title, obj.legend, obj.xData, arr)
-			}
-		}
-	},
-    methods: {
-        lineInit(title, legend, xData, data) {
-			myChart = echarts.init(document.getElementById(this.id))
-			let option = {
-				title: {
-					text: title,
-					textStyle: {
-						fontSize: '14'
-					}
-				},
-				tooltip: {
-					trigger: 'axis'
-				},
-				legend: {
-					data: legend
-				},
-				grid: {
-					left: '3%',
-					right: '4%',
-					bottom: '3%',
-					containLabel: true
-				},
-				xAxis: [
-					{
-						type: 'category',
-						boundaryGap: false,
-						data: xData
-					}
-				],
-				yAxis: [
-					{
-						type: 'value'
-					}
-				],
-				series: data
-			}
-            myChart.setOption(option)
-            // 让图表跟随屏幕自动的去适应
-            window.addEventListener('resize', function () {
-                myChart.resize()
-            })
-        }
-    }
-}
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.autoResize);
+  },
+};
 </script>
-<style lang="less" scoped>
-</style>
+<style lang="less" scoped></style>
\ No newline at end of file

portal-manager-ui/admin/src/views/dataActuary/business/basecontent/index.vue

@@ -151,11 +151,7 @@
             <span slot="index" slot-scope="text, record, index">
               {{ index + 1 }}
             </span>
-            <span
-              slot="nums"
-              slot-scope="text, record, index"
-              style="display: flex"
-            >
+            <span slot="nums" slot-scope="text" style="display: flex">
               <a-progress
                 :percent="text"
                 :showInfo="false"
@@ -198,11 +194,7 @@
             <span slot="index" slot-scope="text, record, index">
               {{ index + 1 }}
             </span>
-            <span
-              slot="nums"
-              slot-scope="text, record, index"
-              style="display: flex"
-            >
+            <span slot="nums" slot-scope="text" style="display: flex">
               <a-progress
                 :percent="text"
                 :showInfo="false"
@@ -247,11 +239,7 @@
             <span slot="index" slot-scope="text, record, index">
               {{ index + 1 }}
             </span>
-            <span
-              slot="nums"
-              slot-scope="text, record, index"
-              style="display: flex"
-            >
+            <span slot="nums" slot-scope="text" style="display: flex">
               <a-progress
                 :percent="text"
                 :showInfo="false"
@@ -294,11 +282,7 @@
             <span slot="index" slot-scope="text, record, index">
               {{ index + 1 }}
             </span>
-            <span
-              slot="nums"
-              slot-scope="text, record, index"
-              style="display: flex"
-            >
+            <span slot="nums" slot-scope="text" style="display: flex">
               <a-progress
                 :percent="text"
                 :showInfo="false"
@@ -315,7 +299,7 @@
   </div>
 </template>
 
-<script >
+<script>
 import Pie from "../Component/emptyPie/index.vue";
 import axios from "axios";
 import {
@@ -761,4 +745,4 @@ export default {
 .mb_15 {
   margin-bottom: 0.9375rem;
 }
-</style>
+</style>
\ No newline at end of file

portal-manager-ui/admin/src/views/dataActuary/business/index.vue

@@ -7,7 +7,35 @@
         </div>
         <div class="searchBox">
           <a-space>
-            <a-auto-complete
+            <a-select
+              style="width: 35.625rem"
+              allowClear
+              showSearch
+              v-model="business"
+              optionFilterProp="label"
+              placeholder="请输入业务名称搜索"
+            >
+              <a-select-option
+                v-for="v in businessList"
+                :key="v.id"
+                :value="String(v.id)"
+                :label="v.name + '--' + v.flownum"
+              >
+                {{ `${v.name}--${v.flownum}` }}
+              </a-select-option>
+            </a-select>
+            <a-button type="primary" class="addclass" @click="startAnalysis"
+              >开始分析</a-button
+            >
+            <a-button
+              type="primary"
+              class="addclass"
+              v-if="btnShow"
+              @click="backBase"
+              >返回</a-button
+            >
+
+            <!-- <a-auto-complete
               v-model="businessName"
               :data-source="dataSource"
               optionLabelProp="value"
@@ -25,7 +53,7 @@
             >
             <a-button type="primary" class="addclass" v-else @click="backBase"
               >返回</a-button
-            >
+            > -->
           </a-space>
         </div>
       </div>
@@ -37,9 +65,10 @@
 </template>
 <script>
 import _ from "lodash";
-import axios from "axios";
+// import axios from "axios";
 import Breadcrumb from "./breadcrumb/index.vue";
-import { userSiteBus } from "@/api/dataActuary";
+import { userSiteBus, businessPtree } from "@/api/dataActuary";
+import { filterarrays } from "@/utils";
 export default {
   components: {
     Breadcrumb,
@@ -47,39 +76,50 @@ export default {
   data() {
     return {
       // 搜索框
-      businessName: "",
+      // businessName: "",
+      business: undefined,
+      businessList: [],
       dataSource: [],
       sourceList: [],
       // dataList: [],
-      btnShow: false,
     };
   },
   mounted() {
     // this.getList()
   },
-  created() {},
-  computed: {},
+  created() {
+    this.businessPtree();
+  },
+  computed: {
+    btnShow() {
+      return this.$route.path == "/home/dataActuary/business/analysiscontent";
+    },
+  },
   methods: {
+    // 获取排号业务列表
+    async businessPtree() {
+      let res = await businessPtree({
+        page: 1,
+        size: -1,
+      });
+      if (res.code == 1) {
+        this.businessList = filterarrays(res.data.data, "children");
+        this.business = this.$route.query.id;
+      }
+    },
     startAnalysis() {
-      if (!this.businessName) {
-        this.$message.error("请输入业务名称搜索");
+      if (!this.business) {
+        this.$message.warning("请先选择业务");
       } else {
-        let item = this.sourceList.filter((i) => {
-          return i.name == this.businessName;
-        })[0];
-        if (item) {
-          this.$router.push({
-            path: "analysiscontent",
-            query: { id: item.id },
-          });
-          this.btnShow = true;
-        }
+        this.$router.push({
+          path: "analysiscontent",
+          query: { id: this.business },
+        });
       }
     },
     backBase() {
       this.$router.push({ path: "basecontent" });
-      this.btnShow = false;
-      this.businessName = "";
+      this.business = undefined;
     },
     // async getList(){
     // 	await axios.get('http://192.168.0.98:8090/inter/statistic/busList',{params: {siteid: 1}}).then((res)=>{
@@ -90,29 +130,33 @@ export default {
     // 		}
     // 	})
     // },
-    onSearch: _.debounce(function (val) {
-      this.dataSource = [];
-      userSiteBus({
-        siteid: localStorage.getItem("siteId"),
-        bus_name: val,
-      }).then((res) => {
-        if (res.code == 1) {
-          this.sourceList = res.data;
-          res.data.forEach((r) => {
-            this.dataSource.push(r.name);
-          });
-        }
-      });
-    }, 0),
-    onSelect(val) {
-      this.businessName = val;
-    },
+    // onSearch: _.debounce(function (val) {
+    //   this.dataSource = [];
+    //   userSiteBus({
+    //     siteid: localStorage.getItem("siteId"),
+    //     bus_name: val,
+    //     page: 1,
+    //     size: -1,
+    //   }).then((res) => {
+    //     if (res.code == 1) {
+    //       this.sourceList = res.data;
+    //       console.log(res.data);
+    //       res.data.forEach((r) => {
+    //         this.dataSource.push(r.name);
+    //       });
+    //     }
+    //   });
+    // }, 0),
+    // onSelect(val) {
+    //   this.businessName = val;
+    // },
   },
 };
 </script>
 <style lang="less" scoped>
 @headerH: 4.5rem;
 .Container {
+  width: 100%;
   height: 100% !important;
   // background: #fac;
   background: #f5f5f5;