From 5156a9641314366c7836fc0bbd10971e7601448f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9C002001lixiaobang=E2=80=9D?= <2547956374@qq.com>
Date: Sat, 11 Feb 2023 16:27:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/bingzhuang.png  |  Bin 0 -> 471 bytes
 src/assets/images/jiantou.png     |  Bin 0 -> 179 bytes
 src/assets/images/paymentYuan.png |  Bin 318 -> 406 bytes
 src/assets/images/serviceBJ.png   |  Bin 0 -> 11788 bytes
 src/assets/images/xianxing.png    |  Bin 0 -> 328 bytes
 src/view/index.vue                | 1630 ++++++++++++++++++++++++++---
 6 files changed, 1462 insertions(+), 168 deletions(-)
 create mode 100644 src/assets/images/bingzhuang.png
 create mode 100644 src/assets/images/jiantou.png
 create mode 100644 src/assets/images/serviceBJ.png
 create mode 100644 src/assets/images/xianxing.png

diff --git a/src/assets/images/bingzhuang.png b/src/assets/images/bingzhuang.png
new file mode 100644
index 0000000000000000000000000000000000000000..e3edee920782ffc3e94d5a24d0000ab906c905bc
GIT binary patch
literal 471
zcmV;|0Vw{7P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0004=Nkl<ZIE{^x
z&r8%%6vaPd-%UF!VQ|^PsIX16Nu@+vxfn2P6%?W%<fcENf1r&UbteRZ;ICa#VkDHV
z9103a6hW|sM2ZsAJl{QX;Z4Xe<9Oilc=z6O-{stcr0UZvX-?8_Nk1iBk~Ab~Mp8ji
z?rc5LR5@3pX(5^{nr5TvRWvD@nxm;0P1`BA6ixXGuPK-arYphpDVS~t)7@Yi2&To9
z^OFmvv0!Qsrfb3UIhgXE%TCMyCV<PpePEyZ_yKeSE5J1HC<~@e;0e&tfLy^L@D%t4
z6tZ%(5nu^eYe0Nh_1*ynv$9zi@VWtc3V04&KNC9u-ueU{+^9iPx?56%sTwuM*+1U}
zG}TCM0$b^>hpns>&5LdVAF7J}0(XG6Iv+d+UgTDP{qYsvsv%M%%mJ2_qQ-%u?=)@W
zBDe?i1HG=n*JPwO$w<DQ^Uw;+qzOLy1Ri_|+(=${2E4D+;X&Gl8*bPGl?G*?FZtme
z@CBF$z9#`)qe9ZjCmjWjoR}Lc?p6Qd%DX#z(o`qFF0c$t0_*=Pfm3Vf{B7u!udV<9
N002ovPDHLkV1f?X&qe?M

literal 0
HcmV?d00001

diff --git a/src/assets/images/jiantou.png b/src/assets/images/jiantou.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f66d02b5a6328cf24d216d1b2d0b376c82e38c7
GIT binary patch
literal 179
zcmeAS@N?(olHy`uVBq!ia0vp^Ahr+(8<0%e?(YqxsytmBLo_BP|Je}S%*gvD0SJ;3
z5(=Ef(j3E&9yrjja5Cen$r=W$CY<AP4BRoPvC&b+(}&4R-a)9EGf3m?fddJ>M+K@?
zz6DOWdXI;PXZeR4T$4VtY5w8x4Z0!He8izhK5^c`WfJQ+o=HkHXx`%zWw7L2)6v-2
a$jGoKUnHzsp!F5d6%3xPelF{r5}E*mAw4hv

literal 0
HcmV?d00001

diff --git a/src/assets/images/paymentYuan.png b/src/assets/images/paymentYuan.png
index c69ab9e79f615180397819d83377b43b43a9d0a2..65d1d208ce42985d02956daf80b61bb311f4966e 100644
GIT binary patch
delta 379
zcmV->0fhd(0+s`iB!68=L_t(Ijir>kN&`U@hQHltw8`cPR>cH~t*D5FxgjZSB-UC8
zzL1voVq+(Y#tVX|*hxf;c*EYci5tSoS!W>Z1#<ae*qJ%!|2Q+dXAOJ%fe4j=HT4`*
z;dkH^*aJ?2mZ88p2kZca2zXYFP2ddJ0v>hH>`2T5H!+Z)3V$j$9|TDy2SBO|h*nB@
zavEd+yFj`Jh*ny84FQ#bg+3r!;w{T%SEHgvyNz>OqxshGOCA}|V9gcr5{anvs;ORa
zNX}gi_qmSQaxq%2KX>jg;;JeM$c~CMUmM}Qm!~+8Eui1HXfG1bS5*G!L?*m9ITeTg
zG}VU{k~Lc-nRK1T8&3K|=GM$o9Oz1VtpXelc(RIAbOc-v01@x8fIMIw`0fKDo(*B>
zUXw0f0e*UbNUnJ5vgqvob6~#9V@i(XipN**e<YPH0?WXv>O=WpUEl+_1oq`l)Rp`T
Z_yh3nPzIZdjCcS5002ovPDHLkV1jB2uNwdW

delta 291
zcmV+;0o?wU1HJ-~B!2}-L_t(IjjhzNN&`U@M&WORZO9YE$|6r7Vv~?yZ6mSPLhyyO
zw9zKm*eZ%5g4m1JD)wTfjdJ4*ge5|f-2=-q%>56uGjq3SA3T~uAKU4@oTguJg%K{x
zk)_hOgG2PD$XC*{himNPIZrkw3cGmtM^dJjYP)4otmF*M8Gj_1X3BK3sK60gb4W6+
zlr2Iuz}f<mOk@Wk8di{GhK+Q@Rq2PQU4y6{qOTf6<5PRD!SmKg7pp3FAv&o+bR42{
z+*go9_98?-*ulpFlF00aBllW#@g_d!kVI`{o?<ZB{Wn;h@iU_)Y9lkI{6C77tz!dQ
psSo4Ae&ZFlI2?^VNn7#<egOn4Eq@xvV6gxI002ovPDHLkV1mABhPwa&

diff --git a/src/assets/images/serviceBJ.png b/src/assets/images/serviceBJ.png
new file mode 100644
index 0000000000000000000000000000000000000000..76fbba52969720632eeb592415c58c17953356b1
GIT binary patch
literal 11788
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/xianxing.png b/src/assets/images/xianxing.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a759ce6c7b88fe45dd9926dd6cd7f75115856b6
GIT binary patch
literal 328
zcmV-O0k{5%P)<h;3K|Lk000e1NJLTq000pH000gM1^@s6$?f;F0003GNkl<ZD3P7h
zKPZJ!7{~F?%}GkiWF#va$u1*hvN0=z(O|HXl+1QEbs4R0Nnx{?#2}?R+<)$SU!B{P
zm+n>f{VnJ8JkR-_=lsq&g)~i}iE+Hhp^&6$0RtG!1BeQrNt$<U)C!J5qt*JaXb8i2
z?~+@<8TLax=?R&@CC0FfQYJT#bDUr&)S6u(Gq}JL9&m+K6fxZyV}3Ihhgy>S1uWsT
z)5RL<*z4@Piw)dj9qq-1`?qquo!HJKMsSA%Y$NOX77jbdT14eLQ7FBBWFhgL%;LI-
zPjh%gIU5Ys-^Mon0Yu$&3x-N}WBXF5{y?TMnuAde)ujD-A}L;39wp(p_#7wk??i+9
a7wH$c6;q=c@G86j0000<MNUMnLSTa9Y?Fil

literal 0
HcmV?d00001

diff --git a/src/view/index.vue b/src/view/index.vue
index 36e1771..e836a1e 100644
--- a/src/view/index.vue
+++ b/src/view/index.vue
@@ -1,221 +1,1515 @@
 <template>
-    <div class="content">
-        <!-- 左边的内容 -->
-        <div class="left-content">
-            <!-- 营业临厅时长 -->
-            <div class="business-hall">
-                <div class="title">
-                    <!-- 45.4% -->
-                    <p class='titleText'text='营业厅时长' style="font-family: 'maleGod'">营业厅时长</p>
-
-                </div>
-                <!-- 两个小版块 -->
-                <div class="hall-box">
-                    <div class="item">
-                        <p class="font">平均办理时长</p>
-                        <p class="hall-time" style="color:#2e81a2">49分钟33秒</p>
-                    </div>
-                    <div class="item">
-                        <p class="font">平均等待时长</p>
-                        <p class="hall-time" style="color:#9c9060">05分钟33秒</p>
-                    </div>
-                </div>
-            </div>
-            <!-- 客流量 -->
-            <div class="passenger-flow">
-                <div class="title">
-                    <p class='titleText'text='客流量' style="font-family: 'maleGod'">客流量</p>
-                </div>
-            </div>
-            <!-- 厅内统计 -->
-            <div class='hall-statistics'>
-                <div class="title">
-                    <p class='titleText'text='厅内统计' style="font-family: 'maleGod'">厅内统计</p>
-                </div>
-            </div>
+  <div class="content">
+    <!-- 左边的内容 -->
+    <div class="left-content">
+      <!-- 营业临厅时长 -->
+      <div class="business-hall">
+        <div class="title">
+          <!-- 45.4% -->
+          <p class="titleText" text="营业厅时长" style="font-family: 'maleGod'">
+            营业厅时长
+          </p>
         </div>
-        <!-- 右边的内容 -->
-        <div class="right-content">
-            <!-- 缴费情况 -->
-            <div class="payment">
-                <div class="title">
-                   <p  class='titleText'text='缴费情况' style="font-family: 'maleGod'">缴费情况</p>
-                </div>
-                <div class="paymentContent">
-                    <div class="paymentList" v-for="(item,index) in paymentList">
-                        <div class="listOne">
-                            <img src="../assets/images/paymentYuan.png" style="width:18px;height:18px"/>
-                        <div>{{item.count}}</div>
-                        </div>
-                        <div>
-                            <div>{{item.name}}</div>
-                           <div>{{item.per}}</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!-- 业务受理 -->
-            <div class="business-acceptance">
-                <div class="title">
-                    <p  class='titleText'text='业务受理' style="font-family: 'maleGod'">业务受理</p>
-                </div>
-            </div>
-            <!-- 服务情况 -->
-            <div class="service">
-                <div class="title">
-                    <p  class='titleText'text='服务情况' style="font-family: 'maleGod'">服务情况</p>
-                </div>
-            </div>
+        <!-- 两个小版块 -->
+        <div class="hall-box">
+          <div class="item">
+            <p class="font">平均办理时长</p>
+            <p class="hall-time" style="color: #2e81a2">49分钟33秒</p>
+          </div>
+          <div class="item">
+            <p class="font">平均等待时长</p>
+            <p class="hall-time" style="color: #9c9060">05分钟33秒</p>
+          </div>
         </div>
+      </div>
+      <!-- 客流量 -->
+      <div class="passenger-flow">
+        <div class="title">
+          <p class="titleText" text="客流量" style="font-family: 'maleGod'">
+            客流量
+          </p>
+        </div>
+      </div>
+      <!-- 厅内统计 -->
+      <div class="hall-statistics">
+        <div class="title">
+          <p class="titleText" text="厅内统计" style="font-family: 'maleGod'">
+            厅内统计
+          </p>
+        </div>
+      </div>
     </div>
+    <!-- 右边的内容 -->
+    <div class="right-content">
+      <!-- 缴费情况 -->
+      <div class="payment">
+        <div class="title">
+          <p class="titleText" text="缴费情况" style="font-family: 'maleGod'">
+            缴费情况
+          </p>
+        </div>
+        <div class="paymentContent">
+          <div
+            class="paymentList"
+            v-for="(item, index) in paymentList"
+            :key="index"
+          >
+            <div class="listOne">
+              <img
+                src="../assets/images/paymentYuan.png"
+                style="width: 18px; height: 18px"
+              />
+              <div
+                style="margin-left: 5%; color: #ffffff; font-family: 'maleGod'"
+              >
+                {{ item.count }}
+              </div>
+            </div>
+            <div class="listTwo">
+              <div style="color: rgb(186, 186, 192)">{{ item.name }}</div>
+              <div
+                :style="{ color: item.color }"
+                style="font-family: 'maleGod'"
+              >
+                {{ item.per }}
+              </div>
+              <img :src="item.icon" />
+            </div>
+          </div>
+          <div class="twoTitle">
+            <p
+              class="titleText"
+              text="缴费情况分布"
+              style="font-family: 'maleGod'"
+            >
+              缴费情况分布
+            </p>
+            <div class="titleIcon">
+              <img
+                src="../assets/images/xianxing.png"
+                style="width: 17px; height: 14px"
+                @click="handelXian"
+              />
+              <img
+                src="../assets/images/bingzhuang.png"
+                style="width: 16px; height: 16px"
+                @click="handelBing"
+              />
+            </div>
+          </div>
+          <div id="rightOneXian" v-show="payOneShow"></div>
+          <div id="rightOneBing" v-show="!payOneShow"></div>
+          <div class="selectType">
+            <div
+              v-for="(item, index) in paymentTypeList"
+              :key="index"
+              class="typeName"
+              :class="{ typeNameAction: typeActive == index }"
+              @click="paymentType(index)"
+            >
+              <div>{{ item.name }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 业务受理 -->
+      <div class="business-acceptance">
+        <div class="title">
+          <p class="titleText" text="业务受理" style="font-family: 'maleGod'">
+            业务受理
+          </p>
+          <div class="titleIcon">
+            <img
+              src="../assets/images/xianxing.png"
+              style="width: 17px; height: 14px"
+              @click="businessXian"
+            />
+            <img
+              src="../assets/images/bingzhuang.png"
+              style="width: 16px; height: 16px"
+              @click="businessBing"
+            />
+          </div>
+        </div>
+        <div class="businessContent">
+          <div
+            class="businessList"
+            v-for="(item, index) in businessList"
+            :key="index"
+          >
+            <div class="listOne">
+              <img
+                src="../assets/images/paymentYuan.png"
+                style="width: 18px; height: 18px"
+              />
+              <div
+                style="margin-left: 5%; color: #ffffff; font-family: 'maleGod'"
+              >
+                {{ item.count }}
+              </div>
+            </div>
+            <div class="listTwo">
+              <div style="color: rgb(186, 186, 192)">{{ item.name }}</div>
+              <div
+                :style="{ color: item.color }"
+                style="font-family: 'maleGod'"
+              >
+                {{ item.per }}
+              </div>
+              <img :src="item.icon" />
+            </div>
+          </div>
+          <div class="businessChart">
+            <div id="rightBusinessOne"  v-show="!businessShow"></div>
+             <div id="rightBusinessTwo" v-show="businessShow"></div>
+            <!-- <div class="rightBusinessOneList"></div> -->
+          </div>
+        </div>
+      </div>
+      <!-- 服务情况 -->
+      <div class="service">
+        <div class="title">
+          <p class="titleText" text="服务情况" style="font-family: 'maleGod'">
+            服务情况
+          </p>
+        </div>
+        <div class="serviceContent">
+          <div class="serviceOne">
+            <div
+              v-for="(item, idnex) in serviceList"
+              :key="index"
+              class="serviceList"
+            >
+              <div style="color: rgb(182, 182, 190)">{{ item.name }}</div>
+              <div
+                style="
+                  color: rgb(75, 190, 221);
+                  font-family: 'maleGod';
+                  font-size: 25px;
+                "
+              >
+                {{ item.count }}
+              </div>
+            </div>
+          </div>
+          <div id="serviceTwo"></div>
+           <div class="selectType">
+            <div
+              v-for="(item, index) in serviceTypeList"
+              :key="index"
+              class="typeName"
+              :class="{ serveiceAction: serviceTypeActive == index }"
+              @click="serviceType(index)"
+            >
+              <div>{{ item.name }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="middle-content">
+      <div class="">
+
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-name:'index',
-data(){
-    return{
-        paymentList:[
-            {
-                count:'9786笔',
-                name:'环比',
-                per:'88.33%',
-                color:'rgb(29,150,213)'
+  name: "index",
+  data() {
+    return {
+      index:null,
+      payOneShow: true, //缴费图表切换
+      businessShow:true, //业务图表切换
+      typeActive: 0, //缴费类型选择
+      serviceTypeActive: 0, //缴费类型选择
+      paymentList: [
+        {
+          count: "9786笔",
+          name: "环比",
+          per: "88.33%",
+          color: "rgb(29,150,213)",
+          icon: require("@/assets/images/jiantou.png"),
         },
         {
-                count:'144.53万元',
-                name:'环比',
-                per:'86.24%',
-                color:'rgb(244,214,45)'
-        }
-        ]
-    }
-},
-mounted(){
-
+          count: "144.53万元",
+          name: "环比",
+          per: "86.24%",
+          color: "rgb(244,214,45)",
+          icon: require("@/assets/images/jiantou.png"),
+        },
+      ], //缴费值
+      paymentTypeList: [
+        {
+          name: "人员",
+        },
+        {
+          name: "趋势",
+        },
+        {
+          name: "排序",
+        },
+        {
+          name: "排名",
+        },
+      ], //图筛选类型
+      businessList: [
+        {
+          count: "3430笔",
+          name: "环比",
+          per: "92.33%",
+          color: "rgb(29,150,213)",
+          icon: require("@/assets/images/jiantou.png"),
+        },
+      ], //业务值
+      serviceList: [
+        {
+          name: "服务不规范事件",
+          count: "4",
+        },
+        {
+          name: "意见工单数",
+          count: "0",
+        },
+        {
+          name: "投诉工单数",
+          count: "0",
+        },
+      ], //服务列表
+      serviceTypeList:[
+          {
+          name: "人员",
+        },
+        {
+          name: "趋势",
+        },
+        {
+          name: "排序",
+        },
+        {
+          name: "排名",
+        },
+      ]
+    };
+  },
+  mounted() {
+    this.rightOneXian();
+    this.serviceTwo();
+    this.rightBusinessTwo()
+  },
+  methods: {
+    //缴费图表切换
+    handelXian(){
+      this.payOneShow = true
     },
-    mounted() {
-
+    handelBing(){
+      this.payOneShow = false
+      this.$nextTick(()=>{
+        this.rightOneBing()
+      })
     },
-    methods: {
+    businessXian(){
+      this.businessShow = true
+    },
+    businessBing(){
+      this.businessShow = false
+      this.$nextTick(()=>{
+        this.rightBusinessOne();
+      })
+    },
+    //缴费线性表
+    rightOneXian() {
+      var myChart = this.$echarts.init(document.getElementById("rightOneXian"));
+      var option = {
+        legend: {
+          data: ["笔数", "金额"],
+          textStyle: {
+            align: "right",
+            color: "#fff",
+          },
+          //   top: "2%",
+          right: "1%",
+        },
+        tooltip: {
+          show: true,
+          trigger: "item",
+          backgroundColor: "rgba(255,255,255)",
+          axisPointer: {
+            lineStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#A7D6FF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#A7D6FF",
+                  },
+                ],
+                global: false,
+              },
+            },
+          },
+        },
+        grid: {
+          top: "20%",
+          left: "9%",
+          right: "8%",
+          bottom: "18%",
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: ["周欢", "唐颖", "刘梦颖"],
+            axisTick: {
+              show: false, // 是否显示坐标轴轴线
+            },
+            axisLabel: {
+              color: "rgb(203,199,207)",
+              fontSize: 14,
+            },
+            splitLine: {
+              show: false,
+            },
+            boundaryGap: true,
+            axisLine: {
+              //坐标轴轴线相关设置。
+              show: true,
+              inside: false,
+              lineStyle: {
+                color: "rgb(86,183,232)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            // min: 1000,
+            splitNumber: 6,
+            splitLine: { show: true },
+            axisLabel: {
+              //坐标轴刻度标签的相关设置。
+              show: true,
+              textStyle: {
+                color: "rgb(203,199,207)",
+                fontSize: 14,
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(86,183,232,0.2)",
+                type: "dashed",
+              },
+            },
+            show: true,
+          },
+          {
+            type: "value",
+            nameTextStyle: {
+              color: "#666666",
+            },
+            position: "right",
+            axisLine: {
+              lineStyle: {
+                color: "#cdd5e2",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            // axisLabel: {
+            //   show: true,
+            //   formatter: "{value} %", //右侧Y轴文字显示
+            //   textStyle: {
+            //     color: "#666666",
+            //     fontSize: 14,
+            //   },
+            // },
+          },
+        ],
+        series: [
+          {
+            name: "笔数",
+            type: "bar",
+            barMaxWidth: 20,
+            zlevel: 10,
+            // barGap: '100%',
+            data: [5, 10, 15, 20, 25],
+            itemStyle: {
+              normal: {
+                color: {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 1,
+                      color: "rgb(29,79,117)",
+                    },
+                    {
+                      offset: 0,
+                      color: "rgb(59,93,122)",
+                    },
+                  ],
+                },
+                // barBorderRadius: [30, 30, 0, 0],
+                borderColor: "rgb(86,183,232)",
+                label: {
+                  show: false, //开启显示
+                  position: "top", //在上方显示
+                  textStyle: {
+                    //数值样式
+                    color: "#3b6ebf",
+                    fontSize: 12,
+                    fontWeight: 400,
+                  },
+                },
+              },
+            },
+          },
+          {
+            name: "金额",
+            type: "line",
+            zlevel: 11,
+            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+            smooth: true, //平滑曲线显示
+            symbol: "circle", //标记的图形为实心圆
+            symbolSize: 8, //标记的大小
+            itemStyle: {
+              normal: {
+                color: "#ffa43a",
+                borderColor: "rgba(255, 234, 0, 0.5)", //圆点透明 边框
+                borderWidth: 7,
+                label: {
+                  show: false, //开启显示
+                  position: "top", //在上方显示
+                  textStyle: {
+                    //数值样式
+                    color: "#915c1e",
+                    fontSize: 12,
+                    fontWeight: 400,
+                  },
+                  formatter: function (res) {
+                    if (res.value) {
+                      return res.value + "%";
+                    } else {
+                      return 0;
+                    }
+                  },
+                },
+              },
+            },
+            lineStyle: {
+              color: "#ffa43a",
+            },
+            data: [10, 23, 20],
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+    //缴费表饼状
+    rightOneBing(){
+          function getValue(value, arr, params = "params", key = "key") {
+        const option = arr.find((r) => r[key] === value) || {};
+        return option[params];
+      }
+      let dataArr = [
+        {
+          value: 25,
+          name: "周欢",
+          color: "#4FACFE",
+          unit: "笔",
+        },
+        {
+          value: 20,
+          name: "唐颖",
+          color: "#0380FF",
+          unit: "笔",
+        },
+        {
+          value: 15,
+          name: "刘梦颖",
+          color: "#FEDC45",
+          unit: "笔",
+        },
+      ];
+      var myChart = this.$echarts.init(
+        document.getElementById("rightOneBing")
+      );
+      var option = {
+        title: [
+          {
+            text: "42",
+            x: 55,
+            y: 55,
+            // top: '50%',
+            textStyle: {
+              color: "rgb(75,191,222)",
+              fontSize: 30,
+              fontWeight: "200",
+            },
+          },
+          {
+            text: "笔",
+            x: 92,
+            y: 60,
+            // top: '50%',
+            textStyle: {
+              color: "#fff",
+              fontWeight: "100",
+            },
+          },
+          {
+            text: "总发起",
+            x: 55,
+            y: 88,
+            textStyle: {
+              color: "#fff",
+              foontWeight: "100",
+            },
+          },
+        ],
+        legend: {
+          icon: "circle",
+          right: "right",
+          top: 30,
+          itemGap: 20,
+          itemWidth: 8,
+          itemHeight: 8,
+          orient: "vertical",
+          // textStyle: { fontSize: 14, color: "auto" },
+          formatter: (name) => {
+            return (
+              "{name|" +
+              name +
+              "} {value|" +
+              getValue(name, dataArr, "value", "name") +
+              "} {unit|" +
+              getValue(name, dataArr, "unit", "name") +
+              "}"
+            );
+          },
+          textStyle: {
+            borderColor: "rgb(43,87,111)",
+            borderWidth: 1,
+            padding: 5,
+            rich: {
+              name: {
+                fontSize: 16,
+                fontWeight: 400,
+                verticalAlign: "top",
+                align: "center",
+                lineHeight: 14,
+                color: "#fff",
+              },
+              value: {
+                fontSize: 16,
+                fontWeight: 400,
+                align: "center",
+                lineHeight: 14,
+                color: "rgb(84,112,198)",
+                width: 50,
+              },
+              unit: {
+                fontSize: 15,
+                lineHeight: 14,
+                color: "#fff",
+              },
+            },
+          },
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{b}: {c}",
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["70%", "80%"],
+            center: ["23%", "50%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: "center",
+            },
+            itemStyle: {
+              // 图形样式
+              normal: {
+                borderColor: "rgb(8,18,47)",
+                borderWidth: 2,
+                borderRadius: 20,
+              },
+            },
+            data: dataArr,
+          },
+          {
+            type: "gauge",
+            splitNumber: 60,
+            radius: "85%",
+            center: ["23%", "50%"],
+            startAngle: 90,
+            endAngle: -270,
+            pointer: {
+              show: 0,
+            },
+            anchor: {
+              show: 0,
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: [
+                  [0, "#3178BD"],
+                  [1, "#3178BD"],
+                ],
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              length: 6,
+              lineStyle: {
+                color: "auto",
+                width: 1,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            detail: {
+              show: false,
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+    //缴费类型选择
+    paymentType(index) {
+      this.typeActive = index;
+    },
+    //业务环形表
+    rightBusinessOne() {
+      function getValue(value, arr, params = "params", key = "key") {
+        const option = arr.find((r) => r[key] === value) || {};
+        return option[params];
+      }
+      let dataArr = [
+        {
+          value: 25,
+          name: "2.0受理",
+          color: "#4FACFE",
+          unit: "笔",
+        },
+        {
+          value: 20,
+          name: "网上国网app版",
+          color: "#0380FF",
+          unit: "笔",
+        },
+        {
+          value: 15,
+          name: "网上国网pc版",
+          color: "#FEDC45",
+          unit: "笔",
+        },
+      ];
+      var myChart = this.$echarts.init(
+        document.getElementById("rightBusinessOne")
+      );
+      var option = {
+        title: [
+          {
+            text: "42",
+            x: 55,
+            y: 55,
+            // top: '50%',
+            textStyle: {
+              color: "rgb(75,191,222)",
+              fontSize: 30,
+              fontWeight: "200",
+            },
+          },
+          {
+            text: "笔",
+            x: 92,
+            y: 60,
+            // top: '50%',
+            textStyle: {
+              color: "#fff",
+              fontWeight: "100",
+            },
+          },
+          {
+            text: "总发起",
+            x: 55,
+            y: 88,
+            textStyle: {
+              color: "#fff",
+              foontWeight: "100",
+            },
+          },
+        ],
+        legend: {
+          icon: "circle",
+          right: "right",
+          top: 30,
+          itemGap: 20,
+          itemWidth: 8,
+          itemHeight: 8,
+          orient: "vertical",
+          // textStyle: { fontSize: 14, color: "auto" },
+          formatter: (name) => {
+            return (
+              "{name|" +
+              name +
+              "} {value|" +
+              getValue(name, dataArr, "value", "name") +
+              "} {unit|" +
+              getValue(name, dataArr, "unit", "name") +
+              "}"
+            );
+          },
+          textStyle: {
+            borderColor: "rgb(43,87,111)",
+            borderWidth: 1,
+            padding: 5,
+            rich: {
+              name: {
+                fontSize: 16,
+                fontWeight: 400,
+                verticalAlign: "top",
+                align: "center",
+                lineHeight: 14,
+                color: "#fff",
+              },
+              value: {
+                fontSize: 16,
+                fontWeight: 400,
+                align: "center",
+                lineHeight: 14,
+                color: "rgb(84,112,198)",
+                width: 50,
+              },
+              unit: {
+                fontSize: 15,
+                lineHeight: 14,
+                color: "#fff",
+              },
+            },
+          },
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{b}: {c}",
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["70%", "80%"],
+            center: ["23%", "50%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: "center",
+            },
+            itemStyle: {
+              // 图形样式
+              normal: {
+                borderColor: "rgb(8,18,47)",
+                borderWidth: 2,
+                borderRadius: 20,
+              },
+            },
+            data: dataArr,
+          },
+          {
+            type: "gauge",
+            splitNumber: 60,
+            radius: "85%",
+            center: ["23%", "50%"],
+            startAngle: 90,
+            endAngle: -270,
+            pointer: {
+              show: 0,
+            },
+            anchor: {
+              show: 0,
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: [
+                  [0, "#3178BD"],
+                  [1, "#3178BD"],
+                ],
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              length: 6,
+              lineStyle: {
+                color: "auto",
+                width: 1,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            detail: {
+              show: false,
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+    //业务线性
+    rightBusinessTwo(){
+        var myChart = this.$echarts.init(document.getElementById("rightBusinessTwo"));
+      var option = {
+        legend: {
+          data: ["笔数", "金额"],
+          textStyle: {
+            align: "right",
+            color: "#fff",
+          },
+          //   top: "2%",
+          right: "1%",
+        },
+        tooltip: {
+          show: true,
+          trigger: "item",
+          backgroundColor: "rgba(255,255,255)",
+          axisPointer: {
+            lineStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#A7D6FF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#A7D6FF",
+                  },
+                ],
+                global: false,
+              },
+            },
+          },
+        },
+        grid: {
+          top: "20%",
+          left: "9%",
+          right: "8%",
+          bottom: "18%",
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: ["周欢", "唐颖", "刘梦颖"],
+            axisTick: {
+              show: false, // 是否显示坐标轴轴线
+            },
+            axisLabel: {
+              color: "rgb(203,199,207)",
+              fontSize: 14,
+            },
+            splitLine: {
+              show: false,
+            },
+            boundaryGap: true,
+            axisLine: {
+              //坐标轴轴线相关设置。
+              show: true,
+              inside: false,
+              lineStyle: {
+                color: "rgb(86,183,232)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            // min: 1000,
+            splitNumber: 6,
+            splitLine: { show: true },
+            axisLabel: {
+              //坐标轴刻度标签的相关设置。
+              show: true,
+              textStyle: {
+                color: "rgb(203,199,207)",
+                fontSize: 14,
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(86,183,232,0.2)",
+                type: "dashed",
+              },
+            },
+            show: true,
+          },
+          {
+            type: "value",
+            nameTextStyle: {
+              color: "#666666",
+            },
+            position: "right",
+            axisLine: {
+              lineStyle: {
+                color: "#cdd5e2",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            // axisLabel: {
+            //   show: true,
+            //   formatter: "{value} %", //右侧Y轴文字显示
+            //   textStyle: {
+            //     color: "#666666",
+            //     fontSize: 14,
+            //   },
+            // },
+          },
+        ],
+        series: [
+          {
+            name: "笔数",
+            type: "bar",
+            barMaxWidth: 20,
+            zlevel: 10,
+            // barGap: '100%',
+            data: [5, 10, 15, 20, 25],
+            itemStyle: {
+              normal: {
+                color: {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 1,
+                      color: "rgb(29,79,117)",
+                    },
+                    {
+                      offset: 0,
+                      color: "rgb(59,93,122)",
+                    },
+                  ],
+                },
+                // barBorderRadius: [30, 30, 0, 0],
+                borderColor: "rgb(86,183,232)",
+                label: {
+                  show: false, //开启显示
+                  position: "top", //在上方显示
+                  textStyle: {
+                    //数值样式
+                    color: "#3b6ebf",
+                    fontSize: 12,
+                    fontWeight: 400,
+                  },
+                },
+              },
+            },
+          },
+          {
+            name: "金额",
+            type: "line",
+            zlevel: 11,
+            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+            smooth: true, //平滑曲线显示
+            symbol: "circle", //标记的图形为实心圆
+            symbolSize: 8, //标记的大小
+            itemStyle: {
+              normal: {
+                color: "#ffa43a",
+                borderColor: "rgba(255, 234, 0, 0.5)", //圆点透明 边框
+                borderWidth: 7,
+                label: {
+                  show: false, //开启显示
+                  position: "top", //在上方显示
+                  textStyle: {
+                    //数值样式
+                    color: "#915c1e",
+                    fontSize: 12,
+                    fontWeight: 400,
+                  },
+                  formatter: function (res) {
+                    if (res.value) {
+                      return res.value + "%";
+                    } else {
+                      return 0;
+                    }
+                  },
+                },
+              },
+            },
+            lineStyle: {
+              color: "#ffa43a",
+            },
+            data: [10, 23, 20],
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+    //服务清框
+    serviceTwo(){
+       var myChart = this.$echarts.init(document.getElementById("serviceTwo"));
+       var option = {
+        legend: {
+          show:false,
+          data: ["金额"],
+          textStyle: {
+            align: "right",
+            color: "#fff",
+          },
+          //   top: "2%",
+          right: "1%",
+        },
+        tooltip: {
+          show: true,
+          trigger: "item",
+          backgroundColor: "rgba(255,255,255)",
+          axisPointer: {
+            lineStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#A7D6FF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#A7D6FF",
+                  },
+                ],
+                global: false,
+              },
+            },
+          },
+        },
+        grid: {
+          top: "30%",
+          left: "9%",
+          right: "8%",
+          bottom: "14%",
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: ["在岗异常", "离岗异常"],
+            axisTick: {
+              show: false, // 是否显示坐标轴轴线
+            },
+            axisLabel: {
+              color: "rgb(203,199,207)",
+              fontSize: 14,
+            },
+            splitLine: {
+              show: false,
+            },
+            boundaryGap: true,
+            axisLine: {
+              //坐标轴轴线相关设置。
+              show: true,
+              inside: false,
+              lineStyle: {
+                color: "rgb(86,183,232)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+         {
+            type: "value",
+            // min: 1000,
+            // splitNumber: 6,
+            splitLine: { show: true },
+            axisLabel: {
+              //坐标轴刻度标签的相关设置。
+              show: true,
+              textStyle: {
+                color: "rgb(203,199,207)",
+                fontSize: 14,
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(86,183,232,0.2)",
+                type: "dashed",
+              },
+            },
+            show: true,
+          },
+        ],
+        series: [
+          {
+            name: "金额",
+            type: "line",
+            zlevel: 11,
+            // yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+            smooth: true, //平滑曲线显示
+            symbol: "circle", //标记的图形为实心圆
+            symbolSize: 8, //标记的大小
+            itemStyle: {
+              normal: {
+                color: "#ffa43a",
+                borderColor: "rgba(255, 234, 0, 0.5)", //圆点透明 边框
+                borderWidth: 7,
+                label: {
+                  show: false, //开启显示
+                  position: "top", //在上方显示
+                  textStyle: {
+                    //数值样式
+                    color: "#915c1e",
+                    fontSize: 12,
+                    fontWeight: 400,
+                  },
+                  formatter: function (res) {
+                    if (res.value) {
+                      return res.value + "%";
+                    } else {
+                      return 0;
+                    }
+                  },
+                },
+              },
+            },
+            lineStyle: {
+              color: "#ffa43a",
+            },
+            data: [10, 23, 20],
+          },
+        ],
+      };
+       myChart.setOption(option);
+    },
+    //服务选择
+    serviceType(index){
+      this.serviceTypeActive = index;
     }
-}
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .content {
-    width: 100%;
-    height: 100%;
-    position: relative;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  justify-content: space-around
 }
 
 .left-content,
 .right-content {
-    position: absolute;
-    width: 20.6%;
-    top: 0;
-    height: 100%;
-    /* background-color: aqua; */
+  position: absolute;
+  width: 20.6%;
+  top: 0;
+  height: 100%;
+  /* background-color: aqua; */
+}
+.middle-content{
+  width: calc(100% - 41.2%);
+  position: relative;
+  top: 0;
+  height: 100%;
+  border: 1px solid red;
 }
-
 /* 内容板块背景 */
-.left-content>div,
-.right-content>div {
-    background-image: url(../assets/images/border.png);
-    background-size: 100% 100%;
-    margin-bottom: 5px;
-    padding: 13px;
-    box-sizing: border-box;
-    .hall-box{
-        width: 100%;
-        height: 18.6%;
-        display: flex;
-        justify-content: space-between;
+.left-content > div,
+.right-content > div {
+  background-image: url(../assets/images/border.png);
+  background-size: 100% 100%;
+  margin-bottom: 5px;
+  padding: 13px;
+  box-sizing: border-box;
+  .hall-box {
+    width: 100%;
+    height: 18.6%;
+    display: flex;
+    justify-content: space-between;
+  }
+  .hall-box .item {
+    width: 45%;
+    height: 100%;
+    // background-color: aqua;
+    background-image: url(../assets/images/hall-box.png);
+    .font {
+      font-size: 12px;
+      color: #a5a5af;
     }
-    .hall-box .item{
-        width: 45%;
-        height: 100%;
-        // background-color: aqua;
-        background-image: url(../assets/images/hall-box.png);
-        .font{
-            font-size: 12px;
-            color: #a5a5af;
-        }
-        .hall-time{
-            font-family: 'maleGod';
-            font-size: 21px;
-        }
+    .hall-time {
+      font-family: "maleGod";
+      font-size: 21px;
     }
+  }
 }
 
 /* 标题的样式 */
-.left-content>div>.title,
-.right-content>div>.title {
-    width: 100%;
-    background-image: url(../assets/images/border-title.png);
-    height: 30px;
-    background-size: 100% 100%;
-    display: flex;
-    padding-left: 8%;
-    box-sizing: border-box;
-    color: #fff;
-    font-family: 'maleGod';
-    align-items: center;
-    letter-spacing: 1px;
+.left-content > div > .title,
+.right-content > div > .title {
+  width: 100%;
+  background-image: url(../assets/images/border-title.png);
+  height: 30px;
+  background-size: 100% 100%;
+  display: flex;
+  padding-left: 8%;
+  box-sizing: border-box;
+  color: #fff;
+  font-family: "maleGod";
+  align-items: center;
+  letter-spacing: 1px;
 }
-.titleText:before{
-        content: attr(text);
-        position: absolute;
-        z-index: 10;
-        color:rgb(163, 227, 245);
-        -webkit-mask:linear-gradient(to top, rgb(163, 227, 245), transparent );
-    }
-.left-content .business-hall{
-    height: 38.2%;
-
+.titleText:before {
+  content: attr(text);
+  position: absolute;
+  z-index: 10;
+  color: rgb(163, 227, 245);
+  -webkit-mask: linear-gradient(to top, rgb(163, 227, 245), transparent);
+}
+.left-content .business-hall {
+  height: 38.2%;
 }
 
 .left-content .passenger-flow {
-    height: 39.7%;
+  height: 39.7%;
 }
 
 .left-content .hall-statistics {
-    height: 20.4%;
+  height: 20.4%;
 }
 
 .right-content .payment {
-    height: 38.3%;
-    .paymentContent{
-        height: calc(100% - 30px);
-        .paymentList{
-            width:100% ;
-            height: 38px;
-            background: url("../assets/images/payment.png") no-repeat;
-            background-size: 100% 100%;
-            .listOne{
-                height: 100%;
-                width: 28%;
-                display: flex;
-                justify-content: space-around;
-                align-items: center;
-            }
-        }
+  height: 38.3%;
+  .paymentContent {
+    height: calc(100% - 30px);
+    position: relative;
+    .paymentList {
+      width: 100%;
+      height: 13.5%;
+      background: url("../assets/images/payment.png") no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: space-between;
+      padding-left: 2%;
+      box-sizing: border-box;
+      margin-top: 2%;
+      .listOne {
+        width: 45%;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+      }
+      .listTwo {
+        width: 55%;
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+      }
     }
+    .twoTitle {
+      width: 100%;
+      height: 13.5%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: #fff;
+      .titleIcon {
+        width: 15%;
+        display: flex;
+        justify-content: space-evenly;
+      }
+    }
+    #rightOneXian {
+      width: 100%;
+      height: calc(100% - 41%);
+    }
+    #rightOneBing{
+      width: 100%;
+      height: calc(100% - 41%);
+    }
+    .selectType {
+      position: absolute;
+      width: 48%;
+      height: 8.5%;
+      top: 42%;
+      display: flex;
+      justify-content: space-between;
+      .typeName {
+        color: #fff;
+      }
+      .typeNameAction {
+        color: rgb(29, 147, 208);
+        // text-decoration: underline;
+        padding-bottom: 1px;
+        border-bottom: 1px solid rgb(29, 147, 208);
+      }
+    }
+  }
 }
 
 .right-content .business-acceptance {
-    height: 30%;
+  height: 30%;
+  .title {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    .titleIcon {
+      width: 15%;
+      display: flex;
+      justify-content: space-evenly;
+      margin-bottom: 1%;
+    }
+  }
+  .businessContent {
+    height: calc(100% - 30px);
+    .businessList {
+      width: 100%;
+      height: 18%;
+      background: url("../assets/images/payment.png") no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: space-between;
+      padding-left: 2%;
+      box-sizing: border-box;
+      margin-top: 2%;
+      .listOne {
+        width: 45%;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+      }
+      .listTwo {
+        width: 55%;
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+      }
+    }
+    .businessChart {
+      height: calc(100% - 18%);
+      width: 100%;
+      display: flex;
+      #rightBusinessOne {
+        width: 100%;
+        height: 100%;
+      }
+      #rightBusinessTwo{
+        width: 100%;
+        height: 100%;
+      }
+      //   .rightBusinessOneList {
+      //     width: 50%;
+      //     height: 100%;
+      //   }
+    }
+  }
 }
 
 .right-content .service {
-    height: 30%;
+  height: 30%;
+  .serviceContent {
+    height: calc(100% - 30px);
+    width: 100%;
+    position: relative;
+    .serviceOne {
+      height: 31%;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      .serviceList {
+        height: 100%;
+        width: 31%;
+        background: url("../assets/images/serviceBJ.png") no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-evenly;
+      }
+    }
+    #serviceTwo {
+      height: calc(100% - 31%);
+      width: 100%;
+    }
+      .selectType {
+      position: absolute;
+      width: 48%;
+      height: 12%;
+      top: 33%;
+      display: flex;
+      justify-content: space-between;
+      .typeName {
+        color: #fff;
+      }
+      .serveiceAction {
+        color: rgb(29, 147, 208);
+        // text-decoration: underline;
+        padding-bottom: 3px;
+        border-bottom: 1px solid rgb(29, 147, 208);
+      }
+    }
+  }
 }
 
 .right-content {
-    right: 0;
+  right: 0;
 }
 
 .left-content {
-    left: 0;
+  left: 0;
 }
 </style>
\ No newline at end of file