大屏新增数据

src/config/config.js

@@ -197,6 +197,9 @@ window.SERVICE_ID = {
   pelFlightId: 200329, // 航班量
   pelestablishId: 200330, // 建立情况
   airportTotalId: 200331, // 机场行李跟踪系统建设总览
+  airlineDataId: 200332, // 航司接入数据量排行
+  airlineLuggageId: 200333, // 航司行李运力排行
+  airlineNodesId: 200334, // 航司节点覆盖率排行
 }
 
 window.AIRPORT_ID = {

src/views/dashboards/components/boxs/index.vue

@@ -44,8 +44,14 @@ export default {
       this.$emit('selectChange', val)
     }
   },
-  created () {
-    if (this.defaultValue) { this.value = this.defaultValue }
+  watch: {
+    defaultValue: {
+      handler (val) {
+        if (val) { this.value = val }
+      },
+      immediate: true,
+      deep: true
+    }
   }
 }
 </script>

src/views/dashboards/components/echart/commonChartsBar.vue

@@ -56,7 +56,7 @@ export default {
         const objData = _.cloneDeep(this.options)
         _.merge(objData, obj)
         // 生成柱状图
-        this.myChart.setOption(objData)
+        this.myChart.setOption(objData, true)
       },
       deep: true
     }
@@ -86,7 +86,7 @@ export default {
       // 初始化
       this.myChart = this.$echarts.init(chartDom)
       // 生成柱状图
-      this.myChart.setOption(objData)
+      this.myChart.setOption(objData, true)
       // 事件
       this.myChart.on('click', params => {
         this.$emit('getChartData', params)

src/views/dashboards/components/echart/commonChartsck.js

@@ -17,9 +17,9 @@ export default {
         },
         legend: {
           orient: 'vertical',
-            x: 'left', // 图例水平居中
-            y: 'bottom', // 图例垂直居上
-            color:'#ffffff'
+          x: 'left', // 图例水平居中
+          y: 'bottom', // 图例垂直居上
+          color: '#ffffff'
         },
         tooltip: {
           trigger: 'axis',
@@ -30,9 +30,9 @@ export default {
         },
         legend: {
           orient: 'vertical',
-            x: 'left', // 图例水平居中
-            y: 'bottom', // 图例垂直居上
-            color:'#ffffff'
+          x: 'left', // 图例水平居中
+          y: 'bottom', // 图例垂直居上
+          color: '#ffffff'
         },
         grid: {
           left: '30%',
@@ -48,16 +48,6 @@ export default {
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
         },
         series: [
-          {
-            data: [120, 200, 150, 80, 70, 110, 130],
-            type: 'bar',
-            stack: 'total',
-          },
-          {
-            data: [120, 200, 150, 80, 70, 110, 130],
-            type: 'bar',
-            stack: 'total',
-          }
         ]
       }
     }

src/views/dashboards/index.vue

@@ -37,8 +37,14 @@
             <bar-charts id="airportNodeCharts" :option="airportNodes" />
           </div>
         </dv-border-box-7>
-        <dv-border-box-7 :color="colors" class="dashboard_bottom_left_box">
-          <div class="box_title">航司接入数据量排行</div>
+        <dv-border-box-7 :color="colors" v-loading="airlinePlotLoading" class="dashboard_bottom_left_box thrds3">
+          <div class="thrds3_tabs">
+            <div v-for="(item,index) in thrdsItems" :key="index" @click="thrdsChange(index)" :class="thrdsIndex == index ? 'active' : ''" class="thrds3_tabs_list">{{item}}</div>
+          </div>
+          <div class="box_content">
+            <select-box ref="airlinePlot" class="box_content_select" style="top:10px;" size="mini" :defaultValue="airlineValue" @selectChange="checkAirlineChange" :options="airlineChecks" />
+            <bar-charts id="airlinePlotCharts" :option="airlinePlot" />
+          </div>
         </dv-border-box-7>
       </div>
       <div class="dashboard_bottom_center">
@@ -65,7 +71,7 @@
         <dv-border-box-7 :color="colors" v-loading="scatterPlotLoading" element-loading-text="拼命加载中" class="dashboard_bottom_center_box2">
           <div class="box_title">小时行李峰值</div>
           <div class="box_content">
-            <plot-charts id="plotsCharts" :option="scatterPlot" />
+            <plot-charts style="height: 70%;" id="plotsCharts" :option="scatterPlot" />
           </div>
         </dv-border-box-7>
       </div>
@@ -88,7 +94,7 @@
             <stack-charts id="stackCharts" :option="luggageStack" />
           </div>
         </dv-border-box-7>
-        <dv-border-box-7 :color="colors" v-loading="fligtPlotLoading" element-loading-text="拼命加载中" class="dashboard_bottom_left_box">
+        <dv-border-box-7 style="margin-top: 40px;" :color="colors" v-loading="fligtPlotLoading" element-loading-text="拼命加载中" class="dashboard_bottom_left_box">
           <div class="box_title">小时航班量峰值</div>
           <div class="box_content">
             <plot-charts id="fligtCharts" :option="fligtPlot" />
@@ -121,7 +127,9 @@ export default {
       checkAccess: checkAccess,
       checkLuggage: checkLuggage,
       checkNodes: checkNodes,
-      dateTimes: ['2024-04-01', '2024-04-15'],
+      dateTimes: [defaultTimeFormat, defaultTimeFormat],
+      thrdsItems: ['航司接入数据量排行', '航司行李运力排行', '航司节点覆盖率排行'],
+      thrdsIndex: 0,
       airportAccess: _.cloneDeep(barOption),
       airportAccessLoading: false,
       airportLuggage: _.cloneDeep(barOption),
@@ -140,6 +148,9 @@ export default {
       luggageStackLoading: false,
       fligtPlot: _.cloneDeep(scatterOption),
       fligtPlotLoading: false,
+      airlineChecks: checkAccess,
+      airlinePlot: _.cloneDeep(barOption),
+      airlinePlotLoading: false,
       mapOverviewItem: {
         build: 0,
         building: 0,
@@ -147,6 +158,17 @@ export default {
       }
     }
   },
+  computed: {
+    airlineValue () {
+      if (this.thrdsIndex == 0) {
+        return '总数据条数'
+      } else if (this.thrdsIndex == 1) {
+        return '总行李量'
+      } else {
+        return '基本节点'
+      }
+    }
+  },
   methods: {
     formatChartsData (series, targets) {
       try {
@@ -182,6 +204,18 @@ export default {
       if (!val) return
       this.setAirportNodes(val)
     },
+    //航司下拉
+    checkAirlineChange (val) {
+      if (!val) return
+      const index = this.thrdsIndex
+      if (index == 0) {
+        this.setAirportAccess(val, true)
+      } else if (index == 1) {
+        this.setAirportLuggage(val, true)
+      } else {
+        this.setAirportNodes(val, true)
+      }
+    },
     timesChange (times) {
       if (!times.length) return
       this.pageInit()
@@ -200,15 +234,16 @@ export default {
       return narrs
     },
     //机场接入数据排行
-    async setAirportAccess (tag = '总数据条数') {
+    async setAirportAccess (tag = '总数据条数', flag = false) {
+      flag ? this.airlinePlotLoading = true : this.airportAccessLoading = true
       try {
-        this.airportAccessLoading = true
+        const params = flag ? { fd1: this.dateTimes[0], fd2: this.dateTimes[1], order_rules: tag || this.getChecksValue('airlinePlot') } : { fd1: this.dateTimes[0], fd2: this.dateTimes[1], area: this.getChecksValue('checkAlls') || '全国', order_rules: this.getChecksValue('checkAccess') || tag }
         const {
           code,
           returnData
         } = await Query({
-          serviceId: SERVICE_ID.airportAccessId,
-          dataContent: { fd1: this.dateTimes[0], fd2: this.dateTimes[1], area: this.getChecksValue('checkAlls') || '全国', order_rules: this.getChecksValue('checkAccess') || tag },
+          serviceId: flag ? SERVICE_ID.airlineDataId : SERVICE_ID.airportAccessId,
+          dataContent: params,
           event: '0',
         })
         if (String(code) !== '0') {
@@ -217,42 +252,52 @@ export default {
         const ndatas = [...returnData].splice(0, 5)
         const ntargets = []
         const names = []
-        if (!ndatas.length) return
-        ndatas.map(({ airport, bpm_messages, bsm_messages, flight_messages, exception_messages, non_standard_messages_total }) => {
-          const nitems = [this.formatNumberData(bpm_messages), this.formatNumberData(bsm_messages), this.formatNumberData(flight_messages), this.formatNumberData(exception_messages), this.formatNumberData(non_standard_messages_total)]
-          names.push(airport)
-          ntargets.push({
-            emphasis: {
-              focus: 'series'
-            },
-            data: nitems,
-            type: 'bar',
-            barWidth: 10
+        if (ndatas.length) {
+          ndatas.map(({ airport, aircompany, bpm_messages, bsm_messages, flight_messages, exception_messages, non_standard_messages_total }) => {
+            const nitems = [this.formatNumberData(bpm_messages), this.formatNumberData(bsm_messages), this.formatNumberData(flight_messages), this.formatNumberData(exception_messages), this.formatNumberData(non_standard_messages_total)]
+            names.push(airport || aircompany)
+            ntargets.push({
+              emphasis: {
+                focus: 'series'
+              },
+              data: nitems,
+              type: 'bar',
+              barWidth: 10
+            })
           })
-        })
-        this.airportAccess.yAxis.data = names?.reverse()
-        ntargets.map((item, index) => {
-          item.name = airportName[index]
-          item.color = colors[index]
-          if (item.name != '不符合规范数据') item.stack = 'totals'
-        })
-        this.airportAccess.title.subtext = '单位：万条'
-        this.airportAccess.series = this.formatBarData(ntargets)
+          flag ? this.airlinePlot.yAxis.data = names?.reverse() : this.airportAccess.yAxis.data = names?.reverse()
+          ntargets.map((item, index) => {
+            item.name = airportName[index]
+            item.color = colors[index]
+            if (item.name != '不符合规范数据') item.stack = 'totals'
+          })
+          if (flag) {
+            this.airlineChecks = checkAccess
+            this.airlinePlot.title.left = '30%'
+            this.airlinePlot.title.subtext = '单位：万条'
+            this.airlinePlot.series = this.formatBarData(ntargets)
+          } else {
+            this.airportAccess.title.subtext = '单位：万条'
+            this.airportAccess.series = this.formatBarData(ntargets)
+          }
+        }
+
       } catch (error) {
         console.log(error)
       }
-      this.airportAccessLoading = false
+      flag ? this.airlinePlotLoading = false : this.airportAccessLoading = false
     },
-    //机场接入数据排行
-    async setAirportLuggage (tag = '总行李量') {
-      this.airportLuggageLoading = true
+    //机场行李运力排行
+    async setAirportLuggage (tag = '总行李量', flag = false) {
+      flag ? this.airlinePlotLoading = true : this.airportLuggageLoading = true
       try {
+        const parmas = flag ? { fd1: this.dateTimes[0], fd2: this.dateTimes[1], order_rules: tag || this.getChecksValue('airlinePlot') } : { fd1: this.dateTimes[0], fd2: this.dateTimes[1], area: this.getChecksValue('checkAlls') || '全国', order_rules: this.getChecksValue('checkLuggage') || tag }
         const {
           code,
           returnData
         } = await Query({
-          serviceId: SERVICE_ID.airportLuggageId,
-          dataContent: { fd1: this.dateTimes[0], fd2: this.dateTimes[1], area: this.getChecksValue('checkAlls') || '全国', order_rules: this.getChecksValue('checkLuggage') || tag },
+          serviceId: flag ? SERVICE_ID.airlineLuggageId : SERVICE_ID.airportLuggageId,
+          dataContent: parmas,
           event: '0',
         })
         if (String(code) !== '0') {
@@ -261,43 +306,53 @@ export default {
         const ndatas = [...returnData].splice(0, 5)
         const ntargets = []
         const names = []
-        const nluggages = ['离港行李量', '进港行李量', '中转行李量']
-        if (!ndatas.length) return
-        ndatas.map(({ airport, in_bag, out_bag, transfer_bag }) => {
-          const nitems = [this.formatNumberData(out_bag), this.formatNumberData(in_bag), this.formatNumberData(transfer_bag)]
-          names.push(airport)
-          ntargets.push({
-            emphasis: {
-              focus: 'series'
-            },
-            data: nitems,
-            type: 'bar',
-            barWidth: 10
+        const nluggages = flag ? ['总行李量', '中转行李量'] : ['离港行李量', '进港行李量', '中转行李量']
+        if (ndatas.length) {
+          ndatas.map(({ airport, aircompany, in_bag, out_bag, transfer_bag, total_bag }) => {
+            const nitems = flag ? [this.formatNumberData(total_bag), this.formatNumberData(transfer_bag)] : [this.formatNumberData(out_bag), this.formatNumberData(in_bag), this.formatNumberData(transfer_bag)]
+            names.push(airport || aircompany)
+            ntargets.push({
+              emphasis: {
+                focus: 'series'
+              },
+              data: nitems,
+              type: 'bar',
+              barWidth: 10
+            })
           })
-        })
-        this.airportLuggage.yAxis.data = names?.reverse()
-        ntargets.map((item, index) => {
-          item.name = nluggages[index]
-          item.color = colors[index]
-          item.stack = 'totals'
-        })
-        this.airportLuggage.title.subtext = '单位：万件'
-        this.airportLuggage.series = this.formatBarData(ntargets)
+          flag ? this.airlinePlot.yAxis.data = names?.reverse() : this.airportLuggage.yAxis.data = names?.reverse()
+          ntargets.map((item, index) => {
+            item.name = nluggages[index]
+            item.color = colors[index]
+            item.stack = 'totals'
+          })
+          if (flag) {
+            this.airlineChecks = checkLuggage
+            this.airlinePlot.title.left = '30%'
+            this.airlinePlot.title.subtext = '单位：万件'
+            this.airlinePlot.series = this.formatBarData(ntargets)
+          } else {
+            this.airportLuggage.title.subtext = '单位：万件'
+            this.airportLuggage.series = this.formatBarData(ntargets)
+          }
+        }
+
       } catch (error) {
         console.log(error)
       }
-      this.airportLuggageLoading = false
+      flag ? this.airlinePlotLoading = false : this.airportLuggageLoading = false
     },
     //机场节点覆盖率排行
-    async setAirportNodes (tag = '基本节点') {
-      this.airportNodesLoading = true
+    async setAirportNodes (tag = '基本节点', flag = false) {
+      flag ? this.airlinePlotLoading = true : this.airportNodesLoading = true
       try {
+        const params = flag ? { fd1: this.dateTimes[0], fd2: this.dateTimes[1], order_rules: tag || this.getChecksValue('airlinePlot') } : { fd1: this.dateTimes[0], fd2: this.dateTimes[1], area: this.getChecksValue('checkAlls') || '全国', order_rules: this.getChecksValue('checkNodes') || tag }
         const {
           code,
           returnData
         } = await Query({
-          serviceId: SERVICE_ID.airportNodesId,
-          dataContent: { fd1: this.dateTimes[0], fd2: this.dateTimes[1], area: this.getChecksValue('checkAlls') || '全国', order_rules: this.getChecksValue('checkNodes') || tag },
+          serviceId: flag ? SERVICE_ID.airlineNodesId : SERVICE_ID.airportNodesId,
+          dataContent: params,
           event: '0',
         })
         if (String(code) !== '0') {
@@ -307,37 +362,45 @@ export default {
         const ntargets = []
         const names = []
         const nodes = ['标准内节点', '标准外节点', '基本节点']
-        if (!ndatas.length) return
-        ndatas.map(({ airport, basic_nodes, in_standard_nodes, not_in_standard_nodes }) => {
-          const nitems = [in_standard_nodes, not_in_standard_nodes, basic_nodes]
-          names.push(airport)
-          ntargets.push({
-            emphasis: {
-              focus: 'series'
-            },
-            data: nitems,
-            type: 'bar',
-            barWidth: 10
+        if (ndatas.length) {
+          ndatas.map(({ airport, aircompany, basic_nodes, in_standard_nodes, not_in_standard_nodes }) => {
+            const nitems = [in_standard_nodes, not_in_standard_nodes, basic_nodes]
+            names.push(airport || aircompany)
+            ntargets.push({
+              emphasis: {
+                focus: 'series'
+              },
+              data: nitems,
+              type: 'bar',
+              barWidth: 10
+            })
           })
-        })
-        this.airportNodes.yAxis.data = names?.reverse()
-        ntargets.map((item, index) => {
-          item.name = nodes[index]
-          item.color = colors[index]
-          if (item.name != '基本节点') {
-            item.stack = 'totals'
+          flag ? this.airlinePlot.yAxis.data = names?.reverse() : this.airportNodes.yAxis.data = names?.reverse()
+          ntargets.map((item, index) => {
+            item.name = nodes[index]
+            item.color = colors[index]
+            if (item.name != '基本节点') {
+              item.stack = 'totals'
+            } else {
+              item.color = '#b39ddb'
+            }
+          })
+          if (flag) {
+            this.airlineChecks = checkNodes
+            this.airlinePlot.title.left = '30%'
+            this.airlinePlot.title.subtext = '单位：个'
+            this.airlinePlot.series = this.formatBarData(ntargets)
           } else {
-            item.color = '#b39ddb'
+            this.airportNodes.title.subtext = '单位：个'
+            this.airportNodes.series = this.formatBarData(ntargets)
           }
-        })
-        this.airportNodes.title.subtext = '单位：个'
-        this.airportNodes.series = this.formatBarData(ntargets)
+        }
       } catch (error) {
         console.log(error)
       }
-      this.airportNodesLoading = false
+      flag ? this.airlinePlotLoading = false : this.airportNodesLoading = false
     },
-    //机场节点覆盖率排行
+    //机场行李量
     async setLuggageStack () {
       this.luggageStackLoading = true
       try {
@@ -354,19 +417,21 @@ export default {
         }
         const ndatas = [...returnData]
         const ntargets = []
-        if (!ndatas.length) return
-        ndatas.map(({ flightAttr, in_bag, notnormal_bag, out_bag, special_bag, total_bag, transfer_bag }) => {
-          const nitems = [this.formatNumberData(total_bag), this.formatNumberData(out_bag), this.formatNumberData(in_bag), this.formatNumberData(transfer_bag), this.formatNumberData(notnormal_bag), this.formatNumberData(special_bag)]
-          ntargets.push({
-            name: flightAttr,
-            data: nitems,
-            type: 'bar',
-            barWidth: 15,
-            stack: 'total'
+        if (ndatas.length) {
+          this.luggageStack.xAxis.data = ['总量', '离港总量', '进港总量', '中转总量', '不正常行李量', '特殊行李量']
+          ndatas.map(({ flightAttr, in_bag, notnormal_bag, out_bag, special_bag, total_bag, transfer_bag }) => {
+            const nitems = [this.formatNumberData(total_bag), this.formatNumberData(out_bag), this.formatNumberData(in_bag), this.formatNumberData(transfer_bag), this.formatNumberData(notnormal_bag), this.formatNumberData(special_bag)]
+            ntargets.push({
+              name: flightAttr,
+              data: nitems,
+              type: 'bar',
+              barWidth: 15,
+              stack: 'total'
+            })
           })
-        })
-        this.luggageStack.title.subtext = '单位：万件'
-        this.luggageStack.series = ntargets
+          this.luggageStack.title.subtext = '单位：万件'
+          this.luggageStack.series = ntargets
+        }
       } catch (error) {
         console.log(error)
       }
@@ -391,12 +456,71 @@ export default {
           throw new Error('获取数据失败')
         }
         const ndatas = [...returnData]
-        if (!ndatas.length) return
-        ndatas.map(item => {
-          item.name = item.province
-          item.value = item.out_bag
-        })
-        this.mapOverview.series[0].data = ndatas
+        const maps = []
+        const mapItem = new Map()
+        const geoCoordMap = {}
+        if (ndatas.length) {
+          ndatas.map(item => {
+            const nitem = _.cloneDeep(item)
+            item.name = item.airportname
+            item.value = item.out_bag
+            geoCoordMap[item.airportname] = [Number(item.longitude_deg), Number(item.latitude_deg)]
+            if (!mapItem.has(nitem.province)) {
+              mapItem.set(nitem.province, nitem.out_bag)
+            } else {
+              const val = mapItem.get(nitem.province)
+              mapItem.set(nitem.province, nitem.out_bag += val)
+            }
+            // const citem = {
+            //   name: item.province,
+            //   value: item.out_bag
+            // }
+            // maps.push(_.assign(nitem, citem))
+          })
+        }
+        function convertMap (map) {
+          const maps = []
+          for (let [key, val] of map) {
+            const citem = {
+              name: key,
+              value: val
+            }
+            maps.push(citem)
+          }
+          return maps
+        }
+        function convertData (data) {
+          const res = [];
+          for (let i = 0; i < data.length; i++) {
+            const geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value)
+              })
+            }
+          }
+          return res
+        }
+        this.mapOverview.series[0].data = convertMap(mapItem)
+        this.mapOverview.series[1].data = convertData(ndatas)
+        this.mapOverview.tooltip.formatter = function (item) {
+          const { componentSubType } = item
+          if (componentSubType == 'scatter' && item.data) {
+            const { name, value } = item.data
+            const [longitude_deg, latitude_deg, val] = value
+            const nitems = ndatas.filter(item => item.airportname == name && item.longitude_deg == longitude_deg && item.latitude_deg == latitude_deg && item.out_bag == val)
+            if (!nitems.length) return
+            const { airportname, airport, dom_bag, int_bag, out_bag, in_bag, transfer_bag, normal_bag, special_bag, notnormal_bag } = nitems[0]
+            return `<div style="width:400px">
+          <div style="font-size:18px;font-weight:600;">${airportname}</div>
+          <div style='display:flex;margin-top:10px;'><div style='margin-right:20px'>机场三字码:${airport}</div><div>机场简称:${airportname}</div></div>
+          <div style='display:flex;margin-top:10px;'><div style='margin-right:20px'>国内总量:${dom_bag}</div><div>国际总量:${int_bag}</div></div>
+          <div style='display:flex;margin-top:10px;'><div style='margin-right:50px'>离港总量:${out_bag}</div><div style='margin-right:50px'>进港总量:${in_bag}</div><div>中转总量:${transfer_bag}</div></div>
+          <div style='display:flex;margin-top:10px;'><div style='margin-right:50px'>正常行李量:${normal_bag}</div><div style='margin-right:50px'>特殊行李量:${special_bag}</div><div>异常行李量:${notnormal_bag}</div></div>     
+      </div>`
+          }
+        }
       } catch (error) {
         console.log(error)
       }
@@ -417,9 +541,9 @@ export default {
           throw new Error('获取数据失败')
         }
         const ndatas = [...returnData]
-        if (!ndatas.length) return
-        this.mapOverviewItem = ndatas[0]
-        return
+        if (ndatas.length) {
+          this.mapOverviewItem = ndatas[0]
+        }
       } catch (error) {
         console.log(error)
       }
@@ -453,94 +577,95 @@ export default {
         const ndatas = [...returnData]
         const times = []
         const ntargets = []
-        if (!ndatas.length) return
-        ndatas.map(({ arrival, check_in, hour_of_day, loading, on_boarding, security_check, sorting, transit }) => {
-          const nitems = [check_in, security_check, sorting, loading, on_boarding, transit, arrival]
-          times.push(hour_of_day)
-          ntargets.push(nitems)
-        })
-        const hours = [...times]
-        // prettier-ignore
-        const days = [
-          '值机', '安检', '分拣',
-          '装车', '装机', '中转', '到达'
-        ];
-        // prettier-ignore
-        const data = this.formatPlotData(times, ntargets)
-        const title = []
-        const singleAxis = []
-        const series = []
-        function formatDataItem (number) {
-          const nnumber = Number(number)
-          if (nnumber <= 10) {
-            return nnumber
-          }
-          if (nnumber > 10 && nnumber <= 100) {
-            return nnumber / 10
-          }
-          if (nnumber > 100 && nnumber <= 1000) {
-            return nnumber / 100
-          }
-          if (nnumber > 1000 && nnumber <= 10000) {
-            return nnumber / 1000
-          }
-          if (nnumber > 10000 && nnumber <= 100000) {
-            return nnumber / 10000
-          }
-        }
-        days.forEach(function (day, idx) {
-          title.push({
-            textBaseline: 'middle',
-            top: ((idx + 0.5) * 100) / 7 + '%',
-            left: '3%',
-            text: day,
-            textStyle: {
-              color: '#666',
-              fontSize: 14,
-              fontWeight: 300
+        if (ndatas.length) {
+          ndatas.map(({ arrival, check_in, hour_of_day, loading, on_boarding, security_check, sorting, transit }) => {
+            const nitems = [check_in, security_check, sorting, loading, on_boarding, transit, arrival]
+            times.push(hour_of_day)
+            ntargets.push(nitems)
+          })
+          const hours = [...times]
+          // prettier-ignore
+          const days = [
+            '值机', '安检', '分拣',
+            '装车', '装机', '中转', '到达'
+          ];
+          // prettier-ignore
+          const data = this.formatPlotData(times, ntargets)
+          const title = []
+          const singleAxis = []
+          const series = []
+          function formatDataItem (number) {
+            const nnumber = Number(number)
+            if (nnumber <= 10) {
+              return nnumber
             }
-          });
-          singleAxis.push({
-            left: '12%',
-            top: 0,
-            bottom: 120,
-            type: 'category',
-            boundaryGap: false,
-            data: hours,
-            top: (idx * 100) / 7 + 5 + '%',
-            height: 100 / 7 - 10 + '%',
-            axisLabel: {
-              interval: 2
-            },
-            axisTick: {
-              show: false
-            },
-            axisLabel: { show: false },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#ddd'
+            if (nnumber > 10 && nnumber <= 100) {
+              return nnumber / 10
+            }
+            if (nnumber > 100 && nnumber <= 1000) {
+              return nnumber / 100
+            }
+            if (nnumber > 1000 && nnumber <= 10000) {
+              return nnumber / 1000
+            }
+            if (nnumber > 10000 && nnumber <= 100000) {
+              return nnumber / 10000
+            }
+          }
+          days.forEach(function (day, idx) {
+            title.push({
+              textBaseline: 'middle',
+              top: ((idx + 0.5) * 100) / 7 + '%',
+              left: '3%',
+              text: day,
+              textStyle: {
+                color: '#666',
+                fontSize: 14,
+                fontWeight: 300
+              }
+            });
+            singleAxis.push({
+              left: '12%',
+              top: 0,
+              bottom: 120,
+              type: 'category',
+              boundaryGap: false,
+              data: hours,
+              top: (idx * 100) / 7 + 5 + '%',
+              height: 100 / 7 - 10 + '%',
+              axisLabel: {
+                interval: 2
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: { show: false },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: '#ddd'
+                }
+              },
+            });
+            series.push({
+              singleAxisIndex: idx,
+              coordinateSystem: 'singleAxis',
+              type: 'scatter',
+              data: [],
+              symbolSize: function (dataItem) {
+                return dataItem[1] * 4;
               }
-            },
+            });
           });
-          series.push({
-            singleAxisIndex: idx,
-            coordinateSystem: 'singleAxis',
-            type: 'scatter',
-            data: [],
-            symbolSize: function (dataItem) {
-              return dataItem[1] * 4;
+          data.forEach(function (dataItem) {
+            if (series[dataItem[0]]) {
+              series[dataItem[0]].data.push([dataItem[1], formatDataItem(dataItem[2])]);
             }
           });
-        });
-        data.forEach(function (dataItem) {
-          if (series[dataItem[0]]) {
-            series[dataItem[0]].data.push([dataItem[1], formatDataItem(dataItem[2])]);
-          }
-        });
-        this.scatterPlot.title = title
-        this.scatterPlot.singleAxis = singleAxis
-        this.scatterPlot.series = series
+          this.scatterPlot.title = title
+          this.scatterPlot.singleAxis = singleAxis
+          this.scatterPlot.series = series
+        }
       } catch (error) {
         console.log(error)
       }
@@ -564,93 +689,94 @@ export default {
         const ndatas = [...returnData]
         const times = []
         const ntargets = []
-        if (!ndatas.length) return
-        ndatas.map(({ actual_departure_flights, cancelled_flights, delayed_flights, estimated_departure_flights, flights_with_baggage, hour_of_day }) => {
-          const nitems = [estimated_departure_flights, actual_departure_flights, delayed_flights, cancelled_flights, flights_with_baggage]
-          times.push(hour_of_day)
-          ntargets.push(nitems)
-        })
-        const hours = [...times]
-        // prettier-ignore
-        const days = [
-          '预计起飞', '实际起飞', '延误',
-          '取消', '有行李'];
-        // prettier-ignore
-        const data = this.formatPlotData(times, ntargets)
-        const title = []
-        const singleAxis = []
-        const series = []
-        function formatDataItem (number) {
-          const nnumber = Number(number)
-          if (nnumber <= 10) {
-            return nnumber
-          }
-          if (nnumber > 10 && nnumber <= 100) {
-            return nnumber / 10
-          }
-          if (nnumber > 100 && nnumber <= 1000) {
-            return nnumber / 100
-          }
-          if (nnumber > 1000 && nnumber <= 10000) {
-            return nnumber / 1000
-          }
-          if (nnumber > 10000 && nnumber <= 100000) {
-            return nnumber / 10000
-          }
-        }
-        days.forEach(function (day, idx) {
-          title.push({
-            textBaseline: 'middle',
-            top: ((idx + 0.5) * 100) / 7 + '%',
-            left: '3%',
-            text: day,
-            textStyle: {
-              color: '#666',
-              fontSize: 14,
-              fontWeight: 300
+        if (ndatas.length) {
+          ndatas.map(({ actual_departure_flights, cancelled_flights, delayed_flights, estimated_departure_flights, flights_with_baggage, hour_of_day }) => {
+            const nitems = [estimated_departure_flights, actual_departure_flights, delayed_flights, cancelled_flights, flights_with_baggage]
+            times.push(hour_of_day)
+            ntargets.push(nitems)
+          })
+          const hours = [...times]
+          // prettier-ignore
+          const days = [
+            '预计起飞', '实际起飞', '延误',
+            '取消', '有行李'];
+          // prettier-ignore
+          const data = this.formatPlotData(times, ntargets)
+          const title = []
+          const singleAxis = []
+          const series = []
+          function formatDataItem (number) {
+            const nnumber = Number(number)
+            if (nnumber <= 10) {
+              return nnumber
             }
-          });
-          singleAxis.push({
-            left: '12%',
-            top: 0,
-            bottom: 120,
-            type: 'category',
-            boundaryGap: false,
-            data: hours,
-            top: (idx * 100) / 7 + 5 + '%',
-            height: 100 / 7 - 10 + '%',
-            axisLabel: {
-              interval: 2
-            },
-            axisTick: {
-              show: false
-            },
-            axisLabel: { show: false },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#ddd'
+            if (nnumber > 10 && nnumber <= 100) {
+              return nnumber / 10
+            }
+            if (nnumber > 100 && nnumber <= 1000) {
+              return nnumber / 100
+            }
+            if (nnumber > 1000 && nnumber <= 10000) {
+              return nnumber / 1000
+            }
+            if (nnumber > 10000 && nnumber <= 100000) {
+              return nnumber / 10000
+            }
+          }
+          days.forEach(function (day, idx) {
+            title.push({
+              textBaseline: 'middle',
+              top: ((idx + 0.5) * 100) / 7 + '%',
+              left: '3%',
+              text: day,
+              textStyle: {
+                color: '#666',
+                fontSize: 14,
+                fontWeight: 300
+              }
+            });
+            singleAxis.push({
+              left: '12%',
+              top: 0,
+              bottom: 120,
+              type: 'category',
+              boundaryGap: false,
+              data: hours,
+              top: (idx * 100) / 7 + 5 + '%',
+              height: 100 / 7 - 10 + '%',
+              axisLabel: {
+                interval: 2
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: { show: false },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: '#ddd'
+                }
+              },
+            });
+            series.push({
+              singleAxisIndex: idx,
+              coordinateSystem: 'singleAxis',
+              type: 'scatter',
+              data: [],
+              symbolSize: function (dataItem) {
+                return dataItem[1] * 4;
               }
-            },
+            });
           });
-          series.push({
-            singleAxisIndex: idx,
-            coordinateSystem: 'singleAxis',
-            type: 'scatter',
-            data: [],
-            symbolSize: function (dataItem) {
-              return dataItem[1] * 4;
+          data.forEach(function (dataItem) {
+            if (series[dataItem[0]]) {
+              series[dataItem[0]].data.push([dataItem[1], formatDataItem(dataItem[2])]);
             }
           });
-        });
-        data.forEach(function (dataItem) {
-          if (series[dataItem[0]]) {
-            series[dataItem[0]].data.push([dataItem[1], formatDataItem(dataItem[2])]);
-          }
-        });
-        this.fligtPlot.title = title
-        this.fligtPlot.singleAxis = singleAxis
-        this.fligtPlot.series = series
+          this.fligtPlot.title = title
+          this.fligtPlot.singleAxis = singleAxis
+          this.fligtPlot.series = series
+        }
       } catch (error) {
         console.log(error)
       }
@@ -672,17 +798,18 @@ export default {
           throw new Error('获取数据失败')
         }
         const ndatas = [...returnData]
-        if (!ndatas.length) return
-        const { canfly, dlyfly, domfly, havebagfly, intfly, nohavebagfly, norfly, totalfly } = ndatas[0]
-        this.airportStog.legend.data = ['国内航班总量', '国际航班总量', '正常航班量', '延误航班量', '取消航班量', '有行李航班量', '无行李航班量']
-        this.airportStog.series[0].data = [{ name: '无行李航班量', value: nohavebagfly }, { name: '有行李航班量', value: havebagfly }]
-        this.airportStog.series[0].color = ['#660066', '#993399']
-        this.airportStog.series[1].data = [{ name: '正常航班量', value: norfly }, { name: '延误航班量', value: dlyfly }, { name: '取消航班量', value: canfly }]
-        this.airportStog.series[1].color = ['#6666ff', '#3333ff', '#0000ff']
-        this.airportStog.series[2].data = [{ name: '国内航班总量', value: domfly }, { name: '国际航班总量', value: intfly }]
-        this.airportStog.series[2].color = ['#00cc33', '#33ff66']
-        this.airportStog.series[3].data = [{ name: '航班总量', value: totalfly }]
-        this.airportStog.series[3].color = ['#fff']
+        if (ndatas.length) {
+          const { canfly, dlyfly, domfly, havebagfly, intfly, nohavebagfly, norfly, totalfly } = ndatas[0]
+          this.airportStog.legend.data = ['国内航班总量', '国际航班总量', '正常航班量', '延误航班量', '取消航班量', '有行李航班量', '无行李航班量']
+          this.airportStog.series[0].data = [{ name: '无行李航班量', value: nohavebagfly }, { name: '有行李航班量', value: havebagfly }]
+          this.airportStog.series[0].color = ['#660066', '#993399']
+          this.airportStog.series[1].data = [{ name: '正常航班量', value: norfly }, { name: '延误航班量', value: dlyfly }, { name: '取消航班量', value: canfly }]
+          this.airportStog.series[1].color = ['#6666ff', '#3333ff', '#0000ff']
+          this.airportStog.series[2].data = [{ name: '国内航班总量', value: domfly }, { name: '国际航班总量', value: intfly }]
+          this.airportStog.series[2].color = ['#00cc33', '#33ff66']
+          this.airportStog.series[3].data = [{ name: '航班总量', value: totalfly }]
+          this.airportStog.series[3].color = ['#fff']
+        }
 
       } catch (error) {
         console.log(error)
@@ -705,27 +832,40 @@ export default {
           throw new Error('获取数据失败')
         }
         const ndatas = [...returnData]
-        if (!ndatas.length) return
-        const { bpm_messages, bsm_messages, flight_messages, total_messages, exception_messages, non_standard_messages_total, standard_messages_total } = ndatas[0]
-        this.overallAccess.legend.data = ['BPM', 'BSM', '航班数据', '异常行李数据', '不符合规范数据', '符合规范数据']
-        this.overallAccess.series[0].data = [{ name: '不符合规范数据', value: non_standard_messages_total }, { name: '符合规范数据', value: standard_messages_total }]
-        this.overallAccess.series[0].color = ['#660066', '#993399']
-        this.overallAccess.series[1].data = [{ name: 'BPM', value: bpm_messages }, { name: 'BSM', value: bsm_messages }, { name: '航班数据', value: flight_messages }, { name: '异常行李数据', value: exception_messages }]
-        this.overallAccess.series[1].color = ['#0000ff', '#6666ff', '#3333ff', '#000066']
-        this.overallAccess.series[2].data = [{ name: '', value: 0 }]
-        this.overallAccess.series[2].color = ['#fff']
-        this.overallAccess.series[3].data = [{ name: '数据总量', value: total_messages }]
-        this.overallAccess.series[3].color = ['#fff']
+        if (ndatas.length) {
+          const { bpm_messages, bsm_messages, flight_messages, total_messages, exception_messages, non_standard_messages_total, standard_messages_total } = ndatas[0]
+          this.overallAccess.legend.data = ['BPM', 'BSM', '航班数据', '异常行李数据', '不符合规范数据', '符合规范数据']
+          this.overallAccess.series[0].data = [{ name: '不符合规范数据', value: non_standard_messages_total }, { name: '符合规范数据', value: standard_messages_total }]
+          this.overallAccess.series[0].color = ['#660066', '#993399']
+          this.overallAccess.series[1].data = [{ name: 'BPM', value: bpm_messages }, { name: 'BSM', value: bsm_messages }, { name: '航班数据', value: flight_messages }, { name: '异常行李数据', value: exception_messages }]
+          this.overallAccess.series[1].color = ['#0000ff', '#6666ff', '#3333ff', '#000066']
+          this.overallAccess.series[2].data = [{ name: '', value: 0 }]
+          this.overallAccess.series[2].color = ['#fff']
+          this.overallAccess.series[3].data = [{ name: '数据总量', value: total_messages }]
+          this.overallAccess.series[3].color = ['#fff']
+        }
 
       } catch (error) {
         console.log(error)
       }
       this.overallAccessLoading = false
     },
+    //航司数据切换
+    thrdsChange (index) {
+      this.thrdsIndex = index
+      if (index == 0) {
+        this.setAirportAccess('总条数数据', true)
+      } else if (index == 1) {
+        this.setAirportLuggage('总行李量', true)
+      } else {
+        this.setAirportNodes('基本节点', true)
+      }
+    },
     pageInit () {
       this.setAirportAccess()
       this.setAirportLuggage()
       this.setAirportNodes()
+      this.setAirportAccess('总条数数据', true)
       this.setLuggageStack()
       this.setFligtPlot()
       this.setScatterPlot()
@@ -802,6 +942,33 @@ $bg: #074fb8;
       width: 90px;
     }
   }
+  .thrds3 {
+    margin-top: 40px;
+    &_tabs {
+      position: absolute;
+      left: 0;
+      top: -31px;
+      line-height: 30px;
+      z-index: 10;
+      width: 100%;
+      display: flex;
+      font-size: 12px;
+      &_list {
+        background-color: #e2e2e2;
+        padding: 0 8px;
+        margin-right: 3px;
+        border-top-left-radius: 5px;
+        cursor: pointer;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+      .active {
+        background-color: #074fb8;
+        color: #fff;
+      }
+    }
+  }
   &_top {
     line-height: 50px;
     display: flex;
@@ -868,7 +1035,7 @@ $bg: #074fb8;
       }
       &_box2 {
         height: 25%;
-        margin-top: 20px;
+        margin-top: 40px;
       }
     }
   }

src/views/dashboards/utils/index.js

@@ -226,44 +226,87 @@ const pieOption = {
 const mapOption = {
   tooltip: {
     trigger: 'item',
-    formatter: function (item) {
-      if (item.data) {
-        const { airportname, airport, dom_bag, int_bag, out_bag, in_bag, transfer_bag, normal_bag, special_bag, notnormal_bag } = item.data
-        return `<div style="width:400px">
-          <div style="font-size:18px;font-weight:600;">${airportname}</div>
-          <div style='display:flex;margin-top:10px;'><div style='margin-right:20px'>机场三字码:${airport}</div><div>机场简称:${airportname}</div></div>
-          <div style='display:flex;margin-top:10px;'><div style='margin-right:20px'>国内总量:${dom_bag}</div><div>国际总量:${int_bag}</div></div>
-          <div style='display:flex;margin-top:10px;'><div style='margin-right:50px'>离港总量:${out_bag}</div><div style='margin-right:50px'>进港总量:${in_bag}</div><div>中转总量:${transfer_bag}</div></div>
-          <div style='display:flex;margin-top:10px;'><div style='margin-right:50px'>正常行李量:${normal_bag}</div><div style='margin-right:50px'>特殊行李量:${special_bag}</div><div>异常行李量:${notnormal_bag}</div></div>     
-      </div>`
+  },
+  visualMap: [
+    {
+      min: 0,
+      max: 25000,
+      seriesIndex: 1,
+      left: '2.5px',
+      bottom: '18px',
+      color: ['#ffcc80'],
+    },
+    {
+      min: 0,
+      max: 25000,
+      left: 'left',
+      top: 'bottom',
+      text: ['高', '低'],
+      color: ['#164190', '#a6c2f2'],
+      seriesIndex: 0,
+      calculable: true
+    },
+  ],
+  geo: {
+    map: 'china',
+    show: true,
+    roam: false,
+    label: {
+      emphasis: {
+        show: false
       }
     },
-  },
-  visualMap: {
-    min: 0,
-    max: 25000,
-    left: 'left',
-    top: 'bottom',
-    text: ['高', '低'],
-    color: ['#164190', '#a6c2f2'],
-    calculable: true
+    itemStyle: {
+      normal: {
+        areaColor: '#091632',
+        borderColor: '#1773c3',
+        shadowColor: '#1773c3',
+        shadowBlur: 20
+      }
+    }
   },
   series: [
     {
-      name: '已建',
       type: 'map',
-      mapType: 'china',
+      map: 'china',
+      geoIndex: 1,
       roam: false,
-      color: '#4fc267',
+      aspectScale: 0.75, //长宽比
+      showLegendSymbol: true, // 存在legend时显示
       label: {
         normal: {
-          show: true
+          show: false,
         },
         emphasis: {
-          show: true
+          show: false,
+          textStyle: {
+            color: '#fff'
+          }
         }
       },
-      data: []
+      itemStyle: {
+        normal: {
+          areaColor: '#031525',
+          borderColor: '#3B5077',
+          borderWidth: 1
+        },
+        emphasis: {
+          areaColor: '#0f2c70'
+        }
+      },
+      data: [
+      ]
+    },
+    {
+      name: '机场',
+      type: 'scatter',
+      coordinateSystem: 'geo',
+      data: [],
+      itemStyle: {
+        normal: {
+          color: '#ddb926'
+        }
+      }
     },
   ]
 };
@@ -311,7 +354,6 @@ const LuggageOption = {
   },
   xAxis: {
     type: 'category',
-    data: ['总量', '离港总量', '进港总量', '中转总量', '不正常行李量', '特殊行李量'],
     axisTick: {
       show: false,
     },
@@ -348,22 +390,7 @@ const LuggageOption = {
     type: 'value',
   },
   color: ['#3a79e3', '#ffcc80'],
-  series: [
-    {
-      name: '国内',
-      barWidth: 20,
-      data: [120, 200, 150, 80, 70, 110],
-      type: 'bar',
-      stack: 'total',
-      z: "-1",
-    },
-    {
-      name: '国际',
-      barWidth: 20,
-      data: [120, 200, 150, 80, 70, 110],
-      type: 'bar',
-      stack: 'total',
-    }]
+  series: []
 }
 
 export { airportName, colors, checkAlls, checkLuggage, checkNodes, checkAccess, barOption, pieOption, mapOption, scatterOption, LuggageOption }