<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" 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'"
                :text="s"
                v-for="(s, i) in hallTitle"
                :class="'span' + i"
              >
                {{ s }}
              </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>
    <!-- 右边的内容 -->
    <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="middleBottom">
        <div class="menuBtn"  :class="{'menuBtn1' : menuAc == index}" v-for="(item,index) in menu" :key="index" @click="handelBtn(index)">
          <img :src="item.icon"/>
        </div>
      </div>
      <div class="middleBottomIcon">

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      menuAc:0,
      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: "排名",
        },
      ],
      menu:[
        {
          icon: require("@/assets/images/zongti.png")
        },
        {
          icon: require("@/assets/images/zhihui.png")
        },
        {
          icon: require("@/assets/images/shebei.png")
        }
      ]
    };
  },
  mounted() {
    this.rightOneXian();
    this.serviceTwo();
    this.rightBusinessTwo();

    this.drawHallChart();
    this.drawFlowChart();
    this.handelBtn(0)
  },
  methods: {
    //菜单切换
    handelBtn(index){
      this.menuAc = index
        if (index == 0) {
        this.menu[0].icon = require("@/assets/images/zongtiAc.png")
        this.menu[1].icon = require("@/assets/images/zhihui.png")
        this.menu[2].icon = require("@/assets/images/shebei.png")
      }else if (index == 1) {
        this.menu[0].icon = require("@/assets/images/zongti.png")
        this.menu[1].icon = require("@/assets/images/zhihuiAc.png")
        this.menu[2].icon = require("@/assets/images/shebei.png")
      }else if (index == 2) {
        this.menu[0].icon = require("@/assets/images/zongti.png")
        this.menu[1].icon = require("@/assets/images/zhihui.png")
        this.menu[2].icon = require("@/assets/images/shebeiAc.png")
      }
      
    },
    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;
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  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; */
}
.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;
            }

            .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: 6.5%;
      top: 42%;
      display: flex;
      justify-content: space-between;
      .typeName {
        color: #fff;
        font-size: 12px;
      }
      .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: 10%;
      top: 33%;
      display: flex;
      justify-content: space-between;
      .typeName {
        color: #fff;
        font-size: 12px;
      }
      .serveiceAction {
        color: rgb(29, 147, 208);
        // text-decoration: underline;
        padding-bottom: 1px;
        border-bottom: 1px solid rgb(29, 147, 208);
      }
    }
  }
}

.right-content {
  right: 0;
}

.left-content {
  left: 0;
}
</style>