修改统计显示

src/views/dashboard/workbench/component/InterfaceEveryday.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div class="spatial-analysis-statistic">
     <div class="title">
@@ -6,8 +5,12 @@
       <span class="statistic">
         <span class="label">总次数: </span>
         <span class="value">{{ allTimes }}</span>
-        <span :class="(activeBtn === 1 ? 'active' : '') + ' btn'" @click="selectType(1)">按月</span>
-        <span :class="(activeBtn === 2 ? 'active' : '') + ' btn'" @click="selectType(2)">按年</span>
+        <span :class="(activeBtn === 1 ? 'active' : '') + ' btn'" @click="selectType(1)"
+          >按月</span
+        >
+        <span :class="(activeBtn === 2 ? 'active' : '') + ' btn'" @click="selectType(2)"
+          >按年</span
+        >
         <span class="select-div">
           <a-month-picker
             v-if="activeBtn === 1"
@@ -38,13 +41,17 @@
       </span>
     </div>
     <div v-show="!loading" class="echart-container" id="defect-column" ref="domRef"></div>
-    <div v-show="loading" class="echart-container" style="text-align: center;padding-top: 100px;">
-      <a-spin tip="数据查询中..."/>
+    <div
+      v-show="loading"
+      class="echart-container"
+      style="text-align: center; padding-top: 100px"
+    >
+      <a-spin tip="数据查询中..." />
     </div>
   </div>
 </template>
-    
-  <script>
+
+<script>
 import {
   defineComponent,
   reactive,
@@ -55,10 +62,13 @@ import {
   getCurrentInstance,
   shallowRef,
   onUnmounted,
-} from 'vue';
-import moment from 'moment';
-import Moment from 'moment';
-import { queryApiUseCountDays, queryIserverUseCountByType } from '/@/api/interface/interface';
+} from "vue";
+import moment from "moment";
+import Moment from "moment";
+import {
+  queryApiUseCountDays,
+  queryIserverUseCountByType,
+} from "/@/api/interface/interface";
 const props = {
   type: {
     type: Object,
@@ -66,17 +76,17 @@ const props = {
 };
 
 export default defineComponent({
-  name: 'InterfaceEveryday',
+  name: "InterfaceEveryday",
   components: {},
   props,
   setup(props) {
     const data = reactive({
-      title: '空间服务支撑访问统计',
+      title: "空间服务支撑访问统计",
       interval: null,
       allTimes: 0,
       activeBtn: 1,
-      month: moment().format('YYYY-MM'),
-      year: moment().format('YYYY'),
+      month: moment().format("YYYY-MM"),
+      year: moment().format("YYYY"),
       yearShow: false,
       timer: null,
       loading: false,
@@ -85,14 +95,19 @@ export default defineComponent({
     const { proxy } = getCurrentInstance();
     const echarts = proxy.$echarts;
     const mychart = shallowRef(null);
-    watch(()=>data.year,()=>{dataChange()})
+    watch(
+      () => data.year,
+      () => {
+        dataChange();
+      }
+    );
     const disabledDate = (current) => {
       // Can not select days before today and today
-      return current && current > moment().endOf('day');
+      return current && current > moment().endOf("day");
     };
 
     const disabledYear = (current) => {
-      return current && current > moment().endOf('year');
+      return current && current > moment().endOf("year");
     };
 
     const dataChange = () => {
@@ -121,19 +136,19 @@ export default defineComponent({
       if (data.activeBtn === 1) {
         //月类型统计
         params = {
-          startCreateTimeStr: moment(data.month).startOf('months').format('YYYY-MM-DD'), //获取当月的一号
-          endCreateTimeStr: moment(data.month).endOf('months').format('YYYY-MM-DD'), //获取当月的最后一天
+          startCreateTimeStr: moment(data.month).startOf("months").format("YYYY-MM-DD"), //获取当月的一号
+          endCreateTimeStr: moment(data.month).endOf("months").format("YYYY-MM-DD"), //获取当月的最后一天
           tjType: data.activeBtn,
         };
       } else {
         //年类型统计
         params = {
-          startCreateTimeStr: moment(data.year + '-01-01')
-            .startOf('year')
-            .format('YYYY-MM-DD'), //获取年初第一天
-          endCreateTimeStr: moment(data.year + '-01-01')
-            .endOf('year')
-            .format('YYYY-MM-DD'), //获取年末最后一天
+          startCreateTimeStr: moment(data.year + "-01-01")
+            .startOf("year")
+            .format("YYYY-MM-DD"), //获取年初第一天
+          endCreateTimeStr: moment(data.year + "-01-01")
+            .endOf("year")
+            .format("YYYY-MM-DD"), //获取年末最后一天
           tjType: data.activeBtn,
         };
       }
@@ -146,39 +161,54 @@ export default defineComponent({
         if (data.activeBtn === 1) {
           for (
             let t = params.startCreateTimeStr;
-            moment(params.endCreateTimeStr).diff(moment(t), 'days') > 0;
-            t = moment(t).add(1, 'days').format('YYYY-MM-DD')
+            moment(params.endCreateTimeStr).diff(moment(t), "days") > 0;
+            t = moment(t).add(1, "days").format("YYYY-MM-DD")
           ) {
             //如果日期大于当前日期，跳过
-            xAxisData.push(moment(t).format('MM/DD'));
+            xAxisData.push(moment(t).format("MM/DD"));
             if (res.length === 0) seriesData.push(0);
             else {
               const obj = res.find(
-                (item) => item['STATISTICS_START_TIME'] === moment(t).format('YYYYMMDD')
+                (item) => item["STATISTICS_START_TIME"] === moment(t).format("YYYYMMDD")
               );
-              seriesData.push(obj ? parseInt(obj['SUM(COUNT)']) : 0);
+              seriesData.push(obj ? parseInt(obj["SUM(COUNT)"]) : 0);
             }
           }
         } else {
-          for (
-            let t = moment(params.startCreateTimeStr).format('YYYY-MM');
-            moment(params.endCreateTimeStr).diff(moment(t), 'months') > 0;
-            t = moment(t).add(1, 'months').format('YYYY-MM')
-          ) {
-             //如果日期大于当前日期，跳过
-            xAxisData.push(parseInt(moment(t).format('MM')) + '月');
+          // for (
+          //   let t = moment(params.startCreateTimeStr).format('YYYY-MM');
+          //   moment(params.endCreateTimeStr).diff(moment(t), 'months') > 0;
+          //   t = moment(t).add(1, 'months').format('YYYY-MM')
+          // ) {
+          //    //如果日期大于当前日期，跳过
+          //   xAxisData.push(parseInt(moment(t).format('MM')) + '月');
+          //   if (res.length === 0) seriesData.push(0);
+          //   else {
+          //     const obj = res.find(
+          //       (item) => item['STATISTICS_START_TIME'] === moment(t).format('YYYYMM')
+          //     );
+          //     seriesData.push(obj ? parseInt(obj['SUM(COUNT)']) : 0);
+          //   }
+          // }
+          for (let t = 1; t <= 12; t++) {
+            //如果日期大于当前日期，跳过
+            xAxisData.push(t + "月");
             if (res.length === 0) seriesData.push(0);
             else {
               const obj = res.find(
-                (item) => item['STATISTICS_START_TIME'] === moment(t).format('YYYYMM')
+                (item) =>
+                  item["STATISTICS_START_TIME"] ===
+                  moment(
+                    moment(params.startCreateTimeStr).format("YYYY") + "-" + t
+                  ).format("YYYYMM")
               );
-              seriesData.push(obj ? parseInt(obj['SUM(COUNT)']) : 0);
+              seriesData.push(obj ? parseInt(obj["SUM(COUNT)"]) : 0);
             }
           }
         }
         let allTimes = 0;
         res.map((item) => {
-          allTimes += parseInt(item['SUM(COUNT)']);
+          allTimes += parseInt(item["SUM(COUNT)"]);
         });
         data.allTimes = allTimes;
       }
@@ -207,7 +237,7 @@ export default defineComponent({
       //const xAxisData = ['09/01','09/02','09/03','09/04', '09/05','09/06','09/07','09/08','09/09','09/10','09/11','09/12'];
       const colorList = [
         {
-          type: 'linear',
+          type: "linear",
           x: 0,
           y: 0,
           x2: 0,
@@ -215,21 +245,21 @@ export default defineComponent({
           colorStops: [
             {
               offset: 0,
-              color: 'rgba(6,113,221,1)', // 0% 处的颜色
+              color: "rgba(6,113,221,1)", // 0% 处的颜色
             },
             {
               offset: 0.5,
-              color: 'rgba(6,113,221,0.9)', // 0% 处的颜色
+              color: "rgba(6,113,221,0.9)", // 0% 处的颜色
             },
             {
               offset: 1,
-              color: 'rgba(6,113,221,0)', // 100% 处的颜色
+              color: "rgba(6,113,221,0)", // 100% 处的颜色
             },
           ],
           global: false, // 缺省为 false
         },
         {
-          type: 'linear',
+          type: "linear",
           x: 0,
           y: 0,
           x2: 0,
@@ -237,15 +267,15 @@ export default defineComponent({
           colorStops: [
             {
               offset: 0,
-              color: 'rgba(237,172,75,1)', // 0% 处的颜色
+              color: "rgba(237,172,75,1)", // 0% 处的颜色
             },
             {
               offset: 0.5,
-              color: 'rgba(237,172,75,0.9)', // 0% 处的颜色
+              color: "rgba(237,172,75,0.9)", // 0% 处的颜色
             },
             {
               offset: 1,
-              color: 'rgba(237,172,75,0.2)', // 100% 处的颜色   'rgba(6,113,221,0.2)'
+              color: "rgba(237,172,75,0.2)", // 100% 处的颜色   'rgba(6,113,221,0.2)'
             },
           ],
           global: false, // 缺省为 false
@@ -253,23 +283,23 @@ export default defineComponent({
       ];
       return {
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
-            type: 'none', // 'shadow',
+            type: "none", // 'shadow',
           },
           formatter: (params) => {
             if (data.activeBtn === 1) {
-              const names = params[0].name.split('/');
+              const names = params[0].name.split("/");
               const nameLable = `${parseInt(names[0])}月${parseInt(names[1])}`;
-              return nameLable + ': ' + params[0].value + '次';
-            } else return params[0].name + ': ' + params[0].value + '次';
+              return nameLable + ": " + params[0].value + "次";
+            } else return params[0].name + ": " + params[0].value + "次";
           },
         },
         grid: {
-          top: '10%',
-          left: '1%',
-          right: '1%',
-          bottom: '1%',
+          top: "10%",
+          left: "1%",
+          right: "1%",
+          bottom: "1%",
           containLabel: true,
         },
         xAxis: [
@@ -278,12 +308,12 @@ export default defineComponent({
             axisTick: { show: false },
             axisLine: { show: false },
             axisLabel: {
-              color: '#000',
+              color: "#000",
             },
             axisLine: {
               show: true,
               lineStyle: {
-                color: 'rgba(222, 222, 222, 1)',
+                color: "rgba(222, 222, 222, 1)",
               },
             },
           },
@@ -297,9 +327,9 @@ export default defineComponent({
         },
         series: [
           {
-            name: '调用次数',
-            type: 'bar',
-            barWidth: '12',
+            name: "调用次数",
+            type: "bar",
+            barWidth: "12",
             data: seriesData, //[60, 52, 200, 334, 390, 330, 220, 200, 334, 390, 330, 220],
             itemStyle: {
               // 柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
@@ -313,11 +343,11 @@ export default defineComponent({
                 },
               },
             },
-            barGap: '0%',
+            barGap: "0%",
           },
         ],
         animationDuration: 0, //这里两个动画设置可以让图表更顺滑
-        animationEasing: 'cubicInOut', //这里两个动画设置可以让图表更顺滑
+        animationEasing: "cubicInOut", //这里两个动画设置可以让图表更顺滑
       };
     };
     //选择年度-弹出日历回调
@@ -331,7 +361,7 @@ export default defineComponent({
     //选择年度-面板关闭回调
     function panelChange(value) {
       data.yearShow = false;
-      data.year = moment(value).format('YYYY');
+      data.year = moment(value).format("YYYY");
       //清除定时器
       clearTimeout(data.timer);
     }
@@ -341,90 +371,90 @@ export default defineComponent({
      * value{String} 需要对比值
      * */
     function dateYearDisabledRule(type, value) {
-      const typeR = type ? type : 'lteNow';
-      const valueR = value ? moment(value).format('YYYY') : '';
+      const typeR = type ? type : "lteNow";
+      const valueR = value ? moment(value).format("YYYY") : "";
       //获取dom元素
-      const tableDom = document.querySelectorAll('.ant-calendar-year-panel-body');
-      const prevBtn = document.querySelector('.ant-calendar-year-panel-prev-decade-btn');
-      const nextBtn = document.querySelector('.ant-calendar-year-panel-next-decade-btn');
-      const tdDom = tableDom[0].querySelectorAll('td');
+      const tableDom = document.querySelectorAll(".ant-calendar-year-panel-body");
+      const prevBtn = document.querySelector(".ant-calendar-year-panel-prev-decade-btn");
+      const nextBtn = document.querySelector(".ant-calendar-year-panel-next-decade-btn");
+      const tdDom = tableDom[0].querySelectorAll("td");
       // 当前面板的第一个和最后一个年份类似年份翻页按钮因此和年份翻页按钮做相同处理，否则会有错误
       const prevBtnTd = tdDom[0];
       const nextBtnTd = tdDom[tdDom.length - 1];
       //定义所需对比值
-      const nowDate = moment().format('YYYY');
+      const nowDate = moment().format("YYYY");
       if (tableDom.length > 0) {
         switch (typeR) {
           //<=当前年
-          case 'lteNow':
+          case "lteNow":
             (() => {
               tdDom.forEach((item) => {
                 if (item.innerText > nowDate) {
-                  item.setAttribute('class', 'datepicker-year-disabled');
+                  item.setAttribute("class", "datepicker-year-disabled");
                 } else {
-                  item.classList.remove('datepicker-year-disabled');
+                  item.classList.remove("datepicker-year-disabled");
                 }
               });
               // 年份翻页按钮
-              const ev = dateYearDisabledRule.bind(this, 'lteNow');
-              prevBtn.removeEventListener('click', ev);
-              nextBtn.removeEventListener('click', ev);
-              prevBtn.addEventListener('click', ev);
-              nextBtn.addEventListener('click', ev);
+              const ev = dateYearDisabledRule.bind(this, "lteNow");
+              prevBtn.removeEventListener("click", ev);
+              nextBtn.removeEventListener("click", ev);
+              prevBtn.addEventListener("click", ev);
+              nextBtn.addEventListener("click", ev);
 
-              prevBtnTd.removeEventListener('click', ev);
-              nextBtnTd.removeEventListener('click', ev);
-              prevBtnTd.addEventListener('click', ev);
-              nextBtnTd.addEventListener('click', ev);
+              prevBtnTd.removeEventListener("click", ev);
+              nextBtnTd.removeEventListener("click", ev);
+              prevBtnTd.addEventListener("click", ev);
+              nextBtnTd.addEventListener("click", ev);
             })();
             break;
 
           //<=当前年、<=结束日期
-          case 'rangeNowStart':
+          case "rangeNowStart":
             (() => {
               tdDom.forEach((item) => {
                 if (item.innerText > nowDate || (valueR && item.innerText > valueR)) {
-                  item.setAttribute('class', 'datepicker-year-disabled');
+                  item.setAttribute("class", "datepicker-year-disabled");
                 } else {
-                  item.classList.remove('datepicker-year-disabled');
+                  item.classList.remove("datepicker-year-disabled");
                 }
               });
 
               // 年份翻页按钮
-              const ev = dateYearDisabledRule.bind(this, 'rangeNowStart', value);
-              prevBtn.removeEventListener('click', ev);
-              nextBtn.removeEventListener('click', ev);
-              prevBtn.addEventListener('click', ev);
-              nextBtn.addEventListener('click', ev);
+              const ev = dateYearDisabledRule.bind(this, "rangeNowStart", value);
+              prevBtn.removeEventListener("click", ev);
+              nextBtn.removeEventListener("click", ev);
+              prevBtn.addEventListener("click", ev);
+              nextBtn.addEventListener("click", ev);
 
-              prevBtnTd.removeEventListener('click', ev);
-              nextBtnTd.removeEventListener('click', ev);
-              prevBtnTd.addEventListener('click', ev);
-              nextBtnTd.addEventListener('click', ev);
+              prevBtnTd.removeEventListener("click", ev);
+              nextBtnTd.removeEventListener("click", ev);
+              prevBtnTd.addEventListener("click", ev);
+              nextBtnTd.addEventListener("click", ev);
             })();
             break;
 
           //<=当前年、>=开始日期
-          case 'rangeNowEnd':
+          case "rangeNowEnd":
             (() => {
               tdDom.forEach((item) => {
                 if (item.innerText > nowDate || (valueR && item.innerText < valueR)) {
-                  item.setAttribute('class', 'datepicker-year-disabled');
+                  item.setAttribute("class", "datepicker-year-disabled");
                 } else {
-                  item.classList.remove('datepicker-year-disabled');
+                  item.classList.remove("datepicker-year-disabled");
                 }
               });
               // 年份翻页按钮
-              const ev = dateYearDisabledRule.bind(this, 'rangeNowEnd', value);
-              prevBtn.removeEventListener('click', ev);
-              nextBtn.removeEventListener('click', ev);
-              prevBtn.addEventListener('click', ev);
-              nextBtn.addEventListener('click', ev);
+              const ev = dateYearDisabledRule.bind(this, "rangeNowEnd", value);
+              prevBtn.removeEventListener("click", ev);
+              nextBtn.removeEventListener("click", ev);
+              prevBtn.addEventListener("click", ev);
+              nextBtn.addEventListener("click", ev);
 
-              prevBtnTd.removeEventListener('click', ev);
-              nextBtnTd.removeEventListener('click', ev);
-              prevBtnTd.addEventListener('click', ev);
-              nextBtnTd.addEventListener('click', ev);
+              prevBtnTd.removeEventListener("click", ev);
+              nextBtnTd.removeEventListener("click", ev);
+              prevBtnTd.addEventListener("click", ev);
+              nextBtnTd.addEventListener("click", ev);
             })();
             break;
         }
@@ -461,7 +491,7 @@ export default defineComponent({
   },
 });
 </script>
-    <style lang="less" scoped>
+<style lang="less" scoped>
 .spatial-analysis-statistic {
   height: 100%;
   width: 100%;
@@ -514,4 +544,4 @@ export default defineComponent({
     width: 100%;
   }
 }
-</style>
+</style>

src/views/dashboard/workbench/component/TopCardStatistic.vue

@@ -76,7 +76,6 @@ export default defineComponent({
       let sysRes = await list({});
       let supportNumRes = await GetIServerRequestCount();
       if (supportNumRes && supportNumRes.resp_code === 0) {
-        console.log('本日资源访问次数',supportNumRes)
         for(let item in supportNumRes.datas){
           supportNumRes.datas[item].map(op=>{
             supportNum += op['SUM(COUNT)']