<template>
  <div class="contain">
    <div class="person_info">
      <div class="preson">
        <div class="person_text">
          <img src="@/assets/imgs/img_head.png" alt />
          <span>你好，{{ person }}！最近登录{{ login_time }}</span>
        </div>
        <div class="person_menu">
          管理功能&nbsp;&nbsp;&nbsp;
          <div class="person_manage_pic"></div>

          <div class="manage_menu">
            <div
              v-for="(item, index) in manage_arr"
              :key="index + 800"
              class="manage_box"
              @click="manage_func(item.url)"
              v-if="item.role == now_user"
            >
              <img :src="item.pic" alt />
              {{ item.text }}
            </div>
          </div>
        </div>
      </div>
      <div class="menu">
        <div
          :class="
            now_user == 0
              ? 'menu_box0'
              : now_user == 1
              ? 'menu_box1'
              : 'menu_box2'
          "
          v-for="(item, index) in menu_arr[now_user]"
          :key="index + 100"
        >
          <img :src="item.pic" alt />
          <div class="menu_text">
            <p>{{ item.text }}</p>
            <p
              :style="
                index == menu_arr[now_user].length - 1 ||
                (now_user == 1 && index == 0) ||
                (now_user == 2 && index == 0)
                  ? { color: item.color, marginRight: '-20px' }
                  : { color: item.color }
              "
            >
              <span style="font-size:36px">{{ item.num }}</span>
              <span
                v-if="
                  index == menu_arr[now_user].length - 1 ||
                    (now_user == 1 && index == 0) ||
                    (now_user == 2 && index == 0)
                "
                >万</span
              >
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 普通用户--数据分析 -->
    <div class="case_box" v-if="now_user == 0">
      <div class="data_asy">
        <p
          style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
        >
          数据分析中心
          <img
            style="vertical-align:-9px;"
            src="@/assets/imgs/home_btn_enter.png"
            alt
          />
        </p>
        <div class="data_charts">
          <div class="data_charts_left">
            <p><span></span> 服务健康状态</p>
            <div :id="health" class="health"></div>
          </div>
          <div class="data_charts_right">
            <p><span></span> 服务运营分析</p>
            <div :id="yy_asy" class="yy_asy"></div>
          </div>
        </div>
      </div>
      <div class="online_tool">
        <p
          style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;height:28px;padding-left:20px;"
        >
          在线组件工具
        </p>
        <div class="online_contain">
          <div
            v-for="(item, index) in online_tool_arr"
            :key="index + 300"
            class="online_box"
            :style="{ backgroundColor: item.bg }"
          >
            <img :src="item.pic" alt />
            <span :style="{ color: item.color }">{{ item.text }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 组织用户--数据分析 -->
    <div class="case_box" v-if="now_user == 1">
      <div class="data_asy" style="width:100%;">
        <p
          style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
        >
          数据资产看板
          <img
            style="vertical-align:-9px;"
            src="@/assets/imgs/home_btn_enter.png"
            alt
          />
        </p>
        <div class="data_charts" style="width:100%;">
          <div class="data_charts_left">
            <p><span></span> 服务健康状态</p>
            <div :id="health" class="health"></div>
          </div>
          <div class="data_charts_left" style="width:420px;margin-left:40px;">
            <p>
              <span></span> 服务应用总况
              <el-select v-model="fw_value" placeholder="请选择">
                <el-option
                  v-for="item in fw_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </p>
            <div :id="fwyy" class="fwyy"></div>
          </div>
          <div class="data_charts_right">
            <p><span></span> 服务运营分析</p>
            <div :id="yy_asy" class="yy_asy"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 超级管理员--数据分析 -->
    <div class="case_box" v-if="now_user == 2">
      <div class="data_asy" style="width:100%;">
        <p
          style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
        >
          数据资产看板
          <img
            style="vertical-align:-9px;"
            src="@/assets/imgs/home_btn_enter.png"
            alt
          />
        </p>
        <div class="data_charts" style="width:100%;">
          <div class="data_charts_left" style="width:590px;">
            <p><span></span> 服务运营分析</p>
            <div :id="yy_asy" class="yy_asy" style="width:590px;"></div>
          </div>
          <div class="data_charts_left" style="width:285px;">
            <p><span></span> 服务类型分析</p>
            <div :id="fwlx_asy" class="health" style="width:265px;"></div>
          </div>
          <div class="data_charts_left" style="width:285px;">
            <p><span></span> 应用类型分析</p>
            <div :id="yylx_asy" class="health" style="width:265px;"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 普通用户/组织管理员--服务 -->
    <div class="case_box">
      <div class="data_asy" :style="now_user == 0 ? {} : { width: '590px' }">
        <p
          style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
        >
          {{ now_user == 0 ? "我的服务" : "服务管理" }}
          <img
            style="vertical-align:-9px;cursor: pointer;"
            src="@/assets/imgs/home_btn_enter.png"
            @click="gotofw()"
            alt
          />
        </p>
        <div class="myservice">
          <div class="myservice_title">
            <div
              v-for="(item, index) in service_arr[now_user]"
              :key="index + 400"
              class="myservice_type"
              :style="
                now_type == index
                  ? { borderBottom: '4px solid #f5ab4c', color: '#e56600' }
                  : {}
              "
              @click="now_type = index"
            >
              {{ item }}
            </div>
            <div class="myservice_btn" v-if="now_user == 0" @click="gotozc()">
              <img src="@/assets/imgs/home_ic_release.png" alt />&nbsp; 服务注册
            </div>
          </div>
          <table-um
            :headers="service_head[now_user][now_type]"
            :url="service_url_arr[now_user][now_type]"
            :paginationShow="true"
            @distribut="distribut"
          ></table-um>
        </div>
      </div>
      <div class="online_tool" :style="now_user == 0 ? {} : { width: '590px' }">
        <p
          style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
        >
          {{ now_user == 0 ? "我的应用" : "平台应用" }}
          <img
            @click="gotoyy"
            style="vertical-align:-9px;"
            src="@/assets/imgs/home_btn_enter.png"
            alt
          />
        </p>
        <div class="myapp">
          <div class="myservice_title">
            <div
              v-for="(item, index) in apptype_arr[now_user]"
              :key="index + 400"
              class="myservice_type"
              :style="
                now_app == index
                  ? { borderBottom: '4px solid #f5ab4c', color: '#e56600' }
                  : {}
              "
              @click="now_app = index"
            >
              {{ item }}
            </div>
          </div>
          <el-scrollbar class="myapp_contain" v-if="now_user == 0">
            <div
              v-for="(item, index) in app_arr"
              :key="index + 600"
              class="myapp_box"
            >
              <img :src="item.pic" alt style="width:60px;height:60px;" />
              <p>{{ item.name }}</p>
              <p>{{ item.version }}</p>
            </div>
          </el-scrollbar>

          <table-um
            :headers="app_head[now_user][now_app]"
            :url="app_url_arr[now_user][now_app]"
            :paginationShow="true"
          ></table-um>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import uuidv1 from "uuid/v1";
import tableUm from "@/components/table/table-um";
import { getRole } from "@/utils/common";
import { mapGetters,mapState } from 'vuex'
var echarts = require("echarts");
export default {
  data() {
    return {
      person: "",
      login_time: "",
      now_user: 2, //0：普通用户，1：组织管理员，2：超级管理员
      now_type: 0,
      now_app: 0,
      manage_flag: false,
      health: uuidv1(),
      yy_asy: uuidv1(),
      fwyy: uuidv1(),
      fwlx_asy: uuidv1(),
      yylx_asy: uuidv1(),
      fw_options: [
        {
          value: 0,
          label: "服务总数",
        },
        {
          value: 1,
          label: "应用总数",
        },
      ],
      app_url_arr: [[], ["creat_app", "check_app"], ["creat_app", "check_app"]],
      app_head: [
        [],
        [
          [
            {
              prop: "yymc",
              label: "应用名称",
              width: "90px",
              align: "left",
            },
            {
              prop: "yylx",
              label: "应用类型",
              width: "120px",
              align: "center",
            },
            {
              prop: "yybb",
              label: "应用版本",
              width: "80px",
              align: "center",
            },
            {
              prop: "yycjsj",
              label: "应用创建时间",
              width: "160px",
              align: "center",
            },
            {
              prop: "yybscs",
              label: "被部署次数",
              width: "100px",
              align: "center",
            },
          ],
          [
            {
              prop: "yymc",
              label: "应用名称",
              width: "90px",
              align: "left",
            },
            {
              prop: "yylx",
              label: "应用类型",
              width: "120px",
              align: "center",
            },
            {
              prop: "yybb",
              label: "应用版本",
              width: "80px",
              align: "center",
            },
            {
              prop: "yyspsj",
              label: "应用审批时间",
              width: "160px",
              align: "center",
            },
            {
              prop: "spzt",
              label: "审批状态",
              width: "100px",
              align: "center",
            },
          ],
        ],
        [
          [
            {
              prop: "yymc",
              label: "应用名称",
              width: "90px",
              align: "left",
            },
            {
              prop: "yylx",
              label: "应用类型",
              width: "120px",
              align: "center",
            },
            {
              prop: "yybb",
              label: "应用版本",
              width: "80px",
              align: "center",
            },
            {
              prop: "yycjsj",
              label: "应用创建时间",
              width: "160px",
              align: "center",
            },
            {
              prop: "yybscs",
              label: "被部署次数",
              width: "100px",
              align: "center",
            },
          ],
          [
            {
              prop: "yymc",
              label: "应用名称",
              width: "90px",
              align: "left",
            },
            {
              prop: "yylx",
              label: "应用类型",
              width: "120px",
              align: "center",
            },
            {
              prop: "yybb",
              label: "应用版本",
              width: "80px",
              align: "center",
            },
            {
              prop: "yyspsj",
              label: "应用审批时间",
              width: "160px",
              align: "center",
            },
            {
              prop: "spzt",
              label: "审批状态",
              width: "100px",
              align: "center",
            },
          ],
        ],
      ],
      service_url_arr: [
        [
          "nor_service_list",
          "nor_apply_service",
          "nor_service_sh",
          "nor_cloud",
        ],
        ["nor_service_list", "nor_service_sh", "nor_cloud"],
        ["nor_service_list", "nor_service_sh", "nor_cloud_manage"],
      ],
      service_head: [
        [
          [
            {
              prop: "fwmc",
              label: "服务名称",
              width: "250px",
              align: "left",
            },
            {
              prop: "fwlx",
              label: "服务类型",
              width: "120px",
              align: "center",
            },
            {
              prop: "zcfbsj",
              label: "注册发布时间",
              width: "200px",
              align: "center",
            },
            {
              prop: "bdycs",
              label: "被调用次数",
              width: "110px",
              align: "center",
            },
          ],
          [
            {
              prop: "fwmc",
              label: "服务名称",
              width: "250px",
              align: "left",
            },
            {
              prop: "fwlx",
              label: "服务类型",
              width: "120px",
              align: "center",
            },
            {
              prop: "sqsj",
              label: "申请时间",
              width: "200px",
              align: "center",
            },
            {
              prop: "sqspzt",
              label: "申请审批状态",
              width: "110px",
              align: "center",
            },
          ],
          [
            {
              prop: "fwmc",
              label: "服务名称",
              width: "250px",
              align: "left",
            },
            {
              prop: "fwlx",
              label: "服务类型",
              width: "120px",
              align: "center",
            },
            {
              prop: "spsj",
              label: "审批时间",
              width: "200px",
              align: "center",
            },
            {
              prop: "spzt",
              label: "审批状态",
              width: "110px",
              align: "center",
            },
          ],
          [
            {
              prop: "gzqy",
              label: "工作区域",
              width: "150px",
              align: "left",
            },
            {
              prop: "wlhj",
              label: "网络环境",
              width: "120px",
              align: "center",
            },
            {
              prop: "cpu",
              label: "CPU(核)",
              width: "90px",
              align: "center",
            },
            {
              prop: "ncgb",
              label: "内存(GB)",
              width: "90px",
              align: "center",
            },
            {
              prop: "zyzlgb",
              label: "资源总量(GB)",
              width: "120px",
              align: "center",
            },
            {
              prop: "sqzt",
              label: "申请状态",
              width: "110px",
              align: "center",
            },
          ],
        ],
        [
          [
            {
              prop: "fwmc",
              label: "服务名称",
              width: "140px",
              align: "left",
            },
            {
              prop: "fwlx",
              label: "服务类型",
              width: "120px",
              align: "center",
            },
            {
              prop: "zcfbsj",
              label: "注册发布时间",
              width: "180px",
              align: "center",
            },
            {
              prop: "bdycs",
              label: "被调用次数",
              width: "110px",
              align: "center",
            },
          ],
          [
            {
              prop: "fwmc",
              label: "服务名称",
              width: "140px",
              align: "left",
            },
            {
              prop: "fwlx",
              label: "服务类型",
              width: "120px",
              align: "center",
            },
            {
              prop: "spsj",
              label: "审批时间",
              width: "180px",
              align: "center",
            },
            {
              prop: "spzt",
              label: "审批状态",
              width: "110px",
              align: "center",
            },
          ],
          [
            {
              prop: "gzqy",
              label: "工作区域",
              width: "100px",
              align: "left",
            },
            {
              prop: "wlhj",
              label: "网络环境",
              width: "90px",
              align: "center",
            },
            {
              prop: "cpu",
              label: "CPU(核)",
              width: "80px",
              align: "center",
            },
            {
              prop: "ncgb",
              label: "内存(GB)",
              width: "80px",
              align: "center",
            },
            {
              prop: "zyzlgb",
              label: "资源总量(GB)",
              width: "110px",
              align: "center",
            },
            {
              prop: "sqzt",
              label: "操作",
              width: "110px",
              align: "center",
              type: "Button",
              btnList: [
                {
                  label: "分配",
                  type: "distribut",
                },
                {
                  label: "已分配",
                },
              ],
            },
          ],
        ],
        [
          [
            {
              prop: "fwmc",
              label: "服务名称",
              width: "140px",
              align: "left",
            },
            {
              prop: "fwlx",
              label: "服务类型",
              width: "120px",
              align: "center",
            },
            {
              prop: "zcfbsj",
              label: "注册发布时间",
              width: "180px",
              align: "center",
            },
            {
              prop: "bdycs",
              label: "被调用次数",
              width: "110px",
              align: "center",
            },
          ],
          [
            {
              prop: "fwmc",
              label: "服务名称",
              width: "140px",
              align: "left",
            },
            {
              prop: "fwlx",
              label: "服务类型",
              width: "120px",
              align: "center",
            },
            {
              prop: "spsj",
              label: "审批时间",
              width: "180px",
              align: "center",
            },
            {
              prop: "spzt",
              label: "审批状态",
              width: "110px",
              align: "center",
            },
          ],
          [
            {
              prop: "sszz",
              label: "所属组织",
              width: "170px",
              align: "left",
            },
            {
              prop: "cpu",
              label: "CPU使用量(核)",
              width: "120px",
              align: "center",
            },
            {
              prop: "ncgb",
              label: "内存使用量(GB)",
              width: "130px",
              align: "center",
            },
            {
              prop: "gzqysl",
              label: "工作区域数量(个)",
              width: "130px",
              align: "center",
            },
          ],
        ],
      ],
      fw_value: 0,
      menu_arr: [
        [
          {
            text: "服务总数",
            pic: require("@/assets/imgs/ic_fuwuzs_navy.png"),
            bg: "#e6ebfe",
            color: "#515fe7",
            type: "service",
            num: "",
          },
          {
            text: "应用总数",
            pic: require("@/assets/imgs/ic_yingyongzs.png"),
            bg: "#e5f4fe",
            color: "#38aef9",
            type: "app",
            num: "",
          },
          {
            text: "收益总额",
            pic: require("@/assets/imgs/ic_shouyize.png"),
            bg: "#fcefd6",
            color: "#ea7d19",
            type: "getMoney",
            num: "",
          },
        ],
        [
          {
            text: "组织用户数",
            pic: require("@/assets/imgs/ic_yonghuzs.png"),
            bg: "#e6ebfe",
            color: "#515fe7",
            type: "areaUser",
            num: "",
          },
          {
            text: "服务总数",
            pic: require("@/assets/imgs/ic_fuwuzs.png"),
            bg: "#e5f4fe",
            color: "#38aef9",
            type: "service",
            num: "",
          },
          {
            text: "应用总数",
            pic: require("@/assets/imgs/ic_yingyongzs.png"),
            bg: "#e7fdfc",
            color: "#25bdb1",
            type: "app",
            num: "",
          },
          {
            text: "收益总额",
            pic: require("@/assets/imgs/ic_shouyize.png"),
            bg: "#fcefd6",
            color: "#ea7d19",
            type: "getMoney",
            num: "",
          },
        ],
        [
          {
            text: "用户总数",
            pic: require("@/assets/imgs/ic_yonghuzs.png"),
            bg: "#e6ebfe",
            color: "#515fe7",
            type: "allUser",
            num: "",
          },
          {
            text: "服务总数",
            pic: require("@/assets/imgs/ic_fuwuzs.png"),
            bg: "#e5f4fe",
            color: "#38aef9",
            type: "service",
            num: "",
          },
          {
            text: "应用总数",
            pic: require("@/assets/imgs/ic_yingyongzs.png"),
            bg: "#e7fdfc",
            color: "#25bdb1",
            type: "app",
            num: "",
          },
          {
            text: "收益总额",
            pic: require("@/assets/imgs/ic_shouyize.png"),
            bg: "#fcefd6",
            color: "#ea7d19",
            type: "getMoney",
            num: "",
          },
        ],
      ],
      online_tool_arr: [
        {
          text: "智能绘图",
          pic: require("@/assets/imgs/home_tool_ic_znht.png"),
          bg: "#e5f4fe",
          color: "#38aef9",
        },
        {
          text: "数据开发",
          pic: require("@/assets/imgs/home_tool_ic_sjkf.png"),
          bg: "#e6ebfe",
          color: "#515fe7",
        },
        {
          text: "模型工场",
          pic: require("@/assets/imgs/home_tool_ic_mxgc.png"),
          bg: "#e6ebfe",
          color: "#515fe7",
        },
        {
          text: "流程设计",
          pic: require("@/assets/imgs/home_tool_ic_lcsj.png"),
          bg: "#e6ebfe",
          color: "#515fe7",
        },
        {
          text: "可视化报表",
          pic: require("@/assets/imgs/home_tool_ic_kshbb.png"),
          bg: "#fff2e2",
          color: "#ea7d19",
        },
        {
          text: "模板应用",
          pic: require("@/assets/imgs/home_tool_ic_mbyy.png"),
          bg: "#fff2e2",
          color: "#ea7d19",
        },
        {
          text: "应用创新",
          pic: require("@/assets/imgs/home_tool_ic_yycx.png"),
          bg: "#e7fdfc",
          color: "#25bdb1",
        },
      ],
      service_arr: [
        ["服务列表", "申请服务", "服务审批", "云资源"],
        ["服务列表", "服务审批", "云资源管理"],
        ["服务列表", "服务审批", "云资源管理"],
      ],
      apptype_arr: [
        ["部署的应用", "创新的应用"],
        ["创新应用", "应用审批"],
        ["创新应用", "应用审批"],
      ],
      app_arr: [],
      manage_arr: [
        {
          pic: require("@/assets/imgs/home_tool_ic_organize.png"),
          text: "组织管理",
          role: 1,
          url:'',
        },
        {
          pic: require("@/assets/imgs/home_tool_ic_quanxian.png"),
          text: "权限管理",
          role: 2,
          url:'/authority/organization'
        },
        // {
        //   pic: require("@/assets/imgs/home_tool_ic_quanxian.png"),
        //   text: "容器管理",
        //   role: 2,
        // },
        // {
        //   pic: require("@/assets/imgs/home_tool_ic_quanxian.png"),
        //   text: "数据管控",
        //   role: 2,
        // },
      ],
    };
  },
  components: {
    tableUm,
  },
  computed: {
    ...mapGetters([
      'level',
    ]),
    ...mapState(['userInfo']),
  },
  created() {
    this.getUserData();
    this.getAppData();
  },
  mounted() {
    console.log(this.level);
    if(this.userInfo){
      this.now_user = this.level
      this.manage_arr[0].url = '/authority/organization/detail/'+this.userInfo.department_id
      this.init_func()
    }else{
      this.getCurrentUser()
    }
  },
  methods: {
    init_func(){
      this.getInfoData();
          if (this.now_user == 0) {
            this.getHealth();
            this.getoperatingdata();
          } else if (this.now_user == 1) {
            this.getHealth();
            this.getoperatingdata();
            this.getappusedata();
          } else if (this.now_user == 2) {
            this.getoperatingdata();
            this.getfwlxdata();
            this.getyylxdata();
          }
    },
    getCurrentUser() {
      this.$api.user.getNowUser().then(({ data }) => {
        if (data.success == 1) {
          console.log("--- user info ---");
          console.log(data.data);
          console.log("--- user info ---");
          this.$store.commit("userInfofun", data.data);
          this.now_user = this.level
          this.manage_arr[0].url = data.data.department_id
           console.log(this.level);
           this.init_func()
        } else {
          console.log(data.errMsg);
        }
      });
    },
    gotoyy() {
      this.$router.push("/yygl/" + this.now_user);
    },
    gotofw() {
      this.$router.push("/fwgl/" + this.now_user);
    },
    gotozc() {
      this.$router.push("/fwzc/fwcs");
    },
    getUserData() {
      this.$http
        .get("/static/workpalce.json")
        .then((response) => {
          console.log(response);
          let data = response.data.data;
          this.person = data.userdata.person;
          this.login_time = data.userdata.login_time;
        })
        .catch(function(response) {});
    },
    getoperatingdata() {
      this.$http
        .get("/static/workpalce.json")
        .then((response) => {
          console.log(response);
          let data = response.data.data;
          this.init_yy(
            data.operatingdata.xarr,
            data.operatingdata.service_yarr,
            data.operatingdata.app_yarr,
            data.operatingdata.get_yarr
          );
        })
        .catch(function(response) {});
    },
    getappusedata() {
      this.$http
        .get("/static/workpalce.json")
        .then((response) => {
          console.log(response);
          let data = response.data.data;
          this.init_fwyy(data.appusedata.xarr, data.appusedata.yarr);
        })
        .catch(function(response) {});
    },
    getfwlxdata() {
      this.$http
        .get("/static/workpalce.json")
        .then((response) => {
          console.log(response);
          let data = response.data.data;
          this.init_fwlx_asy(data.fwlxdata);
        })
        .catch(function(response) {});
    },
    getyylxdata() {
      this.$http
        .get("/static/workpalce.json")
        .then((response) => {
          console.log(response);
          let data = response.data.data;
          this.init_yylx_asy(data.yylxdata);
        })
        .catch(function(response) {});
    },
    getHealth() {
      this.$http
        .get("/static/workpalce.json")
        .then((response) => {
          console.log(response);
          let data = response.data.data;
          this.init_health(data.health);
        })
        .catch(function(response) {});
    },
    getAppData() {
      this.$http
        .get("/static/workpalce.json")
        .then((response) => {
          console.log(response);
          let data = response.data.data;
          this.app_arr = data.appdata;
        })
        .catch(function(response) {});
    },
    getInfoData() {
      this.$http
        .get("/static/workpalce.json")
        .then((response) => {
          console.log(response);
          let data = response.data.data;
          this.menu_arr[this.now_user].forEach((e, idx) => {
            if (data.infodata[e.type]) {
              this.$set(
                this.menu_arr[this.now_user][idx],
                "num",
                data.infodata[e.type]
              );
            }
          });
        })
        .catch(function(response) {});
    },
    //分配接口调用
    distribut(val) {
      console.log(val);
    },
    manage_func(n) {
      console.log(n);
      this.$router.push(n)
    },
    init_health(num) {
      var options = {
        title: {
          text: num + "%",
          textStyle: {
            color: "#000",
            fontSize: 40,
            fontWeight: 200,
          },
          subtext: "健康占比",
          subtextStyle: {
            color: "#c9cedd",
          },
          itemGap: -10, // 主副标题距离
          left: "center",
          top: "center",
        },
        angleAxis: {
          max: 100, // 满分
          clockwise: false, // 逆时针
          startAngle: 90,
          // 隐藏刻度线
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        radiusAxis: {
          type: "category",
          // 隐藏刻度线
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        polar: {
          center: ["50%", "50%"],
          radius: "140%", //图形大小
        },
        series: [
          {
            type: "bar",
            silent: true,
            data: [
              {
                name: "作文得分",
                value: num,
                itemStyle: {
                  normal: {
                    color: "#e56600",
                    shadowColor: "rgba(0, 0, 0, 0.2)",
                    shadowBlur: 20,
                  },
                },
              },
            ],
            coordinateSystem: "polar",
            roundCap: true,
            barWidth: 10,
            barGap: "-100%", // 两环重叠

            z: 2,
          },
          {
            // 灰色环
            type: "bar",
            silent: true,
            data: [
              {
                value: 100,
                itemStyle: {
                  color: "#c9cedd",
                  shadowColor: "rgba(0, 0, 0, 0.2)",
                  shadowBlur: 20,
                },
              },
            ],
            coordinateSystem: "polar",
            roundCap: true,
            barWidth: 10,
            barGap: "-100%", // 两环重叠
            z: 1,
          },
        ],
      };
      window[this.health] = echarts.init(document.getElementById(this.health));
      window[this.health].setOption(options, true);
    },
    init_fwlx_asy(data) {
      var options = this.init_circle(data);
      window[this.fwlx_asy] = echarts.init(
        document.getElementById(this.fwlx_asy)
      );
      window[this.fwlx_asy].setOption(options, true);
    },
    init_yylx_asy(data) {
      var options = this.init_circle(data);
      window[this.yylx_asy] = echarts.init(
        document.getElementById(this.yylx_asy)
      );
      window[this.yylx_asy].setOption(options, true);
    },
    init_circle(data) {
      var scaleData = data;
      var rich = {
        white: {
          color: "#ddd",
          align: "center",
          padding: [3, 0],
        },
      };
      var placeHolderStyle = {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: "rgba(0, 0, 0, 0)",
          borderColor: "rgba(0, 0, 0, 0)",
          borderWidth: 0,
        },
      };
      var data = [];
      var color = ["#515fe7", "#36a5ec", "#da9f2a", "#23b2a7", "#d46002"];
      var legendarr = [];
      for (var i = 0; i < scaleData.length; i++) {
        data.push(
          {
            value: scaleData[i].value,
            name: scaleData[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: "",
            itemStyle: placeHolderStyle,
          }
        );
        legendarr.push(scaleData[i].name);
      }
      var seriesObj = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [53, 57],
          center: ["51%", "39%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#58617a",
                formatter: function(params) {
                  var percent = 0;
                  var total = 0;
                  for (var i = 0; i < scaleData.length; i++) {
                    total += scaleData[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== "") {
                    return params.name + "\n" + params.value + "个";
                  } else {
                    return "";
                  }
                },
                rich: rich,
              },
            },
          },
          data: data,
        },
      ];

      var options = {
        color: color,
        tooltip: {
          show: false,
        },
        legend: {
          bottom: -5,
          left: "center",
          itemWidth: 10,
          itemHeight: 10,
          orient: "horizontal",
          data: legendarr,
          backgroundColor: "#f4f7fc",
        },
        toolbox: {
          show: false,
        },

        series: seriesObj,
      };
      return options;
    },
    init_yy(xarr, service, app, get) {
      var colors = ["#e56600", "#c9cedd", "#515fe7"];

      var options = {
        color: colors,

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          top: "20",
          bottom: "45",
        },
        legend: {
          data: ["服务调用总数", "应用部署总数", "收益总额"],
          bottom: 0,
          itemWidth: 10,
          itemHeight: 10,
          backgroundColor: "#f4f7fc",
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            data: xarr,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            min: 0,
            position: "right",
            axisLine: {
              lineStyle: {
                color: colors[1],
              },
            },
          },
          {
            type: "value",
            name: "",
            min: 0,
            position: "left",
            axisLine: {
              lineStyle: {
                color: colors[1],
              },
            },
          },
        ],
        series: [
          {
            name: "服务调用总数",
            type: "bar",
            yAxisIndex: 1,
            data: service,
            itemStyle: {
              barBorderRadius: 6,
              color: colors[2],
            },
            barWidth: 12,
          },
          {
            name: "应用部署总数",
            type: "bar",
            yAxisIndex: 1,
            data: app,
            itemStyle: {
              barBorderRadius: 6,
              color: colors[0],
            },
            barWidth: 12,
          },
          {
            name: "收益总额",
            type: "line",
            yAxisIndex: 0,
            data: get,
            itemStyle: {
              color: colors[0],
            },
            symbol: "circle",
          },
        ],
      };
      window[this.yy_asy] = echarts.init(document.getElementById(this.yy_asy));
      window[this.yy_asy].setOption(options, true);
    },
    init_fwyy(xarr, yarr) {
      var dataname = ["服务总数", "应用总数"];
      var options = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              backgroundColor: "#fff",
            },
          },
        },
        legend: {
          data: [dataname[0]],
          itemWidth: 14,
          itemHeight: 10,
          bottom: 0,
        },
        grid: {
          borderColor: "#f2f2f2",
          top: 20,
          bottom: 45,
          right: 0,
        },
        xAxis: {
          type: "category",
          axisTick: { show: false },
          axisLine: { show: false },
          nameTextStyle: {
            color: "#0d1847",
          },
          data: xarr,
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#c9cedd",
            },
          },
          axisTick: { show: false },
          nameTextStyle: {
            color: "#f2f2f2",
          },
        },
        series: [
          {
            data: yarr,
            type: "line",
            name: dataname[0],
            smooth: true,
            sampling: "average",
            symbol: "circle",
            itemStyle: {
              color: "#0a92c4",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#0a92c4",
                },
                {
                  offset: 1,
                  color: "#ffe",
                },
              ]),
            },
          },
        ],
      };
      window[this.fwyy] = echarts.init(document.getElementById(this.fwyy));
      window[this.fwyy].setOption(options, true);
    },
  },
};
</script>

<style>
.online_tool .el-scrollbar__wrap {
  overflow-x: hidden;
}
.data_charts_left .el-input__inner {
  width: 100px;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
}
.data_charts_left .el-input__icon {
  line-height: 28px;
}
.data_charts_left .el-select {
  float: right;
}
</style>
<style scoped>
.contain {
  width: 1200px;
  margin: 0 auto;
  margin-top: -157px;
  margin-bottom: 20px;
}
.person_info {
  width: 1200px;
  height: 206px;
  background-color: #ffffff;
  box-shadow: 0px 3px 6px 0px #f4f7fc;
  border-radius: 12px;
  padding: 20px;
}
.preson {
  width: 100%;
  height: 52px;
  line-height: 52px;
  border-bottom: 2px solid #f4f7fc;
}
.person_text {
  float: left;
  padding: 0 10px;
}
.person_text img {
  border-radius: 18px;
  margin-right: 10px;
  vertical-align: -10px;
}
.person_menu {
  float: right;
  width: 100px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background-color: #e56600;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  margin-top: 10px;
  position: relative;
}
.person_manage_pic {
  display: inline-block;
  width: 3px;
  height: 13px;
  background-image: url("~@/assets/imgs/home_ic_more_w.png");
}
.menu {
  width: 100%;
  height: 102px;
  margin-top: 20px;
}
.menu_box0,
.menu_box1,
.menu_box2 {
  float: left;
  width: calc((100% - 60px) / 3);
  margin-right: 30px;
  width: 366px;
  height: 92px;
  background-color: #e6ebfe;
  border-radius: 12px 12px 12px 46px;
}
.menu_box0:nth-last-of-type(1),
.menu_box1:nth-last-of-type(1),
.menu_box2:nth-last-of-type(1) {
  margin-right: 0px;
}
.menu_box1,
.menu_box2 {
  width: calc((100% - 60px) / 4);
  margin-right: 20px;
}
.menu img {
  float: left;
  margin: 28px 0 0 28px;
}
.menu .menu_text {
  float: right;
  margin-top: 15px;
  margin-right: 29px;
}
.menu_text p {
  text-align: right;
}

.case_box {
  width: 100%;
  overflow: hidden;
}
.data_asy {
  width: 720px;
  float: left;
  margin-right: 20px;
}
.data_charts {
  width: 720px;
  height: 270px;
  background-color: #ffffff;
  box-shadow: 0px 3px 6px 0px #f4f7fc;
  border-radius: 12px;
  padding: 20px;
}
.data_charts_left {
  height: 100%;
  width: 220px;
  float: left;
}
.data_charts_right {
  height: 100%;
  width: 420px;
  float: right;
}
.data_charts_left p,
.data_charts_right p {
  font-size: 16px;
  color: #707693;
}
.data_charts_left p span,
.data_charts_right p span {
  width: 8px;
  height: 8px;
  background-color: #515fe7;
  border-radius: 4px;
  display: inline-block;
  margin-right: 5px;
}
.health {
  width: 200px;
  height: 200px;
  margin: 20px 0 0 20px;
}
.yy_asy {
  width: 400px;
  height: 200px;
  margin: 20px 0 0 0px;
}
.fwyy {
  width: 420px;
  height: 200px;
  margin: 20px 0 0 0px;
}
.online_tool {
  width: 460px;
  float: right;
}
.online_contain {
  width: 460px;
  height: 270px;
  background-color: #ffffff;
  box-shadow: 0px 3px 6px 0px #f4f7fc;
  border-radius: 12px;
  padding: 32px 20px;
  overflow: hidden;
}
.online_box {
  width: 126px;
  height: 38px;
  border-radius: 6px 19px 19px 19px;
  line-height: 38px;
  text-align: center;
  float: left;
  margin-right: 20px;
  margin-bottom: 15px;
}
.online_contain .online_box:nth-child(3n) {
  margin-right: 0px;
}
.online_box img {
  vertical-align: -4px;
  margin-right: 10px;
}
.myservice,
.myapp {
  width: 100%;
  height: 386px;
  background-color: #ffffff;
  box-shadow: 0px 3px 6px 0px #f4f7fc;
  border-radius: 12px;
  padding: 15px 20px;
}
.myapp {
  /* width: 460px; */
}
.myservice_title {
  width: 100%;
  height: 47px;
  border-bottom: 2px solid #f4f7fc;
}
.myservice_type {
  float: left;
  margin-right: 40px;
  height: calc(100% + 2px);
  cursor: pointer;
  color: #8890a7;
}
.myservice_btn {
  float: right;
  width: 100px;
  height: 32px;
  background-color: #515fe7;
  border-radius: 8px;
  color: #e6ebfe;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
}
.myapp_contain {
  width: 420px;
  height: 300px;
  margin-top: 10px;
}
.myapp_box {
  width: 120px;
  height: 110px;
  float: left;
  margin: 10px 20px 40px 0px;
  text-align: center;
}
.myapp_contain .myapp_box:nth-of-type(3n) {
  margin-right: 0;
}
.myapp_box p:nth-of-type(1) {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 10px;
  margin-bottom: 5px;
  color: #0d1847;
}
.myapp_box p:nth-of-type(2) {
  font-size: 12px;
  color: #8890a7;
}
.manage_menu {
  position: absolute;
  top: 0;
  left: 100px;
  width: 185px;
  display: none;
  padding-left: 40px;
}
.person_menu:hover .manage_menu {
  display: block;
}
.person_menu:hover {
  color: #0d1847;
  background-color: #fff;
  border: solid 2px #eef0f7;
  line-height: 28px;
}
.person_menu:hover .person_manage_pic {
  background-image: url("~@/assets/imgs/home_ic_more_b.png");
}

.manage_box {
  width: 145px;
  height: 50px;
  line-height: 50px;
  background-color: #0d1847;
  box-shadow: 0px 2px 4px 0px #001155;
  border-radius: 12px;
  margin-bottom: 10px;
  text-align: left;
  padding-left: 10px;
  color: #c3caf8;
}
.manage_box:hover {
  border: solid 2px #515fe7;
}
.manage_box img {
  vertical-align: -5px;
  margin-right: 10px;
}
</style>
