[修改]图标替换为Echarts

jero-web/package.json

@@ -10,40 +10,41 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@jeecg/antd-online-mini": "2.4.22-beta",
-    "ant-design-vue": "^1.7.2",
     "@antv/data-set": "^0.11.4",
-    "viser-vue": "^2.4.8",
+    "@jeecg/antd-online-mini": "2.4.22-beta",
+    "@tinymce/tinymce-vue": "^2.1.0",
+    "@toast-ui/editor": "^2.1.2",
+    "ant-design-vue": "^1.7.2",
+    "area-data": "^5.0.6",
     "axios": "^0.18.0",
+    "clipboard": "^2.0.4",
+    "codemirror": "^5.46.0",
     "dayjs": "^1.8.0",
+    "dom-align": "1.12.0",
+    "echarts": "^5.0.2",
     "enquire.js": "^2.1.6",
     "js-cookie": "^2.2.0",
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",
     "md5": "^2.2.1",
     "nprogress": "^0.2.0",
+    "tinymce": "^5.3.2",
+    "viser-vue": "^2.4.8",
     "vue": "^2.6.10",
+    "vue-area-linkage": "^5.1.0",
     "vue-cropper": "^0.5.4",
     "vue-i18n": "^8.7.0",
     "vue-loader": "^15.7.0",
     "vue-ls": "^3.2.0",
-    "vue-router": "^3.0.1",
-    "vuex": "^3.1.0",
-    "vue-print-nb-jeecg": "^1.0.9",
-    "clipboard": "^2.0.4",
     "vue-photo-preview": "^1.1.3",
+    "vue-print-nb-jeecg": "^1.0.9",
+    "vue-router": "^3.0.1",
     "vue-splitpane": "^1.0.4",
     "vuedraggable": "^2.20.0",
-    "codemirror": "^5.46.0",
+    "vuex": "^3.1.0",
-    "@tinymce/tinymce-vue": "^2.1.0",
-    "tinymce": "^5.3.2",
-    "@toast-ui/editor": "^2.1.2",
-    "vue-area-linkage": "^5.1.0",
-    "area-data": "^5.0.6",
-    "dom-align": "1.12.0",
-    "xe-utils": "2.4.8",
     "vxe-table": "2.9.13",
-    "vxe-table-plugin-antd": "1.8.10"
+    "vxe-table-plugin-antd": "1.8.10",
+    "xe-utils": "2.4.8"
   },
   "devDependencies": {
     "@babel/polyfill": "^7.2.5",
@@ -52,13 +53,13 @@
     "@vue/cli-service": "^3.3.0",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "7.2.3",
+    "compression-webpack-plugin": "^3.1.0",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.1.0",
+    "html-webpack-plugin": "^4.2.0",
     "less": "^3.9.0",
     "less-loader": "^4.1.0",
-    "vue-template-compiler": "^2.6.10",
+    "vue-template-compiler": "^2.6.10"
-    "html-webpack-plugin": "^4.2.0",
-    "compression-webpack-plugin": "^3.1.0"
   },
   "eslintConfig": {
     "root": true,

jero-web/src/main.js

@@ -6,7 +6,9 @@ import App from './App.vue'
 import Storage from 'vue-ls'
 import router from './router'
 import store from './store/'
-import { VueAxios } from "@/utils/request"
+import {
+  VueAxios
+} from "@/utils/request"
 
 // require('@jeecg/antd-online-mini')
 // require('@jeecg/antd-online-mini/dist/OnlineForm.css')
@@ -15,11 +17,13 @@ require('@/components/onlineForm/onlineForm')
 require('@/components/onlineForm/OnlineForm.css')
 
 
-import Antd, { version } from 'ant-design-vue'
+import Antd, {
+  version
+} from 'ant-design-vue'
 console.log('ant-design-vue version:', version)
 
 import Viser from 'viser-vue'
-import 'ant-design-vue/dist/antd.less';  // or 'ant-design-vue/dist/antd.less'
+import 'ant-design-vue/dist/antd.less'; // or 'ant-design-vue/dist/antd.less'
 
 import '@/permission' // permission control
 import '@/utils/filter' // base filtermybatis-plus
@@ -68,11 +72,12 @@ Vue.use(VueAreaLinkage);
 SSO.init(() => {
   main()
 })
+
 function main() {
   new Vue({
     router,
     store,
-    mounted () {
+    mounted() {
       store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
       store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
       store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))
@@ -83,7 +88,7 @@ function main() {
       store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
       store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
       store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
-      store.commit('SET_MULTI_PAGE',Vue.ls.get(DEFAULT_MULTI_PAGE,config.multipage))
+      store.commit('SET_MULTI_PAGE', Vue.ls.get(DEFAULT_MULTI_PAGE, config.multipage))
     },
     render: h => h(App)
   }).$mount('#app')

jero-web/src/permission.js

@@ -22,6 +22,7 @@ router.beforeEach((to, from, next) => {
     } else {
       if (store.getters.permissionList.length === 0) {
         store.dispatch('GetPermissionList').then(res => {
+          // console.log(res)
               const menuData = res.result.menu;
               //console.log(res.message)
               if (menuData === null || menuData === "" || menuData === undefined) {

jero-web/src/store/modules/permission.js

@@ -80,6 +80,7 @@ const permission = {
       return new Promise(resolve => {
         //const [ roles ] = routes.constRoutes
         let routelist = routes.constRoutes;
+        console.log(routelist)
         commit('SET_ROUTERS', routelist)
         resolve()
       })

jero-web/src/views/jero/report/ArchivesStatisticst.vue

@@ -11,21 +11,7 @@
               <a-radio-button value="cabinet">按柜号统计</a-radio-button>
             </a-radio-group>
           </a-col>
-          <a-col :span="14">
+          <div class="statistic" ref="echartBar"></div>
-            <a-form v-if="barType === 'month' && false" layout="inline" style="margin-top: -4px">
-              <a-form-item label="月份区间">
-                <a-range-picker
-                  :placeholder="['开始月份', '结束月份']"
-                  format="YYYY-MM"
-                  :value="barValue"
-                  :mode="barDate"
-                  @panelChange="handleBarDate"/>
-              </a-form-item>
-              <a-button style="margin-top: 2px" type="primary" icon="search" @click="queryDatebar">查询</a-button>
-              <a-button style="margin-top: 2px;margin-left: 8px" type="primary" icon="reload" @click="searchReset">重置</a-button>
-            </a-form>
-          </a-col>
-          <bar class="statistic" title="档案统计" :dataSource="countSource" :height="400"/>
         </a-row>
       </a-tab-pane>
 
@@ -39,23 +25,7 @@
               <a-radio-button value="cabinet">按柜号统计</a-radio-button>
             </a-radio-group>
           </a-col>
-          <a-col :span="14">
+          <div class="statistic" ref="echartPie"></div>
-            <a-form v-if="pieType === 'month' && false" layout="inline" style="margin-top: -4px">
-              <a-row :gutter="24">
-                <a-form-item label="月份区间">
-                  <a-range-picker
-                    :placeholder="['开始月份', '结束月份']"
-                    format="YYYY-MM"
-                    :value="pieValue"
-                    :mode="pieDate"
-                    @panelChange="handlePieDate"/>
-                </a-form-item>
-                <a-button style="margin-top: 2px" type="primary" icon="search" @click="queryDatepie">查询</a-button>
-                <a-button style="margin-top: 2px;margin-left: 8px" type="primary" icon="reload" @click="searchReset">重置</a-button>
-              </a-row>
-            </a-form>
-          </a-col>
-          <pie class="statistic" title="档案统计" :dataSource="countSource" :height="450"/>
         </a-row>
       </a-tab-pane>
     </a-tabs>
@@ -63,253 +33,289 @@
 </template>
 
 <script>
-  import Bar from '@/components/chart/Bar'
+  import {
-  import Pie from '@/components/chart/Pie'
+    getAction
-  import ACol from 'ant-design-vue/es/grid/Col'
+  } from '@/api/manage'
-  import { getAction } from '@/api/manage'
+  // 引入echarts
+  import * as echarts from 'echarts'
 
   export default {
     name: 'ArchivesStatisticst',
     components: {
-      ACol,
+
-      Bar,
-      Pie
     },
     data() {
       return {
-        description: '档案统计页面',
+        barType: 'year',
-        // 查询条件
+        pieType: 'year',
-        queryParam: {},
         // 数据集
         countSource: [],
-        // 柱状图
-        barType: 'year',
-        barDate: ['month', 'month'],
         barValue: [],
-        // 饼状图
-        pieType: 'year',
-        pieDate: ['month', 'month'],
         pieValue: [],
         // 统计图类型
-        tabStatus:"bar",
+        tabStatus: "bar",
         url: {
           getYearCountInfo: "/mock/api/report/getYearCountInfo",
-          getMonthCountInfo:"/mock/api/report/getMonthCountInfo",
+          getMonthCountInfo: "/mock/api/report/getMonthCountInfo",
-          getCntrNoCountInfo:"/mock/api/report/getCntrNoCountInfo",
+          getCntrNoCountInfo: "/mock/api/report/getCntrNoCountInfo",
-          getCabinetCountInfo:"/mock/api/report/getCabinetCountInfo",
+          getCabinetCountInfo: "/mock/api/report/getCabinetCountInfo",
         },
       }
     },
     created() {
+      
+    },
+    mounted() {
       let url = this.url.getYearCountInfo;
-      this.loadDate(url,'year',{});
+      this.loadDate(url, 'year', {});
     },
     methods: {
-      loadDate(url,type,param) {
+      loadDate(url, type, param) {
-        getAction(url,param,'get').then((res) => {
+        getAction(url, param, 'get').then((res) => {
+          // console.log(res)
           if (res.success) {
             this.countSource = [];
-            if(type === 'year'){
+            if (type === 'year') {
               this.getYearCountSource(res.result);
             }
-            if(type === 'month'){
+            if (type === 'month') {
               this.getMonthCountSource(res.result);
             }
-            if(type === 'category'){
+            if (type === 'category') {
               this.getCategoryCountSource(res.result);
             }
-            if(type === 'cabinet'){
+            if (type === 'cabinet') {
               this.getCabinetCountSource(res.result);
             }
-          }else{
+          } else {
-            var that=this;
+            var that = this;
             that.$message.warning(res.message);
           }
         })
       },
-      getYearCountSource(data){
+      //按年统计
-        for (let i = 0; i < data.length; i++) {
+      getYearCountSource(data) {
-          if(this.tabStatus === "bar"){
+        let yearList = []
-            this.countSource.push({
+        let yearCountList = []
-              x: `${data[i].year}年`,
+        data.forEach((item) => {
-              y: data[i].yearcount
+          yearList.push(item.year)
-            })
+          yearCountList.push(item.yearcount)
-          }else{
+        })
-            this.countSource.push({
+        let pieList = []
-              item: `${data[i].year}年`,
+        data.forEach((item) => {
-              count:data[i].yearcount
+          let a = {
-            })
+            'value': item.yearcount,
+            'name': item.year
           }
+          pieList.push(a)
+        })
+        //判断类型
+        if (this.tabStatus === "bar") {
+          this.barChart(yearList, yearCountList)
+        } else {
+          this.TieChart(pieList)
         }
       },
-      getMonthCountSource(data){
+      //按月统计
-        for (let i = 0; i < data.length; i++) {
+      getMonthCountSource(data) {
-          if(this.tabStatus === "bar"){
+        let monthList = []
-            this.countSource.push({
+        let monthCountList = []
-              x: data[i].month,
+        data.forEach((item) => {
-              y: data[i].monthcount
+          monthList.push(item.month)
-            })
+          monthCountList.push(item.monthcount)
-          }else{
+        })
-            this.countSource.push({
+        let pieList = []
-              item: data[i].month,
+        data.forEach((item) => {
-              count:data[i].monthcount
+          let a = {
-            })
+            'value': item.monthcount,
+            'name': item.month
           }
+          pieList.push(a)
+        })
+        //判断类型
+        if (this.tabStatus === "bar") {
+          this.barChart(monthList, monthCountList)
+        } else {
+          this.TieChart(pieList)
         }
+
       },
-      getCategoryCountSource(data){
+      //按类别统计
-        for (let i = 0; i < data.length; i++) {
+      getCategoryCountSource(data) {
-          if(this.tabStatus ==="bar"){
+        let cateList = []
-            this.countSource.push({
+        let cateCountList = []
-              x: data[i].classifyname,
+        data.forEach((item) => {
-              y: data[i].cntrnocount
+          cateList.push(item.classifyname)
-            })
+          cateCountList.push(item.cntrnocount)
-          }else{
+        })
-            this.countSource.push({
+        let pieList = []
-              item: data[i].classifyname,
+        data.forEach((item) => {
-              count:data[i].cntrnocount
+          let a = {
-            })
+            'value': item.cntrnocount,
+            'name': item.classifyname
           }
+          pieList.push(a)
+        })
+        //判断类型
+        if (this.tabStatus === "bar") {
+          this.barChart(cateList, cateCountList)
+        } else {
+          this.TieChart(pieList)
         }
+
       },
-      getCabinetCountSource(data){
+      //按柜号统计
-        for (let i = 0; i < data.length; i++) {
+      getCabinetCountSource(data) {
-          if(this.tabStatus === "bar"){
+        let cabinetList = []
-            this.countSource.push({
+        let cabinetCountList = []
-              x: data[i].cabinetname,
+        data.forEach((item) => {
-              y: data[i].cabinetcocunt
+          cabinetList.push(item.cabinetname)
-            })
+          cabinetCountList.push(item.cabinetcocunt)
-          }else{
+        })
-            this.countSource.push({
+        let pieList = []
-              item: data[i].cabinetname,
+        data.forEach((item) => {
-              count:data[i].cabinetcocunt
+          let a = {
-            })
+            'value': item.cabinetcocunt,
+            'name': item.cabinetname
           }
+          pieList.push(a)
+        })
+        //判断类型
+        if (this.tabStatus === "bar") {
+          this.barChart(cabinetList, cabinetCountList)
+        } else {
+          this.TieChart(pieList)
         }
+
+      },
+      //柱状图方法
+      barChart(list, countList) {
+        // console.log(list,countList)
+        var myChart = echarts.init(this.$refs.echartBar)
+        // 指定图表的配置项和数据
+        var option = {
+          title: {
+            text: "档案统计",
+          },
+          tooltip: {},
+          legend: {
+            data: ["y"],
+          },
+          xAxis: {
+            data: list,
+          },
+          yAxis: {},
+          series: [{
+            name: "y",
+            type: "bar",
+            data: countList,
+          }, ],
+        }
+
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option)
+      },
+      //饼状图方法
+      TieChart(pieList) {
+        var myChart = echarts.init(this.$refs.echartPie)
+        // 指定图表的配置项和数据
+        var option = {
+          title: {
+            text: '档案统计',
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'left',
+          },
+          series: [{
+            name: pieList.name,
+            type: 'pie',
+            radius: '50%',
+            data: pieList,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }]
+        }
+
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option)
       },
       // 选择统计图类别
       callback(key) {
-        if(key === "1"){
+        if (key === "1") {
           this.tabStatus = "bar";
           this.queryDatebar();
-        }else{
+        } else {
           this.tabStatus = "pie";
           this.queryDatepie();
         }
       },
       // 选择统计类别
       statisticst(e) {
-        if(this.tabStatus === "pie"){
+        if (this.tabStatus === "pie") {
           this.pieType = e.target.value;
           this.queryDatepie();
-        }else{
+        } else {
           this.barType = e.target.value;
           this.queryDatebar();
         }
       },
       // 按月份查询
-      queryDatebar(){
+      queryDatebar() {
-        if(this.barValue.length>0){
+        if (this.barValue.length > 0) {
-          this.getUrl(this.barType,{startTime:this.barValue[0]._d,endTime:this.barValue[1]._d});
+          this.getUrl(this.barType, {
-        }else{
+            startTime: this.barValue[0]._d,
-          this.getUrl(this.barType,{});
+            endTime: this.barValue[1]._d
+          });
+        } else {
+          this.getUrl(this.barType, {});
         }
       },
-      queryDatepie(){
+      queryDatepie() {
-        if(this.pieValue.length>0){
+        if (this.pieValue.length > 0) {
-          this.getUrl(this.pieType,{startTime:this.pieValue[0]._d,endTime:this.pieValue[1]._d});
+          this.getUrl(this.pieType, {
-        }else{
+            startTime: this.pieValue[0]._d,
-          this.getUrl(this.pieType,{});
+            endTime: this.pieValue[1]._d
+          });
+        } else {
+          this.getUrl(this.pieType, {});
         }
       },
-      searchReset(){
-        console.log(this.tabStatus);
-        if(this.tabStatus === "pie"){
-          this.pieValue = [];
-        }else{
-          this.barValue = [];
-        }
-        this.getUrl(this.barType,{});
-      },
       // 选择请求url
-      getUrl(type,param){
+      getUrl(type, param) {
         let url = "";
-        if(type === 'year'){
+        if (type === 'year') {
           url = this.url.getYearCountInfo;
         }
-        if(type === 'month'){
+        if (type === 'month') {
           url = this.url.getMonthCountInfo;
         }
-        if(type === 'category'){
+        if (type === 'category') {
           url = this.url.getCntrNoCountInfo;
         }
-        if(type === 'cabinet'){
+        if (type === 'cabinet') {
           url = this.url.getCabinetCountInfo;
         }
-        this.loadDate(url,type,param);
+        this.loadDate(url, type, param);
-      },
-      // 选择月份日期
-      handleBarDate(value, mode) {
-        this.barValue = value
-        this.barDate = [
-          mode[0] === 'date' ? 'month' : mode[0],
-          mode[1] === 'date' ? 'month' : mode[1]
-        ]
-      },
-      handlePieDate(value, mode) {
-        this.pieValue = value
-        this.pieDate = [
-          mode[0] === 'date' ? 'month' : mode[0],
-          mode[1] === 'date' ? 'month' : mode[1]
-        ]
       },
     }
   }
 </script>
+
 <style scoped>
-  .ant-card-body .table-operator {
-    margin-bottom: 18px;
-  }
-
-  .ant-table-tbody .ant-table-row td {
-    padding-top: 15px;
-    padding-bottom: 15px;
-  }
-
-  .anty-row-operator button {
-    margin: 0 5px
-  }
-
-  .ant-btn-danger {
-    background-color: #ffffff
-  }
-
-  .ant-modal-cust-warp {
-    height: 100%
-  }
-
-  .ant-modal-cust-warp .ant-modal-body {
-    height: calc(100% - 110px) !important;
-    overflow-y: auto
-  }
-
-  .ant-modal-cust-warp .ant-modal-content {
-    height: 90% !important;
-    overflow-y: hidden
-  }
-
   .statistic {
     padding: 0px !important;
     margin-top: 50px;
-  }
+    width: 100%;
-
+    height: 600px
-  .statistic h4 {
-    margin-bottom: 20px;
-    text-align: center !important;
-    font-size: 24px !important;;
-  }
-
-  .statistic #canvas_1 {
-    width: 100% !important;
   }
 </style>