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

public/static/config/config.js

@@ -3,24 +3,26 @@ let systemConfig = {
     defaultAccount: {
         username: "user_yztmh_dev",
     },
-    touristUserId: "191",//默认游客用户（user002）id，Oauth中配置
-    adminRoleId: "1",//默认管理员角色id，Oauth中配置“系统管理员”角色
+    touristUserId: "191", //默认游客用户（user002）id，Oauth中配置
+    adminRoleId: "1", //默认管理员角色id，Oauth中配置“系统管理员”角色
     /*
-     * 模型id如下
-        1667（应用中心模型id）
-        1690（用户登录模型id）
-        1677（微功能服务模型id）
-     * 栏目id如下
-        1657（应用中心栏目id（示范应用））
-        1659（应用中心栏目id）
-        1666（门户都示范栏目id）
-        1676（用户登录栏目id）
-        1665（微功能服务栏目id）
-        1651（微功能搜索服务栏目id）
-     * 
-    */
-    modelIds: [1667,1690,1677],
-    columnIds: [1657,1659,1666,1676,1665,1651],
+         * 模型id如下
+            1667（应用中心模型id）
+            1690（用户登录模型id）
+            1677（微功能服务模型id）
+            1673（任务模型id）
+         * 栏目id如下
+            1657（应用中心栏目id（示范应用））
+            1659（应用中心栏目id）
+            1666（门户都示范栏目id）
+            1676（用户登录栏目id）
+            1665（微功能服务栏目id）
+            1651（微功能搜索服务栏目id）
+            1662（任务栏目id）
+         * 
+        */
+    modelIds: [1667, 1690, 1677, 1673],
+    columnIds: [1657, 1659, 1666, 1676, 1665, 1651, 1662],
 
     baseServicerPath: "/oneMap",
     // oauth和DMS环境
@@ -44,8 +46,8 @@ let systemConfig = {
     example: {
         scriptArr: [
             "/static/plugins/skyscenery/plugins/CGCS2000ArcGisMapServerImageryProvider.js",
-            "/static/plugins/skyscenery/plugins/3DTiles/add3DTiles.js"
-        ]
+            "/static/plugins/skyscenery/plugins/3DTiles/add3DTiles.js",
+        ],
     },
     sksjgl: {
         funcList: {
@@ -53,124 +55,124 @@ let systemConfig = {
                 {
                     label: "矢量数据重复项检查工具",
                     url: "http://47.103.92.60:1202/",
-                    image: "./static/images/sksjgl/sjzljc/矢量数据重复项检查工具.png"
+                    image: "./static/images/sksjgl/sjzljc/矢量数据重复项检查工具.png",
                 },
                 {
                     label: "矢量数据逻辑一致性检查工具",
                     url: "http://47.103.92.60:1202/",
-                    image: "./static/images/sksjgl/sjzljc/矢量数据逻辑一致性检查工具.png"
+                    image: "./static/images/sksjgl/sjzljc/矢量数据逻辑一致性检查工具.png",
                 },
                 {
                     label: "矢量数据语义一致性检查工具",
                     url: "http://47.103.92.60:1202/",
-                    image: "./static/images/sksjgl/sjzljc/矢量数据语义一致性检查工具.png"
+                    image: "./static/images/sksjgl/sjzljc/矢量数据语义一致性检查工具.png",
                 },
                 {
                     label: "影像数据一致性检查工具",
                     url: "http://47.103.92.60:1202/",
-                    image: "./static/images/sksjgl/sjzljc/影像数据一致性检查工具.png"
+                    image: "./static/images/sksjgl/sjzljc/影像数据一致性检查工具.png",
                 },
             ],
             sksjjg: [
                 {
                     label: "矢量数据格式转换工具",
                     url: "http://47.103.92.60:1202/",
-                    image: "./static/images/sksjgl/sksjjg/矢量数据格式转换工具.png"
+                    image: "./static/images/sksjgl/sksjjg/矢量数据格式转换工具.png",
                 },
                 {
                     label: "矢量数据投影转换工具",
                     url: "http://47.103.92.60:1202/",
-                    image: "./static/images/sksjgl/sksjjg/矢量数据投影转换工具.png"
+                    image: "./static/images/sksjgl/sksjjg/矢量数据投影转换工具.png",
                 },
                 {
                     label: "矢量数据坐标系统转换工具",
                     url: "http://47.103.92.60:1202/",
-                    image: "./static/images/sksjgl/sksjjg/矢量数据坐标系统转换工具.png"
+                    image: "./static/images/sksjgl/sksjjg/矢量数据坐标系统转换工具.png",
                 },
                 {
                     label: "矢量瓦片定制",
                     url: "http://47.103.92.60:1203/#/sliceMana",
-                    image: "./static/images/sksjgl/sksjjg/矢量瓦片定制.png"
+                    image: "./static/images/sksjgl/sksjjg/矢量瓦片定制.png",
                 },
                 {
                     label: "地图样式符号管理",
                     url: "http://47.103.92.60:1203/#/iconMana/icon",
-                    image: "./static/images/sksjgl/sksjjg/地图样式符号管理.png"
+                    image: "./static/images/sksjgl/sksjjg/地图样式符号管理.png",
                 },
                 {
                     label: "地图字体管理",
                     url: "http://47.103.92.60:1203/#/fontsets",
-                    image: "./static/images/sksjgl/sksjjg/地图字体管理.png"
+                    image: "./static/images/sksjgl/sksjjg/地图字体管理.png",
                 },
                 {
                     label: "栅格数据格式转换工具",
                     url: "http://47.103.92.60:1202/",
-                    image: "./static/images/sksjgl/sksjjg/栅格数据格式转换工具.png"
+                    image: "./static/images/sksjgl/sksjjg/栅格数据格式转换工具.png",
                 },
                 {
                     label: "栅格数据坐标系统转换工具",
                     url: "http://47.103.92.60:1202/",
-                    image: "./static/images/sksjgl/sksjjg/栅格数据坐标系统转换工具.png"
+                    image: "./static/images/sksjgl/sksjjg/栅格数据坐标系统转换工具.png",
                 },
                 {
                     label: "栅格数据投影转换工具",
                     url: "http://47.103.92.60:1202/",
-                    image: "./static/images/sksjgl/sksjjg/栅格数据投影转换工具.png"
+                    image: "./static/images/sksjgl/sksjjg/栅格数据投影转换工具.png",
                 },
                 {
                     label: "栅格数据裁切工具",
                     url: "http://47.103.92.60:1202/",
-                    image: "./static/images/sksjgl/sksjjg/栅格数据裁切工具.png"
+                    image: "./static/images/sksjgl/sksjjg/栅格数据裁切工具.png",
                 },
                 {
                     label: "正射影像数据瓦片定制",
                     url: "http://47.103.92.60:1204/",
-                    image: "./static/images/sksjgl/sksjjg/正射影像数据瓦片定制.png"
+                    image: "./static/images/sksjgl/sksjjg/正射影像数据瓦片定制.png",
                 },
             ],
             sksjgl: [
                 {
                     label: "矢量瓦片集管理",
                     url: "http://47.103.92.60:1203/#/tileMana",
-                    image: "./static/images/sksjgl/sksjgl/矢量瓦片集管理.png"
+                    image: "./static/images/sksjgl/sksjgl/矢量瓦片集管理.png",
                 },
                 {
                     label: "栅格定制任务管理",
                     url: "http://47.103.92.60:1204/",
-                    image: "./static/images/sksjgl/sksjgl/栅格定制任务管理.png"
+                    image: "./static/images/sksjgl/sksjgl/栅格定制任务管理.png",
                 },
                 {
                     label: "栅格瓦片产品管理",
                     url: "http://47.103.92.60:1204/",
-                    image: "./static/images/sksjgl/sksjgl/栅格瓦片产品管理.png"
+                    image: "./static/images/sksjgl/sksjgl/栅格瓦片产品管理.png",
                 },
                 {
                     label: "栅格瓦片服务管理",
                     url: "http://47.103.92.60:1204/",
-                    image: "./static/images/sksjgl/sksjgl/栅格瓦片服务管理.png"
-                }
+                    image: "./static/images/sksjgl/sksjgl/栅格瓦片服务管理.png",
+                },
             ],
             sksjfb: [
                 {
                     label: "栅格服务发布",
                     url: "http://10.235.245.174:2024/?token=1",
-                    image: "./static/images/sksjgl/sksjfb/栅格服务发布.png"
+                    image: "./static/images/sksjgl/sksjfb/栅格服务发布.png",
                 },
                 {
                     label: "矢量服务发布",
                     url: "http://10.235.245.174:2024/?token=1",
-                    image: "./static/images/sksjgl/sksjfb/矢量服务发布.png"
+                    image: "./static/images/sksjgl/sksjfb/矢量服务发布.png",
                 },
                 {
                     label: "动态地图服务发布",
                     url: "http://10.235.245.174:2024/?token=1",
-                    image: "./static/images/sksjgl/sksjfb/动态地图服务发布.png"
+                    image: "./static/images/sksjgl/sksjfb/动态地图服务发布.png",
                 },
             ],
-        }
+        },
     },
     skmh: {},
     wgn: {},
     yygl: {},
-    yxgl: {}
-}
+    yxgl: {},
+};

src/components/AppVue/digitalScrollersComp.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="count-flop" :key="compKey">
+    <!--  -->
+    <div
+      :class="item !== '.' ? 'count-flop-box' : 'count-flop-point'"
+      v-for="(item, index) in value"
+      :key="index"
+    >
+      <div v-if="item !== '.'" class="count-flop-content" :class="['rolling_' + item]">
+        <div v-for="(item2, index2) in numberList" :key="index2" class="count-flop-num">
+          {{ item2 }}
+        </div>
+      </div>
+      <div v-else class="count-flop-content">.</div>
+    </div>
+    <!--  -->
+    <div v-if="suffix" class="count-flop-unit">{{ suffix }}</div>
+  </div>
+</template>
+ 
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+ 
+const props = defineProps({
+  val: {
+    type: [Number, String],
+    default: 0,
+  },
+  suffix: {
+    type: String,
+    default: "",
+  },
+});
+ 
+// Data
+const value = ref([]);
+const numberList = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
+const compKey = ref(0);
+ 
+// Watcher
+watch(
+  () => props.val,
+  (newVal) => {
+    value.value = newVal.toString().split("");
+    compKey.value += 1;
+  },
+  { immediate: true },
+);
+</script>
+ 
+<style scoped>
+.count-flop {
+  display: inline-block;
+  font-size: 0;
+  /* 可更改 */
+  height: 100px;
+  line-height: 100px;
+  font-size: 50px;
+  font-weight: 700;
+  color: #ffffff;
+}
+ 
+.count-flop > div {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  height: 100%;
+}
+ 
+.count-flop-box {
+  /* 可更改 */
+  margin-right: 5px;
+  width: 86px;
+  color: #ffffff;
+  background-color: rgba(6, 41, 78, 0.7);
+  border: 1px solid #2663a5;
+  /* box-shadow: 0 2px 5px #2663a5; */
+  /*
+  这里的高度要比上面height的少2px
+  */
+  line-height: 98px;
+  border-radius: 6px;
+}
+ 
+.count-flop-point {
+  /* 可更改 */
+  margin-right: 5px;
+  width: 10px;
+}
+ 
+.count-flop-content {
+  font-family: MicrosoftYaHei-Bold;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  animation-fill-mode: forwards !important;
+}
+.rolling_0 {
+  animation: rolling_0 2.1s ease;
+}
+ 
+@keyframes rolling_0 {
+  from {
+    transform: translateY(-90%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+ 
+.rolling_1 {
+  animation: rolling_1 3s ease;
+}
+ 
+@keyframes rolling_1 {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-10%);
+  }
+}
+ 
+.rolling_2 {
+  animation: rolling_2 2.1s ease;
+}
+ 
+@keyframes rolling_2 {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-20%);
+  }
+}
+ 
+.rolling_3 {
+  animation: rolling_3 3s ease;
+}
+ 
+@keyframes rolling_3 {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-30%);
+  }
+}
+ 
+.rolling_4 {
+  animation: rolling_4 2.1s ease;
+}
+ 
+@keyframes rolling_4 {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-40%);
+  }
+}
+ 
+.rolling_5 {
+  animation: rolling_5 3s ease;
+}
+ 
+@keyframes rolling_5 {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-50%);
+  }
+}
+ 
+.rolling_6 {
+  animation: rolling_6 2.1s ease;
+}
+ 
+@keyframes rolling_6 {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-60%);
+  }
+}
+ 
+.rolling_7 {
+  animation: rolling_7 3.1s ease;
+}
+ 
+@keyframes rolling_7 {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-70%);
+  }
+}
+ 
+.rolling_8 {
+  animation: rolling_8 2.1s ease;
+}
+ 
+@keyframes rolling_8 {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-80%);
+  }
+}
+ 
+.rolling_9 {
+  animation: rolling_9 3.6s ease;
+}
+ 
+@keyframes rolling_9 {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-90%);
+  }
+}
+ 
+/* 其他 rolling_X 动画略 */
+</style>

src/components/AppVue/numberScroll.vue

@@ -0,0 +1,37 @@
+<template>
+  <span ref="numberEl">{{ displayValue }}</span>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+
+const props = defineProps({
+  value: { type: Number, default: 0 },
+  duration: { type: Number, default: 1500 },
+  easing: { type: Function, default: (t) => t * (2 - t) }
+})
+
+const displayValue = ref(0)
+const numberEl = ref(null)
+
+function animate(start, end) {
+  const startTime = performance.now()
+  const frame = (currentTime) => {
+    const elapsed = currentTime - startTime
+    const progress = Math.min(elapsed / props.duration, 1)
+    displayValue.value = Math.floor(start + (end - start) * props.easing(progress))
+    if (progress < 1) {
+      requestAnimationFrame(frame)
+    }
+  }
+  requestAnimationFrame(frame)
+}
+
+watch(() => props.value, (newVal, oldVal) => {
+  animate(oldVal, newVal)
+})
+
+onMounted(() => {
+  animate(0, props.value)
+})
+</script>

src/components/wgn/controlPanel.vue

@@ -552,7 +552,7 @@ export default {
     // 搜索微功能服务
     searchServerList() {
       let requestParams = {
-        columnId: 1651,
+        columnId: systemConfig.columnIds[5],
         states: 0,
         pageSize: 999,
         page: 0,

src/components/yxgl/card.vue

@@ -2,7 +2,10 @@
   <div>
     <div class="leftInfo">
       <div class="leftInfo_title">{{ title }}</div>
-      <div class="leftInfo_value">{{ value }}</div>
+      <div class="leftInfo_value">
+        <!-- {{value}} -->
+        <NumberScroll :value="value" :duration="2000" />
+      </div>
       <div class="leftInfo_growth" :style="{ color: growthColors[upStatus + 1] }">
         <el-icon
           ><Top v-if="upStatus == 1" /><SemiSelect v-if="upStatus == 0" /><Bottom
@@ -14,15 +17,18 @@
     <div class="icon" :style="{ background: iconColor + '32' }">
       <el-icon>
         <component :is="iconName" :color="iconColor" />
-        <!-- <Flag :color="iconColor" /> -->
       </el-icon>
     </div>
   </div>
 </template>
 
 <script>
+import NumberScroll from '@/components/AppVue/numberScroll.vue'
 export default {
   name: "card",
+  components: {
+    NumberScroll
+  },
   props: {
     title: {
       type: String,
@@ -30,7 +36,7 @@ export default {
     },
     value: {
       type: String,
-      default: "-",
+      default: "0",
     },
     growth: {
       type: String,

src/components/yxgl/table.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="table_box">
     <div class="table_title">{{ title }}</div>
-    <!-- <div class="table_more">
-      <el-button type="primary" link> 更多 </el-button>
-    </div> -->
     <el-table
       :data="tableData"
       style="width: 100%; background-color: rgba(255, 255, 255, 0.1)"
@@ -20,18 +17,6 @@
       <el-table-column prop="type" label="类别" width="600" />
       <el-table-column prop="count" label="调用次数" width="280" />
     </el-table>
-    <!-- <div class="table_pagination">
-      <el-pagination
-        v-model:current-page="currentPage"
-        v-model:page-size="pageSize"
-        :page-sizes="[100, 200, 300, 400]"
-        background
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="400"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
-    </div> -->
   </div>
 </template>
 
@@ -98,9 +83,7 @@ export default {
   padding: 20px;
   box-sizing: border-box;
   position: relative;
-  // background-color: rgba(255, 255, 255, 0.1);
   border-radius: 8px;
-  // box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
 }
 
 .table_title {
@@ -109,53 +92,6 @@ export default {
   font-weight: bold;
   margin-bottom: 15px;
   padding-bottom: 8px;
-  // border-bottom: 2px solid rgba(24, 144, 255, 0.2);
-}
-
-.table_more {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  font-size: 14px;
-  color: #1890ff;
-
-  .el-button {
-    color: #0071e3;
-
-    &:hover {
-      color: #0056b3;
-    }
-  }
-}
-
-.table_pagination {
-  position: absolute;
-  bottom: 20px;
-  right: 20px;
-
-  .el-pagination {
-    color: #e0e0e0;
-
-    .btn-prev,
-    .btn-next,
-    .el-pager li {
-      background-color: rgba(0, 0, 0, 0.3);
-      color: #e0e0e0;
-      border: 1px solid rgba(255, 255, 255, 0.1);
-
-      &:hover {
-        background-color: rgba(24, 144, 255, 0.2);
-        color: #0071e3;
-        border-color: rgba(24, 144, 255, 0.3);
-      }
-    }
-
-    .el-pager li.active {
-      background-color: rgba(24, 144, 255, 0.3);
-      color: #0071e3;
-      border-color: rgba(24, 144, 255, 0.5);
-    }
-  }
 }
 
 // 美化表格行悬停效果

src/store/index.js

@@ -6,9 +6,9 @@ export default createStore({
   state: {
     token: "",
     userState: false,
-    userInfo: null,
+    userInfo: localStorage.getItem("userInfo") ? JSON.parse(localStorage.getItem("userInfo")) : {},
     // DMS字典，系统app.vue初始化一次之后，后续直接全局$getDmsTypes可调用,传入字典cName和index，返回对应字典数据
-    DMSTypes: ["appstatus", "yzt_task_type", "applevel"],
+    DMSTypes: ["appstatus", "yzt_task_type", "applevel", "task_status"],
     // appstatus: 应用状态;yzt_task_type: 任务类型
     DmsTypesMap: localStorage.getItem("DmsTypesMap") ? JSON.parse(localStorage.getItem("DmsTypesMap")) : {},
     activeMenu: sessionStorage.getItem('activeMenu') ? parseInt(sessionStorage.getItem('activeMenu')) : 1, // 初始化为1或具体的菜单项ID

src/views/HomePage.vue

@@ -8,14 +8,17 @@
           <div class="part1-1-1">
             <div class="number-container">
               <span class="text">调用总数</span>
-              <span v-for="(num, index) in totalCall" :key="index">
+               <digitalScrollersComp :val="totalCallNumber" />
+              <!-- <span v-for="(num, index) in totalCall" :key="index">
                 <span v-if="num.indexOf(',') > -1">
                   <span class="separator">,</span>
                 </span>
                 <span v-else>
-                  <span class="number-item">{{ num }}</span>
+                  <span class="number-item">
+                    <NumberScroll :value="num" :duration="2000" />
+                  </span>
                 </span>
-              </span>
+              </span> -->
               <span class="text">次</span>
             </div>
           </div>
@@ -24,7 +27,7 @@
               <div class="line"></div>
               <div>
                 <span class="text1">昨日调用量</span>
-                <span class="count">{{ lastDayCall }}</span>
+                <span class="count"><NumberScroll :value="lastDayCall" :duration="2000" /></span>
                 <span class="text2">次</span>
               </div>
               <div class="line"></div>
@@ -36,15 +39,15 @@
     <div class="darkblue-background">
       <div class="row">
         <div>
-          <div class="strong-data blue ">{{ unitNum }}个</div>
+          <div class="strong-data blue "><NumberScroll :value="unitNum" :duration="2000" />个</div>
           <div class="font middle">授权委办数</div>
         </div>
         <div>
-          <div class="strong-data blue ">{{ appNum }}个</div>
+          <div class="strong-data blue "><NumberScroll :value="appNum" :duration="2000" />个</div>
           <div class="font middle">授权应用数</div>
         </div>
         <div>
-          <div class="strong-data blue ">{{ userNum }}个</div>
+          <div class="strong-data blue "><NumberScroll :value="userNum" :duration="2000" />个</div>
           <div class="font middle">授权用户数</div>
         </div>
       </div>
@@ -67,19 +70,19 @@
           </div>
           <div class="grid-2x2">
             <div class="lighter-container middle-container">
-              <div class="strong-data  blue">{{ weekCall }}</div>
+              <div class="strong-data  blue"><NumberScroll :value="weekCall" :duration="2000" /></div>
               <div class="title-sub ">近一周总调用</div>
             </div>
             <div class="lighter-container middle-container">
-              <div class="strong-data  blue">{{ monthCall }}</div>
+              <div class="strong-data  blue"><NumberScroll :value="monthCall" :duration="2000" /></div>
               <div class="title-sub ">近一月总调用</div>
             </div>
             <div class="lighter-container middle-container">
-              <div class="strong-data  blue">{{ seasonCall }}</div>
+              <div class="strong-data  blue"><NumberScroll :value="seasonCall" :duration="2000" /></div>
               <div class="title-sub ">近三月总调用</div>
             </div>
             <div class="lighter-container middle-container">
-              <div class="strong-data  blue">{{ yearCall }}</div>
+              <div class="strong-data  blue"><NumberScroll :value="yearCall" :duration="2000" /></div>
               <div class="title-sub ">近一年总调用</div>
             </div>
           </div>
@@ -168,15 +171,15 @@
 
       <div class="row" style="margin-top: 90px;">
         <div>
-          <div class="strong-data blue ">365个</div>
+          <div class="strong-data blue "><NumberScroll :value="365" :duration="2000" />个</div>
           <div class="font middle">地名地址</div>
         </div>
         <div>
-          <div class="strong-data blue ">366个</div>
+          <div class="strong-data blue "><NumberScroll :value="366" :duration="2000" />个</div>
           <div class="font middle">坐标转换</div>
         </div>
         <div>
-          <div class="strong-data blue ">367个</div>
+          <div class="strong-data blue "><NumberScroll :value="367" :duration="2000" />个</div>
           <div class="font middle">地图服务</div>
         </div>
       </div>
@@ -462,13 +465,20 @@ import * as echarts from "echarts";
 import moment from "moment";
 let chart1 = null;
 let chartMultiLevelUse = null;
+import NumberScroll from '@/components/AppVue/numberScroll.vue'
+import digitalScrollersComp from '@/components/AppVue/digitalScrollersComp.vue'
 
 export default {
   name: "Home",
+  components: {
+    NumberScroll,
+    digitalScrollersComp
+  },
   data() {
     return {
       lastDayCall: "0",
       totalCall: ["0", "0", "0", ",", "0", "0", "0"],
+      totalCallNumber: "0",
 
       serveNum: 0,
       userNum: 0,
@@ -589,6 +599,7 @@ export default {
     handleTotalCallNumber(num) {
       // 667507060
       let str = num.toString();
+      this.totalCallNumber = str;
       let strArr = str.split("").reverse();
       this.totalCall = [];
       for (let i = 0; i < strArr.length; i++) {
@@ -1317,10 +1328,10 @@ export default {
       overflow: hidden;
 
       .part1-1-1 {
-        height: 70px;
+        height: 100px;
         width: fit-content;
         margin: 0 auto;
-        margin-top: 30px;
+        // margin-top: 30px;
 
         .number-container {
           display: flex;
@@ -1354,8 +1365,8 @@ export default {
 
         .text {
           font-size: 24px;
-          line-height: 70px;
-          margin-right: 20px;
+          line-height: 100px;
+          padding: 0px 20px;
           color: #ffffff;
           font-weight: bold;
         }

src/views/Root.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="main">
     <Header />
-    <el-scrollbar ref="pagescrollbar">
+    <el-scrollbar ref="pagescrollbar" class="el-scrollbar">
       <router-view />
     </el-scrollbar>
     <Footer></Footer>
@@ -52,9 +52,11 @@ export default {
   overflow: hidden;
 
   .el-scrollbar {
+    position: relative;
     width: 100%;
     height: calc(100% - 120px);
     box-sizing: border-box;
+    overflow: hidden;
     overflow: auto;
   }
 }

src/views/Wgn.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="wgn_box">
-    <el-backtop target=".wgn_box" :right="20" :bottom="70" />
     <div class="server_title">
       <el-image
         style="width: 50%; height: calc(100vh - 120px)"
@@ -15,7 +14,7 @@
           两大核心能力，所有功能均以标准化服务接口形式对外提供（支持第三方委办、上层应用系统调用），同时在系统内部集成可视化操作界面，实现
           “计算 - 分析 - 展示” 闭环。
         </div>
-        <div class="server_title_text_btu">
+        <div class="server_title_text_btu" v-if="$getUserType() == 3">
           <!-- 先打开弹窗，然后上传文件保存信息到DMS的任务表，同时发送任务到微功能子系统，微功能子系统处理完成后，更新任务状态 -->
           <el-button type="primary" round plain size="large" @click="createTask"
             >大批量数据处理任务<el-icon><Position /></el-icon
@@ -140,20 +139,42 @@
         :close-on-press-escape="false"
         :show-close="true"
       >
-        <el-form :model="column.from" :rules="rules" ref="formRef" label-width="120px">
-          <el-form-item label="任务名称" prop="c_task_name">
-            <el-input v-model="column.from.c_task_name" placeholder="请输入任务名称" />
+        <el-form
+          :model="taskColumn.from"
+          :rules="taskColumn.rules"
+          ref="taskFormRef"
+          label-width="120px"
+        >
+          <el-form-item label="任务名称" prop="c_name">
+            <el-input
+              v-model="taskColumn.from.c_name"
+              placeholder="请输入任务名称"
+              clearable
+            >
+              <template #prepend>{{
+                $moment(new Date()).format("YYMMDD_HHmm") +
+                "_" +
+                (taskColumn.from.c_type
+                  ? $getDmsTypes("yzt_task_type", taskColumn.from.c_type) + "_"
+                  : "")
+              }}</template>
+            </el-input>
           </el-form-item>
-          <el-form-item label="任务描述" prop="c_task_description">
+          <el-form-item label="任务备注" prop="c_comment">
             <el-input
               type="textarea"
-              v-model="column.from.c_task_description"
-              placeholder="请输入任务描述"
+              clearable
+              v-model="taskColumn.from.c_comment"
+              placeholder="请输入任务备注"
             />
           </el-form-item>
           <!-- 下拉框选择任务类型 -->
-          <el-form-item label="任务类型" prop="c_task_type">
-            <el-select v-model="column.from.c_task_type" placeholder="请选择任务类型">
+          <el-form-item label="任务类型" prop="c_type">
+            <el-select
+              v-model="taskColumn.from.c_type"
+              @change="changeTaskType"
+              placeholder="请选择任务类型"
+            >
               <el-option
                 v-for="(name, index) in $store.state.DmsTypesMap['yzt_task_type']"
                 :key="index"
@@ -162,6 +183,97 @@
               />
             </el-select>
           </el-form-item>
+          <!-- 渲染任务描述:仅查看 -->
+          <el-form-item
+            label="任务描述"
+            prop="apiDescription"
+            v-if="taskColumn.apiFrom.apiDescription"
+          >
+            <el-input
+              type="textarea"
+              disabled
+              v-model="taskColumn.apiFrom.apiDescription"
+            />
+          </el-form-item>
+          <!-- 任务文件是必须的 -->
+          <el-form-item label="任务文件" prop="c_source_file">
+            <el-input disabled v-model="taskColumn.from.c_source_file" v-show="false" />
+            <el-upload class="avatar-uploader" :http-request="handleTCUpload" :limit="1">
+              <el-button size="small" type="primary">点击上传</el-button>
+            </el-upload>
+          </el-form-item>
+          <el-divider />
+          <!-- 其他参数数据 -->
+          <el-form-item label="其他参数数据" prop="c_source_data" v-show="false">
+            <el-input
+              type="textarea"
+              clearable
+              v-model="taskColumn.from.c_source_data"
+              placeholder="请输入其他参数数据"
+            />
+          </el-form-item>
+          <div
+            v-if="
+              taskColumn.apiFrom.apiParameterRules &&
+              includesKey(['lonKey', 'latKey', 'outFileType', 'inPrj', 'outPrj'])
+            "
+          >
+            <template
+              v-for="(rulesItem, index) in taskColumn.apiFrom.apiParameterRules"
+              :key="index"
+            >
+              <el-form-item
+                v-if="
+                  ['lonKey', 'latKey', 'outFileType', 'inPrj', 'outPrj'].includes(
+                    rulesItem
+                  )
+                "
+                :label="rulesItem"
+              >
+                <el-input
+                  v-if="['lonKey', 'latKey'].includes(rulesItem)"
+                  v-model="taskColumn.from.c_source_data[rulesItem]"
+                />
+                <el-select
+                  v-if="['outFileType', 'inPrj', 'outPrj'].includes(rulesItem)"
+                  v-model="taskColumn.from.c_source_data[rulesItem]"
+                  placeholder="请选择"
+                  +
+                  rulesItem
+                >
+                  <el-option
+                    v-for="item in taskColumn.selectOptions[rulesItem]"
+                    :key="'wgn-task-selectOptions-form-' + item.label"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </template>
+          </div>
+          <!-- 任务状态默认为初始化 -->
+          <el-form-item label="任务状态" prop="c_state" v-show="false">
+            <el-select
+              disabled
+              v-model="taskColumn.from.c_state"
+              placeholder="请选择任务状态"
+            >
+              <el-option
+                v-for="(name, index) in $store.state.DmsTypesMap['task_status']"
+                :key="'wgn-task-form-' + index"
+                :label="name"
+                :value="index"
+              />
+            </el-select>
+          </el-form-item>
+          <!-- 任务负责人默认为当前登录用户 -->
+          <el-form-item label="用户id" prop="c_user_id" v-show="false">
+            <el-input disabled v-model="taskColumn.from.c_user_id" />
+          </el-form-item>
+          <!-- 任务负责人默认为当前登录用户 -->
+          <el-form-item label="用户名" prop="c_user_name" v-show="false">
+            <el-input disabled v-model="taskColumn.from.c_user_name" />
+          </el-form-item>
         </el-form>
         <template #footer>
           <div class="dialog-footer">
@@ -176,7 +288,6 @@
 
 <script>
 import { ElNotification } from "element-plus";
-import wgn from "@/api/wgn";
 import api from "@/api/content";
 export default {
   name: "微功能服务",
@@ -243,15 +354,227 @@ export default {
           c_department: "",
         },
       },
+      // 创建任务的表单数据
+      taskColumn: {
+        columnId: systemConfig.columnIds[6],
+        modelId: systemConfig.modelIds[3],
+        rules: {
+          c_name: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
+          c_comment: [{ required: true, message: "请输入任务备注", trigger: "blur" }],
+          c_type: [{ required: true, message: "请选择任务类型", trigger: "change" }],
+          c_source_file: [
+            { required: true, message: "请上传任务文件", trigger: "change" },
+          ],
+        },
+        from: {
+          title: "",
+          content: "",
+          // 任务名称，必填（默认应该是：日期-任务类型-用户自定义名称）,这里保存的就是用户自定义名称，提交的时候会自动补充日期-任务类型-
+          c_name: "",
+          // 备注：任务的详细信息，必填
+          c_comment: "",
+          // 任务类型，必填
+          c_type: "",
+          // 任务创建人用户名，必填
+          c_user_name: "",
+          // 任务创建人，必填
+          c_user_id: "",
+          // 任务文件，必填
+          c_source_file: "",
+          // 任务文件名,上传文件时自动带入
+          c_source_file_name: "",
+          // 其他参数数据
+          c_source_data: {},
+          // 申请状态，默认初始化【0:初始化；1:运行中；2:成功完成；3:异常中断】
+          c_state: "0",
+        },
+        // 切换任务类型时，渲染的接口详情
+        apiFrom: {
+          // 任务描述，仅查看
+          apiDescription: "",
+          // 接口参数，仅查看
+          apiParameterRules: [],
+          // 接口路径
+          apiUrl: "",
+        },
+        // 其他参数
+        selectOptions: {
+          // 单位
+          unit: [
+            {
+              value: "METER",
+              label: "米",
+            },
+            {
+              value: "KILOMETER",
+              label: "千米",
+            },
+          ],
+          inPrj: [
+            {
+              value: "WGS84",
+              label: "WGS84",
+            },
+            {
+              value: "SH2000",
+              label: "SH2000",
+            },
+            {
+              value: "UTM",
+              label: "UTM",
+            },
+            {
+              value: "WEB_Mercator",
+              label: "WEB_Mercator",
+            },
+          ],
+          outPrj: [
+            {
+              value: "WGS84",
+              label: "WGS84",
+            },
+            {
+              value: "SH2000",
+              label: "SH2000",
+            },
+            {
+              value: "UTM",
+              label: "UTM",
+            },
+            {
+              value: "WEB_Mercator",
+              label: "WEB_Mercator",
+            },
+          ],
+          outFileType: [
+            {
+              value: "geoJson",
+              label: "geoJson",
+            },
+            {
+              value: "shp",
+              label: "shp",
+            },
+            {
+              value: "csv",
+              label: "csv",
+            },
+            {
+              value: "xlsx",
+              label: "xlsx",
+            },
+          ],
+        },
+      },
       // 搜索微功能服务的防抖定时器
       searchTimeout: null,
     };
   },
   mounted() {
     this.dmsDataProxy = systemConfig.dmsDataProxy;
+    // 任务负责人默认为当前登录用户
+    this.taskColumn.from.c_user_id = this.$store.state.userInfo.id;
+    // 任务创建人用户名默认为当前登录用户用户名
+    this.taskColumn.from.c_user_name = this.$store.state.userInfo.username;
     this.searchServerList();
   },
   methods: {
+    includesKey(keys) {
+      let hasKey = false;
+      keys.forEach((key) => {
+        if (this.taskColumn.apiFrom.apiParameterRules.includes(key)) {
+          hasKey = true;
+        }
+      });
+      return hasKey;
+    },
+    handleTCUpload(emit) {
+      // 上传任务文件
+      let formData = new FormData();
+      formData.append("file", emit.file);
+      formData.append("columnId", this.taskColumn.columnId);
+      formData.append("type", 0);
+      formData.append("paraName", emit.file.name);
+      api
+        .uploadFile(formData)
+        .then((res) => {
+          if (res.code === 200) {
+            this.taskColumn.from.c_source_file_name = emit.file.name;
+            this.taskColumn.from.c_source_file = res.content;
+            ElNotification.success({
+              title: "成功",
+              message: "上传任务文件成功",
+              offset: 80,
+            });
+          } else {
+            ElNotification.error({
+              title: "失败",
+              message: "上传任务文件失败" + res.msg,
+              offset: 80,
+            });
+          }
+        })
+        .catch((e) => {
+          ElNotification.error({
+            title: "失败",
+            message: "上传任务文件失败" + e,
+            offset: 80,
+          });
+        });
+    },
+    changeTaskType() {
+      if (this.taskColumn.from.c_type) {
+        // 先把任务类型每个字符中间都添加一个句号
+        let serviceId = this.taskColumn.from.c_type.split("").join(".");
+        // 根据任务类型获取任务参数
+        api
+          .getSimpleContentList({
+            columnId: systemConfig.columnIds[5],
+            states: 0,
+            pageSize: 1,
+            page: 0,
+            search: JSON.stringify([
+              {
+                field: "c_scene_name",
+                searchType: 1,
+                content: { value: serviceId },
+              },
+            ]),
+          })
+          .then((res) => {
+            if (res.code === 200) {
+              let apiInfo = res.content.data[0];
+              // 接口描述
+              this.taskColumn.apiFrom.apiDescription = apiInfo.content;
+              // 接口参数规则
+              this.taskColumn.apiFrom.apiParameterRules = JSON.parse(
+                apiInfo.c_input_parameter_rules
+              );
+              // 接口路径
+              this.taskColumn.apiFrom.apiUrl = apiInfo.c_url;
+            } else {
+              this.taskColumn.apiFrom.apiDescription = "";
+              this.taskColumn.apiFrom.apiParameterRules = [];
+              this.taskColumn.apiFrom.apiUrl = "";
+              ElNotification.error({
+                title: "失败",
+                message: "获取任务参数失败" + res.msg,
+                offset: 80,
+              });
+            }
+          })
+          .catch((e) => {
+            this.taskColumn.apiFrom.apiDescription = "";
+            this.taskColumn.apiFrom.apiParameterRules = "";
+            ElNotification.error({
+              title: "失败",
+              message: "获取任务参数失败" + e,
+              offset: 80,
+            });
+          });
+        this.taskColumn.from.c_source_data = {};
+      }
+    },
     // 搜索微功能服务
     searchServerList() {
       // 添加防抖功能，避免频繁搜索导致性能问题
@@ -275,8 +598,8 @@ export default {
           ]);
         }
         // 获取微功能服务列表
-        wgn
-          .getDmsData(requestParams)
+        api
+          .getSimpleContentList(requestParams)
           .then((res) => {
             if (res.code === 200) {
               this.dmsServerList = res.content.data;
@@ -321,6 +644,49 @@ export default {
     // 提交任务创建表单
     handleTaskSubmit() {
       let that = this;
+      // 表单验证
+      this.$refs.taskFormRef.validate((valid) => {
+        if (valid) {
+          let content = this.taskColumn.from;
+          content.title =
+            this.$moment(new Date()).format("YYMMDD_HHmm") +
+            "_" +
+            (this.taskColumn.from.c_type
+              ? this.$getDmsTypes("yzt_task_type", this.taskColumn.from.c_type) + "_"
+              : "") +
+            content.c_name;
+          content.content = this.taskColumn.apiFrom.apiDescription
+            ? this.taskColumn.apiFrom.apiDescription
+            : "";
+          content.c_name = content.title;
+          // 提交任务创建表单
+          let params = {
+            content: JSON.stringify(content),
+            columnId: this.taskColumn.columnId,
+            modelId: this.taskColumn.modelId,
+          };
+          api.addContent(params).then((res) => {
+            if (res.code === 200) {
+              that.$message({
+                message: "任务创建成功",
+                type: "success",
+              });
+              that.showTaskFrom = false;
+            } else {
+              that.$message({
+                message: "任务创建失败" + res.msg,
+                type: "error",
+              });
+            }
+          });
+        } else {
+          // 表单验证失败，提示用户填写完整信息
+          that.$message({
+            message: "请填写完整信息",
+            type: "warning",
+          });
+        }
+      });
     },
     // 提交申请使用微功能服务表单
     handleApplySubmit() {

src/views/skmh/index.vue

@@ -38,7 +38,7 @@
               fit="cover"
             />
           </div>
-          <div class="stat-number">{{countData.total.service}}</div>
+          <div class="stat-number"><NumberScroll :value="countData.total.service" :duration="2000" /></div>
           <div class="stat-label">较上月增长{{countData.grown}}%</div>
         </div>
         <div class="stat-card card-2">
@@ -49,7 +49,7 @@
               fit="cover"
             />
           </div>
-          <div class="stat-number">{{countData.curMonth.service}}</div>
+          <div class="stat-number"><NumberScroll :value="countData.curMonth.service" :duration="2000" /></div>
           <div class="stat-label">本月新增服务</div>
         </div>
         <div class="stat-card card-3">
@@ -60,7 +60,7 @@
               fit="cover"
             />
           </div>
-          <div class="stat-number">{{countData.total.username}}</div>
+          <div class="stat-number"><NumberScroll :value="countData.total.username" :duration="2000" /></div>
           <div class="stat-label">本周新增{{countData.curWeek.username}}人</div>
         </div>
       </div>
@@ -213,8 +213,12 @@ import * as echarts from 'echarts'
 import appCenter from "@/api/appCenter";
 import { countUserList,coutService,totalCountGroupByTime,countUserDataByAutoTime } from "@/api/count";
 import moment from "moment";
+import NumberScroll from '@/components/AppVue/numberScroll.vue'
 export default {
   name: 'SpatialTemporalPortal',
+  components: {
+    NumberScroll
+  },
   data() {
     return {
       deviceChart: null,

src/views/yxgl/StatisticalAnalysis.vue

@@ -38,6 +38,7 @@
         :title="item.name"
         :value="item.value"
         :growth="item.growth"
+        :iconName="item.iconName"
         :iconColor="item.iconColor"
         :upStatus="item.upStatus"
       />
@@ -46,13 +47,17 @@
     <div class="bigCard">
       <div class="bigCard_title">服务类信息统计</div>
       <div class="tools">
-        <el-button @click="downFileAllServiceDatas">
+        <el-button @click="downFileAllServiceDatas" :disabled="exportLoading">
           <!-- 这个要查询查询时间范围内的所有服务数据 -->
-          <el-icon><Upload /></el-icon> 导出数据
+          <el-icon v-if="!exportLoading"><Upload /></el-icon>
+          <el-icon v-else><Loading class="loading-icon" /></el-icon>
+          导出数据
         </el-button>
-        <el-button type="primary" @click="showDetailReport">
+        <el-button :disabled="dialogLoading" type="primary" @click="showDetailReport">
           <!-- 这个直接弹窗展示所有的服务调用数据，而不是下载 -->
-          <el-icon><TrendCharts /></el-icon>
+          <el-icon v-if="!dialogLoading"><TrendCharts /></el-icon>
+          <!-- 让图标旋转 -->
+          <el-icon v-else><Loading class="loading-icon" /></el-icon>
           详细报告
         </el-button>
       </div>
@@ -71,15 +76,44 @@
     <!-- 服务调用详情弹窗 -->
     <el-dialog
       v-model="showServerDetailReport"
-      width="60%"
+      width="80%"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
       :show-close="true"
       title="服务调用详情"
     >
-      <div style="width: 100%; position: relative; padding-bottom: 20px">
+      <div
+        style="width: 100%; position: relative; padding-bottom: 30px"
+        v-loading="dialogLoading"
+      >
         <!-- 过滤条件，全字段（除了调用时间）下拉框选择 -->
-        <div style="width: 100%; margin-bottom: 10px">
+        <div style="width: 100%; margin-bottom: 10px; z-index: 1000">
+          <!-- 再添加一个调用次数筛选 -->
+          <div style="display: flex; align-items: center; margin-bottom: 10px">
+            <span style="margin-right: 10px">调用次数:</span>
+            <el-slider
+              v-model="selectedModel['count']"
+              :min="countMin"
+              :max="countMax"
+              range
+              @change="changeSelectModel"
+              style="width: calc(60%); margin: 0 20px"
+            />
+            最小值：
+            <el-input-number
+              v-model="selectedModel.count[0]"
+              :min="countMin"
+              :max="selectedModel.count[1]"
+              @change="changeSelectModel"
+            />
+            最大值：
+            <el-input-number
+              v-model="selectedModel.count[1]"
+              :min="selectedModel.count[0]"
+              :max="countMax"
+              @change="changeSelectModel"
+            />
+          </div>
           <!-- 支持筛选条件清空 -->
           <el-select
             style="width: 200px; margin-right: 10px"
@@ -93,6 +127,19 @@
           >
             <el-option v-for="item in value" :key="item" :label="item" :value="item" />
           </el-select>
+          <!-- 再添加一个时间搜索范围，字段是date, 格式是YYYY-MM-DD -->
+          <el-date-picker
+            style="margin-right: 10px"
+            v-model="selectedModel['date']"
+            type="daterange"
+            clearable
+            unlink-panels
+            @change="changeSelectModel"
+            :disabled-date="disabledDate"
+            range-separator="到"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+          />
           <!-- 重置按钮 -->
           <el-button type="primary" @click="resetSelectModel">重置</el-button>
         </div>
@@ -108,16 +155,17 @@
           <el-table-column prop="path_comment" label="服务名称" />
           <el-table-column prop="unit" label="委办单位" width="200" />
           <el-table-column prop="type" label="服务类别" width="120" />
+          <el-table-column prop="count" label="调用次数" width="100" />
           <el-table-column prop="date" label="调用时间" width="120" />
         </el-table>
-        <div class="table_pagination">
+        <div style="float: right; padding-top: 10px">
           <el-pagination
             v-model:current-page="currentPage"
             v-model:page-size="pageSize"
-            :page-sizes="[100, 200, 300, 400]"
+            :page-sizes="[50, 100, 200, 500]"
             background
             layout="total, sizes, prev, pager, next, jumper"
-            :total="serverData.length"
+            :total="tableDataTotal"
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
           />
@@ -222,6 +270,10 @@ export default {
   },
   data() {
     return {
+      // 导出Loading状态
+      exportLoading: false,
+      // 弹窗加载状态
+      dialogLoading: false,
       // 获取数据状态
       getDataStatus: false,
       // 比较的时间范围(默认60天到30天前，主要跟nowTimes有关系)
@@ -243,9 +295,10 @@ export default {
       },
       selectKeyName: {
         application: "应用名称",
-        path_comment: "接口注释",
-        unit: "单位",
-        type: "数据类型",
+        path_comment: "服务名称",
+        unit: "委办单位",
+        count: "调用次数",
+        type: "服务类型",
       },
       // 筛选条件下拉框选中的值
       selectedModel: {
@@ -253,15 +306,23 @@ export default {
         path_comment: "",
         unit: "",
         type: "",
+        count: "",
+        date: "",
       },
+      // 调用次数范围的最小值和最大值
+      countMin: 0,
+      countMax: 0,
+      tableColumns: ["application", "path_comment", "unit", "count", "type", "date"],
       // 分页大小
-      pageSize: 100,
+      pageSize: 50,
       // 当前页码
       currentPage: 1,
+      // 表格数据总条数
+      tableDataTotal: 0,
       TopCardDatas: [
         {
           name: "委办总数",
-          value: "-",
+          value: "0",
           growth: "--",
           iconColor: "#2563db",
           iconName: "OfficeBuilding",
@@ -269,7 +330,7 @@ export default {
         },
         {
           name: "系统总数",
-          value: "-",
+          value: "0",
           growth: "--",
           iconColor: "#16a34a",
           iconName: "WalletFilled",
@@ -277,18 +338,18 @@ export default {
         },
         {
           name: "服务总数",
-          value: "-",
+          value: "0",
           growth: "--",
           iconColor: "#9333ea",
-          iconName: "TrendCharts",
+          iconName: "CollectionTag",
           upStatus: 0,
         },
         {
           name: "服务调用总数",
-          value: "-",
+          value: "0",
           growth: "--",
           iconColor: "#ca8a04",
-          iconName: "TrendCharts",
+          iconName: "Paperclip",
           upStatus: 0,
         },
       ],
@@ -330,7 +391,16 @@ export default {
     });
   },
   methods: {
+    // 禁用日期选择器中未来的日期(不能选择nowTimes以外的时间)
+    disabledDate(time) {
+      return (
+        time.getTime() > this.nowTimes[1].getTime() ||
+        time.getTime() < this.nowTimes[0].getTime() - 24 * 60 * 60 * 1000
+      );
+    },
+    // 分页大小改变时，更新展示数据
     handleSizeChange() {
+      this.dialogLoading = true;
       let searchDatas = this.serverData.filter((item) => {
         return (
           (!this.selectedModel.application ||
@@ -341,25 +411,64 @@ export default {
           (!this.selectedModel.type || item.type === this.selectedModel.type)
         );
       });
+      // 添加时间范围搜索逻辑
+      if (this.selectedModel.date) {
+        searchDatas = searchDatas.filter((item) => {
+          return (
+            new Date(item.date).getTime() >=
+              new Date(
+                this.$moment(new Date(this.selectedModel.date[0])).format(
+                  "YYYY-MM-DD 00:00:00"
+                )
+              ).getTime() &&
+            new Date(item.date).getTime() <=
+              new Date(
+                this.$moment(new Date(this.selectedModel.date[1])).format(
+                  "YYYY-MM-DD 23:59:59"
+                )
+              ).getTime()
+          );
+        });
+      }
+
+      // 添加调用次数范围搜索逻辑
+      if (this.selectedModel.count) {
+        searchDatas = searchDatas.filter((item) => {
+          return (
+            item.count >= this.selectedModel.count[0] &&
+            item.count <= this.selectedModel.count[1]
+          );
+        });
+      }
+
+      // 格式化日期为YYYY-MM-DD格式
+      searchDatas.forEach((item) => {
+        item.date = this.$moment(new Date(item.date)).format("YYYY-MM-DD");
+      });
+
+      // 分页展示数据
       this.showServerData = searchDatas.slice(
         (this.currentPage - 1) * this.pageSize,
         this.currentPage * this.pageSize
       );
+
       // 遍历筛选条件下拉框选项，更新每个选项的数组
       for (let key in this.selectOptions) {
         this.selectOptions[key] = [
-          ...new Set(this.serverData.map((item) => (item[key] ? item[key] : "未知"))),
+          ...new Set(searchDatas.map((item) => (item[key] ? item[key] : "未知"))),
         ];
       }
       // 更新分页组件数据
-      this.total = searchDatas.length;
+      this.tableDataTotal = searchDatas.length;
       this.showServerDetailReport = true;
+      this.dialogLoading = false;
     },
     handleCurrentChange() {
       this.handleSizeChange();
     },
     // 筛选条件下拉框选中值改变时，触发的事件
     changeSelectModel() {
+      console.log(this.selectedModel);
       // 重置当前页码为第一页
       this.currentPage = 1;
       // 处理分页数据
@@ -370,10 +479,12 @@ export default {
       for (let key in this.selectedModel) {
         this.selectedModel[key] = "";
       }
+      this.selectedModel.count = [this.countMin, this.countMax];
       this.handleSizeChange();
     },
     // 打开弹窗，渲染table列表，展示查询时间的所有数据详情
     showDetailReport() {
+      this.dialogLoading = true;
       // 要先请求，然后时间排序一下。
       appCenter
         .getServiceDataByDate({
@@ -385,7 +496,18 @@ export default {
         .then((res) => {
           if (res && res.code == 200) {
             if (res.content && res.content.length > 0) {
+              res.content.forEach((item) => {
+                this.tableColumns.forEach((key) => {
+                  if (item[key] == undefined) {
+                    item[key] = "未知";
+                  }
+                });
+              });
               this.serverData = res.content;
+              // 得到count的最大值和最小值
+              this.countMax = Math.max(...this.serverData.map((item) => item.count));
+              this.countMin = Math.min(...this.serverData.map((item) => item.count));
+              this.resetSelectModel();
               this.handleSizeChange();
             } else {
               this.$message({
@@ -394,6 +516,15 @@ export default {
               });
             }
           }
+        })
+        .catch((e) => {
+          this.$message({
+            message: e,
+            type: "error",
+          });
+        })
+        .finally(() => {
+          this.dialogLoading = false;
         });
     },
     initChart() {
@@ -413,7 +544,16 @@ export default {
               res.content.TopCardDatas &&
               typeof res.content.TopCardDatas === "object"
             ) {
-              this.TopCardDatas = res.content.TopCardDatas;
+              // 不能覆盖iconName
+              this.TopCardDatas.forEach((cardItem) => {
+                res.content.TopCardDatas.forEach((cardData) => {
+                  if (cardItem.name == cardData.name) {
+                    cardItem.value = cardData.value;
+                    cardItem.growth = cardData.growth;
+                    cardItem.upStatus = cardData.upStatus;
+                  }
+                });
+              });
             }
 
             this.dataToOption(
@@ -452,6 +592,9 @@ export default {
             this.dataToOption("服务类别分布", "pie", serviceCountType, {
               pieKey: { value: "count", name: "type" },
               pieData: [],
+              padAngle: 0,
+              borderRadius: 0,
+              label: {},
             });
 
             // 服务调用TOP10
@@ -551,7 +694,7 @@ export default {
               });
             }
 
-            console.log("getAllYxglDatas", res);
+            // console.log("getAllYxglDatas", res);
           }
           this.getDataStatus = false;
         })
@@ -584,7 +727,6 @@ export default {
             });
             // 转换为数组
             for (let key in statusMap) {
-              console.log(key, statusMap[key]);
               if (statusMap[key] && key) {
                 tableDatas.push({
                   name: this.$getDmsTypes("appstatus", key),
@@ -608,27 +750,39 @@ export default {
     },
     // 导出所选时间范围内的所有服务数据
     downFileAllServiceDatas() {
-      appCenter.downFileAllServiceDatas({ nowTimes: this.nowTimes }).then((res) => {
-        const blob = res; // 响应体是 Blob 类型
-        if (!blob) {
-          that.$message.error("下载失败：文件流为空");
-          reject("文件流为空");
-          return;
-        }
-        if (!(blob instanceof Blob) || blob.size === 0) {
-          this.$message.error("文件流解析失败，无法生成下载链接");
-          return;
-        }
-        const url = window.URL.createObjectURL(blob); // 将 Blob 转为临时 URL
-        const link = document.createElement("a");
-        link.href = url;
-        link.download = "服务信息统计.xlsx"; // 设置下载文件名
-        link.style.display = "none";
-        document.body.appendChild(link);
-        link.click(); // 触发点击下载
-        document.body.removeChild(link);
-        window.URL.revokeObjectURL(url); // 销毁临时 URL，避免内存泄漏
-      });
+      this.exportLoading = true;
+      appCenter
+        .downFileAllServiceDatas({ nowTimes: this.nowTimes })
+        .then((res) => {
+          const blob = res; // 响应体是 Blob 类型
+          if (!blob) {
+            that.$message.error("下载失败：文件流为空");
+            reject("文件流为空");
+            return;
+          }
+          if (!(blob instanceof Blob) || blob.size === 0) {
+            this.$message.error("文件流解析失败，无法生成下载链接");
+            return;
+          }
+          const url = window.URL.createObjectURL(blob); // 将 Blob 转为临时 URL
+          const link = document.createElement("a");
+          link.href = url;
+          link.download = "服务信息统计.xlsx"; // 设置下载文件名
+          link.style.display = "none";
+          document.body.appendChild(link);
+          link.click(); // 触发点击下载
+          document.body.removeChild(link);
+          window.URL.revokeObjectURL(url); // 销毁临时 URL，避免内存泄漏
+        })
+        .catch((e) => {
+          this.$message({
+            message: "导出数据失败",
+            type: "error",
+          });
+        })
+        .finally(() => {
+          this.exportLoading = false;
+        });
     },
     /**
      * 数据转换为图表选项
@@ -1042,10 +1196,19 @@ export default {
   .demo-date-picker .block:last-child {
     border-bottom: none;
   }
-  .table_pagination {
-    position: absolute;
-    bottom: 20px;
-    right: 20px;
+}
+
+// 弹窗加载状态图标
+.loading-icon {
+  // 图标顺时针旋转动画
+  animation: loading-icon-spin 2s linear infinite;
+}
+@keyframes loading-icon-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
   }
 }
 </style>

src/views/yygl/monitor/index.vue

@@ -10,7 +10,7 @@
           </div>
           <div class="stat-content">
             <div class="stat-label">{{ item.name }}</div>
-            <div class="stat-number">{{ item.value }} 个</div>
+            <div class="stat-number"><NumberScroll :value="item.value" :duration="2000" /> 个</div>
           </div>
         </div>
         <!-- <div class="stat-card">
@@ -153,9 +153,12 @@ import * as echarts from "echarts";
 import appCenter from "@/api/appCenter";
 import { topApp,countAppInfo } from "@/api/count";
 import moment from "moment";
+import NumberScroll from '@/components/AppVue/numberScroll.vue'
 export default {
   name: "ApplicationMonitor",
-  components: {},
+  components: {
+    NumberScroll
+  },
   data() {
     return {
       statusChart: null,