添加统计分析接口

src/views/statisticalAnalysis/components/index.vue

@@ -18,8 +18,8 @@
         </div>
         <div class="content-list-box">
           <div class="content-list-box-bp">
-            <div class="flex">
-              <div class="total-transportation-info">
+            <div class="total-transportation-info">
+              <div class="flex">
                 <div class="content-list-box-bp-title">运输总量</div>
                 <div class="total-transportation-info-icons">
                   <div class="total-transportation-info-icons-list">
@@ -30,15 +30,11 @@
                     <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 class="total-transportation-content">
+              <LineCharts id="total-transportation" :option="totalOption" />
             </div>
           </div>
         </div>
@@ -165,6 +161,7 @@ import BarCharts from '@/layout/components/Echarts/commonChartsBar.vue'
 import PieCharts from '@/layout/components/Echarts/commonChartsPie.vue'
 import MapCharts from '@/layout/components/Echarts/commonChartsChinaMap.vue'
 import vueSeamlessScroll from 'vue-seamless-scroll'
+import { Query } from "@/api/dataIntegration"
 const citydata = [{
   name: "北京",
   value: 974
@@ -368,55 +365,62 @@ export default {
   data () {
     return {
       countEnterNum: '4567891',
-      orderNum: ['0', '0', '0', '0', '0', '0', '0'],
+      orderNum: ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0'],
       statisticalData: [
         {
           id: 1,
           src: require('../../../assets/analysis/ic_time_statistical.png'),
           info: '28',
           msg: '平均运输时间',
-          dw: 'min'
+          dw: 'min',
+          key: 'transportation'
         },
         {
           id: 2,
           src: require('../../../assets/analysis/ic_time_statistical.png'),
           info: '28',
-          msg: '平均运输时间',
-          dw: 'min'
+          msg: '平均装机时间',
+          dw: 'min',
+          key: 'installation'
         },
         {
           id: 3,
           src: require('../../../assets/analysis/ic_luggage_statistical.png'),
           info: '0.21',
           msg: '人均托运',
-          dw: '件/人'
+          dw: '件/人',
+          key: 'avgbag'
         },
         {
           id: 4,
           src: require('../../../assets/analysis/ic_change_statistical.png'),
           info: '176',
           msg: '中转数',
-          dw: '件'
+          dw: '件',
+          key: 'transnum'
         }
       ],
       totalOption: {
         tooltip: {
           trigger: 'axis'
         },
-        legend: {
-          data: ['运输总数', '托运旅客数', '旅客数']
-        },
+        // legend: {
+        //   data: ['运输总数', '托运旅客数'],
+        //   show: true,
+        //   top: 0,
+        //   icon: 'roundRect'
+        // },
         grid: {
           left: '0%',
           right: '0%',
           bottom: '0%',
-          top: '5%',
+          top: '15%',
           containLabel: true
         },
         color: ['#F5BB3D', '#73D970', '#6A9DD9'],
         xAxis: {
           type: 'category',
-          boundaryGap: false,
+          boundaryGap: true,
           data: ['2021.12', '2022.01', '2022.02', '2022.03', '2022.04', '2022.05'],
           axisLine: {
             show: true,
@@ -428,14 +432,16 @@ export default {
             show: false
           },
           axisLabel: {
-            color: '#fff'
+            color: '#fff',
           }
         },
         yAxis: {
           type: 'value',
           axisLabel: {
             color: '#fff',
-            formatter: '{value} 万'
+            formatter: function (item) {
+              return (item / 10000) + '万'
+            }
           },
           splitLine: {
             lineStyle: {
@@ -449,6 +455,7 @@ export default {
             name: '运输总数',
             type: 'line',
             symbol: 'none',
+            key: 'bagsnum',
             data: [120, 132, 101, 134, 90, 230, 210],
             areaStyle: {
               color: {
@@ -470,6 +477,7 @@ export default {
             name: '托运旅客数',
             type: 'line',
             symbol: 'none',
+            key: 'passengers',
             data: [220, 182, 191, 234, 290, 330, 310],
             areaStyle: {
               color: {
@@ -487,27 +495,6 @@ export default {
               }
             },
           },
-          {
-            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: {
@@ -1045,7 +1032,101 @@ export default {
       this.getCountEnterNum();
     }
   },
+  created () {
+    this.getDataInit()
+  },
   methods: {
+    //获取运输总量
+    async getOrderNum () {
+      const { code, returnData } = await Query({
+        id: 18012,
+        dataContent: []
+      })
+      if (code == 0) {
+        const { listValues } = returnData
+        this.countEnterNum = listValues[0]['bagsnum']
+      } else {
+        this.countEnterNum = '000000000'
+      }
+    },
+    //获取运输总量-统计图
+    async getOrderNumChart () {
+      const { code, returnData } = await Query({
+        id: 18013,
+        dataContent: []
+      })
+      if (code == 0) {
+        const { listValues } = returnData
+        const [mouth, bagsnum, passengers] = [[], [], []]
+        listValues.forEach(item => {
+          mouth.push(item.month)
+          bagsnum.push(item.bagsnum)
+          passengers.push(item.passengers)
+        })
+        this.totalOption.xAxis.data = mouth
+        this.totalOption.series.map(item => {
+          if (item.key == 'bagsnum') {
+            item.data = bagsnum
+          } else if (item.key == 'passengers') {
+            item.data = passengers
+          }
+        })
+      } else {
+
+      }
+    },
+    //获取统计数据
+    async getStatistical () {
+      const { code, returnData } = await Query({
+        id: 18014,
+        dataContent: []
+      })
+      if (code == 0) {
+        const { listValues } = returnData
+        const { avgbag, transnum } = listValues[0]
+        this.statisticalData.map(item => {
+          if (item.key == 'avgbag') {
+            item.info = avgbag
+          } else if (item.key == 'transnum') {
+            item.info = transnum
+          } else {
+            item.info = '-'
+          }
+        })
+      } else {
+        this.statisticalData.map(item => {
+          item.info = '-'
+        })
+      }
+    },
+    //获取航班数
+    async getFignts () {
+      const { code, returnData } = await Query({
+        id: 18015,
+        dataContent: []
+      })
+      if (code == 0) {
+        const { listValues } = returnData
+      } else {
+
+      }
+    },
+    //获取中转数
+    async getSpeed () {
+      const result = await Query({
+        id: 18016,
+        dataContent: []
+      })
+      console.log(result)
+    },
+    //获取初始数据
+    getDataInit () {
+      this.getOrderNum()
+      this.getOrderNumChart()
+      this.getStatistical()
+      this.getFignts()
+      this.getSpeed()
+    },
     getCountEnterNum () {
       this.$nextTick(() => {
         this.toOrderNum(this.countEnterNum); // 这里输入数字即可调用
@@ -1054,10 +1135,10 @@ export default {
     },
     toOrderNum (num) {
       num = num.toString()
-      if (num.length < 6) {
+      if (num.length < 9) {
         num = '0' + num // 如未满八位数，添加"0"补位
         this.toOrderNum(num) // 递归添加"0"补位
-      } else if (num.length >= 6) {
+      } else if (num.length >= 9) {
         this.orderNum = num.split('') // 将其便变成数据，渲染至滚动数组
       } else {
         // 订单总量数字超过八位显示异常
@@ -1074,9 +1155,6 @@ export default {
       }
     },
   },
-  mounted () {
-    this.getCountEnterNum();
-  },
 }
 </script>
 
@@ -1149,19 +1227,19 @@ export default {
           }
           .total-transportation {
             &-info {
-              width: 100px;
-              margin-right: 30px;
               &-icons {
-                margin-top: 40px;
+                display: flex;
               }
               &-icons-list {
-                margin-top: 20px;
+                margin-right: 20px;
                 .icon {
                   width: 14px;
                   height: 14px;
                   border-radius: 2px;
                   display: inline-block;
                   margin-right: 8px;
+                  position: relative;
+                  top: 2px;
                 }
                 .icon1 {
                   background: #f5bb3d;
@@ -1178,10 +1256,13 @@ export default {
                   font-weight: 400;
                   color: #ffffff;
                 }
+                &:last-child {
+                  margin-right: 0;
+                }
               }
             }
             &-content {
-              min-height: 200px;
+              height: 100%;
               flex: 1;
               position: relative;
             }
@@ -1195,9 +1276,6 @@ export default {
                 background: #1e3c6f;
                 border-radius: 50%;
                 margin-right: 24px;
-                img {
-                  max-width: 100%;
-                }
               }
               .info {
                 &-time {
@@ -1314,7 +1392,8 @@ export default {
     text-align: center;
     list-style: none;
     color: #2d7cff;
-    writing-mode: vertical-lr;
+    display: flex;
+    justify-content: center;
     text-orientation: upright;
     /*文字禁止编辑*/
     -moz-user-select: none; /*火狐*/