Kaynağa Gözat

微功能页面搜索框添加防抖,运行管理页面Echarts样式美化,

DESKTOP-6LTVLN7\Liumouren 2 ay önce
ebeveyn
işleme
61fba20ee5

+ 3 - 9
src/components/wgn/controlPanel.vue

@@ -5,7 +5,7 @@
         <div class="">
           场景名称:
           <el-cascader
-            :disabled="$route.query.sceneId"
+            :disabled="$route.query.sceneId != undefined"
             v-model="SceneValue"
             placeholder="试试搜索:距离"
             :options="SceneList"
@@ -144,14 +144,7 @@
             {{ backData.message || backData.error }}
           </div>
 
-          <div
-            class="vueJsonEditor_box"
-            v-show="
-              SceneValue &&
-              dmsServerItem &&
-              (ifHasType('point') || ifHasType('polyline') || ifHasType('polygon'))
-            "
-          >
+          <div class="vueJsonEditor_box" v-show="SceneValue && dmsServerItem">
             <div class="vueJsonEditor_tools">
               <span
                 v-if="
@@ -164,6 +157,7 @@
               <span @click="copyJsonData(backData.content)">copy</span>
             </div>
             <vue-json-editor
+              v-if="backData.content"
               v-model="backData.content"
               :value="backData.content"
               @json-change="handleJsonChange2"

+ 12 - 0
src/components/yxgl/EchartsDome.vue

@@ -81,6 +81,18 @@ export default {
           fontWeight: "normal", // 可选:字体粗细
         },
       });
+
+      // 合并tooltip配置
+      if (!mergedOption.tooltip) {
+        mergedOption.tooltip = {};
+      }
+      Object.assign(mergedOption.tooltip, {
+        backgroundColor: "rgba(0, 25, 50, 0.8)",
+        borderColor: "#1E90FF",
+        textStyle: {
+          color: "#fff",
+        },
+      });
       chartInstance.setOption(mergedOption, true);
       // 添加resize事件监听
       window.addEventListener("resize", () => {

+ 46 - 37
src/views/Wgn.vue

@@ -195,6 +195,8 @@ export default {
           c_department: "",
         },
       },
+      // 搜索微功能服务的防抖定时器
+      searchTimeout: null,
     };
   },
   mounted() {
@@ -204,44 +206,50 @@ export default {
   methods: {
     // 搜索微功能服务
     searchServerList() {
-      let requestParams = {
-        columnId: 1651,
-        states: 0,
-        pageSize: 999,
-        page: 0,
-      };
-      if (this.searchStr) {
-        requestParams.search = JSON.stringify([
-          {
-            field: "title",
-            searchType: 2,
-            content: { value: "%" + this.searchStr + "%" },
-          },
-        ]);
+      // 添加防抖功能,避免频繁搜索导致性能问题
+      if (this.searchTimeout != null) {
+        clearTimeout(this.searchTimeout);
       }
-      // 获取微功能服务列表
-      wgn
-        .getDmsData(requestParams)
-        .then((res) => {
-          if (res.code === 200) {
-            this.dmsServerList = res.content.data;
-            this.$message({
-              message: "搜索到" + this.dmsServerList.length + "条微功能服务",
-              type: "success",
-            });
-          } else {
+      this.searchTimeout = setTimeout(() => {
+        let requestParams = {
+          columnId: 1651,
+          states: 0,
+          pageSize: 999,
+          page: 0,
+        };
+        if (this.searchStr) {
+          requestParams.search = JSON.stringify([
+            {
+              field: "title",
+              searchType: 2,
+              content: { value: "%" + this.searchStr + "%" },
+            },
+          ]);
+        }
+        // 获取微功能服务列表
+        wgn
+          .getDmsData(requestParams)
+          .then((res) => {
+            if (res.code === 200) {
+              this.dmsServerList = res.content.data;
+              this.$message({
+                message: "搜索到" + this.dmsServerList.length + "条微功能服务",
+                type: "success",
+              });
+            } else {
+              this.$message({
+                message: "搜索到0条微功能服务",
+                type: "warning",
+              });
+            }
+          })
+          .catch((e) => {
             this.$message({
-              message: "搜索到0条微功能服务",
-              type: "warning",
+              message: "搜索微功能服务失败" + e,
+              type: "error",
             });
-          }
-        })
-        .catch((e) => {
-          this.$message({
-            message: "搜索微功能服务失败" + e,
-            type: "error",
           });
-        });
+      }, 0);
     },
     // 申请使用微功能服务
     handleApply(item) {
@@ -306,15 +314,16 @@ export default {
         routerPath = {
           path: item.c_url,
         };
+        this.$router.push(routerPath);
       } else {
         routerPath = {
           path: "/wgnSingle", // 微功能
           query: { sceneId: item.c_scene_name },
         };
+        const routeData = this.$router.resolve(routerPath);
+        // 2. 打开新窗口(_blank 表示新窗口)
+        window.open(routeData.href, "_blank");
       }
-      const routeData = this.$router.resolve(routerPath);
-      // 2. 打开新窗口(_blank 表示新窗口)
-      window.open(routeData.href, "_blank");
     },
   },
 };

+ 26 - 1
src/views/yxgl/StatisticalAnalysis.vue

@@ -155,6 +155,7 @@ import card from "@/components/yxgl/card.vue";
 import EchartsDome from "@/components/yxgl/EchartsDome.vue";
 import Table from "@/components/yxgl/table.vue";
 import appCenter from "@/api/appCenter";
+import { color } from "echarts";
 
 export default {
   name: "",
@@ -529,8 +530,21 @@ export default {
               data: keyRule.xData,
               axisTick: { show: false }, // 隐藏刻度
               splitLine: { show: false }, // 隐藏分割线
+              axisLabel: {
+                color: "#F2F3F5cc", // 字体颜色(支持十六进制、RGB、颜色名)
+                fontSize: 14, // 可选:字体大小
+                fontWeight: "normal", // 可选:字体粗细
+              },
+            },
+            yAxis: {
+              type: "value",
+              axisLabel: {
+                color: "#42a5f5cc", // 字体颜色(支持十六进制、RGB、颜色名)
+                fontSize: 14, // 可选:字体大小
+                fontWeight: "normal", // 可选:字体粗细
+              },
+              splitLine: { lineStyle: { color: "#42a5f532" } },
             },
-            yAxis: keyRule.yAxis ? keyRule.yAxis : { type: "value" },
             series: keyRule.series,
           };
           break;
@@ -595,10 +609,21 @@ export default {
             },
             xAxis: {
               type: "value",
+              axisLabel: {
+                color: "#42a5f5cc", // 字体颜色(支持十六进制、RGB、颜色名)
+                fontSize: 14, // 可选:字体大小
+                fontWeight: "normal", // 可选:字体粗细
+              },
+              splitLine: { lineStyle: { color: "#42a5f532" } },
             },
             yAxis: {
               type: "category",
               data: keyRule.xData,
+              axisLabel: {
+                color: "#F2F3F5cc", // 字体颜色(支持十六进制、RGB、颜色名)
+                fontSize: 14, // 可选:字体大小
+                fontWeight: "normal", // 可选:字体粗细
+              },
             },
             series: [
               {