<!--
 * @Author: tqh
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/InternetStiff/monitoringAnalysis.vue
 * @Date: 2022-9-2 14:03
-->
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";
import { ElScrollbar } from "element-plus";
import { ElMessage } from "element-plus";
import { dateSwitchOptions } from "../../../settings";
import CommonTabs from "../../../components/CommonTabs/CommonTabs.vue";
import CommonCardVue from "../../../components/CommonCard/CommonCard.vue";
import LineChart from "../../../components/chart/LineChart/LineChart.vue";
import { bigNumberTransform } from "../../../utils/utils";
import { getThemeColor } from "../../../components/chart/options/theme";
import {
  getZoomList,
  exportZoomRequest,
  getMuList,
  exportMuRequest,
  getWormList,
  exportWormRequest,
  getZoomEventList,
  getMuEventList,
  getWormEventList,
  getZoomInfoList,
  getMuInfoList,
  getWormInfoList,
} from "../../../api/monitoring/InternetStiff/monitoringAnalysis";
import { getDictTypeList } from "../../../api/common";
import {
  tableColumnlist,
  tableColumnWormlist,
  queryColumnsList,
  queryWormList,
  queryZoomList,
  serachZoomData,
  serachMuData,
  serachWormData,
  selectDataObj,
} from "./config";
import { downLoadFile, deepCopy } from "../../../utils/utils";
import internetIp from "../../../assets/image/internet-ip.png";
import internetNum from "../../../assets/image/internet-num.png";
import noData from "../../../assets/image/no-data.png";
import lineCircle2 from "../../../assets/image/screen/threat-event/line-2.png";

const tabs = ref([
  {
    title: "僵尸",
    value: 1,
  },
  {
    title: "木马",
    value: 2,
  },
  {
    title: "蠕虫",
    value: 3,
  },
]);
const optionsList = ref([
  {
    label: "类型",
    value: "category",
  },
  {
    label: "受控端运营商",
    value: "operator",
  },
  {
    label: "受控端地域",
    value: "area",
  },
]);
const infectedAreasList = ref(selectDataObj.zoomSelectObj.zoomSortList);
const xInterval = ref(0);
const selectValue = ref("category");
const infoData = ref({
  programTotal: 0,
  controlledEndTotal: 0,
  controlEndTotal: 0,
  infectedHostTotal: 0,
  infectedPortTotal: 0,
});

const title2 = ref("木马事件趋势");
const lineChartData = ref([]) as any;
const linexAxisData = ref([]) as any;
const currentTabName = ref(1);
const isShow = ref(true);
// 分页参数
const page = ref(1);
const total = ref(0);
const size = ref(20);
const itemList = ref([
  {
    img: internetIp,
    title: "事件数量（个）",
    num: infoData.value.programTotal,
  },
  {
    img: internetIp,
    title: "受控端数量（个）",
    num: infoData.value.controlledEndTotal,
  },
  {
    img: internetNum,
    title: "控制端数量（个）",
    num: infoData.value.controlEndTotal,
  },
]);
/**
 * @function 监听select选择
 * @author tqh
 */
watch(selectValue, () => {
  resetInnfectedList();
  getInfoData();
});

const dateRef = ref(4);
const dateOptions = ref(dateSwitchOptions);
const isShowLine = ref(true);
watch(dateRef, () => {
  console.log(dateRef);
  isShowLine.value = false;
  setTimeout(() => {
    isShowLine.value = true;
  }, 50);
  if (dateRef.value == 3) {
    xInterval.value = 2;
  } else if (dateRef.value == 1) {
    xInterval.value = 1;
  } else {
    xInterval.value = 0;
  }
  console.log(xInterval.value);
  getEventList();
  getInfoData();
});
const innfectedList = ref([]) as any;
/**
 * @function 初始化表格表头
 * @author tqh
 */
const restTableList = () => {
  selectValue.value = "category";
  let type = "";
  title2.value =
    currentTabName.value == 1
      ? "僵尸事件趋势"
      : currentTabName.value == 2
        ? "木马事件趋势"
        : "蠕虫事件趋势";
  if (currentTabName.value == 1) {
    tableColumns.value = tableColumnlist;
    tableColumns.value[2].label = "僵尸类型";
    tableColumns.value[2].prop = "zombieType";

    // tableColumns.value[13].label = "僵尸分级";
    // tableColumns.value[13].prop = "zombieRating";

    queryColumns.value = JSON.parse(JSON.stringify(queryZoomList));
    queryFormData.value = JSON.parse(JSON.stringify(serachZoomData));

    type = "僵尸类型";
  } else if (currentTabName.value == 2) {
    tableColumns.value = tableColumnlist;
    tableColumns.value[2].label = "木马类型";
    tableColumns.value[2].prop = "trojanType";
    // tableColumns.value[13].label = "木马分级";
    // tableColumns.value[13].prop = "rating";

    queryColumns.value = JSON.parse(JSON.stringify(queryColumnsList));
    queryFormData.value = JSON.parse(JSON.stringify(serachMuData));

    type = "木马类型";
  } else if (currentTabName.value == 3) {
    tableColumns.value = tableColumnWormlist;
    queryColumns.value = JSON.parse(JSON.stringify(queryWormList));
    queryFormData.value = JSON.parse(JSON.stringify(serachWormData));

    type = "蠕虫类型";
  }
  getDictList(type);
};
/**
 * @function 初始化排名列表
 * @author tqh
 */
const resetInnfectedList = () => {
  if (currentTabName.value == 2 || currentTabName.value == 1) {
    if (currentTabName.value == 2) {
      selectDataObj.zoomSelectObj.zoomSortList[1].title = "木马类型";
    } else {
      selectDataObj.zoomSelectObj.zoomSortList[1].title = "僵尸类型";
    }
    if (selectValue.value == "category") {
      infectedAreasList.value = selectDataObj.zoomSelectObj.zoomSortList;
    } else if (selectValue.value == "operator") {
      infectedAreasList.value = selectDataObj.zoomSelectObj.zoomOperatorList;
    } else {
      infectedAreasList.value = selectDataObj.zoomSelectObj.zoomZoneList;
    }
  } else if (currentTabName.value == 3) {
    if (selectValue.value == "category") {
      infectedAreasList.value = selectDataObj.wormSelectObj.wormSortList;
    } else if (selectValue.value == "operator") {
      infectedAreasList.value = selectDataObj.wormSelectObj.wormOperatorList;
    } else {
      infectedAreasList.value = selectDataObj.wormSelectObj.wormZoneList;
    }
  }
};
// 查询参数
const queryColumns = ref(JSON.parse(JSON.stringify(queryZoomList)));
const queryFormData = ref(JSON.parse(JSON.stringify(serachZoomData)));

const tableColumns = ref(JSON.parse(JSON.stringify(tableColumnlist)));
tableColumns.value[2].label = "僵尸类型";
tableColumns.value[2].prop = "zombieType";
// tableColumns.value[13].label = "僵尸分级";
// tableColumns.value[13].prop = "zombieRating";
const tableData = ref([]) as any;
/**
 * @author tqh
 * @description 获取表格数据
 */
const getTableData = async (type, loading?) => {
  let objData = deepCopy(queryFormData.value);
  if (type == "init") {
    page.value = 1;
  }
  if (queryFormData.value.time) {
    if (queryFormData.value.time.length > 0) {
      objData.startTime = queryFormData.value.time[0] + " 00:00:00";
      objData.endTime = queryFormData.value.time[1] + " 23:59:59";
    }
    delete objData.time;
  }
  const params = {
    pageNum: page.value,
    pageSize: size.value,
    ...objData,
  };
  try {
    let send = getZoomList;
    if (currentTabName.value == 1) {
      send = getZoomList;
    } else if (currentTabName.value == 2) {
      send = getMuList;
    } else {
      send = getWormList;
    }
    params.yaLoading = loading;
    const res = await send(params);
    if (res.code !== 200) return;
    if (res.data) {
      tableData.value = res.data.rows || [];
      total.value = res.data.total;
    }
  } catch (error) {
    console.log(error);
  }
};
/**
 * @description: 表格多选操作
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const selectData = ref([]);
const handleSelect = (data) => {
  selectData.value = data;
};
/**
 * @description: 查询操作
 * @param {*}
 * @return {*}
 * @author: tqh
 */
const search = () => {
  getTableData("init");
};
/**
 * @description: 重置操作
 * @param {*}
 * @return {*}
 * @author: tqh
 */
const reset = () => {
  console.log("调用 reset");
  getTableData("init");
};
/**
 * @description: 页面容量切换
 * @param {*}
 * @return {*}
 * @author: tqh
 */
const sizeChange = function (val: number) {
  size.value = val;
  page.value = 1;
  getTableData("page");
};

/**
 * @description: 分页切换
 * @param {*}
 * @return {*}
 * @author: tqh
 */
const currentChange = function (val: number) {
  page.value = val;
  getTableData("page");
};
/**
 * @description: 获取按钮
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const buttons = ref([]) as any;
const getLeftButtons = () => {
  buttons.value = [
    {
      plain: true,
      text: "批量导出",
    },
  ];
};
/**
 * @description: 批量 / 全部 导出
 * @param {*} type batch | all
 * @return {*}
 * @author: tqh
 */
const tableBtnClick = async (type) => {
  console.log("调用 handleExport", type);
  if (selectData.value.length === 0) {
    ElMessage.warning("请选择要批量导出的数据");
    return;
  }
  const data = selectData.value.map((item) => item.id);

  handleExportRequest(data);
};

/**
 * @description: 批量 / 全部 导出请求
 * @param {*} data
 * @return {*}
 * @author: tqh
 */
const handleExportRequest = async (data) => {
  console.log(data);
  try {
    const params = {
      ids: data.toString(),
    };
    let send = exportZoomRequest;
    if (currentTabName.value == 1) {
      send = exportZoomRequest;
    } else if (currentTabName.value == 2) {
      send = exportMuRequest;
    } else {
      send = exportWormRequest;
    }
    const res = await send(params);
    if (res) {
      downLoadFile(res, tabs.value[currentTabName.value - 1].title);
      getTableData("");
    }
  } catch (error) {
    console.log(error);
  }
};
/**
 * @description: 获取查询字典列表
 * @param {*}
 * @return {*}
 * @author: tqh
 */
const getDictList = async (type) => {
  try {
    const params = {
      dictType: type,
    };
    const res = await getDictTypeList(params);
    let arr = [];
    res.forEach((item) => {
      arr.push({
        value: item.dictValue,
        label: item.dictValue,
      });
    });
    if (type != "互联网僵木蠕分级") {
      queryColumns.value[1].options = arr;
    } else {
      queryColumns.value[2].options = arr;
    }
    console.log(arr, "dsdsds===");
    // queryColumns[4].options = arr
  } catch (error) {
    console.log(error);
  }
};
/**
 * @description: 获取事件趋势列表
 * @param {*}
 * @return {*}
 * @author: tqh
 */
const getEventList = async () => {
  try {
    const params = {
      type: dateRef.value,
    };
    let send = getZoomEventList;
    if (currentTabName.value == 1) {
      send = getZoomEventList;
    } else if (currentTabName.value == 2) {
      send = getMuEventList;
    } else {
      send = getWormEventList;
    }
    lineChartData.value = [];
    linexAxisData.value = [];
    const res = await send(params);
    if (res.code == 200 && res.data) {
      // lineChartData.value = res.data.data
      let charList = [];
      charList.push({
        data: res.data.data,
        name: "",
      });
      lineChartData.value = charList;
      console.log(lineChartData.value);
      if (dateRef.value == 3) {
        let arr = res.data.xaxisData;
        // let arrList = []
        // arr.forEach((item,index) => {
        //   let i = index+1
        //   console.log(i)
        //   if(i % 6 == 0) {
        //     arrList.push(item)
        //   }
        // })
        linexAxisData.value = arr;
      } else {
        linexAxisData.value = res.data.xaxisData;
      }
      console.log(linexAxisData.value, "==========================");
    }
  } catch (error) {
    console.log(error);
  }
};
/**
 * @description: 获取事件详细数据
 * @param {*}
 * @return {*}
 * @author: tqh
 */
const getInfoData = async () => {
  try {
    const params = {
      type: dateRef.value,
      groupType: selectValue.value,
    };
    let send = getZoomInfoList;
    if (currentTabName.value == 1) {
      send = getZoomInfoList;
    } else if (currentTabName.value == 2) {
      send = getMuInfoList;
    } else {
      send = getWormInfoList;
    }
    const res = await send(params);
    if (res.code == 200 && res.data) {
      infoData.value = res.data;
      innfectedList.value = [];
      let list = [];
      let objSelData = {};
      console.log(infoData.value, "infoData.valueinfoData.valueinfoData.value");
      if (currentTabName.value == 1 || currentTabName.value == 2) {
        itemList.value[0].num = infoData.value.programTotal;
        itemList.value[1].title = "受控端数量（个）";
        itemList.value[1].num = infoData.value.controlledEndTotal;
        itemList.value[2].title = "控制端数量（个）";
        itemList.value[2].num = infoData.value.controlEndTotal;

        if (currentTabName.value == 1) {
          list = res.data.zombieEventsDOList;
        } else {
          list = res.data.trojanEventsDOList;
        }
        let arrList = list.map((item) => {
          let name;
          if (selectValue.value == "category") {
            if (currentTabName.value == 1) {
              name = item.zombieCategory;
            } else {
              name = item.trojanCategory;
            }
          } else if (selectValue.value == "operator") {
            name = item.controlledEndOperator;
          } else {
            name = item.controlledEndArea;
          }
          return {
            name: name,
            programNum: item.programNum,
            hostNum: item.controlledEndNum,
            portNum: item.controlEndNum,
          };
        });
        innfectedList.value = arrList;
      } else {
        itemList.value[0].num = infoData.value.programTotal;
        itemList.value[1].title = "感染主机数量（个）";
        itemList.value[1].num = infoData.value.infectedHostTotal;
        itemList.value[2].title = "感染端口数量（个）";
        itemList.value[2].num = infoData.value.infectedPortTotal;
        list = res.data.wormEventsDOList;
        let arrList = list.map((item) => {
          let name;
          if (selectValue.value == "category") {
            name = item.wormCategory;
          } else if (selectValue.value == "operator") {
            name = item.operator;
          } else {
            name = item.infectedArea;
          }
          return {
            name: name,
            programNum: item.programNum,
            hostNum: item.infectedHostNum,
            portNum: item.infectedPortNum,
          };
        });
        console.log(arrList);
        innfectedList.value = arrList;
      }
    }
    console.log(innfectedList, "innfectedListinnfectedList===");
  } catch (error) {
    console.log(error);
  }
};
const init = () => {
  console.log(queryFormData, "queryFormDataqueryFormDataqueryFormData");
  getTableData("init", "loading");
  getDictList("僵尸类型");
  getDictList("互联网僵木蠕分级");
  getEventList();
  getInfoData();
};

/**
 * @function 监听tab切换
 * @author tqh
 */
watch(
  currentTabName,
  () => {
    restTableList();
    isShow.value = false;
    setTimeout(() => {
      isShow.value = true;
    }, 50);
    resetInnfectedList();
    getDictList("互联网僵木蠕分级");
    getEventList();
    getTableData("init");
    getInfoData();
  },
  {
    immediate: true,
  }
);

onMounted(() => {
  init();
  getLeftButtons();
});
</script>

<template>
  <div class="global-statistics-container">
    <CommonTabs :tabs="tabs" class="ya-tabs" v-model:tabValue="currentTabName" v-model:roundValue="dateRef"
      :roundOptions="dateOptions" />
    <div class="base-table-card ya-bg-colors">
      <YaPageContent v-if="isShow" templateHeight="calc(100vh - 56px - 40px - 12px - 52px)" :formData="queryFormData"
        :formColumns="queryColumns" :tableData="tableData" :tableColumns="tableColumns" searchLabelWidth="110px"
        @search="search" @reset="reset" :currentPage="page" :pageSize="size" :total="total" @sizeChange="sizeChange"
        @selectionChange="handleSelect" @currentChange="currentChange" :leftButtons="buttons"
        @tableBtnClick="tableBtnClick" targerScrollName="ya-page-container">
        <template #pageContentTop>
          <div class="base-card ya-bg-colors">
            <div class="custom-row-item">
              <CommonCardVue :title="title2" class="custom-row-item-height">
                <LineChart v-if="isShowLine" :chartData="lineChartData" :xAxisData="linexAxisData" :xInterval="xInterval"
                  :xFontSize="8" title="单位：个" :gridBottom="10" :showSymbol="true" :areaGradientColor="[
                    'rgba(49, 150, 250, 0.3)',
                    'rgba(49, 150, 250, 0)',
                  ]" />
              </CommonCardVue>
            </div>
            <div class="base-card-content">
              <div class="base-card-item" v-for="(item, index) in itemList" :key="index">
                <div class="base-card-item-imgBg">
                  <img class="base-card-item-img" v-if="item.title != '事件数量（个）'" :src="item.img" />
                  <svg v-else t="1668585708283" class="icon icon-chengxushuliang" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5066" width="16" height="16">
                    <path
                      d="M438.848 336.448c0 56.32-46.08 102.4-102.4 102.4H102.4c-56.32 0-102.4-46.08-102.4-102.4V102.4C0 46.08 46.08 0 102.4 0h234.048c56.32 0 102.4 46.08 102.4 102.4v234.048zM1024 921.6c0 56.32-46.08 102.4-102.4 102.4h-234.048c-56.32 0-102.4-46.08-102.4-102.4v-234.048c0-56.32 46.08-102.4 102.4-102.4H921.6c56.32 0 102.4 46.08 102.4 102.4V921.6z m0-585.152c0 56.32-46.08 102.4-102.4 102.4h-234.048c-56.32 0-102.4-46.08-102.4-102.4V102.4c0-56.32 46.08-102.4 102.4-102.4H921.6c56.32 0 102.4 46.08 102.4 102.4v234.048zM438.848 921.6c0 56.32-46.08 102.4-102.4 102.4H102.4C46.08 1024 0 977.92 0 921.6v-234.048c0-56.32 46.08-102.4 102.4-102.4h234.048c56.32 0 102.4 46.08 102.4 102.4V921.6z"
                      p-id="5067" fill="#ffffff"></path>
                  </svg>
                </div>
                <div>
                  <div class="base-card-item-title ya-primary-text">
                    {{ item.title }}
                  </div>
                  <div class="base-card-item-num ya-regular-text">
                    {{ bigNumberTransform(item.num) }}
                  </div>
                </div>
              </div>
            </div>
            <di class="infected-areas-center">
              <div class="infected-areas-serach">
                <div class="infected-areas-serach-vale">
                  <el-select v-model="selectValue" placeholder="请选择">
                    <el-option v-for="item in optionsList" :key="item.value" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </div>
              </div>
              <div class="infected-areas-warp">
                <div class="infected-areas ya-primary-text">
                  <div class="infected-areas-item" v-for="(item, index) in infectedAreasList" :key="index"
                    :class="index == 0 ? 'infected-areas-item-first' : ''">
                    {{ item.title }}
                  </div>
                </div>
                <ElScrollbar>
                  <div class="infected-areas-con">
                    <div v-if="innfectedList.length > 0">
                      <div class="infected-areas-content ya-fill-color ya-regular-text"
                        v-for="(item, index) in innfectedList" :key="index">
                        <div class="infected-areas-content-width infected-areas-item-first">
                          <div class="infected-areas-content-num" :style="'background: ' +
                            (index < 3
                              ? (getThemeColor().colorList &&
                                getThemeColor().colorList[index]) ||
                              'rgb(4, 130, 190)'
                              : '')
                            ">
                            {{ index + 1 }}
                          </div>
                        </div>
                        <div class="infected-areas-content-width">
                          {{ item.name }}
                        </div>
                        <div class="infected-areas-content-width">
                          {{ bigNumberTransform(item.programNum) }}
                        </div>
                        <div class="infected-areas-content-width">
                          {{ bigNumberTransform(item.hostNum) }}
                        </div>
                        <div class="infected-areas-content-width">
                          {{ bigNumberTransform(item.portNum) }}
                        </div>
                      </div>
                    </div>
                    <ya-empty v-else></ya-empty>
                  </div>
                </ElScrollbar>
              </div>
            </di>
          </div>
        </template>
        <template #active="item">
          <div v-if="item.item.zombieRating">
            <div v-if="currentTabName == 1">
              <div class="base-table-card-flex">
                <div class="triangle" :class="[
                  item.item.zombieRating == '高危'
                    ? 'triangle-tall'
                    : item.item.zombieRating == '中危'
                      ? 'triangle-center'
                      : 'triangle-low',
                ]"></div>
                <div :class="[
                  item.item.zombieRating == '高危'
                    ? 'active-tall'
                    : item.item.zombieRating == '中危'
                      ? 'active-center'
                      : 'active-low',
                ]">
                  {{ item.item.zombieRating }}
                </div>
              </div>
            </div>
          </div>
          <div v-if="item.item.rating">
            <div v-if="currentTabName == 2 || currentTabName == 3">
              <div class="base-table-card-flex">
                <div class="triangle" :class="[
                  item.item.rating == '高危'
                    ? 'triangle-tall'
                    : item.item.rating == '中危'
                      ? 'triangle-center'
                      : 'triangle-low',
                ]"></div>
                <div :class="[
                  item.item.rating == '高危'
                    ? 'active-tall'
                    : item.item.rating == '中危'
                      ? 'active-center'
                      : 'active-low',
                ]">
                  {{ item.item.rating }}
                </div>
              </div>
            </div>
          </div>
        </template>
      </YaPageContent>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ya-card {
  padding-bottom: 0 !important;
}

.icon-chengxushuliang {
  color: #fff;
  position: relative;
  top: 9px;
}

.global-statistics-container {
  width: 100%;
  min-width: 1200px;
  // height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .custom-row-item {
    // height: 300px;
    width: 50%;

    .ya-card {
      border-width: 0;
    }

    .custom-row-item-height {
      height: 270px;
      padding-right: 0;
    }

    // min-width: 600px;
    // width: calc(100vh);
  }

  .base-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-width: 1200px;
    // background: #ffffff;
    border-radius: 4px;

    .base-card-content {
      margin-top: 52px;

      .base-card-item {
        display: flex;
        align-items: center;
        width: 178px;
        height: 56px;
        background: linear-gradient(90deg,
            rgba(0, 149, 255, 0) 0%,
            rgba(0, 149, 255, 0.05) 100%);
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        margin-bottom: 8px;

        .base-card-item-title {
          font-size: 12px;
          color: rgba(0, 0, 0, 0.4);
        }

        .base-card-item-num {
          font-size: 16px;
          color: rgba(0, 0, 0, 0.65);
        }

        .base-card-item-imgBg {
          width: 36px;
          height: 36px;
          text-align: center;
          border-radius: 50%;
          background: rgba(4, 130, 190, 1);
          margin-right: 12px;
          margin-left: 16px;

          .base-card-item-img {
            width: 20px;
            height: 20px;
            margin-top: 7px;
          }
        }
      }
    }

    .infected-areas-center {
      width: 38%;

      .infected-areas-serach {
        .infected-areas-serach-vale {
          text-align: right;
          margin-right: 20px;
        }

        .el-select {
          width: 154px;
        }
      }

      .infected-areas-warp {
        margin-left: 16px;
        margin-right: 20px;

        .infected-areas {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 12px;
          color: rgba(0, 0, 0, 0.4);
          margin-bottom: 8px;
          margin-top: 8px;

          .infected-areas-item {
            // margin-right: 20px;
            width: 180px;
            text-align: center;
          }

          .infected-areas-item:first-child {
            text-align: left;
            margin-left: 10px;
          }
        }

        .infected-areas-con {
          height: 176px;

          .infected-areas-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.65);
            background: #f4f4f4;
            border-radius: 4px;
            padding: 7px;
            margin-bottom: 12px;

            .infected-areas-content-width {
              width: 180px;
              text-align: center;
            }

            .infected-areas-content-num {
              width: 16px;
              height: 16px;
              line-height: 16px;
              border-radius: 50%;
              text-align: center;
              color: #fff;
              font-weight: bold;
              background: rgba(0, 0, 0, 0.2);
              margin-left: 10px;
            }

            .access-rank-first {
              background: #e65857 !important;
            }

            .access-rank-secend {
              background: #f18301 !important;
            }

            .access-rank-third {
              background: #0095ff !important;
            }
          }

          .no-data {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            text-align: center;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.21);

            img {
              width: 100%;
            }
          }
        }
      }
    }
  }

  .base-table-card {
    width: 100%;
    min-width: 1200px;
    // height: calc(100vh - 56px - 40px - 16px - 40px - 222px - 12px - 24px);
    // background: #ffffff;
    border-radius: 4px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .base-table-card-flex {
      display: flex;
      align-items: center;

      .triangle {
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 8px solid #d90808;
        margin-right: 6px;
      }

      .triangle-tall {
        border-bottom: 8px solid #d90808;
      }

      .triangle-center {
        border-bottom: 8px solid #f18301;
      }

      .triangle-low {
        border-bottom: 8px solid #0095ff;
      }

      .active-tall {
        color: #d90808;
      }

      .active-center {
        color: #f18301;
      }

      .active-low {
        color: #0095ff;
      }
    }

    .page-container {
      margin-top: 24px;
      margin-left: auto;
    }
  }
}

.infected-areas-item-first {
  width: 80px !important;
}
</style>
