<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">上行</div>
            <div class="table_item">下行</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>
    <div class="center_bottom"></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>
      <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 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;
    });
  },
  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();
      });
    },

    run() {
      this.mySwiper = new Swiper(".swiper1", {
        loop: 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;
          }
        }

        .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: 44%;
    height: 12%;
    background: red;
    position: absolute;
    left: 28%;
    top: 15%;
  }

  .center_bottom {
    width: 44%;
    height: 25%;
    background: red;
    position: absolute;
    left: 28%;
    bottom: 6%;
    z-index: 11;
  }
  .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%;
    }

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

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