<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2023-03-13 08:59:41
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-04-18 21:00:51
 * @FilePath: \yuan-huoling-browser\src\views\screen\components\assetsStatistics.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2023-03-06 11:42:53
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-03-13 09:20:46
 * @FilePath: \yuan-huoling-browser\src\views\screen\components\assetsStatistics.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 资产情况统计 -->
<script setup lang="ts">
import { ref, watch } from "vue";
import { getAssetSituationCount } from "../../../api/screen/index";
import deptObj from "../../../store/modules/dept";
//资产数据
const assetsObj = ref({});
const dept = deptObj();
//数据初始化
const init = () => {
  let params = { deptId: dept.id };
  getAssetSituationCount(params).then((res) => {
    const { code, data = {} } = res;
    if (code == 200) {
      assetsObj.value = data || {};
    }
  });
};
watch(
  dept,
  () => {
    init();
  },
  {
    immediate: true,
  }
);
</script>

<template>
  <div class="custom-asset-data">
    <div class="ya-total">
      <ya-tooltip placement="top" :content="assetsObj.assetCount">
        <div class="ya-num-total">
          {{ assetsObj.assetCountForShow || 0 }}
        </div>
      </ya-tooltip>
      <div class="ya-text">资产总数</div>
    </div>
    <div class="ya-host">
      <ya-tooltip
        placement="top"
        trigger="hover"
        :content="assetsObj.hostAssetCount"
        :enterable="false"
        :hide-after="0"
      >
        <div class="ya-num-host">
          {{ assetsObj.hostAssetCountForShow || 0 }}
        </div>
      </ya-tooltip>
      <div class="ya-text">主机资产</div>
    </div>
    <div class="ya-app">
      <ya-tooltip
        placement="top"
        trigger="hover"
        :content="assetsObj.appAssetCount"
        :enterable="false"
        :hide-after="0"
      >
        <div class="ya-num-app">{{ assetsObj.appAssetCountForShow || 0 }}</div>
      </ya-tooltip>
      <div class="ya-text">应用资产</div>
    </div>
    <div class="ya-web">
      <ya-tooltip
        placement="top"
        trigger="hover"
        :content="assetsObj.webAssetCount"
        :enterable="false"
        :hide-after="0"
      >
        <div class="ya-num-web">{{ assetsObj.webAssetCountForShow || 0 }}</div>
      </ya-tooltip>
      <div class="ya-text">WEB资产</div>
    </div>
    <div class="ya-other">
      <ya-tooltip
        placement="top"
        trigger="hover"
        :content="assetsObj.otherAppAssetCount"
        :enterable="false"
        :hide-after="0"
      >
        <div class="ya-num-other">
          {{ assetsObj.otherAppAssetCountForShow || 0 }}
        </div>
      </ya-tooltip>
      <div class="ya-text">其他应用资产</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.custom-asset-data {
  width: 100%;
  height: 207px;
  background: url("../../../assets/image/screen/icon-circle.png") no-repeat;
  position: relative;
  margin-top: 21px;
  .ya-total,
  .ya-host,
  .ya-app,
  .ya-web,
  .ya-other {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
  }
  .ya-total {
    width: 99px;
    top: 38px;
    left: 86px;
    .ya-num-total {
      font-size: 20px;
      font-family: PangMenZhengDao;
      color: #23f5ea;
    }
    .ya-text {
      font-size: 14px;
      margin-top: 10px;
    }
  }
  .ya-host {
    left: 24px;
    bottom: 45px;
    .ya-num-host {
      font-size: 14px;
      font-family: PangMenZhengDao;
      color: #2fcc7e;
    }
    .ya-text {
      font-size: 12px;
      margin-top: 5px;
    }
  }
  .ya-app {
    right: 100px;
    bottom: 84px;
    .ya-num-app {
      font-size: 15px;
      font-family: PangMenZhengDao;
      color: #2caeff;
    }
    .ya-text {
      font-size: 13px;
      margin-top: 5px;
    }
  }
  .ya-web {
    right: 22px;
    top: 28px;
    .ya-num-web {
      font-size: 12px;
      transform: scale(0.83333);
      font-family: PangMenZhengDao;
      color: #2caeff;
    }
    .ya-text {
      font-size: 12px;
      transform: scale(0.666667);
      margin-top: 2px;
    }
  }
  .ya-other {
    right: 12px;
    bottom: 28px;
    .ya-num-other {
      font-size: 12px;
      transform: scale(0.83333);
      font-family: PangMenZhengDao;
      color: #2caeff;
    }
    .ya-text {
      font-size: 12px;
      transform: scale(0.666667);
      margin-top: 2px;
    }
  }
  .ya-text {
    font-family: MicrosoftYaHei;
    font-weight: normal;
    color: #c6d1db;
  }
}
</style>
<style lang="scss">
.situationScreen {
  .el-popper {
    background-color: rgba(9, 24, 50, 0.9);
    border: 1px solid rgba(38, 74, 140, 0.4);
    border-radius: 2px;
  }
  .el-popper .el-popper__arrow::before {
    background-color: rgba(9, 24, 50, 0.9);
    border: 1px solid rgba(38, 74, 140, 0.4);
  }
}
</style>
