gb18186

ZZJ

2022-07-27 88078aa63c669cffc2d91e1269d460436427d09d

 src/views/manageCenter/index.vue

@@ -1,10 +1,1261 @@
<template>
  <div class="manageCenter">管理中心</div>
  <div class="manageCenter">
    <!-- 页头 -->
    <IndexHeader :opacity="false"></IndexHeader>

    <div class="centerTitle">
      <div class="heart">
        <div class="welcome">{{ userName }}, 欢迎您回到贝思科管理中心。</div>
        <div class="time">{{ timeMsg }}</div>
      </div>
    </div>

    <!-- 版心 -->
    <div class="heart">
      <div class="products">
        <div class="title">全部产品</div>
        <div class="productList">
          <div
            class="productItem"
            v-for="(item, index) in productList"
            :key="index"
            @click="jump(item)"
          >
            <img :src="item.icon" alt="" />
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
      </div>

      <div class="equipmentInfo">
        <div class="equipmentCard">
          <div class="label">设备总量</div>
          <div class="number">
            34
            <div class="upIcon iconfont">&#xe62e; 2</div>
          </div>

          <img src="/images/manageCenter/total2.png" alt="" />
        </div>

        <div class="equipmentCard">
          <div class="label">摄像机总数</div>
          <div class="number">
            23
            <div class="upIcon iconfont">&#xe62e; 2</div>
          </div>

          <img src="/images/manageCenter/total3.png" alt="" />
        </div>

        <div class="equipmentCard">
          <div class="label">算法总数</div>
          <div class="number">
            34
            <div class="downIcon iconfont">&#xe651; 2</div>
          </div>

          <img src="/images/manageCenter/total4.png" alt="" />
        </div>

        <div class="equipmentCard">
          <div class="label">任务总数</div>
          <div class="number">
            34
            <div class="downIcon iconfont">&#xe651; 2</div>
          </div>

          <img src="/images/manageCenter/total1.png" alt="" />
        </div>
      </div>

      <div class="equipmentStatus">
        <div class="left">
          <div class="title">设备运行状态监测</div>
          <div class="control">
            <div
              class="label"
              @click="select('day', 'selectBar')"
              :class="{ active: selectBar === 'day' }"
            >
              今日
            </div>
            <div
              class="label"
              @click="select('week', 'selectBar')"
              :class="{ active: selectBar === 'week' }"
            >
              本周
            </div>
            <div
              class="label"
              @click="select('month', 'selectBar')"
              :class="{ active: selectBar === 'month' }"
            >
              本月
            </div>
          </div>
          <div id="bar"></div>
        </div>

        <div class="right">
          <div class="title">设备离线时长排行</div>
          <div class="timeList scroll">
            <div
              class="timeItem"
              v-for="(item, index) in timeList"
              :key="index"
            >
              <div class="index">
                {{ index / 10 >= 1 ? index : `0${index}` }}.
              </div>
              <div class="name">
                {{ item.name }}
              </div>
              <div class="time">{{ item.time }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="performence">
        <div class="title">设备运行状态监测</div>
        <div class="control">
          <div
            class="label"
            @click="select('day', 'selectForm')"
            :class="{ active: selectForm === 'day' }"
          >
            今日
          </div>
          <div
            class="label"
            @click="select('week', 'selectForm')"
            :class="{ active: selectForm === 'week' }"
          >
            本周
          </div>
          <div
            class="label"
            @click="select('month', 'selectForm')"
            :class="{ active: selectForm === 'month' }"
          >
            本月
          </div>
        </div>
        <div class="table-area">
          <el-table
            id="table"
            ref="table"
            tooltip-effect="dark"
            :data="dataList"
            :fit="true"
            :stripe="true"
            class="gutter"
          >
            <el-table-column label="序号" class-name="index">
              <template slot-scope="scope">{{
                scope.$index + 1 + (page - 1) * size
              }}</template>
            </el-table-column>

            <el-table-column
              prop="name"
              label="设备名称"
              show-overflow-tooltip
            ></el-table-column>

            <el-table-column
              prop="id"
              label="设备ID"
              show-overflow-tooltip
            ></el-table-column>

            <el-table-column
              prop="mem"
              label="内存"
              show-overflow-tooltip
            ></el-table-column>

            <el-table-column
              prop="gpu"
              label="算力"
              show-overflow-tooltip
            ></el-table-column>

            <el-table-column
              prop="cpu"
              label="cpu"
              show-overflow-tooltip
            ></el-table-column>

            <el-table-column
              prop="dist"
              label="硬盘"
              show-overflow-tooltip
            ></el-table-column>
          </el-table>
          <el-pagination
            @current-change="refrash"
            @size-change="handleSizeChange"
            :current-page="page"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[5, 10, 15, 20, 25]"
            :total="total"
            background
          ></el-pagination>
        </div>
      </div>

      <div class="map">
        <div class="title">算法预警数据占比</div>
        <div id="mapChart"></div>
      </div>

      <div class="hashRate">
        <div class="left">
          <div class="title">算法预警数据占比:</div>
          <div class="info">
            <div class="item">
              <div class="label">今日平均算力:</div>
              <div class="data">45</div>
            </div>
            <div class="item">
              <div class="label">设备总量:</div>
              <div class="data">92</div>
            </div>
          </div>
          <div id="scatterChart"></div>
        </div>
        <div class="right">
          <div class="title">算法预警数据占比</div>
          <div id="pieChart"></div>
        </div>
      </div>
    </div>

    <!-- 页尾 -->
    <Footer :isBlack="true"></Footer>
  </div>
</template>

<script>
export default {};
import IndexHeader from "@/components/IndexHeader";
import Footer from "@/components/Footer";
import * as echarts from "echarts";
import "echarts/map/js/china.js";

export default {
  components: {
    IndexHeader,
    Footer,
  },
  created() {
    this.getInfo();
  },
  mounted() {
    this.initBar();
    this.initMap();
    this.initScatter();
    this.initPie();
  },
  data() {
    return {
      userName: "",
      timeMsg: "",
      selectBar: "day",
      selectForm: "day",
      productList: [
        {
          name: "设备管理",
          icon: "/images/manageCenter/manage.png",
          openPath: "/equipmentManagement",
          path: "/equipmentList",
          permission: "deviceMng",
        },

        {
          name: "算力管理",
          icon: "/images/manageCenter/manage2.png",
          openPath: "/hashrate",
          path: "/hashrateDetail",
          permission: "analysisMng",
        },

        {
          name: "统计查询",
          icon: "/images/manageCenter/search.png",
          openPath: "/searchOpen",
          path: "/search",
          permission: "statisticMng",
        },

        {
          name: "GB28181",
          icon: "/images/manageCenter/search.png",
          openPath: "/GB28181Open",
          path: "/GB28181Open",
          permission: "statisticMng",
        },
      ],
      timeList: [
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
      ],
      barOption: {
        legend: {
          x: "right",
          y: "top",
          itemHeight: 12,
          itemWidth: 12,
          icon: "circle",
        },
        tooltip: {},
        dataset: {
          source: [
            ["status", "在线", "离线"],
            ["00:00", 750, 130],
            ["02:00", 650, 230],
            ["04:00", 750, 130],
            ["06:00", 550, 330],
            ["08:00", 750, 130],
            ["10:00", 700, 180],
            ["12:00", 850, 30],
            ["14:00", 750, 130],
            ["16:00", 850, 30],
            ["18:00", 980, 0],
            ["20:00", 750, 130],
            ["22:00", 750, 130],
          ],
        },
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#666",
          },
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          axisLine: {
            //y轴
            show: false,
          },
          axisLabel: {
            color: "#666",
          },
          splitLine: {
            //网格线
            lineStyle: {
              color: "rgb(230, 230, 230)",
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
            },
            show: true, //隐藏或显示
          },
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: "bar",
            color: {
              type: "linear",
              x: 0.02,
              y: 0.02,
              x2: 1,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#0066FF", // 0% 处的颜色
                  radius: ["50%", "80%"],
                },
                {
                  offset: 1,
                  color: "rgba(0, 102, 255, 0.25)", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: [15, 15, 0, 0],
              },
            },
          },
          {
            type: "bar",
            color: {
              type: "linear",
              x: 0.02,
              y: 0.02,
              x2: 1,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#FF4B33", // 0% 处的颜色
                  radius: ["50%", "80%"],
                },
                {
                  offset: 1,
                  color: "rgba(255,75,51,0.25)", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: [15, 15, 0, 0],
              },
            },
          },
        ],
      },
      mapOption: {
        visualMap: {
          left: "right",
          min: 0,
          max: 100,
          inRange: {
            color: ["#FCFDFF", "#0065FF"],
          },
          itemWidth: 56,
          itemHeight: 200,
          text: ["100", "0"],
          calculable: false,
        },
        geo: {
          //中国地图设置
          map: "china",
          scaleLimit: {
            min: 1,
            max: 2,
          },
          zoom: 1,
          top: 120,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
        },
        tooltip: {
          //显示悬浮窗口
          trigger: "item", //使用这个函数返回悬浮内容
          backgroundColor: "#FFFFFF",
          textStyle: {
            color: "#0064FF",
            fontSize: "14",
          },
          formatter: function (params) {
            const msg = params.data.name + ":" + params.data.value;
            return msg;
          },
        },

        series: [
          {
            type: "map",
            geoIndex: 0,
            data: [
              {
                name: "南海诸岛",
                value: 0,
                eventTotal: 100,
                specialImportant: 10,
                import: 10,
                compare: 10,
                common: 40,
                specail: 20,
              },
              {
                name: "北京",
                value: 99,
              },
              {
                name: "天津",
                value: 26,
              },
              {
                name: "上海",
                value: 44,
              },
              {
                name: "重庆",
                value: 0,
              },
              {
                name: "河北",
                value: 0,
              },
              {
                name: "河南",
                value: 0,
              },
              {
                name: "云南",
                value: 55,
              },
              {
                name: "辽宁",
                value: 19,
              },
              {
                name: "黑龙江",
                value: 0,
              },
              {
                name: "湖南",
                value: 0,
              },
              {
                name: "安徽",
                value: 60,
              },
              {
                name: "山东",
                value: 39,
              },
              {
                name: "新疆",
                value: 4,
              },
              {
                name: "江苏",
                value: 0,
              },
              {
                name: "浙江",
                value: 0,
              },
              {
                name: "江西",
                value: 36,
              },
              {
                name: "湖北",
                value: 52,
              },
              {
                name: "广西",
                value: 0,
              },
              {
                name: "甘肃",
                value: 7,
              },
              {
                name: "山西",
                value: 5,
              },
              {
                name: "内蒙古",
                value: 0,
              },
              {
                name: "陕西",
                value: 22,
              },
              {
                name: "吉林",
                value: 4,
              },
              {
                name: "福建",
                value: 18,
              },
              {
                name: "贵州",
                value: 5,
              },
              {
                name: "广东",
                value: 98,
              },
              {
                name: "青海",
                value: 1,
              },
              {
                name: "西藏",
                value: 0,
              },
              {
                name: "四川",
                value: 44,
              },
              {
                name: "宁夏",
                value: 4,
              },
              {
                name: "海南",
                value: 22,
              },
              {
                name: "台湾",
                value: 3,
              },
              {
                name: "香港",
                value: 5,
              },
              {
                name: "澳门",
                value: 555,
              },
            ],
          },
        ],
      },
      scatterOption: {
        xAxis: {
          axisTick: {
            show: false,
          },
          axisLine: {
            //y轴
            show: false,
          },
          splitLine: {
            //网格线
            lineStyle: {
              color: "rgb(230, 230, 230)",
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
            },
            show: true, //隐藏或显示
          },
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          axisLine: {
            //y轴
            show: false,
          },
          splitLine: {
            //网格线
            lineStyle: {
              color: "rgb(230, 230, 230)",
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
            },
            show: true, //隐藏或显示
          },
        },

        series: [
          {
            symbolSize: 20,
            data: [
              [10.0, 8.04],
              [8.07, 6.95],
              [13.0, 7.58],
              [9.05, 8.81],
              [11.0, 8.33],
              [14.0, 7.66],
              [13.4, 6.81],
              [10.0, 6.33],
              [14.0, 8.96],
              [12.5, 6.82],
              [9.15, 7.2],
              [11.5, 7.2],
              [3.03, 4.23],
              [12.2, 7.83],
              [2.02, 4.47],
              [1.05, 3.33],
              [4.05, 4.96],
              [6.03, 7.24],
              [12.0, 6.26],
              [12.0, 8.84],
              [7.08, 5.82],
              [5.02, 5.68],
            ],
            color: "rgba(0, 101, 255, 0.5)",
            type: "scatter",
          },
        ],
      },
      pieOption: {
        color: [
          "rgb(54, 60, 231)",
          "rgb(54, 178, 74)",
          "rgb(255, 178, 36)",
          "rgb(0, 190, 231)",
          "rgb(255, 124, 31)",
          "rgb(165, 96, 255)",
        ],
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [35, 120],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 22.45, name: "离岗" },
              { value: 20.2, name: "人脸识别" },
              { value: 17.96, name: "车辆识别" },
              { value: 15.71, name: "睡岗" },
              { value: 12.86, name: "安全帽检测" },
              { value: 10.82, name: "个体静止" },
            ],
          },
        ],
      },
      dataList: [
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
        },
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
        },
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
        },
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
        },
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
        },
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
        },
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
        },
        {
          name: "2.154",
          id: "DSVAD010120190703",
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
        },
      ],
      page: 1,
      size: 5,
      total: 30,
    };
  },
  methods: {
    getInfo() {
      if (sessionStorage.getItem("userInfo")) {
        this.userName = JSON.parse(sessionStorage.getItem("userInfo")).username;
      }

      let date = new Date();
      let year = date.getFullYear(); //获取完整的年份(4位)
      let month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      let day = date.getDate(); //获取当前月份(0-11,0代表1月)
      let weekDay = "";
      switch (date.getDay()) {
        case 0:
          weekDay = "星期日";
          break;

        case 1:
          weekDay = "星期一";
          break;

        case 2:
          weekDay = "星期二";
          break;

        case 3:
          weekDay = "星期三";
          break;

        case 4:
          weekDay = "星期四";
          break;

        case 5:
          weekDay = "星期五";
          break;

        case 6:
          weekDay = "星期六";
          break;
      }
      this.timeMsg =
        "今日, " + year + "年" + month + "月" + day + "日" + weekDay;
    },
    select(value, type) {
      this[type] = value;
    },
    initBar() {
      let bartDom = document.getElementById("bar");
      let myChart = echarts.init(bartDom);
      myChart.setOption(this.barOption);
    },
    initMap() {
      let mapDom = document.getElementById("mapChart");
      let myChart = echarts.init(mapDom);
      myChart.setOption(this.mapOption);
    },
    initScatter() {
      let scatterDom = document.getElementById("scatterChart");
      let myChart = echarts.init(scatterDom);
      myChart.setOption(this.scatterOption);
    },
    initPie() {
      let pieDom = document.getElementById("pieChart");
      let myChart = echarts.init(pieDom);
      myChart.setOption(this.pieOption);
    },
    jump(route) {
      const userInfo = JSON.parse(sessionStorage.getItem("userInfo"));

      const val = userInfo.permissions.find((item) => {
        return item == route.permission;
      });
      if (val) {
        if (route.path === "/search") {
          const { href } = this.$router.resolve({
            path: "/search",
          });
          window.open(href, "_blank");
          return;
        }
        this.$router.push(route.path);
      } else if (!userInfo.parentId) {
        this.$router.push(route.openPath);
      }
    },
    refrash() {},
    handleSizeChange() {},
  },
};
</script>

<style>
<style lang="scss" scoped>
.manageCenter {
  box-sizing: border-box;
  min-width: 1346px;
  background-color: rgb(243, 245, 248);

  .title {
    margin-bottom: 20px;
    box-sizing: border-box;
    padding-left: 10px;
    border-left: 4px solid #0064ff;
    font-size: 16px;
    font-weight: 700;
  }

  .control {
    position: absolute;
    display: flex;
    top: 20px;
    right: 20px;

    .label {
      margin-left: 10px;
      width: 44px;
      height: 24px;
      line-height: 24px;
      font-size: 14px;
      text-align: center;
      color: #666;
      cursor: pointer;

      &.active {
        background: #0064ff;
        border-radius: 12px;
        color: #fff;
      }
    }
  }

  .centerTitle {
    box-sizing: border-box;
    padding-top: 47px;
    height: 150px;
    background-image: url("/images/manageCenter/Rectangle 2180.png");

    .welcome {
      font-size: 14px;
      font-weight: 700;
    }

    .time {
      margin-top: 5px;
      font-size: 12px;
      color: #999;
    }
  }

  .products {
    box-sizing: border-box;
    margin: 24px 0;
    padding: 20px;
    max-height: 282px;
    background-color: #fff;

    .productList {
      display: flex;

      .productItem {
        margin-right: 20px;
        width: 190px;
        height: 90px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        border: 1px solid #e9ebee;
        cursor: pointer;

        img {
          width: 60px;
          height: 60px;
        }

        .name {
          font-size: 14px;
          color: #666;
        }

        &:hover {
          box-shadow: 0px 2px 16px 0px rgba(0, 43, 106, 0.25);
        }

        &:nth-child(6n) {
          margin-right: 0px;
        }
      }
    }
  }

  .equipmentInfo {
    display: flex;
    justify-content: space-between;

    .equipmentCard {
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
      padding: 20px 0 20px 40px;
      width: 302px;
      height: 100px;
      border-radius: 5px;
      font-size: 14px;
      color: #fff;

      .number {
        display: flex;
        font-size: 32px;
        font-weight: 700;
        align-items: end;
      }

      .iconfont {
        padding: 0 5px 0 2px;
        margin-left: 10px;
        font-size: 12px;
        font-weight: normal;
        margin-bottom: 6px;
        background-color: #fff;
        border-radius: 7px;

        &.upIcon {
          color: #ff6a00;
        }

        &.downIcon {
          color: #3fb54a;
        }
      }

      img {
        position: absolute;
        width: 96px;
        height: 96px;
        top: 10px;
        right: -10px;
        opacity: 0.2;
      }

      &:nth-child(1) {
        background: linear-gradient(
          108deg,
          #0065ff -8%,
          #0065ff -8%,
          #99cfff 100%,
          #99cfff 100%
        );
      }

      &:nth-child(2) {
        background: linear-gradient(
          108deg,
          #ff6a00 0%,
          #ff6a00 0%,
          #ffb599 100%,
          #ffb599 100%
        );
      }

      &:nth-child(3) {
        background: linear-gradient(
          108deg,
          #6d44e5 1%,
          #6d44e5 1%,
          #b299ff 100%,
          #b299ff 100%
        );
      }

      &:nth-child(4) {
        background: linear-gradient(
          108deg,
          #40b63a 0%,
          #40b63a 0%,
          #89e5bc 100%,
          #89e5bc 100%
        );
      }
    }
  }

  .equipmentStatus {
    display: flex;
    justify-content: space-between;
    margin: 24px 0;
    height: 466px;

    .left {
      box-sizing: border-box;
      position: relative;
      padding: 20px;
      background-color: #fff;
      width: 845px;
      height: 466px;

      #bar {
        height: 440px;
      }
    }

    .right {
      box-sizing: border-box;
      padding: 20px;
      width: 411px;
      height: 466px;
      background: #ffffff;

      .timeList {
        height: 392px;
        overflow-y: auto;

        .timeItem {
          margin-bottom: 24px;
          display: flex;
          align-items: center;
          height: 32px;
          border-radius: 16px;
          background: rgb(249, 251, 253);
          font-size: 14px;

          &:nth-child(1),
          &:nth-child(2),
          &:nth-child(3) {
            background: #eff4f9;
          }

          .index {
            margin: 0 35px 0 20px;
            font-size: 16px;
            color: #0064ff;
          }

          .time {
            margin-left: 50px;
            color: #999;
          }
        }
      }
    }
  }

  .performence {
    box-sizing: border-box;
    position: relative;
    padding: 20px;
    background-color: #fff;
    width: 1280px;
    height: 570px;

    .el-pagination ::v-deep {
      margin-left: 650px;
      margin-top: 30px;
      text-align: center;
      height: 24px;
      .el-pagination__sizes {
        margin-right: 0;
      }

      button {
        margin: 0;
        background-color: #fff;
        border: 1px solid #c0c5cc;
        border-radius: 2px;
      }

      .number {
        background-color: #fff;

        &:not(.disabled):hover {
          color: #0065ff;
        }

        &:not(.disabled).active {
          background-color: #0065ff;
          color: #fff;
        }
      }

      .el-input .el-input__inner {
        padding-left: 0;

        &:hover,
        &:focus {
          border-color: #0065ff;
        }
      }
    }
  }

  .map {
    overflow: hidden;
    box-sizing: border-box;
    padding: 20px;
    margin: 24px 0;
    background-color: #fff;
    height: 598px;

    #mapChart {
      margin-top: -100px;
      width: 1100px;
      height: 600px;
    }
  }

  .hashRate {
    margin-bottom: 20px;
    display: flex;
    height: 540px;

    .left {
      position: relative;
      box-sizing: border-box;
      padding: 20px;
      margin-right: 24px;
      width: 737px;
      background-color: #fff;

      #scatterChart {
        height: 500px;
      }
    }

    .right {
      box-sizing: border-box;
      padding: 20px;
      width: 519px;
      height: 540px;
      background: #ffffff;

      #pieChart {
        margin-top: -40px;
        height: 500px;
      }
    }

    .info {
      position: absolute;
      top: 20px;
      right: 20px;

      .item {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .label {
          margin-right: 8px;
          font-size: 14px;
          color: #666;
        }

        .data {
          font-size: 18px;
          font-weight: 700;
        }
      }
    }
  }
}
</style>