<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2022-11-03 19:25:52
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-07-11 19:30:19
 * @FilePath: \yuan-huoling-browser\src\views\digitalAssets\networkAssets\webAsset\detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="yaBox">
    <div class="ya-header">
      <div class="ya-header-bottom">
        <div class="ya-header-row">
          <div class="ya-header-bottom-item ya-box">
            <img
              src="../../../../assets/imgs/dagao.png"
              alt=""
              v-if="headerObj.riskLevel == 'high'"
            />
            <img
              src="../../../../assets/imgs/dazhong.png"
              v-else-if="headerObj.riskLevel == 'middle'"
              alt=""
            />
            <img
              src="../../../../assets/imgs/dadi.png"
              alt=""
              v-else-if="headerObj.riskLevel == 'low'"
            />
            <img
              src="../../../../assets/imgs/safe.png"
              alt=""
              v-else-if="headerObj.riskLevel == 'safe'"
            />
            <img src="../../../../assets/imgs/unknow.png" alt="" v-else />
            <div class="ya-img-right">
              <div class="ya-header-bottom-item-top">IPv4 / IPv6</div>
              <div class="ya-header-bottom-item-bottom">
                <div class="ya-ipv-high" v-if="headerObj.riskLevel == 'high'">
                  {{ headerObj.ipv4 || "-" }} / {{ headerObj.ipv6 || "-" }}
                </div>
                <div
                  class="ya-ipv-middle"
                  v-else-if="headerObj.riskLevel == 'middle'"
                >
                  {{ headerObj.ipv4 || "-" }} / {{ headerObj.ipv6 || "-" }}
                </div>
                <div
                  class="ya-ipv-low"
                  v-else-if="headerObj.riskLevel == 'low'"
                >
                  {{ headerObj.ipv4 || "-" }} / {{ headerObj.ipv6 || "-" }}
                </div>
                <div
                  class="ya-ipv-safe"
                  v-else-if="headerObj.riskLevel == 'safe'"
                >
                  {{ headerObj.ipv4 || "-" }} / {{ headerObj.ipv6 || "-" }}
                </div>
                <div class="ya-ipv-unknown" v-else>
                  {{ headerObj.ipv4 || "-" }} / {{ headerObj.ipv6 || "-" }}
                </div>
              </div>
            </div>
          </div>
          <div class="ya-header-bottom-item">
            <div class="ya-header-bottom-item-top">域名</div>
            <div class="ya-header-bottom-item-bottom" style="max-width: 135px">
              <CustomTooltip
                :show="true"
                :text="headerObj.domain || '-'"
                placement="top"
                hideAfter="200"
              >
              </CustomTooltip>
            </div>
          </div>
          <div class="ya-header-bottom-item">
            <div class="ya-header-bottom-item-top">资产名称</div>
            <div class="ya-header-bottom-item-bottom" style="max-width: 112px">
              <CustomTooltip
                placement="top"
                :show="true"
                :text="headerObj.name || '-'"
                hideAfter="200"
              >
              </CustomTooltip>
            </div>
          </div>
          <div class="ya-header-bottom-item">
            <div class="ya-header-bottom-item-top">网络域</div>
            <div class="ya-header-bottom-item-bottom">
              {{ headerObj.networkAreaName || "-" }}
            </div>
          </div>
          <div class="ya-header-bottom-item">
            <div class="ya-header-bottom-item-top">资产类型</div>
            <div class="ya-header-bottom-item-bottom">
              {{ headerObj.assetTypeName || "-" }}
            </div>
          </div>
          <div class="ya-header-bottom-item">
            <div class="ya-header-bottom-item-top">操作系统</div>
            <div class="ya-header-bottom-item-bottom">
              {{ headerObj.os || "-" }}
            </div>
          </div>
          <div class="ya-header-bottom-item">
            <div class="ya-header-bottom-item-top">采集方式</div>
            <div class="ya-header-bottom-item-bottom">
              {{ headerObj.gatherType || "-" }}
            </div>
          </div>
          <div class="ya-header-bottom-item">
            <div class="ya-header-bottom-item-top">资产状态</div>
            <div class="ya-header-bottom-item-bottom">
              <div class="ya-alive" v-if="headerObj.assetStatus == 'survive'">
                存活
              </div>
              <div
                class="ya-abnormal"
                v-else-if="headerObj.assetStatus == 'abnormal'"
              >
                异常
              </div>
              <div
                class="ya-offline"
                v-else-if="headerObj.assetStatus == 'offLine'"
              >
                离线
              </div>
              <div v-else>-</div>
            </div>
          </div>
          <div class="ya-header-bottom-item">
            <div class="ya-header-bottom-item-top">资产标签</div>
            <div class="ya-header-bottom-item-bottom">
              <div
                class="ya-tag"
                v-if="
                  headerObj.assetTagNameSet &&
                  headerObj.assetTagNameSet.length > 0
                "
              >
                <div class="ya-tag1" v-if="headerObj.assetTagNameSet[0]">
                  {{ headerObj.assetTagNameSet[0] }}
                </div>
                <div class="ya-tag2" v-if="headerObj.assetTagNameSet[1]">
                  {{ headerObj.assetTagNameSet[1] }}
                </div>
                <div class="ya-tag3" v-if="headerObj.assetTagNameSet[2]">
                  {{ headerObj.assetTagNameSet[2] }}
                </div>
                <template v-if="headerObj.assetTagNameSet.length - 3 > 0">
                  <div
                    class="ya-num"
                    v-for="(item, index) in headerObj.assetTagNameSet.slice(3)"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </template>
              </div>

              <div v-else>-</div>
            </div>
          </div>
          <div class="ya-header-bottom-item">
            <div class="ya-header-bottom-item-top">所属部门</div>
            <div class="ya-header-bottom-item-bottom">
              {{ headerObj.deptName || "-" }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="yaContent">
      <div class="ya-content-item">
        <yaTableList
          :column="assetInfoData"
          title="资产详情信息"
          :type="assetDetailData.assetData.type"
        >
          <template v-slot:address="{ item }">
            <div class="ya-address" v-if="item.content">
              <img src="../../../../assets/image/icon-position.png" alt="" />{{
                item.content
              }}
            </div>
            <div v-else>-</div>
          </template>
        </yaTableList>
      </div>
      <div class="ya-content-item">
        <yaTableList
          title="远程扫描信息"
          :tabList="scanTabList"
          :type="remoteScanType"
          :column="remoteScan"
          :data="scanData"
          :handleChangeTab="handleChangeScan"
          :tabIndex="remoteScanIndex"
          :page="pageScan"
          :pageSize="pageSizeScan"
          :handlePageSizeChange="handlePageSizeChangeScan"
          :handlePageChange="handlePageChangeScan"
          :total="totalScan"
        ></yaTableList>
      </div>
      <div class="ya-content-item">
        <yaTableList
          title="登录采集/Agent采集信息"
          :tabList="loginTabList"
          :type="loginCollectType"
          :column="loginColumn"
          :data="loginCollectData"
          :handleChangeTab="handleChangeLogin"
          :tabIndex="loginCollectIndex"
          :page="pageLogin"
          :pageSize="pageSizeLogin"
          :handlePageSizeChange="handlePageSizeChangeLogin"
          :handlePageChange="handlePageChangeLogin"
          :total="totalLogin"
        >
          <template v-slot:natList></template>
        </yaTableList>
      </div>
      <div class="ya-content-item" id="ya-detail">
        <div class="ya-content-item-top">
          性能监测
          <div class="ya-img">
            <el-icon style="font-size: 12px; color: #333"
              ><ArrowUpBold
                v-show="perforceTest"
                @click="perforceTest = !perforceTest" /><ArrowDownBold
                v-show="!perforceTest"
                @click="perforceTest = !perforceTest"
            /></el-icon>
          </div>
        </div>
        <div class="ya-content-item-bottom" v-show="perforceTest">
          <div class="ya-performance-item">
            <CommonCardVue title="CPU使用率(%)" class="custom-row-item">
              <LineChart
                v-if="cpuLineChartData && cpuLineChartData.length"
                :colors="['#208AED', '#0095FF', '#3EC18C']"
                :isShowSide="true"
                :chartData="cpuLineChartData"
                :xAxisData="linexAxisData"
                :areaGradientColor="cpuAreaGradientColor"
                :boundaryGap="true"
              />
              <ya-empty v-else></ya-empty>
            </CommonCardVue>
          </div>
          <div class="ya-performance-item">
            <CommonCardVue title="内存使用率(%)" class="custom-row-item">
              <LineChart
                v-if="memoryLineChartData && memoryLineChartData.length"
                :colors="['#F28A0F', '#F18301', '#3EC18C']"
                :isShowSide="true"
                :chartData="memoryLineChartData"
                :xAxisData="linexAxisData"
                :areaGradientColor="memoryAreaGradientColor"
                :boundaryGap="true"
              />
              <ya-empty v-else></ya-empty>
            </CommonCardVue>
          </div>
          <div class="ya-performance-item">
            <CommonCardVue title="IO使用率(%)" class="custom-row-item">
              <LineChart
                v-if="ioLineChartData && ioLineChartData.length"
                :colors="['#48AE50', '#2FCB96', '#3EC18C']"
                :isShowSide="true"
                :chartData="ioLineChartData"
                :xAxisData="linexAxisData"
                :areaGradientColor="ioAreaGradientColor"
                :boundaryGap="true"
              />
              <ya-empty v-else></ya-empty>
            </CommonCardVue>
          </div>
        </div>
      </div>
      <div
        class="ya-content-item"
        id="ya-detail"
        v-if="globSettingData.system !== 'base'"
      >
        <div class="ya-content-item-top">
          风险详情(共{{ (riskDetailObj && riskDetailObj.length) || 0 }}条)
          <div class="ya-img">
            <el-icon style="font-size: 12px; color: #333"
              ><ArrowUpBold
                v-show="riskDetail"
                @click="riskDetail = !riskDetail" /><ArrowDownBold
                v-show="!riskDetail"
                @click="riskDetail = !riskDetail"
            /></el-icon>
          </div>
        </div>
        <div class="ya-content-item-bottomRisk" v-show="riskDetail">
          <div
            class="ya-content-item-bottom-item"
            v-for="(item, index) in riskDetailObj"
            :key="index"
          >
            <div class="ya-item-top">
              <img
                src="../../../../assets/imgs/red.png"
                alt=""
                v-if="item.level == 1"
              />
              <img
                src="../../../../assets/imgs/orange.png"
                alt=""
                v-else-if="item.level == 2"
              />
              <img
                src="../../../../assets/imgs/blue.png"
                alt=""
                v-else-if="item.level == 3"
              />
              <img
                src="../../../../assets/imgs/green.png"
                alt=""
                v-else-if="item.level == 4"
              />

              <img src="../../../../assets/imgs/gray.png" alt="" v-else />
              {{ item.name || "-" }}
            </div>
            <div class="ya-item-center">
              <span>{{ item.classification || "-" }}</span>
              <span>{{ item.port || "-" }}</span
              ><span>{{ item.handleStatusStr || "-" }}</span
              ><span>{{ item.findTime || "-" }}</span>
            </div>
            <div class="ya-item-bottom">
              <span v-if="item.handleStatus == 1"
                ><svg
                  style="vertical-align: middle"
                  width="15px"
                  height="15px"
                  viewBox="0 0 15 15"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <g
                    id="页面-1"
                    stroke="none"
                    stroke-width="1"
                    fill="none"
                    fill-rule="evenodd"
                  >
                    <g
                      id="画板"
                      transform="translate(-526.000000, -315.000000)"
                      fill="#047BEB"
                      fill-rule="nonzero"
                    >
                      <g
                        id="路径"
                        transform="translate(528.000000, 317.000000)"
                      >
                        <path
                          d="M6.12152778,0 C6.35739939,0 6.54861111,0.191211721 6.54861111,0.427083333 C6.54861111,0.636746988 6.39753024,0.811123816 6.19829655,0.847285782 L6.12152778,0.854166667 L1.28125,0.854166667 C1.07158742,0.854166667 0.897209756,1.00524849 0.861047591,1.20448155 L0.854166667,1.28125 L0.854166667,7.54513889 C0.854166667,7.75480877 1.00524373,7.92918076 1.20447996,7.96534157 L1.28125,7.97222222 L9.82291667,7.97222222 C10.0325919,7.97222222 10.2069597,7.82115165 10.2431195,7.62191109 L10.25,7.54513889 L10.25,5.83680556 C10.25,5.60093394 10.4412117,5.40972222 10.6770833,5.40972222 C10.886747,5.40972222 11.0611238,5.56080309 11.0972858,5.76003679 L11.1041667,5.83680556 L11.1041667,7.54513889 C11.1041667,8.21114158 10.5960446,8.75844024 9.94631163,8.82052381 L9.82291667,8.82638889 L1.28125,8.82638889 C0.615257113,8.82638889 0.0679497988,8.31826348 0.00586517663,7.66853325 L0,7.54513889 L0,1.28125 C0,0.615260705 0.508134643,0.0679502214 1.15785726,0.00586521391 L1.28125,0 L6.12152778,0 Z"
                        ></path>
                        <path
                          d="M5.59375,7.97222222 C5.82386865,7.97222222 6.01525785,8.12330309 6.05494781,8.32253679 L6.0625,8.39930556 L6.0625,10.6770833 C6.0625,10.9129549 5.85263348,11.1041667 5.59375,11.1041667 C5.36363135,11.1041667 5.17224215,10.9530858 5.13255219,10.7538521 L5.125,10.6770833 L5.125,8.39930556 C5.125,8.16343394 5.33486652,7.97222222 5.59375,7.97222222 Z"
                        ></path>
                        <path
                          d="M8.39930556,10.25 C8.63517717,10.25 8.82638889,10.4598665 8.82638889,10.71875 C8.82638889,10.9488686 8.67530802,11.1402578 8.47607432,11.1799478 L8.39930556,11.1875 L2.70486111,11.1875 C2.4689895,11.1875 2.27777778,10.9776335 2.27777778,10.71875 C2.27777778,10.4886314 2.42885864,10.2972422 2.62809234,10.2575522 L2.70486111,10.25 L8.39930556,10.25 Z"
                        ></path>
                        <path
                          d="M10.3750898,2.11814537 C10.5418762,1.95135895 10.8122904,1.95135895 10.9790769,2.11814537 C11.125015,2.26408348 11.1432572,2.48936163 11.0338036,2.65513475 L10.9790769,2.72213241 L9.55546574,4.14574352 C9.40952763,4.29168164 9.18424949,4.3099239 9.01847636,4.20047031 L8.9514787,4.14574352 L7.52786759,2.72213241 C7.36108117,2.55534599 7.36108117,2.28493178 7.52786759,2.11814537 C7.6738057,1.97220725 7.89908385,1.95396499 8.06485697,2.06341857 L8.13185463,2.11814537 L9.25301667,3.23968333 L10.3750898,2.11814537 Z"
                        ></path>
                        <path
                          d="M9.24583333,0 C9.47595198,0 9.66734118,0.115705822 9.70703114,0.268289663 L9.71458333,0.3270833 L9.71458333,2.9437497 C9.71458333,3.12439282 9.50471681,3.270833 9.24583333,3.270833 C9.01571469,3.270833 8.82432549,3.15512718 8.78463552,3.00254334 L8.77708333,2.9437497 L8.77708333,0.3270833 C8.77708333,0.146440181 8.98694986,0 9.24583333,0 Z"
                        ></path>
                      </g>
                    </g>
                  </g>
                </svg>
                <span @click="issuingRisk(item)" class="ya-hand">
                  下发</span
                ></span
              ><span class="ya-detail ya-hand" @click="goToDetail(item)"
                >查看详情</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick, onBeforeMount } from "vue";
import CommonCardVue from "../../../../components/CommonCard/CommonCard.vue";
import LineChart from "../../../../components/chart/LineChart/LineChart.vue";
import yaTableList from "../../../../components/table/table.vue";
import { remoteScanInfo, loginInfo, assetDetailData } from "./data";
import { useRouter, useRoute } from "vue-router";
import { getUserInfoCache } from "../../../../utils/auth/user";
import {
  disposalAssets,
  scanCollection,
  getRiskDetailData,
  issuedRisk,
} from "../../../../api/digitalAssets/networkAssets/hostAssets";
import { globSettingData } from "@/utils/env";
import { ElIcon } from "element-plus";
import { ArrowDownBold, ArrowUpBold } from "@element-plus/icons-vue";
import { yaMessage } from "../../../../utils/message";
const perforceTest = ref(true);
const riskDetail = ref(true);
const router = useRouter();
const route = useRoute();

/**
 *资产详情信息
 */
//资产详情的表格标题
const assetInfoData: any = ref(
  JSON.parse(JSON.stringify(assetDetailData.assetData.column))
);
//资产详情的内容数据
const assetsData: any = ref({});
//处理资产详情表格的内容区
const getAssetsDetail = function () {
  let params = { hostCode: headerObj.value.code };
  disposalAssets(params).then((res) => {
    const { code, data = {} } = res;
    if (code == 200) {
      assetsData.value = (data && data.feature) || [];
      assetsData.value.principalUser = data && data.principalUser;
      assetsData.value.principalUserPhone = data && data.principalUserPhone;
      assetsData.value.organizationName = data && data.organizationName;
      assetsData.value.positionName = data && data.positionName;
      assetsData.value.source = data && data.source;
      assetsData.value.sourceTypeName = data && data.sourceTypeName;
      assetsData.value.isRecord = data && data.isRecord;
      assetInfoData.value.forEach((item) => {
        for (let child in assetsData.value) {
          if (item.id == child) {
            if (typeof assetsData.value[child] == "boolean") {
              assetsData.value[child] =
                assetsData.value[child] === true ? "是" : "否";
            }

            item.content = assetsData.value[child];
          }
        }
      });
    }
  });
};

/**
 * 远程扫描
 */
//远程扫描的tab栏数据
const scanTabList = ref([]);
//控制远程扫描信息信息的各选项在选中时背景色变化
const remoteScanIndex = ref(0);
//远程扫描的标题数据
const remoteScan: any = ref(
  JSON.parse(JSON.stringify(remoteScanInfo.remoteBasic.column))
);
//远程扫描的内容区的类型
const remoteScanType = ref(remoteScanInfo.remoteBasic.type);
//扫描表格的内容的数据
const scanData: any = ref([]);
//远程扫描页码变化时的tab值
const scanType = ref("");

//远程扫描信息的切换
const handleChangeScan = function (i, name) {
  getScanList(name);
  remoteScanIndex.value = i;
  for (let item in remoteScanInfo) {
    if (remoteScanInfo[item].title == name) {
      remoteScan.value = remoteScanInfo[item].column;
      remoteScanType.value = remoteScanInfo[item].type;
    }
  }
};
let filedType = ref("remoteBasic");
//处理扫描表格的内容区
const getScanList = function (field) {
  scanType.value = field;
  switch (field) {
    case "常规信息":
      filedType.value = "remoteBasic";
      break;
    case "服务端口":
      filedType.value = "remoteService";
      break;
    case "中间件":
      filedType.value = "remoteMiddleware";
      break;
    case "数据库":
      filedType.value = "remoteDatabase";
      break;
  }
  let params = {
    code: headerObj.value.code,
    type: filedType.value,
    pageIndex: pageScan.value,
    pageSize: pageSizeScan.value,
  };
  scanCollection(params).then((res) => {
    const { code, data = {} } = res;
    if (code == 200) {
      scanData.value = data.records;
      totalScan.value = data.total;
      if (params.type == "remoteBasic") {
        for (let child in scanData.value[0]) {
          remoteScan.value.forEach((item) => {
            if (item.id == child) {
              if (typeof scanData.value[0][child] == "boolean") {
                scanData.value[0][child] =
                  scanData.value[0][child] === true ? "是" : "否";
              }
              item.content = scanData.value[0][child];
            }
          });
        }
      }
    }
  });
};

/**
 * 登录采集
 */
//登录采集的数据
const loginTabList = ref([]);
//登录采集的内容区的类型
const loginCollectType = ref(loginInfo.loginBasic.type);
//控制登录采集/Agent采集信息的各选项在选中时背景色变化
let loginCollectIndex = ref(0);
//登录采集页码变化时的tab值
const loginType = ref("");
//登录采集的标题
const loginColumn = ref(
  JSON.parse(JSON.stringify(loginInfo.loginBasic.column))
);
const loginCollectData: any = ref([]);
//登录采集的tab栏切换
const handleChangeLogin = function (i, name) {
  getLoginList(name);
  loginCollectIndex.value = i;
  for (let item in loginInfo) {
    if (loginInfo[item].title == name) {
      loginColumn.value = loginInfo[item].column;
      loginCollectType.value = loginInfo[item].type;
    }
  }
};
//处理登录采集表格的内容区
const getLoginList = function (field) {
  loginType.value = field;
  let filedType = ref("");
  switch (field) {
    case "常规信息":
      filedType.value = "loginBasic";
      break;
    case "服务":
      filedType.value = "loginService";
      break;
    case "端口":
      filedType.value = "loginPort";
      break;
    case "数据库":
      filedType.value = "loginDatabase";
      break;
    case "硬件信息":
      filedType.value = "loginHardware";
      break;
    case "中间件":
      filedType.value = "loginMiddleware";
      break;
    case "磁盘信息":
      filedType.value = "loginDiskPartition";
      break;
    case "账号信息":
      filedType.value = "loginAccount";
      break;
    case "已装软件":
      filedType.value = "loginSoftware";
      break;
    case "网络配置":
      filedType.value = "loginNetwork";
      break;
    case "系统进程":
      filedType.value = "loginSystemProcess";
      break;
    case "路由":
      filedType.value = "loginRoute";
      break;
    case "环境变量":
      filedType.value = "loginEnvironment";
      break;
  }
  let params = {
    code: headerObj.value.code,
    type: filedType.value,
    pageSize: pageSizeLogin.value,
    pageIndex: pageLogin.value,
  };
  scanCollection(params).then((res) => {
    const { code, data = {} } = res;
    if (code == 200) {
      loginCollectData.value = data.records;
      totalLogin.value = data.total;
      if (params.type == "loginBasic" || params.type == "loginHardware") {
        loginColumn.value.forEach((item) => {
          item.content = "-";
        });
        for (let child in loginCollectData.value[0]) {
          loginColumn.value.forEach((item) => {
            if (item.id == child) {
              if (typeof loginCollectData.value[0][child] == "boolean") {
                loginCollectData.value[0][child] =
                  loginCollectData.value[0][child] === true ? "是" : "否";
              }
              item.content = loginCollectData.value[0][child];
              if (item.id == "natList") {
                let natStr = ref("");
                loginCollectData.value[0]["natList"] &&
                  loginCollectData.value[0]["natList"].forEach((item) => {
                    natStr.value += item + " /";
                  });
                natStr.value = natStr.value.substring(
                  0,
                  natStr.value.length - 1
                );
                item.content = natStr.value;
              }
            }
          });
        }
      }
    }
  });
};
//获取性能检测
const linexAxisData = ref([]);
const cpuLineChartData = ref([]);
const memoryLineChartData = ref([]);
const ioLineChartData = ref([]);
const cpuAreaGradientColor = ref([
  ["#F0F7FE", "#FDFEFF"],
  ["rgba(16, 143, 234, 0.3)", "rgba(49, 150, 250, 0)"],
  ["rgba(62, 193, 140, 0.3)", "rgba(49, 150, 250, 0)"],
]);
const memoryAreaGradientColor = ref([
  ["#FEF8EF", "#FFFEFD"],
  ["rgba(16, 143, 234, 0.3)", "rgba(49, 150, 250, 0)"],
  ["rgba(62, 193, 140, 0.3)", "rgba(49, 150, 250, 0)"],
]);
const ioAreaGradientColor = ref([
  ["#F2F9F3", "#FDFEFD"],
  ["rgba(16, 143, 234, 0.3)", "rgba(49, 150, 250, 0)"],
  ["rgba(62, 193, 140, 0.3)", "rgba(49, 150, 250, 0)"],
]);

const getPerformanceTest = async () => {
  let params = { code: headerObj.value.code, type: "loginPerformance" };
  let res = await scanCollection(params);
  const gatherTime = ref([]);
  const cpuArr = ref([]);
  const memoryArr = ref([]);
  const ioArr = ref([]);
  res.data.records.forEach((item) => {
    gatherTime.value.push(item.gatherTime);
    cpuArr.value.push(item.cpuUsage);
    memoryArr.value.push(item.memoryUsage);
    ioArr.value.push(item.ioUsage);
  });
  if (res.data.records.length > 0) {
    linexAxisData.value = gatherTime.value;
    let arrCpu = [
      {
        name: "CPU使用率",
        data: cpuArr.value,
      },
    ];
    let arrMemory = [
      {
        name: "内存使用率",
        data: memoryArr.value,
      },
    ];
    let arrIo = [
      {
        name: "IO使用率",
        data: ioArr.value,
      },
    ];
    cpuLineChartData.value = arrCpu;
    memoryLineChartData.value = arrMemory;
    ioLineChartData.value = arrIo;
  }
};
//获取风险详情的数据
const riskDetailObj: any = ref([]);
const getRiskDetailEvent = () => {
  const params = {
    hostCode: headerObj.value.code,
  };
  getRiskDetailData(params).then((res) => {
    const { code, data = [] } = res;
    riskDetailObj.value = data;
  });
};
//下发风险
//用户id
interface UserInfo {
  userAuthentication: {
    principal: {
      roleId: number;
    };
  };
}
const userinfo: UserInfo = (getUserInfoCache() || {}) as UserInfo;
const roleid = ref(Number(userinfo.userAuthentication.principal.roleId));
// 下发风险;
const issuingRisk = (val) => {
  let params = ref({});
  params.value = {
    flawId: val.id,
    userId: roleid.value,
    detail: "",
  };
  issuedRisk(params.value).then((res) => {
    const { code, message } = res;
    if (code == 200) {
      yaMessage(message, "success");
      getRiskDetailEvent();
    }
  });
};
const headerObj: any = ref({});
onMounted(() => {
  headerObj.value =
    JSON.parse(localStorage.getItem("YA_HOST_ASSET_DATA") as string) || {};
  headerObj.value.gatherType = "";
  headerObj.value.gatherTypeNameSet &&
    headerObj.value.gatherTypeNameSet.forEach((item) => {
      headerObj.value.gatherType += item + " /";
    });
  headerObj.value.gatherType = headerObj.value.gatherType.substring(
    0,
    headerObj.value.gatherType.length - 1
  );
  for (let item in remoteScanInfo) {
    scanTabList.value.push(remoteScanInfo[item].title);
  }
  for (let item in loginInfo) {
    loginTabList.value.push(loginInfo[item].title);
  }
  getAssetsDetail();
  getScanList("常规信息");
  getLoginList("常规信息");

  getPerformanceTest();
  globSettingData.system !== "base" && getRiskDetailEvent();
});
const goToDetail = (val) => {
  localStorage.setItem("YA_VUL_DATA", JSON.stringify(val));
  router.push({
    path: "../../assetRisk/hostVulnerability/fdetail",
    query: { item: JSON.stringify(val) },
  });
};
//页码
let pageScan = ref(1);
//页容量
let pageSizeScan = ref(10);
//数据的总条数
let totalScan = ref(0);
//页码变化的事件
const handlePageChangeScan = (val) => {
  pageScan.value = val;
  getScanList(scanType.value);
};
//页容量变化的事件
const handlePageSizeChangeScan = (val) => {
  pageSizeScan.value = val;
  getScanList(scanType.value);
};
//页码
let pageLogin = ref(1);
//页容量
let pageSizeLogin = ref(10);
//数据的总条数
let totalLogin = ref(0);
//页码变化的事件
const handlePageChangeLogin = (val) => {
  pageLogin.value = val;
  getLoginList(loginType.value);
};
//页容量变化的事件
const handlePageSizeChangeLogin = (val) => {
  pageSizeLogin.value = val;
  getLoginList(loginType.value);
};
</script>
<style lang="scss" scoped>
@import "../../../../style/detailHeader.scss";
.yaBox {
  height: 100%;
  overflow: auto;
  margin-bottom: 50px;
  background-color: #f3f5f6;
  font-family: PingFangSC-Regular, PingFang SC;
  .yaContent {
    .ya-content-item {
      width: 100%;
      background-color: #fff;
      border-radius: 4px;
      margin-bottom: 30px;
      padding: 22px;
      box-sizing: border-box;
      .ya-address {
        display: flex;
        align-items: center;
        img {
          width: 20px;
          height: 20px;
          margin-right: 6px;
        }
      }
      .ya-content-item-top {
        font-size: 20px;
        font-weight: 500;
        color: #333333;
        line-height: 22px;
        margin-bottom: 22px;
        display: flex;
        .ya-img {
          width: 22px;
          height: 22px;
          background: #f3f5f6;
          border-radius: 4px;
          border: 1px solid #d1dae2;
          margin-left: 8px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .ya-content-item-bottom {
        width: 100%;
        border-radius: 2px;
        display: flex;
        justify-content: space-between;
        .ya-performance-item {
          width: 30%;
          height: 288px;
          .custom-row-item {
            height: 100%;
          }
          .ya-card {
            padding: 0px;
          }
        }
      }
      .ya-table {
        border: none;
      }
    }
    #ya-detail {
      .ya-content-item-bottomRisk {
        border: none;
        display: flex;
        flex-wrap: wrap;
      }
    }
    .ya-content-item-bottom-item:not(:nth-child(3n)) {
      margin-right: 1%;
    }
    .ya-content-item-bottom-item {
      width: 32%;
      height: 104px;
      border-radius: 4px;
      border: 1px solid #dfe3e7;
      margin-bottom: 18px;
      padding: 16px;
      box-sizing: border-box;
      font-size: 14px;
      .ya-item-top {
        color: #333333;
        line-height: 20px;
        img {
          width: 20px;
          height: 20px;
          vertical-align: middle;
          margin-right: 6px;
        }
      }
      .ya-item-center {
        color: #a3aeba;
        line-height: 20px;
        margin-top: 8px;
        padding-left: 15px;
        span {
          padding: 0px 9px;
          position: relative;
        }
        span::after {
          content: "";
          width: 1px;
          height: 13px;
          display: inline-block;
          background-color: #d1dae2;
          margin-left: 9px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }
        span:last-child::after {
          display: none;
        }
      }
      .ya-item-bottom {
        font-size: 12px;
        color: #047beb;
        line-height: 17px;
        margin-top: 8px;
        padding-left: 25px;
        img {
          width: 14px;
          height: 14px;
          vertical-align: middle;
          margin-right: 2px;
        }
        .ya-detail {
          border-bottom: 1px solid #047beb;
        }
        .ya-hand {
          cursor: pointer;
          margin-right: 23px;
        }
      }
    }
  }
}
</style>
