<template>
  <div
    id="fullDom"
    :class="value == 1 ? 'isWhite' : 'isBlack'"
  >
    <div class="statisticalAnalysisContent">
      <div class="flex">
        <div class="manageTitle">统计分析</div>
        <div class="manageBtns">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0"
            title="切换主题"
            @change="changeZt"
          >
          </el-switch>
          <span
            title="全屏"
            @click="fullScreen"
            class="el-icon-full-screen iconfull"
          ></span>
        </div>
      </div>
      <div class="content">
        <div class="content-list flex-wrap">
          <div class="content-list-box">
            <div class="content-list-box-bp">
              <div class="content-list-box-bp-title">运输总量</div>
              <div class="box-item">
                <li
                  v-for="(item, index) in orderNum"
                  :key="index"
                  :class="{
                    'number-item': !isNaN(item),
                    'mark-item': isNaN(item),
                  }"
                >
                  <span v-if="!isNaN(item)">
                    <i ref="numberItem">0123456789</i>
                  </span>
                  <span
                    v-else
                    class="comma"
                    >{{ item }}</span
                  >
                </li>
              </div>
            </div>
          </div>
          <div class="content-list-box">
            <div class="content-list-box-bp">
              <div class="total-transportation-info">
                <div class="flex">
                  <div class="content-list-box-bp-title">运输总量</div>
                  <div class="total-transportation-info-icons">
                    <div class="total-transportation-info-icons-list">
                      <span class="icon1 icon"></span>
                      <span class="text">运输总数</span>
                    </div>
                    <div class="total-transportation-info-icons-list">
                      <span class="icon2 icon"></span>
                      <span class="text">托运旅客数</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="total-transportation-content">
                <LineCharts
                  id="total-transportation"
                  :option="totalOption"
                />
              </div>
            </div>
          </div>
          <div class="content-list-box">
            <div class="content-list-box-bp">
              <div class="content-list-box-bp-title">统计数据</div>
              <div class="statistical-data">
                <el-row>
                  <el-col
                    v-for="(item, index) in statisticalData"
                    :key="index"
                    :span="12"
                  >
                    <div class="flex-wrap">
                      <div class="icon">
                        <img
                          :src="item.src"
                          :alt="item.msg"
                        />
                      </div>
                      <div class="info">
                        <div class="info-time">
                          <el-tooltip
                            :content="String(item.info)"
                            :disabled="
                              item.key !== 'transnum' || item.info < 10000
                            "
                          >
                            <span class="info-time-xq">{{
                              item.key === 'transnum' && item.info >= 10000
                                ? `${Math.floor(item.info / 10000)}万`
                                : item.info
                            }}</span>
                          </el-tooltip>
                          <span class="info-time-dw">{{ item.dw }}</span>
                        </div>
                        <div class="info-msg">{{ item.msg }}</div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
        <div class="content-list mt36 flex-wrap">
          <div class="content-list-box dbTy">
            <div class="content-list-box-bp">
              <div class="total-data flex-wrap">
                <div class="total-data-info">
                  <div class="total-data-info-list">
                    <span class="icon icon1"></span>
                    <span class="text">航班数</span>
                  </div>
                  <div class="total-data-info-list">
                    <span class="icon icon2"></span>
                    <span class="text">中转数</span>
                  </div>
                  <div class="total-data-info-list">( 单位：万 )</div>
                </div>
                <div class="total-data-charts">
                  <BarCharts
                    id="total-charts"
                    :option="dataOption"
                  />
                </div>
              </div>
            </div>
            <div class="content-list-box-bp mt36">
              <div class="content-list-box-bp-title">异常行李</div>
              <div class="total-data pie-data flex-wrap">
                <div class="total-data-charts">
                  <PieCharts
                    id="pie-charts"
                    :option="pieOption"
                  />
                </div>
                <div class="total-data-info">
                  <div
                    v-for="(item, index) in baggageData"
                    :key="index"
                    class="total-data-info-list"
                  >
                    <div class="pie-data-list">
                      <span
                        :class="'icon' + (index + 1)"
                        class="icon"
                      ></span>
                      <span class="text">{{ item.name }}</span>
                    </div>
                    <div class="pie-data-list flex-wrap">
                      <span class="text flex1">数量：{{ item.num }}</span>
                      <span class="text flex1">占比：{{ item.pag }}%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="content-list-box boxMap">
            <MapCharts
              id="box-map"
              :option="boxMap"
            />
            <div class="boxMap-box flex-wrap">
              <div class="boxMap-pie domestic">
                <PieCharts
                  id="domestic"
                  :option="domesticOption"
                />
              </div>
              <div class="boxMap-pie international">
                <PieCharts
                  id="international"
                  :option="internationalOption"
                />
              </div>
            </div>
          </div>
          <div class="content-list-box">
            <div class="content-list-box-bp">
              <div class="content-list-box-bp-title">航站运输排行</div>
              <div class="terminal-transportation mt36">
                <vue-seamless-scroll
                  class="scrollTable"
                  :class-option="defaultOption"
                >
                  <div
                    class="terminal-transportation-list flex"
                    v-for="(item, index) in terminalData"
                    :key="index"
                  >
                    <div class="name">{{ item.name }}</div>
                    <div class="progress">
                      <el-progress
                        :percentage="item.percentage"
                        :color="customColor"
                      ></el-progress>
                    </div>
                    <div class="num">{{ item.num }}</div>
                  </div>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LineCharts from '@/layout/components/Echarts/commonChartsLine.vue'
import BarCharts from '@/layout/components/Echarts/commonChartsBar.vue'
import PieCharts from '@/layout/components/Echarts/commonChartsPie.vue'
import MapCharts from '@/layout/components/Echarts/commonChartsChinaMap.vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
import { TempQuery } from '@/api/temp'
const top = 0
const bottom = 0
export default {
  name: 'statisticalAnalysisContent',
  components: {
    LineCharts,
    BarCharts,
    PieCharts,
    MapCharts,
    vueSeamlessScroll,
  },
  data() {
    return {
      value: '1',
      isFull: false,
      countEnterNum: '4567891',
      orderNum: ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0'],
      statisticalData: [
        {
          id: 1,
          src: require('../../../assets/analysis/ic_time_statistical.png'),
          info: '28',
          msg: '平均运输时间',
          dw: 'min',
          key: 'transportation',
        },
        {
          id: 2,
          src: require('../../../assets/analysis/ic_time_statistical.png'),
          info: '28',
          msg: '平均装机时间',
          dw: 'min',
          key: 'installation',
        },
        {
          id: 3,
          src: require('../../../assets/analysis/ic_luggage_statistical.png'),
          info: '0.21',
          msg: '人均托运',
          dw: '件/人',
          key: 'avgbag',
        },
        {
          id: 4,
          src: require('../../../assets/analysis/ic_change_statistical.png'),
          info: '176',
          msg: '中转数',
          dw: '件',
          key: 'transnum',
        },
      ],
      totalOption: {
        tooltip: {
          trigger: 'axis',
        },
        // legend: {
        //   data: ['运输总数', '托运旅客数'],
        //   show: true,
        //   top: 0,
        //   icon: 'roundRect'
        // },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '0%',
          top: '15%',
          containLabel: true,
        },
        color: ['#F5BB3D', '#73D970', '#6A9DD9'],
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: [
            '2021.12',
            '2022.01',
            '2022.02',
            '2022.03',
            '2022.04',
            '2022.05',
          ],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#000',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#000',
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#000',
            formatter: function (item) {
              return item / 10000 + '万'
            },
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(196,194,225, 0.54)',
            },
          },
        },
        series: [
          {
            name: '运输总数',
            type: 'line',
            symbol: 'none',
            key: 'bagsnum',
            data: [120, 132, 101, 134, 90, 230, 210],
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(125,72,255,0.5)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,180,255,0.01)',
                  },
                ],
                global: false,
              },
            },
          },
          {
            name: '托运旅客数',
            type: 'line',
            symbol: 'none',
            key: 'passengers',
            data: [220, 182, 191, 234, 290, 330, 310],
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(125,72,255,0.5)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,180,255,0.01)',
                  },
                ],
                global: false,
              },
            },
          },
        ],
      },
      dataOption: {
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: [
          {
            left: '10%',
            width: '40%',
            containLabel: true,
            bottom,
          },
          {
            left: '8%',
            width: '0%',
            bottom: bottom + 16,
          },
          {
            right: '10%',
            width: '40%',
            containLabel: true,
            bottom,
          },
        ].map(item =>
          _.merge(
            {
              top,
            },
            item
          )
        ),
        xAxis: [
          {
            type: 'value',
            inverse: true,
            axisLabel: {
              color: '#000',
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#000',
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
          {
            gridIndex: 1,
            show: true,
          },
          {
            gridIndex: 2,
            type: 'value',
            axisLabel: {
              color: '#000',
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#000',
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ].map(item =>
          _.merge(item, {
            axisLabel: {
              color: '#000',
              margin: 10,
              formatter: function (item) {
                return item / 10000
              },
            },
            splitLine: {
              lineStyle: {
                color: '#E0E0E0',
                type: 'dashed',
              },
            },
          })
        ),
        yAxis: [
          {
            position: 'right',
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: true,
            },
          },
          {
            gridIndex: 1,
            position: 'center',
            axisLabel: {
              align: 'center',
              padding: [8, 0, 0, 0],
              fontSize: 12,
              color: `#000`,
            },
            axisLine: {
              show: false,
            },
          },
          {
            gridIndex: 2,
            position: 'left',
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: true,
            },
          },
        ].map(item => {
          return _.merge(item, {
            type: 'category',
            inverse: false,
            axisLine: {
              lineStyle: {
                color: '#E0E0E0',
              },
            },
            axisTick: {
              show: false,
            },
            data: ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05'],
          })
        }),
        series: [
          {
            name: '航班数',
            label: {
              position: 'left',
            },
            itemStyle: {
              color: '#2D67E3',
              barBorderRadius: [4, 0, 0, 4],
            },
            data: [43, 53, 24, 11, 32],
          },
          {
            xAxisIndex: 2,
            yAxisIndex: 2,
            name: '中转数',
            label: {
              position: 'right',
            },
            itemStyle: {
              color: '#E9C042',
              barBorderRadius: [0, 4, 4, 0],
            },
            data: [43, 53, 24, 11, 32],
          },
        ].map(item =>
          _.merge(item, {
            type: 'bar',
            barWidth: 11,
            label: {
              show: false,
              fontFamily: 'Rubik-Medium',
              fontSize: 14,
              distance: 10,
            },
          })
        ),
      },
      pieOption: {
        color: ['#E5983E', '#8249C9 ', '#B03377'],
        series: [
          {
            name: '异常行李',
            radius: ['40%', '100%'],
            left: '-5%',
            top: '10%',
            right: '10%',
            bottom: '10%',
            data: [
              { value: 1048, key: 'roleCount', name: '多收' },
              { value: 735, key: 'defRoleCunt', name: '少收' },
              { value: 735, key: 'unuseRole', name: '破损' },
            ],
          },
        ],
      },
      baggageData: [
        {
          name: '多收',
          num: 33327,
          pag: '40',
        },
        {
          name: '少收',
          num: 33327,
          pag: '40',
        },
        {
          name: '破损',
          num: 33327,
          pag: '40',
        },
      ],
      boxMap: {
        title: [
          {
            show: true,
            text: '区域运输TOP',
            left: 20,
            top: 20,
            textStyle: {
              color: '#000',
            },
          },
        ],
        tooltip: {
          trigger: 'item',
          formatter: function (item) {
            if (item.data && item.data.index) {
              const html = `<div>
              <div>TOP ${item.data.index}</div>
              <div>${item.data.name} ${item.data.value}</div>
            </div>`
              return html
            } else {
              return '<div>暂无数据</div>'
            }
          },
        },
        legend: {
          show: false,
        },
        grid: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
        },
        visualMap: {
          type: 'continuous',
          text: ['高', '低'],
          min: 0,
          max: 1000000,
          seriesIndex: [0, 2],
          dimension: 0,
          realtime: false,
          left: 0,
          itemWidth: 8,
          itemHeight: 93,
          calculable: true,
          inRange: {
            color: ['#124BAA', '#75DDFF'],
            symbolSize: [100, 100],
          },
          textStyle: {
            color: '#000',
          },
          outOfRange: {
            color: ['#eeeeee'],
            symbolSize: [100, 100],
          },
        },
        toolbox: {
          show: false,
        },

        xAxis: {
          show: false,
        },
        yAxis: {
          show: false,
        },

        series: [
          {
            name: '人数',
            type: 'map',
            mapType: 'china',
            // left: '100',
            // width: '40%',
            roam: 'move',
            mapValueCalculation: 'sum',
            zoom: 1,
            selectedMode: false,
            showLegendSymbol: false,
            left: '10%',
            top: '10%',
            width: '80%',
            label: {
              normal: {
                textStyle: {
                  color: '#666',
                },
              },
              emphasis: {
                textStyle: {
                  color: '#234EA5',
                },
              },
            },
            itemStyle: {
              normal: {
                areaColor: '#EEEEEE',
                borderColor: '#FFFFFF',
              },
              emphasis: {
                areaColor: '#E5F39B',
              },
            },
            data: [],
          },
        ],
      },
      domesticOption: {
        title: [
          {
            text: '国内',
            x: 'center',
            top: '55%',
            textStyle: {
              color: '#000',
              fontSize: 14,
              fontWeight: '100',
            },
          },
          {
            text: '60%',
            x: 'center',
            top: '32%',
            textStyle: {
              fontSize: '24',
              color: '#000',
              fontFamily: 'DINAlternate-Bold, DINAlternate',
              foontWeight: '600',
            },
          },
        ],
        tooltip: {
          show: false,
        },
        polar: {
          radius: ['50%', '100%'],
          center: ['50%', '50%'],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 8,
            showBackground: true,
            backgroundStyle: {
              color: '#ACBCD8',
            },
            data: [60],
            coordinateSystem: 'polar',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: '#2D67E3',
                  },
                  {
                    offset: 1,
                    color: '#2D67E3',
                  },
                ]),
              },
            },
          },
          {
            name: '',
            type: 'pie',
            startAngle: 80,
            radius: ['50%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            itemStyle: {
              color: '#fff',
              borderWidth: 0,
              borderColor: '#fff',
            },
            data: [100],
          },
        ],
      },
      internationalOption: {
        title: [
          {
            text: '国际',
            x: 'center',
            top: '55%',
            textStyle: {
              color: '#000',
              fontSize: 14,
              fontWeight: '100',
            },
          },
          {
            text: '10%',
            x: 'center',
            top: '32%',
            textStyle: {
              fontSize: '24',
              color: '#000',
              fontFamily: 'DINAlternate-Bold, DINAlternate',
              foontWeight: '600',
            },
          },
        ],
        tooltip: {
          show: false,
        },
        polar: {
          radius: ['50%', '100%'],
          center: ['50%', '50%'],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 8,
            showBackground: true,
            backgroundStyle: {
              color: '#ACBCD8',
            },
            data: [10],
            coordinateSystem: 'polar',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: '#2D67E3',
                  },
                  {
                    offset: 1,
                    color: '#2D67E3',
                  },
                ]),
              },
            },
          },
          {
            name: '',
            type: 'pie',
            startAngle: 80,
            radius: ['50%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            itemStyle: {
              // color: "rgba(66, 66, 66, .1)",
              // borderWidth: 2,
              // borderColor: "#fff",
              color: '#fff',
              borderWidth: 0,
              borderColor: '#fff',
            },
            data: [100],
          },
        ],
      },
      terminalData: [
        {
          name: 'PEK',
          num: 200,
          percentage: 10,
        },
        {
          name: 'PEK',
          num: 200,
          percentage: 10,
        },
      ],
      customColor: '#6EADE8',
    }
  },
  computed: {
    defaultOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 0, // 开始无缝滚动的数据量  //this.fourDatata.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  watch: {
    countEnterNum() {
      this.getCountEnterNum()
    },
  },
  created() {
    this.getDataInit()
  },
  methods: {
    // 切换主题
    changeZt(val) {
      if (val == 0) {
        this.totalOption.xAxis.axisLine.lineStyle.color = '#fff'
        this.totalOption.xAxis.axisLabel.color = '#fff'
        this.totalOption.yAxis.axisLabel.color = '#fff'
        this.dataOption.xAxis[0].axisLine.lineStyle.color = '#fff'
        this.dataOption.xAxis[0].axisLabel.color = '#fff'
        this.dataOption.xAxis[2].axisLine.lineStyle.color = '#fff'
        this.dataOption.xAxis[2].axisLabel.color = '#fff'
        this.dataOption.yAxis[1].axisLabel.color = '#fff'
        this.boxMap.title[0].textStyle.color = '#fff'
        this.boxMap.visualMap.textStyle.color = '#fff'
        this.domesticOption.title[0].textStyle.color = '#fff'
        this.domesticOption.title[1].textStyle.color = '#fff'
        this.internationalOption.title[0].textStyle.color = '#fff'
        this.internationalOption.title[1].textStyle.color = '#fff'
        this.domesticOption.series = [
          {
            backgroundStyle: {
              color: '#A4A3BF',
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: '#fff',
                  },
                  {
                    offset: 1,
                    color: '#fff',
                  },
                ]),
              },
            },
          },
          {
            itemStyle: {
              color: 'rgba(66, 66, 66, .1)',
              borderWidth: 2,
              borderColor: '#fff',
            },
          },
        ]
        this.internationalOption.series = [
          {
            backgroundStyle: {
              color: '#A4A3BF',
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: '#fff',
                  },
                  {
                    offset: 1,
                    color: '#fff',
                  },
                ]),
              },
            },
          },
          {
            itemStyle: {
              color: 'rgba(66, 66, 66, .1)',
              borderWidth: 2,
              borderColor: '#fff',
            },
          },
        ]
      } else {
        this.totalOption.xAxis.axisLine.lineStyle.color = '#000'
        this.totalOption.xAxis.axisLabel.color = '#000'
        this.totalOption.yAxis.axisLabel.color = '#000'
        this.dataOption.xAxis[0].axisLine.lineStyle.color = '#000'
        this.dataOption.xAxis[0].axisLabel.color = '#000'
        this.dataOption.xAxis[2].axisLine.lineStyle.color = '#000'
        this.dataOption.xAxis[2].axisLabel.color = '#000'
        this.dataOption.yAxis[1].axisLabel.color = '#000'
        this.boxMap.title[0].textStyle.color = '#000'
        this.boxMap.visualMap.textStyle.color = '#000'
        this.domesticOption.title[0].textStyle.color = '#000'
        this.domesticOption.title[1].textStyle.color = '#000'
        this.internationalOption.title[0].textStyle.color = '#000'
        this.internationalOption.title[1].textStyle.color = '#000'
        this.domesticOption.series = [
          {
            backgroundStyle: {
              color: '#ACBCD8',
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: '#2D67E3',
                  },
                  {
                    offset: 1,
                    color: '#2D67E3',
                  },
                ]),
              },
            },
          },
          {
            itemStyle: {
              color: '#fff',
              borderWidth: 0,
              borderColor: '#fff',
            },
          },
        ]
        this.internationalOption.series = [
          {
            backgroundStyle: {
              color: '#ACBCD8',
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: '#2D67E3',
                  },
                  {
                    offset: 1,
                    color: '#2D67E3',
                  },
                ]),
              },
            },
          },
          {
            itemStyle: {
              color: '#fff',
              borderWidth: 0,
              borderColor: '#fff',
            },
          },
        ]
      }
    },
    // 全屏
    fullScreen() {
      this.isFull = !this.isFull
      const ele = document.getElementById('fullDom')
      if (this.isFull) {
        ele.requestFullscreen()
      } else {
        document.exitFullscreen()
      }
    },
    // 获取运输总量
    async getOrderNum() {
      const { code, returnData } = await TempQuery({
        id: SERVICE_ID.stOrderId,
        dataContent: [],
      })
      if (code == 0) {
        const { listValues } = returnData
        this.countEnterNum = listValues[0]['bagsnum']
      } else {
        this.countEnterNum = '000000000'
      }
    },
    // 获取运输总量-统计图
    async getOrderNumChart() {
      const { code, returnData } = await TempQuery({
        id: SERVICE_ID.stOrderChartId,
        dataContent: [],
      })
      if (code == 0) {
        const { listValues } = returnData
        const [mouth, bagsnum, passengers] = [[], [], []]
        listValues.forEach(item => {
          mouth.push(item.month)
          bagsnum.push(item.bagsnum)
          passengers.push(item.passengers)
        })
        this.totalOption.xAxis.data = mouth
        this.totalOption.series.map(item => {
          if (item.key == 'bagsnum') {
            item.data = bagsnum
          } else if (item.key == 'passengers') {
            item.data = passengers
          }
        })
      }
    },
    // 获取统计数据
    async getStatistical() {
      const { code, returnData } = await TempQuery({
        id: SERVICE_ID.stCalId,
        dataContent: [],
      })
      if (code == 0) {
        const { listValues } = returnData
        const { avgbag, transnum } = listValues[0]
        this.statisticalData.map(item => {
          if (item.key == 'avgbag') {
            item.info = (avgbag ?? 0).toFixed(2)
          } else if (item.key == 'transnum') {
            item.info = transnum ?? 0
          } else {
            item.info = '-'
          }
        })
      } else {
        this.statisticalData.map(item => {
          item.info = '-'
        })
      }
    },
    // 获取航班数
    async getFignts() {
      const { code, returnData } = await TempQuery({
        id: SERVICE_ID.stFigntsId,
        dataContent: [],
      })
      if (code == 0) {
        const { listValues } = returnData
        const [mouth, flightnum] = [[], []]
        listValues.forEach(item => {
          mouth.push(item.month)
          flightnum.push(item.flightnum)
        })
        this.dataOption.yAxis.map(item => {
          item.data = mouth
        })
        this.dataOption.series[0].data = flightnum
      } else {
        this.dataOption.yAxis.map(item => {
          item.data = []
        })
        this.dataOption.series[0].data = []
      }
    },
    // 获取中转数
    async getSpeed() {
      const { code, returnData } = await TempQuery({
        id: SERVICE_ID.stSpeedId,
        dataContent: [],
      })
      if (code == 0) {
        const { listValues } = returnData
        const [mouth, transnum] = [[], []]
        listValues.forEach(item => {
          mouth.push(item.month)
          transnum.push(item.transnum)
        })
        this.dataOption.series[1].data = transnum
      } else {
        this.dataOption.series[1].data = []
      }
    },
    // 获取异常行李
    async getBaggage() {
      const { code, returnData } = await TempQuery({
        id: SERVICE_ID.stBaggageId,
        dataContent: [],
      })
      const { listValues } = returnData
      if (code == 0 && listValues.length) {
        this.baggageData = listValues
      } else {
        this.baggageData.map(item => {
          item.num = 0
          item.pag = 0
        })
        this.pieOption.series[0].data.map(item => {
          item.value = 0
        })
      }
    },
    // 获取区域运输top
    async getMap() {
      const { code, returnData } = await TempQuery({
        id: SERVICE_ID.stMapId,
        dataContent: [],
      })
      if (code == 0) {
        const { listValues } = returnData
        listValues.sort((a, b) => b.bagsnum - a.bagsnum)
        listValues.map((item, index) => {
          item.name = item.province
          ;(item.value = item.bagsnum), (item.index = index + 1)
        })
        this.boxMap.series[0].data = listValues
      }
    },
    // 获取国内国际
    async getCountry() {
      const { code, returnData } = await TempQuery({
        id: SERVICE_ID.stCountryId,
        dataContent: [],
      })
      if (code == 0) {
        const { listValues } = returnData
        let total = 0
        let int = null // 国际
        let dom = null // 国内
        listValues.map(item => {
          if (item.ditype == 'INT') {
            int = item.bagsnum
          } else if (item.ditype == 'DOM') {
            dom = item.bagsnum
          }
          total += Number(item.bagsnum)
        })
        this.domesticOption.title[1].text = parseInt((dom / total) * 100) + '%'
        this.internationalOption.title[1].text =
          parseInt((int / total) * 100) + '%'
        this.domesticOption.series[0].data = [parseInt((dom / total) * 100)]
        this.internationalOption.series[0].data = [
          parseInt((int / total) * 100),
        ]
      } else {
        this.domesticOption.title[1].text = '0%'
        this.internationalOption.title[1].text = '0%'
        this.domesticOption.series[0].data = [0]
        this.internationalOption.series[0].data = [0]
      }
    },
    // 获取航站运输排行
    async getTerminalData() {
      const { code, returnData } = await TempQuery({
        id: SERVICE_ID.stTerminalId,
        dataContent: [],
      })
      if (code == 0) {
        const { listValues } = returnData
        let total = 0
        listValues.map(item => {
          total += Number(item.bagsnum)
        })
        listValues.map(item => {
          item.name = item.airport
          item.num = item.bagsnum
          item.percentage = (item.bagsnum / total).toFixed(2) * 100
        })
        this.terminalData = listValues
      } else {
        this.terminalData = []
      }
    },
    // 获取初始数据
    getDataInit() {
      this.getOrderNum()
      this.getOrderNumChart()
      this.getStatistical()
      this.getFignts()
      this.getSpeed()
      this.getBaggage()
      this.getMap()
      this.getCountry()
      this.getTerminalData()
    },
    getCountEnterNum() {
      this.$nextTick(() => {
        this.toOrderNum(this.countEnterNum) // 这里输入数字即可调用
        this.setNumberTransform()
      })
    },
    toOrderNum(num) {
      num = num.toString()
      if (num.length < 9) {
        num = '0' + num // 如未满八位数，添加"0"补位
        this.toOrderNum(num) // 递归添加"0"补位
      } else if (num.length >= 9) {
        this.orderNum = num.split('') // 将其便变成数据，渲染至滚动数组
      } else {
        // 订单总量数字超过八位显示异常
        this.$message.warning('总量数字过大')
      }
    },
    setNumberTransform() {
      const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
      const numberArr = this.orderNum.filter(item => !isNaN(item))
      // 结合CSS 对数字字符进行滚动,显示订单数量
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index]
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.iconfull {
  font-size: 20px;
  color: #2d67e3;
  cursor: pointer;
  position: relative;
  top: 3px;
  margin-left: 20px;
}
.statisticalAnalysisContent {
  color: #fff;
  padding: 30px 24px 40px 24px;
  min-height: calc(100vh - 80px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url('../../../assets/analysis/bg_b.png');
  .manageTitle {
    color: #fff;
    line-height: 38px;
  }
  .mt36 {
    margin-top: 36px;
  }
  .content {
    margin-top: 28px;
    margin-left: 0;
    &-list {
      &-box {
        width: 33%;
        overflow: hidden;
        margin-right: 36px;
        background-image: linear-gradient(
            #fff 2px,
            transparent 2px,
            transparent calc(100% - 2px),
            #fff calc(100% - 2px),
            #fff 100%
          ),
          linear-gradient(
            90deg,
            #fff 2px,
            transparent 2px,
            transparent calc(100% - 2px),
            #fff calc(100% - 2px),
            #fff 100%
          ),
          linear-gradient(
            #fff 2px,
            transparent 2px,
            transparent calc(100% - 2px),
            #fff calc(100% - 2px),
            #fff 100%
          ),
          linear-gradient(
            90deg,
            #fff 2px,
            transparent 2px,
            transparent calc(100% - 2px),
            #fff calc(100% - 2px),
            #fff 100%
          );
        background-repeat: no-repeat;
        background-position: top left, top left, bottom right, bottom right;
        background-size: 10px 100%, 100% 10px;
        &-bp {
          padding: 36px;
          position: relative;
          height: 100%;
          border: 1px solid rgba($color: #fff, $alpha: 0.3);
          &-title {
            height: 20px;
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #ffffff;
          }
          .total-transportation {
            &-info {
              &-icons {
                display: flex;
              }
              &-icons-list {
                margin-right: 20px;
                .icon {
                  width: 14px;
                  height: 14px;
                  border-radius: 2px;
                  display: inline-block;
                  margin-right: 8px;
                  position: relative;
                  top: 2px;
                }
                .icon1 {
                  background: #f5bb3d;
                }
                .icon2 {
                  background: #73d970;
                }
                .icon3 {
                  background: #6a9dd9;
                }
                .text {
                  font-size: 14px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #ffffff;
                }
                &:last-child {
                  margin-right: 0;
                }
              }
            }
            &-content {
              height: 100%;
              flex: 1;
              position: relative;
            }
          }
          .statistical-data {
            .el-col {
              margin-top: 28px;
              .icon {
                width: 56px;
                height: 56px;
                background: #1e3c6f;
                border-radius: 50%;
                margin-right: 16px;
              }
              .info {
                &-time {
                  &-xq {
                    font-size: 36px;
                    font-family: Helvetica;
                    font-weight: bold;
                    color: #f7c15a;
                  }
                  &-dw {
                    font-size: 24px;
                    font-family: DIN;
                    font-weight: bold;
                    color: #ffffff;
                    margin-left: 14px;
                  }
                }
                &-msg {
                  font-size: 14px;
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                  color: #ffffff;
                }
              }
            }
          }
          .total-data {
            &-info {
              width: 100px;
              &-list {
                font-size: 14px;
                margin-bottom: 20px;
                .icon {
                  display: inline-block;
                  width: 4px;
                  height: 14px;
                  margin-right: 8px;
                }
                .icon1 {
                  background: #2d67e3;
                }
                .icon2 {
                  background: #e9c042;
                }
              }
            }
            &-charts {
              flex: 1;
              position: relative;
              min-height: 200px;
            }
          }
          .pie-data {
            margin-top: 24px;
            .total-data-info {
              flex: 1;
            }
            &-list {
              font-size: 14px;
              margin-bottom: 20px;
              font-weight: bold;
              .icon {
                display: inline-block;
                width: 4px;
                height: 14px;
                margin-right: 8px;
              }
              .icon1 {
                background: #e5983e;
              }
              .icon2 {
                background: #8249c9;
              }
              .icon3 {
                background: #b03377;
              }
            }
            .total-data-charts {
              position: relative;
              min-height: 140px;
              overflow: hidden;
              margin-right: 24px;
            }
          }
          &::after {
            position: absolute;
            content: '';
            width: 11px;
            height: 11px;
            background-image: url('../../../assets/analysis/pic_triangle_conner.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            left: 10px;
            top: 10px;
          }
        }
        &:last-child {
          margin-right: 0;
        }
      }
      .dbTy {
        .content-list-box-bp {
          height: auto;
        }
      }
    }
  }
  .box-item {
    margin-top: 36px;
    position: relative;
    height: 66px;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    list-style: none;
    color: #2d7cff;
    display: flex;
    justify-content: center;
    text-orientation: upright;
    /*文字禁止编辑*/
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
    /* overflow: hidden; */
    p {
      line-height: 32px;
      writing-mode: horizontal-tb !important;
      text-orientation: none !important;
      /*文字禁止编辑*/
      -moz-user-select: none; /*火狐*/
      -webkit-user-select: none; /*webkit浏览器*/
      -ms-user-select: none; /*IE10*/
      -khtml-user-select: none; /*早期浏览器*/
      user-select: none;
      margin-top: 5px;
    }
  }
  /* 默认逗号设置 */
  .mark-item {
    width: 10px;
    height: 32px;
    margin-right: 5px;
    line-height: 10px;
    font-size: 18px;
    position: relative;
    & > span {
      position: absolute;
      width: 100%;
      bottom: 0;
      writing-mode: vertical-rl;
      text-orientation: upright;
    }
  }
  /*滚动数字设置*/
  .number-item {
    width: 42px;
    height: 66px;
    background: #1e3c6f;
    list-style: none;
    margin-right: 10px;
    & > span {
      position: relative;
      display: inline-block;
      margin-right: 10px;
      width: 100%;
      height: 100%;
      writing-mode: vertical-rl;
      text-orientation: upright;
      overflow: hidden;
      & > i {
        font-size: 48px;
        font-family: DIN;
        font-weight: bold;
        color: #ffffff;
        font-style: normal;
        position: absolute;
        top: 11px;
        left: 50%;
        transform: translate(-50%, -1%);
        transition: transform 1s ease-in-out;
        letter-spacing: 10px;
      }
    }
  }
  .number-item:last-child {
    margin-right: 0;
  }
  .boxMap {
    background-image: none;
    position: relative;
    &-box {
      justify-content: center;
      position: absolute;
      bottom: 10px;
      left: 0;
      width: 100%;
    }
    &-pie {
      position: relative;
      width: 145px;
      height: 145px;
      margin-right: 55px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .terminal-transportation {
    .scrollTable {
      max-height: 500px;
      overflow: hidden;
    }
    &-list {
      margin-top: 36px;
      .name {
        font-size: 14px;
        font-family: Helvetica;
        font-weight: bold;
        color: #ffffff;
      }
      ::v-deep .progress {
        // min-width: 270px;
        flex: 1;
        margin: 0 36px;
        .el-progress-bar {
          padding-right: 0;
          .el-progress-bar__outer {
            background-color: #534e75;
          }
        }
        .el-progress__text {
          display: none;
        }
      }
    }
  }
}
.isWhite {
  .statisticalAnalysisContent {
    background-image: url('../../../assets/analysis/bg_a.png');
    color: #333;
    .manageTitle,
    .info-msg,
    .info-time-dw {
      color: #333 !important;
    }
    .content-list-box {
      background-image: none;
      &-bp {
        border: none;
        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        background-color: #fff;
        .total-transportation-info-icons-list {
          .text {
            color: #333;
          }
        }
        .terminal-transportation-list {
          .name {
            color: #333;
          }
        }
        &-title {
          color: #333;
        }
        &::after {
          display: none;
          background-image: none;
        }
      }
    }
  }
}
</style>
>
