BCA/src/views/dashboards/index.vue

<template>
  <div class="dashboard">
    <div class="dashboard_top">
      <div class="dashboard_top_all">
        <select-box ref="checkAlls" defaultValue="全国" @selectChange="selectChange" :options="checkAlls" />
      </div>
      <div class="dashboard_top_title">
        <div class="dashboard_top_title_txt">行李全流程跟踪监管系统</div>
        <div class="shade shade_1"></div>
        <div class="shade shade_2"></div>
        <div class="shade shade_3"></div>
      </div>
      <div class="dashboard_top_times">
        <el-date-picker @change="timesChange" style="margin-left: 10px;margin-top: 8px;" v-model="dateTimes" size="small" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
      </div>
    </div>
    <div class="dashboard_bottom">
      <div class="dashboard_bottom_left">
        <dv-border-box-7 :color="colors" v-loading="airportAccessLoading" element-loading-text="拼命加载中" class="dashboard_bottom_left_box">
          <div class="box_title">机场接入数据量排行</div>
          <div class="box_content">
            <select-box ref="checkAccess" class="box_content_select" size="mini" defaultValue="总数据条数" @selectChange="checkAccessChange" :options="checkAccess" />
            <bar-charts id="airportAccessCharts" :option="airportAccess" />
          </div>
        </dv-border-box-7>
        <dv-border-box-7 :color="colors" v-loading="airportLuggageLoading" element-loading-text="拼命加载中" class="dashboard_bottom_left_box">
          <div class="box_title">机场行李运力排行</div>
          <div class="box_content">
            <select-box ref="checkLuggage" class="box_content_select" size="mini" defaultValue="总行李量" @selectChange="checkLuggageChange" :options="checkLuggage" />
            <bar-charts id="airportLuggageCharts" :option="airportLuggage" />
          </div>
        </dv-border-box-7>
        <dv-border-box-7 :color="colors" v-loading="airportNodesLoading" element-loading-text="拼命加载中" class="dashboard_bottom_left_box">
          <div class="box_title">机场节点覆盖率排行</div>
          <div class="box_content">
            <select-box ref="checkNodes" class="box_content_select" size="mini" defaultValue="基本节点" @selectChange="checkNodesChange" :options="checkNodes" />
            <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>
      </div>
      <div class="dashboard_bottom_center">
        <dv-border-box-7 :color="colors" v-loading="mapOverviewLoading" element-loading-text="拼命加载中" class="dashboard_bottom_center_box1">
          <div class="box_title">机场行李跟踪系统建设总贤</div>
          <div class="mapOverview">
            <div class="mapOverview_list">
              <span class="mapOverview_list_icon icon1"></span>
              <span class="mapOverview_list_txt">已建 {{mapOverviewItem.build}}家</span>
            </div>
            <div class="mapOverview_list">
              <span class="mapOverview_list_icon icon2"></span>
              <span class="mapOverview_list_txt">在建 {{mapOverviewItem.building}}家</span>
            </div>
            <div class="mapOverview_list">
              <span class="mapOverview_list_icon icon3"></span>
              <span class="mapOverview_list_txt">未建 {{mapOverviewItem.not_build}}家</span>
            </div>
          </div>
          <div class="box_content">
            <map-charts id="mapCharts" :option="mapOverview" />
          </div>
        </dv-border-box-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" />
          </div>
        </dv-border-box-7>
      </div>
      <div class="dashboard_bottom_right">
        <dv-border-box-7 :color="colors" v-loading="airportStogLoading" element-loading-text="拼命加载中" class="dashboard_bottom_left_box">
          <div class="box_title">航班量</div>
          <div class="box_content">
            <pie-charts id="stogCharts" :option="airportStog" />
          </div>
        </dv-border-box-7>
        <dv-border-box-7 :color="colors" v-loading="overallAccessLoading" element-loading-text="拼命加载中" class="dashboard_bottom_left_box">
          <div class="box_title">总体接入数据量</div>
          <div class="box_content">
            <pie-charts id="stogChartss" :option="overallAccess" />
          </div>
        </dv-border-box-7>
        <dv-border-box-7 :color="colors" v-loading="luggageStackLoading" element-loading-text="拼命加载中" class="dashboard_bottom_left_box">
          <div class="box_title">行李量</div>
          <div class="box_content">
            <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">
          <div class="box_title">小时航班量峰值</div>
          <div class="box_content">
            <plot-charts id="fligtCharts" :option="fligtPlot" />
          </div>
        </dv-border-box-7>
      </div>
    </div>
  </div>
</template>

<script>
import selectBox from './components/boxs'
import barCharts from './components/echart/commonChartsBar.vue'
import mapCharts from './components/echart/commonChartsChinaMap.vue'
import plotCharts from './components/echart/commonChartscok.vue'
import pieCharts from './components/echart/commonChartsLine.vue'
import stackCharts from './components/echart/commonChartsck.vue'
import { barOption, airportName, colors, checkAlls, checkLuggage, checkNodes, checkAccess, mapOption, pieOption, scatterOption, LuggageOption } from './utils'
import { Query } from '@/api/webApi'
import { parseTime } from '@/utils'
const defaultTime = new Date().getTime() - 24 * 60 * 60 * 1000
const defaultTimeFormat = parseTime(defaultTime, '{y}-{m}-{d}')
export default {
  name: 'DashboardSystem',
  components: { selectBox, barCharts, mapCharts, plotCharts, pieCharts, stackCharts },
  data () {
    return {
      colors: ['#92c1ef'],
      checkAlls: checkAlls,
      checkAccess: checkAccess,
      checkLuggage: checkLuggage,
      checkNodes: checkNodes,
      dateTimes: ['2024-04-01', '2024-04-15'],
      airportAccess: _.cloneDeep(barOption),
      airportAccessLoading: false,
      airportLuggage: _.cloneDeep(barOption),
      airportLuggageLoading: false,
      airportNodes: _.cloneDeep(barOption),
      airportNodesLoading: false,
      mapOverview: _.cloneDeep(mapOption),
      mapOverviewLoading: false,
      scatterPlot: _.cloneDeep(scatterOption),
      scatterPlotLoading: false,
      airportStog: _.cloneDeep(pieOption),
      airportStogLoading: false,
      overallAccess: _.cloneDeep(pieOption),
      overallAccessLoading: false,
      luggageStack: _.cloneDeep(LuggageOption),
      luggageStackLoading: false,
      fligtPlot: _.cloneDeep(scatterOption),
      fligtPlotLoading: false,
      mapOverviewItem: {
        build: 0,
        building: 0,
        not_build: 0
      }
    }
  },
  methods: {
    formatChartsData (series, targets) {
      try {
        const ndatas = [...series]
        if (!ndatas.length) return
        ndatas.forEach((item, index) => {
          item = Object.assign(item, targets[index])
        })
        return ndatas
      } catch (error) {
        console.log(error)
      }
    },
    getChecksValue (name) {
      return this.$refs[name].value
    },
    selectChange (val) {
      if (!val) return
      this.pageInit()
    },
    //机场接入数据量排行下拉
    checkAccessChange (val) {
      if (!val) return
      this.setAirportAccess(val)
    },
    //机场行李运力排行下拉
    checkLuggageChange (val) {
      if (!val) return
      this.setAirportLuggage(val)
    },
    //机场节点覆盖率排行下拉
    checkNodesChange (val) {
      if (!val) return
      this.setAirportNodes(val)
    },
    timesChange (times) {
      if (!times.length) return
      this.pageInit()
    },
    formatBarData (arrs) {
      if (!arrs.length) return
      const ndatas = []
      const narrs = _.cloneDeep(arrs)
      narrs.forEach(item => {
        ndatas.push(item.data)
      })
      const newArray = ndatas.reverse()[0].map((col, i) => ndatas.map(row => row[i]))
      narrs.forEach((item, index) => {
        item.data = newArray[index]
      })
      return narrs
    },
    //机场接入数据排行
    async setAirportAccess (tag = '总数据条数') {
      try {
        this.airportAccessLoading = true
        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 },
          event: '0',
        })
        if (String(code) !== '0') {
          throw new Error('获取数据失败')
        }
        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
          })
        })
        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)
      } catch (error) {
        console.log(error)
      }
      this.airportAccessLoading = false
    },
    //机场接入数据排行
    async setAirportLuggage (tag = '总行李量') {
      this.airportLuggageLoading = true
      try {
        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 },
          event: '0',
        })
        if (String(code) !== '0') {
          throw new Error('获取数据失败')
        }
        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
          })
        })
        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)
      } catch (error) {
        console.log(error)
      }
      this.airportLuggageLoading = false
    },
    //机场节点覆盖率排行
    async setAirportNodes (tag = '基本节点') {
      this.airportNodesLoading = true
      try {
        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 },
          event: '0',
        })
        if (String(code) !== '0') {
          throw new Error('获取数据失败')
        }
        const ndatas = [...returnData].splice(0, 5)
        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
          })
        })
        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'
          }
        })
        this.airportNodes.title.subtext = '单位：个'
        this.airportNodes.series = this.formatBarData(ntargets)
      } catch (error) {
        console.log(error)
      }
      this.airportNodesLoading = false
    },
    //机场节点覆盖率排行
    async setLuggageStack () {
      this.luggageStackLoading = true
      try {
        const {
          code,
          returnData
        } = await Query({
          serviceId: SERVICE_ID.pelLuggageId,
          dataContent: { fd1: this.dateTimes[0], fd2: this.dateTimes[1], area: this.getChecksValue('checkAlls') || '全国' },
          event: '0',
        })
        if (String(code) !== '0') {
          throw new Error('获取数据失败')
        }
        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'
          })
        })
        this.luggageStack.title.subtext = '单位：万件'
        this.luggageStack.series = ntargets
      } catch (error) {
        console.log(error)
      }
      this.luggageStackLoading = false
    },
    formatNumberData (targetNum) {
      return _.floor((Number(targetNum) / 10000), 4)
    },
    //机场行李跟踪系统建设总览
    async setMapOverview () {
      this.mapOverviewLoading = true
      try {
        const {
          code,
          returnData
        } = await Query({
          serviceId: SERVICE_ID.airportTotalId,
          dataContent: { fd1: this.dateTimes[0], fd2: this.dateTimes[1], area: this.getChecksValue('checkAlls') || '全国' },
          event: '0',
        })
        if (String(code) !== '0') {
          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
      } catch (error) {
        console.log(error)
      }
      this.mapOverviewLoading = false
    },
    //机场行李跟踪系统建设总览-建立情况
    async setMapOverviewTotals () {
      try {
        const {
          code,
          returnData
        } = await Query({
          serviceId: SERVICE_ID.pelestablishId,
          dataContent: {},
          event: '0',
        })
        if (String(code) !== '0') {
          throw new Error('获取数据失败')
        }
        const ndatas = [...returnData]
        if (!ndatas.length) return
        this.mapOverviewItem = ndatas[0]
        return
      } catch (error) {
        console.log(error)
      }
    },
    formatPlotData (times, arrs) {
      const ndatas = []
      for (let i = 0; i < times.length; i++) {
        const ctime = times[i]
        for (let j = 0; j < arrs.length; j++) {
          const point = arrs[j][i]
          ndatas.push([ctime, j, point || 0])
        }
      }
      return ndatas
    },
    //小时行李峰值
    async setScatterPlot () {
      this.scatterPlotLoading = true
      try {
        const {
          code,
          returnData
        } = await Query({
          serviceId: SERVICE_ID.hourLuggageId,
          dataContent: { fd1: this.dateTimes[0], fd2: this.dateTimes[1], area: this.getChecksValue('checkAlls') || '全国' },
          event: '0',
        })
        if (String(code) !== '0') {
          throw new Error('获取数据失败')
        }
        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
            }
          });
          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;
            }
          });
        });
        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
      } catch (error) {
        console.log(error)
      }
      this.scatterPlotLoading = false
    },
    //小时航班量峰值
    async setFligtPlot () {
      this.fligtPlotLoading = true
      try {
        const {
          code,
          returnData
        } = await Query({
          serviceId: SERVICE_ID.hourFlightId,
          dataContent: { fd1: this.dateTimes[0], fd2: this.dateTimes[1], area: this.getChecksValue('checkAlls') || '全国' },
          event: '0',
        })
        if (String(code) !== '0') {
          throw new Error('获取数据失败')
        }
        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
            }
          });
          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;
            }
          });
        });
        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
      } catch (error) {
        console.log(error)
      }
      this.fligtPlotLoading = false
    },
    //航班量
    async setAirportStog () {
      this.airportStogLoading = true
      try {
        const {
          code,
          returnData
        } = await Query({
          serviceId: SERVICE_ID.pelFlightId,
          dataContent: { fd1: this.dateTimes[0], fd2: this.dateTimes[1], area: this.getChecksValue('checkAlls') || '全国' },
          event: '0',
        })
        if (String(code) !== '0') {
          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']

      } catch (error) {
        console.log(error)
      }
      this.airportStogLoading = false
    },
    //总体接入数据量
    async setoverallAccess () {
      this.overallAccessLoading = true
      try {
        const {
          code,
          returnData
        } = await Query({
          serviceId: SERVICE_ID.pelTotalId,
          dataContent: { fd1: this.dateTimes[0], fd2: this.dateTimes[1], area: this.getChecksValue('checkAlls') || '全国' },
          event: '0',
        })
        if (String(code) !== '0') {
          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']

      } catch (error) {
        console.log(error)
      }
      this.overallAccessLoading = false
    },
    pageInit () {
      this.setAirportAccess()
      this.setAirportLuggage()
      this.setAirportNodes()
      this.setLuggageStack()
      this.setFligtPlot()
      this.setScatterPlot()
      this.setAirportStog()
      this.setoverallAccess()
      this.setMapOverview()
      this.setMapOverviewTotals()
    }
  },
  mounted () {
    this.pageInit()
  }
}
</script>

<style lang="scss" scoped>
$height: 25%;
$w100: 100%;
$w25: 25%;
$s20: 20px;
$bg: #074fb8;
.dashboard {
  padding: $s20;
  height: calc(100vh - 80px);
  width: $w100;
  background-color: #fff;
  .mapOverview {
    position: absolute;
    left: 7%;
    top: 10%;
    font-size: 14px;
    color: #696969;
    &_list {
      margin-top: 5px;
      &_icon {
        display: inline-block;
        width: 11px;
        height: 11px;
        margin-right: 6px;
      }
      .icon1 {
        background-color: #4fc267;
      }
      .icon2 {
        background-color: #ffcc80;
      }
      .icon3 {
        background-color: #656565;
      }
    }
  }
  .box_title {
    background-color: $bg;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    clip-path: polygon(6% 0, 100% 0%, 97% 100%, -45% 160%);
    position: absolute;
    left: 2px;
    top: 2px;
    z-index: 10;
    line-height: 28px;
    padding: 0 20px;
  }
  .box_content {
    position: relative;
    width: 100%;
    height: 100%;
    &_select {
      position: absolute;
      left: 10px;
      top: 40px;
      z-index: 20;
      width: 90px;
    }
  }
  &_top {
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    &_all {
      width: $w25;
    }
    &_title {
      color: #fff;
      margin: 0 $s20;
      width: calc(50% - 40px);
      display: flex;
      &_txt {
        width: 60%;
        margin-left: 15%;
        background-color: $bg;
        text-align: center;
        font-size: 22px;
        font-weight: 600;
        clip-path: polygon(6% 0, 100% 0%, 97% 100%, 0% 160%);
      }
      .shade {
        width: 30px;
        height: 50px;
        background-color: $bg;
        clip-path: polygon(60% 0, 100% 0%, 40% 100%, 0% 100%);
      }
      .shade_2 {
        background-color: rgba($color: $bg, $alpha: 0.7);
      }
      .shade_3 {
        background-color: rgba($color: $bg, $alpha: 0.3);
      }
    }
    &_times {
      width: $w25;
      display: flex;
    }
  }
  &_bottom {
    overflow-y: scroll;
    overflow-x: hidden;
    height: calc(100% - 50px);
    display: flex;
    justify-content: space-between;
    width: $w100;
    &_left {
      width: $w25;
      &_box {
        height: $height;
        margin-top: $s20;
        position: relative;
      }
    }
    &_right {
      width: $w25;
    }
    &_center {
      margin: 0 $s20;
      width: calc(50% - 40px);
      &_box1 {
        height: calc(75% + 40px);
        margin-top: 20px;
      }
      &_box2 {
        height: 25%;
        margin-top: 20px;
      }
    }
  }
}
</style>