<!--
 * @Author: tangqihui tangqihui@yuan-info.com
 * @Date: 2023-09-08 09:45:28
 * @LastEditors: tangqihui tangqihui@yuan-info.com
 * @LastEditTime: 2023-09-23 16:11:20
 * @FilePath: /御安项目/火影资管/yuan-asset-management-browser/src/views/collection/infoCollection/inventory.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="inventory">
    <div class="tab-center">
      <YaSearch
        :formData="formData"
        :labelWidth="'80px'"
        :formColumns="formColumns"
        @search="search"
        @reset="resetForm"
      ></YaSearch>
      <div class="inventory-content">
        <div class="tab-check-btn">
          <div>
            <el-checkbox
              v-if="bottomData.has(400215)"
              v-model="checkAll"
              :indeterminate="isIndeterminate"
              @change="handleCheckAllChange"
            >
              <span class="all">全选</span>
              <ya-button plain v-if="checkAll" @click="batchDelete('all')"
                >批量{{ bottomData.get(400215).label }}</ya-button
              >
              <ya-button
                v-else
                plain
                :disabled="isIndeterminate ? false : true"
                @click="batchDelete('all')"
                >批量{{ bottomData.get(400215).label }}</ya-button
              ></el-checkbox
            >
            <ya-button plain class="ya-sort" v-if="bottomData.has(400240)"
              >{{ bottomData.get(400240).label }}
              <div class="ya-icon">
                <el-icon @click="tabBtnClick('sortOrder', 1)"
                  ><CaretTop :class="{ 'ya-svg': sortOrder == 1 }" /></el-icon
                ><el-icon @click="tabBtnClick('sortOrder', 0)"
                  ><CaretBottom :class="{ 'ya-svg': sortOrder == 0 }"
                /></el-icon></div
            ></ya-button>
          </div>
          <div>
            <ya-button
              v-if="bottomData.has(400217)"
              @click="tabBtnClick('export', {})"
              >{{ bottomData.get(400217).label }}</ya-button
            >
            <ya-button
              type="primary"
              v-if="bottomData.has(400211)"
              class="add"
              @click="tabBtnClick('add', {})"
              >{{ bottomData.get(400211).label }}</ya-button
            >
          </div>
        </div>
        <div class="inventory-table">
          <div v-if="tabData.length > 0">
            <div class="position-relative" v-for="(item, index) in tabData">
              <div
                class="tab-table-list flex-st-s"
                :class="{ 'tab-table-list-active': item.checked }"
              >
                <div class="flex-st-s left">
                  <el-checkbox
                    class="checkout"
                    @change="choseChecked(item, index)"
                    v-model="item.checked"
                  ></el-checkbox>
                  <div class="table-content-left">
                    <div class="flex-st-s">
                      <div>
                        <img
                          class="img1"
                          src="../../../assets/image/collection/img-1.png"
                          alt=""
                        />
                      </div>
                      <div>
                        <div class="ipName">
                          {{ item.ipv4
                          }}<span class="hasUpdated" v-if="item.hasUpdated"
                            >有更新</span
                          >
                        </div>
                        <div class="ipStart">{{ item.ipv6 || '-' }}</div>
                      </div>
                    </div>
                    <div class="btn-click">
                      <ya-button
                        plain
                        v-if="bottomData.has(400212)"
                        class="clickBtn cursor"
                        @click="tabBtnClick('detail', item)"
                        >{{ bottomData.get(400212).label }}</ya-button
                      >
                      <ya-button
                        plain
                        v-if="bottomData.has(400218)"
                        class="clickBtn"
                        :class="{'cursor': item.gatherStatus != 'running'}"
                        :disabled="item.gatherStatus == 'running' ? true : false"
                        @click="tabBtnClick('edit', item)"
                        >{{ bottomData.get(400218).label }}</ya-button
                      >
                      <ya-button
                        plain
                        v-if="bottomData.has(400219)"
                        class="clickBtn cursor"
                        @click="tabBtnClick('record', item)"
                        >{{ bottomData.get(400219).label }}</ya-button
                      >
                      <span v-if="bottomData.has(401220)">
                        <!-- 未开始按钮 -->
                        <span
                          @click="tabBtnClick('start', item)"
                          v-if="
                            bottomData.has(400229) &&
                            item.gatherStatus == 'finish'
                          "
                        >
                          <TableBtns
                            :title="bottomData.get(400229).label"
                            type="3"
                          ></TableBtns>
                        </span>
                        <!-- 执行中按钮 -->
                        <span v-if="item.gatherStatus == 'running'">
                          <TableBtns title="执行中" type="4"></TableBtns>
                        </span>
                        <!-- 终止按钮 -->
                        <span
                          v-if="item.gatherStatus != 'finish'"
                          @click="tabBtnClick('end', item)"
                        >
                          <TableBtns title="终止" type="5"></TableBtns>
                        </span>
                        <!-- 终止置灰按钮 -->
                        <span v-else>
                          <TableBtns
                            :disabeld="true"
                            title="暂时无法终止"
                            type="15"
                          ></TableBtns>
                        </span>
                      </span>
                      <ya-button
                        plain
                        v-if="bottomData.has(400215)"
                        class="clickBtn  ml-12"
                        :class="{'cursor del': item.gatherStatus != 'running'}"
                        :disabled="item.gatherStatus == 'running' ? true : false"
                        @click="batchDelete('one', item)"
                        >删除</ya-button
                      >
                    </div>
                    <div class="left-table position-relative">
                      <div class="left-table-content">
                        <div class="left-table-item">
                          <div class="left-table-item-name">域名</div>
                          <div class="left-table-item-des ya-domain" v-if="item.domainName">
                            <yaTooltip
                              placement="top"
                              trigger="hover"
                              :content="item.domainName[0]"
                              :enterable="false"
                              :hide-after="0"
                            >
                              {{ item.domainName[0] || '-' }}
                            </yaTooltip>
                          </div>
                          <div class="left-table-item-des ya-domain" v-else>-</div>
                        </div>
                      </div>
                      <div v-if="item.domainName">
                        <Dialog
                          v-if="item.domainName.length > 1"
                          :list="getPopupList(item.domainName)"
                          type="1"
                        />
                      </div>
                      
                    </div>
                  </div>
                </div>
                <div class="right flex-one">
                  <el-row :gutter="20">
                    <el-col class="margin-bottom16" :span="4">
                      <div class="right-top-name">资产名称</div>
                      <yaTooltip
                        placement="top"
                        trigger="hover"
                        :enterable="false"
                        :hide-after="0"
                        :content="item.name"
                      >
                        <div class="right-name-item">
                          {{ item.name || '-' }}
                        </div>
                      </yaTooltip>
                    </el-col>
                    <el-col class="margin-bottom16" :span="4">
                      <div class="right-top-name">资产类型</div>
                      <div class="right-name-item">
                        {{ item.assetType || '-' }}
                      </div>
                    </el-col>
                    <el-col class="margin-bottom16" :span="4">
                      <div class="right-top-name">操作系统</div>
                      <div class="right-name-item">{{ item.os || '-' }}</div>
                    </el-col>
                    <el-col class="margin-bottom16" :span="4">
                      <div class="right-top-name">网络域</div>
                      <div class="right-name-item">
                        {{ item.networkAreaName || '-' }}
                      </div>
                    </el-col>
                    <el-col class="margin-bottom16" :span="4">
                      <div class="right-top-name">数据来源</div>
                      <div class="right-name-item">
                        {{ item.sourceType || '-' }}
                      </div>
                    </el-col>
                    <el-col class="margin-bottom16" :span="4">
                      <div class="right-top-name">更新时间</div>
                      <div class="right-name-item">
                        {{ item.gmtModified || '-' }}
                      </div>
                    </el-col>
                    <el-col class="margin-bottom16" :span="4">
                      <div class="right-top-name">采集方式</div>
                      <div class="right-name-item">
                        {{ item.gatherTypeSet.toString() || '-' }}
                      </div>
                    </el-col>
                    <el-col class="margin-bottom16" :span="4">
                      <div class="right-top-name">所属部门</div>
                      <div class="right-name-item">
                        {{ item.deptName || '-' }}
                      </div>
                    </el-col>
                    <el-col class="margin-bottom16" :span="4">
                      <div class="right-top-name">资产状态</div>
                      <div class="right-name-item">
                        <div
                          class="survival"
                          :class="{ offline: item.status == '离线' }"
                        >
                          {{ item.status }}
                        </div>
                        <!-- <div class="survival offline">离线</div> -->
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div
                        class="table-top-right-name"
                        @click="tabBtnClick('port', item)"
                      >
                        <span class="port-info-name">端口</span>
                        <span class="port-info-svg">
                          <img src="../../../assets/image/port.png" alt="" />
                        </span>
                      </div>
                      <div
                        class="table-top-right-value flex-st-s position-relative"
                      >
                        <div v-if="item.portSet.length > 0">
                          <Dialog
                            :list="getPopupList(item.portSet, item)"
                            @onList="toPort"
                          />
                        </div>
                        <div v-else>-</div>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="flex-x-st">
                        <div class="cursor no-need" v-if="item.toBeImproved" @click="tabBtnClick('edit', item)">
                          待完善
                        </div>
                        <div v-if="item.gatherStatus == 'running'">
                          <ya-button
                            disabled
                            plain
                            v-if="bottomData.has(400215) && item.enable == 0"
                            class="no-del"
                            >启用</ya-button
                          >
                          <ya-button
                            disabled
                            class="no-del"
                            v-if="bottomData.has(400215) && item.enable == 1"
                            >停用</ya-button
                          >
                        </div>
                        <div v-else>
                          <ya-button
                            plain
                            v-if="bottomData.has(400215) && item.enable == 0"
                            class="clickBtn cursor"
                            @click="switchOpen('open', item)"
                            >启用</ya-button
                          >
                          <ya-button
                            plain
                            v-if="bottomData.has(400215) && item.enable == 1"
                            class="del cursor"
                            @click="switchOpen('close', item)"
                            >停用</ya-button
                          >
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <div class="new" v-if="item.new">
                <img src="../../../assets/image/new.png" alt="" />
              </div>
            </div>
            <div class="page-box">
              <YaPagination
                :page-sizes="[20, 30, 40, 50, 100]"
                :currentPage="page"
                :pageSize="pageSize"
                @sizeChange="handlePageSizeChange"
                @currentChange="handlePageChange"
                small
                :total="total"
              >
              </YaPagination>
            </div>
          </div>
          <div class="no-length" v-else>
            <ya-empty></ya-empty>
          </div>
        </div>
      </div>
    </div>
    <YaDrawerUpload
      :http="http"
      v-if="uploadProps.showDrawer"
      templateUrl="hostAssetImportTemptle.xlsx"
      :drawerProps="uploadProps"
      @submit="uploadSubmit"
      @handleChangeUpload="handleChangeUpload"
    >
    </YaDrawerUpload>
    <!-- 执行记录 -->
    <RecordDialog
      ref="childDialog"
      sizeWidth="580px"
      :tableDataList="tableDataList"
      :tableColumn="tableColumnList"
      :tableTotal="tableTotal"
      :tablePage="tablePage"
      :tableSize="tableSize"
      @sizeChangeOne="tableSizeChange"
      @currentChangeOne="tableCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  onMounted,
  watch,
  nextTick,
  Ref,
  getCurrentInstance,
} from 'vue';
import { openSocket, registerSockets } from '@/utils/socket/useSocket';
import { ElMessage, ElMessageBox, ElIcon } from 'element-plus';
import { yaConfirmMessage, yaMessage } from 'yuan-plus';
import type { FormInstance, FormRules, ElScrollbar } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { usePermissions } from '../../../composables/usePermissions';
import { getDeptData } from '../../../api/digitalAssets/networkAssets/hostAssets';
import { CaretBottom, CaretTop } from '@element-plus/icons-vue';
import { getLeftTreeJson } from '../../../api/permission/userManagement';
import Dialog from '../components/dialog.vue';
import { http } from '@/utils/https';
import {
  cancelOperate,
  runOperate,
  getList,
  addUploadFile,
  importCheckByExcel,
  delAll,
  delOne,
  switchBtn
} from '../../../api/collection/infoCollection/inventory';
import RecordDialog from '../components/recordDialog.vue';
import { taskRocordTableColumn } from '../components/config';
import {  getDictTypeList,getRecordAssetsList } from '../../../api/common';
import { rocordTableColumn } from "../components/config.ts";
const { proxy } = getCurrentInstance();
/**
 * @description: 列表socket
 */
const sockets = {
  message(res) {
    if (res.type == "ws_assetList") {
      const { data, code } = res.data;
      if (code == 200) {
        tabData.value = data.records || [];
        total.value = data.total;
        if (checkedCities.value.length > 0) {
          checkedCities.value.forEach((item, index) => {
            tabData.value[index].checked = item.checked;
          });
        } else {
          if (tabData.value.length == 0) return;
          tabData.value.forEach((item, index) => {
            item.checked = false;
          });
        }
      }
    }
  },
};
const uploadProps = reactive({
  showDrawer: false,
  title: '导入',
  size: 'small',
});
const importStatus = ref(false);
// 文件上传
const handleChangeUpload = (file, resolve) => {
  let fd = new FormData();
  fd.append('file', file.raw);
  importCheckByExcel(fd).then((res) => {
    if (res.code == 200) {
      // const data = {
      //   importStatus: true,
      //   message: 'asdhsakjdh',
      //   failInfoList: [{
      //     name: 132
      //   }]
      // }
      // resolve(data)
    }
  });
};
// 导入提交
const uploadSubmit = (file, resolve) => {};
const router = useRouter();
/**
 * @description: 获取按钮权限
 */
const bottomData = ref(new Map());
const { permissionsButtons } = usePermissions();
const getBtnPower = () => {
  permissionsButtons.map((item) => {
    bottomData.value.set(item.menuId, item);
  });
};

const tabData = ref([]);
const formData = ref({
  column: '',
  asc: null,
});
const deptIdArr = ref([]);
const formColumns = reactive([
  {
    key: 'ip',
    type: 'input',
    label: '资产IP',
    clearable: true,
  },
  {
    key: 'name',
    type: 'input',
    label: '资产名称',
    clearable: true,
  },
  {
    key: 'assetType',
    type: 'select',
    label: '资产类型',
    collapseTags: true,
    clearable: true,
  },
  {
    key: 'deptId',
    type: 'cascader',
    label: '所属部门',
    options: deptIdArr,
     props: {
      checkStrictly: true,
      value: 'id',
      emitPath: false,
      multiple: false,
    },
    collapseTags: false,
    showAllLevels: false,
    clearable: true,
  },
  {
    key: 'time',
    type: 'daterange',
    label: '更新时间',
    valueFormat: 'YYYY-MM-DD',
    startPlaceholder: '开始时间',
    endPlaceholder: '结束时间',
    clearable: true,
  },
]);
//获取所属部门下拉框数据
const getDepteEvent = () => {
  getLeftTreeJson().then((res) => {
    const { code, data } = res || {};
    if (code === 200) {
      deptIdArr.value = data.treeData || [];
    }
  });
};
/**
 * @description 搜索
 */
const search = (form) => {
  getTablePage('init');
  // if (tabCurrentValue.value) {
  // } else {
  //   getAppPageList("init");
  // }
};
/**
 * @description 重置
 */
const resetForm = (formEl: FormInstance | undefined) => {
  getTablePage('init');
  if (!formEl) return;
  formEl.resetFields();
};
/**
 * @description 全选
 */
const checkAll = ref(false);
const isIndeterminate = ref(false);
const checkedCities = ref([]);
/**
 * @description 全选
 */
const handleCheckAllChange = (val: boolean) => {
  tabData.value.forEach((item) => {
    item.checked = val;
  });
  checkedCities.value = val ? tabData.value : [];
  isIndeterminate.value = false;
};
/**
 * @description 单选
 */
const choseChecked = (val, i) => {
  console.log(tabData.value);
  checkedCities.value = tabData.value.map((item, index) => {
    return item;
  });
  let arr = [];
  checkedCities.value.forEach((item) => {
    if (item.checked) {
      arr.push(item);
    }
  });
  if (arr.length > 0) {
    isIndeterminate.value = true;
  } else {
    isIndeterminate.value = false;
    checkAll.value = false;
  }
  if (arr.length == tabData.value.length) {
    checkAll.value = true;
    isIndeterminate.value = false;
  }
};
/**
 * @description 删除
 */
const batchDelete = (type, row) => {
  yaConfirmMessage().then(() => {
    if (type == 'all') {
      delAll(codeList.value).then((res) => {
        if (res.code == 200) {
          ElMessage.success('删除成功');
          getTablePage('');
        }
      });
    } else {
      delOne({ code: row.code }).then((res) => {
        if (res.code == 200) {
          ElMessage.success('删除成功');
          getTablePage('');
        }
      });
    }
  });
};
/**
 * @description 按钮点击事件
 */
const sortOrder = ref(-1);
const tabBtnClick = (e, row) => {
  switch (e) {
    case 'export': // 导入
      uploadProps.showDrawer = true;
      break;
    case 'sortOrder': // 排序
      sortOrder.value = row;
      formData.value.column = 'ip';
      formData.value.asc = row == 1;
      getTablePage('');
      break;
    case 'add': // 新增
      router.push({
        path: '/collection/infoCollection/inventoryAdd',
        query: {
          title: '新增',
        },
      });
      break;
    case 'edit': // 编辑
      router.push({
        path: '/collection/infoCollection/inventoryAdd',
        query: {
          title: '编辑',
          code: row.code,
          ipv4: row.ipv4,
          ipv6: row.ipv6,
        },
      });
      break;
    case 'detail': // 详情
      router.push({
        path: '/collection/infoCollection/inventoryDetail',
        query: {
          code: row.code,
        },
      });
      break;
    case 'record': // 执行记录
      recordBtn('执行记录', row);
      break;
    case 'start': // 开始
      executeBtn(row);
      break;
    case 'end': // 终止
      executeBtn(row);
      break;
    case 'port': // 端口变化
      router.push({
        path: '/screen/portChange/index',
        query: {
          code: e.code,
        },
      });
      break;
  }
};
/**
 * @description 执行
 */
const executeBtn = (e) => {
  let send, title;
  if (e.gatherStatus == 'finish') {
    send = runOperate;
    title = '任务开始执行!';
  } else {
    cancelOperate({ code: e.code }).then((res) => {
      if (res.code == 200) {
        ElMessage.success('任务取消！');
        getTablePage('');
      }
    });
  }
  send({ code: e.code }).then((res) => {
    if (res.code == 200) {
      ElMessage.success(title);
      getTablePage('');
    }
  });
};
const getPopupList = (e, row) => {
  let obj = e.map((item) => {
    return {
      name: item,
      code: row ? row.code : '',
    };
  });
  return obj;
};
/**
 * @description 端口详情
 */
const toPort = (e) => {
  router.push({
    path: '/collection/infoCollection/portDetail',
    query: {
      port: e.name,
      hostCode: e.code,
    },
  });
};
const init = () => {};
const page = ref(1);
const pageSize = ref(20);
const total = ref(0);
/**
 * @description 分页
 */
const handlePageSizeChange = (val: number) => {
  page.value = 1;
  pageSize.value = val;
  backTop();
  // getTablePage();
};
/**
 * @description 分页
 */
const handlePageChange = (val: number) => {
  page.value = val;
  backTop();
  // getTablePage();
};
/**
 * @description 返回顶部
 */
const backTop = () => {
  document.getElementsByClassName('tab-center')[0].scrollTop = 0;
};
/**
 * @description: 获取列表数据
 */
const getTablePage = async (type) => {
  let dataObj = JSON.parse(JSON.stringify(formData.value));
  if (type === 'init') {
    page.value = 1;
    pageSize.value = 20;
  }
  if (formData.value.time) {
    if (formData.value.time.length > 0) {
      dataObj.startTime = formData.value.time[0] + ' 00:00:00';
      dataObj.endTime = formData.value.time[1] + ' 23:59:59';
    }
    delete dataObj.time;
  }
  var parms = {
    pageIndex: page.value,
    pageSize: pageSize.value,
    ...dataObj,
  };
  // if (parms.deptIdSet) {
  //   if (typeof parms.deptIdSet == 'number') {
  //     parms.deptIdSet = [parms.deptIdSet];
  //   }
  // }
  openSocket("ws_assetList", parms, sockets);
  sessionStorage.setItem('YA_FORM_DATA', JSON.stringify(parms));
  let res = await getList(parms);
  if (res.code == 200) {
    total.value = res.data.total;
    tabData.value = res.data.records || [];
    resetCheck();
  }
};
/**
 * @description 重置选择框
 */
const resetCheck = () => {
  checkAll.value = false;
  isIndeterminate.value = false;
  checkedCities.value = [];
  tabData.value.forEach((item) => {
    item.checked = false;
  });
};

//执行记录--start
const tableColumnList = ref([]);
const tableDataList = ref([]);
const childDialog = ref<any>();
const recordCode = ref("");
/**
 * @description 打开记录弹窗
 */
const recordBtn = (type, e) => {
  tableColumnList.value = taskRocordTableColumn;
  recordCode.value = e.code;
  childDialog.value.openDialog();
  childDialog.value.dialogProps.title = '执行记录';
  getRecordDetail();
};
const tableTotal = ref(0);
const tablePage = ref(1);
const tableSize = ref(20);
/**
 * @description: 页面容量切换
 */
const tableSizeChange = function (val: number) {
  tableSize.value = val;
  tablePage.value = 1;
  getRecordDetail();
};
/**
 * @description: 分页切换
 */
const tableCurrentChange = function (val: number) {
  tablePage.value = val;
  getRecordDetail();
};
const getRecordDetail = () => {
  let params = {
    assetCode: recordCode.value,
    pageSize: tableSize.value,
    pageIndex: tablePage.value,
  };
  getRecordAssetsList(params).then((res) => {
    if (res.code == 200) {
      tableTotal.value = res.data.total;
      tableDataList.value = res.data.records.map((item, index) => {
        item.number = Number(
          (tablePage.value - 1) * tableSize.value + index + 1 > 9
            ? (tablePage.value - 1) * tableSize.value + index + 1
            : `${(tablePage.value - 1) * tableSize.value + index + 1}`
        );
        return item;
      });
    }
  });
};

//执行记录--end
/**
 * @description 字典
 */
/**
 * @description: 字典数据初始化
 */
 const resetDictData = (e) => {
  let list = e.map((item) => {
    return {
      label: item.dictName,
      value: item.dictValue,
    };
  });
  return list;
};
const getDictList = () => {
    // 探测范围
  getDictTypeList({ dictType: 'assetType' }).then((res) => {
    if (res.code == 200) {
      formColumns.forEach((item)=>{
        if(item.key == 'assetType') {
          item.options = resetDictData(res.data)
        }
      })
    }
  });
}
/**
 * @description 启用，停用
 */
const switchOpen = (type,item) => {
  let enable = type == 'close' ? 0 : 1;
  let title = type == 'close' ? '是否停用？' : '是否启用';
  yaConfirmMessage(title).then(() => {
    switchBtn({
      id: item.id,
      enable: enable
    }).then(res=>{
      if(res.code == 200) {
        yaMessage(res.message,'success');
        getTablePage('');
      }
    })
  })

}
onMounted(() => {
  registerSockets(sockets, proxy);
  getTablePage('init');
  getBtnPower();
  getDepteEvent();
  getDictList()
  
});
</script>

<style lang="scss" scoped>
.inventory {
  padding-top: 16px;
  .table-content-left {
    width: 308px;
  }
  .inventory-content {
    padding: 16px;
    padding-top: 0;
    .hasUpdated {
      width: 54px;
      height: 20px;
      background: var(--el-color-primary-light-9);
      color: var(--el-color-primary);
      text-align: center;
      line-height: 20px;
      border-radius: 2px;
      font-size: 12px;
      margin-left: 4px;
      font-weight: normal;
      display: inline-block;
      position: relative;
      top: -2px;
    }
    .tab-check-btn {
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      .all {
        margin-right: 16px;
      }
      > div {
        display: flex;
      }
      .ya-sort {
        margin-left: 16px;
        &:hover {
          background-color: var(--el-color-primary);
          color: #fff;
          .ya-icon ::v-deep .el-icon {
            svg {
              color: #fff;
            }
          }
        }
      }

      .ya-icon {
        margin-left: 5px;
        display: flex;
        flex-direction: column;
        ::v-deep .el-icon {
          width: 12px;
          height: 6px;
          overflow: hidden;
          svg {
            color: var(--el-color-primary);
          }
        }
        .ya-svg {
          color: #00acff !important;
        }
      }
      .ya-sort1 {
        margin-left: 16px;
        .ya-icon {
          ::v-deep .el-icon {
            svg {
              color: var(--el-button-disabled-text-color);
            }
          }
        }
      }
      .add:hover {
        opacity: 0.8;
      }
    }
  }
  .inventory-table {
    .ya-domain {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .left {
      border-right: 1px solid var(--el-border-color);
      padding-right: 12px;
    }
    .right {
      padding-left: 24px;
      .right-top-name {
        font-weight: 400;
        color: var(--el-text-color-placeholder);
        font-size: 12px;
        width: 48px;
        margin-right: 12px;
      }
      .right-top-center {
        max-height: 75px;
        overflow-y: auto;
      }
      .width100 {
        max-width: 100%;
      }
      .right-name-item {
        font-weight: 400;
        font-size: 14px;
        color: var(--el-text-color-primary);
        word-break: break-all;
        margin-top: 8px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 超出几行省略 */
        overflow: hidden;
        .survival {
          width: 50px;
          height: 20px;
          line-height: 20px;
          background: var(--el-color-success-light-9);
          border-radius: 4px;
          text-align: center;
          font-size: 12px;
          color: var(--el-color-success);
        }
        .offline {
          background: var(--el-color-error-light-9);
          color: var(--el-color-danger);
        }
      }
      .right-top-width {
        width: 15%;
      }
      .width40 {
        width: 40%;
      }
    }
    .flex-one {
      flex: 1;
    }
    .position-relative {
      position: relative;
    }
    .flex-st-s {
      display: flex;
    }
    .tab-table-list {
      background: #fff;
      margin: 12px 0;
      padding: 16px;
      border-radius: 4px;
      border: var(--el-border);
      .checkout {
        position: relative;
        top: -8px;
        margin-right: 15px;
      }
      .img1 {
        width: 39px;
        height: 39px;
        margin-right: 8px;
      }
      .ipName {
        font-weight: bold;
        color: rgba(0, 0, 0, 0.65);
        font-size: 18px;
      }
      .ipStart {
        color: rgba(0, 0, 0, 0.4);
        font-size: 12px;
      }
      .btn-click {
        ::v-deep .el-button + .el-button {
          margin-left: 12px;
        }
      }
      .clickBtn {
        font-weight: 400;
        font-size: 12px;
        height: 20px;
        padding: 0 9px;
      }
      .del {
        height: 20px;
        font-weight: 400;
        padding: 0 9px;
        font-size: 12px;
        color: var(--el-color-danger);
        border: 1px solid var(--el-color-danger);
        background: var(--el-color-danger-light-9);
      }
      .ml-12 {
        margin-left: 12px;
      }
      .del:hover {
        border: 1px solid var(--el-color-danger) !important;
        background: var(--el-color-danger);
        color: #fff;
      }
      .no-del {
        height: 20px;
        font-weight: 400;
        padding: 0 9px;
        font-size: 12px;
        color: var(--el-color-info);
        border: 1px solid var(--el-border-color);
        background: var(--el-color-info-light-9);
      }
      ::v-deep .img-icon {
        margin-left: 12px !important;
        top: 6px;
        margin-right: 0;
      }
      .left-table {
        margin-top: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left-table-content {
          border-radius: 2px;
          border: 1px solid #e4e4e4;
          flex: 1;
          margin-right: 10px;
          .left-table-item {
            display: flex;
            align-items: center;
            padding: 2px 8px;
            .left-table-item-name {
              font-weight: 400;
              color: rgba(0, 0, 0, 0.4);
              font-size: 12px;
              margin-right: 5px;
              width: 25px;
            }
            .left-table-item-des {
              font-weight: 400;
              color: rgba(0, 0, 0, 0.65);
              font-size: 14px;
              flex: 1;
              width: 0;
            }
          }
        }
      }
    }
    .tab-table-list-active {
      border: 1px solid var(--el-color-primary);
      box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.1);
    }
    .new {
      position: absolute;
      right: 0;
      top: 0;
    }
    .margin-bottom16 {
      margin-bottom: 16px;
    }
    .img2 {
      width: 20px;
      height: 20px;
      position: relative;
      top: 5px;
      margin-right: 10px;
    }
    .cursor:hover {
      cursor: pointer;
    }
    .page-box {
      margin: 16px 0px 24px 0px;
      display: flex;
      flex-direction: row-reverse;
    }

    .table-top-right-name {
      font-weight: 400;
      font-size: 12px;
      margin-bottom: 8px;
      .port-info-name {
        color: var(--el-color-primary);
      }
      .port-info-svg {
        position: relative;
        top: 3px;
      }
    }
    .table-top-right-value {
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;

      .tag-item {
        height: 20px;
        line-height: 20px;
        padding: 0 8px;
        background: rgba(245, 130, 0, 0.1);
        border-radius: 2px;
        font-weight: 400;
        color: var(--el-color-warning);
        font-size: 12px;
        text-align: center;
        margin-right: 8px;
      }
      .port-item {
        background: var(--el-color-white);
        border: 1px solid #f3f3f3;
        color: var(--el-color-primary);
      }
    }
  }
  .flex-x-st {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 20px;
  }
  .no-need {
    color: var(--el-color-primary);
    text-decoration: underline;
    font-size: 12px;
    margin-right: 16px;
  }
  .no-length {
    background: var(--el-color-white);
    height: calc(59vh);
    margin-top: 12px;
    ::v-deep .ya-table-empty {
      margin-top: 200px;
    }
  }
}
</style>
