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

public/static/config/config.js

@@ -4,6 +4,7 @@ let systemConfig = {
         userName: "user002",
         password: "Yysz@1234002"
     },
+    touristUserId: "5",//默认游客id
     baseServicerPath: "/oneMap",
     // oauth和DMS环境
     backServerPath: "http://121.43.55.7",

src/api/count.js

@@ -519,8 +519,19 @@ export function countUserDataByTime(time1, time2, time3) {
     return resolveoauthResult(postform(oauthCountUser, data))
 }
 
-export function coutService() {
-    return resolveoauthResult(postform(oauthCountPermission))
+export function countUserDataByAutoTime(param) {
+    let data = {
+        "time": param
+    }
+    return resolveoauthResult(postform(oauthCountUser, data))
+}
+
+export function coutService(start, end) {
+    let data = {
+        start: formatDateToDb(start),
+        end: formatDateToDb(end)
+    };
+    return resolveoauthResult(postform(oauthCountPermission,data))
 }
 
 function timeCheckers(start, end) {

src/views/Wgn.vue

@@ -3,7 +3,7 @@
     <el-backtop target=".wgn_box" :right="20" :bottom="70" />
     <div class="server_title">
       <el-image
-        style="width: 43vw; height: calc(100vh - 120px)"
+        style="width: 50%; height: calc(100vh - 120px)"
         src="static/images/wgn_title.png"
         fit="cover"
       />

src/views/skmh/index.vue

@@ -4,7 +4,7 @@
 
     <div class="server_title">
       <el-image
-        style="width: 824px; height: 786px"
+        style="width: 50%; height: calc(100vh - 120px)"
         src="static/images/wgn_title.png"
         fit="cover"
       />
@@ -38,8 +38,8 @@
               fit="cover"
             />
           </div>
-          <div class="stat-number">1,248</div>
-          <div class="stat-label">较上月增长12.5%</div>
+          <div class="stat-number">{{countData.total.service}}</div>
+          <div class="stat-label">较上月增长{{countData.grown}}%</div>
         </div>
         <div class="stat-card card-2">
           <div class="stat-label">新上线服务统计
@@ -49,7 +49,7 @@
               fit="cover"
             />
           </div>
-          <div class="stat-number">86</div>
+          <div class="stat-number">{{countData.curMonth.service}}</div>
           <div class="stat-label">本月新增服务</div>
         </div>
         <div class="stat-card card-3">
@@ -60,8 +60,8 @@
               fit="cover"
             />
           </div>
-          <div class="stat-number">24,586</div>
-          <div class="stat-label">本周新增12,34人</div>
+          <div class="stat-number">{{countData.total.username}}</div>
+          <div class="stat-label">本周新增{{countData.curWeek.username}}人</div>
         </div>
       </div>
     </div>
@@ -131,11 +131,18 @@
       <div class="chart-card full-width">
         <div class="chart-title">用户分布</div>
         <!-- <div ref="comparisonChart" class="chart-container"></div> -->
-        <el-table :data="tableData" style="width: 100%">
-          <el-table-column prop="name" label="委办单位" />
-          <el-table-column prop="number" label="用户名称" />
-          <el-table-column prop="activity" label="活跃天数" />
-          <el-table-column prop="server" label="服务使用量" />
+        <el-table :data="tableData" style="width: 100%"
+          height="calc(100% - 40px);
+          background-color: rgba(255, 255, 255, 0.1);"
+          :header-cell-style="headerCellStyle"
+          :row-style="rowStyle"
+          :cell-style="cellStyle"
+          stripe
+          border>
+          <el-table-column prop="unit" label="委办单位" />
+          <el-table-column prop="user" label="用户数量" />
+          <el-table-column prop="active" label="活跃天数" />
+          <el-table-column prop="count" label="服务使用量" />
         </el-table>
       </div>
     </div>
@@ -146,8 +153,18 @@
         <h2>功能演示</h2>
       </div>
       <div class="demo-grid">
-        <div class="demo-card">
-          <div class="demo-thumbnail">
+        <div class="demo-card" v-for="item in applications" :key="item.id">
+          <div class="demo-thumbnail" :style="{ backgroundImage: 'url(' + item.backImg + ')',backgroundSize: 'cover' }">
+            <div class="play-btn" @click="openVideo(item)">▶</div>
+          </div>
+          <div class="demo-title">
+            <div class="demo-label">{{item.title}}</div>
+            <div class="demo-text">{{item.content}}</div>
+          </div>
+        </div>
+
+        <!-- <div class="demo-card">
+          <div class="demo-thumbnail" :style="{ backgroundImage: 'url(' + imageUrl + ')' }">
             <div class="play-btn">▶</div>
           </div>
           <div class="demo-title">
@@ -172,16 +189,30 @@
             <div class="demo-label">实际业务场景应用</div>
             <div class="demo-text">展示系统在行业中的实际应用案例</div>
           </div>
-          
-        </div>
+        </div> -->
+
       </div>
     </div>
+
+    <div>
+      <el-dialog
+        v-model="centerDialogVisible"
+        title="预览"
+        width="800"
+        center
+        :before-close="closeDialog"
+      >
+        <video :src="videoUrl" controls style="width: 100%" />
+      </el-dialog>
+    </div>
   </div>
 </template>
 
 <script>
 import * as echarts from 'echarts'
-
+import appCenter from "@/api/appCenter";
+import { countUserList,coutService,totalCountGroupByTime,countUserDataByAutoTime } from "@/api/count";
+import moment from "moment";
 export default {
   name: 'SpatialTemporalPortal',
   data() {
@@ -191,39 +222,63 @@ export default {
       activityChart: null,
       dataVolumeChart: null,
       comparisonChart: null,
-      fromTime:{
-        date:[new Date(),new Date()]
-      },
-      tableData:[
-        {
-          number: '1234',
-          name: 'tom',
-          activity:'87',
-          server: '2324',
+      centerDialogVisible: false,
+      videoUrl: "",
+      imageUrl: "static/images/wgn_title.png",
+      countData:{
+        total:{
+          service:0,
+          username:0,
         },
-        {
-          number: '1234',
-          name: 'canver',
-          activity:'78',
-          server: '2324',
+        curWeek:{
+          service:0,
+          username:0,
         },
-        {
-          number: '1234',
-          name: 'lina',
-          activity:'88',
-          server: '2324',
+        curMonth:{
+          service:0,
+          username:0,
         },
-        {
-          number: '1234',
-          name: 'wang',
-          activity:'86',
-          server: '2324',
+        lastMonth:{
+          service:0,
+          username:0,
         },
-      ]
+        grown:0,
+      },
+      fromTime:{
+        date:[new Date(new Date().setMonth(new Date().getMonth() - 1)),new Date()],// 默认显示最近一个月
+      },
+      tableData:[],
+      applications:[],
     }
   },
+  computed: {
+    headerCellStyle() {
+      return {
+        backgroundColor: "rgba(24, 144, 255, 0.25)",
+        color: "#0071e3",
+        fontWeight: "bold",
+        borderBottom: "2px solid rgba(24, 144, 255, 0.3)",
+        padding: "12px 8px",
+      };
+    },
+    rowStyle() {
+      return {
+        // 调整行背景色为更浅的黑色，增加透明度
+        backgroundColor: "rgba(0, 0, 0, 0.05)",
+        borderBottom: "1px solid rgba(255, 255, 255, 0.05)",
+        transition: "all 0.3s ease",
+      };
+    },
+    cellStyle() {
+      return {
+        color: "#e0e0e0",
+        padding: "12px 8px",
+        borderRight: "1px solid rgba(255, 255, 255, 0.05)",
+      };
+    },
+  },
   mounted() {
-    this.initCharts()
+    this.initData()
     window.addEventListener('resize', this.handleResize)
   },
   beforeUnmount() {
@@ -231,12 +286,198 @@ export default {
     this.destroyCharts()
   },
   methods: {
-    initCharts() {
-      this.initDeviceChart()
-      this.initStatusChart()
-      // this.initActivityChart()
-      // this.initDataVolumeChart()
-      // this.initComparisonChart()
+    initData(){
+      this.getTimeRange();
+      this.getCountUserDataByAutoTime();
+      this.getDmsDataList();
+    },
+    getTimeRange(){
+      this.getTotalCountGroupByTime();
+      this.getCountUserList();
+      this.getCoutService();
+    },
+    openVideo(param) {
+      console.log(param)
+      this.videoUrl = param.url;
+      this.centerDialogVisible = true;
+    },
+    closeDialog() {
+      this.videoUrl = "";
+      this.centerDialogVisible = false;
+    },
+    getDmsDataList() {
+      let requestParams = {
+        columnId: 1666,
+        states: 0,
+        orderBy: JSON.stringify([{"field":"update_time","orderByType":2}]),
+        pageSize: 9999,
+        page: 0,
+      };
+      this.applications = [];
+      appCenter.getDmsDataList(requestParams).then((res) => {
+        if (res.code === 200) {
+          this.applications = res.content.data.map((item) => ({
+            ...item,
+            status:
+              item.status === 0
+                ? "待审核"
+                : item.status === 1
+                ? "待发布"
+                : item.status === 2
+                ? "未完成"
+                : "已完成",
+            createTime: moment(item.create_time).format("YYYY-MM-DD HH:mm:ss"),
+            backImg: systemConfig.dmsDataProxy + item.c_picture,
+            url: item.c_url,
+          }));
+        }
+      });
+    },
+    getCountUserDataByAutoTime(){
+      let param = JSON.stringify([
+        {
+          name: "total",
+          start: '2000-01-01 00:00:00', // 从2000年1月1日开始
+          end: moment(new Date()).format("YYYY-MM-DD HH:mm:ss") // 到当前时间
+        },
+        {
+          name: "curWeek",
+          start: moment().weekday(1).format("YYYY-MM-DD 00:00:00"), //本周一00:00:00
+          end: moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
+        },
+        {
+          name: "curMonth",
+          start: moment().startOf('month').format('YYYY-MM-DD 00:00:00'), //本月1日00:00:00
+          end: moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
+        },
+        {
+          name: "lastMonth",
+          start: moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD 00:00:00'), //上月1日00:00:00
+          end:  moment().subtract(1, 'month').endOf('month').format("YYYY-MM-DD HH:mm:ss") //上月最后一天23:59:59
+        },
+      ])
+      // console.log(param)
+      countUserDataByAutoTime(param).then(res => {
+        // console.log(res)
+        this.countData = res;
+        this.countData.grown = (res.curMonth.service/res.lastMonth.service)*100;
+        this.countData.grown = this.countData.grown.toFixed(2)
+      })
+    },
+    getTotalCountGroupByTime(){
+      let start = this.fromTime.date[0], end = this.fromTime.date[1];
+      totalCountGroupByTime(start,end).then(res => {
+        this.drawLineChart(res)
+      })
+    },
+    drawLineChart(data){
+      let that = this;
+      let times = []
+      let values = []
+      data.sort((a, b) => a.time - b.time)
+      data.forEach((item,index) => {
+        times.push(moment(item.time).format("YYYY-MM-DD"))
+        values.push(item.count)
+      })
+      // 基于准备好的dom，初始化echarts实例
+      let lineChart = echarts.init(this.$refs.deviceChart)
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: { type: "shadow" },
+          backgroundColor: 'rgba(0, 25, 50, 0.8)',
+          borderColor: '#1E90FF',
+          textStyle: {
+            color: '#fff'
+          },
+          formatter: function (params) {
+            let str = '';
+            params.forEach(item => {
+              str += `${item.name} <br/> ${item.seriesName}: ${item.value}次<br/>`;
+            });
+            return str;
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: times,
+          axisLabel: {
+            color: '#a3b6c7',
+            formatter: function (params) {
+              let str = '';
+              let arr = params.split("-")
+              str = `${arr[1]}/${arr[2]}`
+              return str;
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#1E90FF'
+            }
+          }
+          
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            color: '#a3b6c7'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#1E90FF'
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(30, 144, 255, 0.2)'
+            }
+          }
+        },
+        series: [
+          {
+            name: "访问次数",
+            type: 'line',
+            data: values,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#1E90FF' },
+                { offset: 1, color: '#00BFFF' }
+              ])
+            }
+          }
+        ]
+      }
+      // 绘制图表
+      lineChart.setOption(option);
+      that.deviceChart = lineChart;
+    },
+    getCoutService(){
+        let start = this.fromTime.date[0], end = this.fromTime.date[1];
+        coutService(start,end).then(res => {
+          // console.log('[ res ] >', res)
+          let arr = [];
+          res.sort((a, b) => b.count - a.count)
+          res.forEach(item => {
+            // let str = { value: item.count, name: item.service_name, itemStyle: { color: '#52C41A' } }
+            let str = { value: item.count, name: item.service_name }
+            arr.push(str)
+          })
+          this.initStatusChart(arr)
+        })
+    },
+    getCountUserList(){
+      let that = this
+      let start = this.fromTime.date[0], end = this.fromTime.date[1];
+      countUserList(start,end).then(res => {
+        res.sort((a, b) => b.count - a.count)
+        that.tableData = res;
+      })
     },
     handleType(param){
       const end = new Date()
@@ -244,13 +485,12 @@ export default {
       start.setTime(start.getTime() - 3600 * 1000 * 24 * param) //天计算
       end.setTime(end.getTime() - 3600 * 1000 * 24 * 1) //天计算
       // start.setMonth(start.getMonth() - 6)
-      this.fromTime.date = [start,end]
+      this.fromTime.date = [start,end];
+      this.getTimeRange();
     },
     changeTime(v){
-      debugger
-      console.log('[ eee ] >', v)
       this.fromTime.date=v
-      
+      this.getTimeRange();
     },
     
     initDeviceChart() {
@@ -323,7 +563,7 @@ export default {
       this.deviceChart.setOption(option)
     },
     
-    initStatusChart() {
+    initStatusChart(seriesData) {
       this.statusChart = echarts.init(this.$refs.statusChart)
       const option = {
         tooltip: {
@@ -367,12 +607,7 @@ export default {
             labelLine: {
               show: false
             },
-            data: [
-              { value: 400, name: '空间分析', itemStyle: { color: '#52C41A' } },
-              { value: 300, name: '数据查询', itemStyle: { color: '#FAAD14' } },
-              { value: 200, name: '三维可视化', itemStyle: { color: '#F5222D' } },
-              { value: 100, name: '路径规划', itemStyle: { color: '#8C8C8C' } }
-            ]
+            data: seriesData
           }
         ]
       }
@@ -766,12 +1001,12 @@ export default {
   
   .stats-grid {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     gap: 30px;
     flex-wrap: wrap;
     
     .stat-card {
-      width: 29%;
+      width: 400px;
       height: 150px;
       border-radius: 12px;
       padding: 20px;
@@ -957,8 +1192,10 @@ export default {
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
       transition: transform 0.3s ease;
       
-      &:hover {
+       &:hover {
         transform: translateY(-5px);
+        box-shadow: 0 10px 30px rgba(24, 144, 255, 0.3);
+        border-color: rgba(24, 144, 255, 0.6);
       }
       
       .demo-thumbnail {
@@ -1072,4 +1309,35 @@ export default {
     }
   }
 }
+// 美化表格行悬停效果
+:deep(.el-table__body tr:hover > td) {
+  background-color: rgba(24, 144, 255, 0.1) !important;
+}
+
+// 美化表格边框
+:deep(.el-table__inner-wrapper) {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+:deep(.el-table__cell) {
+  border-right: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+:deep(.el-table__row) {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+// 调整奇偶行背景色，使其更明亮
+:deep(.el-table--striped .el-table__body tr.el-table__row--striped) {
+  background-color: rgba(255, 255, 255, 0.02) !important;
+}
+
+// 调整表格主体背景色
+:deep(.el-table__body) {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
+  background-color: rgba(255, 255, 255, 0.02);
+}
 </style>

src/views/yygl/appCenter.vue

@@ -8,7 +8,7 @@
             <el-icon><Menu /></el-icon>
             <span>应用概览</span>
             </div>
-            <div class="menu-item" :class="{'active': menuValue === 2}" @click="handleMenuClick(2)">
+            <div class="menu-item" v-if="userInfo.id != touristUserId" :class="{'active': menuValue === 2}" @click="handleMenuClick(2)">
             <el-icon><Grid /></el-icon>
             <span>应用管理</span>
             </div>
@@ -42,11 +42,15 @@ export default {
   },
   data() {
     return {
+        touristUserId:systemConfig.touristUserId,
+        userInfo:this.$store.state.userInfo,
+        userState:this.$store.state.userState,
         menuValue:1
     }
   },
   methods: {
     handleMenuClick(value) {
+      console.log(value)
       this.menuValue = value;
     }
   }

src/views/yygl/monitor/index.vue

@@ -66,18 +66,42 @@
         <!-- 快捷应用 -->
         <div class="module">
           <div class="module-header">
-            <h3 class="module-title">快捷应用</h3>
-            <a href="#" class="module-more">更多</a>
+            <h3 class="module-title">应用趋势图</h3>
+            <el-select v-model="selectedAppRange" size="small" style="width: 120px;" @change="handleAppChange">
+              <el-option
+                    v-for="item in selectAapplications"
+                    :key="item.id"
+                    :label="item.title"
+                    :value="item.title"
+                />
+            </el-select>
+            <div>
+              <el-date-picker
+                size="small"
+                :clearable="false"
+                v-model="datetimeValue"
+                type="daterange"
+                @change="handleDateChange"
+                :shortcuts="shortcuts"
+                format="YYYY-MM-DD"
+                range-separator="-"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+              />
+            </div>
+            <!-- <a href="#" class="module-more">更多</a> -->
           </div>
           <div class="module-content">
-            <div class="quick-app" v-for="(app, index) in quickApps" :key="index">
+            <div ref="lineChartRes" class="chart-container"></div>
+            <!-- <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-name">{{ app.name }}</span>
               </div>
-            </div>
+            </div> -->
+
           </div>
         </div>
 
@@ -88,9 +112,9 @@
             <!-- <a href="#" class="module-more">更多</a> -->
           </div>
           <div class="module-content">
-            <div class="new-app" v-for="(app, index) in applications" :key="index">
+            <div class="new-app" v-for="(app, index) in newApplications" :key="index">
               <div class="app-info">
-                <span class="app-name">{{ app.title }}</span>
+                <span class="app-name">{{ app.title }} </span>
                 <span class="app-date">{{ app.createTime }}</span>
               </div>
             </div>
@@ -101,7 +125,7 @@
         <div class="module">
           <div class="module-header">
             <h3 class="module-title">应用热度排行TOP5</h3>
-            <a href="#" class="module-more">更多</a>
+            <!-- <a href="#" class="module-more">更多</a> -->
           </div>
           <div class="module-content">
             <div class="hot-app" v-for="(app, index) in hotApps" :key="index">
@@ -127,6 +151,7 @@
 <script>
 import * as echarts from "echarts";
 import appCenter from "@/api/appCenter";
+import { topApp,countAppInfo } from "@/api/count";
 import moment from "moment";
 export default {
   name: "ApplicationMonitor",
@@ -134,13 +159,55 @@ export default {
   data() {
     return {
       statusChart: null,
+      lineChart: null,
       itemApplications: [],
       applications: [],
+      newApplications: [],
       statusOptions: [],
       buffOptions: [],
       tagOptions: [],
       typeArrs: [],
-
+      selectAapplications: [],
+      selectedAppRange: '',
+      datetimeValue:[new Date(new Date().setMonth(new Date().getMonth() - 1)),new Date()],// 默认显示最近一个月
+      shortcuts: [
+        {
+          text: '当天',
+          value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setDate(start.getDate())
+            return [start, end]
+          },
+        },
+        {
+          text: '最近7天',
+          value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setDate(start.getDate() - 7)
+            return [start, end]
+          },
+        },
+        {
+          text: '最近1月',
+          value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setMonth(start.getMonth() - 1)
+            return [start, end]
+          },
+        },
+        // {
+        //   text: 'Last 3 months',
+        //   value: () => {
+        //     const end = new Date()
+        //     const start = new Date()
+        //     start.setMonth(start.getMonth() - 3)
+        //     return [start, end]
+        //   },
+        // },
+      ],
       // 快捷应用数据
       quickApps: [
         { name: "农产品安全管控示范应用场", type: "green" },
@@ -149,13 +216,7 @@ export default {
       ],
 
       // 应用热度排行数据
-      hotApps: [
-        { 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 },
-      ],
+      hotApps: [],
     };
   },
   mounted() {
@@ -172,15 +233,138 @@ export default {
       this.getDmsCNameAType("appstatus");
       this.getDmsCNameAType("tag");
       this.getDmsDataList();
+      let param = {
+        num: 6,
+        start: moment().subtract(1, "month").format("YYYY-MM-DD"),
+        end: moment().format("YYYY-MM-DD"),
+      }
+      this.getAppCount(param);
+    },
+    // 获取应用统计数据
+    getAppCount(param) {
+      let that = this;
+      that.hotApps =[]
+      topApp(param.num,param.start,param.end).then((res) => {
+        let maxv = 100;
+        res.forEach((item,index) => {
+          if(index === 0){
+            maxv = item.count;
+          }
+          item.percentage = (item.count/maxv*100).toFixed(1);
+          let str = { name: item.name, count: item.count, percentage: item.percentage }
+          that.hotApps.push(str);
+        });
+        //  console.log(that.hotApps);
+      });
+    },
+    handleAppChange(){
+      // console.log(this.selectedAppRange);
+      this.getCountAppInfo();
+    },
+    handleDateChange(){
+      // console.log(this.datetimeValue);
+      this.getCountAppInfo();
+    },
+    //获取应用统计Charts图表
+    getCountAppInfo(){
+      countAppInfo(this.datetimeValue[0],this.datetimeValue[1],this.selectedAppRange).then((res) => {
+        // console.log(res);
+        this.drawLineChart(res);
+      })
+    },
+    drawLineChart(data){
+      let that = this;
+      let times = []
+      let values = []
+      data.forEach((item,index) => {
+        times.push(moment(item.time).format("YYYY-MM-DD"))
+        values.push(item.count)
+      })
+      // 基于准备好的dom，初始化echarts实例
+      let lineChart = echarts.init(this.$refs.lineChartRes);
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: { type: "shadow" },
+          backgroundColor: 'rgba(0, 25, 50, 0.8)',
+          borderColor: '#1E90FF',
+          textStyle: {
+            color: '#fff'
+          },
+          formatter: function (params) {
+            let str = '';
+            params.forEach(item => {
+              str += `${item.name} <br/> ${item.seriesName}: ${item.value}次<br/>`;
+            });
+            return str;
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: times,
+          axisLabel: {
+            color: '#a3b6c7'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#1E90FF'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            color: '#a3b6c7'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#1E90FF'
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(30, 144, 255, 0.2)'
+            }
+          }
+        },
+        series: [
+          {
+            name: "调用次数",
+            type: 'line',
+            data: values,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#1E90FF' },
+                { offset: 1, color: '#00BFFF' }
+              ])
+            }
+          }
+        ]
+      }
+      // 绘制图表
+      lineChart.setOption(option);
+      that.lineChart = lineChart;
+
     },
     handleResize() {
       if (this.statusChart) this.statusChart.resize();
+      if (this.lineChart) this.lineChart.resize();
     },
     destroyCharts() {
       if (this.statusChart) {
         this.statusChart.dispose();
         this.statusChart = null;
       }
+      if (this.lineChart) {
+        this.lineChart.dispose();
+        this.lineChart = null;
+      }
     },
     getLimitedList() {
       return this.typeArrs.slice(0, 4); // 获取前四个元素
@@ -241,9 +425,15 @@ export default {
             createTime: moment(item.create_time).format("YYYY-MM-DD HH:mm:ss"),
           }));
           this.applications = this.itemApplications;
+          this.selectAapplications = this.applications.filter((item) => item.yylx == "0"); //yylx 0:内部 1:外部
+          this.newApplications = this.applications.slice(0, 10); // 获取前十个元素
+          this.selectedAppRange = this.applications[0].title;
           this.getTypeArrs();
+          this.getCountAppInfo();
         } else {
           this.applications = [];
+          this.selectAapplications = [];
+          this.selectedAppRange = '';
         }
       });
     },
@@ -251,8 +441,7 @@ export default {
       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 name = item.value,length = arr.length;
         let str = { name: name, value: length };
         that.typeArrs.push(str);
       });
@@ -265,6 +454,7 @@ export default {
         value: item.value,
         name: item.name, // 随机颜色
       }));
+      seriesData = seriesData.filter((item) => item.value > 0);// 过滤掉值为0的项
       this.statusChart = echarts.init(this.$refs.statusChart);
       const option = {
         tooltip: {
@@ -502,8 +692,9 @@ export default {
 
 /* 应用上新 */
 .new-app {
-  margin-bottom: 15px;
-  padding-bottom: 15px;
+ // margin-bottom: 15px;
+ // padding-bottom: 15px;
+  padding: 6px 0px 6px 0px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 
   &:last-child {