chat表格数据绑定

package-lock.json

@@ -1668,16 +1668,6 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1616431156987&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -1704,53 +1694,6 @@
             "unique-filename": "^1.1.1"
           }
         },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.1.tgz",
-          "integrity": "sha512-g4miPa9uUrZz4iElkaVJgDFwKJGh8aQGM7pUL4ejXl6cu7kSb30seQOVGNMP6sW8j7DW77X68hJZ+GM7UGhXeQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
@@ -1767,16 +1710,6 @@
             "minipass": "^3.1.1"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz?cache=0&sync_timestamp=1610194262897&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-2.3.8.tgz",
@@ -1793,18 +1726,6 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.8.2",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.2.tgz",
-          "integrity": "sha512-Nkq+z9mAsMEK+qkXgK+9Ia7D8w9uu9j4ut0IMT5coMfux3rCgIp1QBB1CYwY0M34A1nRMSONEaWXxAAw6xSl/Q==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
         }
       }
     },
@@ -4038,6 +3959,11 @@
         "timsort": "^0.3.0"
       }
     },
+    "css-element-queries": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npm.taobao.org/css-element-queries/download/css-element-queries-1.2.3.tgz",
+      "integrity": "sha1-4UlAsfzUvw2mDqQUXQV0LXFy5RY="
+    },
     "css-line-break": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.0.1.tgz",
@@ -4735,6 +4661,22 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmmirror.com/echarts/download/echarts-5.2.2.tgz",
+      "integrity": "sha512-yxuBfeIH5c+0FsoRP60w4De6omXhA06c7eUYBsC1ykB6Ys2yK5fSteIYWvkJ4xJVLQgCvAdO8C4mN6MLeJpBaw==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.2.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.nlark.com/tslib/download/tslib-2.3.0.tgz?cache=0&sync_timestamp=1628722556410&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ftslib%2Fdownload%2Ftslib-2.3.0.tgz",
+          "integrity": "sha1-gDuM2rPhK6WBpMpByIObuw2ssJ4="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -6392,6 +6334,11 @@
         }
       }
     },
+    "intersection-observer": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npm.taobao.org/intersection-observer/download/intersection-observer-0.5.1.tgz?cache=0&sync_timestamp=1607914562651&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fintersection-observer%2Fdownload%2Fintersection-observer-0.5.1.tgz",
+      "integrity": "sha1-40D8Vs50KQ/isjlNHOiMQ1Osbfo="
+    },
     "ip": {
       "version": "1.1.5",
       "resolved": "https://registry.npm.taobao.org/ip/download/ip-1.1.5.tgz",
@@ -7077,8 +7024,7 @@
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npm.taobao.org/lodash.debounce/download/lodash.debounce-4.0.8.tgz?cache=0&sync_timestamp=1588852765914&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash.debounce%2Fdownload%2Flodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
-      "dev": true
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
     "lodash.defaultsdeep": {
       "version": "4.6.1",
@@ -11592,6 +11538,97 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.8.3",
+      "resolved": "https://registry.npmmirror.com/vue-loader/download/vue-loader-16.8.3.tgz",
+      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz",
+          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.2.tgz",
+          "integrity": "sha1-qsTit3NKdAhnrrFr8CqtVWoeegE=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.nlark.com/color-convert/download/color-convert-2.0.1.tgz",
+          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.nlark.com/color-name/download/color-name-1.1.4.tgz",
+          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz",
+          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmmirror.com/loader-utils/download/loader-utils-2.0.2.tgz",
+          "integrity": "sha1-1uO0+4GHByGuTghoqxHdY4NowSk=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1626703342506&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
+          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "vue-resize-directive": {
+      "version": "1.2.0",
+      "resolved": "https://registry.nlark.com/vue-resize-directive/download/vue-resize-directive-1.2.0.tgz",
+      "integrity": "sha1-QhTKioCkJVKbA26oaMrVSjj2E+Q=",
+      "requires": {
+        "css-element-queries": "^1.0.2",
+        "intersection-observer": "^0.5.0",
+        "lodash.debounce": "^4.0.8"
+      }
+    },
     "vue-router": {
       "version": "3.5.1",
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.5.1.tgz?cache=0&sync_timestamp=1617697843139&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.5.1.tgz",
@@ -12597,6 +12634,21 @@
       "version": "20.2.7",
       "resolved": "https://registry.npm.taobao.org/yargs-parser/download/yargs-parser-20.2.7.tgz",
       "integrity": "sha1-Yd+FwRPt+1p6TjbriqYO9CPLyQo="
+    },
+    "zrender": {
+      "version": "5.2.1",
+      "resolved": "https://registry.nlark.com/zrender/download/zrender-5.2.1.tgz",
+      "integrity": "sha1-X0u9qRW6bUErCxncJDG+qtBUF7s=",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.nlark.com/tslib/download/tslib-2.3.0.tgz?cache=0&sync_timestamp=1628722556410&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ftslib%2Fdownload%2Ftslib-2.3.0.tgz",
+          "integrity": "sha1-gDuM2rPhK6WBpMpByIObuw2ssJ4="
+        }
+      }
     }
   }
 }

package.json

@@ -10,6 +10,7 @@
     "af-table-column": "^1.0.3",
     "axios": "^0.21.1",
     "core-js": "^3.11.1",
+    "echarts": "^5.2.2",
     "element-china-area-data": "^5.0.2",
     "element-ui": "^2.15.5",
     "file-saver": "^2.0.5",
@@ -22,6 +23,7 @@
     "qf-export-excel": "^1.0.4",
     "script-loader": "^0.7.2",
     "vue": "^2.6.11",
+    "vue-resize-directive": "^1.2.0",
     "vue-router": "^3.2.0",
     "xlsx": "^0.16.9",
     "xlsx-style": "^0.8.13"

src/components/jc.vue

@@ -95,7 +95,7 @@
               <el-container>
                 <el-main>
                   <el-card shadow="always">
-                    <!--            内容显示-->
+                    <!--内容显示-->
                     <router-view :key="item.name" />
                   </el-card>
                 </el-main>
@@ -219,16 +219,6 @@ let groupname = window.sessionStorage.getItem('groupname')
       // icon: 'el-icon-s-data',
       subMenuName: '承担单位',
       children: [
-		  // {
-    //     id: '3-1',
-    //     subMenuName: '退回任务',
-    //     path: '/admin/'
-    //   },
-	  // {
-   //      id: '3-2',
-   //      subMenuName: '抽样计划',
-   //      path: '/admin/'
-   //    },
 	  {
         id: '3-3',
         subMenuName: '例行监测',
@@ -245,23 +235,7 @@ let groupname = window.sessionStorage.getItem('groupname')
     //     subMenuName: '退回任务',
     //     path: '/jc/returnTaskcd'
     //   },
-   //{
-   //      id: '3-6',
-   //      subMenuName: '报告汇总',
-   //      path: '/admin/'
-   //    },{
-   //      id: '3-7',
-   //      subMenuName: '问题单据',
-   //      path: '/admin/'
-   //    },{
-   //      id: '3-8',
-   //      subMenuName: '委托检测',
-   //      path: '/admin/'
-   //    },{
-   //      id: '3-9',
-   //      subMenuName: '复检任务',
-   //      path: '/admin/'
-   //    },
+  
 	  ]
     },]
     this.menuList = data
@@ -421,9 +395,9 @@ let groupname = window.sessionStorage.getItem('groupname')
     .admin-logo-container {
         display: flex;
         align-items: center;
-
         span {
-            margin-left: 15px;
+            margin-left: .9375rem;
+            font-size: 1.8rem;
         }
     }
 
@@ -480,4 +454,8 @@ let groupname = window.sessionStorage.getItem('groupname')
         margin-bottom: 1%;
         // font: 24px bold #0055ff;
       }
+    /deep/ .el-submenu__title{
+      font-size: .90625rem;
+      font-weight: 550;
+    }
 </style>

src/components/jc/mutiChart.vue

@@ -0,0 +1,290 @@
+<template>
+    <div class="charts" style="">
+      <div id="project" style="height: 350px;width: 50%;float: left"></div>
+      <div id="activeProject" style="height: 350px;width: 50%;float: left"></div>
+      <div id="user" style="height: 350px;width: 50%;float: left"></div>
+      <div id="activeUser" style="height: 350px;width: 50%;float: left"></div>
+    </div>
+</template>
+
+<script>
+  let echarts = require('echarts/lib/echarts');
+  require('echarts/lib/chart/bar');
+  require('echarts/lib/chart/pie');
+  require('echarts/lib/component/tooltip');
+  require('echarts/lib/component/title');
+  export default {
+    name: "mutiChart",
+    data () {
+      return {
+        projectX:[1,2,3],
+        projectY:[1,2,3],
+        activeProX:[1,2,3],
+        activeProY:[1,2,3],
+        userX:[1,2,3],
+        userY:[1,2,3],
+        activeUserX:[1,2,3],
+        activeUserY:[1,2,3],
+        chartData: [],
+      }
+    },
+    props:{
+      chartData:[],
+    },
+    mounted(){
+      this.drawProject();
+      this.drawActiveProject();
+      this.drawUser();
+      this.drawActiveUser();
+      this.setData();
+    },
+    created () {
+      this.setData();
+    },
+
+    methods:{
+      drawProject(){
+        let barGraph = echarts.init(document.getElementById('project'));
+        if(this.projectX.length ==0 && this.projectY.length ==0 ){
+          barGraph.showLoading(
+            {
+              text: '暂无数据',
+              color: '#ffffff',
+              textColor: '#000',
+              maskColor: 'rgba(255, 255, 255, 0.8)',
+              zlevel: 0,
+            }
+          );
+        }
+        barGraph.setOption({
+          title: {
+            text: '有效项目(累计)',
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c}'
+          },
+          legend: {
+            left: 'center',
+            data: ['有效项目',],
+            bottom:0
+          },
+          xAxis: {
+            type: 'category',
+            name: 'x',
+            splitLine: {show: false},
+            data: this.projectX
+          },
+          //网格配置 
+          grid: {
+            left: '1%',
+            right: '2%',
+            bottom: '8%',
+            containLabel: true//显示刻度标签
+          },
+          yAxis: {
+            type: 'value',
+            name: 'y',
+            splitLine: {show: true},
+
+          },
+          series: [
+            {
+              name: '有效项目',
+              type: 'line',
+              data: this.projectY,
+            },
+          ]
+        })
+      },
+      drawActiveProject(){
+        let barGraph = echarts.init(document.getElementById('activeProject'));
+        if(this.activeProX.length ==0 && this.activeProY.length ==0 ){
+          barGraph.showLoading(
+            {
+              text: '暂无数据',
+              color: '#ffffff',
+              textColor: '#000',
+              maskColor: 'rgba(255, 255, 255, 0.8)',
+              zlevel: 0,
+            }
+          );
+        }
+        barGraph.setOption({
+          title: {
+            text: '月活项目(当月)',
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c}'
+          },
+          legend: {
+            left: 'center',
+            data: ['月活项目',],
+            bottom:0
+          },
+          xAxis: {
+            type: 'category',
+            name: 'x',
+            splitLine: {show: false},
+            data:this.activeProX,
+          },
+          grid: {
+            left: '1%',
+            right: '2%',
+            bottom: '8%',
+            containLabel: true
+          },
+          yAxis: {
+            type: 'value',
+            name: 'y',
+            splitLine: {show: true},
+          },
+          series: [
+            {
+              name: '月活项目',
+              type: 'line',
+              data: this.activeProY,
+            },
+          ]
+        })
+      },
+      drawUser(){
+        let barGraph = echarts.init(document.getElementById('user'));
+        if(this.userX.length ==0 && this.userY.length ==0 ){
+          barGraph.showLoading(
+            {
+              text: '暂无数据',
+              color: '#ffffff',
+              textColor: '#000',
+              maskColor: 'rgba(255, 255, 255, 0.8)',
+              zlevel: 0,
+            }
+          );
+        }
+        barGraph.setOption({
+          title: {
+            text: '用户总数(累计)',
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c}'
+          },
+          legend: {
+            left: 'center',
+            data: ['用户总数',],
+            bottom:0
+          },
+          xAxis: {
+            type: 'category',
+            name: 'x',
+            splitLine: {show: false},
+            data: this.userX,
+          },
+          grid: {
+            left: '1%',
+            right: '2%',
+            bottom: '8%',
+            containLabel: true
+          },
+          yAxis: {
+            type: 'value',
+            name: 'y',
+            splitLine: {show: true},
+          },
+          series: [
+            {
+              name: '用户总数',
+              type: 'line',
+              data: this.userY,
+            },
+          ]
+        })
+      },
+      drawActiveUser(){
+        let barGraph = echarts.init(document.getElementById('activeUser'));
+        if(this.activeUserX.length ==0 && this.activeUserY.length ==0 ){
+          barGraph.showLoading(
+            {
+              text: '暂无数据',
+              color: '#ffffff',
+              textColor: '#000',
+              maskColor: 'rgba(255, 255, 255, 0.8)',
+              zlevel: 0,
+            }
+          );
+        }
+        barGraph.setOption({
+          title: {
+            text: '活跃用户(当月)',
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c}'
+          },
+          legend: {
+            left: 'center',
+            data: ['活跃用户',],
+            bottom:0
+          },
+          xAxis: {
+            type: 'category',
+            name: 'x',
+            splitLine: {show: false},
+            data: this.activeUserX
+          },
+          grid: {
+            left: '1%',
+            right: '2%',
+            bottom: '8%',
+            containLabel: true
+          },
+          yAxis: {
+            type: 'value',
+            name: 'y',
+            splitLine: {show: true},
+          },
+          series: [
+            {
+              name: '活跃用户',
+              type: 'line',
+              data: this.activeUserY,
+            },
+          ]
+        })
+      },
+      setData(){
+        let projectAll = this.chartData[0];
+        let projectAct = this.chartData[1];
+        let userAll = this.chartData[2];
+        let userAct = this.chartData[3];
+        for(let sing of projectAll) {
+          this.projectX.push(sing["formatD"])
+          this.projectY.push(sing["count"])
+        }
+        console.log(this.projectX)
+        console.log(this.projectY)
+        for(let sing of projectAct) {
+          this.activeProX.push(sing["formatD"])
+          this.activeProY.push(sing["count"])
+        }
+        for(let sing of userAll) {
+          this.userX.push(sing["formatD"])
+          this.userY.push(sing["count"])
+        }
+        for(let sing of userAct) {
+          this.activeUserX.push(sing["formatD"])
+          this.activeUserY.push(sing["count"])
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/jc/tasksChart.vue

@@ -0,0 +1,123 @@
+<template>
+    <div>
+        <div ref="myChart" style="width: 30rem;height:21rem; margin-left:3%;"></div>
+    </div>
+</template>
+<script>
+import conSoleVue from '../admin/conSole.vue';
+let echarts = require('echarts/lib/echarts');
+  require('echarts/lib/chart/bar');
+//   require('echarts/lib/chart/pie');
+  require('echarts/lib/component/tooltip');
+  require('echarts/lib/component/title');
+   window.addEventListener("resize", function() {
+   myChart.resize();
+  });
+export default {
+    name: "tasksChart",
+    props: ['taskClass'],
+    data() {
+      return {
+          title: this.taskClass + '任务数据统计',
+          taskData: '',
+          task_data: [],
+
+      }
+    },
+    mounted() {
+        this.jcStasticalTasks()
+		},
+    methods: {
+        initCharts () {
+        // let myChart = echarts.init(document.getElementById('myChart'));
+        let myChart = echarts.init(this.$refs.myChart);
+        // 绘制图表
+        myChart.setOption({
+        // 设置图标的标题
+        title: { 
+        text: this.title,
+            left: 'center'
+        },
+        // 图表的提示框组件  trigger: ''（触发方式）axis item
+        tooltip: {
+            // 触发方式
+            trigger: 'item'
+        },
+        grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        // 是否显示刻度标签 如果是true 就显示 否则反之
+        containLabel: true
+        },
+        // 设置x轴相关配置
+        xAxis: {
+            type: "category",
+            data: ["已发布","进行中","未完成","已完成"],
+            axisTick: {
+                alignWithLabel: true
+            },
+            axisLabel: {
+                // color: "rgba(255,255,255,.6)",
+                fontSize: 14,
+                fontWeight: "bold"
+            },
+            axisLine: {
+                lineStyle: {
+                    // color: "rgba(90,90,90,.5)"
+                }
+            },
+        },
+        yAxis: {
+            type: 'value',
+            // name: 'y',
+            splitLine: {show: true},
+            axisLabel: {
+                // color: "rgba(255,255,255,.6)",
+                fontSize: 14,
+                fontWeight: "bold"
+            },
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    // color: "rgba(95,95,95,.1)",
+                    width:1,
+                    type: "solid"
+                }
+         },
+        },
+        series: [{
+        name: '任务数量',
+        type: 'bar',
+        data: this.task_data,
+         // 修改柱子宽度
+        barWidth: "35%",
+        itemStyle: {
+             // 修改柱子圆角
+             barBorderRadius: 8
+           }
+        }]
+        });
+        },
+        async jcStasticalTasks() {
+        
+        var that = this
+		const result = await this.$http.post('JcStasticalTasks', {task_class: this.taskClass})
+        console.log(result.data.data)
+        that.taskData = result.data.data
+        console.log(that.taskData)
+        var td = []
+        for(let key in that.taskData){
+            td.push(that.taskData[key])
+        }
+        that.task_data = td
+        this.initCharts()
+      },
+    } 
+  }
+</script>
+<style lang="less" scoped>
+    colgroup{
+        color: rgb(116, 116, 116);
+    }
+</style>

src/components/jc/workbench.vue

@@ -1,22 +1,40 @@
 <template>
+<div>
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+			<el-breadcrumb-item :to="{ path: '/jc/workbench' }">首页</el-breadcrumb-item>
+			<el-breadcrumb-item>控制台</el-breadcrumb-item>
+	</el-breadcrumb>
     <div class="workblock">
         <div class="block" @click="getRoutineMonitor()">
-            <el-image style="width: 150px; height: 150px" :src=r></el-image>
+            <el-image style="width: 9.5rem; height: 9.5rem" :src=r></el-image>
         </div>
         <div class="block" @click="getSpecialMonitor()">
-            <el-image style="width: 150px; height: 150px" :src=s></el-image>
+            <el-image style="width: 9.5rem; height: 9.5rem" :src=s></el-image>
         </div>
         <div class="block" @click="getSubjectInformation()">
-            <el-image style="width: 150px; height: 150px" :src=p></el-image>
+            <el-image style="width: 9.5rem; height: 9.5rem" :src=p></el-image>
         </div>
         <div class="block" @click="getsy()">
-            <el-image style="width: 150px; height: 150px" :src=sy></el-image>
+            <el-image style="width: 9.5rem; height: 9.5rem" :src=sy></el-image>
         </div>
     </div>
+    <div id="charts">
+    <div class="chart">
+    <tasksChart taskClass = "例行监测"></tasksChart>
+    </div>
+    <div>
+    <tasksChart taskClass = "专项监测"></tasksChart>
+    </div>
+    </div>
+    <!-- <mutiChart></mutiChart> -->
+</div>
 </template>
 <script>
-
+  import tasksChart from './tasksChart'
+//   import mutiChart from './mutiChart'
 export default {
+    
+    name: "workbench",
     data() {
       return {
         r: require('../../assets/img/routineMo.png'),
@@ -25,9 +43,14 @@ export default {
         sy: require('../../assets/img/systemIntroduction.png')
       }
     },
+    components: {
+        tasksChart,
+        // mutiChart
+    },
     mounted() {
 		},
     created() {
+        console.log(this.taskClass);
 		},
     methods: {
         async getRoutineMonitor() {
@@ -59,10 +82,20 @@ export default {
         display: flex;
         justify-content: center;
         align-items: center;
-        height: 28rem;
-        margin: auto;
+        height: 35%;
+        margin-bottom: 1.25rem;
         .block{
             margin: 1.25rem 1.25rem;
         }
     }
+    #charts{
+        display: flex;
+        justify-content: center;
+        .chart{
+            margin-right: 8rem;
+        }
+        .tasksChart{
+            margin: 1.875rem;
+        }
+    }
 </style>

src/components/login.vue

@@ -236,18 +236,18 @@ let windowHalfY = window.innerHeight / 2;
 		float: right;
 	}
 	.btn:hover {
-    background: -webkit-linear-gradient(left,#5bd4fd,#2f98fb);
-}
-.btn {
-    background: #43cc99;
-    color: #fff;
-    transition: all .5s;
-    cursor: pointer;
-	width: 300px;
-	height: 56px;
-	border: none;
-	border-radius: 50px;
-}
+    	background: -webkit-linear-gradient(left,#5bd4fd,#2f98fb);
+	}
+	.btn {
+		background: #43cc99;
+		color: #fff;
+		transition: all .5s;
+		cursor: pointer;
+		width: 300px;
+		height: 56px;
+		border: none;
+		border-radius: 50px;
+	}
 
 	.header_time {
 		text-align: center;

src/main.js

@@ -6,7 +6,9 @@ import router from './router'
 import './plugins/element.js'
 // 导入全局样式表
 import './assets/css/global.css'
-
+// 导入echarts
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts
 // 导入axios数据交互请求
 import axios from 'axios'
 

src/router/index.js

@@ -244,6 +244,14 @@ const routes = [{
 			path: '/jc/systemIntroduce',
 			name:'systemIntroduce',
 			component: () => import('../components/jc/systemIntroduce')
+		},{
+			path: '/jc/tasksChart',
+			name:'tasksChart',
+			component: () => import('../components/jc/tasksChart')
+		},{
+			path: '/jc/mutiChart',
+			name:'mutiChart',
+			component: () => import('../components/jc/mutiChart')
 		}
 		]
 	},{