<template>
  <div class="main_root">
    <div class="row_item">
      <div class="cell_item left_w">
        <div class="cell_header">
          <div>设备用户</div>
        </div>
        <div class="content_main" id="deviceUserEcharts"></div>
      </div>
      <div class="cell_item right_w device_info">
        <div class="device_info_left">
          <div class="cell_header">
            <div>设备类型</div>
          </div>
          <div class="content_main" id="deviceModelEcharts"></div>
        </div>
        <div class="device_info_right">
          <div class="cell_header">
            <div>客户端版本</div>
          </div>
          <div class="content_main">
            <div id="controlVersionEcharts"></div>
            <div id="appVersionEcharts"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="row_item">
      <div class="cell_item left_w">
        <div class="cell_header">
          <div>增长趋势</div>
        </div>
        <div class="content_main" id="growthTrendEcharts"></div>
      </div>
      <div class="cell_item right_w">
        <div class="cell_header">
          <div>在线设备</div>
        </div>
        <div class="content_main online_devices">
          <div>
            <div
              class="online_info online_1"
              v-if="onlineDeviceList.length > 0"
            >
              <div class="online_percent">
                {{
                  onlineDeviceList[0].totalnum > 0
                    ? Math.floor(
                        (onlineDeviceList[0].num /
                          onlineDeviceList[0].totalnum) *
                          10000
                      ) / 100
                    : 0
                }}%
              </div>
              <div class="online_percent_title">最近1小时</div>
              <div class="online_title">
                在线 <span>{{ onlineDeviceList[0].num }}</span>
              </div>
            </div>
            <div id="onlineEcharts1"></div>
          </div>
          <div>
            <div
              class="online_info online_2"
              v-if="onlineDeviceList.length > 0"
            >
              <div class="online_percent">
                {{
                  onlineDeviceList[1].totalnum > 0
                    ? Math.floor(
                        (onlineDeviceList[1].num /
                          onlineDeviceList[1].totalnum) *
                          10000
                      ) / 100
                    : 0
                }}%
              </div>
              <div class="online_percent_title">最近48小时</div>
              <div class="online_title">
                在线 <span>{{ onlineDeviceList[1].num }}</span>
              </div>
            </div>
            <div id="onlineEcharts2"></div>
          </div>
          <div>
            <div
              class="online_info online_3"
              v-if="onlineDeviceList.length > 0"
            >
              <div class="online_percent">
                {{
                  onlineDeviceList[2].totalnum > 0
                    ? Math.floor(
                        (onlineDeviceList[2].num /
                          onlineDeviceList[2].totalnum) *
                          10000
                      ) / 100
                    : 0
                }}%
              </div>
              <div class="online_percent_title">最近7天</div>
              <div class="online_title">
                在线 <span>{{ onlineDeviceList[2].num }}</span>
              </div>
            </div>
            <div id="onlineEcharts3"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="row_item">
      <div class="cell_item">
        <div class="cell_header">
          <div>设备活跃度</div>
          <Select
            v-model="deviceActivityInfo.doEvent"
            :transfer="true"
            @on-change="getDeviceActivityList()"
            style="width: 100px; font-size: 14px; font-weight: 400"
          >
            <Option :value="1">最近一月</Option>
            <Option :value="2">最近一周</Option>
          </Select>
        </div>
        <div class="content_main" id="deviceActivityEcharts"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  ra_list_dm,
  ra_list_cc,
  ra_list_sc,
  ra_list_da,
  ra_get_du,
  ra_list_dn,
  ra_list_dut
} from "@/api/ra";
import * as echarts from "echarts";
export default {
  data() {
    return {
      // 图表实例
      echartsInstances: [],
      // 设备用户信息
      deviceUserInfo: {},
      // 设备类型信息
      deviceModelList: [],
      // 客户端版本-管控应用
      controlVersionList: [],
      // 客户端版本-应用商店
      appVersionList: [],
      // 增长趋势
      growthTrendList: [],
      // 在线设备
      onlineDeviceList: [],
      // 设备活跃度
      deviceActivityInfo: {
        // 1最近一月2最近一周
        doEvent: 2,
        list: []
      }
    };
  },
  created() {
    this.getDeviceUserList();
    this.getDeviceModelList();
    this.getControlVersionList();
    this.getAppVersionList();
    this.getGrowthTrendList();
    this.getOnlineDeviceList();
    this.getDeviceActivityList();
  },
  computed: {
    powerParams() {
      return this.$store.getters.powerParams;
    }
  },
  mounted() {
    window.addEventListener("resize", this.echartsResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.echartsResize);
  },
  methods: {
    echartsResize() {
      this.echartsInstances.forEach((eInstance) => {
        if (eInstance && eInstance.getOption()) {
          eInstance.resize();
        }
      });
    },
    // 设备用户信息
    getDeviceUserList() {
      ra_get_du({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid
      }).then((data) => {
        if (data.code === 0) {
          this.deviceUserInfo = data.obj;
          this.initDeviceUserEcharts();
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    initDeviceUserEcharts() {
      let seriesDataList = [];
      seriesDataList = [
        {
          value: this.deviceUserInfo.usernum,
          name: "用户"
        },
        {
          value: this.deviceUserInfo.devicenum,
          name: "设备"
        }
      ];
      const options = {
        tooltip: {
          trigger: "item",
          formatter: (params) => {
            return `${params.name}：${params.value}`;
          }
        },
        legend: {
          right: 16,
          top: "center",
          itemWidth: 10,
          itemHeight: 10,
          //图例距离饼图的距离
          itemGap: 10,
          orient: "vertical",
          data: ["用户", "设备"],
          textStyle: {
            color: "#253A70"
          }
        },
        color: ["#FF8D1A", "#339DFF"],
        series: [
          {
            type: "pie",
            name: "设备用户",
            radius: ["30%", "45%"],
            center: ["45%", "50%"],
            label: {
              formatter: (params) => {
                if (params.name === "用户") {
                  return `{usernumCss|${params.value}} 人`;
                }
                return `{devicenumCss|${params.value}} 台`;
              },
              rich: {
                usernumCss: {
                  color: "#FF8D1A",
                  fontSize: 18
                },
                devicenumCss: {
                  marginRight: 4,
                  color: "#339DFF",
                  fontSize: 18
                }
              },
              borderWidth: 1,
              borderRadius: 4,
              color: "#7C8DB5",
              fontSize: 12,
              lineHeight: 18
            },
            data: seriesDataList
          }
        ]
      };
      const eInstance = echarts.init(
        document.getElementById("deviceUserEcharts")
      );
      eInstance.clear();
      eInstance.setOption(options);
      this.echartsInstances.push(eInstance);
    },
    // 设备类型信息
    getDeviceModelList() {
      ra_list_dm({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid
      }).then((data) => {
        if (data.code === 0) {
          this.deviceModelList = data.obj;
          this.initDeviceModelEcharts();
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    initDeviceModelEcharts() {
      let legendNameList = [];
      let seriesDataList = [];
      this.deviceModelList.forEach((item) => {
        legendNameList.push(item.deviceModel);
        seriesDataList.push({
          value: item.devicenum,
          name: item.deviceModel
        });
      });
      const options = {
        tooltip: {
          trigger: "item",
          formatter: (params) => {
            return `${params.name}：${params.value}`;
          }
        },
        legend: {
          bottom: "10",
          left: "center",
          itemWidth: 10,
          itemHeight: 10,
          //图例距离饼图的距离
          itemGap: 10,
          orient: "horizontal",
          data: legendNameList,
          textStyle: {
            color: "#253A70"
          }
        },
        color: ["#52C41A", "#FF811A"],
        series: [
          {
            type: "pie",
            name: "设备类型",
            radius: ["25%", "35%"],
            center: ["50%", "45%"],
            label: {
              formatter: (params) => {
                return `${params.name}\n${params.value}`;
              },
              borderWidth: 1,
              borderRadius: 4,
              color: "#7C8DB5",
              fontSize: 12,
              lineHeight: 18
            },
            data: seriesDataList
          }
        ]
      };
      const eInstance = echarts.init(
        document.getElementById("deviceModelEcharts")
      );
      eInstance.clear();
      eInstance.setOption(options);
      this.echartsInstances.push(eInstance);
    },
    // 客户端版本-管控应用
    getControlVersionList() {
      ra_list_cc({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid
      }).then((data) => {
        if (data.code === 0) {
          this.controlVersionList = data.obj;
          this.initControlVersionEcharts();
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    initControlVersionEcharts() {
      let seriesDataList = [];
      this.controlVersionList.forEach((item) => {
        seriesDataList.push({
          value: item.num,
          name: item.cversion
        });
      });
      const options = {
        tooltip: {
          trigger: "item",
          formatter: (params) => {
            return `${params.name}：${params.value}`;
          }
        },
        legend: {
          bottom: "10",
          left: "center",
          itemWidth: 10,
          itemHeight: 10,
          //图例距离饼图的距离
          itemGap: 10,
          orient: "horizontal",
          data: ["管控应用"],
          textStyle: {
            color: "#253A70"
          }
        },
        color: ["#6B30FF", "#FF87C1"],
        series: [
          {
            type: "pie",
            name: "管控应用",
            radius: ["25%", "35%"],
            center: ["50%", "45%"],
            label: {
              formatter: (params) => {
                return `${params.name}\n${params.value}`;
              },
              borderWidth: 1,
              borderRadius: 4,
              color: "#7C8DB5",
              fontSize: 12,
              lineHeight: 18
            },
            data: seriesDataList
          }
        ]
      };
      const eInstance = echarts.init(
        document.getElementById("controlVersionEcharts")
      );
      eInstance.clear();
      eInstance.setOption(options);
      this.echartsInstances.push(eInstance);
    },
    // 客户端版本-应用商店
    getAppVersionList() {
      ra_list_sc({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid
      }).then((data) => {
        if (data.code === 0) {
          this.appVersionList = data.obj;
          this.initAppEcharts();
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    initAppEcharts() {
      let seriesDataList = [];
      this.appVersionList.forEach((item) => {
        seriesDataList.push({
          value: item.num,
          name: item.cversion
        });
      });
      const options = {
        tooltip: {
          trigger: "item",
          formatter: (params) => {
            return `${params.name}：${params.value}`;
          }
        },
        legend: {
          bottom: "10",
          left: "center",
          itemWidth: 10,
          itemHeight: 10,
          //图例距离饼图的距离
          itemGap: 10,
          orient: "horizontal",
          data: ["应用商店"],
          textStyle: {
            color: "#253A70"
          }
        },
        color: ["#ED4A99", "#FF87C1"],
        series: [
          {
            type: "pie",
            name: "应用商店",
            radius: ["25%", "35%"],
            center: ["50%", "45%"],
            label: {
              formatter: (params) => {
                return `${params.name}\n${params.value}`;
              },
              borderWidth: 1,
              borderRadius: 4,
              color: "#7C8DB5",
              fontSize: 12,
              lineHeight: 18
            },
            data: seriesDataList
          }
        ]
      };
      const eInstance = echarts.init(
        document.getElementById("appVersionEcharts")
      );
      eInstance.clear();
      eInstance.setOption(options);
      this.echartsInstances.push(eInstance);
    },
    // 增长趋势
    getGrowthTrendList() {
      ra_list_dut({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid
      }).then((data) => {
        if (data.code === 0) {
          this.growthTrendList = data.obj;
          this.initGrowthTrendEcharts();
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    initGrowthTrendEcharts() {
      let xAxisDataList = [];
      let seriesDataList = [];
      let seriesDataList1 = [];
      this.growthTrendList.forEach((item) => {
        xAxisDataList.push(item.date);
        seriesDataList.push(item.usernum || 0);
        seriesDataList1.push(item.devicenum || 0);
      });
      let options = {
        color: ["#339DFF", "#FF8622"],
        // tooltip: {
        //   trigger: "item",
        //   formatter: (params) => {
        //     return `${params.name}：${params.value}次`;
        //   }
        // },
        tooltip: {
          trigger: "axis",
          backgroundColor: "#fff", //背景颜色（此时为默认色）
          borderWidth: 1, //边框线宽
          textStyle: {
            lineHeight: 1.6,
            color: "#253A70"
          },
          axisPointer: {
            z: 1, //竖线在圆圈后面
            lineStyle: {
              color: "#f8f8fd",
              width: 20,
              opacity: 0.7
            }
          },
          formatter: (data) => {
            let date = "";
            let seriesDom = "";
            for (const item of data) {
              date = item.name;
              seriesDom += `<div><span style="color: #95ABDF">${
                item.seriesName
              }</span> ${item.value}${
                item.seriesName === "用户数" ? "个" : "台"
              }</div>`;
            }
            return `${date}${seriesDom}`;
          }
        },
        legend: {
          bottom: "10",
          left: "center",
          icon: "rect",
          itemWidth: 10,
          itemHeight: 10,
          //图例距离饼图的距离
          itemGap: 10,
          orient: "horizontal",
          data: ["用户数", "设备数"],
          textStyle: {
            color: "#253A70"
          }
        },
        grid: {
          top: 20,
          left: 50,
          right: 20,
          bottom: 40,
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              textStyle: {
                color: "#333"
              },
              // 数据多自动隐藏
              // interval: 0,
              rotate: 0
            },
            data: xAxisDataList,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            minInterval: 1,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              //网格线
              lineStyle: {
                type: "dotted" //设置网格线类型 dotted：虚线   solid:实线
              },
              show: true //隐藏或显示
            },
            type: "value"
          }
        ],
        series: [
          {
            name: "用户数",
            type: "line",
            label: {
              normal: {
                show: true,
                align: "center",
                verticalAlign: "bottom",
                position: "top",
                distance: 0,
                color: "inherit",
                formatter: `{c}`
              }
            },
            data: seriesDataList
          },
          {
            name: "设备数",
            type: "line",
            label: {
              normal: {
                show: true,
                align: "center",
                verticalAlign: "bottom",
                position: "top",
                distance: 0,
                color: "inherit",
                formatter: `{c}`
              }
            },
            data: seriesDataList1
          }
        ]
      };
      const eInstance = echarts.init(
        document.getElementById("growthTrendEcharts")
      );
      eInstance.clear();
      eInstance.setOption(options);
      this.echartsInstances.push(eInstance);
    },
    getOnlineDeviceList() {
      ra_list_dn({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid
      }).then((data) => {
        if (data.code === 0) {
          this.onlineDeviceList = data.obj;
          this.initOnlineEcharts({
            domId: "onlineEcharts1",
            onlineNum: this.onlineDeviceList[0].num,
            onlineTotalNum: this.onlineDeviceList[0].totalnum || 1,
            onlineColor: ["#ABD5FF", "#339CFF", "#E2EEFE"],
            subtext: "最近1小时"
          });
          this.initOnlineEcharts({
            domId: "onlineEcharts2",
            onlineNum: this.onlineDeviceList[1].num,
            onlineTotalNum: this.onlineDeviceList[1].totalnum || 1,
            onlineColor: ["#D3F6C1", "#52C41A", "#E9FFDE"],
            subtext: "最近48小时"
          });
          this.initOnlineEcharts({
            domId: "onlineEcharts3",
            onlineNum: this.onlineDeviceList[2].num,
            onlineTotalNum: this.onlineDeviceList[2].totalnum || 1,
            onlineColor: ["#FCC9E3", "#ED4A99", "#FFE0EF"],
            subtext: "最近7天"
          });
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    initOnlineEcharts({ onlineNum, onlineTotalNum, onlineColor, domId }) {
      let options = {
        tooltip: {
          show: false
        },
        legend: {
          show: false
        },
        series: [
          {
            z: 1,
            silent: true,
            name: "底盘",
            type: "pie",
            startAngle: 90,
            radius: ["40%", "55%"],
            center: ["50%", "45%"],
            itemStyle: {
              borderRadius: "50%",
              borderColor: "none",
              borderWidth: 1
            },
            label: {
              show: false
            },
            data: [
              {
                value: onlineNum,
                name: "在线",
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: onlineColor[0]
                        },
                        {
                          offset: 1,
                          color: onlineColor[1]
                        }
                      ]
                    },
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  }
                }
              },
              {
                value: onlineTotalNum - onlineNum,
                name: "离线",
                itemStyle: {
                  color: "rgba(255,255,255,0)",
                  decal: {
                    symbol: "none"
                  }
                },
                label: {
                  show: false
                }
              }
            ]
          },
          // 白色小圆
          {
            z: 2,
            name: "cricle",
            type: "pie",
            radius: ["41%", "53.5%"],
            center: ["50%", "45%"],
            silent: true,
            startAngle:
              108 + ((onlineTotalNum - onlineNum) / onlineTotalNum) * 360,
            itemStyle: {
              borderRadius: "50%",
              borderColor: "none",
              borderWidth: 1
            },
            label: {
              show: false
            },
            data: [
              {
                value: 4,
                name: "Search Engine",
                itemStyle: {
                  color: "#fff"
                }
              },
              {
                value: 100,
                itemStyle: {
                  color: "none",
                  decal: {
                    symbol: "none"
                  }
                },
                label: {
                  show: false
                }
              }
            ]
          },
          // 背景
          {
            z: 0,
            type: "pie",
            name: "内层细圆环",
            radius: ["40%", "55%"],
            center: ["50%", "45%"],
            startAngle: 90,
            hoverAnimation: false,
            clockWise: true,
            silent: true,
            itemStyle: {
              normal: {
                color: onlineColor[2],
                shadowBlur: 0,
                shadowColor: "#66666a"
              }
            },
            tooltip: {
              show: false
            },
            label: {
              show: false
            },
            data: [onlineTotalNum]
          }
        ]
      };
      const eInstance = echarts.init(document.getElementById(domId));
      eInstance.clear();
      eInstance.setOption(options);
      this.echartsInstances.push(eInstance);
    },
    // 设备活跃度
    getDeviceActivityList() {
      ra_list_da({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        doEvent: this.deviceActivityInfo.doEvent
      }).then((data) => {
        if (data.code === 0) {
          this.deviceActivityInfo.list = data.obj;
          this.initDeviceActivityEcharts();
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    initDeviceActivityEcharts() {
      let xAxisDataList = [];
      let seriesDataList = [];
      this.deviceActivityInfo.list.forEach((item) => {
        xAxisDataList.push(item.date);
        seriesDataList.push(item.num || 0);
      });
      let options = {
        color:
          this.deviceActivityInfo.doEvent === 2 ? ["#52C41A"] : ["#339DFF"],
        tooltip: {
          trigger: "axis",
          backgroundColor: "#fff", //背景颜色（此时为默认色）
          borderWidth: 1, //边框线宽
          textStyle: {
            lineHeight: 1.6,
            color: "#253A70"
          },
          axisPointer: {
            z: 1, //竖线在圆圈后面
            lineStyle: {
              color: "#f8f8fd",
              width: 20,
              opacity: 0.7
            }
          },
          formatter: (data) => {
            let date = "";
            let seriesDom = "";
            for (const item of data) {
              date = item.name;
              seriesDom += `<div><span style="color: #95ABDF">${item.seriesName}</span> ${item.value}台</div>`;
            }
            return `${date}${seriesDom}`;
          }
        },
        legend: {
          show: false
        },
        grid: {
          top: 20,
          left: 50,
          right: 20,
          bottom: 40,
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              textStyle: {
                color: "#333"
              },
              // 数据多自动隐藏
              // interval: 0,
              rotate: 0
            },
            data: xAxisDataList,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            minInterval: 1,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              //网格线
              lineStyle: {
                type: "dotted" //设置网格线类型 dotted：虚线   solid:实线
              },
              show: true //隐藏或显示
            },
            type: "value"
          }
        ],
        series: [
          {
            name: "设备活跃度",
            type: "line",
            smooth: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  this.deviceActivityInfo.doEvent === 2
                    ? [
                        { offset: 0, color: "rgba(82, 196, 26, 0.4)" },
                        { offset: 0.5, color: "rgba(82, 196, 26, 0.2)" },
                        { offset: 0.9, color: "rgba(82, 196, 26, 0)" }
                      ]
                    : [
                        { offset: 0, color: "rgba(51, 157, 255, 0.4)" },
                        { offset: 0.5, color: "rgba(51, 157, 255, 0.2)" },
                        { offset: 0.9, color: "rgba(51, 157, 255, 0)" }
                      ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10
              }
            },
            label: {
              normal: {
                show: true,
                align: "center",
                verticalAlign: "bottom",
                position: "top",
                distance: 0,
                color: "inherit",
                formatter: `{c}`
              }
            },
            data: seriesDataList
          }
        ]
      };
      const eInstance = echarts.init(
        document.getElementById("deviceActivityEcharts")
      );
      eInstance.clear();
      eInstance.setOption(options);
      this.echartsInstances.push(eInstance);
    }
  }
};
</script>

<style lang="less" scoped>
.main_root {
  border-radius: 0;
  border: none;
  background-color: transparent;
  .row_item {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &:last-of-type {
      margin-bottom: 0;
    }
    .cell_item {
      width: 100%;
      height: 400px;
      border-radius: 15px;
      border: 1px solid #e9f0f9;
      background-color: #fff;
      &.left_w {
        width: 40%;
      }
      &.right_w {
        width: calc(60% - 10px);
      }
      &.device_info {
        display: flex;
        justify-content: space-between;
        .device_info_left {
          width: 33.33%;
          height: 100%;
        }
        .device_info_right {
          width: 66.66%;
          height: 100%;
        }
      }
      .cell_header {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 16px;
        font-size: 16px;
        line-height: 1;
        font-weight: bold;
      }
      .content_main {
        width: 100%;
        height: calc(100% - 64px);
        &.online_devices {
          display: flex;
          justify-content: space-between;
          align-items: center;
          > div {
            position: relative;
            width: 33.33%;
            height: 100%;
            .online_info {
              position: absolute;
              left: 0;
              top: 0;
              font-size: 14px;
              text-align: center;
              &.online_1 {
                padding-top: 130px;
                color: #339cff;
                .online_percent {
                  margin-bottom: 10px;
                  font-weight: bold;
                  font-size: 20px;
                }
                .online_percent_title {
                  font-size: 14px;
                }
                span {
                  color: #339cff;
                }
              }
              &.online_2 {
                padding-top: 130px;
                color: #52c41a;
                .online_percent {
                  margin-bottom: 10px;
                  font-weight: bold;
                  font-size: 20px;
                }
                .online_percent_title {
                  font-size: 14px;
                }
                span {
                  color: #52c41a;
                }
              }
              &.online_3 {
                padding-top: 130px;
                color: #ed4a99;
                .online_percent {
                  margin-bottom: 10px;
                  font-weight: bold;
                  font-size: 20px;
                }
                .online_percent_title {
                  font-size: 14px;
                }
                span {
                  color: #ed4a99;
                }
              }
              .online_title {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                padding-bottom: 25px;
                font-size: 14px;
                text-align: center;
                color: #798cb5;
                > span {
                  font-weight: bold;
                }
              }
            }
            > div {
              width: 100%;
              height: 100%;
            }
          }
        }
        #controlVersionEcharts,
        #appVersionEcharts {
          display: inline-block;
          width: 50%;
          height: 100%;
        }
      }
    }
  }
}
</style>
