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" 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">
        <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 style="height: 70%;" 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 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" />
          </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: [defaultTimeFormat, defaultTimeFormat],
      thrdsItems: ['航司接入数据量排行', '航司行李运力排行', '航司节点覆盖率排行'],
      thrdsIndex: 0,
      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,
      airlineChecks: checkAccess,
      airlinePlot: _.cloneDeep(barOption),
      airlinePlotLoading: false,
      mapOverviewItem: {
        build: 0,
        building: 0,
        not_build: 0
      }
    }
  },
  computed: {
    airlineValue () {
      if (this.thrdsIndex == 0) {
        return '总数据条数'
      } else if (this.thrdsIndex == 1) {
        return '总行李量'
      } else {
        return '基本节点'
      }
    }
  },
  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)
    },
    //航司下拉
    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()
    },
    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 = '总数据条数', flag = false) {
      flag ? this.airlinePlotLoading = true : this.airportAccessLoading = 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('checkAccess') || tag }
        const {
          code,
          returnData
        } = await Query({
          serviceId: flag ? SERVICE_ID.airlineDataId : SERVICE_ID.airportAccessId,
          dataContent: params,
          event: '0',
        })
        if (String(code) !== '0') {
          throw new Error('获取数据失败')
        }
        const ndatas = [...returnData].splice(0, 5)
        const ntargets = []
        const names = []
        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
            })
          })
          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)
      }
      flag ? this.airlinePlotLoading = false : this.airportAccessLoading = false
    },
    //机场行李运力排行
    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: flag ? SERVICE_ID.airlineLuggageId : SERVICE_ID.airportLuggageId,
          dataContent: parmas,
          event: '0',
        })
        if (String(code) !== '0') {
          throw new Error('获取数据失败')
        }
        const ndatas = [...returnData].splice(0, 5)
        const ntargets = []
        const names = []
        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
            })
          })
          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)
      }
      flag ? this.airlinePlotLoading = false : this.airportLuggageLoading = false
    },
    //机场节点覆盖率排行
    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: flag ? SERVICE_ID.airlineNodesId : SERVICE_ID.airportNodesId,
          dataContent: params,
          event: '0',
        })
        if (String(code) !== '0') {
          throw new Error('获取数据失败')
        }
        const ndatas = [...returnData].splice(0, 5)
        const ntargets = []
        const names = []
        const nodes = ['标准内节点', '标准外节点', '基本节点']
        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
            })
          })
          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 {
            this.airportNodes.title.subtext = '单位：个'
            this.airportNodes.series = this.formatBarData(ntargets)
          }
        }
      } catch (error) {
        console.log(error)
      }
      flag ? this.airlinePlotLoading = false : 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) {
          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
        }
      } 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]
        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)
      }
      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) {
          this.mapOverviewItem = ndatas[0]
        }
      } 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) {
          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) {
          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) {
          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) {
          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()
      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;
    }
  }
  .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;
    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: 40px;
      }
    }
  }
}
</style>