CABaggageData2.0/src/views/statisticalAnalysis/components/index.vue

<template>
  <div class="statisticalAnalysisContent">
    <div class="manageTitle">统计分析</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">
                        <span class="info-time-xq">{{item.info}}</span>
                        <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 class="total-data-info-list">
                  <div class="pie-data-list">
                    <span class="icon icon1"></span>
                    <span class="text">多收</span>
                  </div>
                  <div class="pie-data-list flex-wrap">
                    <span class="text flex1">数量：33327</span>
                    <span class="text flex1">占比：40%</span>
                  </div>
                </div>
                <div class="total-data-info-list">
                  <div class="pie-data-list">
                    <span class="icon icon2"></span>
                    <span class="text">少收</span>
                  </div>
                  <div class="pie-data-list flex-wrap">
                    <span class="text flex1">数量：33327</span>
                    <span class="text flex1">占比：40%</span>
                  </div>
                </div>
                <div class="total-data-info-list">
                  <div class="pie-data-list">
                    <span class="icon icon3"></span>
                    <span class="text">破损</span>
                  </div>
                  <div class="pie-data-list flex-wrap">
                    <span class="text flex1">数量：33327</span>
                    <span class="text flex1">占比：40%</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-wrap" v-for="item in terminalData" :key="item.id">
                  <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>
</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 { Query } from "@/api/dataIntegration"
const citydata = [{
  name: "北京",
  value: 974
},
{
  name: "天津",
  value: 532
},
{
  name: "上海",
  value: 834
},
{
  name: "重庆",
  value: 683
},
{
  name: "河北",
  value: 283
},
{
  name: "河南",
  value: 345
},
{
  name: "云南",
  value: 272
},
{
  name: "辽宁",
  value: 194
},
{
  name: "黑龙江",
  value: 342
},
{
  name: "湖南",
  value: 389
},
{
  name: "安徽",
  value: 267
},
{
  name: "山东",
  value: 675
},
{
  name: "新疆",
  value: 174
},
{
  name: "江苏",
  value: 574
},
{
  name: "浙江",
  value: 278
},
{
  name: "江西",
  value: 528
},
{
  name: "湖北",
  value: 144
},
{
  name: "广西",
  value: 448
},
{
  name: "甘肃",
  value: 197
},
{
  name: "山西",
  value: 203
},
{
  name: "内蒙古",
  value: 373
},
{
  name: "陕西",
  value: 563
},
{
  name: "吉林",
  value: 147
},
{
  name: "福建",
  value: 112
},
{
  name: "贵州",
  value: 373
},
{
  name: "广东",
  value: 747
},
{
  name: "青海",
  value: 38
},
{
  name: "西藏",
  value: 126
},
{
  name: "四川",
  value: 215
},
{
  name: "宁夏",
  value: 172
},
{
  name: "海南",
  value: 77
},
{
  name: "台湾",
  value: 837
},
{
  name: "香港",
  value: 677
},
{
  name: "澳门",
  value: 43
},
{
  name: "南海诸岛",
  value: 53
}]
let data = {
  female: {
    name: '中转数',
    data: [{
      value: 43,
      label: '2022-01'
    }, {
      value: 34,
      label: '2022-02'
    }, {
      value: 53,
      label: '2022-03'
    }, {
      value: 12,
      label: '2022-04'
    }, {
      value: 34,
      label: '2022-05'
    }]
  },
  male: {
    name: '航班数',
    data: [{
      value: 43,
      label: '2022-01'
    }, {
      value: 34,
      label: '2022-02'
    }, {
      value: 53,
      label: '2022-03'
    }, {
      value: 12,
      label: '2022-04'
    }, {
      value: 34,
      label: '2022-05'
    }]
  }
};
let yAxisData = new Set();
let legendData = [];
_.forEach(data, (d) => {
  legendData.push(d.name);
  _.forEach(d.data, (item) => {
    yAxisData.add(item.label);
  });
});
let top = 0;
let bottom = 0;
yAxisData = [...yAxisData];
export default {
  name: 'statisticalAnalysisContent',
  components: {
    LineCharts,
    BarCharts,
    PieCharts,
    MapCharts,
    vueSeamlessScroll
  },
  data () {
    return {
      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: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#fff',
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff',
            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: '#fff',
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
        }, {
          gridIndex: 1,
          show: true
        }, {
          gridIndex: 2,
          type: 'value',
          axisLabel: {
            color: '#fff'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        }].map((item) => _.merge(item, {
          axisLabel: {
            color: '#fff',
            margin: 10
          },
          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: `#fff`
          },
          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: yAxisData
          });
        }),
        series: [{
          name: _.get(data, 'male.name'),
          label: {
            position: 'left'
          },
          itemStyle: {
            color: '#2D67E3',
            barBorderRadius: [4, 0, 0, 4]
          },
          data: _.map(_.get(data, 'male.data'), d => d.value)
        },
        {
          xAxisIndex: 2,
          yAxisIndex: 2,
          name: _.get(data, 'female.name'),
          label: {

            position: 'right'
          },
          itemStyle: {
            color: '#E9C042',
            barBorderRadius: [0, 4, 4, 0]
          },
          data: _.map(_.get(data, 'female.data'), d => d.value)
        }
        ].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: "破损" },
            ],
          },
        ],
      },
      boxMap: {
        title: [{
          show: true,
          text: '区域运输TOP',
          left: 20,
          top: 20,
          textStyle: {
            color: '#fff'
          },
        },],
        tooltip: {
          trigger: "item"
        },
        legend: {
          show: false
        },
        grid: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0
        },
        visualMap: {
          type: 'continuous',
          text: ['高', '低'],
          min: 0,
          max: 1000,
          seriesIndex: [0, 2],
          dimension: 0,
          realtime: false,
          left: 0,
          itemWidth: 8,
          itemHeight: 93,
          calculable: true,
          inRange: {
            color: ['#124BAA', '#75DDFF'],
            symbolSize: [100, 100]
          },
          textStyle: {
            color: '#fff'
          },
          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: citydata
        },
        ]
      },
      domesticOption: {
        title: [{
          text: '国内',
          x: 'center',
          top: '55%',
          textStyle: {
            color: '#FFFFFF',
            fontSize: 14,
            fontWeight: '100',
          }
        }, {
          text: '60%',
          x: 'center',
          top: '32%',
          textStyle: {
            fontSize: '24',
            color: '#FFFFFF',
            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: '#A4A3BF',
          },
          data: [60],
          coordinateSystem: 'polar',
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: '#fff',
              },
              {
                offset: 1,
                color: '#fff',
              },
              ]),
            },
          },
        },
        {
          name: '',
          type: 'pie',
          startAngle: 80,
          radius: ['50%'],
          hoverAnimation: false,
          center: ['50%', '50%'],
          itemStyle: {
            color: 'rgba(66, 66, 66, .1)',
            borderWidth: 2,
            borderColor: '#fff',
          },
          data: [100],
        }
        ],
      },
      internationalOption: {
        title: [{
          text: '国际',
          x: 'center',
          top: '55%',
          textStyle: {
            color: '#FFFFFF',
            fontSize: 14,
            fontWeight: '100',
          }
        }, {
          text: '10%',
          x: 'center',
          top: '32%',
          textStyle: {
            fontSize: '24',
            color: '#FFFFFF',
            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: '#A4A3BF',
          },
          data: [10],
          coordinateSystem: 'polar',
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: '#fff',
              },
              {
                offset: 1,
                color: '#fff',
              },
              ]),
            },
          },
        },
        {
          name: '',
          type: 'pie',
          startAngle: 80,
          radius: ['50%'],
          hoverAnimation: false,
          center: ['50%', '50%'],
          itemStyle: {
            color: 'rgba(66, 66, 66, .1)',
            borderWidth: 2,
            borderColor: '#fff',
          },
          data: [100],
        }
        ],
      },
      terminalData: [
        {
          id: 1,
          name: 'PEK',
          num: 903133,
          percentage: 20
        },
        {
          id: 2,
          name: 'CTU',
          num: 572570,
          percentage: 25
        },
        {
          id: 3,
          name: 'TFU',
          num: 263859,
          percentage: 30
        },
        {
          id: 4,
          name: 'CKG',
          num: 260811,
          percentage: 20
        },
        {
          id: 5,
          name: 'HGH',
          num: 184195,
          percentage: 50
        },
        {
          id: 6,
          name: 'PVG',
          num: 104716,
          percentage: 70
        },
        {
          id: 7,
          name: 'SZX',
          num: 104371,
          percentage: 90
        },
        {
          id: 8,
          name: 'CKG',
          num: 260811,
          percentage: 20
        },
        {
          id: 9,
          name: 'HGH',
          num: 184195,
          percentage: 50
        },
        {
          id: 10,
          name: 'PVG',
          num: 104716,
          percentage: 70
        },
        {
          id: 11,
          name: 'SZX',
          num: 104371,
          percentage: 90
        }
      ],
      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: {
    //获取运输总量
    async getOrderNum () {
      const { code, returnData } = await Query({
        id: 18012,
        dataContent: []
      })
      if (code == 0) {
        const { listValues } = returnData
        this.countEnterNum = listValues[0]['bagsnum']
      } else {
        this.countEnterNum = '000000000'
      }
    },
    //获取运输总量-统计图
    async getOrderNumChart () {
      const { code, returnData } = await Query({
        id: 18013,
        dataContent: []
      })
      if (code == 0) {
        const { listValues } = returnData
        const [mouth, bagsnum, passengers] = [[], [], []]
        listValues.forEach(item => {
          mouth.push(item.month)
          bagsnum.push(item.bagsnum)
          passengers.push(item.passengers)
        })
        this.totalOption.xAxis.data = mouth
        this.totalOption.series.map(item => {
          if (item.key == 'bagsnum') {
            item.data = bagsnum
          } else if (item.key == 'passengers') {
            item.data = passengers
          }
        })
      } else {

      }
    },
    //获取统计数据
    async getStatistical () {
      const { code, returnData } = await Query({
        id: 18014,
        dataContent: []
      })
      if (code == 0) {
        const { listValues } = returnData
        const { avgbag, transnum } = listValues[0]
        this.statisticalData.map(item => {
          if (item.key == 'avgbag') {
            item.info = avgbag
          } else if (item.key == 'transnum') {
            item.info = transnum
          } else {
            item.info = '-'
          }
        })
      } else {
        this.statisticalData.map(item => {
          item.info = '-'
        })
      }
    },
    //获取航班数
    async getFignts () {
      const { code, returnData } = await Query({
        id: 18015,
        dataContent: []
      })
      if (code == 0) {
        const { listValues } = returnData
      } else {

      }
    },
    //获取中转数
    async getSpeed () {
      const result = await Query({
        id: 18016,
        dataContent: []
      })
      console.log(result)
    },
    //获取初始数据
    getDataInit () {
      this.getOrderNum()
      this.getOrderNumChart()
      this.getStatistical()
      this.getFignts()
      this.getSpeed()
    },
    getCountEnterNum () {
      this.$nextTick(() => {
        this.toOrderNum(this.countEnterNum); // 这里输入数字即可调用
        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>
.statisticalAnalysisContent {
  color: #fff;
  padding: 30px 24px 40px 24px;
  min-height: calc(100vh - 80px);
  background-image: url("../../../assets/analysis/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .manageTitle {
    color: #fff;
  }
  .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: 24px;
              }
              .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: 300px;
        margin: 0 36px;
        .el-progress-bar {
          padding-right: 0;
          .el-progress-bar__outer {
            background-color: #534e75;
          }
        }
        .el-progress__text {
          display: none;
        }
      }
    }
  }
}
</style>>