From fc5e45eb7252aa91dadbe70040eb3e587b6d53da Mon Sep 17 00:00:00 2001
From: jinna <jn517618@163.com>
Date: Thu, 19 Jan 2023 10:01:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2UI=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/active_bg.png | Bin 0 -> 1152 bytes
 src/assets/img/bg.png        | Bin 0 -> 1220 bytes
 src/assets/img/tab1.png      | Bin 0 -> 2413 bytes
 src/assets/img/tab2.png      | Bin 0 -> 2415 bytes
 src/assets/img/tab3.png      | Bin 0 -> 2417 bytes
 src/assets/img/tab_bg.png    | Bin 0 -> 1870 bytes
 src/views/dashboard/home.vue | 779 +++++++++++++++++++++++++++++++++--
 7 files changed, 747 insertions(+), 32 deletions(-)
 create mode 100644 src/assets/img/active_bg.png
 create mode 100644 src/assets/img/bg.png
 create mode 100644 src/assets/img/tab1.png
 create mode 100644 src/assets/img/tab2.png
 create mode 100644 src/assets/img/tab3.png
 create mode 100644 src/assets/img/tab_bg.png

diff --git a/src/assets/img/active_bg.png b/src/assets/img/active_bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..730e2199232a54669fd841329ea5dc55b9fe2a04
GIT binary patch
literal 1152
zcmbVMTWHi+7>-x8Qba9yhnOl}c5}Z>5<2S4WJU*^TE>Caec0VI$(c5^$%)CSGp!0L
zJ}7v3@<|0BL_tJ+SQbS^s!(w$3X8tT!q%0o6csDJEUcg>?M(Hd_+TJ8|2gOXzW<&R
z9ql`sn^rYZ6xE#HX%)%Jk+*fheDZz0Q6DGEN}TP&dr$>eK?tdogUXQ3d!QQ@A#euv
zJ%Vi%HD|wD>cU-xU8apZ4#YZK%?k*cqT06A0$}$-OqXG|>nE9ax9>5u>m->@wICFN
z4D4}t4u){gV0+0P?6nPt*|wE#tC@trgBZ{?ug{OnT9TRMHHjP_^9((yf_sz9lv7=W
z4myKENUNO2+M=S;34;?gSuu<sX-N=uUeI|_W<||Z1XGge`oj=wp;Ix7R<3S~?2=3m
z#(~N6)oPWi${Y&2dC@QoUXXZ6Vu=PD4fq(;SU+lQFjz3MLpQ)K^68inlu<uUGQ`uV
z5WJvJm?rk4dZI|m_!<a!krQ~&i{qNqj&Kovabrg9s5B5jz6c}KAKIiImDUEB<nG&s
zVnyPOxjS@8Q9z%C?0ygWIBz8xa>F^UW7@V3Apim^X}ZB`P)V?Q+0j@HIJTxpP_3xt
z2G2}*)zT%|N+*njkP^kLmDbW)E}PB>szL-g)xhTc2m{}S4cjiUUB_zQ#G0890*t~E
zLVb-c=;%QhMLj5>Gnu&R2ED1%^&M1=HpgX}irRvqyB|8a5P9@uo=tZKA7n|@Y(pXe
z+q%FeBt>BjL6%t+LS5F%Di9@uspFmR%^y#k;^Suds(Bhmq$6W-dKAcJdYGV3CMYDM
z^5^67Q!-{3^H!=<d;aEWs_8J@atwS}@b=A$XYb8&|4B2qVg2!mzitNeb2kd-&OH2o
z?eN=u!wdhuyJqaxp?_cf6FgaWbM(~2im_v>DhHLem%qK-5e%&!od7=t|GA4!&;I4e
zi`(-Sf66w0_<gjcm(gdRXGWH`FRLuPvUl0gfd}sWkryQ}7F<=A+}U`3%gEd-i{zp4
q%NIsv;p4TT@%xv4KHGVC7L_{j!>#RG{#YLW6Y|-1>w5avqn`ndyMaUi

literal 0
HcmV?d00001

diff --git a/src/assets/img/bg.png b/src/assets/img/bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..8578e697b50f257cbf754187e8a98fd2fc5c7c21
GIT binary patch
literal 1220
zcmbVM$!{A~7@rc7(njfaVHFyUr4*FTKAtT$k>g2-MQnm?l=#;1%(FdmX6ejxJWdZ?
zSgigBr9yyIiiD6#s&Xk5HTDG|HBwbosGt@l5|>a=fkO`nA>KG~;1Kn|ljg18@B4n=
zHs|JYua4}0Za;=$Bbga3k5&qOv8RU6{NSj(iI!*K)B-HH71-2$fTc{g4DgJtS3w@=
zX6wYaAc0{6OIC3KE@Wp_!?h_rlA%J|Lud?3OoX0p)B(iHplUfu;^9{}2;4H0#C$x<
zWW6+~Su@K%C@klS#&X?IOk&~{JQ1o$feoOJhxVcqs9}=m=~dA_x~2)dCj#q9VvE#5
zb`DRwKEUIYNE)mV$0dbgMP5*pV>rjKGR?>|%ag3A3XIBe`1T->HQ%hLd2M>z7CI$~
z8ibxo)6Hg+YVwrpS7}yJ6q?~^jw6u-8MGXzholq4`WiG47{28}%XRQbqh59!Fi9Y$
zTQ1mMHoK$P3AO`;LPm$WN3#?|+jitvPdb2k@Gp&BrGsM219Tn)Zo@ZFJ}R+37{%`K
zh9W`4Mt$A4P*U_o%{3Y}a9~DD66l38EmJiN830{pNKTX$QUroT%4Jg|Mcp(+fdlbM
zyxiBb8(x&TX?9YS6p2Z(?36ai3!1{SDNbVqNlYt!Y{m(o?iiqN+d{UtvEpN~YT5@n
zbp4|1F7~TnuI55FsJR}VPDfc+@R#N-$8?*)%Tb!Pyw-qkEdg`dcWt~EXVuz;1JA`p
zL*bCahRl!>CkUj%@H`m@K<34ATxU7t!xrBBzwx6HDLN{a{}fOE3RPsZ-Dw4M*l8x<
zpbqj;tNb$l^CQ$|KV`I3G5q1q-76zq=Fs5WH%|<GbWz_s{^*(Fd#96JsWNl-%)7_V
zJXziM+8ZB_7ydqV`^}}_;kAdv{nlUdCF(ZaE`25)IJuema^OK~+3HkRt@f$)VLWlQ
zdvTENBr+47Tl1UEmXP@Vi$dc{XJD-N(mwdfQ2XHM^NE#iF#N&kx0L#CM{dSEW_~1h
zcy=^2-;s{y4&O|^KYIS8ymnz_H8yr#IdS2*vr+8a>wfy(+k0LtZLFOu3|{SSo-J+c
z3$u4Vy!_*zFJSdQR@T36>|xJeI&foHYL}Y7u8*x^*J`tCpC2Kgj{Yl|shoCs^7z?*
E00ZEeF8}}l

literal 0
HcmV?d00001

diff --git a/src/assets/img/tab1.png b/src/assets/img/tab1.png
new file mode 100644
index 0000000000000000000000000000000000000000..b908a46a826896072212179cdc1187c8b83c652e
GIT binary patch
literal 2413
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

literal 0
HcmV?d00001

diff --git a/src/assets/img/tab2.png b/src/assets/img/tab2.png
new file mode 100644
index 0000000000000000000000000000000000000000..046a8c7eb6e634d628da13d70afcbc709e14b0af
GIT binary patch
literal 2415
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
GC;317*XHs7

literal 0
HcmV?d00001

diff --git a/src/assets/img/tab3.png b/src/assets/img/tab3.png
new file mode 100644
index 0000000000000000000000000000000000000000..28ae9065ed17525fef474f4c0e4659bc937467da
GIT binary patch
literal 2417
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
CGwuuk

literal 0
HcmV?d00001

diff --git a/src/assets/img/tab_bg.png b/src/assets/img/tab_bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..be899594d09a1f484a394425dc4b22a09382e990
GIT binary patch
literal 1870
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
B+b{qC

literal 0
HcmV?d00001

diff --git a/src/views/dashboard/home.vue b/src/views/dashboard/home.vue
index e6b88f6..d8fb63f 100644
--- a/src/views/dashboard/home.vue
+++ b/src/views/dashboard/home.vue
@@ -36,46 +36,445 @@
       <div class="left_top">
         <div class="top_title">
           <div class="left_tit">
-            <span class="txt_name">收件量</span>
-            <span class="name">RECEIVING</span>
+            <span class="txt_name">{{ activeName }}</span>
+            <span class="name">{{ acctiEng }}</span>
           </div>
           <div class="right_tit">
-            <div class="title_txt">收</div>
-            <div class="title_txt">发</div>
-            <div class="title_txt">到</div>
-            <div class="title_txt">派</div>
-            <div class="title_txt">签</div>
+            <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 class="left_bottom"></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);
@@ -257,17 +656,72 @@ export default {
     top: 14%;
     left: 3%;
 
-    .left_top {
+    .top_title {
       width: 100%;
-      height: 55%;
+      height: 0.38rem;
+      background: url(~@/assets/img/tit_bag.png);
+      background-size: 100% 100%;
+      display: flex;
 
-      .top_title {
+      .left_tit {
         width: 100%;
-        height: 10%;
-        background: url(~@/assets/img/tit_bag.png);
-        background-size: 100% 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%;
@@ -292,39 +746,300 @@ export default {
             margin-bottom: 0.1rem;
           }
         }
+      }
 
-        .right_tit {
+      .cen_con {
+        width: 100%;
+        height: 89%;
+        margin-top: 0.18rem;
+
+        .table_line1 {
+          width: 100%;
+          height: 0.38rem;
           display: flex;
           align-items: center;
-          margin-right: 0.18rem;
-          position: relative;
+          background: url(~@/assets/img/tab_bg.png);
+          background-size: 100% 100%;
 
-          .title_txt {
-            width: 0.4rem;
-            height: 0.3rem;
-            margin: 0 0.03rem;
+          .table_item {
+            width: 33%;
+            height: 100%;
             display: flex;
-            align-items: center;
             justify-content: center;
+            align-items: center;
+            color: #fff;
+            font-family: "FZSK";
+            font-size: 0.16rem;
+            color: #ffffff;
+          }
+        }
 
-            &::after {
-              content: "";
-              width: 0.4rem;
-              height: 0.3rem;
-              position: absolute;
-              border: solid 1px #127cff;
-              top: 50%;
-              transform: skew(-10deg) translateY(-50%);
+        .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; /* 文字填充颜色变透明 */
+              }
             }
           }
 
-          div {
-            font-size: 0.18rem;
+          .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>