From 66f68dea88754c02771cc0b04f937fb5b24f4efe Mon Sep 17 00:00:00 2001
From: dhy1725534722 <1725534722@qq.com>
Date: Fri, 22 Sep 2023 13:13:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=A6=96=E9=A1=B5tab?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/bg1.png                  | Bin 0 -> 1019 bytes
 src/assets/images/bg2.png                  | Bin 0 -> 820 bytes
 src/assets/images/tb1.png                  | Bin 0 -> 886 bytes
 src/assets/images/tb2.png                  | Bin 0 -> 723 bytes
 src/views/yingji/echarts/executionPlan.vue | 144 +++++++
 src/views/yingji/enterprise.vue            |   7 +-
 src/views/yingji/home.vue                  | 429 ++++++++++++++-------
 7 files changed, 435 insertions(+), 145 deletions(-)
 create mode 100644 src/assets/images/bg1.png
 create mode 100644 src/assets/images/bg2.png
 create mode 100644 src/assets/images/tb1.png
 create mode 100644 src/assets/images/tb2.png
 create mode 100644 src/views/yingji/echarts/executionPlan.vue

diff --git a/src/assets/images/bg1.png b/src/assets/images/bg1.png
new file mode 100644
index 0000000000000000000000000000000000000000..a2e6a2656a966000f1490adb985206a2c22681c6
GIT binary patch
literal 1019
zcmV<X0|fkuP)<h;3K|Lk000e1NJLTq001HY001Hg1^@s6I!6n_00001b5ch_0Itp)
z=>Px&wMj%lR9Hvtm|bWbRTRg6XSZD|ie+1CO<sJ^JQRb9ilQhgQb9$epiy5W7R;?*
z4;7SVX2k_F6Y7%+>dw{=e9@YUsQ7^qsb3TYp-44W@~9+Y(?%_}n#s<QyP0iw*PZQb
z9k5`BeHiAR`#=9XXYcRcJ3`atc+U?)?lzz=eyq*y8QteW_kn!myJlxYQyMpp7rX}C
znNhN|GG7!zHk8X|u5M)1uf8g(cg4LA0zalzI-WRDR;h4y+;^|<nsrioV%xeX7fr<v
z->T&q-nzy7c038v_PKpxB0n%a|2XiN?W4l5I9~81@Cb0gcg^awVp+sFUa$uk1f8%(
zUIaF(uxH#c7i5tjt%f^ReNRPiQelTR5&$DAd^hfx!L%Y-#JOX^hbr8l!t2&Z1u(#r
z@0#<oNRU>;@v4)c>w)b@jQp3SX)yx)P|I_<9nGnK7LM>G?dW=mJG^2+RhC7|78l<J
zu4^|E0f%D2BqPnF{Wmc-O$|5=$hRBmWl&ki9{rC1KZ){iw+t%yz<Huf0xxumRncof
z?gtKvssUL{(o~@YSY#YEBFb*BWG?Pz#PNbpfNMl$%qxx5sn~uwUS&PVqzb=`J7#Tn
zy~>*)8`?{A%<1cR)vrJ=1AWeSH$BkVNOc(WWnh0HEcTbnLkme}I!@m-964#^pY{Jg
zmF7g6H8UzWwj83;LQNI5zZysxI2ZUB#ByXsbNNK0zbvv<<X+%+kj*MuYu8)KK^Wz9
zR1~|=wg4?_TK1yXV#KolK-@dmrlKlDq7;GUz+qq>IHfJlGQ+MPXT)nsqF&s-D%NW;
z^8MVITxf;+XNxVRndzI?`C>5|nErLw640dLyCe6N%M*oWBNkqcSKSC|cYSk(kaK4G
z2;23R`b;e@Ebp^R#q~Y!M;tHM1ze%RQ{#@=-09uBW0gBpWV<!uyJpQXmW=m-8&4v>
z@s>{5wWfZY5ak=MWG?Dn)2tC6ybIhMA1A8MfIcM3&tAzi4&NR9I9~82)c3W|`mT8}
zVLx&=$SZamFg;LQyJKj`Vj)4VF)(>UM*VG9i$<TtL`~fA*mlPYJ_oJ>+3LF^TM}l?
zEh_R3u+MkRSzSyFf!c$=W!9s0UN~N`8)%f}Taek#0+u1HTsox7-cB(p+8<*(RN+%m
z>F{YoEf_D2`yVQVvn%7T0WYn|Y50M{CB1MtgV-5Sz11si`nrXnqkiQcQMnR0J%c0(
p5}Fg0KcbvW?O&}=SB(j6;NPB8Q#|<PwW|OC002ovPDHLkV1nN0-mCxs

literal 0
HcmV?d00001

diff --git a/src/assets/images/bg2.png b/src/assets/images/bg2.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c47dda03fb8707751176af3ed631db5e7634045
GIT binary patch
literal 820
zcmV-41Izr0P)<h;3K|Lk000e1NJLTq001HY001Hg1^@s6I!6n_00001b5ch_0Itp)
z=>Px%?ny*JR9Hvtm|KWVVHC%Ie{v}@A%=PJz{^Ak5fKuFBqf&@4TanuC_==86i+A`
zMe^dFkV{CeiBglsWjqsNj1Y2NT6|k)A7`JlP3O$a!|bQs{?_IHeQT}%THh8KkC_bs
zW&*v#XUkkK(tBIrHE>zd)ySrz7c)By%qfzyv}SGrGbGjj24ZH1fVn~Y1MoDhrAEqi
z19}DBI!To>vr6Dm_;?DalJu^T4pOO^nTKZ+urVl9IgstZYM?<<_f(dOBxGi_fam2g
z2eKbn0MtqvSR@~*%$V6ZU<z>Df$Rkq0S_fPx+Z(f>>@A;IO;&EfyJIDlKM9pia$ki
z377~R$pq4zp@{)`0*nYJ@|RyqbV5#)KY`Q0`0Nw$g-->5WHN0M*fcWk<_FLT@KTPQ
zNQpL|%4`hCGhkH#wXHxuz>{oWg6ue8Dc}t4Mese3%?*H4Mhr-eq#^l$nAtU8EU-mV
z#ELN$GxI8NpsysA7qEBIdrdZwg5_&wcY)!+9!bk`IWe;;-~jLjsF3tE2~1M?wgPDl
zO_Vc9InrXP<~guFfmxj`oe4JseSs^1M>=Lz#Fs$X3xW5*%Al8vg}(vo0B^J{lUaSo
z4Pl3EvUVCZsjfgf;4|<R=#VAnoZ<bWOE`&q_S~P(u5K@OB9DPVc|zk&@pd4zYDr7X
ztbHaBCoePeY0sy=dY}*BA;=XPr+#PP3I9Ehn3)3^3G9&M@&D&Bv)OLgfk^66fa1>s
zlUsSD5RWu_uZgY`_azN35Yu9J-?PBf=sK|rSOL706kWb^;xV&3VXoaRX?a4j&I1mH
zF`!(MmuZr{Xk#aQiXQ{q2$G2dkFT5AO<**zP14!~Ak%;|e&d(aGY^PafM5Kbv(`kH
z@ERZr%LCv=f&m|j%EBeRE<vUu(6;l(b;qAW&WUkY`0fLHSp>xE{Q@vFUyhVu&HLMQ
yN%vxmXJ+$(Q9$PsIE_qtC_aWi5IZIL$?*&P9N@Of4f+!R0000<MNUMnLSTYrB5oD{

literal 0
HcmV?d00001

diff --git a/src/assets/images/tb1.png b/src/assets/images/tb1.png
new file mode 100644
index 0000000000000000000000000000000000000000..3599e7932aa932345a34ca584bdf1aa735493f7f
GIT binary patch
literal 886
zcmV-+1Bv{JP)<h;3K|Lk000e1NJLTq001Tc001Hg1^@s6Gpwt)00001b5ch_0Itp)
z=>Px&FiAu~R9Hvtm`{k6RT##9@0oA3F~x`$Mp_GrO3LgH5#dUWz)fJ-Mv^qVXWSHs
zDRa&&E;Qe{nL^M%?q`%0EfN%?g#~FlZ6Q%=q>DBYx@j?n*@f}WdE?Bzw`O$odarN;
zxd#q>@SW$p56^kO_kGSM+{73O)wL$dYbx9c693yu4e+N5?^T@rvYQan4Jct;UR@1x
zq&;5N24DKR{koYex+XRfif=_(1N;qo3Pc)HwJ~KmFi(Xe6=$FA88Md^$AD*mpM$rL
zTp8Hq#cAMSkYmA@R`!xuI>yz&nc(fRS&01tJOmsK-X>)`8eJcy%ZnDVv%%X$V8(EH
zaRzv>Ppl<NU$KrdbE=Nrf;r~Lij~pmA`^{96E%rqq6|bMwYd}L50}g3*z>Q_<;4Nu
zh3lNqPr=*AdP;006kA34pk3MoZ&M5DZgi7lF0bwfc@e0I$`*)!MZ-WkQiydGc^6n5
zyv=${Z11O_8<X=0-rjL_QLcUu^7K`TmCMClm$Uj%O2roF@?a*>%pKqJ`o>GsH|j<)
zKURFK!Y1HiJ<INSYv(H$uh{cPV8sk#E-yX=HUPH))4UZ))o~T}RGfYDW(sV_#Qa#X
zONAZnvQ1Rh<)fuT4L{a-9qX8w%ZuNDdx779FMv!1F;P=O4gp($Il$+^+n0Jt>{nnZ
z@Kx~k`B|L81z_R-LF}3qrCff0{={H*9#|mCzI@bf?xkYaB(`JMM+>rg{al~e^m1`M
zx7k;$QG#X`*uG+&wxqsdw~}IKfd|^RB>g1#;bdDF3Du*bvI;mAynS?*Hg*zNuA<*n
z+;F<Frynu<KwiFKKj!ixwVb<EIBlYOFj+KFOk@(wd=*WWXb9v$@TK+5mUIGmGBth`
zUNupqfk_t(RZ-pnmH;P$w@)=O2Z41r>|kA9{RZT@cD4t^1z)N(gCy_1wLOL+cstxs
zdGB^n-Q5oJuTdO*qgXmQz;RLL0RzC)l?tXzVtSqg&eeu4J^uE#ZMF1b`|i(fpEFTQ
z1#wZbNzL_XZOg9LfeR{wPgLCIKc*SXAAtLtaa#MgVkOLY@b<oc0Pk@`Py$l8^#A|>
M07*qoM6N<$f<L~YDF6Tf

literal 0
HcmV?d00001

diff --git a/src/assets/images/tb2.png b/src/assets/images/tb2.png
new file mode 100644
index 0000000000000000000000000000000000000000..caa6ada7a45da60c9f3503ef5976ff20a5b8e242
GIT binary patch
literal 723
zcmV;^0xbQBP)<h;3K|Lk000e1NJLTq001Tc001Hg1^@s6Gpwt)00001b5ch_0Itp)
z=>Px%jY&j7R9Hvtn9YmLVHC$dUnY5tWI^5*l9#-bBr7ke*{Bg45lXQ!8(HuNAXZ38
z8Onkhkp+se8y1tiW@cd{v9UnjHq2K?&z<g_xpVLD-djJ?J@xC}?tRYleEXjBJLmfx
z(SX@*1=@khK!4FzBY@AqSxGnRIYRX~g^%qG!2JyVt&;9!SXZ*75n%U#jlg%{IS_lr
z<Mb>6#s+vvoALzK4Xg!TN?JVlVB0T%ML@Ttb$J4dFh)3gB`qui>=m#8=#mu7)?|%@
zvH+}4QUEA1+r7a2Ca?l6wwsLAl$`%1W45DwOf9N;LCQ$r2XI?bf9`Lk?M`58h44I;
zv^-Z}whsX3s^yHrsx2Ds|9W!F_BCL83fVs3YYJhsv7f*hV1}fYyn$T?c7^hgG^tEc
zegv!;!kFzTz?eZ2CcuA`^sRWKIvKkN>;b+2(<Q~{fZ2WmEGq$K`vR~77+nq+a7xng
zMhdL$+JM<U0UXYdZ*7upBt2Gh<*x_W8(<dj7PtzuByAN58KI3t9R*yGv@=g&uYozh
zElFF-B;_Yy;@<!^tVFRr9(WH-06HY?&6BZ8zyi>_Ca~giQAusuZZbBcz&07Hqw+W3
z%9@(^zno)zz`P7C>5`<7EiqK-0@laeLekPQZR{Bk^NR<P;>I369l-9)ddzmToM}MJ
z8;%w=@n1l+q>x0>%sVA*ONaCTt5V}XSZ1hl8kh<6NLrnIt^;kE6|C*Mz~&6H=ZK_Z
z>5$Owq2a69c}e?|&mrJsHHQJAXgid}!!$OEYgB0Pu)<g=n2Ub7LQ-6@A}r&8P@HiM
z3z_ui=j0RLLo$UbSt;p5k-&Tm%uQOquz%sK@Cmg%`!~oQ!9n>_w-5jT002ovPDHLk
FV1g6RPDTI#

literal 0
HcmV?d00001

diff --git a/src/views/yingji/echarts/executionPlan.vue b/src/views/yingji/echarts/executionPlan.vue
new file mode 100644
index 0000000..3533d2c
--- /dev/null
+++ b/src/views/yingji/echarts/executionPlan.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="mains1"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      var chartDom = document.getElementById("mains1");
+      var myChart = echarts.init(chartDom);
+      var option = {
+        title: {
+          show: true,
+          text: "各区域执法计划",
+          textStyle: {
+            color: "#3D434D",
+            fontSize: 16,
+          },
+          left: 34,
+          top: 15,
+        },
+        tooltip: {
+          // show:false,
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+            shadowStyle: {
+              color: "rgba(237,240,242,0.5)",
+              //   opacity: 0.1,
+              //   shadowColor: "rgba(237,240,242,0.5)",
+              //   shadowBlur: 10,
+            },
+          },
+          showContent: false,
+        },
+        grid: {
+          left: "3%",
+          right: "3%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [
+              "苏州",
+              "张家港市",
+              "常熟市",
+              "太仓市",
+              "昆山市",
+              "吴江区",
+              "吴中区",
+              "姑苏区",
+              "相城区",
+              "工业园区",
+              "高新区",
+            ],
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              fontSize: "13px",
+              fontFamily: "Alibaba PuHuiTi",
+              fontWeight: 500,
+              color: "#525966",
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#B6C3D9",
+              },
+            },
+            z: 1000,
+          },
+        ],
+        yAxis: [
+          {
+            splitLine: {
+              //网格线
+              lineStyle: {
+                type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
+              },
+              show: true, //隐藏或显示
+            },
+            axisLabel: {
+              show: true,
+              fontSize: "13px",
+              fontFamily: "Alibaba PuHuiTi",
+              fontWeight: 500,
+              color: "#525966",
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            barWidth: 28,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                {
+                  //只要修改前四个参数就ok
+                  offset: 0,
+                  color: "#FF8B02",
+                }, //柱图渐变色
+                {
+                  offset: 1,
+                  color: "#FFA70F",
+                },
+              ]),
+            },
+            z: 100,
+            data: [700, 400, 600, 300, 580, 250, 490, 200, 390, 460, 90],
+            //高亮的效果
+            emphasis: {
+              label: {
+                show: true,
+                formatter: "{c}",
+                position: "top",
+                fontSize: 14,
+                color: "#FF8C03",
+                fontWeight: "bold",
+                fontFamily: "Alibaba PuHuiTi",
+              },
+            },
+          },
+        ],
+      };
+      option && myChart.setOption(option);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+#mains1 {
+  height: 100%;
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/yingji/enterprise.vue b/src/views/yingji/enterprise.vue
index e0542a1..cc54978 100644
--- a/src/views/yingji/enterprise.vue
+++ b/src/views/yingji/enterprise.vue
@@ -164,6 +164,9 @@
         </el-table-column>
       </el-table>
     </div>
+    <div class="pagination">
+      <my-pagination :total="total" @pagesChange="pagesChange"></my-pagination>
+    </div>
     <!-- 查看 -->
     <el-dialog
       :visible.sync="addShow"
@@ -203,9 +206,7 @@
         </div>
       </div>
     </el-dialog>
-    <div class="pagination">
-      <my-pagination :total="total" @pagesChange="pagesChange"></my-pagination>
-    </div>
+    
   </div>
 </template>
   
diff --git a/src/views/yingji/home.vue b/src/views/yingji/home.vue
index b9f15b7..68b5d58 100644
--- a/src/views/yingji/home.vue
+++ b/src/views/yingji/home.vue
@@ -1,22 +1,66 @@
 <template>
   <div class="mainBox">
     <div class="select-nav">
-      <div>年份:</div>
-      <el-select v-model="ruleForm.date" placeholder="请选择年份" size="mini">
-        <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
-        </el-option>
-      </el-select>
+      <div class="left-nav" v-if="activeIndex == 1">
+        <div class="navText">年份:</div>
+        <el-select v-model="ruleForm.date" placeholder="请选择年份" size="mini">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div class="left-nav" v-if="activeIndex == 0">
+        <div class="navText">年份:</div>
+        <el-select v-model="ruleForm.date" placeholder="请选择年份" size="mini">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <div class="navText" style="margin-left: 10px">区划:</div>
+        <el-select v-model="ruleForm.date" placeholder="请选择区划" size="mini">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div class="rightBigNav">
+        <div class="right-nav">
+          <div
+            class="tabStyle"
+            v-for="(item, index) in options1"
+            :key="index"
+            @click="active(index)"
+            :class="activeIndex == index ? 'blue' : ''"
+          >
+            <div
+              :style="`background-image:url('${
+                activeIndex == index ? item.url1 : item.url
+              }')`"
+            ></div>
+            <span>{{ item.name }}</span>
+          </div>
+        </div>
+      </div>
     </div>
     <!-- 各区域执法计划 -->
-    <div class="bodyBox boxAllStyle">
-      <div id="execution"></div>
+    <div class="bodyBox boxAllStyle" v-if="activeIndex == 1">
+      <div id="execution">
+        <executionPlan></executionPlan>
+      </div>
     </div>
-    <div class="bottomBox">
+    <div class="bottomBox" v-if="activeIndex == 1">
       <div class="boxAllStyle">
         <completePlan></completePlan>
       </div>
@@ -25,12 +69,102 @@
         <finishRate></finishRate>
       </div>
     </div>
+    <div class="bgContent" v-if="activeIndex == 0">
+      <div class="tables">
+        <el-table
+          v-loading="load1"
+          :data="tableData"
+          style="width: 100%"
+          :height="530"
+          :border="false"
+          :row-class-name="tableRowClassName"
+        >
+          <el-table-column
+            prop="entprName"
+            label="行政区划"
+            header-align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="majorHazardLevel"
+            label="区县"
+            header-align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="indusTypeClass"
+            label="省重点计划数"
+            header-align="center"
+          >
+          
+          </el-table-column>
+          <el-table-column
+            prop="enterColorChart"
+            label="省重点完成数"
+            header-align="center"
+          >
+            
+          </el-table-column>
+          <el-table-column
+            prop="enterColorChart"
+            label="省重点完成率"
+            header-align="center"
+          >
+            
+          </el-table-column>
+          <el-table-column
+            prop="uscCode"
+            label="非重点计划数"
+            header-align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="isPoint"
+            label="非重点完成数"
+            header-align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="isPoint"
+            label="非重点完成率"
+            header-align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="isPoint"
+            label="合计计划数"
+            header-align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="isPoint"
+            label="合计完成数"
+            header-align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="isPoint"
+            label="合计完成率"
+            header-align="center"
+          >
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pagination">
+        <my-pagination
+          :total="total"
+          @pagesChange="pagesChange"
+        ></my-pagination>
+      </div>
+    </div>
   </div>
 </template>
 <script>
-import * as echarts from "echarts";
 import completePlan from "./echarts/completePlan";
 import finishRate from "./echarts/finishRate";
+import executionPlan from "./echarts/executionPlan";
+import myPagination from "@/views/components/myPagination/index";
+
 export default {
   data() {
     return {
@@ -59,141 +193,112 @@ export default {
           label: "2019",
         },
       ],
+      options1: [
+        {
+          name: "表格",
+          url: require("../../assets/images/bg1.png"),
+          url1: require("../../assets/images/bg2.png"),
+        },
+        {
+          name: "图表",
+          url: require("../../assets/images/tb1.png"),
+          url1: require("../../assets/images/tb2.png"),
+        },
+      ],
+      activeIndex: 0,
+      //======
+      load1: false,
+      total: 0,
+      tableData: [],
     };
   },
   components: {
     completePlan,
     finishRate,
+    executionPlan,
+    myPagination,
   },
-  mounted() {
-    this.init();
-  },
+  mounted() {},
   methods: {
-    init() {
-      var chartDom = document.getElementById("execution");
-      var myChart = echarts.init(chartDom);
-      var option = {
-        title: {
-          show: true,
-          text: "各区域执法计划",
-          textStyle: {
-            color: "#3D434D",
-            fontSize: 16,
-          },
-          left: 34,
-          top: 15,
-        },
-        tooltip: {
-          // show:false,
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow",
-            shadowStyle: {
-              color: "rgba(237,240,242,0.5)",
-              //   opacity: 0.1,
-              //   shadowColor: "rgba(237,240,242,0.5)",
-              //   shadowBlur: 10,
-            },
-          },
-          showContent: false,
-        },
-        grid: {
-          left: "3%",
-          right: "3%",
-          bottom: "3%",
-          containLabel: true,
-        },
-        xAxis: [
-          {
-            type: "category",
-            data: [
-              "苏州",
-              "张家港市",
-              "常熟市",
-              "太仓市",
-              "昆山市",
-              "吴江区",
-              "吴中区",
-              "姑苏区",
-              "相城区",
-              "工业园区",
-              "高新区",
-            ],
-            axisTick: {
-              show: false,
-            },
-            axisLabel: {
-              show: true,
-              fontSize: '13px',
-              fontFamily: 'Alibaba PuHuiTi',
-              fontWeight: 500,
-              color: '#525966',
-            },
-            axisLine: {
-              lineStyle: {
-                color: "#B6C3D9",
-              },
-            },
-            z: 1000,
-          },
-        ],
-        yAxis: [
-          {
-            splitLine :{ //网格线
-              lineStyle:{
-                type:'dashed', //设置网格线类型 dotted：虚线 solid:实线
-              },
-              show:true //隐藏或显示
-            },
-            axisLabel: {
-              show: true,
-              fontSize: '13px',
-              fontFamily: 'Alibaba PuHuiTi',
-              fontWeight: 500,
-              color: '#525966',
-            },
-          },
-        ],
-        series: [
-          {
-            type: "bar",
-            barWidth: 28,
-            itemStyle: {
-              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-                {
-                  //只要修改前四个参数就ok
-                  offset: 0,
-                  color: "#FF8B02",
-                }, //柱图渐变色
-                {
-                  offset: 1,
-                  color: "#FFA70F",
-                },
-              ]),
-            },
-            z: 100,
-            data: [700, 400, 600, 300, 580, 250, 490, 200, 390, 460, 90],
-            //高亮的效果
-            emphasis:{
-              label:{
-                show:true,
-                formatter: '{c}',
-                position: 'top',
-                fontSize: 14,
-                color: '#FF8C03',
-                fontWeight: 'bold',
-                fontFamily:'Alibaba PuHuiTi'
-              }
-            }
-          },
-        ],
-      };
-      option && myChart.setOption(option);
+    pagesChange(e) {},
+    active(e) {
+      this.activeIndex = e;
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 !== 0) {
+        return "success-row";
+      }
+      return "";
     },
   },
 };
 </script>
 <style lang="scss" scoped>
+//===
+.bgContent {
+  height: calc(100% - 48px);
+  width: 100%;
+  .tables {
+    background-color: #eaf2fd;
+    .tabs-btns {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .look {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        img {
+          width: 20px;
+          margin-right: 5px;
+        }
+        span {
+          font-size: 15px;
+          font-family: Alibaba PuHuiTi;
+          font-weight: 400;
+          color: #045ffd;
+        }
+      }
+    }
+    ::v-deep .el-table {
+      .success-row {
+        background-color: rgba(234, 242, 253, 0.25);
+      }
+      td {
+        height: 45px;
+        text-align: center;
+        font-size: 14px;
+        font-family: "Alibaba PuHuiTi";
+        font-weight: 400;
+        color: #525966;
+      }
+      th {
+        height: 42px;
+        background-color: #eaf2fd;
+        font-size: 15px;
+        font-family: "Alibaba PuHuiTi";
+        font-weight: bold;
+        color: #525966;
+        .el-checkbox {
+          display: none;
+        }
+      }
+      // .el-table__body-wrapper {
+      //   height: 450px !important;
+      //   overflow-y: auto;
+      // }
+    }
+    ::v-deep .el-table::before {
+      height: 0;
+    }
+  }
+}
+
+.pagination {
+  margin-top: 10px;
+}
+//===
+
 .boxAllStyle {
   background: #ffffff;
   box-shadow: 0px 1px 24px 0px #e2e2e2;
@@ -207,12 +312,52 @@ export default {
     // height: 38px;
     display: flex;
     align-items: center;
+    justify-content: space-between;
     margin-bottom: 15px;
-    & > div:nth-of-type(1) {
-      font-family: 'Alibaba PuHuiTi';
-      margin-right: 5px;
-      color: #525966;
+    .left-nav {
+      display: flex;
+      align-items: center;
+      .navText {
+        margin-right: 5px;
+        color: #525966;
+        font-family: "Alibaba PuHuiTi";
+        font-size: 14px;
+      }
     }
+    .rightBigNav {
+      padding: 2px;
+      box-sizing: border-box;
+      height: 33px;
+      background: #fff;
+      .right-nav {
+        display: flex;
+        height: 100%;
+        font-family: "Alibaba PuHuiTi";
+        font-size: 14px;
+        .tabStyle {
+          height: 100%;
+          background: #fff;
+          padding: 0 10px;
+          border-radius: 2px;
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+          user-select: none;
+          color: #7a8599;
+          & > div:nth-of-type(1) {
+            height: 13px;
+            width: 13px;
+            background-size: 100% 100%;
+            margin-right: 5px;
+          }
+        }
+        .blue {
+          background: #518afb;
+          color: #fff;
+        }
+      }
+    }
+
     ::v-deep .el-select {
       background-color: transparent;
       width: 210px;
@@ -253,7 +398,7 @@ export default {
     }
   }
   .bottomBox {
-    height: calc(100% - 250px - 53px - 15px);
+    height: calc(100% - 250px - 48px - 15px);
     display: flex;
     justify-content: space-between;
     & > .boxAllStyle {