<template>
  <div id="realname">
    <div class="lt-area">
      <div class="status">
        <div class="status-count">
          <img
            class="status-img"
            src="@/assets/realname/icon_b_yi@2x.png"
            alt=""
          />
          <div class="status-detail">
            <div class="status-text">总人数</div>
            <div class="status-number">
              {{ screenDetail.personCount }}
            </div>
          </div>
        </div>
        <div class="status-count">
          <img
            class="status-img"
            src="@/assets/realname/icon_b_er@2x.png"
            alt=""
          />
          <div class="status-detail">
            <div class="status-text">普通工人人数</div>
            <div class="status-number">
              {{ screenDetail.normalPersonCount }}
            </div>
          </div>
        </div>
        <div class="status-count">
          <img
            class="status-img"
            src="@/assets/realname/icon_b_san@2x.png"
            alt=""
          />
          <div class="status-detail">
            <div class="status-text">管理人员人数</div>
            <div class="status-number">
              {{ screenDetail.managePersonCount }}
            </div>
          </div>
        </div>
        <div class="status-count">
          <img
            class="status-img"
            src="@/assets/realname/icon_b_si@2x.png"
            alt=""
          />
          <div class="status-detail">
            <div class="status-text">新入场人员人数</div>
            <div class="status-number">
              {{ screenDetail.newWorkPersonCount }}
            </div>
          </div>
        </div>
        <div class="status-count">
          <img
            class="status-img"
            src="@/assets/realname/icon_b_wu@2x.png"
            alt=""
          />
          <div class="status-detail">
            <div class="status-text">今日考勤人数</div>
            <div class="status-number">
              {{ screenDetail.todayAttendancePersonCount }}
            </div>
          </div>
        </div>
        <div class="status-count">
          <img
            class="status-img"
            src="@/assets/realname/icon_b_liu@2x.png"
            alt=""
          />
          <div class="status-detail">
            <div class="status-text">今日在场人数</div>
            <div class="status-number">
              {{ screenDetail.workPersonCount }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mid-area">
      <Title text="实时考勤"></Title>
      <ShadowContainer class="long-container">
        <div
          class="warp"
          id="warp-list"
          @mouseenter="clearScroll1"
          @mouseleave="reScroll1"
        >
          <div
            class="person-check"
            v-for="(person, index) in checkList"
            :key="index"
          >
            <div class="portrait">
              <img
                class="rect"
                src="@/assets/realname/portrait-rect.png"
                alt=""
              />
              <img
                class="person-head"
                :src="
                  person.face_img_url
                    ? person.face_img_url
                    : require('@/assets/realname/portrait.png')
                "
              />
            </div>
            <div class="person-detail">
              <div class="name">
                <div class="name-text">姓名：{{ person.person_name }}</div>
                <div class="work-no">工号：{{ person.job_number }}</div>
              </div>
              <div class="status">状态：{{ person.type_str }}</div>
              <div class="time">时间：{{ person.record_time_cn }}</div>
            </div>
          </div>
          <div v-if="checkList.length == 0" class="no-data">
            <img src="@/assets/nodata.png" alt="" />
            <div>暂无数据！</div>
          </div>
        </div>
      </ShadowContainer>
      <Title text="人员地域分布"></Title>
      <ShadowContainer class="short-container">
        <div
          style="
            display: flex;
            height: 100%;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            flex-direction: column;
          "
        >
          <div style="display: flex">
            <div class="chart-container">
              <div ref="areaChart" id="area-chart"></div>
              <div class="title">
                <div class="main-title">
                  {{ areaTotal }}
                </div>
                <div class="sub-title">总人数</div>
              </div>
            </div>
            <div class="chart-legends">
              <div
                v-for="(legend, index) in personAreaDetail"
                :key="index"
                :style="{
                  color:
                    legend.name == '绍兴市'
                      ? '#FEBA01'
                      : legend.name == '省内市外'
                      ? '#03D2FF'
                      : '#00FFDE',
                }"
              >
                <span
                  class="rect"
                  :style="{
                    background:
                      legend.name == '绍兴市'
                        ? '#FEBA01'
                        : legend.name == '省内市外'
                        ? '#03D2FF'
                        : '#00FFDE',
                  }"
                ></span>
                {{ legend.name }} {{ legend.value }}
              </div>
            </div>
          </div>
        </div>
      </ShadowContainer>
    </div>
    <div class="rt-area" id="reset-area1">
      <Title type="long" text="一周考勤"></Title>
      <ShadowContainer class="long-container">
        <div id="week-check-chart" ref="weekcheckChart"></div>
        <div class="separate-line"></div>
        <div id="week-work-chart" ref="weekworkChart"></div>
      </ShadowContainer>
      <div class="bottom-chart">
        <div style="margin-right: 12px">
          <Title text="近一周进出场统计"></Title>
          <ShadowContainer>
            <div id="in-out-chart" ref="inoutChart"></div>
          </ShadowContainer>
        </div>

        <div>
          <Title text="工种分布"></Title>
          <ShadowContainer>
            <div
              class="work-types"
              id="table-scroll"
              @mouseenter="clearScroll2"
              @mouseleave="reScroll2"
            >
              <div
                v-for="(iType, index) in industryTypes"
                :key="index"
                class="i-type"
              >
                <div class="type-info">
                  <div class="i-type-name">
                    <img src="@/assets/realname/fl-renyuan.png" alt="" />
                    {{ iType.name }}
                  </div>

                  <div class="i-type-count">
                    <span>{{ iType.total }}</span>
                    人
                  </div>
                </div>

                <div class="slider">
                  <el-slider
                    :value="
                      Number(
                        Number(
                          (iType.total / industryTypesTotal) * 100
                        ).toFixed(2)
                      )
                    "
                    :format-tooltip="formatSlider"
                    disabled
                  ></el-slider>
                </div>
              </div>
            </div>
          </ShadowContainer>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getRealNameStatus,
  getCurrentAttendance,
  getPersonAreaStatus,
  getLastWeekAttendance,
  getLastWeekWorkType,
  getInOutData,
  getWorkTypeList,
} from "@/api/index";
export default {
  name: "Realname",
  data() {
    return {
      checkList: [],
      industryTypes: [],
      classOption: {
        singleHeight: 118,
      },
      screenDetail: {},
      inOutData: [],
      personAreaDetail: [],
      lastweekAttendanceData: [],
      lastweekWorkTypeData: [],
      industryTypesTotal: 0,
      date: "",
      intervalTimer: null,
      areaTotal: 0,
      interval1: null,
      interval2: null,
    };
  },
  methods: {
    formatSlider(value) {
      return `人数占总工程人数：${value}%`;
    },
    getTime() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = month > 9 ? month : "0" + month;
      day = day < 10 ? "0" + day : day;
      let today = year + "-" + month + "-" + day;
      this.date = today;
    },
    renderAreaChart() {
      const chart = this.$echarts.init(this.$refs.areaChart);

      const areaData = [...this.personAreaDetail];
      let total = 0;
      areaData.map((item) => {
        total += item.value;
      });
      this.areaTotal = total;
      const option = {
        tooltip: {
          appendToBody: true,
          trigger: "item",
        },

        series: [
          {
            type: "pie",
            radius: ["58%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 20,
              borderWidth: 4,
            },
            label: {
              show: false,
              position: "center",
            },

            data: areaData.map((item) => {
              return {
                ...item,
                itemStyle: {
                  color:
                    item.name == "绍兴市"
                      ? "#FEBA01"
                      : item.name == "省内市外"
                      ? "#03D2FF"
                      : "#00FFDE",
                },
              };
            }),
          },
        ],
      };
      chart.setOption(option);
      this.$nextTick(() => {
        // 解决echarts图表放大溢出父容器
        const resizeOb = new ResizeObserver((entries) => {
          for (const entry of entries) {
            this.$echarts.getInstanceByDom(entry.target).resize();
          }
        });
        resizeOb.observe(document.getElementById("area-chart"));
      });
    },
    renderWeekCheckChart() {
      const xAxisData = this.lastweekAttendanceData.map((item) => {
        return item.date;
      });
      const checkData = this.lastweekAttendanceData.map((item) => {
        return item.num;
      });
      const chart = this.$echarts.init(this.$refs.weekcheckChart);
      const option = {
        title: {
          text: "近一周考勤",
          left: "center",
          textStyle: {
            //标题样式
            fontSize: 16,
            fontWeight: "bolder",
            color: "#fff",
            textAlign: "center",
          },
        },
        color: "#00FFF0",
        grid: {
          top: 30,
          bottom: 30,
          left: 30,
          right: 30,
        },
        tooltip: {
          appendToBody: true,
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisTick: { show: false },
          axisLabel: {
            fontSize: "12",
            color: "#c6def9",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            fontSize: "12",
            color: "#c6def9",
          },
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              color: "rgba(95, 120, 144, 0.4)",
            },
          },
          minInterval: 1,
        },
        series: [
          {
            data: checkData,
            type: "line",
            symbol: "circle",
            symbolSize: 12,
          },
        ],
      };
      chart.setOption(option);
      this.$nextTick(() => {
        // 解决echarts图表放大溢出父容器
        const resizeOb = new ResizeObserver((entries) => {
          for (const entry of entries) {
            this.$echarts.getInstanceByDom(entry.target).resize();
          }
        });
        resizeOb.observe(document.getElementById("week-check-chart"));
      });
    },
    renderWeekWorkChart() {
      const xAxisData = this.lastweekWorkTypeData.map((item) => {
        return item.date;
      });
      const workTypes = this.lastweekWorkTypeData[0].data.map((workType) => {
        return workType.name;
      });
      const seriesData = workTypes.map((workType) => {
        const dayDataArray = [];
        this.lastweekWorkTypeData.map((item) => {
          item.data.map((dayData) => {
            if (dayData.name == workType) {
              dayDataArray.push(dayData.total);
            }
          });
        });
        return {
          name: workType,
          data: dayDataArray,
          type: "line",
          smooth: true,
        };
      });

      const chart = this.$echarts.init(this.$refs.weekworkChart);
      const option = {
        title: {
          text: "近一周工种考勤",
          left: "center",
          textStyle: {
            //标题样式
            fontSize: 16,
            fontWeight: "bolder",
            color: "#fff",
          },
        },
        color: [
          "#b5a94a",
          "#a83e39",
          "#64b95d",
          "#f2b486",
          "#436db2",
          "#fdf193",
          "#929292",
          "#ec8b88",
          "#8db7f9",
          "#c783f8",
          "#9ffba1",
          "#ea6f2d",
          "#76ecfc",
          "#e638b5",
          "#f9e44c",
          "#3573f6",
          "#9d2df6",
          "#efd2d2",
          "#7dfa5f",
          "#e63223",
          "#f2bb7f",
          "#93defb",
        ],
        grid: {
          top: 80,
          bottom: 20,
          left: 120,
          right: 30,
        },
        legend: {
          orient: "vertical",
          left: "0",
          top: "0",
          icon: "rect",
          type: "scroll",
          itemWidth: 6,
          itemHeight: 6,
          textStyle: {
            fontSize: 12,
            color: "rgba(225, 239, 255, 0.7)",
          },
          pageIcons: {
            vertical: [
              `path://M210.037 456.406L602.263 104.35A87.354 87.354 0 0 1 660.613 82C708.877 82 748 121.15 748 169.444v704.111a87.476 87.476 0 0 1-22.336 58.39c-32.226 35.95-87.474 38.951-123.4 6.704L210.036 586.593a87.415 87.415 0 0 1-6.7-6.705c-32.227-35.95-29.227-91.235 6.7-123.482z`,
              `path://M238.944 129.792l0 764.8c0 17.6 14.4 32 32 32 6.4 0 14.4-1.6 19.232-6.39999999l476.8-369.60000001c20.8-16 24-46.4 8-67.20000001-3.2-3.232-4.8-6.368-8-7.96799999l-476.8-371.264c-14.4-11.2-33.632-7.99999999-44.8 6.4-4.832 4.832-6.432 11.232-6.432 19.232z`,
            ],
          },
          pageIconColor: "#3E88FF", //翻页下一页的三角按钮颜色
          pageIconInactiveColor: "#333", //翻页（即翻页到头时）
          pageIconSize: 14, //翻页按钮大小
          pageFormatter: " ", //隐藏翻页的数字
          formatter: function (name) {
            if (name.length > 4) {
              return name.slice(0, 4) + "...";
            } else {
              return name;
            }
          },
        },
        tooltip: {
          appendToBody: true,
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisTick: { show: false },
          axisLabel: {
            fontSize: "12",
            color: "#c6def9",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            fontSize: "12",
            color: "#c6def9",
          },
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              color: "rgba(95, 120, 144, 0.4)",
            },
          },
          minInterval: 1,
        },
        series: seriesData,
      };
      chart.setOption(option);
      this.$nextTick(() => {
        // 解决echarts图表放大溢出父容器
        const resizeOb = new ResizeObserver((entries) => {
          for (const entry of entries) {
            this.$echarts.getInstanceByDom(entry.target).resize();
          }
        });
        resizeOb.observe(document.getElementById("week-work-chart"));
      });
    },
    renderInOutChart() {
      const xAxisData = this.inOutData.map((item) => {
        return item.date;
      });
      const inData = this.inOutData.map((item) => {
        return item.work_in;
      });
      const outData = this.inOutData.map((item) => {
        return item.work_out;
      });
      const chart = this.$echarts.init(this.$refs.inoutChart);
      const option = {
        color: ["#FF4544", "#2980FF"],
        grid: {
          top: 30,
          bottom: 30,
          left: 30,
          right: 30,
        },
        legend: {
          orient: "horizontal",
          x: "center",
          y: "top",
          textStyle: {
            fontSize: 12,
            color: "rgba(225, 239, 255, 0.7)",
          },
        },
        tooltip: {
          appendToBody: true,
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisTick: { show: false },
          axisLabel: {
            fontSize: "12",
            color: "#c6def9",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            fontSize: "12",
            color: "#c6def9",
          },
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              color: "rgba(95, 120, 144, 0.4)",
            },
          },
          minInterval: 1,
        },
        series: [
          {
            name: "进场",
            data: inData,
            type: "line",
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#FF4544",
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,0)",
                },
              ]),
            },
          },
          {
            name: "离场",
            type: "line",
            data: outData,
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#2980ff",
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,0)",
                },
              ]),
            },
          },
        ],
      };
      chart.setOption(option);
      this.$nextTick(() => {
        // 解决echarts图表放大溢出父容器
        const resizeOb = new ResizeObserver((entries) => {
          for (const entry of entries) {
            this.$echarts.getInstanceByDom(entry.target).resize();
          }
        });
        resizeOb.observe(document.getElementById("in-out-chart"));
      });
    },
    getRealNameStatus() {
      getRealNameStatus().then((res) => {
        this.screenDetail = res.data;
      });
      getCurrentAttendance({
        start_date: this.date,
        end_date: this.date,
      }).then((res) => {
        this.checkList = [...res.data];
        this.intervalTimer = setInterval(() => {
          getCurrentAttendance({
            start_date: this.date,
            end_date: this.date,
          }).then((res) => {
            this.checkList = [...res.data];
          });
        }, 60000);
        this.$nextTick(() => {
          const element = document.getElementById("warp-list");
          this.autoScroll1(1, 50, 1500, element);
        });
      });

      getPersonAreaStatus().then((res) => {
        this.personAreaDetail = res.data;
        this.renderAreaChart();
      });
      getLastWeekAttendance().then((res) => {
        this.lastweekAttendanceData = res.data;
        this.renderWeekCheckChart();
      });
      getLastWeekWorkType().then((res) => {
        this.lastweekWorkTypeData = res.data;
        this.renderWeekWorkChart();
      });
      getInOutData().then((res) => {
        this.inOutData = res.data;
        this.renderInOutChart();
      });
      getWorkTypeList().then((res) => {
        this.industryTypes = res.data;
        this.industryTypesTotal = eval(
          res.data
            .map((item) => {
              return item.total;
            })
            .join("+")
        );
        this.$nextTick(() => {
          const element = document.getElementById("table-scroll");
          this.autoScroll2(1, 50, 1500, element);
        });
      });
    },
    autoScroll1(stepLength, speed, delay, element) {
      var that = this;
      function start() {
        that.interval1 = setInterval(scrolling, speed);
        element.scrollTop += stepLength;
      }
      function scrolling() {
        var sTop = element.scrollTop;
        element.scrollTop += stepLength;
        if (
          sTop === element.scrollTop ||
          sTop == 0 ||
          element.scrollTop === element.scrollHeight - element.offsetHeight
        ) {
          element.scrollTop = 0;
          clearInterval(that.interval1);
          that.timeout1 = setTimeout(start, delay);
        }
      }
      if (element.offsetHeight !== element.scrollHeight) {
        // 元素内容没有溢出时，不触发
        that.timeout1 = setTimeout(start, delay);
      }
    },
    autoScroll2(stepLength, speed, delay, element) {
      clearTimeout();
      var that = this;
      function start() {
        that.interval2 = setInterval(scrolling, speed);
        element.scrollTop += stepLength;
      }
      function scrolling() {
        var sTop = element.scrollTop;
        element.scrollTop += stepLength;
        if (
          sTop === element.scrollTop ||
          sTop == 0 ||
          element.scrollTop === element.scrollHeight - element.offsetHeight
        ) {
          element.scrollTop = 0;
          clearInterval(that.interval2);
          that.timeout2 = setTimeout(start, delay);
        }
      }
      if (element.offsetHeight !== element.scrollHeight) {
        // 元素内容没有溢出时，不触发
        that.timeout2 = setTimeout(start, delay);
      }
    },
    clearScroll1() {
      clearInterval(this.interval1);
      clearTimeout(this.timeout1);
    },
    reScroll1() {
      this.$nextTick(() => {
        const element = document.getElementById("warp-list");
        this.autoScroll1(1, 50, 1500, element);
      });
    },
    clearScroll2() {
      clearInterval(this.interval2);
      clearTimeout(this.timeout2);
    },
    reScroll2() {
      this.$nextTick(() => {
        const element = document.getElementById("table-scroll");
        this.autoScroll2(1, 50, 1500, element);
      });
    },
  },
  mounted() {
    this.getTime();
    this.getRealNameStatus();
  },
  beforeDestroy() {
    clearInterval(this.intervalTimer);
  },
};
</script>
<style lang="less" scoped>
@import "@/assets/common/element.less";
#realname {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 0;
  height: calc(100% - 12px);
  .lt-area {
    width: 350px;
  }
  .mid-area {
    width: 510px;
    height: 100%;
  }
  .lt-area {
    height: 100%;
    .status {
      height: 100%;
      .status-count {
        background: url("@/assets/realname/rect.png") no-repeat;
        background-size: 100% 100%;
        padding: 0px 20px;
        margin-bottom: 12px;
        height: calc(100% / 6 - 18px);
        &:last-child {
          margin-bottom: 0;
        }
        .status-img {
          width: 120px;
        }
        .status-detail {
          display: inline-block;
          vertical-align: top;
          width: calc(100% - 120px);
          .status-text {
            font-size: 22px;
            color: #1abcec;
            text-align: right;
            line-height: 60px;
          }
          .status-number {
            text-align: right;
            font-size: 44px;
            font-weight: bold;
            color: #fff;
            line-height: 60px;
            letter-spacing: 4px;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
          }
        }
      }
    }
  }
  .mid-area {
    margin: 0 12px;
  }

  .rt-area {
    width: calc(100% - 884px);
  }
}
.bottom-chart {
  display: flex;
  justify-content: space-between;
  height: 32%;
  & > div {
    width: calc(50% - 6px);
    height: 100%;
    ::v-deep {
      .shadow-container {
        height: calc(100% - 50px);
      }
    }
  }
}
.warp {
  height: 100%;
  overflow: hidden;
}
.person-check {
  padding: 14px;
  background: rgba(20, 86, 144, 0.2);
  border-radius: 4px;
  margin-bottom: 12px;
  display: flex;
  &:hover {
    background: rgba(20, 86, 144, 0.5);
  }
  .portrait {
    position: relative;
    .rect {
      width: 80px;
      height: 80px;
      vertical-align: top;
    }
    .person-head {
      position: absolute;
      top: 8px;
      width: 64px;
      height: 64px;
      left: 8px;
    }
  }
  .person-detail {
    font-size: 14px;

    color: #c6def9;
    margin-left: 24px;
    width: calc(100% - 104px);
    line-height: calc(80px / 3);
    .name {
      display: flex;
      justify-content: space-between;
    }
  }
}

#area-chart {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: url("@/assets/chart.png") no-repeat;
  background-size: 50% 50%;
  background-position: center center;
}
.chart-title {
  background: rgba(40, 137, 195, 0.2);
  border: 1px solid #217ff7;
  width: 160px;
  text-align: center;
  font-size: 16px;

  font-weight: bold;
  color: #ffffff;
  padding: 6px 0;
  letter-spacing: 2px;
}
#week-check-chart {
  width: 100%;
  height: calc(50% - 10px);
}
#week-work-chart {
  width: 100%;
  height: calc(50%);
}
#in-out-chart {
  width: 100%;
  height: 100%;
}
.i-type {
  font-size: 14px;
  color: #c6def9;
  padding: 4px;
  .type-info {
    display: flex;
    justify-content: space-between;
  }
  .slider {
    width: calc(100% - 12px);
    vertical-align: top;
    margin: 0 6px;
  }
  .i-type-name,
  .i-type-count {
    vertical-align: top;
    white-space: nowrap;
    span {
      font-size: 14px;
    }
    img {
      width: 18px;
      vertical-align: top;
    }
  }
  .i-type-name {
    padding-right: 12px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
::v-deep .el-slider__bar {
  background-image: linear-gradient(90deg, #152647 0%, #5a9bee 97%) !important;
  height: 10px;
}
::v-deep .el-slider__runway {
  background: #103153;
  height: 10px;
}
::v-deep .el-slider__button {
  width: 12px;
  height: 12px;
}
::v-deep .el-slider__button-wrapper {
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.work-types {
  max-height: 100%;
  overflow-y: scroll;
}
.no-data {
  text-align: center;
  font-size: 14px;
  color: #86919e;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  img {
    width: 200px;
    margin: 0 auto;
    vertical-align: top;
  }
}

.long-container {
  height: calc(52% - 50px);
}
.short-container {
  height: calc(32% - 50px);
}
.separate-line {
  width: 100%;
  height: 4px;
  margin: 8px 0;
  background: #114e70;
}

.chart-legends {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: calc(100% - 300px);
  & > div {
    padding: 0 20px;
    font-size: 14px;
    line-height: 36px;
    width: 100%;
    text-align: left;
  }
  .rect {
    width: 8px;
    height: 8px;
    display: inline-block;
    vertical-align: middle;
  }
}

.chart-container {
  position: relative;
  width: 300px;
  height: 300px;
  .title {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translateX(-50%) translateY(-50%);
    .main-title {
      font-size: 30px;
      font-weight: bold;
      color: #00fcff;
    }
    .sub-title {
      font-size: 16px;
      font-weight: bold;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}
</style>