Merge branch 'master' of http://120.26.64.82:3000/BFFE/CABaggageData2.0

src/layout/components/Echarts/commonChartsChinaMap.vue

@@ -0,0 +1,75 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-09-23 11:16:14
+ * @LastEditTime: 2021-09-23 16:51:29
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \bigDataScreen\src\components\Echarts\commonChartsChinaMap.vue
+-->
+<template>
+  <div class="ChartsChinaMap" :id="id"></div>
+</template>
+
+<script>
+// 饼图初始数据
+import ChartsChinaMap from '../../mixin/commonChartsChinaMap'
+export default {
+  name: 'ChartsChinaMap',
+  props: {
+    // 饼图生成所需id
+    id: {
+      type: String,
+      default: ''
+    },
+    // 饼图额外的数据
+    option: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  mixins: [ChartsChinaMap],
+  data () {
+    return {
+      myChart: null, //饼图实例
+      desc: 300 // 防抖时间
+    }
+  },
+  mounted () {
+    // 初始数据和额外的配置数据耦合
+    const objData = _.merge(this.options, this.option)
+    // 饼图dom
+    const chartDom = document.getElementById(this.id)
+    // 饼图初始化
+    this.myChart = this.$echarts.init(chartDom)
+    // 生成饼图
+    this.myChart.setOption(objData)
+    // 监听页面缩放 防止dom重复渲染
+    window.addEventListener('resize', _.debounce(this.handle, this.desc))
+  },
+  destroyed () {
+    // 销毁实例和移除监听
+    this.myChart.dispose();
+    window.removeEventListener('resize', this.handle);
+  },
+  methods: {
+    /**
+     * @description: 图形缩放
+     * @param {*}
+     * @return {*}
+     */
+    handle () {
+      this.myChart.resize()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ChartsChinaMap {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+</style>

src/layout/mixin/commonChartsChinaMap.js

@@ -0,0 +1,271 @@
+/*
+ * @Author: your name
+ * @Date: 2021-09-23 11:12:40
+ * @LastEditTime: 2021-09-23 13:43:32
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \bigDataScreen\src\components\mixin\commonChartsChinaMap.js
+ */
+import '../../utils/china'
+var geoCoordMap = {
+  '上海': [121.4648, 31.2891],
+  '东莞': [113.8953, 22.901],
+  '东营': [118.7073, 37.5513],
+  '中山': [113.4229, 22.478],
+  '临汾': [111.4783, 36.1615],
+  '临沂': [118.3118, 35.2936],
+  '丹东': [124.541, 40.4242],
+  '丽水': [119.5642, 28.1854],
+  '乌鲁木齐': [87.9236, 43.5883],
+  '佛山': [112.8955, 23.1097],
+  '保定': [115.0488, 39.0948],
+  '兰州': [103.5901, 36.3043],
+  '包头': [110.3467, 41.4899],
+  '北京': [116.4551, 40.2539],
+  '北海': [109.314, 21.6211],
+  '南京': [118.8062, 31.9208],
+  '南宁': [108.479, 23.1152],
+  '南昌': [116.0046, 28.6633],
+  '南通': [121.1023, 32.1625],
+  '厦门': [118.1689, 24.6478],
+  '台州': [121.1353, 28.6688],
+  '合肥': [117.29, 32.0581],
+  '呼和浩特': [111.4124, 40.4901],
+  '咸阳': [108.4131, 34.8706],
+  '哈尔滨': [127.9688, 45.368],
+  '唐山': [118.4766, 39.6826],
+  '嘉兴': [120.9155, 30.6354],
+  '大同': [113.7854, 39.8035],
+  '大连': [122.2229, 39.4409],
+  '天津': [117.4219, 39.4189],
+  '太原': [112.3352, 37.9413],
+  '威海': [121.9482, 37.1393],
+  '宁波': [121.5967, 29.6466],
+  '宝鸡': [107.1826, 34.3433],
+  '宿迁': [118.5535, 33.7775],
+  '常州': [119.4543, 31.5582],
+  '广州': [113.5107, 23.2196],
+  '廊坊': [116.521, 39.0509],
+  '延安': [109.1052, 36.4252],
+  '张家口': [115.1477, 40.8527],
+  '徐州': [117.5208, 34.3268],
+  '德州': [116.6858, 37.2107],
+  '惠州': [114.6204, 23.1647],
+  '成都': [103.9526, 30.7617],
+  '扬州': [119.4653, 32.8162],
+  '承德': [117.5757, 41.4075],
+  '拉萨': [91.1865, 30.1465],
+  '无锡': [120.3442, 31.5527],
+  '日照': [119.2786, 35.5023],
+  '昆明': [102.9199, 25.4663],
+  '杭州': [119.5313, 29.8773],
+  '枣庄': [117.323, 34.8926],
+  '柳州': [109.3799, 24.9774],
+  '株洲': [113.5327, 27.0319],
+  '武汉': [114.3896, 30.6628],
+  '汕头': [117.1692, 23.3405],
+  '江门': [112.6318, 22.1484],
+  '沈阳': [123.1238, 42.1216],
+  '沧州': [116.8286, 38.2104],
+  '河源': [114.917, 23.9722],
+  '泉州': [118.3228, 25.1147],
+  '泰安': [117.0264, 36.0516],
+  '泰州': [120.0586, 32.5525],
+  '济南': [117.1582, 36.8701],
+  '济宁': [116.8286, 35.3375],
+  '海口': [110.3893, 19.8516],
+  '淄博': [118.0371, 36.6064],
+  '淮安': [118.927, 33.4039],
+  '深圳': [114.5435, 22.5439],
+  '清远': [112.9175, 24.3292],
+  '温州': [120.498, 27.8119],
+  '渭南': [109.7864, 35.0299],
+  '湖州': [119.8608, 30.7782],
+  '湘潭': [112.5439, 27.7075],
+  '滨州': [117.8174, 37.4963],
+  '潍坊': [119.0918, 36.524],
+  '烟台': [120.7397, 37.5128],
+  '玉溪': [101.9312, 23.8898],
+  '珠海': [113.7305, 22.1155],
+  '盐城': [120.2234, 33.5577],
+  '盘锦': [121.9482, 41.0449],
+  '石家庄': [114.4995, 38.1006],
+  '福州': [119.4543, 25.9222],
+  '秦皇岛': [119.2126, 40.0232],
+  '绍兴': [120.564, 29.7565],
+  '聊城': [115.9167, 36.4032],
+  '肇庆': [112.1265, 23.5822],
+  '舟山': [122.2559, 30.2234],
+  '苏州': [120.6519, 31.3989],
+  '莱芜': [117.6526, 36.2714],
+  '菏泽': [115.6201, 35.2057],
+  '营口': [122.4316, 40.4297],
+  '葫芦岛': [120.1575, 40.578],
+  '衡水': [115.8838, 37.7161],
+  '衢州': [118.6853, 28.8666],
+  '西宁': [101.4038, 36.8207],
+  '西安': [109.1162, 34.2004],
+  '贵阳': [106.6992, 26.7682],
+  '连云港': [119.1248, 34.552],
+  '邢台': [114.8071, 37.2821],
+  '邯郸': [114.4775, 36.535],
+  '郑州': [113.4668, 34.6234],
+  '鄂尔多斯': [108.9734, 39.2487],
+  '重庆': [107.7539, 30.1904],
+  '金华': [120.0037, 29.1028],
+  '铜川': [109.0393, 35.1947],
+  '银川': [106.3586, 38.1775],
+  '镇江': [119.4763, 31.9702],
+  '长春': [125.8154, 44.2584],
+  '长沙': [113.0823, 28.2568],
+  '长治': [112.8625, 36.4746],
+  '阳泉': [113.4778, 38.0951],
+  '青岛': [120.4651, 36.3373],
+  '韶关': [113.7964, 24.7028]
+};
+
+var BJData = [
+  [{ name: '北京' }, { name: '上海', value: 95 }],
+  [{ name: '北京' }, { name: '广州', value: 90 }],
+  [{ name: '北京' }, { name: '大连', value: 80 }],
+  [{ name: '北京' }, { name: '南宁', value: 70 }],
+  [{ name: '北京' }, { name: '南昌', value: 60 }],
+  [{ name: '北京' }, { name: '拉萨', value: 50 }],
+  [{ name: '北京' }, { name: '长春', value: 40 }],
+  [{ name: '北京' }, { name: '包头', value: 30 }],
+  [{ name: '北京' }, { name: '重庆', value: 20 }],
+  [{ name: '北京' }, { name: '常州', value: 10 }]
+];
+
+var SHData = [
+  [{ name: '上海' }, { name: '包头', value: 95 }],
+  [{ name: '上海' }, { name: '昆明', value: 90 }],
+  [{ name: '上海' }, { name: '广州', value: 80 }],
+  [{ name: '上海' }, { name: '郑州', value: 70 }],
+  [{ name: '上海' }, { name: '长春', value: 60 }],
+  [{ name: '上海' }, { name: '重庆', value: 50 }],
+  [{ name: '上海' }, { name: '长沙', value: 40 }],
+  [{ name: '上海' }, { name: '北京', value: 30 }],
+  [{ name: '上海' }, { name: '丹东', value: 20 }],
+  [{ name: '上海' }, { name: '大连', value: 10 }]
+];
+
+var GZData = [
+  [{ name: '广州' }, { name: '福州', value: 95 }],
+  [{ name: '广州' }, { name: '太原', value: 90 }],
+  [{ name: '广州' }, { name: '长春', value: 80 }],
+  [{ name: '广州' }, { name: '重庆', value: 70 }],
+  [{ name: '广州' }, { name: '西安', value: 60 }],
+  [{ name: '广州' }, { name: '成都', value: 50 }],
+  [{ name: '广州' }, { name: '常州', value: 40 }],
+  [{ name: '广州' }, { name: '北京', value: 30 }],
+  [{ name: '广州' }, { name: '北海', value: 20 }],
+  [{ name: '广州' }, { name: '海口', value: 10 }]
+];
+
+var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
+
+var convertData = function (data) {
+  var res = [];
+  for (var i = 0; i < data.length; i++) {
+    var dataItem = data[i];
+    var fromCoord = geoCoordMap[dataItem[0].name];
+    var toCoord = geoCoordMap[dataItem[1].name];
+    if (fromCoord && toCoord) {
+      res.push({
+        fromName: dataItem[0].name,
+        toName: dataItem[1].name,
+        coords: [fromCoord, toCoord],
+        value: dataItem[1].value
+      });
+    }
+  }
+  return res;
+};
+
+var color = ['#a6c84c', '#ffa022', '#46bee9'];
+var series = [];
+[['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) {
+  //console.log(item,i);
+  series.push({
+    name: item[0] + ' Top10',
+    type: 'lines',
+    zlevel: 1,
+    effect: {
+      show: true,
+      period: 6,
+      trailLength: 0.7,
+      color: '#fff',
+      symbolSize: 3
+    },
+    lineStyle: {
+      normal: {
+        color: color[i],
+        width: 0,
+        curveness: 0.2
+      }
+    },
+    data: convertData(item[1])
+  },
+    {
+      name: item[0] + ' Top10',
+      type: 'lines',
+      zlevel: 2,
+      symbol: ['none', 'arrow'],
+      symbolSize: 10,
+      effect: {
+        show: true,
+        period: 6,
+        trailLength: 0,
+        symbol: planePath,
+        symbolSize: 15
+      },
+      lineStyle: {
+        normal: {
+          color: color[i],
+          width: 1,
+          opacity: 0.6,
+          curveness: 0.2
+        }
+      },
+      data: convertData(item[1])
+    },
+    {
+      name: item[0] + ' Top10',
+      type: 'effectScatter',
+      coordinateSystem: 'geo',
+      zlevel: 2,
+      rippleEffect: {
+        brushType: 'stroke'
+      },
+      label: {
+        normal: {
+          show: true,
+          position: 'right',
+          formatter: '{b}'
+        }
+      },
+      symbolSize: function (val) {
+        return val[2] / 8;
+      },
+      itemStyle: {
+        normal: {
+          color: color[i]
+        }
+      },
+      data: item[1].map(function (dataItem) {
+        return {
+          name: dataItem[1].name,
+          value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
+        };
+      })
+    });
+});
+export default {
+  data () {
+    return {
+      options: {}
+    }
+  }
+}
+

src/router/routes/routes-file-six.js

@@ -115,6 +115,7 @@ const statisticalAnalysis = {
   component: Layout,
   meta: {
     keepAlive: false,
+    roles: ['demo']
   },
   children: [
     {

src/utils/request.js

@@ -1,7 +1,8 @@
-import axios from 'axios'
-import { MessageBox, Message } from 'element-ui'
-import store from '@/store'
-import { getToken, getUserId } from '@/utils/auth'
+import axios from "axios";
+import { MessageBox, Message } from "element-ui";
+import store from "@/store";
+import router, { resetRouter } from "@/router";
+import { getToken, getUserId, removeToken } from "@/utils/auth";
 // create an axios instance
 // let baseURL
 // if (process.env.NODE_ENV === "development") {
@@ -14,12 +15,12 @@ const service = axios.create({
   //baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
   baseURL: PLATFROM_CONFIG.baseURLCA,
   // withCredentials: true, // send cookies when cross-domain requests
-  timeout: 15000 // request timeout
-})
+  timeout: 15000, // request timeout
+});
 
 // request interceptor
 service.interceptors.request.use(
-  config => {
+  (config) => {
     // do something before request is sent
     // config.headers['Content-Type'] = 'text/plain'
     if (store.getters.token) {
@@ -27,70 +28,95 @@ service.interceptors.request.use(
       // ['X-Token'] is a custom headers key
       // please modify it according to the actual situation
       // config.headers['X-Token'] = getToken()
-      config.headers['token'] = getToken()
+      config.headers["token"] = getToken();
     }
     if (config.data) {
-      config.data['OperatorId'] = getUserId()
+      config.data["OperatorId"] = getUserId();
     }
-    return config
+    return config;
   },
-  error => {
+  (error) => {
     // do something with request error
-    console.log(error) // for debug
-    return Promise.reject(error)
+    console.log(error); // for debug
+    return Promise.reject(error);
   }
-)
+);
 
 // response interceptor
 service.interceptors.response.use(
   /**
    * If you want to get http information such as headers or status
    * Please return  response => response
-  */
+   */
 
   /**
    * Determine the request status by custom code
    * Here is just an example
    * You can also judge the status by HTTP Status Code
    */
-  response => {
-    const res = response.data
+  (response) => {
+    const res = response.data;
 
     // if the custom code is not 20000, it is judged as an error.
-    if (res.code != '0') {
+    if (res.code != "0") {
       Message({
-        message: res.message || 'Error',
-        type: 'error',
-        duration: 5 * 1000
-      })
+        message: res.message || "Error",
+        type: "error",
+        duration: 5 * 1000,
+      });
 
       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
-      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+      if (res.code === 500 || res.code === 50012 || res.code === 50014) {
         // to re-login
-        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
-          confirmButtonText: 'Re-Login',
-          cancelButtonText: 'Cancel',
-          type: 'warning'
-        }).then(() => {
-          store.dispatch('user/resetToken').then(() => {
-            location.reload()
-          })
-        })
+        MessageBox.confirm(
+          "You have been logged out, you can cancel to stay on this page, or log in again",
+          "Confirm logout",
+          {
+            confirmButtonText: "Re-Login",
+            cancelButtonText: "Cancel",
+            type: "warning",
+          }
+        ).then(async () => {
+          sessionStorage.removeItem("userName");
+          store.dispatch("app/toggleOutflag", false);
+          await store.dispatch("user/logout");
+          router.push(`/login`);
+        });
       }
-      return Promise.reject(new Error(res.message || 'Error'))
+      return Promise.reject(new Error(res.message || "Error"));
     } else {
-      return res
+      return res;
     }
   },
-  error => {
-    console.log('err' + error) // for debug
-    Message({
-      message: error.message,
-      type: 'error',
-      duration: 5 * 1000
-    })
-    return Promise.reject(error)
+  (error) => {
+    const des500 = `${error}`.split(" ").includes("500");
+    if (des500) {
+      Message({
+        message: "身份令牌过期或失效，即将重新登录",
+        type: "error",
+        duration: 3 * 1000,
+        onClose: async () => {
+          sessionStorage.clear();
+          removeToken(); // must remove  token  first
+          removeToken("codeToken");
+          removeToken("systemSet");
+          removeToken("userid");
+          store.dispatch("app/toggleOutflag", false);
+          await store.dispatch("user/resetToken");
+          resetRouter();
+          router.push(`/login`);
+          location.reload();
+        },
+      });
+    } else {
+      Message({
+        message: error.message,
+        type: "error",
+        duration: 5 * 1000,
+      });
+    }
+    return Promise.reject(error);
   }
-)
+);
 
-export default service
+export default service;

src/views/statisticalAnalysis/components/index.vue

@@ -4,13 +4,134 @@
     <div class="content">
       <div class="content-list flex-wrap">
         <div class="content-list-box">
-          <div class="content-list-box-bp">dd</div>
+          <div class="content-list-box-bp">
+            <div class="content-list-box-bp-title">运输总量</div>
+            <div class="box-item">
+              <li v-for="(item, index) in orderNum" :key="index" :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }">
+                <span v-if="!isNaN(item)">
+                  <i ref="numberItem">0123456789</i>
+                </span>
+                <span v-else class="comma">{{ item }}</span>
+              </li>
+            </div>
+          </div>
         </div>
         <div class="content-list-box">
-          <div class="content-list-box-bp">dd</div>
+          <div class="content-list-box-bp">
+            <div class="flex">
+              <div class="total-transportation-info">
+                <div class="content-list-box-bp-title">运输总量</div>
+                <div class="total-transportation-info-icons">
+                  <div class="total-transportation-info-icons-list">
+                    <span class="icon1 icon"></span>
+                    <span class="text">运输总数</span>
+                  </div>
+                  <div class="total-transportation-info-icons-list">
+                    <span class="icon2 icon"></span>
+                    <span class="text">托运旅客数</span>
+                  </div>
+                  <div class="total-transportation-info-icons-list">
+                    <span class="icon3 icon"></span>
+                    <span class="text">旅客数</span>
+                  </div>
+                </div>
+              </div>
+              <div class="total-transportation-content">
+                <LineCharts id="total-transportation" :option="totalOption" />
+              </div>
+            </div>
+          </div>
         </div>
         <div class="content-list-box">
-          <div class="content-list-box-bp">dd</div>
+          <div class="content-list-box-bp">
+            <div class="content-list-box-bp-title">统计数据</div>
+            <div class="statistical-data">
+              <el-row>
+                <el-col v-for="(item,index) in statisticalData" :key="index" :span="12">
+                  <div class="flex-wrap">
+                    <div class="icon">
+                      <img :src="item.src" :alt="item.msg">
+                    </div>
+                    <div class="info">
+                      <div class="info-time">
+                        <span class="info-time-xq">{{item.info}}</span>
+                        <span class="info-time-dw">{{item.dw}}</span>
+                      </div>
+                      <div class="info-msg">{{item.msg}}</div>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="content-list mt36 flex-wrap">
+        <div class="content-list-box dbTy">
+          <div class="content-list-box-bp">
+            <div class="total-data flex-wrap">
+              <div class="total-data-info">
+                <div class="total-data-info-list">
+                  <span class="icon icon1"></span>
+                  <span class="text">航班数</span>
+                </div>
+                <div class="total-data-info-list">
+                  <span class="icon icon2"></span>
+                  <span class="text">中转数</span>
+                </div>
+                <div class="total-data-info-list">( 单位：万 )</div>
+              </div>
+              <div class="total-data-charts">
+                <BarCharts id="total-charts" :option="dataOption" />
+              </div>
+            </div>
+          </div>
+          <div class="content-list-box-bp mt36">
+            <div class="content-list-box-bp-title">异常行李</div>
+            <div class="total-data pie-data flex-wrap">
+              <div class="total-data-charts">
+                <PieCharts id="pie-charts" :option="pieOption" />
+              </div>
+              <div class="total-data-info">
+                <div class="total-data-info-list">
+                  <div class="pie-data-list">
+                    <span class="icon icon1"></span>
+                    <span class="text">多收</span>
+                  </div>
+                  <div class="pie-data-list flex-wrap">
+                    <span class="text flex1">数量：33327</span>
+                    <span class="text flex1">占比：40%</span>
+                  </div>
+                </div>
+                <div class="total-data-info-list">
+                  <div class="pie-data-list">
+                    <span class="icon icon2"></span>
+                    <span class="text">少收</span>
+                  </div>
+                  <div class="pie-data-list flex-wrap">
+                    <span class="text flex1">数量：33327</span>
+                    <span class="text flex1">占比：40%</span>
+                  </div>
+                </div>
+                <div class="total-data-info-list">
+                  <div class="pie-data-list">
+                    <span class="icon icon3"></span>
+                    <span class="text">破损</span>
+                  </div>
+                  <div class="pie-data-list flex-wrap">
+                    <span class="text flex1">数量：33327</span>
+                    <span class="text flex1">占比：40%</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="content-list-box boxMap">
+          <MapCharts id="box-map" :option="boxMap" />
+        </div>
+        <div class="content-list-box">
+          <div class="content-list-box-bp-title">统计数据</div>
         </div>
       </div>
     </div>
@@ -18,8 +139,446 @@
 </template>
 
 <script>
+import LineCharts from '@/layout/components/Echarts/commonChartsLine.vue'
+import BarCharts from '@/layout/components/Echarts/commonChartsBar.vue'
+import PieCharts from '@/layout/components/Echarts/commonChartsPie.vue'
+import MapCharts from '@/layout/components/Echarts/commonChartsChinaMap.vue'
+const citydata = [{
+  name: "北京",
+  value: 974
+},
+{
+  name: "天津",
+  value: 532
+},
+{
+  name: "上海",
+  value: 834
+},
+{
+  name: "重庆",
+  value: 683
+},
+{
+  name: "河北",
+  value: 283
+},
+{
+  name: "河南",
+  value: 345
+},
+{
+  name: "云南",
+  value: 272
+},
+{
+  name: "辽宁",
+  value: 194
+},
+{
+  name: "黑龙江",
+  value: 342
+},
+{
+  name: "湖南",
+  value: 389
+},
+{
+  name: "安徽",
+  value: 267
+},
+{
+  name: "山东",
+  value: 675
+},
+{
+  name: "新疆",
+  value: 174
+},
+{
+  name: "江苏",
+  value: 574
+},
+{
+  name: "浙江",
+  value: 278
+},
+{
+  name: "江西",
+  value: 528
+},
+{
+  name: "湖北",
+  value: 144
+},
+{
+  name: "广西",
+  value: 448
+},
+{
+  name: "甘肃",
+  value: 197
+},
+{
+  name: "山西",
+  value: 203
+},
+{
+  name: "内蒙古",
+  value: 373
+},
+{
+  name: "陕西",
+  value: 563
+},
+{
+  name: "吉林",
+  value: 147
+},
+{
+  name: "福建",
+  value: 112
+},
+{
+  name: "贵州",
+  value: 373
+},
+{
+  name: "广东",
+  value: 747
+},
+{
+  name: "青海",
+  value: 38
+},
+{
+  name: "西藏",
+  value: 126
+},
+{
+  name: "四川",
+  value: 215
+},
+{
+  name: "宁夏",
+  value: 172
+},
+{
+  name: "海南",
+  value: 77
+},
+{
+  name: "台湾",
+  value: 837
+},
+{
+  name: "香港",
+  value: 677
+},
+{
+  name: "澳门",
+  value: 43
+},
+{
+  name: "南海诸岛",
+  value: 53
+}]
 export default {
-  name: 'statisticalAnalysisContent'
+  name: 'statisticalAnalysisContent',
+  components: {
+    LineCharts,
+    BarCharts,
+    PieCharts,
+    MapCharts
+  },
+  data () {
+    return {
+      countEnterNum: '4567892111',
+      orderNum: ['1', '2', '3', '4', '5', '1', '1'],
+      statisticalData: [
+        {
+          id: 1,
+          src: require('../../../assets/analysis/ic_time_statistical.png'),
+          info: '28',
+          msg: '平均运输时间',
+          dw: 'min'
+        },
+        {
+          id: 2,
+          src: require('../../../assets/analysis/ic_time_statistical.png'),
+          info: '28',
+          msg: '平均运输时间',
+          dw: 'min'
+        },
+        {
+          id: 3,
+          src: require('../../../assets/analysis/ic_luggage_statistical.png'),
+          info: '0.21',
+          msg: '人均托运',
+          dw: '件/人'
+        },
+        {
+          id: 4,
+          src: require('../../../assets/analysis/ic_change_statistical.png'),
+          info: '176',
+          msg: '中转数',
+          dw: '件'
+        }
+      ],
+      totalOption: {
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['运输总数', '托运旅客数', '旅客数']
+        },
+        grid: {
+          left: '0%',
+          right: '0%',
+          bottom: '0%',
+          top: '5%',
+          containLabel: true
+        },
+        color: ['#F5BB3D', '#73D970', '#6A9DD9'],
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['2021.12', '2022.01', '2022.02', '2022.03', '2022.04', '2022.05'],
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            color: '#fff'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            color: '#fff',
+            formatter: '{value} 万'
+          },
+          splitLine: {
+            lineStyle: {
+              type: 'dashed',
+              color: 'rgba(196,194,225, 0.54)'
+            }
+          }
+        },
+        series: [
+          {
+            name: '运输总数',
+            type: 'line',
+            symbol: 'none',
+            data: [120, 132, 101, 134, 90, 230, 210],
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0, color: 'rgba(125,72,255,0.5)'
+                }, {
+                  offset: 1, color: 'rgba(0,180,255,0.01)'
+                }],
+                global: false
+              }
+            },
+          },
+          {
+            name: '托运旅客数',
+            type: 'line',
+            symbol: 'none',
+            data: [220, 182, 191, 234, 290, 330, 310],
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0, color: 'rgba(125,72,255,0.5)'
+                }, {
+                  offset: 1, color: 'rgba(0,180,255,0.01)'
+                }],
+                global: false
+              }
+            },
+          },
+          {
+            name: '旅客数',
+            type: 'line',
+            symbol: 'none',
+            data: [150, 232, 201, 154, 190, 330, 410],
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0, color: 'rgba(125,72,255,0.5)'
+                }, {
+                  offset: 1, color: 'rgba(0,180,255,0.01)'
+                }],
+                global: false
+              }
+            },
+          }
+        ]
+      },
+      dataOption: {},
+      pieOption: {
+        color: ["#E5983E", "#8249C9 ", "#B03377"],
+        series: [
+          {
+            name: "异常行李",
+            radius: ["40%", "100%"],
+            left: '-5%',
+            top: '10%',
+            right: '10%',
+            bottom: '10%',
+            data: [
+              { value: 1048, key: "roleCount", name: "多收" },
+              { value: 735, key: "defRoleCunt", name: "少收" },
+              { value: 735, key: "unuseRole", name: "破损" },
+            ],
+          },
+        ],
+      },
+      boxMap: {
+        title: [{
+          show: true,
+          text: '区域运输TOP',
+          left: 20,
+          top: 20,
+          textStyle: {
+            color: '#fff'
+          },
+        },],
+        tooltip: {
+          trigger: "item"
+        },
+        legend: {
+          show: false
+        },
+        grid: {
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0
+        },
+        visualMap: {
+          type: 'continuous',
+          min: 0,
+          max: 1000,
+          text: ['高', '低'],
+          seriesIndex: [0, 2],
+          dimension: 0,
+          realtime: false,
+          left: 0,
+          itemWidth: 18,
+          itemHeight: 100,
+          calculable: true,
+          inRange: {
+            color: ['rgba(159,205,253,0.50)', '#60ACFC'],
+            symbolSize: [100, 100]
+          },
+          outOfRange: {
+            color: ['#eeeeee'],
+            symbolSize: [100, 100]
+          },
+        },
+        toolbox: {
+          show: false
+        },
+
+        xAxis: {
+          show: false
+        },
+        yAxis: {
+          show: false
+        },
+
+        series: [{
+          name: "人数",
+          type: "map",
+          mapType: "china",
+          left: '100',
+          width: '40%',
+          roam: 'move',
+          mapValueCalculation: "sum",
+          zoom: 1,
+          selectedMode: false,
+          showLegendSymbol: false,
+          left: '10%',
+          top: '10%',
+          width: '80%',
+          label: {
+            normal: {
+              textStyle: {
+                color: '#666'
+              }
+            },
+            emphasis: {
+              textStyle: {
+                color: '#234EA5'
+              }
+            }
+          },
+          itemStyle: {
+            normal: {
+              areaColor: '#EEEEEE',
+              borderColor: '#FFFFFF'
+            },
+            emphasis: {
+              areaColor: '#E5F39B'
+            }
+          },
+          data: citydata
+        },
+        ]
+      }
+    }
+  },
+  watch: {
+    countEnterNum () {
+      this.getCountEnterNum();
+    }
+  },
+  methods: {
+    getCountEnterNum () {
+      this.$nextTick(() => {
+        this.toOrderNum(this.countEnterNum); // 这里输入数字即可调用
+        this.setNumberTransform();
+      });
+    },
+    toOrderNum (num) {
+      num = num.toString()
+      this.orderNum = num.split('')
+    },
+    setNumberTransform () {
+      const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
+      const numberArr = this.orderNum.filter(item => !isNaN(item))
+      // 结合CSS 对数字字符进行滚动,显示订单数量
+      for (let index = 0; index < numberItems.length; index++) {
+        const elem = numberItems[index]
+        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
+      }
+    },
+  },
+  mounted () {
+    this.getCountEnterNum();
+  },
 }
 </script>
 
@@ -34,11 +593,16 @@ export default {
   .manageTitle {
     color: #fff;
   }
+  .mt36 {
+    margin-top: 36px;
+  }
   .content {
     margin-top: 28px;
+    margin-left: 0;
     &-list {
       &-box {
-        flex: 1;
+        width: 33%;
+        overflow: hidden;
         margin-right: 36px;
         background-image: linear-gradient(
             #fff 2px,
@@ -75,13 +639,258 @@ export default {
         background-size: 10px 100%, 100% 10px;
         &-bp {
           padding: 36px;
+          position: relative;
+          height: 100%;
           border: 1px solid rgba($color: #fff, $alpha: 0.3);
+          &-title {
+            height: 20px;
+            font-size: 20px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #ffffff;
+          }
+          .total-transportation {
+            &-info {
+              width: 100px;
+              margin-right: 30px;
+              &-icons {
+                margin-top: 40px;
+              }
+              &-icons-list {
+                margin-top: 20px;
+                .icon {
+                  width: 14px;
+                  height: 14px;
+                  border-radius: 2px;
+                  display: inline-block;
+                  margin-right: 8px;
+                }
+                .icon1 {
+                  background: #f5bb3d;
+                }
+                .icon2 {
+                  background: #73d970;
+                }
+                .icon3 {
+                  background: #6a9dd9;
+                }
+                .text {
+                  font-size: 14px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #ffffff;
+                }
+              }
+            }
+            &-content {
+              min-height: 200px;
+              flex: 1;
+              position: relative;
+            }
+          }
+          .statistical-data {
+            .el-col {
+              margin-top: 28px;
+              .icon {
+                width: 56px;
+                height: 56px;
+                background: #1e3c6f;
+                border-radius: 50%;
+                margin-right: 24px;
+                img {
+                  max-width: 100%;
+                }
+              }
+              .info {
+                &-time {
+                  &-xq {
+                    font-size: 36px;
+                    font-family: Helvetica;
+                    font-weight: bold;
+                    color: #f7c15a;
+                  }
+                  &-dw {
+                    font-size: 24px;
+                    font-family: DIN;
+                    font-weight: bold;
+                    color: #ffffff;
+                    margin-left: 14px;
+                  }
+                }
+                &-msg {
+                  font-size: 14px;
+                  font-family: Microsoft YaHei;
+                  font-weight: bold;
+                  color: #ffffff;
+                }
+              }
+            }
+          }
+          .total-data {
+            &-info {
+              width: 100px;
+              &-list {
+                font-size: 14px;
+                margin-bottom: 20px;
+                .icon {
+                  display: inline-block;
+                  width: 4px;
+                  height: 14px;
+                  margin-right: 8px;
+                }
+                .icon1 {
+                  background: #2d67e3;
+                }
+                .icon2 {
+                  background: #e9c042;
+                }
+              }
+            }
+            &-charts {
+              flex: 1;
+              position: relative;
+              min-height: 140px;
+            }
+          }
+          .pie-data {
+            margin-top: 24px;
+            .total-data-info {
+              flex: 1;
+            }
+            &-list {
+              font-size: 14px;
+              margin-bottom: 20px;
+              font-weight: bold;
+              .icon {
+                display: inline-block;
+                width: 4px;
+                height: 14px;
+                margin-right: 8px;
+              }
+              .icon1 {
+                background: #e5983e;
+              }
+              .icon2 {
+                background: #8249c9;
+              }
+              .icon3 {
+                background: #b03377;
+              }
+            }
+            .total-data-charts {
+              position: relative;
+              min-height: 140px;
+              overflow: hidden;
+              margin-right: 24px;
+            }
+          }
+          &::after {
+            position: absolute;
+            content: "";
+            width: 11px;
+            height: 11px;
+            background-image: url("../../../assets/analysis/pic_triangle_conner.png");
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            left: 10px;
+            top: 10px;
+          }
         }
         &:last-child {
           margin-right: 0;
         }
       }
+      .dbTy {
+        .content-list-box-bp {
+          height: auto;
+        }
+      }
+    }
+  }
+  .box-item {
+    margin-top: 36px;
+    position: relative;
+    height: 66px;
+    font-size: 18px;
+    line-height: 32px;
+    text-align: center;
+    list-style: none;
+    color: #2d7cff;
+    writing-mode: vertical-lr;
+    text-orientation: upright;
+    /*文字禁止编辑*/
+    -moz-user-select: none; /*火狐*/
+    -webkit-user-select: none; /*webkit浏览器*/
+    -ms-user-select: none; /*IE10*/
+    -khtml-user-select: none; /*早期浏览器*/
+    user-select: none;
+    /* overflow: hidden; */
+    p {
+      line-height: 32px;
+      writing-mode: horizontal-tb !important;
+      text-orientation: none !important;
+      /*文字禁止编辑*/
+      -moz-user-select: none; /*火狐*/
+      -webkit-user-select: none; /*webkit浏览器*/
+      -ms-user-select: none; /*IE10*/
+      -khtml-user-select: none; /*早期浏览器*/
+      user-select: none;
+      margin-top: 5px;
+    }
+  }
+  /* 默认逗号设置 */
+  .mark-item {
+    width: 10px;
+    height: 32px;
+    margin-right: 5px;
+    line-height: 10px;
+    font-size: 18px;
+    position: relative;
+    & > span {
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+    }
+  }
+  /*滚动数字设置*/
+  .number-item {
+    width: 42px;
+    height: 66px;
+    background: #1e3c6f;
+    list-style: none;
+    margin-right: 10px;
+    & > span {
+      position: relative;
+      display: inline-block;
+      margin-right: 10px;
+      width: 100%;
+      height: 100%;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+      overflow: hidden;
+      & > i {
+        font-size: 48px;
+        font-family: DIN;
+        font-weight: bold;
+        color: #ffffff;
+        font-style: normal;
+        position: absolute;
+        top: 11px;
+        left: 50%;
+        transform: translate(-50%, -1%);
+        transition: transform 1s ease-in-out;
+        letter-spacing: 10px;
+      }
     }
   }
+  .number-item:last-child {
+    margin-right: 0;
+  }
+  .boxMap {
+    background-image: none;
+    position: relative;
+  }
 }
 </style>>