Merge branch 'master' of http://47.103.92.60:3003/skyversation/qp_onemap_ui

src/views/yygl/monitor/index.vue

@@ -4,15 +4,13 @@
     <div class="main-content">
       <!-- 应用统计卡片 -->
       <div class="stats-cards">
-        <div class="stat-card" v-for="(item) in getLimitedList()" :key="item.name" >
+        <div class="stat-card" v-for="item in getLimitedList()" :key="item.name">
           <div class="stat-icon approved">
             <el-icon><CircleCheckFilled /></el-icon>
           </div>
           <div class="stat-content">
             <div class="stat-label">{{ item.name }}</div>
-            <div class="stat-number">
-              {{ item.value }} 个
-            </div>
+            <div class="stat-number">{{ item.value }} 个</div>
           </div>
         </div>
         <!-- <div class="stat-card">
@@ -74,7 +72,9 @@
           <div class="module-content">
             <div class="quick-app" v-for="(app, index) in quickApps" :key="index">
               <div class="app-item">
-                <span class="app-icon" :style="{ backgroundColor: getAppColor(app.type) }"><el-icon><Promotion /></el-icon></span>
+                <span class="app-icon" :style="{ backgroundColor: getAppColor(app.type) }"
+                  ><el-icon><Promotion /></el-icon
+                ></span>
                 <span class="app-name">{{ app.name }}</span>
               </div>
             </div>
@@ -111,9 +111,9 @@
               </div>
               <div class="app-stats">
                 <!-- <div class="stat-bar" :style="{ width: app.percentage + '%' }"></div> -->
-                 <div style="width: 100%;">
-                    <el-progress :percentage="app.percentage" />
-                 </div>
+                <div style="width: 100%">
+                  <el-progress :percentage="app.percentage" />
+                </div>
                 <span class="stat-count">{{ app.count }}次</span>
               </div>
             </div>
@@ -125,16 +125,12 @@
 </template>
 
 <script>
-
-import * as echarts from 'echarts'
+import * as echarts from "echarts";
 import appCenter from "@/api/appCenter";
-import moment from 'moment';
-import CountUp from 'vue-countup-v3'
+import moment from "moment";
 export default {
   name: "ApplicationMonitor",
-  components: {
-    CountUp
-  },
+  components: {},
   data() {
     return {
       statusChart: null,
@@ -147,43 +143,43 @@ export default {
 
       // 快捷应用数据
       quickApps: [
-        { name: '农产品安全管控示范应用场', type: 'green' },
-        { name: '崇明区乡村振兴一张图', type: 'yellow' },
-        { name: '数字孪生黄浦', type: 'blue' }
+        { name: "农产品安全管控示范应用场", type: "green" },
+        { name: "崇明区乡村振兴一张图", type: "yellow" },
+        { name: "数字孪生黄浦", type: "blue" },
       ],
-      
+
       // 应用热度排行数据
       hotApps: [
-        { name: '崇明区乡村振兴一张图', count: 128, percentage: 100 },
-        { name: '数字孪生浦江', count: 65, percentage: 50.8 },
+        { name: "崇明区乡村振兴一张图", count: 128, percentage: 100 },
+        { name: "数字孪生浦江", count: 65, percentage: 50.8 },
         { name: '上海"一张图"大数据', count: 62, percentage: 48.4 },
-        { name: '黄浦智慧城管系统', count: 45, percentage: 35.2 },
-        { name: '上海生态环境管理', count: 38, percentage: 29.7 }
-      ]
-    }
+        { name: "黄浦智慧城管系统", count: 45, percentage: 35.2 },
+        { name: "上海生态环境管理", count: 38, percentage: 29.7 },
+      ],
+    };
   },
-   mounted() {
-    this.initData()
-    window.addEventListener('resize', this.handleResize)
+  mounted() {
+    this.initData();
+    window.addEventListener("resize", this.handleResize);
   },
   beforeUnmount() {
-    window.removeEventListener('resize', this.handleResize)
-    this.destroyCharts()
+    window.removeEventListener("resize", this.handleResize);
+    this.destroyCharts();
   },
   methods: {
     initData() {
-      this.getDmsCNameAType('applevel');
-      this.getDmsCNameAType('appstatus');
-      this.getDmsCNameAType('tag');
-      this.getDmsDataList()
+      this.getDmsCNameAType("applevel");
+      this.getDmsCNameAType("appstatus");
+      this.getDmsCNameAType("tag");
+      this.getDmsDataList();
     },
     handleResize() {
-      if (this.statusChart) this.statusChart.resize()
+      if (this.statusChart) this.statusChart.resize();
     },
     destroyCharts() {
       if (this.statusChart) {
-        this.statusChart.dispose()
-        this.statusChart = null
+        this.statusChart.dispose();
+        this.statusChart = null;
       }
     },
     getLimitedList() {
@@ -192,125 +188,143 @@ export default {
     getDmsCNameAType(param) {
       let requestParams = {
         cName: param,
-        type: 0
+        type: 0,
       };
-      appCenter.getDmsCNameAType(requestParams).then(res => {
+      appCenter.getDmsCNameAType(requestParams).then((res) => {
         if (res.code === 200 && res.content) {
-            let option = res.content.map(item => ({
-              label: item.index,
-              value: item.name
-            }));
-            if(param === 'applevel'){
-              this.buffOptions = option;
-            }else if(param === 'appstatus'){
-              this.statusOptions = option;
-            }else if(param === 'tag'){
-              this.tagOptions = option;
-            }
+          let option = res.content.map((item) => ({
+            label: item.index,
+            value: item.name,
+          }));
+          if (param === "applevel") {
+            this.buffOptions = option;
+          } else if (param === "appstatus") {
+            this.statusOptions = option;
+          } else if (param === "tag") {
+            this.tagOptions = option;
+          }
         }
-      })
+      });
     },
     getDmsDataList() {
       let requestParams = {
         columnId: 1659,
         states: 0,
-        orderBy: JSON.stringify([{"field":"create_time","orderByType":2}]),
+        orderBy: JSON.stringify([{ field: "create_time", orderByType: 2 }]),
         pageSize: 9999,
-        page: 0
+        page: 0,
       };
-      appCenter.getDmsDataList(requestParams).then(res => {
+      appCenter.getDmsDataList(requestParams).then((res) => {
         if (res.code === 200) {
-          this.itemApplications = res.content.data.map(item => ({
+          this.itemApplications = res.content.data.map((item) => ({
             ...item,
-            status: item.status === 0 ? '待审核' : item.status === 1 ? '待发布' : item.status === 2 ? '未完成' : '已完成',
-            buffName: this.buffOptions.find(info => info.label == item.appbuff.trim())?.value || '',
-            appstautName: this.statusOptions.find(info => info.label == item.appstauts.trim())?.value || '',
-            tags: item.apptags.split(',').map(tag => this.tagOptions.find(info => info.label == tag.trim())?.value || ''),
-            createTime: moment(item.create_time).format('YYYY-MM-DD HH:mm:ss')
-          }))
+            status:
+              item.status === 0
+                ? "待审核"
+                : item.status === 1
+                ? "待发布"
+                : item.status === 2
+                ? "未完成"
+                : "已完成",
+            buffName:
+              this.buffOptions.find((info) => info.label == item.appbuff.trim())?.value ||
+              "",
+            appstautName:
+              this.statusOptions.find((info) => info.label == item.appstauts.trim())
+                ?.value || "",
+            tags: item.apptags
+              .split(",")
+              .map(
+                (tag) =>
+                  this.tagOptions.find((info) => info.label == tag.trim())?.value || ""
+              ),
+            createTime: moment(item.create_time).format("YYYY-MM-DD HH:mm:ss"),
+          }));
           this.applications = this.itemApplications;
           this.getTypeArrs();
-        }else{
+        } else {
           this.applications = [];
         }
-      })
+      });
     },
     getTypeArrs() {
       let that = this;
-      that.statusOptions.forEach(item => {
-          let arr = this.applications.filter(info => info.appstauts == item.label);
-          let name = item.value,length = arr.length;
-          let str = {name: name,value: length};
-          that.typeArrs.push(str);
-      })
-      this.initStatusChart()
+      that.statusOptions.forEach((item) => {
+        let arr = this.applications.filter((info) => info.appstauts == item.label);
+        let name = item.value,
+          length = arr.length;
+        let str = { name: name, value: length };
+        that.typeArrs.push(str);
+      });
+      this.initStatusChart();
     },
     initStatusChart() {
-      let colors = ['#52C41A','#FAAD14','#F5222D','#1E90FF'];
-      let seriesData = this.typeArrs.map((item,index) => ({
+      let colors = ["#52C41A", "#FAAD14", "#F5222D", "#1E90FF"];
+      let seriesData = this.typeArrs.map((item, index) => ({
         // value: item.value, name: item.name, itemStyle: { color: colors[index] }  //自定义颜色
-        value: item.value, name: item.name // 随机颜色
-      }))
-      this.statusChart = echarts.init(this.$refs.statusChart)
+        value: item.value,
+        name: item.name, // 随机颜色
+      }));
+      this.statusChart = echarts.init(this.$refs.statusChart);
       const option = {
         tooltip: {
-          trigger: 'item',
-          backgroundColor: 'rgba(0, 25, 50, 0.8)',
-          borderColor: '#1E90FF',
+          trigger: "item",
+          backgroundColor: "rgba(0, 25, 50, 0.8)",
+          borderColor: "#1E90FF",
           textStyle: {
-            color: '#fff'
-          }
+            color: "#fff",
+          },
         },
         legend: {
-          orient: 'horizontal',
+          orient: "horizontal",
           bottom: 0,
           textStyle: {
-            color: '#a3b6c7'
-          }
+            color: "#a3b6c7",
+          },
         },
         series: [
           {
-            name: '应用状态分布',
-            type: 'pie',
-            radius: ['40%', '70%'],
+            name: "应用状态分布",
+            type: "pie",
+            radius: ["40%", "70%"],
             avoidLabelOverlap: false,
             itemStyle: {
               borderRadius: 10,
-              borderColor: '#0A192F',
-              borderWidth: 2
+              borderColor: "#0A192F",
+              borderWidth: 2,
             },
             label: {
               show: false,
-              position: 'center'
+              position: "center",
             },
             emphasis: {
               label: {
                 show: true,
                 fontSize: 20,
-                fontWeight: 'bold',
-                color: '#fff'
-              }
+                fontWeight: "bold",
+                color: "#fff",
+              },
             },
             labelLine: {
-              show: false
+              show: false,
             },
-            data: seriesData
-          }
-        ]
-      }
-      this.statusChart.setOption(option)
+            data: seriesData,
+          },
+        ],
+      };
+      this.statusChart.setOption(option);
     },
     // 获取应用图标的背景颜色
     getAppColor(type) {
       const colorMap = {
-        green: 'rgba(103, 194, 58, 0.2)',
-        yellow: 'rgba(230, 162, 60, 0.2)',
-        blue: 'rgba(64, 158, 255, 0.2)'
-      }
-      return colorMap[type] || 'rgba(64, 158, 255, 0.2)'
-    }
-  }
-}
+        green: "rgba(103, 194, 58, 0.2)",
+        yellow: "rgba(230, 162, 60, 0.2)",
+        blue: "rgba(64, 158, 255, 0.2)",
+      };
+      return colorMap[type] || "rgba(64, 158, 255, 0.2)";
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
@@ -346,7 +360,7 @@ export default {
   align-items: center;
   gap: 15px;
   transition: all 0.3s ease;
-  
+
   &:hover {
     background-color: rgba(255, 255, 255, 0.08);
   }
@@ -360,25 +374,25 @@ export default {
   align-items: center;
   justify-content: center;
   font-size: 24px;
-  
+
   &.approved {
     background-color: rgba(64, 158, 255, 0.2);
-    color: #409EFF;
+    color: #409eff;
   }
-  
+
   &.pending {
     background-color: rgba(230, 162, 60, 0.2);
-    color: #E6A23C;
+    color: #e6a23c;
   }
-  
+
   &.online {
     background-color: rgba(103, 194, 58, 0.2);
-    color: #67C23A;
+    color: #67c23a;
   }
-  
+
   &.offline {
     background-color: rgba(245, 108, 108, 0.2);
-    color: #F56C6C;
+    color: #f56c6c;
   }
 }
 
@@ -433,9 +447,9 @@ export default {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.6);
   text-decoration: none;
-  
+
   &:hover {
-    color: #409EFF;
+    color: #409eff;
   }
 }
 
@@ -464,7 +478,7 @@ export default {
   background-color: rgba(255, 255, 255, 0.05);
   border-radius: 6px;
   transition: all 0.3s ease;
-  
+
   &:hover {
     background-color: rgba(255, 255, 255, 0.08);
   }
@@ -491,7 +505,7 @@ export default {
   margin-bottom: 15px;
   padding-bottom: 15px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  
+
   &:last-child {
     margin-bottom: 0;
     padding-bottom: 0;
@@ -545,7 +559,7 @@ export default {
 .stat-bar {
   flex: 1;
   height: 6px;
-  background-color: #409EFF;
+  background-color: #409eff;
   border-radius: 3px;
 }
 
@@ -562,13 +576,13 @@ export default {
     grid-template-columns: 1fr;
     grid-template-rows: repeat(4, auto);
   }
-  
+
   .stats-cards {
     flex-direction: column;
   }
-  
+
   .stat-card {
     min-width: auto;
   }
 }
-</style>
+</style>