perf: 优化

admin_2/package.json

@@ -13,7 +13,7 @@
     "axios": "^1.4.0",
     "core-js": "^3.8.3",
     "crypto-js": "^4.1.1",
-    "echarts": "^5.4.3",
+    "echarts": "^5.5.1",
     "element-ui": "^2.15.14",
     "js-export-excel": "^1.1.4",
     "lodash-es": "^4.17.21",

admin_2/src/components/autoRegister/YTable.vue

@@ -23,6 +23,7 @@
         :fixed="v.fixed"
         :formatter="v.formatter"
         :min-width="v.minWidth"
+        :show-overflow-tooltip="v.showOverflowTooltip"
       >
       </el-table-column>
     </el-table>

admin_2/src/layouts/Layouts.vue

@@ -22,21 +22,28 @@
 </template>
 
 <script>
-import { mapMutations } from "vuex";
+import { mapMutations, mapActions } from "vuex";
 import Header from "./components/Header.vue";
 import { getSiteTree } from "@/api/site";
+import storage from "@/utils/storage";
 export default {
   components: {
     Header,
   },
   data() {
-    return {};
+    return {
+      siteId: storage.get(2, "siteId"),
+    };
   },
   created() {
     this.getSiteTree();
+    this.getBusiness(this.siteId);
+    this.getDeptList(this.siteId);
+    this.getWindowList(this.siteId);
   },
   methods: {
     ...mapMutations("user", ["SET_areaTree"]),
+    ...mapActions("user", ["getBusiness", "getDeptList", "getWindowList"]),
     // 获取个人站点树
     async getSiteTree() {
       let res = await getSiteTree({

admin_2/src/pages/engine/Engine.vue

@@ -57,6 +57,13 @@ export default {
       ],
     };
   },
+  watch: {
+    "$route.path"() {
+      this.$nextTick(() => {
+        this.handleDate();
+      });
+    },
+  },
   methods: {
     handleDate() {
       this.$refs.Page.getDate(this.time);
@@ -72,11 +79,11 @@ export default {
   }
 
   95% {
-    transform: rotate(20turn);
+    transform: rotate(30turn);
   }
 
   100% {
-    transform: rotate(20turn);
+    transform: rotate(30turn);
   }
 }
 .engine {
@@ -138,6 +145,6 @@ export default {
 }
 .engine-img {
   // cubic-bezier(1, 0.05, 0.1, 1)
-  animation: rotate 5s cubic-bezier(1, -0.01, 0, 0.85) infinite;
+  animation: rotate 5s cubic-bezier(1, -0.01, 0, 0.97) infinite;
 }
 </style>

admin_2/src/pages/engine/components/DoubleTable.vue

 <template>
-  <div class="flex h-full w-full flex-col gap-2">
+  <div class="flex h-full w-full flex-col gap-2" v-loading="loading">
     <div class="flex w-full items-center justify-between">
       <div class="title">
         {{ title }}
       </div>
       <div class="flex gap-4">
-        <el-button type="primary" size="small">导出</el-button>
-        <el-input
+        <el-button type="primary" size="small" @click="handleExport"
+          >导出</el-button
+        >
+
+        <el-select
+          v-if="type == 'business'"
+          size="small"
+          filterable
+          v-model="form.businessName"
+          placeholder="请选择业务"
+          clearable
+        >
+          <el-option
+            v-for="v in businessList"
+            :key="v.id"
+            :label="v.businessName"
+            :value="v.businessName"
+          >
+          </el-option>
+        </el-select>
+        <el-select
+          v-else-if="type == 'dept'"
+          size="small"
+          filterable
+          v-model="form.deptName"
+          placeholder="请选择部门"
+          clearable
+        >
+          <el-option
+            v-for="v in deptList"
+            :key="v.id"
+            :label="v.name"
+            :value="v.name"
+          >
+          </el-option>
+        </el-select>
+        <el-select
+          v-else-if="type == 'window'"
+          size="small"
+          filterable
+          v-model="form.windowNum"
+          placeholder="请选择窗口"
           clearable
+        >
+          <el-option
+            v-for="v in windowList"
+            :key="v.id"
+            :label="v.name + '-' + v.fromnum"
+            :value="v.fromnum"
+          >
+          </el-option>
+        </el-select>
+        <el-button
+          type="primary"
           size="small"
-          style="width: 250px"
-          :placeholder="placeholder"
-          v-model="searchVal"
-        ></el-input>
-        <el-button type="primary" size="small">搜索</el-button>
+          v-if="type != 'hall'"
+          @click="handleSearch"
+          >搜索</el-button
+        >
       </div>
     </div>
-    <div class="grid w-full grid-cols-2">
+    <div
+      :class="[
+        'w-full',
+        'grid',
+        data.length > 5 ? 'grid-cols-2' : 'grid-cols-1',
+      ]"
+    >
       <y-table
         size="small"
         border
-        :column="column"
+        :column="leftColumn"
         :data="letTableData"
       ></y-table>
       <y-table
-        v-if="data.length > 5"
+        v-show="data.length > 5"
         size="small"
         border
-        :column="column"
+        :column="rightColumn"
         :data="rightTableData"
       ></y-table>
     </div>
@@ -35,24 +91,44 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
+import storage from "@/utils/storage";
 export default {
   props: {
     data: {
+      required: true,
       type: Array,
       default: () => [],
     },
+    type: {
+      required: true,
+      type: String,
+      default: "",
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    current: {
+      required: true,
+      type: Number,
+      default: 1,
+    },
+    size: {
+      required: true,
+      type: Number,
+      default: 10,
+    },
     column: {
+      required: true,
       type: Array,
       default: () => [],
     },
     title: {
+      required: true,
       type: String,
       default: "",
     },
-    placeholder: {
-      type: String,
-      default: "请输入业务名称关键字搜索",
-    },
     border: {
       type: Boolean,
       default: true,
@@ -61,24 +137,66 @@ export default {
   data() {
     return {
       searchVal: "",
+      siteId: storage.get(2, "siteId"),
+      form: {
+        businessName: "",
+        deptName: "",
+        windowNum: "",
+      },
     };
   },
   computed: {
+    ...mapState("user", ["businessList", "deptList", "windowList"]),
+    leftColumn() {
+      let index = {
+        label: "排序",
+        type: "index",
+        lign: "center",
+        index: (index) => {
+          return (this.current - 1) * this.size + index + 1;
+        },
+      };
+      return [index, ...this.column];
+    },
+    rightColumn() {
+      let index = {
+        label: "排序",
+        type: "index",
+        lign: "center",
+        index: (index) => {
+          return (this.current - 1) * this.size + index + 6;
+        },
+      };
+      return [index, ...this.column];
+    },
     letTableData() {
       let arr = this.data.slice(0, 5);
-      while (arr.length < 5) {
-        arr.push(null);
+      if (arr.length) {
+        while (arr.length < 5) {
+          arr.push(null);
+        }
       }
       return arr;
     },
     rightTableData() {
       let arr = this.data.slice(5, 10);
-      while (arr.length < 5) {
-        arr.push(null);
+      if (arr.length) {
+        while (arr.length < 5) {
+          arr.push(null);
+        }
       }
       return arr;
     },
   },
+  created() {},
+  methods: {
+    handleSearch() {
+      this.$emit("search", this.type, this.form);
+    },
+    handleExport() {
+      this.$emit("export", this.type, this.form);
+    },
+  },
 };
 </script>
 

admin_2/src/pages/home/Home.vue

@@ -17,7 +17,7 @@
               :value="homeData.totalCount"
             ></el-statistic>
             <div class="text-[14px] text-[#424E65]">
-              数仓最近汇聚时间：2024-06-26 23:59:59
+              数仓最近汇聚时间：{{ newTime }}
             </div>
           </div>
         </div>
@@ -37,7 +37,7 @@
               近30日数据总量趋势
             </div>
             <div class="echarts-box">
-              <LineEchart :dataset="dataset"></LineEchart>
+              <LineEchart :dataset="totalDataset"></LineEchart>
             </div>
           </div>
           <div class="flex h-full w-full flex-col">
@@ -45,7 +45,7 @@
               近30日排队数据总量趋势
             </div>
             <div class="echarts-box">
-              <LineEchart :dataset="dataset" color="#1DCFB4"></LineEchart>
+              <LineEchart :dataset="phDataset" color="#1DCFB4"></LineEchart>
             </div>
           </div>
           <div class="flex h-full w-full flex-col">
@@ -53,7 +53,7 @@
               近30日评价数据总量趋势
             </div>
             <div class="echarts-box">
-              <LineEchart :dataset="dataset" color="#F57520"></LineEchart>
+              <LineEchart :dataset="pjDataset" color="#F57520"></LineEchart>
             </div>
           </div>
         </div>
@@ -84,26 +84,17 @@ export default {
   },
   data() {
     return {
-      dataset: {
+      totalDataset: {
         dimensions: ["name", "value"],
-        source: [
-          {
-            name: "06-1",
-            value: 900000,
-          },
-          {
-            name: "06-2",
-            value: 800000,
-          },
-          {
-            name: "06-3",
-            value: 700000,
-          },
-          {
-            name: "06-4",
-            value: 900000,
-          },
-        ],
+        source: [],
+      },
+      phDataset: {
+        dimensions: ["name", "value"],
+        source: [],
+      },
+      pjDataset: {
+        dimensions: ["name", "value"],
+        source: [],
       },
       areaList: [
         {
@@ -186,16 +177,38 @@ export default {
         },
       ],
       homeData: {},
+      newTime: this.$moment().format("YYYY-MM-DD HH:mm:ss"),
     };
   },
   created() {
     this.getHomeData();
   },
+  mounted() {},
   methods: {
     async getHomeData() {
       let res = await getHomeData();
       if (res.data.code == 1) {
-        this.homeData = res.data.data;
+        let { data } = res.data;
+        let { thirtyPhStatList, thirtyPjStatList, thirtyStatList } = data;
+        this.homeData = data;
+        this.totalDataset.source = thirtyStatList.map((item) => {
+          return {
+            name: `${item.month}-${item.day}`,
+            value: item.count,
+          };
+        });
+        this.phDataset.source = thirtyPhStatList.map((item) => {
+          return {
+            name: `${item.month}-${item.day}`,
+            value: item.phCount,
+          };
+        });
+        this.pjDataset.source = thirtyPjStatList.map((item) => {
+          return {
+            name: `${item.month}-${item.day}`,
+            value: item.pjCount,
+          };
+        });
       }
     },
   },

admin_2/src/pages/home/components/LineEchart.vue

@@ -44,7 +44,12 @@ export default {
     initChart(dataset) {
       let data = dataset.source || [];
       let dom = this.$refs.MyEchart;
-      this.myChart = this.$echarts.init(dom);
+      // 获取或者初始化 ECharts 实例
+      this.myChart = this.$echarts.getInstanceByDom(dom);
+      if (!this.myChart) {
+        this.myChart = this.$echarts.init(dom);
+      }
+
       let option = {
         grid: {
           top: "15%",
@@ -52,7 +57,6 @@ export default {
           right: "5%",
           bottom: "12%",
         },
-        // 鼠标移入信息查看
         tooltip: {
           trigger: "axis",
           borderWidth: 0,
@@ -62,16 +66,17 @@ export default {
             }<br/><div style='margin-top:4px;padding:4px 8px;background:${this.hexToRgba(
               this.color,
               0.1
-            )};color:${this.color}';border-radius:10px>
-            <span style='margin-right:10px'>${params[0].seriesName}</span>
-            ${params[0].value.value}</div>`;
+            )};color:${
+              this.color
+            };border-radius:4px'><span style='margin-right:20px'>${
+              params[0].seriesName
+            }</span>${params[0].value.value}</div>`;
           },
         },
         dataZoom: [
           {
-            // 开启数据平移
             type: "inside",
-            show: true,
+            show: false,
             startValue: 0,
             endValue: this.endValue - 1,
           },
@@ -106,7 +111,7 @@ export default {
         },
         yAxis: {
           type: "value",
-          splitNumber: 3, // 配置 Y 轴数值间隔
+          splitNumber: 3,
           axisLabel: {
             color: "#666",
           },
@@ -168,10 +173,16 @@ export default {
         ],
         dataset,
       };
+
       this.myChart.setOption(option);
+
       // 适配
       window.addEventListener("resize", this.adapterEcharts);
+
+      // 清除现有定时器，防止多次调用
       clearInterval(this.timer);
+
+      // 定义并启动定时器
       this.timer = setInterval(() => {
         if (option.dataZoom[0].endValue >= data.length - 1) {
           option.dataZoom[0].endValue = this.endValue - 1;
@@ -180,15 +191,17 @@ export default {
           option.dataZoom[0].endValue += 1;
           option.dataZoom[0].startValue += 1;
         }
-        option && this.myChart.setOption(option);
+        this.myChart.setOption(option);
       }, 2000);
-      //鼠标移入组件时停止轮播
+
+      // 绑定鼠标移入事件
       this.myChart.on("mousemove", () => {
-        clearInterval(this.timer); //清除循环
+        clearInterval(this.timer); // 清除定时器
       });
-      //鼠标移出组件时恢复轮播
+
+      // 绑定鼠标移出事件
       this.myChart.on("mouseout", () => {
-        clearInterval(this.timer); //清除循环
+        clearInterval(this.timer); // 清除定时器
         this.timer = setInterval(() => {
           if (option.dataZoom[0].endValue >= data.length - 1) {
             option.dataZoom[0].endValue = this.endValue - 1;
@@ -197,10 +210,11 @@ export default {
             option.dataZoom[0].endValue += 1;
             option.dataZoom[0].startValue += 1;
           }
-          option && this.myChart.setOption(option);
+          this.myChart.setOption(option);
         }, 2000);
       });
     },
+
     hexToRgba(hex, opacity) {
       let rgbaColor = "";
       let reg = /^#[\da-f]{6}$/i;

admin_2/src/router/index.js

@@ -119,6 +119,7 @@ const routes = [
           },
           {
             path: "/market/evaluatereport",
+            name: "evaluatereport",
             hideChildrenInMenu: true,
             component: () => import("@/pages/market/EvaluateReport"),
             meta: {

admin_2/src/store/modules/user.js

+import { getSiteBusiness, getDepartment, getWindow } from "@/api/site";
 export default {
   namespaced: true,
   state: {
     menus: [], // 菜单
     token: "",
     siteId: "", // 站点id
-    deptList: [], // 部门列表
     userInfo: {}, // 用户信息
     sysName: "", // 系统名称
     sysLogo: "", // 系统logo
     path: "", // 门户跳转过来的路由
     areaTree: [], // 个人区域树
+    businessList: [], // 站点业务列表
+    deptList: [], // 站点部门列表
+    windowList: [], // 站点窗口列表
   },
   getters: {
     siteId(state) {
@@ -38,9 +41,6 @@ export default {
     SET_siteId(state, siteId) {
       state.siteId = siteId;
     },
-    SET_deptList(state, deptList) {
-      state.deptList = deptList;
-    },
     SET_userInfo(state, userInfo) {
       state.userInfo = userInfo;
     },
@@ -56,9 +56,55 @@ export default {
     SET_areaTree(state, areaTree) {
       state.areaTree = areaTree;
     },
+    SET_businessList(state, businessList) {
+      state.businessList = businessList;
+    },
+    SET_deptList(state, deptList) {
+      state.deptList = deptList;
+    },
+    SET_windowList(state, windowList) {
+      state.windowList = windowList;
+    },
 
     // 重置所有仓库状态
     reset: () => {},
   },
-  actions: {},
+  actions: {
+    // 获取站点业务列表
+    getBusiness: async (context, siteId) => {
+      let res = await getSiteBusiness({
+        page: 1,
+        size: -1,
+        siteId,
+      });
+      if (res.data.code == 1) {
+        let { data } = res.data.data;
+        context.commit("SET_businessList", data);
+      }
+    },
+    // 获取站点部门列表
+    getDeptList: async (context, siteId) => {
+      let res = await getDepartment({
+        page: 1,
+        size: -1,
+        siteId,
+      });
+      if (res.data.code == 1) {
+        let { data } = res.data.data;
+        context.commit("SET_deptList", data);
+      }
+    },
+    // 获取站点窗口列表
+    getWindowList: async (context, siteId) => {
+      let res = await getWindow({
+        page: 1,
+        size: -1,
+        siteId,
+      });
+      if (res.data.code == 1) {
+        let { data } = res.data.data;
+        context.commit("SET_windowList", data);
+      }
+    },
+  },
 };

admin_2/yarn.lock

@@ -3109,13 +3109,13 @@ easy-stack@1.0.1:
   resolved "https://registry.npmmirror.com/easy-stack/-/easy-stack-1.0.1.tgz"
   integrity sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==
 
-echarts@^5.4.3:
-  version "5.4.3"
-  resolved "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz"
-  integrity sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==
+echarts@^5.5.1:
+  version "5.5.1"
+  resolved "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz#8dc9c68d0c548934bedcb5f633db07ed1dd2101c"
+  integrity sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==
   dependencies:
     tslib "2.3.0"
-    zrender "5.4.4"
+    zrender "5.6.0"
 
 ee-first@1.1.1:
   version "1.1.1"
@@ -7000,9 +7000,9 @@ yorkie@^2.0.0:
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
 
-zrender@5.4.4:
-  version "5.4.4"
-  resolved "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz"
-  integrity sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==
+zrender@5.6.0:
+  version "5.6.0"
+  resolved "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz#01325b0bb38332dd5e87a8dbee7336cafc0f4a5b"
+  integrity sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==
   dependencies:
     tslib "2.3.0"