1

src/utils/app-ecahrts.js

@@ -203,139 +203,183 @@ export const pillar = {
     }
   ],
 }
-export const pillars = {
-  title: {
-    text: '主标题',
-    // 副标题
-    subtext: "50%",
-    // 主副标题间距
-    itemGap: 12,
-    x: 'center',
-    y: 'center',
-    top: '35%',
-    // 主标题样式
-    textStyle: {
-      fontSize: '16',
-      color: '#ffffff'
-    },
-    // itemStyle: {
-
-    //   normal: {
-    //     borderColor: 'red', //背景色
-    //   }
-    // },
-    // 副标题样式
-    subtextStyle: {
-      fontSize: '20',
-      fontWeight: '800',
-      color: '#ffffff'
-    }
-  },
-  series: [
-    {
-      name: '访问来源',
-      type: 'pie',
-      radius: ['65%', '90%'],
-      avoidLabelOverlap: false,
-      silent: 'ture',
-      label: {
-        show: false,
-        position: 'center'
-      },
-      color: [],
-      // itemStyle: {
-      //   normal: {
-      //     color: ['#6161BD', '#E7EBF4']
-      //   }
-      // },
-      // 自定义中心内容的话需要把这个关闭
-      emphasis: {
-        label: {
-          show: false,
-          fontSize: '30',
-          fontWeight: 'bold'
-        }
-      },
-      labelLine: {
-        show: false
-      },
-      data: [
-      ]
-    },
-
-    {
-      name: '访问来源',
-      type: 'pie',
-      silent: 'ture',
-      radius: ['0%', '55%'],
-      avoidLabelOverlap: false,
-      itemStyle: {
-        normal: {
-          color: '#383C54'
-        }
-      },
-      label: {
-        show: false,
-        position: 'center'
-      },
-      // 自定义中心内容的话需要把这个关闭
-      emphasis: {
-        label: {
-          show: false,
-          fontSize: '30',
-          fontWeight: 'bold'
-        }
-      },
-      labelLine: {
-        show: false
-      },
-      data: [
-        { value: 100 },
-      ]
-    }
-  ]
-}
 
 //安检通道综合效率----柱状图
+// export const discoloration = {
+//   grid: {
+//     left: '3%',
+//     right: '4%',
+//     bottom: '3%',
+//     containLabel: true
+//   },
+//   backgroundColor: "rgba(223,227,234, 0.15)",
+//   //这里就不重要了，可以删掉
+//   color: ['#c23531', '#2f4554', '#61a0a8'],
+//   xAxis: {
+//     type: 'category',
+//     data: ['通道A', '通道B', '通道C', '通道D', '通道E']
+//   },
+//   yAxis: {
+//     splitLine: {
+//       lineStyle: {
+//         type: 'dashed',
+//         color: '#B0B3C3'
+//       }
+//     }
+//   },
+//   series: [{
+//     data: [120, 200, 150, 80, 70],
+//     type: 'bar',
+//     itemStyle: {
+//       normal: {
+//         //这里是重点
+//         color: function (params) {
+//           //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
+//           var colorList = ['#ECBF79', '#6CDDAF', '#6D94E4', '#A46DBE', '#DB4E4E'];
+//           return colorList[params.dataIndex]
+//         }
+//       }
+//     }
+//   }]
+// }
 export const discoloration = {
+  tooltip: {},
+  // legend: {
+  //   data: ['一月销量', '二月销量'],
+  //   right: '25%',
+  // },
   grid: {
     left: '3%',
     right: '4%',
-    bottom: '3%',
+    bottom: '5%',
     containLabel: true
   },
-  backgroundColor: "rgba(223,227,234, 0.15)",
-  //这里就不重要了，可以删掉
-  color: ['#c23531', '#2f4554', '#61a0a8'],
+  dataZoom: [{
+    type: 'slider',//给x轴设置滚动条
+    show: true, //flase直接隐藏图形
+    xAxisIndex: [0],
+    bottom: 0,
+    height: 20,
+    showDetail: false,
+    startValue: 0,//滚动条的起始位置
+    endValue: 15 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
+  },
+  {
+    type: 'inside',//设置鼠标滚轮缩放
+    show: true,
+    xAxisIndex: [0],
+    startValue: 0,
+    endValue: 9
+  }],
   xAxis: {
-    type: 'category',
-    data: ['通道A', '通道B', '通道C', '通道D', '通道E']
+    axisTick: {
+      alignWithLabel: true
+    },
+    data: ["PEK", "CTU", "NTG", "NZH", "ORD", "OTP", "OVB", "PAP", "CTU", "NTG", "NZH", "OTP", "PEK", "PEK", "PEK", "PEK", "PEK", "PEK"]
   },
   yAxis: {
     splitLine: {
       lineStyle: {
-        type: 'dashed',
-        color: '#B0B3C3'
+        type: 'dashed'
       }
     }
   },
   series: [{
-    data: [120, 200, 150, 80, 70],
+    name: 'A',
     type: 'bar',
+    stack: '总',
+    barWidth: '24px',
     itemStyle: {
       normal: {
         //这里是重点
-        color: function (params) {
-          //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
-          var colorList = ['#ECBF79', '#6CDDAF', '#6D94E4', '#A46DBE', '#DB4E4E'];
-          return colorList[params.dataIndex]
-        }
+        color: "#EE50A6"
       }
-    }
-  }]
+    },
+    data: [630, 20, 36, 10, 10, 20]
+  },
+  {
+    name: 'B',
+    type: 'bar',
+    stack: '总',
+    barWidth: '24px',
+    itemStyle: {
+      normal: {
+        //这里是重点
+        color: "#F3C742"
+      }
+    },
+    data: [300, 25, 26, 20, 10, 20]
+  },
+  {
+    name: 'C',
+    type: 'bar',
+    stack: '总',
+    barWidth: '24px',
+    itemStyle: {
+      normal: {
+        //这里是重点
+        color: "#5AC591"
+      }
+    },
+    data: [300, 25, 26, 20, 10, 20]
+  },
+  {
+    name: 'D',
+    type: 'bar',
+    stack: '总',
+    barWidth: '24px',
+    itemStyle: {
+      normal: {
+        //这里是重点
+        color: "#70B4D4"
+      }
+    },
+    data: [300, 25, 26, 20, 10, 20]
+  },
+  ]
 }
-
 //安检通道综合效率----柱状图
+// export const discolorationcops = {
+//   tooltip: {},
+//   // legend: {
+//   //   data: ['一月销量', '二月销量'],
+//   //   right: '25%',
+//   // },
+//   grid: {
+//     left: '1%',
+//     right: '0%',
+//     bottom: '3%',
+//     top: "10%",
+//     containLabel: true
+//   },
+//   xAxis: {
+//     axisTick: {
+//       alignWithLabel: true
+//     },
+//     data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18"]
+//   },
+//   yAxis: {
+//     splitLine: {
+//       lineStyle: {
+//         type: 'dashed'
+//       }
+//     }
+//   },
+//   series: [{
+//     name: '',
+//     type: 'bar',
+//     stack: '业务',
+//     barWidth: '24px',
+//     itemStyle: {
+//       normal: {
+//         //这里是重点
+//         color: "#5D6AB6"
+//       }
+//     },
+//     data: [630, 20, 36, 10, 10, 20, 630, 20, 36, 10, 10, 20, 630, 20, 36, 10, 10, 20]
+//   },
+//   ]
+// }
 export const discolorationcops = {
   tooltip: {},
   // legend: {
@@ -343,17 +387,33 @@ export const discolorationcops = {
   //   right: '25%',
   // },
   grid: {
-    left: '1%',
-    right: '0%',
-    bottom: '3%',
-    top: "10%",
+    left: '3%',
+    right: '4%',
+    bottom: '5%',
     containLabel: true
   },
+  dataZoom: [{
+    type: 'slider',//给x轴设置滚动条
+    show: true, //flase直接隐藏图形
+    xAxisIndex: [0],
+    bottom: 0,
+    height: 20,
+    showDetail: false,
+    startValue: 0,//滚动条的起始位置
+    endValue: 15 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
+  },
+  {
+    type: 'inside',//设置鼠标滚轮缩放
+    show: true,
+    xAxisIndex: [0],
+    startValue: 0,
+    endValue: 9
+  }],
   xAxis: {
     axisTick: {
       alignWithLabel: true
     },
-    data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18"]
+    data: ["PEK", "CTU", "NTG", "NZH", "ORD", "OTP", "OVB", "PAP", "CTU", "NTG", "NZH", "OTP", "PEK", "PEK", "PEK", "PEK", "PEK", "PEK"]
   },
   yAxis: {
     splitLine: {
@@ -363,17 +423,56 @@ export const discolorationcops = {
     }
   },
   series: [{
-    name: '',
+    name: 'A',
     type: 'bar',
-    stack: '业务',
+    stack: '总',
     barWidth: '24px',
     itemStyle: {
       normal: {
         //这里是重点
-        color: "#5D6AB6"
+        color: "#EE50A6"
       }
     },
-    data: [630, 20, 36, 10, 10, 20, 630, 20, 36, 10, 10, 20, 630, 20, 36, 10, 10, 20]
+    data: [630, 20, 36, 10, 10, 20]
+  },
+  {
+    name: 'B',
+    type: 'bar',
+    stack: '总',
+    barWidth: '24px',
+    itemStyle: {
+      normal: {
+        //这里是重点
+        color: "#F3C742"
+      }
+    },
+    data: [300, 25, 26, 20, 10, 20]
+  },
+  {
+    name: 'C',
+    type: 'bar',
+    stack: '总',
+    barWidth: '24px',
+    itemStyle: {
+      normal: {
+        //这里是重点
+        color: "#5AC591"
+      }
+    },
+    data: [300, 25, 26, 20, 10, 20]
+  },
+  {
+    name: 'D',
+    type: 'bar',
+    stack: '总',
+    barWidth: '24px',
+    itemStyle: {
+      normal: {
+        //这里是重点
+        color: "#70B4D4"
+      }
+    },
+    data: [300, 25, 26, 20, 10, 20]
   },
   ]
 }

src/views/securityCheck/views/comprehensiveHome.vue

@@ -3,10 +3,8 @@
     <div class="up">
       <SecurityCheckHeader
         title="安检通道综合效率"
-        :withSelect="false"
-        :withInput="false"
-        :withChangeButton="false"
         :withExportButton="false"
+        @search="search"
       />
     </div>
     <div class="comprehensive_cont">
@@ -28,32 +26,140 @@
   </div>
 </template>
 <script>
-import { discolorationcops, discolorationcopy } from "@/utils/app-ecahrts";
+import { discoloration, discolorationcops } from "@/utils/app-ecahrts";
 import SecurityCheckHeader from "../components/securityCheckHeader.vue";
+import { emergency } from "@/api/statistics/statistics.js";
 export default {
   data() {
-    return {};
+    return {
+      queryData: {},
+    };
   },
   components: {
     SecurityCheckHeader,
   },
   mounted() {
-    this.init();
+    // this.init();
   },
   methods: {
-    init() {
+    search(data) {
+      this.queryData = {
+        startTime: data[0][0],
+        endTime: data[0][1],
+        riskRating: data[1],
+        agentCode: data[2],
+      };
+      this.relationDate(data);
+    },
+    //点击跳转
+    echar() {
+      this.$router.push({
+        path: "/waybillTable",
+        query: this.queryData,
+      });
+    },
+    async relationDate(data) {
+      try {
+        let params = {
+          beginDate: data[0][0],
+          endDate: data[0][1],
+          proxyId: data[1],
+          proxyLevel: data[2],
+          type: "月",
+        };
+        let paramspoy = {
+          beginDate: data[0][0],
+          endDate: data[0][1],
+          proxyId: data[1],
+          proxyLevel: data[2],
+          type: "日",
+        };
+        const result = await emergency(params);
+        const resultcopy = await emergency(paramspoy);
+        if (result.status == 200) {
+          let arr = []; //高风险
+          let Low = []; //低风险
+          let firs = []; //优先级
+          let pt = [];
+          let arrx = []; //x轴
+          result.data.forEach((element) => {
+            arrx.push(element.date);
+            element.datas.forEach((res) => {
+              if (res.level === "A") {
+                arr.push(res.count);
+              } else if (res.level == "B") {
+                Low.push(res.count);
+              } else if (res.level == "C") {
+                firs.push(res.count);
+              } else if (res.level == "D") {
+                pt.push(res.count);
+              }
+            });
+            // console.log(arr);
+          });
+          this.init(arr, arrx, Low, firs, pt);
+        }
+        if (resultcopy.status == 200) {
+          let arr = []; //高风险
+          let Low = []; //低风险
+          let firs = []; //优先级
+          let pt = [];
+          let arrx = []; //x轴
+          result.data.forEach((element) => {
+            arrx.push(element.date);
+            element.datas.forEach((res) => {
+              if (res.level === "A") {
+                arr.push(res.count);
+              } else if (res.level == "B") {
+                Low.push(res.count);
+              } else if (res.level == "C") {
+                firs.push(res.count);
+              } else if (res.level == "D") {
+                pt.push(res.count);
+              }
+            });
+            // console.log(arr);
+          });
+          this.inits(arr, arrx, Low, firs, pt);
+        }
+        console.log(result);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    //月
+    init(arr, arrx, Low, firs, pt) {
       let myChart = this.$echarts.init(
         document.getElementById("comprehensive-month")
       ); //统计折线
       let myChartcopy = this.$echarts.init(
         document.getElementById("comprehensive-day")
       ); //统计折线
-
+      discoloration.series[0].data = arr;
+      discoloration.series[1].data = Low;
+      discoloration.series[2].data = firs;
+      discoloration.series[3].data = pt;
+      discoloration.xAxis.data = arrx;
+      myChart.clear();
+      myChart.setOption(discoloration);
+      window.onresize = () => {
+        myChart.resize();
+      };
+    },
+    //日
+    inits(arr, arrx, Low, firs, pt) {
+      let myChart = this.$echarts.init(
+        document.getElementById("comprehensive-day")
+      ); //统计折线
+      discolorationcops.series[0].data = arr;
+      discolorationcops.series[1].data = Low;
+      discolorationcops.series[2].data = firs;
+      discolorationcops.series[3].data = pt;
+      discolorationcops.xAxis.data = arrx;
+      myChart.clear();
       myChart.setOption(discolorationcops);
-      myChartcopy.setOption(discolorationcopy);
       window.onresize = () => {
         myChart.resize();
-        myChartcopy.resize();
       };
     },
   },