新增统计图

package-lock.json

@@ -4952,6 +4952,22 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.1.2",
+      "resolved": "https://registry.nlark.com/echarts/download/echarts-5.1.2.tgz?cache=0&sync_timestamp=1623167246710&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fecharts%2Fdownload%2Fecharts-5.1.2.tgz",
+      "integrity": "sha1-qhqwzvW3T6L3xiAmGl8oaJPTD9E=",
+      "requires": {
+        "tslib": "2.0.3",
+        "zrender": "5.1.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.nlark.com/tslib/download/tslib-2.0.3.tgz",
+          "integrity": "sha1-jgdBrEX8DCJuWKF7/D5kubxsphw="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -12877,6 +12893,21 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.1.1",
+      "resolved": "https://registry.nlark.com/zrender/download/zrender-5.1.1.tgz",
+      "integrity": "sha1-BRX0+MwPR0LwKmuIGVUKbRPWTFw=",
+      "requires": {
+        "tslib": "2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.nlark.com/tslib/download/tslib-2.0.3.tgz",
+          "integrity": "sha1-jgdBrEX8DCJuWKF7/D5kubxsphw="
+        }
+      }
     }
   }
 }

package.json

@@ -14,6 +14,7 @@
     "ant-design-vue": "^1.7.5",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "echarts": "^5.1.2",
     "js-cookie": "^2.2.1",
     "less": "^4.1.1",
     "less-loader": "^6.0.0",

src/api/index.js

@@ -30,6 +30,10 @@ const subList = [
   {
     name: "API_LIST_ANSWER_MANAGEMENT",
     url: "VUE_APP_BASE_API"
+  },
+  {
+    name: "API_LIST_COUNT",
+    url: "VUE_APP_BASE_API"
   }
 ];
 

src/api/modules/count.js

@@ -0,0 +1,21 @@
+/* JTXT系统相关api */
+export default {
+  API_LIST_COUNT: {
+    // 获取文章总数
+    INTERFACE_GET_COUNT_ARTICLE: 'admin/materials/count',
+    // 获取本月新增文章数量
+    INTERFACE_GET_COUNT_ARTICLE_UP: 'admin/materials/month/count',
+    // 获取文章类型比例
+    INTERFACE_GET_COUNT_ARTICLE_PROPORTION: 'admin/material/ratio',
+    // 获取试题总数
+    INTERFACE_GET_COUNT_QUESTIONS: 'admin/questions/count',
+    // 获取本月新增试题数量
+    INTERFACE_GET_COUNT_QUESTIONS_UP: 'admin/questions/month/count',
+    // 获取试题类型比例
+    INTERFACE_GET_COUNT_QUESTIONS_PROPORTION: 'admin/questions/ratio',
+    // 获取考试总数
+    INTERFACE_GET_COUNT_EXAMS: 'admin/exams/count',
+    // 获取本月新增考试数量
+    INTERFACE_GET_COUNT_EXAMS_UP: 'admin/exams/month/count',
+  }
+};

src/components/echarts/EchartsBar.vue

@@ -0,0 +1,98 @@
+<template>
+  <div ref="myChartBar" :style="{ width: width, height: height }"></div>
+</template>
+
+<script>
+// 引入基本模板
+let echarts = require('echarts/lib/echarts');
+// 引入柱状图组件
+require('echarts/lib/chart/bar');
+// 引入提示框和title组件
+require('echarts/lib/component/tooltip');
+require('echarts/lib/component/title');
+export default {
+  props: {
+    // 数据
+    barData: {
+      type: Object,
+      default() {
+        return {
+          title: '统计图标题', // 标题
+          xAxis: {
+            data: [],
+          }, // x轴数据
+          yAxis: {
+            min: null,
+            max: null,
+          }, // y轴数据
+          series: {
+            name: '',
+            data: [],
+          }, // 移入提示数据
+        };
+      },
+    },
+    // 宽度
+    width: {
+      type: String,
+      default: '100%',
+    },
+    // 高度
+    height: {
+      type: String,
+      default: '400px',
+    },
+  },
+  components: {},
+  data() {
+    return {};
+  },
+  created() {
+    this.initDataFun(); // 初始化数据
+  },
+  mounted() {
+    this.drawLine();
+  },
+  beforeDestroy() {},
+  watch: {},
+  computed: {},
+  methods: {
+    // 初始化数据
+    initDataFun() {},
+    drawLine() {
+      var dataShadow = [];
+      let yMax = 500;
+      for (var i = 0; i < this.barData.series.data.length; i++) {
+        dataShadow.push(yMax);
+      }
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(this.$refs.myChartBar);
+      // 绘制图表
+      myChart.setOption({
+        // title: { text: this.barData.title },
+        tooltip: {},
+        xAxis: {
+          type: 'category',
+          data: this.barData.xAxis.data,
+        },
+        yAxis: {
+          type: 'value',
+          min: this.barData.yAxis.min,
+          max: this.barData.yAxis.max,
+        },
+        series: [
+          {
+            name: this.barData.series.name,
+            type: 'bar',
+            data: this.barData.series.data,
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less"></style>
+
+<style lang="less" scoped></style>

src/filters/index.js

@@ -68,6 +68,39 @@ export function formatMoneyWithSymbol(money) {
   return '￥' + (num / 100).toFixed(2);
 }
 
+/**
+ * 格式化数字,千位分隔符
+ * s：数字
+ * n：格式小位数【默认2位小数】
+ */
+ export function formatNumberToDollar(s, n) {
+  if (!s) {
+    return ''
+  }
+  if (n) {
+    n = n > 0 && n <= 20 ? n : 2
+  } else {
+    n = 0
+  }
+  // eslint-disable-next-line no-useless-escape
+  s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + ''
+  let l = s
+    .split('.')[0]
+    .split('')
+    .reverse()
+  let r = s.split('.')[1]
+  let t = ''
+  for (let i = 0; i < l.length; i++) {
+    t += l[i] + ((i + 1) % 3 === 0 && i + 1 !== l.length ? ',' : '')
+  }
+  return (
+    t
+      .split('')
+      .reverse()
+      .join('') + (r ? '.' + r : '')
+  )
+}
+
 // 格式化日期+时间
 export function formatDateTime(date) {
   let temp = date;

src/main.js

@@ -4,6 +4,10 @@ import App from './App.vue'
 import router from './router'
 // Vue.use(router);
 
+// 使用echarts
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
 // Vuex
 import store from './store'
 

src/router/menu.js

@@ -72,7 +72,7 @@ export default [
     ],
   },
   {
-    meta: { title: '答题管理', icon: 'ali-icon-bianji' },
+    meta: { title: '答题管理', icon: 'ali-icon-datiqia' },
     path: '/answerManagement',
     children: [
       {

src/styles/index.js

@@ -12,7 +12,7 @@ import 'ant-design-vue/dist/antd.css';
 import { Icon } from 'ant-design-vue';
 import Vue from 'vue'
 const IconFont = Icon.createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_2605334_kihiv5w4az.js',
+  scriptUrl: '//at.alicdn.com/t/font_2605334_0otioltd6vl.js',
 });
 
 Vue.use(less);

src/views/Home.vue

@@ -1,21 +1,49 @@
 <template>
   <div class="app-container">
-    <div>
-      <span>欢迎 【{{ userInfo.userName || 'undefind' }}】 进入管理系统</span>
-
-      <!-- 阿里巴巴云的新增图标使用 -->
-      <icon-font class="iconFont" type="icon-lunwentimu" />
-    </div>
+    <a-spin :spinning="loading">
+      <!-- 基础数据展示 -->
+      <div class="count-basic-data">
+        <div
+          class="count-basic-data-item"
+          v-for="(item, index) in basicList"
+          :key="index"
+        >
+          <div class="count-basic-data-item-main">
+            <div class="count-basic-data-item-title">{{ item.title }}</div>
+            <div class="count-basic-data-item-count">
+              {{ item.count | formatNumberToDollar }}
+            </div>
+          </div>
+          <div class="count-basic-data-item-up">
+            <div class="count-basic-data-item-title">{{ item.upTitle }}</div>
+            <div class="count-basic-data-item-up-count">
+              {{ item.monthUp | formatNumberToDollar }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 柱状图 -->
+      <div class="common-card a-card-margin-top">
+        <EchartsBar :barData="barData" width="100%" height="400px" />
+      </div>
+    </a-spin>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
+import EchartsBar from '@/components/echarts/EchartsBar';
 export default {
   props: {},
-  components: {},
+  components: {
+    EchartsBar,
+  },
   data() {
-    return {};
+    return {
+      loading: false, // 是否显示加载动画
+      basicList: [], // 基础数据列表
+      barData: [], // 统计图数据
+    };
   },
   created() {
     this.initDataFun(); // 初始化数据
@@ -28,17 +56,89 @@ export default {
   },
   methods: {
     // 初始化数据
-    initDataFun() {},
+    initDataFun() {
+      this.basicList = [
+        {
+          title: '文章总数',
+          count: 126560,
+          upTitle: '本月新增',
+          monthUp: 160,
+        },
+        {
+          title: '题目总数',
+          count: 126560,
+          upTitle: '本月新增',
+          monthUp: 160,
+        },
+        {
+          title: '考试总数',
+          count: 126560,
+          upTitle: '本月新增',
+          monthUp: 160,
+        },
+      ];
+      this.barData = {
+        xAxis: {
+          data: ['期中考试', '期末考试', '7月', '8月', '9月', '10月'],
+        }, // x轴数据
+        series: {
+          name: ['期中考试', '期末考试', '7月', '8月', '9月', '10月'],
+          data: [1, 2, 3, 4, 5, 6],
+        }, // 移入提示数据
+      };
+    },
   },
 };
 </script>
 
 <style lang="less" scoped>
+@import '~@/styles/common/variable.less';
 .app-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: aliceblue;
-  font-size: 60px;
+  overflow: auto;
+  .count-basic-data {
+    display: flex;
+    .count-basic-data-item {
+      width: 264px;
+      height: 188px;
+      margin-right: @paddingMarginVal;
+      padding: @paddingMarginVal;
+      background-color: @mainColorWhite;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .count-basic-data-item-title {
+        font-size: 14px;
+        color: @mainColorBlack45;
+        flex-wrap: nowrap;
+        white-space: nowrap;
+      }
+      .count-basic-data-item-main {
+        width: 100%;
+        .count-basic-data-item-title {
+          width: 100%;
+        }
+        .count-basic-data-item-count {
+          width: 100%;
+          font-size: 30px;
+          color: @mainColorBlack85;
+          word-break: break-all;
+          word-wrap: break-word;
+        }
+      }
+      .count-basic-data-item-up {
+        padding-top: 10px;
+        border-top: 1px solid @mainColorBorder;
+        display: flex;
+        align-items: center;
+        .count-basic-data-item-title {
+          margin-right: @paddingMarginVal;
+        }
+        .count-basic-data-item-up-count {
+          font-size: 20px;
+          color: @mainColorBlack85;
+        }
+      }
+    }
+  }
 }
 </style>

src/views/examManagement/examManagementList.vue

@@ -96,7 +96,7 @@
             <a
               :class="{
                 'exam-delete': true,
-                'exam-delete-disable': record.examStatus !== '未开始',
+                'exam-delete-disable': record.disabled,
               }"
               @click="deleteQuestionFun(record)"
               >删除</a