1

src/views/system/securityCheck/views/cargoCharts.vue

@@ -6,7 +6,7 @@
         @change="change"
         :withExportButton="false"
         @search="search"
-        mode="combobox"
+        mode="multiple"
         selectPlaceholder="目的地"
         :optionLists="destination"
       />
@@ -14,6 +14,14 @@
     <div class="content_top">
       <div class="header">
         <p>不同综合风险等级货物对应不同航线比例</p>
+        <div class="conten">
+          <div class="log_cont">
+            <div class="cont" v-for="(item, index) in treeTitles" :key="index" @click="ups(item, index)">
+              <div :class="active == index ? 'log_types' : 'log_type'">{{ item.name }}</div>
+            </div>
+          </div>
+          <span>{{ active == 0 ? '单位：件' : '单位：吨' }}</span>
+        </div>
       </div>
       <div id="echarts-proportion"></div>
     </div>
@@ -53,6 +61,16 @@ import { agent, routeall } from '@/api/statistics/statistics.js'
 export default {
   data() {
     return {
+      Company: '件',
+      treeTitles: [
+        {
+          name: '件',
+        },
+        {
+          name: '吨',
+        },
+      ],
+      active: 0,
       multiple: 'multiple',
       queryData: {
         beginDate: '',
@@ -80,11 +98,10 @@ export default {
           fontWeight: '800',
           color: '#ffffff',
         },
-        color: ['#E7EBF4', '#6161BD'],
+        // color: ['#9B73B4', '#66ACD4', '#85C997', '#F1B172', '#E86E5A'],
       },
       datarisk: {
         id: 8,
-        kaer: 1,
         formatter: '{c}%',
         name: '高风险',
         cont: '70%',
@@ -102,12 +119,11 @@ export default {
           fontWeight: '800',
           color: '#ffffff',
         },
-        color: ['#E7EBF4', '#EE50A6'],
+        // color: ['#E7EBF4', '#EE50A6'],
       },
       dataLowrisk: {
         id: 9,
         formatter: '{c}%',
-        kaer: 1,
         name: '低风险',
         cont: '70%',
         top: '35%',
@@ -124,11 +140,10 @@ export default {
           fontWeight: '800',
           color: '#ffffff',
         },
-        color: ['#E7EBF4', '#F3C742'],
+        // color: ['#E7EBF4', '#F3C742'],
       },
       datafirst: {
         id: 10,
-        kaer: 1,
         formatter: '{c}%',
         name: '优先',
         cont: '10%',
@@ -146,11 +161,11 @@ export default {
           fontWeight: '800',
           color: '#ffffff',
         },
-        color: ['#E7EBF4', '#5AC591'],
+        // color: ['#E7EBF4', '#5AC591'],
       },
       dataordinary: {
         id: 11,
-        kaer: 1,
+        // kaer: 1,
         formatter: '{c}%',
         name: '普通',
         cont: '10%',
@@ -168,11 +183,11 @@ export default {
           fontWeight: '800',
           color: '#ffffff',
         },
-        color: ['#E7EBF4', '#70B4D4'],
+        // color: ['#E7EBF4', '#70B4D4'],
       },
       datastrictly: {
         id: 12,
-        kaer: 1,
+        // kaer: 1,
         formatter: '{c}%',
         name: '严控',
         cont: '10%',
@@ -190,7 +205,7 @@ export default {
           fontWeight: '800',
           color: '#ffffff',
         },
-        color: ['#E7EBF4', '#E64545'],
+        // color: ['#E7EBF4', '#E64545'],
       },
     }
   },
@@ -217,6 +232,10 @@ export default {
     this.relationDate()
   },
   methods: {
+    //切换单位
+    ups(item, index) {
+      this.active = index
+    },
     formatDate() {
       let date = new Date()
       let myyear = date.getFullYear()
@@ -308,71 +327,49 @@ export default {
           // });
           this.init(arr, arrx, Low, firs, pt, strictly, datas)
           this.dataall.cont = alldata
-          this.dataall.data = [
-            {
-              value: 0,
-              name: '',
-            },
-            {
-              value: alldata,
-              name: '总数',
-            },
-          ]
-          this.datarisk.cont = Math.floor((arrall / alldata).toFixed(2) * 100)
-          this.datarisk.data = [
-            {
-              value: alldata,
-              name: '总数',
-            },
-            {
-              value: arrall,
-              name: '高风险',
-            },
-          ]
-          this.dataLowrisk.cont = Math.floor((Lowall / alldata).toFixed(2) * 100)
-          this.dataLowrisk.data = [
-            {
-              value: alldata,
-              name: '总数',
-            },
-            {
-              value: Lowall,
-              name: '低风险',
-            },
-          ]
-          this.datafirst.cont = Math.floor((firsall / alldata).toFixed(2) * 100)
-          this.datafirst.data = [
-            {
-              value: alldata,
-              name: '总数',
-            },
-            {
-              value: firsall,
-              name: '优先',
-            },
-          ]
-          this.dataordinary.cont = Math.floor((ptall / alldata).toFixed(2) * 100)
-          this.dataordinary.data = [
-            {
-              value: alldata,
-              name: '总数',
-            },
-            {
-              value: ptall,
-              name: '普通',
-            },
-          ]
-          this.datastrictly.cont = Math.floor((strictlyall / alldata).toFixed(2) * 100)
-          this.datastrictly.data = [
-            {
-              value: alldata,
-              name: '总数',
-            },
-            {
-              value: strictlyall,
-              name: '严控',
-            },
-          ]
+          let ar = [] //总数
+          let arrrisk = [] //高风险
+          let arLowrisk = [] //低风险
+          let arrfirst = [] //优先
+          let arrordinary = [] //普通
+          let arrstrictly = [] //严控
+          for (let i = 0; i <= arrx.length; i++) {
+            ar[i] = {
+              name: arrx[i],
+              value: datas[i],
+            }
+            arrrisk[i] = {
+              name: arrx[i],
+              value: arr[i],
+            }
+            arLowrisk[i] = {
+              name: arrx[i],
+              value: Low[i],
+            }
+            arrfirst[i] = {
+              name: arrx[i],
+              value: firs[i],
+            }
+            arrordinary[i] = {
+              name: arrx[i],
+              value: pt[i],
+            }
+            arrstrictly[i] = {
+              name: arrx[i],
+              value: strictly[i],
+            }
+          }
+          this.dataall.data = ar
+          this.datarisk.cont = arrall
+          this.datarisk.data = arrrisk
+          this.dataLowrisk.cont = Lowall
+          this.dataLowrisk.data = arLowrisk
+          this.datafirst.cont = firsall
+          this.datafirst.data = firs
+          this.dataordinary.cont = ptall
+          this.dataordinary.data = arrordinary
+          this.datastrictly.cont = strictlyall
+          this.datastrictly.data = arrstrictly
         }
       } catch (error) {
         console.log(error)
@@ -451,7 +448,8 @@ export default {
 }
 .header {
   display: flex;
-  justify-content: flex-start;
+  justify-content: space-between;
+  padding-right: 3%;
   > p {
     font-size: 18px;
     font-family: Microsoft YaHei;
@@ -459,6 +457,13 @@ export default {
     color: #101116;
     margin: 0 0 24px 0;
   }
+  > .conten {
+    > span {
+      font-size: 12px;
+      font-family: Microsoft YaHei;
+      color: #101116;
+    }
+  }
 }
 .content_top {
   width: 100%;
@@ -468,6 +473,48 @@ export default {
   border-radius: 4px;
   margin-bottom: 16px;
   padding: 24px;
+  .conten {
+    width: 20%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .log_cont {
+      width: 80px;
+      height: 32px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: #101116;
+      border-radius: 4px;
+      color: #ffffff;
+      border: 2px solid #101116;
+      > .cont {
+        width: 50%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .log_type {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+        }
+        .log_types {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background: #ffffff;
+          color: #101116;
+          cursor: pointer;
+        }
+      }
+    }
+  }
 }
 #echarts-proportion {
   width: 100%;