<template>
  <div class="contain">
    <div class="person_info">
      <div class="preson">
        <div class="person_text">
          <img style="width:40px;" :src="picture_path?picture_path:require('../../assets/imgs/img_head.png')" alt />
          <span>你好，{{ person }}！{{login_time?'最近登录 ':''}}{{ 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||now_user == 4
              ? 'menu_box0'
              : now_user == 1
              ? 'menu_box1'
              : 'menu_box2'
          "
          v-for="(item, index) in menu_arr[now_user]"
          :style="{backgroundColor:item.bg}"
          :key="index + 100"
        >
          <img :src="item.pic" alt />
          <div class="menu_text" :style="now_user == 1||now_user == 2?{marginRight:'30px'}:''">
            <p>{{ item.text }}</p>
            <p
              :style="{ color: item.color }"
            >
              <span style="font-size:40px;font-family: Arial-BoldMT;font-weight:600;">{{ helper.numberFormat(item.num, 2) }}</span>
              <span v-if="item.num > 10000">万</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 普通用户--数据分析 -->
    <div class="case_box" v-if="now_user == 0||now_user == 4">
      <div class="data_asy">
        <p
          style="margin-top:15px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
        >
          <span>
            <span style="display: inline-block;vertical-align:middle;">运营管控中心</span>
            <div class="enter_btn" @click="$router.push('/data_analysis')"></div>
          </span>
        </p>
        <div class="data_charts">
          <div class="charts_box" :style="now_chart==0?'':{marginLeft:'-720px'}">
            <div class="data_charts_left" style="width:calc(50% - 40px);">
              <p class="cloud_asy">
                <span></span>
                云资源概况分析
                <el-select style="float:right;margin-top:-5px;" @change="get_resource" v-model="work_value" placeholder="请选择">
                  <el-option
                    v-for="item in work_options"
                    :key="item.id"
                    :label="item.workplace"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </p>
              <!-- 仪表盘 -->
              <div class="health" style="width:calc(100%);margin-top:20px;">
                <div style="width:142px;float:left;height:180px;margin-right:30px;">
                  <dash-board :data="cpu_data" dangerousValue='workplace' style="height:140px;"></dash-board>
                  <p style="margin-bottom:8px;"><span>物理总量</span><span>{{cpu_data.all}}核</span></p>
                  <p v-if="cpu_data.remaining||cpu_data.remaining==0"><span>剩余量</span><span>{{cpu_data.remaining.toFixed(2)}}核</span></p>
                </div>
                <div style="width:142px;float:left;height:180px;margin-right:30px;">
                  <dash-board :data="memory_data" dangerousValue='workplace' style="height:140px;"></dash-board>
                  <p style="margin-bottom:8px;"><span>物理总量</span><span>{{memory_data.all}}GB</span></p>
                  <p v-if="memory_data.remaining||memory_data.remaining==0"><span>剩余量</span><span>{{memory_data.remaining.toFixed(2)}}GB</span></p>
                </div>
                <div style="width:142px;float:left;height:180px;margin-right:30px;">
                  <dash-board :data="pan_data" dangerousValue='workplace' style="height:140px;"></dash-board>
                  <p style="margin-bottom:8px;"><span>物理总量</span><span>{{pan_data.all}}GB</span></p>
                  <p><span>剩余量</span><span v-if="pan_data.remaining!==-1">{{pan_data.remaining}}GB</span><span v-if="pan_data.remaining==-1">未知</span></p>
                </div>
                <div style="width:142px;float:left;height:180px;">
                  <dash-board :data="pod_data" dangerousValue='workplace' style="height:140px;"></dash-board>
                  <p style="margin-bottom:8px;"><span>物理总量</span><span>{{pod_data.all}}</span></p>
                  <p><span>剩余量</span><span>{{pod_data.remaining}}</span></p>
                </div>
              </div>
            </div>
            <div class="data_charts_left" style="margin-left:40px;">
              <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 class="check_charts">
              <div @click="now_chart=0" class="check_charts_btn" :style="now_chart==0?{backgroundColor:'#a9aec0'}:''"></div>
              <div @click="now_chart=1" class="check_charts_btn" :style="now_chart==1?{backgroundColor:'#a9aec0'}:''"></div>
            </div>
          </div>

        </div>
      </div>
      <div class="online_tool">
        <p
          style="margin-top:15px;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"
            @click="goto_online_page(item.url,index,undefined,item.target)"
            @mouseenter="enter_online_tool(index)" 
            @mouseleave="leave_online_tool()"
            :style="now_online==index&&item.move_bg?{backgroundColor:item.move_bg}:{ backgroundColor: item.bg }"
          >
            <img :src="now_online==index&&(item.move_pic||item.move_pic=='')?item.move_pic:item.pic" alt />
            <span :style="now_online==index&&item.move_color?{color: item.move_color}:{ color: item.color }">{{ item.text }}</span>
            <div v-if="item.children&&item.children.length" class="online_child_box">
              <div 
              v-for="(it,idx) in item.children" 
              :key="idx+59000"
              @click.stop="goto_online_page(it.url,index,idx)"
              @mouseleave.stop="change_now_online()"
              @mouseenter.stop="change_now_online(index,idx)"
              class="online_box online_child"
              :style="now_online_box.length&&now_online_box[0]==index&&now_online_box[1]==idx?{backgroundColor:it.h_bg}:{ backgroundColor: it.bg }"
              >
                <img :src="it.pic" alt />
                <span :style="{ color: it.color }">{{ it.text }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 组织用户--数据分析 -->
    <div class="case_box" v-if="now_user == 1">
      <div class="data_asy" style="width:100%;">
        <p
          style="margin-top:15px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
        >
          <span>
            <span style="display: inline-block;vertical-align:middle;">运营管控中心</span>
            <div class="enter_btn" @click="$router.push('/data_analysis')"></div>
          </span>
        </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" @change="change_service_app" 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:15px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
        >
          <span>
            <span style="display: inline-block;vertical-align:middle;">运营管控中心</span>
            <div class="enter_btn" @click="$router.push('/data_analysis')"></div>
          </span>
        </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;margin-top:20px;"></div>
          </div>
          <div class="data_charts_left" style="width:285px;">
            <p>
              <span></span> 应用类型分析
            </p>
            <div :id="yylx_asy" class="health" style="width:265px;margin-top:20px;"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 普通用户/组织管理员--服务 -->
    <div class="case_box">
      <div class="data_asy" :style="now_user == 0||now_user == 4 ? {} : { width: '590px' }">
        <p
          style="margin-top:10px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
        >
          <span>
            <span style="display: inline-block;vertical-align:middle;"> {{ now_user == 0||now_user == 4 ? "我的服务" : "服务管理" }}</span>
            <div class="enter_btn" @click="gotofw"></div>
          </span>
        </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="change_now_type(index)"
            >{{ item }}</div>
            <div class="myservice_btn" v-if="now_user == 0||now_user == 4" @click="gotozc()">
              <img src="@/assets/imgs/home_ic_release.png" alt />&nbsp; 服务注册
            </div>
          </div>
          <table-um
            v-for="(itx,idx) in service_head[now_user]"
            :key="idx+5000"
            v-show="idx == now_type"
            :headers="service_head[now_user][now_type]"
            :datas="service_data"
            :stripe="true"
            height="285"
            :detailsUrl="detailsUrl[now_user][now_type]"
            @distribut="distribut"
          ></table-um>
          <list-pagination
            :total="listTotal"
            :page-size="pageSize"
            :page-sizes="[]"
            :current-page="currentPage"
            @current-change="changeCurrentPage"
          ></list-pagination>
        </div>
      </div>
      <div class="online_tool" :style="now_user == 0||now_user == 4 ? {} : { width: '590px' }">
        <p
          style="margin-top:10px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
        >
          <span>
            <span style="display: inline-block;vertical-align:middle;">{{ now_user == 0||now_user == 4 ? "我的应用" : "平台应用" }}</span>
            <div class="enter_btn" @click="gotoyy"></div>
          </span>
        </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="change_now_app(index)"
            >{{ item }}</div>
          </div>
          <el-scrollbar class="myapp_contain" v-if="now_user == 0||now_user == 4">
            <div
              v-for="(item, index) in app_arr"
              :key="index + 600"
              class="myapp_box"
              @click="gotopage(item.app_id,item.deploy_id)"
            >
              <img :src="item.logo" alt style="width:60px;height:60px;" />
              <p>{{ item.app_name||item.deploy_name }}</p>
              <p>{{ item.version||item.app_version }}</p>
            </div>
          </el-scrollbar>

          <table-um
            :headers="app_head[now_user][now_app]"
            v-show="now_user !== 0&&now_user !== 4"
            :datas="app_data"
            :stripe="true"
            :detailsUrl="detailsUrl1[now_user][now_app]"
            :ites="now_app == 1 ? true : false"
            height="285"
          ></table-um>
          <list-pagination
            v-show="now_user !== 0&&now_user !== 4"
            :total="listTotal1"
            :page-size="pageSize"
            :page-sizes="[]"
            :current-page="currentPage1"
            @current-change="changeCurrentPage1"
          ></list-pagination>
        </div>
      </div>
    </div>

    <allot-info-confirm
      ref="allotConfirm"
      @allot-success="allotSuccess"
    ></allot-info-confirm>
  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid';
import tableUm from "@/components/table/table-um";
import ListPagination from "@/components/comments-pagination";
import helper from "@/services/helper.js";
import dashBoard from "../../components/e-charts/dashboard";
import allotInfoConfirm from "@/components/allot-info-confirm";
import { formatDateTime_date } from "@/utils/common";
import { mapGetters, mapState } from "vuex";
import { getCookie } from "../../services/cookie";
var echarts = require("echarts");
const state = window.serviceConfig.state;
const cloudServiceRoot = window.serviceConfig.cloudServiceRoot;
export default {
  data() {
    return {
      helper: helper,
      service_data: [],
      app_data: [],
      picture_path:'',
      listTotal: 0,
      currentPage: 1,
      listTotal1: 0,
      currentPage1: 1,
      pageSize: 5,
      person: "",
      login_time: "",
      now_online_box:[],
      detailsUrl: [
        ["/fwgl/0/0/servicedetail/", "/fwgl/0/1/applyserviceedit/"],
        ["/fwgl/1/0/servicedetail/", "/fwgl/1/1/approvalserviceedit/"],
        ["/fwgl/2/0/servicedetail/", "/fwgl/2/1/approvalserviceedit/"]
      ], //服务跳转链接
      detailsUrl1: [
        ["/yygl/0/0/detail/", "/yygl/0/1/deploydetail/"],
        ["/yygl/1/0/detail/", "/yygl/1/2/approvaldetail/"],
        ["/yygl/2/0/detail/", "/yygl/2/2/approvaldetail/"]
      ], //应用跳转链接
      now_user: 2, //0：普通用户，1：组织管理员，2：超级管理员
      now_type: 0,
      now_app: 0,
      now_online:-1,
      manage_flag: false,
      health: uuidv4(),
      yy_asy: uuidv4(),
      fwyy: uuidv4(),
      fwlx_asy: uuidv4(),
      yylx_asy: uuidv4(),
      now_chart:0,
      cpu_data:{
        data: 0,
        text: "CPU已使用"
      },
      memory_data:{
        data: 0,
        text: "内存已使用"
      },
      pan_data:{
        data: 0,
        text: "数据盘已使用"
      },
      pod_data:{
        data: 0,
        text: "容器组已使用"
      },
      fw_options: [
        {
          value: 0,
          label: "服务总数"
        },
        {
          value: 1,
          label: "应用总数"
        }
      ],
      work_options:[],
      work_value:'',
      app_url_arr: [
        ["/apaas/hubApi/market/list", "/apaas/hubApi/market/deployList"],
        ["/apaas/hubApi/market/list", "/apaas/hubApi/market/applyList"],
        ["/apaas/hubApi/market/list", "/apaas/hubApi/market/applyList"]
      ],
      app_head: [
        [],
        [
          [
            {
              prop: "app_name",
              label: "应用名称",
              width: "90px",
              align: "left",
              type: "href",
              id: "app_id"
            },
            {
              prop: "type_name",
              label: "应用类型",
              width: "120px",
              align: "center"
            },
            {
              prop: "version",
              label: "应用版本",
              width: "80px",
              align: "center"
            },
            {
              prop: "create_date",
              label: "应用创建时间",
              width: "160px",
              align: "center"
            },
            {
              prop: "deploy_times",
              label: "被部署次数",
              width: "100px",
              align: "center"
            }
          ],
          [
            {
              prop: "app_name",
              label: "应用名称",
              width: "90px",
              align: "left",
              type: "href",
              id: "id"
            },
            {
              prop: "type_name",
              label: "应用类型",
              width: "120px",
              align: "center"
            },
            {
              prop: "version",
              label: "应用版本",
              width: "80px",
              align: "center"
            },
            {
              prop: "time",
              label: "应用审批时间",
              width: "160px",
              align: "center"
            },
            {
              prop: "apply_status",
              label: "审批状态",
              width: "100px",
              align: "center"
            }
          ]
        ],
        [
          [
            {
              prop: "app_name",
              label: "应用名称",
              width: "90px",
              align: "left",
              type: "href",
              id: "app_id"
            },
            {
              prop: "type_name",
              label: "应用类型",
              width: "120px",
              align: "center"
            },
            {
              prop: "version",
              label: "应用版本",
              width: "80px",
              align: "center"
            },
            {
              prop: "create_date",
              label: "应用创建时间",
              width: "160px",
              align: "center"
            },
            {
              prop: "deploy_times",
              label: "被部署次数",
              width: "100px",
              align: "center"
            }
          ],
          [
            {
              prop: "app_name",
              label: "应用名称",
              width: "90px",
              align: "left",
              type: "href",
              id: "id"
            },
            {
              prop: "type_name",
              label: "应用类型",
              width: "120px",
              align: "center"
            },
            {
              prop: "version",
              label: "应用版本",
              width: "80px",
              align: "center"
            },
            {
              prop: "time",
              label: "应用审批时间",
              width: "160px",
              align: "center"
            },
            {
              prop: "apply_status",
              label: "审批状态",
              width: "100px",
              align: "center"
            }
          ]
        ]
      ],
      service_url_arr: [
        [
          "/apaas/service/v3/service/manager/list",
          "/apaas/service/v3/service/apply/service/list",
          "/apaas/service/v3/workplace/normal/list"
        ],
        [
          "/apaas/service/v3/service/manager/list",
          "/apaas/service/v3/service/approval/applied/list",
          "/apaas/service/v3/workplace/org/list"
        ],
        [
          "/apaas/service/v3/service/manager/list",
          "/apaas/service/v3/service/approval/applied/list",
          "/apaas/service/v3/workplace/super/list"
        ]
      ],
      service_head: [
        [
          [
            {
              prop: "name",
              label: "服务名称",
              width: "250px",
              align: "left",
              type: "href",
              id: "id"
            },
            {
              prop: "data_service_type1_name",
              label: "服务类型",
              width: "120px",
              align: "center"
            },
            {
              prop: "create_time",
              label: "注册发布时间",
              width: "200px",
              align: "center"
            },
            {
              prop: "request_count",
              label: "被调用次数",
              width: "110px",
              align: "center"
            }
          ],
          [
            {
              prop: "name",
              label: "服务名称",
              width: "250px",
              align: "left",
              type: "href",
              id: "id"
            },
            {
              prop: "data_service_type1_name",
              label: "服务类型",
              width: "120px",
              align: "center"
            },
            {
              prop: "apply_time",
              label: "申请时间",
              width: "200px",
              align: "center"
            },
            {
              prop: "approval_status",
              label: "申请审批状态",
              width: "110px",
              align: "center"
            }
          ],
          [
            {
              prop: "Workplace",
              label: "工作区域",
              width: "150px",
              align: "left"
            },
            {
              prop: "network",
              label: "网络环境",
              width: "120px",
              align: "center"
            },
            {
              prop: "Cpu",
              label: "CPU(核)",
              width: "90px",
              align: "center"
            },
            {
              prop: "Memory",
              label: "内存(GB)",
              width: "90px",
              align: "center"
            },
            {
              prop: "pan",
              label: "数据盘(块/GB)",
              width: "120px",
              align: "center"
            },
            {
              prop: "statename",
              label: "申请状态",
              width: "110px",
              align: "center"
            }
          ]
        ],
        [
          [
            {
              prop: "name",
              label: "服务名称",
              width: "140px",
              align: "left",
              type: "href",
              id: "id"
            },
            {
              prop: "data_service_type1_name",
              label: "服务类型",
              width: "120px",
              align: "center"
            },
            {
              prop: "create_time",
              label: "注册发布时间",
              width: "180px",
              align: "center"
            },
            {
              prop: "request_count",
              label: "被调用次数",
              width: "110px",
              align: "center"
            }
          ],
          [
            {
              prop: "name",
              label: "服务名称",
              width: "140px",
              align: "left",
              type: "href",
              id: "service_apply_info.id"
            },
            {
              prop: "data_service_type1_name",
              label: "服务类型",
              width: "120px",
              align: "center"
            },
            {
              prop: "approval_time",
              label: "审批时间",
              width: "180px",
              align: "center"
            },
            {
              prop: "approval_status",
              label: "审批状态",
              width: "110px",
              align: "center"
            }
          ],
          [
            {
              prop: "Workplace",
              label: "工作区域",
              width: "100px",
              align: "left"
            },
            {
              prop: "network",
              label: "网络环境",
              width: "90px",
              align: "center"
            },
            {
              prop: "Cpu",
              label: "CPU(核)",
              width: "80px",
              align: "center"
            },
            {
              prop: "Memory",
              label: "内存(GB)",
              width: "80px",
              align: "center"
            },
            {
              prop: "pan",
              label: "数据盘(块/GB)",
              width: "120px",
              align: "center"
            },
            {
              prop: "sqzt",
              label: "操作",
              width: "80px",
              align: "center",
              type: "Button",
              btnList: [
                {
                  label: "分配",
                  type: "distribut"
                },
                // {
                //   label: "已分配"
                // }
              ]
            }
          ]
        ],
        [
          [
            {
              prop: "name",
              label: "服务名称",
              width: "140px",
              align: "left",
              type: "href",
              id: "id"
            },
            {
              prop: "data_service_type1_name",
              label: "服务类型",
              width: "120px",
              align: "center"
            },
            {
              prop: "create_time",
              label: "注册发布时间",
              width: "180px",
              align: "center"
            },
            {
              prop: "request_count",
              label: "被调用次数",
              width: "110px",
              align: "center"
            }
          ],
          [
            {
              prop: "name",
              label: "服务名称",
              width: "140px",
              type: "href",
              id: "service_apply_info.id",
              align: "left"
            },
            {
              prop: "data_service_type1_name",
              label: "服务类型",
              width: "120px",
              align: "center"
            },
            {
              prop: "approval_time",
              label: "审批时间",
              width: "180px",
              align: "center"
            },
            {
              prop: "approval_status",
              label: "审批状态",
              width: "110px",
              align: "center"
            }
          ],
          [
            {
              prop: "department_name",
              label: "所属组织",
              width: "170px",
              align: "left"
            },
            {
              prop: "cpu",
              label: "CPU使用量(核)",
              width: "120px",
              align: "center"
            },
            {
              prop: "memory",
              label: "内存使用量(GB)",
              width: "130px",
              align: "center"
            },
            {
              prop: "container",
              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_count",
            num: ""
          },
          {
            text: "应用总数",
            pic: require("../../assets/imgs/ic_yingyongzs_blue.png"),
            bg: "#e5f4fe",
            color: "#38aef9",
            type: "app_count",
            num: ""
          },
          {
            text: "工作区域",
            pic: require("@/assets/imgs/ic_gongzuoquyu.png"),
            bg: "#e7fdfc",
            color: "#25bdb1",
            type: "workplace_count",
            num: ""
          }
        ],
        [
          {
            text: "组织用户数",
            pic: require("@/assets/imgs/ic_yonghuzs.png"),
            bg: "#e6ebfe",
            color: "#515fe7",
            type: "org_user",
            num: ""
          },
          {
            text: "服务总数",
            pic: require("@/assets/imgs/ic_fuwuzs.png"),
            bg: "#e5f4fe",
            color: "#38aef9",
            type: "service_count",
            num: ""
          },
          {
            text: "应用总数",
            pic: require("@/assets/imgs/ic_yingyongzs.png"),
            bg: "#e7fdfc",
            color: "#25bdb1",
            type: "app_count",
            num: ""
          },
          // {
          //   text: "交易总额",
          //   pic: require("@/assets/imgs/ic_shouyize.png"),
          //   bg: "rgb(255,242,226)",
          //   color: "#ea7d19",
          //   type: "trade_money",
          //   num: ""
          // }
        ],
        [
          {
            text: "用户总数",
            pic: require("@/assets/imgs/ic_yonghuzs.png"),
            bg: "#e6ebfe",
            color: "#515fe7",
            type: "total_user",
            num: ""
          },
          {
            text: "服务总数",
            pic: require("@/assets/imgs/ic_fuwuzs.png"),
            bg: "#e5f4fe",
            color: "#38aef9",
            type: "service_count",
            num: ""
          },
          {
            text: "应用总数",
            pic: require("@/assets/imgs/ic_yingyongzs.png"),
            bg: "#e7fdfc",
            color: "#25bdb1",
            type: "app_count",
            num: ""
          },
          // {
          //   text: "交易总额",
          //   pic: require("@/assets/imgs/ic_shouyize.png"),
          //   bg: "rgb(255,242,226)",
          //   color: "#ea7d19",
          //   type: "trade_money",
          //   num: ""
          // }
        ]
      ],
      online_tool_arr: [
        // {
        //   text: "智能制图",
        //   pic: require("@/assets/imgs/home_tool_ic_znht.png"),
        //   bg: "#e5f4fe",
        //   color: "#38aef9",
        //   url: "/vmap/#/map",
        //   target: 1
        // },
        // {
        //   text: "流程设计",
        //   pic: require("@/assets/imgs/home_tool_ic_lcsj.png"),
        //   bg: "#e6ebfe",
        //   color: "#515fe7",
        //   url: "/apaas/ui/#/progress",
        //   // url: "/lcyq/ui/#/process/model", 
        //   target: 1
        // },
        // {
        //   text: "可视化图表",
        //   pic: require("@/assets/imgs/home_tool_ic_kshbb.png"),
        //   bg: "#fff2e2",
        //   color: "#ea7d19",
        //   url: "/iam/api/bi/token",
        //   target: 1
        // },
        // {
        //   text: "应用创新",
        //   pic: require("@/assets/imgs/home_tool_ic_yycx.png"),
        //   bg: "#e7fdfc",
        //   color: "#25bdb1",
        //   url: "/app_build",
        // },
        // {
        //   text: "搜索引擎",
        //   pic: require("@/assets/imgs/home_tool_ic_ssyq.png"),
        //   bg: "#f1f1f3",
        //   color: "#58617a",
        //   url:'/search_engine',
        // },
      ],
      service_arr: [
        ["服务列表", "申请服务", "云资源"],
        ["服务列表", "服务审批", "云资源管理"],
        ["服务列表", "服务审批", "云资源管理"]
      ],
      apptype_arr: [
        ["应用仓库", "部署的应用"],
        ["应用仓库", "应用审批"],
        ["应用仓库", "应用审批"]
      ],
      app_arr: [],
      service_app_count: {},
      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_message.png"),
          text: "消息与推送管理",
          role: 2,
          url: "/message/recommended"
        },
        {
          pic: require("@/assets/imgs/home_tool_ic_rongqiyun.png"),
          text: "容器微服务管理",
          role: 2,
          url: "/awecloud/ui/#/"
        },
      ]
    };
  },
  components: {
    tableUm,
    ListPagination,
    dashBoard,
    allotInfoConfirm
  },
  computed: {
    ...mapGetters(["level"]),
    ...mapState(["userInfo"])
  },
  created() {
    this.$nextTick(() => {
      this.manage_arr[this.manage_arr.length - 1].url = cloudServiceRoot;
      console.log(this.manage_arr)
    })
  },
  mounted() {
    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();
    }
    if (state != "needLogin") {
      this.online_tool_arr.splice(0,1)
    }
    this.getNowMenu()
  },
  methods: {
    getNowMenu() {
      this.$api.general.getNowMenu({ teamName: "APAAS3" }).then(response => {
        if (response.data.success == 1) {
          let arr =
            (response.data.data[0] && response.data.data[0].Child) || [];
          if(arr && arr.length > 0){
            let workplace_index = arr.findIndex(
              item => item.visit_url == "/workplace"
            );
            let zxzjgz_index = arr[workplace_index].Child.findIndex(
              item => item.visit_url == "/zxzjgz"
            );
            var menuList =  arr[workplace_index].Child[zxzjgz_index].Child
            var new_online_tool_arr  = [];
            if(menuList && menuList.length > 0){
              for(var i=0;i<menuList.length;i++){
                console.log(menuList[i])
                if(menuList[i].menu_name == '智能制图'){
                  new_online_tool_arr.push({
                      text:menuList[i].menu_name,
                      pic: require("@/assets/imgs/home_tool_ic_znht.png"),
                      bg: "#e5f4fe",
                      color: "#38aef9",
                      url: menuList[i].visit_url,
                      target: 1
                  })
                }else if(menuList[i].menu_name == '流程设计'){
                  new_online_tool_arr.push({
                    text: menuList[i].menu_name,
                    pic: require("@/assets/imgs/home_tool_ic_lcsj.png"),
                    bg: "#e6ebfe",
                    color: "#515fe7",
                    url: menuList[i].visit_url,
                    target: 1
                  })
                }else if(menuList[i].menu_name == '可视化图表'){
                  new_online_tool_arr.push({
                    text:menuList[i].menu_name,
                    pic: require("@/assets/imgs/home_tool_ic_kshbb.png"),
                    bg: "#fff2e2",
                    color: "#ea7d19",
                    url: menuList[i].visit_url,
                    target: 1
                  })
                }else if(menuList[i].menu_name == '应用创新'){
                  new_online_tool_arr.push({
                    text:menuList[i].menu_name,
                    pic: require("@/assets/imgs/home_tool_ic_yycx.png"),
                    bg: "#e7fdfc",
                    color: "#25bdb1",
                    url:menuList[i].visit_url,
                  })
                }else if(menuList[i].menu_name == '搜索引擎'){
                    new_online_tool_arr.push({
                    text: menuList[i].menu_name,
                    pic: require("@/assets/imgs/home_tool_ic_ssyq.png"),
                    bg: "#f1f1f3",
                    color: "#58617a",
                    url:menuList[i].visit_url,
                  })
                }
              }
            }
            this.online_tool_arr = new_online_tool_arr;
          }
        }
      });
    },
    //鼠标所在在线工具位置
    change_now_online(n,m){
      if((n||n==0)&&(m||m==0)){
        this.$set(this.now_online_box,0,n)
        this.$set(this.now_online_box,1,m)
      }else{
        this.now_online_box = []
      }
    },
    enter_online_tool(index){
      this.now_online = index
    },
    leave_online_tool(){
      this.now_online = -1
    },
    gotopage(id, deploy) {
      if (deploy) {
        console.log(id)
        this.$router.push(this.detailsUrl1[0][1] + deploy + "?app_id=" + id);
      } else {
        this.$router.push(this.detailsUrl1[0][0] + id);
      }
    },
    change_now_app(val) {
      this.now_app = val;
      this.currentPage1 = 1;
      this.get_app_list();
    },
    change_now_type(val) {
      this.now_type = val;
      this.currentPage = 1;
      this.get_service_list();
    },
    changeCurrentPage(value) {
      this.currentPage = value;
      this.get_service_list();
    },
    changeCurrentPage1(value) {
      this.currentPage1 = value;
      this.get_app_list();
    },
    get_app_list() {
      this.$http
        .get(
          `${this.app_url_arr[this.now_user][this.now_app]}?page=${
            this.currentPage1
          }&limit=${
            this.now_user == 0 || this.now_user == 4 ? 10000 : this.pageSize
          }`
        )
        .then(response => {
          if (!response.data.success) {
            return;
          }
          let data = response.data.data;
          if (this.now_user == 0 || this.now_user == 4) {
            this.app_arr = data;
          } else {
            this.app_data = data;
            this.app_data.forEach(e => {
              if (e.create_date&&e.create_date!=='0001-01-01T00:00:00Z') {
                e.create_date = e.create_date.split(".")[0].replace("T", " ");
              }else{
                e.create_date = ''
              }
              if (e.time&&e.time!=='0001-01-01T00:00:00Z') {
                e.time = e.time.split(".")[0].replace("T", " ");
              }else{
                e.time = ''
              }
            });
            this.listTotal1 = response.data.total;
          }
        });
    },
    goto_online_page(url,index,idx,target){
      if(url){
        if (target==1) {
          window.open(url);
        } else {
          this.$router.push(url);
        }
      }
    },
    get_service_list() {
      this.$http
        .get(
          `${this.service_url_arr[this.now_user][this.now_type]}?page=${
            this.currentPage
          }&size=${this.pageSize}&limit=${this.pageSize}`
        )
        .then(response => {
          console.log(response);
          if (!response.data.success) {
            return;
          }
          let data = response.data.data;
          if(this.now_type==2){
            this.listTotal = data.total;
            let arr = data.data || []; 
            arr.forEach(e => {
              if(e.DiskList&&e.DiskList.length){
                e['pan'] = e.DiskList.join(';')
              }
              if(e.State||e.State==0){
                e['statename'] = e.State==1?'审核通过':e.State==0?'待审核':'拒绝'
              }
              if(e.NetworkEnv||e.NetworkEnv==0){
                e['network'] = e.NetworkEnv==0?'外网':'政府内网'
              }

              
            });
            this.service_data = arr
          }else{
            let arr = data.data || []; 
            this.service_data = arr;
            this.service_data.forEach(e => {
              if (e.create_time&&e.create_time!=='0001-01-01T00:00:00Z') {
                e.create_time = helper.dateStringTransform(e.create_time)
              }else{
                e.create_time = ''
              }

              if (e.service_apply_info && e.service_apply_info.approval_time&& e.service_apply_info.approval_time!=='0001-01-01T00:00:00Z') {
                e.approval_time = helper.dateStringTransform(
                  e.service_apply_info.approval_time
                );
              } else {
                e.approval_time = "";
              }

              if (e.service_apply_info && e.service_apply_info.apply_time&& e.service_apply_info.apply_time!=='0001-01-01T00:00:00Z') {
                e.apply_time = helper.dateStringTransform(
                  e.service_apply_info.apply_time
                );
              } else {
                e.apply_time = "";
              }

              if (e.service_apply_info && e.service_apply_info.approval_status&& e.service_apply_info.approval_status!=='0001-01-01T00:00:00Z') {
                if (this.now_user !== 0 && this.now_user !== 4) {
                  e.approval_status = ["-", "已审批", "待审批"][
                    e.service_apply_info.approval_status
                  ];
                } else {
                  e.approval_status = [
                    "-",
                    "待审批",
                    "审批中",
                    "审批通过",
                    "审批未通过"
                  ][e.service_apply_info.approval_status];
                }
              } else {
                e.approval_status = "";
              }

              if (e.service_apply_info && e.service_apply_info.id != "") {
                e.id = e.service_apply_info.id;
              }
            });
            this.listTotal = data.total;
          }
          
        })
        .catch(function(response) {});
    },
    init_func() {
      this.getInfoData();
      this.get_service_list();
      this.get_app_list();
      this.getUserData();
      if (this.now_user == 0 || this.now_user == 4) {
        this.getHealth();
        this.getoperatingdata();
        this.get_work_place()
      } else if (this.now_user == 1) {
        this.getHealth();
        this.getoperatingdata();
        this.getappusedata();
      } else if (this.now_user == 2) {
        this.getoperatingdata();
        this.getfwlxdata();
        this.getyylxdata();
      }
    },
    get_work_place(){
      this.$http
        .get("/apaas/service/v3/workplace/statistics/resource/workplace")
        .then(response => {
          if(response.data.success){
            this.work_options=response.data.data
            this.work_value=response.data.data[0].id
            this.get_resource()
          }
        })
    },
    get_resource(){
      this.$http
        .get("/apaas/service/v3/workplace/statistics/resource/basic?work_id="+this.work_value)
        .then(response => {
          if(response.data.success){
            this.cpu_data={
              data: parseInt(response.data.data.cpu.used/response.data.data.cpu.total*100),
              text: "CPU已使用",
              all:response.data.data.cpu.total,
              remaining:response.data.data.cpu.total-response.data.data.cpu.used
            }
            this.memory_data={
              data: parseInt(response.data.data.memory.used/response.data.data.memory.total*100),
              text: "内存已使用",
              all:response.data.data.memory.total,
              remaining:response.data.data.memory.total-response.data.data.memory.used
            }
            this.pan_data={
              data: response.data.data.disk.used==-1?0:parseInt(response.data.data.disk.used/response.data.data.disk.total*100),
              text: "数据盘已使用",
              all:response.data.data.disk.total,
              remaining:response.data.data.disk.used==-1?-1:response.data.data.disk.total-response.data.data.disk.used
            }
            this.pod_data={
              data: parseInt(response.data.data.container.used/response.data.data.container.total*100),
              text: "容器组已使用",
              all:response.data.data.container.total,
              remaining:response.data.data.container.total-response.data.data.container.used
            }
          }
        })
    },
    getCurrentUser() {
      this.$api.user.getNowUser().then(({ data }) => {
        if (data.success == 1) {
          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.picture_path = this.userInfo.picture_path;
      this.person = this.userInfo.user_name;
      this.login_time = decodeURIComponent(getCookie("lastLogin")).replace(
        "+",
        " "
      );
    },
    getoperatingdata() {
      this.$http
        .get("/apaas/service/v3/workplace/statistics/business")
        .then(response => {
          console.log(response);
          let data = response.data.data;
          this.init_yy(
            data.xarr,
            data.service_yarr,
            data.app_yarr,
            data.get_yarr
          );
        })
        .catch(function(response) {});
    },
    change_service_app(val) {
      console.log(val);
      if (val == 0) {
        this.init_fwyy(
          this.service_app_count.serviceData.xAxisData,
          this.service_app_count.serviceData.seriesData,
          val
        );
      } else {
        this.init_fwyy(
          this.service_app_count.appData.xAxisData,
          this.service_app_count.appData.seriesData,
          val
        );
      }
    },
    getappusedata() {
      this.$http
        .get("/apaas/service/v3/workplace/statistics/serviceapp/count/trend")
        .then(response => {
          console.log(response);
          let data = response.data.data;
          this.service_app_count = data;
          this.init_fwyy(
            this.service_app_count.serviceData.xAxisData,
            this.service_app_count.serviceData.seriesData,
            this.fw_value
          );
        })
        .catch(function(response) {});
    },
    getfwlxdata() {
      this.$http
        .get("/apaas/service/v3/workplace/statistics/service/type")
        .then(response => {
          console.log(response);
          let data = response.data.data;
          this.init_fwlx_asy(data.seriesData);
        })
        .catch(function(response) {});
    },
    getyylxdata() {
      this.$http
        .get("/apaas/hubApi/index/appTypesAnalysis")
        .then(response => {
          console.log(response);
          if (response.data.success) {
            let data = response.data.data;
            this.init_yylx_asy(data.series[0].data);
          }
        })
        .catch(function(response) {});
    },
    getHealth() {
      this.$http
        .get("/apaas/service/v3/workplace/statistics/health/status")
        .then(response => {
          console.log(response);
          let data = response.data.data;
          var temp = 0
          if(data.seriesData[0].value + data.seriesData[1].value==0){
            temp = 0
          }else{
            temp = Math.round(
              (data.seriesData[0].value /
                (data.seriesData[0].value + data.seriesData[1].value)) *
                100
            );
          }
          console.log(temp);
          this.init_health(temp);
        })
        .catch(function(response) {});
    },
    getInfoData() {
      this.$http
        .get("/apaas/service/v3/workplace/statistics/basic")
        .then(response => {
          console.log(response);
          let data = response.data.data;
          this.menu_arr[this.now_user].forEach((e, idx) => {
            if (data[e.type] || data[e.type] == 0) {
              this.$set(this.menu_arr[this.now_user][idx], "num", data[e.type]);
            }
          });
        })
        .catch(function(response) {});
    },
    allotSuccess() {
      // this.init(this.tempFliter);
      this.get_service_list()
    }, 
    //分配接口调用
    distribut(val) {
      console.log(val);
      this.$refs.allotConfirm.getDetail(val.ApplyId);
    },
    manage_func(n) {
      console.log(n);
      if(n.indexOf('http')!==-1){
        window.location.href = n
      }else{
        this.$router.push(n);
      }
    },
    init_health(num) {
      var options = {
        color:['#e56600','#c9cedd'],
        title: {
          text: num + "{a|%}",
          textStyle: {
            color: "#000",
            fontSize: 40,
            fontWeight: 200,
            rich: {
                a: {
                  fontSize: 14,
                  padding: [0, 0, 10, 0]
                }
              }
          },
          subtext: "健康占比",
          subtextStyle: {
            color: "#707693"
          },
          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: 'pie',
        z:5,
        center:['50%','50%'],
        radius:['68%','72%'],
        silent:true,
        label: {
            normal: {
                show: false
            },
            emphasis: {
                show: false
            }
        },
        labelLine: {
            normal: {
                show: false
            },
            emphasis: {
                show: false
            }
        },
        tooltip: {
            show: false
        },
        data:[{
          name:'',
          value:num
        },{
          name:'',
          value:100 - num
        }]
    },
          {
        type:'pie',
        z:4,
        center:['50%','50%'],
        radius:['60%','80%'],
        hoverAnimation:false,
        avoidLabelOverlap: false,
        label: {
            normal: {
                show: false
            },
            emphasis: {
                show: false
            }
        },
        labelLine: {
            normal: {
                show: false
            },
            emphasis: {
                show: false
            }
        },
        tooltip: {
            show: false
        },
        itemStyle: {
            normal: {
                color:'#f6f7fc'
            }
        },
        emphasis:{
            show:false,
            itemStyle:{
                color:'#f6f7fc'
            }
        },
        data: [{
            value: 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_val) {
      // var data_val = data_val;
      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", "#44a072"];
      var legendarr = [];
      var temp2_data = 0;
      data_val.forEach(e => {
        temp2_data = temp2_data + e.value;
      });
      for (var i = 0; i < data_val.length; i++) {
        data.push(
          {
            value: data_val[i].value,
            name: data_val[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                // shadowBlur: 20,
                borderColor: color[i],
                // shadowColor: color[i]
              }
            }
          },
          {
            value: temp2_data / 20,
            name: "",
            itemStyle: placeHolderStyle
          }
        );
        legendarr.push(data_val[i].name);
      }
      var seriesObj = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [44, 46],
          center: ["50%", "45%"],
          z:5,
          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 < data_val.length; i++) {
                    total += data_val[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== "") {
                    return params.name + "\n" + params.value + "个";
                  } else {
                    return "";
                  }
                },
                rich: rich
              }
            }
          },
          data: data
        },
        {
        type:'pie',
        z:4,
        center:['50%','45%'],
        radius:['36%','54%'],
        hoverAnimation:false,
        avoidLabelOverlap: false,
        label: {
            normal: {
                show: false
            },
            emphasis: {
                show: false
            }
        },
        labelLine: {
            normal: {
                show: false
            },
            emphasis: {
                show: false
            }
        },
        tooltip: {
            show: false
        },
        itemStyle: {
            normal: {
                color:'#f6f7fc'
            }
        },
        emphasis:{
            show:false,
            itemStyle:{
                color:'#f6f7fc'
            }
        },
        data: [{
            value: 1,
        }],
    }
      ];

      var options = {
        color: color,
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
        },
        // legend: {
        //   bottom: -5,
        //   left: "center",
        //   itemWidth: 10,
        //   itemHeight: 10,
        //   orient: "horizontal",
        //   data: legendarr,
        //   backgroundColor: "#f4f7fc",
        //   borderRadius:8
        // },
        toolbox: {
          show: false
        },

        series: seriesObj
      };
      return options;
    },
    init_yy(xarr, service, app, get) {
      var colors = ["#e56600", "#f2f2f2", "#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",
          borderRadius:8
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true
            },
            data: xarr,
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
              color:'#0d1847'
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            min: 0,
            position: "right",
            splitLine: {
              lineStyle: {
                  type: "solid",
                  color: colors[1]
                  }
              },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
              color:'#a9aec0'
            }
          },
          {
            type: "value",
            name: "",
            min: 0,
            position: "left",
            splitLine: {
              lineStyle: {
                  type: "solid",
                  color: colors[1]
                  }
              },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
              color:'#a9aec0'
            }
          }
        ],
        series: [
          {
            name: "收益总额",
            type: "line",
            yAxisIndex: 0,
            data: get,
            itemStyle: {
              color: colors[0]
            },
            symbol: "circle"
          },
          {
            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
          },
          
        ]
      };
      window[this.yy_asy] = echarts.init(document.getElementById(this.yy_asy));
      window[this.yy_asy].setOption(options, true);
    },
    init_fwyy(xarr, yarr, n) {
      var dataname = ["服务总数", "应用总数"];
      var options = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              backgroundColor: "#fff"
            }
          }
        },
        legend: {
          data: [dataname[n]],
          itemWidth: 14,
          itemHeight: 10,
          bottom: 0,
          backgroundColor: "#f4f7fc",
          borderRadius:8
        },
        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[n],
            smooth: true,
            sampling: "average",
            symbol: "circle",
            itemStyle: {
              color: "#0a92c4"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(10,146,196,0.3)"
                },
                {
                  offset: 1,
                  color: 'rgba(255,255,255,0.3)'
                }
              ])
            }
          }
        ]
      };
      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;
  border-radius: 4px;
}
.data_charts_left .cloud_asy .el-input__inner {
  width: 150px;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  border-radius: 4px;
}
.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 rgba(15, 19, 65, 0.05);
  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;
  margin-top: -8px;
}
.person_text span{
  vertical-align: 4px;
  font-size: 16px;
  color: #58617a;
}
.person_text img {
  border-radius: 21px;
  margin-right: 10px;
  vertical-align: -10px;
  border: 2px solid #e3e5ef;
  
}
.person_menu {
  float: right;
  width: 100px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background-color: #e56600;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  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: 70px;
}
.menu_text p {
  text-align: right;
  font-size: 16px;
  color: #242c43;
}

.case_box {
  width: 100%;
  padding-bottom: 5px;
}
.case_box:after,.case_box:before{
  content: "";
  display: table;
}
.case_box:after{
    clear: both;
}
.data_asy {
  width: 720px;
  float: left;
  margin-right: 20px;
}
.data_charts {
  width: 720px;
  height: 270px;
  background-color: #ffffff;
  box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.05);
  border-radius: 12px;
  padding: 20px;
  overflow: hidden;
  position: relative;
}
.check_charts{
  position: absolute;
  bottom: 15px;
  left: 50%;
  width: 50px;
  margin-left: -25px;
}
.check_charts_btn{
  width: 20px;
	height: 5px;
	background-color: #e3e5ef;
	border-radius: 3px;
  cursor: pointer;
  float: left;
}
.check_charts .check_charts_btn:nth-of-type(1){
  margin-right: 10px;
}
.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: 10px 0 0 0px;
}
.health p{
  width: 130px;
  padding-left: 10px;
}
.health p:nth-of-type(1){
  margin-top: -15px;
}
.health p span{
  display: inline;
  background-color: #fff;
  width: auto;
  height: auto;
  font-size: 14px;
  color: #8890a7;
}
.health p span:nth-of-type(2){
  float: right;
  color: #0d1847;
}
.yy_asy {
  width: 420px;
  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 rgba(15, 19, 65, 0.05);
  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;
  cursor: pointer;
  margin-bottom: 15px;
}
.online_contain .online_box:nth-child(3n) {
  margin-right: 0px;
}
.online_box img {
  vertical-align: -4px;
  margin-right: 10px;
}
.online_box:hover{
  height: auto;
  border-radius: 6px;
  overflow: hidden;
}
.online_box .online_child{
  margin-bottom: 0;
  border-radius:0;
}
.online_child_box{
  display: none;
}
.online_box:hover .online_child_box{
  display: block;
}
.myservice,
.myapp {
  width: 100%;
  height: 386px;
  background-color: #ffffff;
  box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.05);
  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;
  font-weight: 600;
  padding-top: 5px;
}
.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;
  cursor: pointer;
}
.myapp_box img{
  border-radius: 8px;
  border: solid 3px #f6f7fb;
}
.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: 155px;
  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;
}
.charts_box{
  width: 1440px;
  transition: all 0.2s;
}
.enter_btn{
  display: inline-block;
  background-image: url('../../assets/imgs/home_btn_enter.png');
  width: 28px;
  height: 28px;
  background-size: 100%;
  vertical-align: -9px;
  cursor: pointer;
  margin-left: 5px;
}
.enter_btn:hover{
  background-image: url('../../assets/imgs/home_btn_enter_hov.png');
}
</style>
