提交一下

1

src/views/main/baseinfo/index.vue

@@ -43,13 +43,13 @@
     <!-- 这里显示选项卡 -->
     <empty desc="暂无统计数据" v-if="isEmpty" />
     <el-row v-else class="rows" :gutter="20">
-      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
         <studentbaseinfo :data="dataInfo" />
       </el-col>
-      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
         <operate :data="dataInfo" />
       </el-col>
-      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
         <hrdata :data="dataInfo" />
       </el-col>
       <!-- <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">

src/views/main/baseinfo/operate.vue

@@ -1,27 +1,56 @@
 <template>
-  <el-card >
-          <div slot="header" class="clearfix">
-        <div class="box">
-          <span class='shape'></span>
-          <span>运营数据</span>
-        </div>
-
+  <el-card>
+    <div slot="header" class="clearfix">
+      <div class="box">
+        <span class="shape"></span>
+        <span>运营数据</span>
       </div>
-             <div class="wall" style="height:68px;" v-if="JSON.stringify(items) == '{}'">
-         暂无数据
-       </div>
+    </div>
+    <div class="wall" style="height: 68px" v-if="JSON.stringify(items) == '{}'">
+      暂无数据
+    </div>
     <statistic class="statistic" :cols="0">
-      <statistic-item v-for="(item, key) in items" :key="key" :class="{active: active === key}" @click="active = key">
+      <statistic-item
+        v-for="(item, key) in items"
+        :key="key"
+        :class="{ active: active === key }"
+        @click="active = key"
+      >
         <span>
-          {{item.title+"(个)"}}
-          <el-tooltip v-if="item.desc" :content="item.desc" :open-delay=".3" placement="top">
-            <i style="margin-left: 5px;cursor: pointer;" class="el-icon-warning-outline"/>
+          {{ item.title + "(个)" }}
+          <el-tooltip
+            v-if="item.desc"
+            :content="item.desc"
+            :open-delay="0.3"
+            placement="top"
+          >
+            <i
+              style="margin-left: 5px; cursor: pointer"
+              class="el-icon-warning-outline"
+            />
           </el-tooltip>
         </span>
         <span>
-          <count-to :endVal="item.percent"/>
+          <count-to :endVal="item.percent" />
         </span>
       </statistic-item>
+      <statistic-item v-if="data['TRANSACTION_TEACHER_NUM']">
+        <span>
+          {{ data["TRANSACTION_TEACHER_NUM"].title + "(人)" }}
+          <el-tooltip
+            v-if="data['TRANSACTION_TEACHER_NUM'].desc"
+            :content="data['TRANSACTION_TEACHER_NUM'].desc"
+            :open-delay="0.3"
+            placement="top"
+          >
+            <i
+              style="margin-left: 5px; cursor: pointer"
+              class="el-icon-warning-outline"
+            />
+          </el-tooltip>
+        </span>
+        <span> <count-to :endVal="data['TRANSACTION_TEACHER_NUM'].percent" /></span>
+      </statistic-item>
     </statistic>
     <!-- <ve-histogram
       style="width: 100%;"
@@ -34,90 +63,93 @@
   </el-card>
 </template>
 <script>
-import 'echarts/lib/component/dataZoom'
-import countTo from 'vue-count-to'
-import veHistogram from 'v-charts/lib/histogram.common'
+import "echarts/lib/component/dataZoom";
+import countTo from "vue-count-to";
+import veHistogram from "v-charts/lib/histogram.common";
 export default {
-  props: ['data'],
+  props: ["data"],
   components: {
-    've-histogram': veHistogram,
-    'count-to': countTo
+    "ve-histogram": veHistogram,
+    "count-to": countTo,
   },
   computed: {
     items() {
-      let obj = {}
-      let arr = ["SCHOOL","PROGRESS_MUSIC_GROUP_NUM"]
-      arr.forEach(str=>{
-        if(this.data[str]){
-          obj[str]=this.data[str]
+      let obj = {};
+      let arr = [
+        "SCHOOL",
+        "PROGRESS_MUSIC_GROUP_NUM",
+      ];
+      arr.forEach((str) => {
+        if (this.data[str]) {
+          obj[str] = this.data[str];
         }
-      })
+      });
       /**
        * {
         SCHOOL: this.data['SCHOOL'] || {},
         PROGRESS_MUSIC_GROUP_NUM: this.data['PROGRESS_MUSIC_GROUP_NUM'] || {},
       }
        */
-      return obj
+      return obj;
     },
     chartExtend() {
       return {
         tooltip: {
           axisPointer: {
-            type: 'shadow',
+            type: "shadow",
             shadowStyle: {
-              color: 'rgba(150,150,150,0.2)'
-            }
-          }
-        }
-      }
+              color: "rgba(150,150,150,0.2)",
+            },
+          },
+        },
+      };
     },
     dataZoom() {
       return [
         {
-          type: 'slider',
+          type: "slider",
           start: 60,
-          end: 100
-        }
-      ]
+          end: 100,
+        },
+      ];
     },
     chartData() {
-      const values = Object.values(this.items)
-      const months = {}
+      const values = Object.values(this.items);
+      const months = {};
       for (const item of values) {
-        for (const row of (item.indexMonthData || [])) {
-          const key = this.$helpers.dayjs(row.month).format('YYYY-MM-DD')
+        for (const row of item.indexMonthData || []) {
+          const key = this.$helpers.dayjs(row.month).format("YYYY-MM-DD");
           if (!months[key]) {
             months[key] = {
-              '日期': key,
-            }
+              日期: key,
+            };
           }
-          months[key][item.title] = row.percent
+          months[key][item.title] = row.percent;
         }
       }
       return {
-        columns: ['日期', ...values.map(item => item.title)],
-        rows: Object.values(months)
-      }
+        columns: ["日期", ...values.map((item) => item.title)],
+        rows: Object.values(months),
+      };
     },
     dataEmpty() {
-      return !this.chartData.rows.length
+      return !this.chartData.rows.length;
     },
   },
-  data () {
+  data() {
     return {
-      active: 'SCHOOL',
-    }
+      active: "SCHOOL",
+    };
   },
-}
+};
 </script>
 <style lang="less" scoped>
-  // .statistic{
-  //   /deep/ .statistic-content{
-  //     cursor: pointer;
-  //     &.active > span{
-  //       color: #14928a !important;
-  //     }
-  //   }
-  // }
+// .statistic{
+//   /deep/ .statistic-content{
+//     cursor: pointer;
+//     &.active > span{
+//       color: #14928a !important;
+//     }
+//   }
+// }
 </style>