前端：新首页

src/dashoo.cn/frontend_web/src/pages/indexNew.vue

@@ -4,23 +4,23 @@
     <div class="todo-box">
       <div class="todo-box-item">
         <div class="title">新准入</div>
-        <div class="number">{{ newAccessNum }}</div>
+        <div class="number" @click="pushToDo('1')">{{ newAccessNum }}</div>
       </div>
       <div class="todo-box-item">
         <div class="title">增项申请</div>
-        <div class="number">{{ appendNum }}</div>
+        <div class="number" @click="pushToDo('2')">{{ appendNum }}</div>
       </div>
       <div class="todo-box-item">
         <div class="title">年审申请</div>
-        <div class="number">{{ annualNum }}</div>
+        <div class="number" @click="pushToDo('3')">{{ annualNum }}</div>
       </div>
       <div class="todo-box-item">
         <div class="title">信息变更</div>
-        <div class="number">{{ infoChangeNum }}</div>
+        <div class="number" @click="pushToDo('4')">{{ infoChangeNum }}</div>
       </div>
       <div class="todo-box-item">
         <div class="title">业绩评价</div>
-        <div class="number">{{ evaluationNum }}</div>
+        <div class="number" @click="pushToDo('10')">{{ evaluationNum }}</div>
       </div>
     </div>
     <div class="chart-box">
@@ -57,6 +57,9 @@
         </div>
       </div>
     </div>
+    <el-dialog :title="''" :visible.sync="typeVisible" top="5vh">
+      <div id="supplier-type-dialog" class="item-high-chart" style="width: 80%" :option="supplierScaleOption"></div>
+    </el-dialog>
   </div>
 </template>
 
@@ -69,20 +72,31 @@
     name: 'index',
     data () {
       return {
+        typeVisible: false,
+        accessVisible: false,
+        levelVisible: false,
+        scaleVisible: false,
         newAccessNum: 0,
         appendNum: 0,
         annualNum: 0,
         infoChangeNum: 0,
         evaluationNum: 0,
+        typeDialogOptions: null,
+        accessDialogOptions: null,
+        levelDialogOptions: null,
+        scaleDialogOptions: null,
         supplierTypeOptions: null,
         accessTypeOptions: null,
         supplierLevelOptions: null,
         supplierScaleOption: null,
         tjdevicecolor: [
           '#6A5ACD', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B',
-          '#60C0DD', '#E87C25', '#27727B', '#FE8463'
+          '#60C0DD', '#E87C25', '#27727B', '#FE8463', '#6c757d'
         ],
-        downloading: false
+        colorList: [
+          '#3CB371', '#007fbb', 'rgba(200,55,52)'
+        ],
+        downloading: true
       }
     },
     created () {
@@ -93,6 +107,14 @@
       authUser: 'authUser'
     }),
     methods: {
+      pushToDo (type) {
+        this.$router.push({
+          path: '/tasks',
+          query: {
+            chartType: type
+          }
+        })
+      },
       getToDoNumList () {
         this.$axios.get('/supplier/todoNum', {}).then(res => {
           this.newAccessNum = res.data.SupplierNum
@@ -143,24 +165,25 @@
             series: [{
               type: 'pie',
               name: '占比',
-              // #6c757d #007fbb  #c7000a
+              // #6c757d #007fbb  rgba(200,55,52)
               data: [
                 {
                   name: '供应商  ' + res.data.GoodsNum + ' 家',
-                  color: '#60C0DD',
-                  y: 30,
+                  color: 'rgba(200,55,52)',
+                  y: res.data.GoodsNum,
                   sliced: false, // 是否默认突出
                   selected: false
                 }, {
                   name: '服务商  ' + res.data.TecNum + ' 家',
-                  color: '#E87C25',
-                  y: 12,
+                  // color: '#E87C25',
+                  color: 'rgba(125,158,133)',
+                  y: res.data.TecNum,
                   sliced: false, // 是否默认突出
                   selected: false
                 }, {
                   name: '承包商  ' + res.data.BasNum + ' 家',
-                  color: '#007fbb',
-                  y: 42,
+                  color: 'rgba(68,155,203)',
+                  y: res.data.BasNum,
                   sliced: false, // 是否默认突出
                   selected: false
                 }
@@ -232,20 +255,20 @@
               data: [
                 {
                   name: '评审准入  ' + res.data.ReviewNum + ' 家',
-                  color: '#60C0DD',
-                  y: 30,
+                  color: 'rgba(200,55,52)',
+                  y: res.data.ReviewNum,
                   sliced: false, // 是否默认突出
                   selected: false
                 }, {
                   name: '招标准入  ' + res.data.TenderNum + ' 家',
-                  color: '#E87C25',
-                  y: 12,
+                  color: 'rgba(125,158,133)',
+                  y: res.data.TenderNum,
                   sliced: false, // 是否默认突出
                   selected: false
                 }, {
                   name: '战略准入  ' + res.data.StrategicNum + ' 家',
-                  color: '#007fbb',
-                  y: 42,
+                  color: 'rgba(68,155,203)',
+                  y: res.data.StrategicNum,
                   sliced: false, // 是否默认突出
                   selected: false
                 }
@@ -312,24 +335,24 @@
             series: [{
               type: 'pie',
               name: '占比',
-              // #6c757d #007fbb  #c7000a
+              // #6c757d rgba(68,155,203)  #c7000a
               data: [
                 {
                   name: '一级供应商  ' + res.data.OneLevelGoodsNum + ' 家',
-                  color: '#60C0DD',
-                  y: 30,
+                  color: 'rgba(200,55,52)',
+                  y: res.data.OneLevelGoodsNum,
                   sliced: false, // 是否默认突出
                   selected: false
                 }, {
                   name: '二级制造商  ' + res.data.TwoLevelMakeNum + ' 家',
-                  color: '#E87C25',
-                  y: 12,
+                  color: 'rgba(125,158,133)',
+                  y: res.data.TwoLevelMakeNum,
                   sliced: false, // 是否默认突出
                   selected: false
                 }, {
                   name: '二级贸易/代理商  ' + res.data.TwoLevelNotMakeNum + ' 家',
-                  color: '#007fbb',
-                  y: 42,
+                  color: 'rgba(68,155,203)',
+                  y: res.data.TwoLevelNotMakeNum,
                   sliced: false, // 是否默认突出
                   selected: false
                 }
@@ -396,30 +419,31 @@
             series: [{
               type: 'pie',
               name: '占比',
-              // #6c757d #007fbb  #c7000a
+              // #6c757d rgba(68,155,203)  #c7000a
               data: [
                 {
                   name: '注册资金500万以下  ' + res.data.RegCapitalSmall + ' 家',
-                  color: '#FE8463',
-                  y: 30,
+                  // color: '#FE8463',
+                  color: 'rgba(200,55,52)',
+                  y: res.data.RegCapitalSmall,
                   sliced: false, // 是否默认突出
                   selected: false
                 }, {
                   name: '注册资金500万-1000万  ' + res.data.RegCapital2 + ' 家',
-                  color: '#60C0DD',
-                  y: 12,
+                  color: 'rgba(125,158,133)',
+                  y: res.data.RegCapital2,
                   sliced: false, // 是否默认突出
                   selected: false
                 }, {
                   name: '注册资金1000万-2000万  ' + res.data.RegCapital3 + ' 家',
-                  color: '#E87C25',
-                  y: 42,
+                  color: 'rgba(68,155,203)',
+                  y: res.data.RegCapital3,
                   sliced: false, // 是否默认突出
                   selected: false
                 }, {
                   name: '注册资金2000万-5000万  ' + res.data.RegCapital4 + ' 家',
-                  color: '#007fbb',
-                  y: 42,
+                  color: '#E87C25',
+                  y: res.data.RegCapital4,
                   sliced: false, // 是否默认突出
                   selected: false
                 }
@@ -448,6 +472,7 @@
               symbolRadius: 1 // 将图例圆角设置为 值越大就变圆点  https://api.highcharts.com.cn/highcharts#legend.symbolRadius
             }
           })
+          this.downloading = false
         })
       }
     }
@@ -491,6 +516,7 @@
           width: 100%;
           height: 60%;
           font-size: 26px;
+          cursor: pointer;
         }
       }
     }