Foshan4A4.0/src/views/dashboard/components/analysis.vue

<!--
 * @Author: your name
 * @Date: 2021-11-25 10:40:42
 * @LastEditTime: 2022-03-14 11:07:59
 * @LastEditors: your name
 * @Description: 数据分析
 * @FilePath: \Foshan4A2.0\src\views\dashboard\components\analysis.vue
-->
<template>
  <div class="dashboard-analysis">
    <div class="dashboard-list">
      <!--账号信息分布-->
      <div class="tu-account box-public-shadow">
        <div class="tu-account-content h100 flex">
          <div class="tu-account-content-left relative">
            <commonChartsPie :option="accountOption" id="tu-account-content" />
          </div>
          <div class="tu-account-content-right relative">
            <dateType @getTypeData="checkAccountType" :arrs="tuArrs" />
            <commonChartsNum :arrs="accountTeamsOne" />
          </div>
        </div>
      </div>
      <!--角色概览-->
      <div v-if="OpenRole" class="tu-user box-public-shadow l22">
        <div class="tu-user-content h100 flex">
          <div class="tu-user-content-left relative">
            <commonChartsPie :option="userOption" id="tu-user-content" />
          </div>
          <div class="tu-user-content-right">
            <commonChartsNum :arrs="userTeams" />
          </div>
        </div>
      </div>
      <!--权限概览-->
      <div class="tu-power box-public-shadow flex1 l22">
        <div class="tu-power-content-left relative">
          <commonChartsBar :option="towerOption" id="tu-tower-content" />
        </div>
      </div>
    </div>
    <div class="dashboard-list">
      <!--数据概况-->
      <div class="tu-unusual box-public-shadow flex1">
        <div class="tu-unusual-content h100 flex">
          <div class="tu-unusual-content-left w160 relative">
            <commonChartsPie @getChartData="getChartData" :option="unusualOption" id="tu-unusual-content" />
          </div>
          <div class="tu-unusual-content-right">
            <commonChartsNum @handleLog="handleLog" style="margin-top: 0" :arrs="unusualTeams" />
          </div>
        </div>
      </div>
      <!--登录情况-->
      <div class="tu-login box-public-shadow flex1 l22">
        <div class="tu-login-content h100 flex">
          <div class="tu-login-content-left w160 relative">
            <commonChartsPie @getChartData="getChartData" :option="loginOption" id="tu-login-content" />
          </div>
          <div class="tu-login-content-right">
            <commonChartsNum @handleLog="handleLog" :arrs="loginTeams" />
          </div>
        </div>
      </div>
      <!--授权情况-->
      <div class="tu-authorize box-public-shadow flex1 l22">
        <div class="tu-authorize-content h100 flex">
          <div class="tu-authorize-content-left w160 relative">
            <commonChartsPie @getChartData="getChartData" :option="authorizeOption" id="tu-authorize-content" />
          </div>
          <div class="tu-authorize-content-right">
            <div v-for="(item, index) in authorizeArr" @click="handleLog(item)" :key="index" class="behavior-list">
              <span :style="{ background: item.color }" class="icon"></span>
              <span class="name">{{ item.name }}：</span>
              <span class="num">{{ item.num }}</span>
            </div>
          </div>
        </div>
      </div>
      <!--行为情况-->
      <div class="tu-behavior box-public-shadow flex1 l22">
        <div class="tu-behavior-content h100 flex">
          <div class="tu-behavior-content-left w160 relative">
            <commonChartsPie @getChartData="getChartData" :option="behaviorOption" id="tu-behavior-content" />
          </div>
          <div class="tu-behavior-content-right">
            <div v-for="(item, index) in behaviorArr" @click="handleLog(item)" :key="index" class="behavior-list">
              <span :style="{ background: item.color }" class="icon"></span>
              <span class="name">{{ item.name }}：</span>
              <span class="num">{{ item.num }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="false" class="dashboard-list">
      <!--API调用情况-->
      <div class="tu-api box-public-shadow flex1">
        <div class="tu-api-content h100 flex">
          <div class="tu-api-content-left flex1 relative">
            <dateType @getTypeData="checkApiType" />
            <commonChartsLine :option="apiOption" id="tu-api-content" />
          </div>
          <div class="tu-api-content-right">
            <commonChartsNum :arrs="apiTeams" />
          </div>
        </div>
      </div>
      <!--系统运行异常情况-->
      <div class="tu-system box-public-shadow l22 flex1">
        <div class="tu-system-content h100 flex">
          <div class="tu-system-content-left flex1 relative">
            <dateType @getTypeData="checkSysType" />
            <commonChartsLine :option="systemOption" id="tu-system-content" />
          </div>
          <div class="tu-system-content-right">
            <commonChartsNum :arrs="systemTeams" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import commonChartsPie from "@/layout/components/Echarts/commonChartsPie.vue";
import commonChartsBar from "@/layout/components/Echarts/commonChartsBar.vue";
import commonChartsLine from "@/layout/components/Echarts/commonChartsLine.vue";
import commonProgress from "@/layout/components/Echarts/commonProgress.vue";
import commonChartsNum from "@/layout/components/EchartsNum/index.vue";
import dateType from "@/layout/components/dateType/index.vue";
import {
  GetUserAna,
  GetOfficerAna,
  GetRoleAna,
  GetAuthAna,
  GetStatus,
} from "@/api/apiHome";
import { mapGetters } from "vuex";
export default {
  name: "Analysis",
  components: {
    commonChartsPie,
    commonChartsBar,
    commonChartsNum,
    commonChartsLine,
    commonProgress,
    dateType,
  },
  data () {
    return {
      OpenRole: 1,
      // 账号信息分析饼图数据
      accountOption: {
        color: ["#94C6E0", "#F4C23A", "#8969BE", "#E752A3"],
        legend: {
          show: false,
        },
        title: {
          text: "账号信息分析",
        },
        series: [
          {
            top: 43,
            name: "账号",
            type: "pie",
            radius: ["30%", "50%"],
            label: {
              position: "inner",
              fontSize: 14,
              show: false,
            },
            hoverAnimation: false,
            data: [
              { value: 0, name: "账号数" },
              { value: 0, name: `${this.accountGroupType}数` },
            ],
          },
          {
            top: 43,
            name: "账号",
            type: "pie",
            radius: ["60%", "100%"],
            label: {
              position: "inner",
              fontSize: 14,
              show: false,
            },
            hoverAnimation: false,
            data: [
              { value: 0, name: "日活跃度" },
              { value: 0, name: "月活跃度" },
            ],
          },
        ],
      },
      //账号信息分析切换
      tuArrs: [
        {
          name: "账号",
          value: 1,
        },
        {
          name: "职员",
          value: 2,
        },
      ],
      // 账号信息分析数字
      accountTeamsOne: [
        {
          number: 0,
          name: "账号数",
          color: "#94C6E0",
          key: "userCount",
          ana: "officeCount",
        },
        {
          number: 0,
          name: "账号分组",
          color: "#F4C23A",
          key: "groupCount",
          ana: "groupCount",
        },
        {
          number: 0,
          name: "日活跃度",
          color: "#8969BE",
          key: "dayAct",
          ana: "dayAct",
        },
        {
          number: 0,
          name: "月活跃度",
          color: "#E752A3",
          key: "monthAct",
          ana: "monthAct",
        },
      ],
      // 权限类型分析柱状图数据
      towerOption: {
        title: {
          text: "权限概览",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          data: ["前端权限", "API权限", "数据权限"],
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 24,
          right: 0,
          textStyle: {
            color: "#303133",
            fontSize: 14,
            fontWeight: "bold",
          },
        },
        xAxis: {
          data: [],
          axisLabel: {
            formatter: function (val) {
              const str = val.split("");
              if (str.length <= 3) {
                return str.join("");
              } else {
                for (let i = 0; i < str.length; i++) {
                  if (i % 3 === 0 && i !== 0) {
                    str.splice(i, 0, "\n");
                  }
                }
                return str.join("");
              }
            },
          },
        },
        color: ["#7569BE", "#F4C23A", "#E752A3"],
        series: [
          {
            name: "前端权限",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            data: [],
          },
          {
            name: "API权限",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            data: [],
          },
          {
            name: "数据权限",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            data: [],
          },
        ],
      },
      // 系统运行异常情况折线图数据
      systemOption: {
        title: {
          text: "系统运行异常情况",
        },
        color: ["#EC3535", "#FA9F63", "#C462A7"],
        xAxis: {
          data: ["1月", "2月", "3月", "4月", "5月", "6月"],
        },
        series: [
          {
            name: "Email",
            type: "line",
            stack: "Total",
            showSymbol: false,
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "Union",
            type: "line",
            stack: "Total",
            showSymbol: false,
            data: [20, 32, 1, 34, 9, 23, 21],
          },
          {
            name: "Video",
            type: "line",
            stack: "Total",
            showSymbol: false,
            data: [120, 132, 101, 134, 90, 230, 210],
          },
        ],
      },
      // 系统运行异常情况数字
      systemTeams: [
        {
          number: null,
          txt: "高危异常",
          color: "#EC3535",
        },
        {
          number: null,
          txt: "中危异常",
          color: "#C462A7",
        },
        {
          number: null,
          txt: "低危异常",
          color: "#FA9F63",
        },
      ],
      // API调用情况折线图数据
      apiOption: {
        title: {
          text: "API调用情况",
        },
        color: [
          "#30A3D8",
          "#F25555",
          "#F4C23A",
          "#E752A3",
          "#8969BE",
          "#85EAC8",
        ],
        xAxis: {
          data: ["1月", "2月", "3月", "4月", "5月", "6月"],
        },
        series: [
          {
            name: "企业微信",
            type: "line",
            stack: "Total",
            showSymbol: false,
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "OA系统",
            type: "line",
            stack: "Total",
            showSymbol: false,
            data: [20, 32, 1, 34, 9, 23, 21],
          },
          {
            name: "项目建设",
            type: "line",
            stack: "Total",
            showSymbol: false,
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "勘察设计",
            type: "line",
            stack: "Total",
            showSymbol: false,
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "4A平台",
            type: "line",
            stack: "Total",
            showSymbol: false,
            data: [20, 32, 1, 34, 9, 23, 21],
          },
          {
            name: "智慧工地",
            type: "line",
            stack: "Total",
            showSymbol: false,
            data: [120, 132, 101, 134, 90, 230, 210],
          },
        ],
      },
      // API调用情况数字
      apiTeams: [
        {
          number: null,
          txt: "企业微信",
          color: "#30A3D8",
        },
        {
          number: null,
          txt: "OA系统",
          color: "#F25555",
        },
        {
          number: null,
          txt: "项目建设",
          color: "#F4C23A",
        },
        {
          number: null,
          txt: "勘察建设",
          color: "#E752A3",
        },
        {
          number: null,
          txt: "4A平台",
          color: "#8969BE",
        },
        {
          number: null,
          txt: "智慧工地",
          color: "#85EAC8",
        },
      ],
      // 登录情况数据
      loginOption: {
        title: {
          text: "登录情况",
        },
        color: ["#8969BE", "#F4C23A", "#E752A3"],
        series: [
          {
            name: "登录情况",
            radius: ["40%", "100%"],
            data: [
              { value: 2780, name: "正常登录", key: "normalLogin" },
              { value: 735, name: "异常登录", key: "abnormalLogin" },
              { value: 165, name: "登录失败", key: "nosystemLogin" },
            ],
          },
        ],
      },
      //角色概览
      userOption: {
        title: {
          text: "角色概览",
        },
        color: ["#8969BE", "#F4C23A", "#E752A3"],
        series: [
          {
            name: "角色概览",
            top: 43,
            radius: ["40%", "100%"],
            data: [
              { value: 1048, key: "roleCount", name: "角色总数" },
              { value: 735, key: "defRoleCunt", name: "互斥角色数" },
              { value: 735, key: "unuseRole", name: "未使用角色数" },
            ],
          },
        ],
      },
      // 登录情况数字
      userTeams: [
        {
          number: 2780,
          name: "角色总数",
          color: "#8969BE",
          key: "roleCount",
        },
        {
          number: 2136,
          name: "互斥角色数",
          color: "#F4C23A",
          key: "defRoleCunt",
        },
        {
          number: 1355,
          name: "未使用角色数",
          color: "#E752A3",
          key: "unuseRole",
        },
      ],
      // 登录情况数字
      loginTeams: [
        {
          number: 2780,
          name: "正常登录",
          color: "#8969BE",
          key: "normalLogin",
        },
        {
          number: 735,
          name: "异常登录",
          color: "#F4C23A",
          key: "abnormalLogin",
        },
        {
          number: 165,
          name: "非系统异常",
          color: "#E752A3",
          key: "nosystemLogin",
        },
      ],
      // 授权情况数据
      authorizeOption: {
        title: {
          text: "授权情况",
        },
        // color: ["#8969BE", "#94C6E0", "#85EAC8", "#F4C23A", "#E752A3"],
        color: ["#94C6E0", "#85EAC8", "#E752A3"],
        series: [
          {
            name: "授权情况",
            radius: ["40%", "100%"],
            data: [
              // { value: 1276, name: "账号授权", key: "accountAuthorization" },
              { value: 126, name: "分组授权", key: "groupAuthorization" },
              { value: 1236, name: "职员授权", key: "officerAuthorization" },
              // { value: 12736, name: "组织授权", key: "organAuthorization" },
              { value: 127, name: "角色授权", key: "roleAuthorization" },
            ],
          },
        ],
      },
      // 授权情况数字
      authorizeArr: [
        // {
        //   color: "#8969BE",
        //   name: "账号授权",
        //   num: "1276",
        //   key: "accountAuthorization",
        // },
        {
          color: "#94C6E0",
          name: "分组授权",
          num: "126",
          key: "groupAuthorization",
        },
        {
          color: "#85EAC8",
          name: "职员授权",
          num: "1236",
          key: "officerAuthorization",
        },
        // {
        //   color: "#F4C23A",
        //   name: "组织授权",
        //   num: "12736",
        //   key: "organAuthorization",
        // },
        {
          color: "#E752A3",
          name: "角色授权",
          num: "127",
          key: "roleAuthorization",
        },
      ],
      // 行为情况数据
      behaviorOption: {
        title: {
          text: "行为情况",
        },
        color: [
          "#8969BE",
          "#F25555",
          "#F4C23A",
          "#E752A3",
          "#94C6E0",
          "#85EAC8",
        ],
        series: [
          {
            name: "行为情况",
            radius: ["40%", "100%"],
            data: [
              { value: 1275, name: "4A平台", key: "sys4a" },
              { value: 2210, name: "企业微信", key: "sysWechat" },
              { value: 2210, name: "OA系统", key: "sysOA" },
              {
                value: 2220,
                name: "项目管理",
                key: "sysProjectManagementPlatform",
              },
              {
                value: 2230,
                name: "勘察平台",
                key: "sysSurveyAndDesignManagementPlatform",
              },
              {
                value: 2250,
                name: "智慧工程",
                key: "sysSmartConstructionSite",
              },
            ],
          },
        ],
      },
      // 授权情况数字
      behaviorArr: [
        {
          color: "#8969BE",
          name: "4A平台",
          num: "1275",
          key: "sys4a",
        },
        {
          color: "#94C6E0",
          name: "企业微信",
          num: "2210",
          key: "sysWechat",
        },
        {
          color: "#F25555",
          name: "OA系统",
          num: "2210",
          key: "sysOA",
        },
        {
          color: "#F4C23A",
          name: "项目管理",
          num: "2220",
          key: "sysProjectManagementPlatform",
        },
        {
          color: "#85EAC8",
          name: "智慧工地",
          num: "2250",
          key: "sysSmartConstructionSite",
        },
        {
          color: "#46A3FF",
          name: "电子签章",
          num: "0",
          key: "sysElectronicSignature",
        },
        {
          color: "#E752A3",
          name: "勘察平台",
          num: "2230",
          key: "sysSurveyAndDesignManagementPlatform",
        },
        {
          color: "#CA8EFF",
          name: "BIM平台",
          num: "0",
          key: "sysBimPlatform",
        },
      ],
      // 数据概况
      unusualOption: {
        title: {
          text: "数据概况",
        },
        color: ["#F56C6C", "#F4C23A", "#E752A3", "#8969BE"],
        series: [
          {
            name: "数据",
            type: "pie",
            radius: ["30%", "50%"],
            label: {
              position: "inner",
              fontSize: 14,
              show: false,
            },
            hoverAnimation: false,
            data: [
              { value: 1275, name: "下发有效" },
              { value: 220, name: "接收有效" },
            ],
          },
          {
            name: "数据",
            type: "pie",
            radius: ["60%", "100%"],
            label: {
              position: "inner",
              fontSize: 14,
              show: false,
            },
            hoverAnimation: false,
            data: [
              { value: 220, name: "下发无效" },
              { value: 220, name: "接收无效" },
            ],
          },
        ],
      },
      // 数据概况数字
      unusualTeams: [
        {
          number: 1275,
          name: "下发有效",
          color: "#8969BE",
          key: "pushSuccess",
        },
        {
          number: 220,
          name: "下发无效",
          color: "#E752A3",
          key: "pushFailed",
        },
        {
          number: 220,
          name: "接收有效",
          color: "#F4C23A",
          key: "receiveSuccess",
        },
        {
          number: 220,
          name: "接收无效",
          color: "#F56C6C",
          key: "receiveFailed",
        },
      ],
      // 权限概览切换
      barArrs: [
        {
          name: "应用分析",
          value: 1,
        },
        {
          name: "权限分析",
          value: 2,
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["systemSet"]),
  },
  created () {
    const { OpenRole } =
      typeof this.systemSet === "string"
        ? JSON.parse(this.systemSet)
        : this.systemSet; //1是请求角色 0是请求用户
    this.OpenRole = OpenRole;
    this.pageInit();
  },
  methods: {
    //查询日志
    handleLog (item) {
      this.$emit('sendLog', item);
    },
    //账号信息切换
    checkAccountType (params) {
      if (params.value === 1 && params.name === "账号") {
        this.accountOption.title.text = "账号信息分析";
        this.accountTeamsOne[0].txt = "账号数";
        this.accountTeamsOne[1].txt = "账号分组";
        this.getUserAna();
      } else {
        this.accountOption.title.text = "职员信息分析";
        this.accountTeamsOne[0].txt = "职员数";
        this.accountTeamsOne[1].txt = `组织及${this.accountGroupType}数`;
        this.getOfficerAna();
      }
    },
    // 系统运行异常情况-日期选择
    checkSysType (params) {
      //console.log(`系统运行异常情况---->name:${params.name}，value:${params.value}`)
    },
    // API调用情况-日期选择
    checkApiType (params) {
      //console.log(`API调用情况---->name:${params.name}，value:${params.value}`)
    },
    getChartData (params) {
      this.$emit('sendLog', params.data);
    },
    //---------------获取数据方法------------------
    //获取账号信息分析
    async getUserAna () {
      try {
        const result = await GetUserAna();
        if (result.code === 0) {
          const res = result.returnData;
          const keys = Object.entries(res);
          this.accountOption.series[0].name = "账号";
          this.accountOption.series[1].name = "账号";
          this.accountTeamsOne.forEach((item) => {
            keys.filter((p) => {
              if (item.key === p[0]) {
                item.number = p[1];
              }
            });
          });
          this.accountOption.series[0].data[0].value = res.userCount;
          this.accountOption.series[0].data[1].value = res.groupCount;
          this.accountOption.series[1].data[0].value = res.dayAct;
          this.accountOption.series[1].data[1].value = res.monthAct;
        } else {
          this.$message.error(result.message);
        }
      } catch (error) {
        console.log("网络错误:", error);
      }
    },
    //获取职员信息分析
    async getOfficerAna () {
      try {
        const result = await GetOfficerAna();
        if (result.code === 0) {
          const res = result.returnData;
          const keys = Object.entries(res);
          this.accountOption.series[0].name = "职员";
          this.accountOption.series[1].name = "职员";
          this.accountTeamsOne.forEach((item) => {
            keys.filter((p) => {
              if (item.ana === p[0]) {
                item.number = p[1];
              }
            });
          });
          this.accountOption.series[0].data[0].value = res.officeCount;
          this.accountOption.series[0].data[1].value = res.groupCount;
          this.accountOption.series[1].data[0].value = res.dayAct;
          this.accountOption.series[1].data[1].value = res.monthAct;
        } else {
          this.$message.error(result.message);
        }
      } catch (error) {
        console.log("网络错误:", error);
      }
    },
    //获取角色信息分析
    async getRoleAna () {
      try {
        const result = await GetRoleAna();
        if (result.code === 0) {
          const res = result.returnData;
          const keys = Object.entries(res);
          this.userTeams.forEach((item) => {
            keys.filter((p) => {
              if (item.key === p[0]) {
                item.number = p[1];
              }
            });
          });
          this.userOption.series[0].data.forEach((item) => {
            keys.filter((p) => {
              if (item.key === p[0]) {
                item.value = p[1];
              }
            });
          });
        } else {
          this.$message.error(result.message);
        }
      } catch (error) {
        console.log("网络错误:", error);
      }
    },
    //获取权限信息分析
    async getAuthAna () {
      try {
        const result = await GetAuthAna();
        if (result.code === 0) {
          const res = result.returnData;
          const [appName, frontAuth, apiAuth, dataAuth] = [[], [], [], []];
          for (const p of res) {
            appName.push(p.appName);
            frontAuth.push(p.frontAuth);
            apiAuth.push(p.apiAuth);
            dataAuth.push(p.dataAuth);
          }
          this.towerOption.xAxis.data = appName;
          this.towerOption.series[0].data = frontAuth;
          this.towerOption.series[1].data = apiAuth;
          this.towerOption.series[2].data = dataAuth;
        } else {
          this.$message.error(result.message);
        }
      } catch (error) {
        console.log("网络错误:", error);
      }
    },
    async getStatus () {
      try {
        const result = await GetStatus();
        if (result.code === 0) {
          const res = result.returnData;
          const keys = Object.entries(res);
          const { pushSuccess, pushFailed, receiveSuccess, receiveFailed } =
            res;
          // 数据概况
          this.unusualOption.series[0].data[0].value = pushSuccess;
          this.unusualOption.series[0].data[1].value = pushFailed;
          this.unusualOption.series[1].data[0].value = receiveSuccess;
          this.unusualOption.series[1].data[1].value = receiveFailed;
          this.unusualTeams.forEach((item) => {
            keys.filter((p) => {
              if (item.key === p[0]) {
                item.number = p[1];
              }
            });
          });
          //登录情况
          this.loginTeams.forEach((item) => {
            keys.filter((p) => {
              if (item.key === p[0]) {
                item.number = p[1];
              }
            });
          });
          this.loginOption.series[0].data.forEach((item) => {
            keys.filter((p) => {
              if (item.key === p[0]) {
                item.value = p[1];
              }
            });
          });
          //授权情况
          this.authorizeArr.forEach((item) => {
            keys.filter((p) => {
              if (item.key === p[0]) {
                item.num = p[1];
              }
            });
          });
          this.authorizeOption.series[0].data.forEach((item) => {
            keys.filter((p) => {
              if (item.key === p[0]) {
                item.value = p[1];
              }
            });
          });
          //行为情况
          this.behaviorArr.forEach((item) => {
            keys.filter((p) => {
              if (item.key === p[0]) {
                item.num = p[1];
              }
            });
          });
          this.behaviorOption.series[0].data.forEach((item) => {
            keys.filter((p) => {
              if (item.key === p[0]) {
                item.value = p[1];
              }
            });
          });
        } else {
          this.$message.error(result.message);
        }
      } catch (error) {
        console.log("网络错误:", error);
      }
    },
    pageInit () {
      this.getUserAna();
      this.getRoleAna();
      this.getAuthAna();
      this.getStatus();
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-analysis {
  // height: calc(100vh - 395px);
  // overflow-x: hidden;
  // overflow-y: scroll;
  .w160 {
    width: 160px;
  }
  .titleMsg {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 24px;
    font-weight: bold;
  }
  .progressScale {
    top: 25px;
    transform: scale(1.2);
  }
  .dashboard-list {
    display: flex;
    margin-bottom: 24px;
    .tu-account {
      .tu-account-content-left {
        width: 212px;
      }
      .tu-account-content-right {
        flex: 1;
        margin-left: 50px;
        width: 150px;
        .account-team {
          margin-top: 36px;
          .account-team-list {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #909399;
            margin-top: 18px;
          }
        }
      }
    }
    .tu-user {
      .tu-user-content-left {
        width: 212px;
        margin-right: 50px;
      }
    }
    .tu-sync {
      height: 280px;
    }
    .tu-system {
      height: 392px;
    }
    .behavior-list {
      margin-top: 16px;
      cursor: pointer;
      .icon {
        display: inline-block;
        width: 3px;
        height: 12px;
        background: #8969be;
        margin-right: 9px;
      }
      .name {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #303133;
      }
      .num {
        font-size: 16px;
        font-family: DIN;
        font-weight: 500;
        color: #909399;
      }
      &:first-child {
        margin-top: 59px;
      }
    }
    .tu-behavior {
      .behavior-list {
        &:first-child {
          margin-top: 0px;
        }
      }
    }
  }
}
</style>