physical_distribution/src/views/dashboard/home.vue

<template>
  <div class="container_box">
    <div class="top_con">
      <div class="left_con">
        <div class="left_txt">
          <div class="time_text">{{ time }}</div>
          <div class="bittom_left">
            <div class="week_txt">
              <span>{{ date }}</span
              ><span style="margin-left: 0.1rem">{{ week }}</span>
            </div>
            <div class="uodate_time">数据更新时间:<span class="time_txt">2023/01/17</span></div>
          </div>
        </div>
      </div>
      <div class="center_con">
        <div class="con_title">莒县物流服务中心</div>
      </div>
      <div class="right_con">
        <div class="right_txt">
          <div class="left">
            <img src="~@/assets/img/pos.png" alt="" />
            <div class="pos_text">日照市莒县</div>
          </div>
          <div class="bottom_right">
            <img src="~@/assets/img/weather.png" alt="" />
            <div>
              <span>{{ temp }}℃</span>
              <span>{{ weather }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="left_box">
      <div class="left_top">
        <div class="top_title">
          <div class="left_tit">
            <span class="txt_name">{{ activeName }}</span>
            <span class="name">{{ acctiEng }}</span>
          </div>
          <div class="right_tit">
            <div class="title_txt" :class="isActive == 1 ? 'active' : ''" @click="changeBtn(1)">
              收
            </div>
            <div class="title_txt" :class="isActive == 2 ? 'active' : ''" @click="changeBtn(2)">
              发
            </div>
            <div class="title_txt" :class="isActive == 3 ? 'active' : ''" @click="changeBtn(3)">
              到
            </div>
            <div class="title_txt" :class="isActive == 4 ? 'active' : ''" @click="changeBtn(4)">
              派
            </div>
            <div class="title_txt" :class="isActive == 5 ? 'active' : ''" @click="changeBtn(5)">
              签
            </div>
          </div>
        </div>
        <div class="cen_con">
          <div class="table_line1">
            <div class="table_item">排名</div>
            <div class="table_item">乡镇</div>
            <div class="table_item">运单量</div>
          </div>
          <div class="swiper-container swiper1">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item, index) in slideList" :key="index">
                <div class="table_con">
                  <div
                    class="table_line"
                    v-for="item1 in item.arr"
                    :key="item1.no"
                    :class="item1.no <= 3 ? 'ac_no' : ''"
                  >
                    <div class="table_item">{{ item1.no }}</div>
                    <div class="table_item">{{ item1.name }}</div>
                    <div class="table_item">{{ item1.count }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="left_bottom">
        <div class="top_title">
          <div class="left_tit">
            <span class="txt_name">村点信息</span>
            <span class="name">VILLAGE INFORMATION</span>
          </div>
        </div>
        <div class="table_box">
          <div class="table_line1">
            <div class="table_item">站点名称</div>
            <div class="table_item">
              <span>上行</span>
              <img src="~@/assets/img/up.png" alt="" />
            </div>
            <div class="table_item">
              <span>下行</span>
              <img src="~@/assets/img/down.png" alt="" />
            </div>
          </div>
          <div class="swiper-container swiper2">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item, index) in villList" :key="index">
                <div class="table_con" :class="item.arr.length < 5 ? 'tab_con' : ''">
                  <div class="table_line" v-for="item1 in item.arr" :key="item1.name">
                    <div class="table_item">{{ item1.name }}</div>
                    <div class="table_item">{{ item1.upData }}</div>
                    <div class="table_item">{{ item1.downData }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="center_top">
      <div class="cen_left">
        <div class="data_box" v-for="item in totalData" :key="item.name">
          <div class="data_txt" style="font-family: 'ALHY'">{{ item.name }}</div>
          <div class="data_txt data_text">{{ item.data }}</div>
          <div class="data_txt">
            <span class="hb_txt">环比</span>
            <span class="hb_data">{{ item.huanbi }}</span>
            <img
              v-show="item.name == '收件量' && item.huanbi > 0"
              src="~@/assets/img/up1.png"
              alt=""
            />
            <img
              v-show="item.name == '收件量' && item.huanbi < 0"
              src="~@/assets/img/down1.png"
              alt=""
            />
            <img
              v-show="item.name == '发件量' && item.huanbi > 0"
              src="~@/assets/img/up2.png"
              alt=""
            />
            <img
              v-show="item.name == '发件量' && item.huanbi < 0"
              src="~@/assets/img/down2.png"
              alt=""
            />
            <img
              v-show="item.name !== '收件量' && item.name !== '发件量' && item.huanbi > 0"
              src="~@/assets/img/up3.png"
              alt=""
            />
            <img
              v-show="item.name !== '收件量' && item.name !== '发件量' && item.huanbi < 0"
              src="~@/assets/img/down3.png"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="cen_right">
        <div class="btn_box" :class="active == 1 ? 'active' : ''" @click="changeData(1)">日</div>
        <div class="btn_box" :class="active == 2 ? 'active' : ''" @click="changeData(2)">月</div>
      </div>
    </div>
    <div class="center_bottom">
      <div class="charts_box"></div>
      <div class="charts_box">
        <div id="trendChart" class="trend_box"></div>
      </div>
    </div>
    <div class="map_wrap">
      <a
        @click="backMap"
        href="javascript:;"
        style="
          position: absolute;
          right: 10px;
          top: 10px;
          color: #fff;
          font-size: 0.16rem;
          z-index: 99;
        "
        >回到原点</a
      >
      <PathMap ref="pathMap"></PathMap>
    </div>
    <div class="right_box">
      <div class="right_top">
        <div class="top_title">
          <div class="left_tit">
            <span class="txt_name">派件入库量占比</span>
            <span class="name">PROPORTION</span>
          </div>
        </div>
        <div class="pie_box" id="pieChart"></div>
        <!-- <div class="pie_bg"></div> -->
      </div>
      <div class="right_cen">
        <div class="top_title">
          <div class="left_tit">
            <span class="txt_name">车辆行驶里程</span>
            <span class="name">VEHICLE MILEAGE</span>
          </div>
        </div>
        <CarMile @doMap="doMap"></CarMile>
      </div>
      <div class="right_bottom">
        <div class="top_title">
          <div class="left_tit">
            <span class="txt_name">车辆报警</span>
            <span class="name">VEHICLE ALARM</span>
          </div>
        </div>
        <CarWarn></CarWarn>
      </div>
    </div>
  </div>
</template>

<script>
import 'echarts-gl'
import axios from "axios";
import * as XLSX from "xlsx/xlsx.mjs";
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import { queryWeath } from "@/api/base";
import PathMap from "../components/pathMap";
import CarMile from "../components/carMile";
import CarWarn from "../components/carWarn";
export default {
  components: {
    PathMap,
    CarMile,
    CarWarn,
  },
  data() {
    return {
      timer: null,
      day: "",
      time: "",
      date: "",
      week: "",
      isFullFlag: false,
      isSupport: false,
      dayData: [],
      monthData: [],
      totalData: [],
      active: 1,
      xData: [],
      yData1: [],
      yData2: [],
      villageData: [],
      villList: [],
      mySwiper: null,
      temp: "",
      weather: "",
      slideList: [
        {
          arr: [],
        },
        {
          arr: [],
        },
      ],
      shouData: [],
      faData: [],
      daoData: [],
      paiData: [],
      qianData: [],
      isActive: 1,
      activeName: "收件量",
      acctiEng: "RECEIVING",
      dateTime: "",
      // isSlide:false
      pieChart: null,
      trendCharts: null,
      chartData: [],
      pieData: [],
      RealData: [],
      borderData: [],
      startColor: [
        "#0e94eb",
        "#c440ef",
        "#efb013",
        "#2fda07",
        "#d8ef13",
        "#2e4af8",
        "#0eebc4",
        "#f129b1",
        "#17defc",
        "#f86363",
      ],
      borderStartColor: [
        "#0077c5",
        "#a819d7",
        "#c99002",
        "#24bc00",
        "#b6cb04",
        "#112ee2",
        "#00bd9c",
        "#ce078f",
        "#00b2cd",
        "#ec3c3c",
      ],
      mapData: [],
      datas: [],
      geoCoordMap: {
        棋山镇: [118.895378, 35.877537],
        东莞镇: [118.972146, 35.991826],
        安庄镇: [118.815076, 35.812024],
        果庄乡: [118.769212, 35.77904], //果庄乡
        洛河镇: [118.833803, 35.753576], //洛河镇
        库山乡: [118.979909, 35.92304], //库山乡
        招贤镇: [118.929219, 35.723248], //招贤镇
        桑园镇: [119.046012, 35.678553], //桑园镇
        阎庄镇: [118.834585, 35.670621], //阎庄镇
        莒县电子商务公共服务中心: [118.901658, 35.60688],
        店子集镇: [118.914151, 35.5844],
        城阳街道: [118.82472, 35.583488], //城阳街道
        峤山镇: [118.946005, 35.657339], //峤山镇
        龙山镇: [119.003747, 35.515955],
        陵阳镇: [118.890825, 35.545056],
        寨里河镇: [118.931584, 35.469982],
        莒县经济开发区: [118.851312, 35.626514],
        浮来山镇: [118.744789, 35.596051],
        刘官庄镇: [118.801123, 35.522202],
        长岭镇: [118.844125, 35.484677],
        小店镇: [118.81007, 35.422484],
        夏庄镇: [118.700674, 35.419525],
      },
    };
  },
  created() {
    this.getTime();
  },
  mounted() {
    this.readExcelFile("http://192.168.1.35:8080/excel/wuliu.xlsx");
    queryWeath().then((res) => {
      this.temp = res.result.now.temp;
      this.weather = res.result.now.text;
    });
  this.$nextTick(() =>{
    this.createPieChart()

  })
  },
  methods: {
    backMap() {
      this.$refs.pathMap.backMap();
    },
    //触发定位地图
    doMap(item) {
      this.$refs.pathMap.queryDingwei(item.deviceId);
    },
    readExcelFile(url) {
      axios
        .get(url, {
          responseType: "arraybuffer",
        })
        .then((res) => {
          // console.log(res);
          let data = new Uint8Array(res);
          //   console.log(data);
          let wb = XLSX.read(data, {
            type: "array",
          });
          //   console.log(wb);
          let sheets = wb.Sheets; // 获取文档数据
          // console.log(sheets);
          this.content = this.transformSheets(sheets);
          // this.$message('读取成功');
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    transformSheets(sheets) {
      const content1 = [];
      for (const key in sheets) {
        content1.push(XLSX.utils.sheet_to_json(sheets[key]));
      }
      console.log(content1);
      this.dayData.push(
        { name: "收件量", data: content1[0][0].日总收件量, huanbi: content1[0][0].收件量日总环比 },
        { name: "发件量", data: content1[0][0].日总发件量, huanbi: content1[0][0].发件量日总环比 },
        { name: "到件量", data: content1[0][0].日总到件量, huanbi: content1[0][0].到件量日总环比 },
        { name: "派件量", data: content1[0][0].日总派件量, huanbi: content1[0][0].派件量日总环比 },
        { name: "签件量", data: content1[0][0].日总签件量, huanbi: content1[0][0].签件量日总环比 }
      );

      this.monthData.push(
        { name: "收件量", data: content1[0][0].月总收件量, huanbi: content1[0][0].收件量月总环比 },
        { name: "发件量", data: content1[0][0].月总发件量, huanbi: content1[0][0].发件量月总环比 },
        { name: "到件量", data: content1[0][0].月总到件量, huanbi: content1[0][0].到件量月总环比 },
        { name: "派件量", data: content1[0][0].月总派件量, huanbi: content1[0][0].派件量月总环比 },
        { name: "签件量", data: content1[0][0].月总签件量, huanbi: content1[0][0].签件量月总环比 }
      );
      this.totalData = this.dayData;
      content1[1].map((item) => {
        this.xData.unshift(item.日期.substring(item.日期.length - 5).replace(".", "-"));
        this.yData1.push(item.到件量);
        this.yData2.push(item.派件量);
      });
      // this.dateTime = content1[0][0].日期.replaceAll(".", "/");
      this.dateTime = content1[0][0].日期.replace(/\D/g, "/");
      // this.$message.success(content1[0][0].日期);
      content1[3].map((item) => {
        this.villageData.push({ name: item.村点名称, upData: item.上行, downData: item.下行 });
      });
      for (var i = 0, len = this.villageData.length; i < len; i += 7) {
        this.villList.push({ arr: this.villageData.slice(i, i + 7) });
      }
      content1[2].map((item, index) => {
        this.mapData.push({ name: item.名称, value: item.收件量 });
        this.datas.push([
          { name: item.名称, value: item.收件量 },
          { name: "莒县电子商务公共服务中心" },
        ]);
        this.shouData.push({ name: item.名称, count: item.收件量 });
        this.shouData = this.shouData.sort(function (a, b) {
          return b.count - a.count;
        });
        this.faData.push({ name: item.名称, count: item.发件量 });
        this.faData = this.faData.sort(function (a, b) {
          return b.count - a.count;
        });
        this.daoData.push({ name: item.名称, count: item.到件量 });
        this.daoData = this.daoData.sort(function (a, b) {
          return b.count - a.count;
        });
        this.paiData.push({ name: item.名称, count: item.派件量 });
        this.paiData = this.paiData.sort(function (a, b) {
          return b.count - a.count;
        });
        this.qianData.push({ name: item.名称, count: item.签件量 });
        this.qianData = this.qianData.sort(function (a, b) {
          return b.count - a.count;
        });
      });
      content1[0].map((item) => {
        this.pieData.push({
          name: item.快递名称,
          value: item.收件量,
          percent: (item.收件量 / content1[0][0].日总收件量).toFixed(4) * 100,
        });
      });
      console.log(this.pieData);
      this.shouData.map((item, index) => {
        if (index <= 10) {
          this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
        } else {
          this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count });
        }
      });
      this.$nextTick(() => {
        this.createChart();
        // this.createCharts();
        // this.createCharts1();
        this.run();
        this.run1();
      });
    },

    createChart() {
      this.trendCharts = this.$echarts.init(document.getElementById("trendChart"));
      window.addEventListener("resize", () => {
        this.trendCharts.resize();
      });
      var option = {
        color: ["#115fff", "#1dd58e"],
        title: {
          text: "仓库收件量趋势",
          textStyle: {
            fontSize: 15,
            color: "#fff",
          },
          top: 12,
        },
        legend: {
          data: ["到件量", "派件量"],
          textStyle: {
            color: "#fff",
          },
          top: 12,
          right: 10,
          itemHeight: 8,
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "18%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.xData,
          axisLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, .1)",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "rgba(255, 255, 255, .7)",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            color: "#fff",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, .1)",
            },
          },
        },
        series: [
          {
            name: "到件量",
            type: "line",
            smooth: true,
            data: this.yData1,
          },
          {
            name: "派件量",
            type: "line",
            smooth: true,
            data: this.yData2,
          },
        ],
      };
      this.trendCharts.setOption(option);
    },

    createPieChart() {
      this.pieChart = this.$echarts.init(document.getElementById("pieChart"));
      window.addEventListener("resize", () => {
        this.pieChart.resize();
      });
      var data = [
        {
          name: "不满意",
          value: 30,
          itemStyle: { color: "#00bfff" },
          startRatio: 0,
          endRatio: 0.7,
        },
        {
          name: "非常满意",
          value: 45,
          itemStyle: { color: "#48f5c0" },
          startRatio: 0.7,
          endRatio: 1,
        },
        { name: "满意", value: 6, itemStyle: { color: "#00dced" }, startRatio: 0.7, endRatio: 1 },
      ];
      var optionConfig = {};

      const getPie3D = (pieData, internalDiameterRatio) => {
        //internalDiameterRatio:透明的空心占比
        let series = [];
        let sumValue = 0;
        let startValue = 0;
        let endValue = 0;
        let k = 1;
        pieData.sort((a, b) => {
          return b.value - a.value;
        });
        // 为每一个饼图数据，生成一个 series-surface 配置
        for (let i = 0; i < pieData.length; i++) {
          sumValue += pieData[i].value;
          let seriesItem = {
            name: typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name,
            type: "surface",
            parametric: true,
            wireframe: {
              show: false,
            },
            pieData: pieData[i],
            pieStatus: {
              selected: false,
              hovered: false,
              k: k,
            },
            radius: "50%",
            center: ["10%", "10%"],
          };

          if (typeof pieData[i].itemStyle != "undefined") {
            let itemStyle = {};
            typeof pieData[i].itemStyle.color != "undefined"
              ? (itemStyle.color = pieData[i].itemStyle.color)
              : null;
            typeof pieData[i].itemStyle.opacity != "undefined"
              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
              : null;
            seriesItem.itemStyle = itemStyle;
          }
          series.push(seriesItem);
        }

        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。

        for (let i = 0; i < series.length; i++) {
          endValue = startValue + series[i].pieData.value;
          series[i].pieData.startRatio = startValue / sumValue;
          series[i].pieData.endRatio = endValue / sumValue;
          series[i].parametricEquation = this.getParametricEquation(
            series[i].pieData.startRatio,
            series[i].pieData.endRatio,
            false,
            false,
            k,
            series[i].pieData.value
          );
          
          startValue = endValue;
        }
// console.log(getParametricEquation)
        let boxHeight = this.getHeight3D(series, 25); //通过传参设定3d饼/环的高度，26代表26px
        // 准备待返回的配置项，把准备好的 legendData、series 传入。
        let option = {
          // backgroundColor: "#203598",
          labelLine: {
            show: true,
            lineStyle: {
              color: "#404772",
            },
          },
          label: {
            show: false,
            position: "outside",
            rich: {
              b: {
                fontSize: 24,
                lineHeight: 30,
                fontWeight: "bold",
                color: "#fff",
              },
              c: {
                fontSize: 18,
                color: "#fff",
              },
            },
            formatter: "{b|{b}}\n{c|{c}%}",
          },
          tooltip: {
            backgroundColor: "#053A8D",
            formatter: (params) => {
              if (params.seriesName !== "mouseoutSeries" && params.seriesName !== "pie2d") {
                let bfb = (
                  (option.series[params.seriesIndex].pieData.endRatio -
                    option.series[params.seriesIndex].pieData.startRatio) *
                  100
                ).toFixed(2);
                return (
                  `${params.seriesName}<br/>` +
                  `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
                  `${bfb}%`
                );
              }
            },
          },
          xAxis3D: {
            min: -1,
            max: 1,
          },
          yAxis3D: {
            min: -1,
            max: 1,
          },
          zAxis3D: {
            min: -1,
            max: 1,
          },
          grid3D: {
            show: false,
            boxHeight: boxHeight, //圆环的高度
            left: 0,
            top: 0, //3d饼图的位置
            viewControl: {
              //3d效果可以放大、旋转等，请自己去查看官方配置
              alpha: 20, //角度
              distance: 250, //调整视角到主体的距离，类似调整zoom
              rotateSensitivity: 0, //设置为0无法旋转
              zoomSensitivity: 0, //设置为0无法缩放
              panSensitivity: 0, //设置为0无法平移
              autoRotate: false, //自动旋转
            },
          },
          series: series,
        };
        return option;
      };


      // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
    

      var option = getPie3D(data, 0.8);
      console.log(option);
      //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
      this.pieChart.setOption(option);
   },

   //获取3d丙图的最高扇区的高度
      getHeight3D(series, height){
        series.sort((a, b) => {
          return b.pieData.value - a.pieData.value;
        });
        return (height * 25) / series[0].pieData.value;
      },

      getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
        // 计算
        let midRatio = (startRatio + endRatio) / 2;
        let startRadian = startRatio * Math.PI * 2;
        let endRadian = endRatio * Math.PI * 2;
        let midRadian = midRatio * Math.PI * 2;
        // 如果只有一个扇形，则不实现选中效果。
        if (startRatio === 0 && endRatio === 1) {
          isSelected = true;
        }
        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
        k = typeof k !== "undefined" ? k : 1 / 3;
        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
        // 计算高亮效果的放大比例（未高亮，则比例为 1）
        let hoverRate = isHovered ? 1.05 : 1;
        // 返回曲面参数方程
        return {
          u: {
            min: -Math.PI,
            max: Math.PI * 3,
            step: Math.PI / 32,
          },
          v: {
            min: 0,
            max: Math.PI * 2,
            step: Math.PI / 20,
          },
          x: (u, v) => {
            if (u < startRadian) {
              return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
            }
            if (u > endRadian) {
              return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
            }
            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
          },
          y: (u, v)=> {
            if (u < startRadian) {
              return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
            }
            if (u > endRadian) {
              return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
            }
            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
          },
          z:  (u, v)=> {
            if (u < -Math.PI * 0.5) {
              return Math.sin(u);
            }
            if (u > Math.PI * 2.5) {
              return Math.sin(u) * h * 0.1;
            }
            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
          },
        };
      },
    // 按照日月更换数据
    changeData(val) {
      this.active = val;
      if (val == 1) {
        this.totalData = this.dayData;
      } else if (val == 2) {
        this.totalData = this.monthData;
      }
    },

    run() {
      this.mySwiper = new Swiper(".swiper1", {
        loop: true, // 循环模式选项
        autoplay: {
          delay: 10000, //10秒切换一次
          disableOnInteraction: false,
        },
      });
    },

    run1() {
      this.mySwiper = new Swiper(".swiper2", {
        loop: true, // 循环模式选项
        // autoplay: true, //可选选项，自动滑动
        autoplay: {
          delay: 10000, //10秒切换一次
          disableOnInteraction: false,
        },
      });
    },

    changeBtn(val) {
      this.isActive = val;
      this.slideList = [{ arr: [] }, { arr: [] }];
      this.isSlide = false;
      if (val == 1) {
        this.activeName = "收件量";
        this.acctiEng = "RECEIVING";
        this.shouData.map((item, index) => {
          if (index <= 10) {
            this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
          } else {
            this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count });
          }
        });
      } else if (val == 2) {
        this.activeName = "发件量";
        this.acctiEng = "SENDING";
        this.faData.map((item, index) => {
          if (index <= 10) {
            this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
          } else {
            this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count });
          }
        });
      } else if (val == 3) {
        this.activeName = "到件量";
        this.acctiEng = "ARRIVING";
        this.daoData.map((item, index) => {
          if (index <= 10) {
            this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
          } else {
            this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count });
          }
        });
      } else if (val == 4) {
        this.acctiEng = "ASSIGNING";
        this.activeName = "派件量";
        this.paiData.map((item, index) => {
          if (index <= 10) {
            this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
          } else {
            this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count });
          }
        });
      } else if (val == 5) {
        this.activeName = "签件量";
        this.acctiEng = "RECEIVING";
        this.qianData.map((item, index) => {
          if (index <= 10) {
            this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
          } else {
            this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count });
          }
        });
      }
      // if(this.slideList){
      //   this.isSlide = true;
      // }
      this.$nextTick(() => {
        //   console.log(this.slideList)
        this.mySwiper.destroy();

        this.run();
      });
    },
    fn(str) {
      let num = null;
      str >= 10 ? (num = str) : (num = "0" + str);
      return num;
    },
    getWeek(e) {
      let arr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      this.week = arr[e];
    },
    getTime() {
      //获取当前时间
      this.timer = setInterval(() => {
        var date = new Date();
        var year = date.getFullYear(); //当前年份
        var month = date.getMonth(); //当前月份
        var data = date.getDate(); //天
        var hours = date.getHours(); //小时
        var minute = date.getMinutes(); //分
        var second = date.getSeconds(); //秒
        this.day = date.getDay(); //获取当前星期几
        this.getWeek(this.day);
        this.time = this.fn(hours) + ":" + this.fn(minute) + ":" + this.fn(second);
        this.date = year + "/" + (month + 1) + "/" + data;
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/font/font.css";
.container_box {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(~@/assets/img/background.jpg);
  background-size: 100% 100%;
  position: relative;
  z-index: 9;

  .top_con {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;

    .left_con {
      width: 20%;
      display: flex;
      justify-content: space-between;
      height: 100%;
      align-items: center;

      .left_txt {
        display: flex;
        width: 100%;
        flex-direction: column;
        height: 55%;
        justify-content: space-between;

        .time_text {
          display: flex;
          margin-left: 0.38rem;
          font-size: 0.34rem;
          font-family: "04B";
          color: #ffffff;
          box-shadow: -4px 5px 10px 0px rgb(64 49 49 / 56%);
        }

        .bittom_left {
          display: flex;
          justify-content: space-between;

          .week_txt {
            font-size: 0.14rem;
            letter-spacing: 0px;
            color: #ffffff;
            margin-left: 0.38rem;
          }

          .uodate_time {
            font-family: "FZSK";
            font-size: 0.14rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
            box-shadow: -1px 2px 3px 0px rgb(64 49 49 / 60%);
            opacity: 0.8;
            color: #fff;
            .time_txt {
              font-size: 0.16rem;
              font-family: "04B";
            }
          }
        }
      }
    }

    .center_con {
      width: 60%;
      height: 80%;
      text-align: center;

      .con_title {
        font-family: "FZSK";
        font-size: 0.44rem;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #ffffff;
        // box-shadow: -0.04rem 0.05rem 0.1rem 0px
        //   rgba(64, 49, 49, 0.56);
      }
    }

    .right_con {
      width: 17%;
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: 3%;

      .right_txt {
        width: 100%;
        height: 53%;
        display: flex;
        justify-content: space-between;

        .left {
          display: flex;
          align-items: flex-end;
          img {
            width: 0.13rem;
            height: 0.16rem;
            margin-right: 0.1rem;
          }

          .pos_text {
            font-family: "FZSK";
            font-size: 0.16rem;
            color: #ddecff;
          }
        }

        .bottom_right {
          display: flex;
          align-items: center;
          margin-right: 0.38rem;
          img {
            width: 0.8rem;
            height: 0.8rem;
          }
          div {
            height: 100%;
            font-family: "FZSK";
            font-size: 0.16rem;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
        }
      }
      div {
        font-size: 0.16rem;
        color: #fff;
      }
    }
  }

  .left_box {
    width: 24%;
    height: 80%;
    position: absolute;
    top: 14%;
    left: 3%;

    .top_title {
      width: 100%;
      height: 0.38rem;
      background: url(~@/assets/img/tit_bag.png);
      background-size: 100% 100%;
      display: flex;

      .left_tit {
        width: 100%;
        height: 100%;
        font-size: 0.1rem;
        color: #fff;
        display: flex;
        align-items: center;

        .txt_name {
          margin: 0 0.1rem 0 0.6rem;
          font-family: "FZSK";
          font-size: 0.22rem;
          letter-spacing: 0px;
          color: #ffffff;
        }

        .name {
          font-family: "FZSK";
          color: #ffffff;
          box-shadow: -4px 5px 10px 0px rgba(39, 8, 8, 0.81);
          opacity: 0.6;
          margin-bottom: 0.1rem;
        }
      }

      .right_tit {
        display: flex;
        align-items: center;
        margin-right: 0.18rem;
        position: relative;

        .title_txt {
          width: 0.42rem;
          height: 0.32rem;
          display: flex;
          align-items: center;
          justify-content: center;
          background: url(~@/assets/img/bg.png);
          background-size: 100% 100%;
          cursor: pointer;

          &.active {
            background: url(~@/assets/img/active_bg.png);
            background-size: 100% 100%;
          }
        }

        div {
          font-size: 0.18rem;
          color: #fff;
        }
      }
    }

    .left_top {
      width: 100%;
      height: 57%;

      .top_title {
        .left_tit {
          width: 50%;
          height: 100%;
          font-size: 0.1rem;
          color: #fff;
          display: flex;
          align-items: center;

          .txt_name {
            margin: 0 0.1rem 0 0.6rem;
            font-family: "FZSK";
            font-size: 0.22rem;
            letter-spacing: 0px;
            color: #ffffff;
          }

          .name {
            font-family: "FZSK";
            color: #ffffff;
            box-shadow: -4px 5px 10px 0px rgba(39, 8, 8, 0.81);
            opacity: 0.6;
            margin-bottom: 0.1rem;
          }
        }
      }

      .cen_con {
        width: 100%;
        height: 89%;
        margin-top: 0.18rem;

        .table_line1 {
          width: 100%;
          height: 0.38rem;
          display: flex;
          align-items: center;
          background: url(~@/assets/img/tab_bg.png);
          background-size: 100% 100%;

          .table_item {
            width: 33%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-family: "FZSK";
            font-size: 0.16rem;
            color: #ffffff;
          }
        }

        .swiper-container {
          width: 100%;
          height: 88%;
        }

        .table_con {
          height: 100%;
        }
        .table_line {
          width: 100%;
          height: 8.6%;
          display: flex;
          align-items: center;

          &.ac_no {
            height: 10%;
            background: url(~@/assets/img/tab1.png);
            background-size: 100% 100%;

            div {
              font-family: "FZSK";
              font-size: 0.18rem;
              letter-spacing: 0px;
              background-image: linear-gradient(
                to bottom,
                #fceece,
                #e39054
              ); /* 线性渐变背景，方向向上 */
              -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
              -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
            }

            &:nth-child(2) {
              background: url(~@/assets/img/tab2.png);
              background-size: 100% 100%;
              div {
                background-image: linear-gradient(
                  to bottom,
                  #cefce7,
                  #16da85
                ); /* 线性渐变背景，方向向上 */
                -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
                -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
              }
            }

            &:nth-child(3) {
              background: url(~@/assets/img/tab3.png);
              background-size: 100% 100%;
              div {
                background-image: linear-gradient(
                  to bottom,
                  #cef6fc,
                  #1ca4f2
                ); /* 线性渐变背景，方向向上 */
                -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
                -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
              }
            }
          }

          .table_item {
            width: 33%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 0.14rem;
          }
        }

        // div{
        //   font-size: 0.18rem;
        //   color: #fff;
        // }
      }
    }
    .left_bottom {
      width: 100%;
      height: 38%;
      margin-top: 2%;

      .table_box {
        width: 100%;
        height: 88%;
        margin-top: 0.15rem;
        // overflow-y: auto;

        .swiper2 {
          width: 100%;
          height: 92%;

          .swiper-wrapper {
            width: 100%;
            height: 100%;

            .swiper-slide {
              width: 100%;
              height: 100%;
            }
          }
        }

        .table_con {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
        }

        .tab_con {
          height: 55%;
        }
        .table_line1 {
          width: 100%;
          height: 0.38rem;
          display: flex;
          align-items: center;
          background: url(~@/assets/img/tab_bg.png);
          background-size: 100% 100%;

          .table_item {
            width: 33%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: "FZSK";
            font-size: 0.16rem;
            color: #ffffff;

            img {
              width: 0.18rem;
              height: 0.16rem;
            }
          }
        }

        .table_line {
          width: 100%;
          height: 0.4rem;
          display: flex;
          align-items: center;

          .table_item {
            width: 33%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        div {
          font-size: 0.14rem;
          color: #fff;
        }
      }
    }
  }

  .center_top {
    width: 46%;
    height: 12%;
    background: url(~@/assets/img/data_bg.png);
    background-size: 100% 100%;
    position: absolute;
    left: 28%;
    top: 15%;
    display: flex;

    .cen_left {
      width: 86%;
      height: 100%;
      display: flex;

      .data_box {
        width: 20%;
        height: 100%;

        &:first-child {
          .data_text {
            background-image: linear-gradient(
              to bottom,
              #fceece,
              #e39054
            ); /* 线性渐变背景，方向向上 */
            -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
            -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
          }

          .data_txt {
            .hb_data {
              background-image: linear-gradient(
                to bottom,
                #fceece,
                #e39054
              ); /* 线性渐变背景，方向向上 */
              -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
              -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
            }
          }
        }

        &:nth-child(2) {
          .data_text {
            background-image: linear-gradient(
              to bottom,
              #cefce7,
              #16da85
            ); /* 线性渐变背景，方向向上 */
            -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
            -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
          }

          .data_txt {
            .hb_data {
              background-image: linear-gradient(
                to bottom,
                #cefce7,
                #16da85
              ); /* 线性渐变背景，方向向上 */
              -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
              -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
            }
          }
        }

        .data_txt {
          font-size: 0.16rem;
          color: #fff;
          color: #ffffff;
          .hb_txt {
            font-size: 0.14rem;
            color: #ffffff;
            opacity: 0.7;
          }

          .hb_data {
            margin-left: 0.1rem;
            font-size: 0.14rem;
            background-image: linear-gradient(
              to bottom,
              #76e4ff,
              #1c77f2
            ); /* 线性渐变背景，方向向上 */
            -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
            -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
          }
        }

        .data_text {
          font-family: "ALHY";
          font-size: 0.26rem;
          line-height: 0.5rem;

          background-image: linear-gradient(
            to bottom,
            #76e4ff,
            #1c77f2
          ); /* 线性渐变背景，方向向上 */
          -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
          -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
        }
      }
    }

    .cen_right {
      width: 8%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .btn_box {
        font-size: 0.18rem;
        color: #fff;
        width: 0.46rem;
        height: 0.35rem;
        background: url(~@/assets/img/bg.png);
        background-size: 100% 100%;
        margin-bottom: 0.03rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "FZSK";
        font-size: 0.22erm;
        color: #ffffff;
        cursor: pointer;

        &:first-child {
          margin-left: 0.13rem;
        }
      }

      .active {
        background: url(~@/assets/img/active_bg.png);
        background-size: 100% 100%;
      }
    }
  }

  .center_bottom {
    width: 44%;
    height: 25%;
    position: absolute;
    left: 28%;
    bottom: 2%;
    z-index: 11;
    display: flex;

    .charts_box {
      width: 50%;
      height: 100%;

      .trend_box {
        width: 100%;
        height: 100%;
      }
    }
  }
  .right_box {
    width: 24%;
    height: 80%;
    position: absolute;
    top: 14%;
    right: 2%;

    .top_title {
      width: 100%;
      height: 0.38rem;
      background: url(~@/assets/img/tit_bag.png);
      background-size: 100% 100%;
      display: flex;

      .left_tit {
        width: 100%;
        height: 100%;
        font-size: 0.1rem;
        color: #fff;
        display: flex;
        align-items: center;

        .txt_name {
          margin: 0 0.1rem 0 0.6rem;
          font-family: "FZSK";
          font-size: 0.22rem;
          letter-spacing: 0px;
          color: #ffffff;
        }

        .name {
          font-family: "FZSK";
          color: #ffffff;
          box-shadow: -4px 5px 10px 0px rgba(39, 8, 8, 0.81);
          opacity: 0.6;
          margin-bottom: 0.1rem;
        }
      }

      .right_tit {
        display: flex;
        align-items: center;
        margin-right: 0.18rem;
        position: relative;

        .title_txt {
          width: 0.42rem;
          height: 0.32rem;
          display: flex;
          align-items: center;
          justify-content: center;
          background: url(~@/assets/img/bg.png);
          background-size: 100% 100%;
          cursor: pointer;

          &.active {
            background: url(~@/assets/img/active_bg.png);
            background-size: 100% 100%;
          }
        }

        div {
          font-size: 0.18rem;
          color: #fff;
        }
      }
    }

    .right_top {
      width: 100%;
      height: 34%;

      .pie_box {
        height: 83%;
        width: 50%;
        background: url(~@/assets/img/pie_bg.png);
        background-size: 100% 100%;
        background-position: 0% 10%;
      }

    }

    .right_cen {
      width: 100%;
      height: 33%;
    }
    .right_bottom {
      width: 100%;
      height: 33%;
    }
  }

  .map_wrap {
    position: absolute;
    left: 5.2rem;
    top: 28%;
    width: 8.82rem;
    height: 4.2rem;
  }
}
</style>