diff --git a/src/assets/images/bingzhuang.png b/src/assets/images/bingzhuang.png
new file mode 100644
index 0000000..e3edee9
Binary files /dev/null and b/src/assets/images/bingzhuang.png differ
diff --git a/src/assets/images/jiantou.png b/src/assets/images/jiantou.png
new file mode 100644
index 0000000..3f66d02
Binary files /dev/null and b/src/assets/images/jiantou.png differ
diff --git a/src/assets/images/paymentYuan.png b/src/assets/images/paymentYuan.png
index c69ab9e..65d1d20 100644
Binary files a/src/assets/images/paymentYuan.png and b/src/assets/images/paymentYuan.png differ
diff --git a/src/assets/images/serviceBJ.png b/src/assets/images/serviceBJ.png
new file mode 100644
index 0000000..76fbba5
Binary files /dev/null and b/src/assets/images/serviceBJ.png differ
diff --git a/src/assets/images/xianxing.png b/src/assets/images/xianxing.png
new file mode 100644
index 0000000..9a759ce
Binary files /dev/null and b/src/assets/images/xianxing.png differ
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