<template>
  <div class="content">
    <!-- 左边的内容 -->
    <transition name="left">
    <div class="left-content" v-show="menuShow">
      <!-- 营业临厅时长 -->
      <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" v-for="(item, i) in hallList" :key="i">
            <p class="font">{{ item.font }}</p>
            <p :class="'hall-time' + i">{{ item.time }}</p>
          </div>
        </div>
        <!-- 图表内容样式 -->
        <div class="hall-line">
          <div class="hall-title">
            <div>
              <span style="font-family: 'maleGod'" v-for="(s, i) in hallTitle" :class="'span' + i">

              </span>
            </div>
            <div class="hall-icon">
              <span></span>
              <span></span>
            </div>
          </div>
          <div class="chart-title">
            <span v-for="(s, i) in hallLineList">
              {{ s }}
            </span>
          </div>
        </div>
        <!-- 图表样式 -->
        <div class="hall-chart" ref="hallChart"></div>
      </div>
      <!-- 客流量 -->
      <div class="passenger-flow">
        <div class="title">
          <p class="titleText" text="客流量" style="font-family: maleGod">
            客流量
          </p>
        </div>
        <!-- 客流量板块内容 -->
        <div class="flow-box">
          <div class="flow-left">
            <p class="flow-total">总客流量</p>
            <span class="flow-value">6587次</span>
          </div>
          <div class="flow-right">
            <ul>
              <li class="flow-item" v-for="(val, i) in flowList">
                <span :class="'up' + i"><i :class="'rect' + i"></i>{{ val.value }}</span>
                <span>{{ val.text }}</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 图表切换 -->
        <div class="chart-title">
          <span v-for="(s, i) in hallLineList">
            {{ s }}
          </span>
        </div>
        <div class="flow-chart" ref="flowChart"></div>
      </div>
      <!-- 厅内统计 -->
      <div class="hall-statistics">
        <div class="title">
          <p class="titleText" text="厅内统计" style="font-family: maleGod">
            厅内统计
          </p>
        </div>
        <div class="stat">
          <div v-for="(o, i) in statList" :key="i" class="stat-item">
            <section :class="'img' + i"></section>
            <p>{{ o.name }}</p>
            <p class="stat-num">{{ o.num }}</p>
          </div>
        </div>
      </div>
    </div>
    </transition>
    <!-- 右边的内容 -->
    <transition name="right">
    <div class="right-content"  v-show="menuShow">
      <!-- 缴费情况 -->
      <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>
    </transition>
    <div class="middle-content">
      <!-- 内容头部 -->
      <div class="middleTop">
        <div :class="'top-item' + i" v-for="(n, i) in middleTopList" :key="i">
          <div style="width:100%;text-align:center;padding-left:61px;box-sizing: border-box;margin-top: 14px;">
            <p class="item-name">{{ n.name }}</p>
            <p :class="'item-value' + i">{{ n.num }}</p>
          </div>
        </div>
      </div>
      <div class="middleBottom">
        <div class="menuBtn"  :class="{'menuBtn1' : menuAc == index}" v-for="(item,index) in menu" :key="index" @click="handelBtn(index)">
          <img :src="menuAc != index ? item.icon : item.iconAc"/>
        </div>
      </div>
      <div class="middleBottomIcon">
      </div>
    </div>
      <equipment-assets ref="equimentAssets" class="equimentAssets" v-show="equimentAssetsShow"/>
      <smartPage ref="smartPage" class="smartPage" v-show="smartPageShow"/>
  </div>
  </div>
</template>

<script>
import equipmentAssets from "./equipmentAssets.vue";
import smartPage from "./smartPage.vue";
export default {
  name: "index",
  data() {
    return {
      menuShow: true, //菜单显示
      equimentAssetsShow: false, //设备资产
      smartPageShow: false, //智慧
      hallList: [
        {
          font: "平均办理时长",
          time: "49分钟33秒",
        },
        {
          font: "平均等待时长",
          time: "05分钟33秒",
        },
      ],
      hallTitle: ["平均办理时长", "平均等待时长"],
      hallLineList: ["人员", "趋势", "排序", "排名"],
      flowList: [
        {
          text: "峰值",
          value: "115人次",
        },
        {
          text: "谷值",
          value: "1人次",
        },
        {
          text: "均值",
          value: "26人次",
        },
      ],
      flowChartList: [
        {
          name: "峰值",
          data: [8, 12, 11, 12],
        },
        {
          name: "谷值",
          data: [20, 24, 22, 24],
        },
        {
          name: "均值",
          data: [32, 36, 33, 36],
        },
      ],
      statList: [
        {
          name: "设备数(台)",
          num: 63,
        },
        {
          name: "员工(人)",
          num: 23,
        },
        {
          name: "电子工牌(个)",
          num: 63,
        },
      ],

      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)",
          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: "排名",
        },
      ],
      // 内容头部
      middleTopList: [
        {
          name: "工单总数",
          num: 1311,
        },
        {
          name: "已归档",
          num: 1076,
        },
        {
          name: "代办工单",
          num: 24,
        },
        {
          name: "预受理信息预警",
          num: 0,
        },
        {
          name: "柜台状态",
          num: "在线",
        },
      ],
      menu: [
        {
          icon: require("@/assets/images/zongti.png"),
          iconAc: require("@/assets/images/zongtiAc.png"),
        },
        {
          icon: require("@/assets/images/zhihui.png"),
          iconAc: require("@/assets/images/zhihuiAc.png"),
        },
        {
          icon: require("@/assets/images/shebei.png"),
          iconAc: require("@/assets/images/shebeiAc.png"),
        },
      ],
      menuAc: 0,
    };
  },
  mounted() {
    this.rightOneXian();
    this.serviceTwo();
    this.rightBusinessTwo();

    this.drawHallChart();
    this.drawFlowChart();
    this.handelBtn(0);
  },
  methods: {
    //菜单切换
    handelBtn(index) {
      this.menuAc = index;
        let that = this;
      if (index == 0) {
        //如果当前页面为设备资产
        if (this.equimentAssetsShow == true) {
          this.$refs.equimentAssets.menuHandel();
          window.setTimeout(() => {
            that.equimentAssetsShow = false;
            that.menuShow = true;
          }, 1500);
        } else if (this.smartPageShow == true) {
          this.$refs.smartPage.menuShow1();
          window.setTimeout(() => {
            that.smartPageShow = false;
            that.menuShow = true;
          }, 1500);
        }
      } else if (index == 1) {
        if (this.menuShow == true) {
          this.menuShow = false;
          window.setTimeout(() => {
            that.smartPageShow = true;
            that.$refs.smartPage.handleShow();
          }, 1500);
        } else if (this.equimentAssetsShow == true) {
          this.$refs.equimentAssets.menuHandel();
          window.setTimeout(() => {
            that.equimentAssetsShow = false;
            that.smartPageShow = true;
            this.$refs.smartPage.handleShow();
          }, 1500);
        }
      } else if (index == 2) {
        if (this.menuShow == true) {
          this.menuShow = false;
          window.setTimeout(() => {
            that.equimentAssetsShow = true;
            that.$refs.equimentAssets.menuHandelShow();
          }, 1500);
        } else if (this.smartPageShow == true) {
          this.$refs.smartPage.menuShow1();
          window.setTimeout(() => {
            that.smartPageShow = false;
            that.equimentAssetsShow = true;
            that.$refs.equimentAssets.menuHandelShow();
          }, 1500);
        }
      }
    },
    drawHallChart() {
      let myChart = this.$echarts.getInstanceByDom(this.$refs.hallChart);
      if (myChart == null) {
        myChart = this.$echarts.init(this.$refs.hallChart);
      }
      let option = {
        grid: {
          top: "20%",
          left: "8%",
          right: "2%",
          bottom: "15%",
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#20668d",
              },
            },
            splitArea: {
              // show: true,
              color: "#f00",
              lineStyle: {
                color: "#f00",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
              // margin: 10,
            },
            // 两边留白
            boundaryGap: true,
            data: ["周欢", "唐颖", "刘梦颖"],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "分钟",
            nameTextStyle: {
              fontSize: 11,
              color: "#d8d4d7",
              padding: [10, 35, 0, 0],
            },

            // min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(86,183,232,0.2)",
                type: "dashed",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              // margin: 20,
              textStyle: {
                color: "#d8d4d7",
              },
              formatter: "{value}",
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "销售费用",
            type: "line",
            Symbol: "circle",
            symbolSize: 7,
            // showAllSymbol: true,
            data: [30.13, 86.25, 29.45],
            itemStyle: {
              normal: {
                color: "#f4e127",
                lineStyle: {
                  color: "#f4e127",
                },
                label: {
                  show: true, //开启显示
                  color: "#d8d4d7",
                  position: "top", //在上方显示
                  formatter: function (res) {},
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    drawFlowChart() {
      let myChart = this.$echarts.getInstanceByDom(this.$refs.flowChart);
      if (myChart == null) {
        myChart = this.$echarts.init(this.$refs.flowChart);
      }
      var color = ["#2270b9", "#3bbabc", "#4ab135"];
      let option = {
        grid: {
          top: "20%",
          left: "8%",
          right: "2%",
          bottom: "15%",
        },
        legend: {
          data: this.flowList.map((ele) => {
            return ele.text;
          }),
          // icon: 'circle',

          // symbolSize:4,
          textStyle: {
            align: "right",
            color: "#fff",
          },
          top: "-2%",
          right: "2%",
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#20668d",
              },
            },
            splitArea: {
              // show: true,
              color: "#f00",
              lineStyle: {
                color: "#f00",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
              // margin: 10,
            },
            // 两边留白
            boundaryGap: true,
            data: ["20230127", "20230128", "20230129", "20230130"],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "分钟",
            nameTextStyle: {
              fontSize: 11,
              color: "#d8d4d7",
              padding: [10, 35, 0, 0],
            },

            // min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(86,183,232,0.2)",
                type: "dashed",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              // margin: 20,
              textStyle: {
                color: "#d8d4d7",
              },
              formatter: "{value}",
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: this.flowChartList.map((ele, index) => {
          return {
            name: ele.name,
            type: "line",
            Symbol: "circle",
            symbolSize: 7,
            // showAllSymbol: true,
            data: ele.data,
            itemStyle: {
              normal: {
                color: color[index],
                lineStyle: {
                  color: color[index],
                },
                label: {
                  show: true, //开启显示
                  color: "#d8d4d7",
                  position: "top", //在上方显示
                  formatter: function (res) {},
                },
              },
            },
          };
        }),
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    //缴费图表切换
    handelXian() {
      this.payOneShow = true;
    },
    handelBing() {
      this.payOneShow = false;
      this.$nextTick(() => {
        this.rightOneBing();
      });
    },
    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;
    },
  },
  components: {
    equipmentAssets,
    smartPage,
  },
};
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-around;
  z-index: 100;
}

.left-content,
.right-content {
  position: absolute;
  width: 20.6%;
  top: 0;
  height: 100%;
}

.middle-content {
  position: absolute;
  width: calc(100% - 41.2%);
  top: 0;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;

  .middleBottom {
    width: 52%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: absolute;
    bottom: -26px;
    z-index: 999;

    .menuBtn {
      width: 142px;
      height: 52px;
    }

    .menuBtn1 {
      width: 188px;
      height: 74px;
    }
  }

  .middleBottomIcon {
    z-index: 100;
    width: 1115px;
    height: 57px;
    background: url("../assets/images/menubottom.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: -37px;
  }
}

/* 内容板块背景 */
.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;
    margin-bottom: 10px;
    justify-content: space-between;
  }

  .hall-chart {
    width: 100%;
    height: 47%;
  }

  .hall-line {
    .hall-title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;

      .span0,
      .span1 {
        position: relative;
        color: #fff;
        font-size: 14px;
        width: 102px;
        height: 16px;
        display: inline-block;
      }

      .span0 {
        background-image: url(../assets/images/select-font.png);
        background-size: 100% 100%;
      }

      .span1 {
        background-image: url(../assets/images/default-font.png);
        background-size: 100% 100%;
        margin-left: 6px;
      }

      .hall-icon span {
        background-size: 100% 100%;

        display: inline-block;
      }

      .hall-icon span:nth-child(1) {
        background-image: url(../assets/images/line-icon.png);
        width: 17px;
        height: 14px;
      }

      .hall-icon span:nth-child(2) {
        background-image: url(../assets/images/pie-icon.png);
        width: 16px;
        height: 16px;
        margin-left: 7px;
      }
    }
  }

  .chart-title {
    margin-bottom: 6px;
  }

  .chart-title span {
    font-size: 12px;
    color: #fff;
    margin-left: 18px;
  }

  .chart-title span:nth-child(1) {
    margin-left: 0;
    color: #1e96d5;
    border-bottom: 1px solid #1e96d5;
    // text-decoration: underline;
  }

  .hall-line span::before {
    content: attr(text);
    position: absolute;
    z-index: 10;
    bottom: 0;
    color: rgb(163, 227, 245);
    -webkit-mask: linear-gradient(
      to top,
      rgba(163, 227, 245, 0.7),
      transparent
    );
  }

  .hall-box .item {
    width: 48.5%;
    height: 100%;
    // background-color: aqua;
    background-image: url(../assets/images/hall-box.png);
    padding: 8px 10px 8px;
    box-sizing: border-box;
    position: relative;

    .font {
      font-size: 12px;
      color: #a5a5af;
      margin-bottom: 3px;
    }

    .hall-time1,
    .hall-time0 {
      font-family: "maleGod";
      font-size: 25px;
      text-align: center;
      position: absolute;
      bottom: 5px;
      width: calc(100% - 16px);
    }

    .hall-time1 {
      color: #dfcc4d !important;
    }

    .hall-time0 {
      color: #4bbfde;
    }
  }
}

/* 标题的样式 */
.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;
  margin-bottom: 10px;
}

.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%;

  // 客流量图表
  .flow-chart {
    width: 100%;
    height: 50%;
  }

  .flow-box {
    height: 25%;
    width: 100%;
    background-image: url(../assets/images/flow-box.png);
    background-size: 100% 100%;
    padding: 8px 15px 8px;
    box-sizing: border-box;
    display: flex;
    margin-bottom: 10px;

    .flow-left {
      width: 44%;
      text-align: center;

      .flow-total {
        color: #c0c0c4;
        font-size: 13px;
        text-align: left;
      }

      .flow-value {
        display: inline-block;
        margin-top: 10px;
        font-family: maleGod;
        font-size: 25px;
        color: #4bbfde;
      }
    }

    .flow-right {
      width: 56%;
      height: 100%;
      margin-bottom: 10px;

      ul {
        height: 100%;
      }

      .flow-item {
        justify-content: space-between;
        display: flex;
      }

      .up0 {
        color: #36904c;
        margin-top: 0 !important;
      }

      .up1 {
        color: #3bbabc;
      }

      .up2 {
        color: #1d62a3;
      }

      .flow-item span:nth-child(1) {
        font-family: maleGod;
        font-size: 20px;

        // margin-top: 3px;
        i {
          width: 9px;
          height: 8px;
          background-size: 100% 100%;
          display: inline-block;
          margin-right: 5px;
        }

        .rect0 {
          background-image: url(../assets/images/rect-icon1.png);
        }

        .rect1 {
          background-image: url(../assets/images/rect-icon2.png);
        }

        .rect2 {
          background-image: url(../assets/images/rect-icon2.png);
        }
      }

      .flow-item {
        height: 33%;
      }

      .flow-item span {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .flow-item span:nth-child(2) {
        font-size: 13px;
        color: #c0c0c4;
      }
    }
  }
}

.left-content .hall-statistics {
  height: 20.4%;

  .stat {
    width: 100%;
    display: flex;

    .stat-item {
      width: 33%;

      .img2 {
        background-image: url(../assets/images/people-icon.png);
      }

      .img1 {
        background-image: url(../assets/images/paizi.png);
      }

      // display: flex;
      section {
        width: 83px;
        height: 76px;
        margin: 0 auto;
        background-image: url(../assets/images/stat-icon.png);
        background-size: 100% 100%;
      }

      p {
        text-align: center;
        color: #fff;
      }

      .stat-num {
        font-family: "maleGod";
        color: #4bbfde !important;
        font-size: 20px;
      }
    }
  }
}

@media screen and (min-height: 980px) {
  .stat-num {
    font-size: 20px;
    font-family: "maleGod";
    // display: inline-block;
    margin: 4px;
    position: relative;
    // top: 4px;
  }
}

.right-content .payment {
  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%;

  .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%;

  .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;
}

.left-content {
  left: 0;
}

// 内容头部
.middleTop {
  width: 100%;
  height: 70px;
  margin-top: 45px;
  display: flex;
  justify-content: space-around;

  // background-color: #1d62a3;
  div {
    width: 186px;
    height: 70px;
    background-size: 100% 100%;

    .item-name {
      color: #fff;
      font-family: maleGod;
      font-size: 14px;
    }

    .item-value0,
    .item-value1,
    .item-value2,
    .item-value3,
    .item-value4 {
      font-size: 25px;
      font-family: maleGod;
      margin-top: 7px;
      color: #4bbfde;
    }

    .item-value3 {
      color: #ebad22;
    }

    .item-value4 {
      color: #2c6e43;
    }
  }

  .top-item0 {
    background-image: url(../assets/images/content-icon1.png);
  }

  .top-item1 {
    background-image: url(../assets/images/content-icon2.png);
  }

  .top-item2 {
    background-image: url(../assets/images/content-icon3.png);
  }

  .top-item3 {
    background-image: url(../assets/images/content-icon4.png);
  }

  .top-item4 {
    background-image: url(../assets/images/content-icon5.png);
  }
}
//left动画
@keyframes donghua1 {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-100%);
  }
}
.left-leave,
.left-leave-active,
.left-leave-to {
  animation: donghua1 1s linear;
}

.left-enter,
.left-enter-active,
.left-enter-to {
  animation: donghua1 1s linear reverse;
}
//right动画
@keyframes donghua2 {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
.right-leave,
.right-leave-active,
.right-leave-to {
  animation: donghua2 1s linear;
}

.right-enter,
.right-enter-active,
.right-enter-to {
  animation: donghua2 1s linear reverse;
}
.equimentAssets {
  position: absolute;
}
.smartPage {
  position: absolute;
}
</style>