03/01 首页数据改造

1

src/views/main/api.js

@@ -4,7 +4,7 @@ import request2 from '@/utils/request2'
 export const getIndex = data => request2({
   url: '/api-web/newIndex',
   params: data,
-  loading:false,
+  loading: false,
   method: 'get',
 })
 export const getInspectionItem = data => request2({

src/views/main/baseinfo/business.vue

@@ -1,7 +1,9 @@
-<template>
+<template
+>
   <el-card header="">
       <div slot="header" class="clearfix">
     <searchHeader
+    v-if="mdate.length>0"
         :dates="mdate"
         :title="'业务数据'"
         :isShowQuert='false'
@@ -42,6 +44,10 @@ import searchHeader from "./modals/searchHeader";
 import { getTimes } from "@/utils";
 import { getIndex } from "../api";
 import { descs,chioseNum } from "../constant";
+import {
+  getNowDateAndSunday,
+  getNowDateAndMonday,
+} from "@/utils/date";
 export default {
   props: ['data',"search"],
   components: {
@@ -91,20 +97,25 @@ export default {
     },
     chartData() {
       const values = Object.values(this.items)
+      console.log(values)
       const months = {}
       for (const item of values) {
         for (const row of (item.indexMonthData || [])) {
           const key = this.$helpers.dayjs(row.month).format('YYYY-MM-DD')
           if (!months[key]) {
             months[key] = {
-              '日期': key,
+              '日期': key+'/'+getNowDateAndSunday(key),
             }
           }
           months[key][item.title] = row.percent
         }
       }
+      console.log( Object.values(months))
+
       return {
-        columns: ['日期', ...values.map(item => item.title)],
+        columns: ['日期', ...values.map(item => {
+          return item.title
+        })],
         rows: Object.values(months)
       }
     },
@@ -115,11 +126,17 @@ export default {
   data () {
     return {
       active: 'ACTIVATION_RATE',
-       mdate: this.search?.dates,
+       mdate: [],
+       loading:false
     }
   },
   mounted(){
-    console.log(this.mdate)
+    let nowTiem = this.$helpers.dayjs(new Date()).format('YYYY-MM-DD')
+    let startTime =  this.$helpers.dayjs(getNowDateAndMonday(nowTiem)).subtract(56,'day').format('YYYY-MM-DD')
+    let endTime = getNowDateAndSunday(nowTiem)
+    this.mdate = [startTime,endTime];
+    this.FetchDetail();
+
   },
   methods:{
    changeValue(date) {
@@ -129,6 +146,7 @@ export default {
       this.FetchDetail();
     },
     async FetchDetail() {
+      this.loading = true;
       const data = this.data;
       try {
         const { dates, ...rest } = this.search;
@@ -148,10 +166,11 @@ export default {
             }
           }
         }
+
       } catch (error) {
         console.log(error);
       }
-      console.log(data)
+      this.loading = false
       this.dataInfo = data;
       this.$emit("resetDate", data);
     },

src/views/main/baseinfo/curriculum.vue

@@ -1,4 +1,6 @@
-<template>
+<template v-loading="loading"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)">
   <el-card>
     <div slot="header" class="clearfix">
       <searchHeader
@@ -150,6 +152,7 @@ export default {
       active: "MUSIC_GROUP_COURSE",
       timer: "day",
         mdate: this.search?.dates,
+        loading:false
     };
   },
   methods:{
@@ -160,6 +163,7 @@ export default {
       this.FetchDetail();
     },
     async FetchDetail() {
+      this.loading = true
       const data = this.data;
       try {
         const { dates, ...rest } = this.search;
@@ -183,6 +187,7 @@ export default {
         console.log(error);
       }
       console.log(data)
+      this.loading = false
       this.dataInfo = data;
       this.$emit("resetDate", data);
     },

src/views/main/baseinfo/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="container">
+  <div
+    class="container"
+  >
     <save-form
       inline
       :model="search"
@@ -59,16 +61,16 @@
         <useCourse :data="dataInfo" />
       </el-col>
       <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
-        <management :data="dataInfo" :search="search" @resetDate='resetDate'/>
+        <management :data="dataInfo" :search="search" @resetDate="resetDate" />
       </el-col>
       <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
-        <business :data="dataInfo"  :search="search" @resetDate='resetDate'/>
+        <business :data="dataInfo" :search="search" @resetDate="resetDate" />
       </el-col>
-         <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-        <student :data="dataInfo"  :search="search" @resetDate='resetDate'/>
+      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+        <student :data="dataInfo" :search="search" @resetDate="resetDate" />
       </el-col>
       <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
-        <curriculum :data="dataInfo" :search="search" @resetDate='resetDate' />
+        <curriculum :data="dataInfo" :search="search" @resetDate="resetDate" />
       </el-col>
 
       <!-- <el-col :xs="24" :sm="24" :md="12">
@@ -152,6 +154,7 @@ export default {
       },
       dataInfo: {},
       business: {},
+      loading: false,
     };
   },
   computed: {
@@ -168,7 +171,10 @@ export default {
   },
   methods: {
     getInitDate() {
-      const end = this.$helpers.dayjs(new Date()).subtract(1,'day').format("YYYY-MM-DD");
+      const end = this.$helpers
+        .dayjs(new Date())
+        .subtract(1, "day")
+        .format("YYYY-MM-DD");
       const start = this.$helpers
         .dayjs(new Date())
         .set("date", 1)
@@ -200,9 +206,9 @@ export default {
       }
       this.dataInfo = data;
     },
-    resetDate(data){
-      this.dataInfo = data
-    }
+    resetDate(data) {
+      this.dataInfo = data;
+    },
   },
 };
 </script>

src/views/main/baseinfo/management.vue

@@ -1,5 +1,5 @@
-<template>
-  <el-card style="">
+<template >
+  <el-card >
     <div slot="header" class="clearfix">
       <searchHeader
         :dates="mdate"
@@ -45,7 +45,7 @@
       </div>
       <!--   v-if="timer == 'day'" -->
       <ve-line
-
+        v-if="!loading"
         :settings="{
           area: true,
         }"
@@ -141,6 +141,7 @@ export default {
       return {
         columns: ["日期", ...values.map((item) => item.title)],
         rows: Object.values(months),
+           loading: true
       };
     },
     chartDataForMoth(){
@@ -172,6 +173,7 @@ export default {
       return {
         columns: ["月份", ...values.map((item) => item.title)],
         rows: Object.values(months),
+         loading: true
       };
     },
 
@@ -184,6 +186,7 @@ export default {
       active: "SHOULD_INCOME_MONEY",
       timer: "day",
       mdate: this.search?.dates,
+      loading:false
     };
   },
   methods: {
@@ -194,6 +197,7 @@ export default {
       this.FetchDetail();
     },
     async FetchDetail() {
+      this.loading = true
       const data = this.data;
       try {
         const { dates, ...rest } = this.search;
@@ -218,6 +222,7 @@ export default {
       }
       console.log(data)
       this.dataInfo = data;
+      this.loading = false
       this.$emit("resetDate", data);
     },
 

src/views/main/baseinfo/modals/searchHeader.vue

@@ -11,6 +11,7 @@
         <el-radio-button label="lastYear">去年</el-radio-button>
       </el-radio-group>
       <el-date-picker
+      v-if="isShowQuert"
         v-model="date"
         type="daterange"
         style="width: 300px;padding: 0 10px"
@@ -21,12 +22,40 @@
           format="yyyy-MM-dd"
         size="mini"
         @change="changeValue"
+        :picker-options="{
+        firstDayOfWeek: 1
+    }"
       >
       </el-date-picker>
+            <el-date-picker
+      v-else
+        v-model="date"
+        type="daterange"
+        style="width: 300px;padding: 0 10px"
+        range-separator="-"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          format="yyyy-MM-dd"
+        size="mini"
+      @change="changeWeek"
+        :picker-options="{
+        firstDayOfWeek: 1
+    }"
+      >
+      </el-date-picker>
+
+
     </div>
   </div>
 </template>
 <script>
+import {
+
+  getNowDateAndSunday,
+  getNowDateAndMonday,
+
+} from "@/utils/date";
 export default {
   props:['title','dates','isShowQuert'],
   data() {
@@ -36,6 +65,11 @@ export default {
     };
   },
   methods: {
+    changeWeek(val){
+      this.date = [getNowDateAndMonday(val[0]),getNowDateAndSunday(val[1])]
+      console.log( this.date)
+       this.submitDate( this.date)
+    },
     changeValue(val) {
        this.timer = ''
        this.date = val;

src/views/main/baseinfo/student.vue

@@ -1,4 +1,7 @@
-<template>
+<template
+v-loading="loading"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)">
   <el-card>
     <div slot="header" class="clearfix">
       <searchHeader
@@ -33,7 +36,7 @@
       </statistic-item>
     </statistic>
     <div class="wrap">
-          <div class="chioseBox">
+      <div class="chioseBox">
         <el-radio-group v-model="timer" size="mini">
           <el-radio-button label="day">按天</el-radio-button>
           <el-radio-button label="month">按月</el-radio-button>
@@ -42,7 +45,7 @@
       <ve-histogram
         style="width: 100%"
         height="350px"
-        :data="timer == 'day'?chartData:chartDataForMoth"
+        :data="timer == 'day' ? chartData : chartDataForMoth"
         :data-empty="dataEmpty"
         :data-zoom="dataZoom"
         :extend="chartExtend"
@@ -127,10 +130,9 @@ export default {
         rows: Object.values(months),
       };
     },
-     chartDataForMoth(){
-
+    chartDataForMoth() {
       const values = Object.values(this.items);
-      console.log(values)
+      console.log(values);
       const months = {};
       for (const item of values) {
         for (const row of item.indexMonthData || []) {
@@ -138,18 +140,16 @@ export default {
 
           if (!months[key]) {
             months[key] = {
-              '月份': key,
+              月份: key,
             };
+            months[key][item.title] = row.percent;
+          } else {
+            if (months[key][item.title]) {
+              months[key][item.title] += parseFloat(row.percent);
+            } else {
               months[key][item.title] = row.percent;
-          }else{
-            if( months[key][item.title]){
-               months[key][item.title] +=parseFloat(row.percent);
-            }else{
-               months[key][item.title]=row.percent
             }
-
           }
-
         }
       }
 
@@ -178,6 +178,7 @@ export default {
       isHistogram: true,
       timer: "day",
       mdate: this.search?.dates,
+      loading: false,
     };
   },
   methods: {
@@ -188,6 +189,7 @@ export default {
       this.FetchDetail();
     },
     async FetchDetail() {
+      this.loading = true;
       const data = this.data;
       try {
         const { dates, ...rest } = this.search;
@@ -211,6 +213,7 @@ export default {
         console.log(error);
       }
       console.log(data);
+      this.loading = false;
       this.dataInfo = data;
       this.$emit("resetDate", data);
     },