scd_tools_ui/src/pages/netStructPicture/components/scdVisual.vue

<template>
  <div class="main">
    <!-- 统计和搜索栏 -->
    <div class="search-nav">
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        label-width="68px"
      >
        <el-form-item
          ><div class="nav-item">
            总计 <span>{{ count }}</span> 个设备
          </div></el-form-item
        >
        <el-form-item label="电压等级" prop="voltage_level_id">
          <el-select
            ref="levelRef"
            v-model="queryParams.voltage_level_id"
            placeholder="请选择电压等级"
            clearable
            @change="changeLevel"
          >
            <el-option
              v-for="dict in voltageLevel"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="间隔" prop="area_id">
          <el-select
            ref="levelRef"
            v-model="queryParams.area_id"
            placeholder="请选择间隔"
            @change="changeLevel"
            clearable
          >
            <el-option
              v-for="dict in areaData"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设备类型" prop="device_type_id">
          <el-select
            ref="levelRef"
            v-model="queryParams.device_type_id"
            placeholder="请选择设备类型"
            @change="changeLevel"
            clearable
          >
            <el-option
              v-for="dict in iedTypeData"
              :key="dict.code"
              :label="dict.name"
              :value="dict.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="快捷搜索" prop="iedrela">
          <el-select
            v-model="queryParams.iedrela"
            placeholder="请输入IED编码或名称"
            multiple
            filterable
            remote
            reserve-keyword
            :remote-method="remoteMethod"
            :loading="loadingsearch"
            @clear="showIedList = false"
          >
            <template #header>
              <span class="search-header" v-if="searchIedList.length > 0">
                为您找到 <span>{{ searchIedList.length }}</span> 个相关结果
              </span>
            </template>
            <el-option
              v-for="dict in searchIedList"
              :key="dict.node_id"
              :label="dict.desc"
              :value="dict.node_id"
            ></el-option>
          </el-select>
          <!-- <el-input
            ref="selectInputRef"
            v-model="queryParams.iedrela"
            placeholder="请输入IED编码或名称"
            :suffix-icon="Search"
            clearable
            @change="searchInput"
            v-else
          /> -->
        </el-form-item>
      </el-form>
    </div>
    <el-scrollbar height="54vh" v-loading="loading" v-if="loadDating">
      <div
        v-for="(item, index) in voltageLevel"
        :key="index"
        style="padding-right: 10px"
      >
        <el-row class="contanier" v-if="item.id != 'alls'">
          <el-col :span="3">
            <div
              :class="
                item.levelData.length > 7 ? 'file_img' : 'file_img file_lim'
              "
            >
              {{ item.name }}
            </div>
          </el-col>
          <el-col :span="20" class="ied_item">
            <div
              class="ied_item_child"
              v-for="(itemChild, indexChild) in item.levelData"
              :key="indexChild"
              @click="changeLevel(itemChild.id, itemChild.name)"
            >
              <el-tooltip
                :content="itemChild.name"
                effect="light"
                placement="top"
                ><div>{{ itemChild.name }}</div></el-tooltip
              >
              <img :src="scdIed" alt="" />
            </div>
          </el-col>
        </el-row>
      </div>
    </el-scrollbar>
  </div>
  <div class="container-none" v-if="!loading && !loadDating">
    <img src="../../../assets/image/create.png" alt="" />
    该变电站还未签入任何SCD文件!
  </div>
  <scd-dialog-index
    :open="open"
    @done="done"
    :dialogData="dialogData"
    :checkLabel="checkLabel"
  ></scd-dialog-index>
</template>
<script setup>
import {
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
  toRefs,
  nextTick,
  provide,
} from "vue";
import scdIed from "@/assets/image/instruct/scdIed.png";
import {
  iedTypelist,
  areaList,
  scdIedRelation,
  areaIedList,
} from "@/api/iedNetwork";
import { useDataStore } from "@/store/modules/golbal-data";
import scdDialogIndex from "./scdDialogIndex";
import { useRoute } from "vue-router";
import { Search } from "@element-plus/icons-vue";
const userStoreCode = useDataStore();
const route = useRoute();
// const scdIdValue = 1248000337;
const scdIdValue = route.query.id;
const loadingsearch = ref(false); //快捷搜索
const data = reactive({
  queryParams: {
    scd_id: scdIdValue,
  },
});
const loading = ref(true);
const loadDating = ref(false);
const open = ref(false);
const { queryParams } = toRefs(data);
// 表单重置
const reset = () => {
  queryParams.value = {
    scd_id: scdIdValue,
    voltage_level_id: null, //电压等级
    area_id: null, //间隔
    device_type_id: null, //装置类型
  };
};
const remoteMethod = (value) => {
  searchInput(value);
};
const areaData = ref([]); //获取间隔
const allLevel = ref([]); // 获取所有电压
const all = [{ name: "全部", id: "alls" }];
const allIedType = [{ name: "全部", code: "alls" }];
const voltageLevel = ref([{ name: "全部", id: "alls" }]); //电压等级
const areaType = ref([]);
const getArea = async () => {
  const areaRes = await areaList({ scd_id: scdIdValue });
  if (!areaRes.data) {
    voltageLevel.value = [];
    loading.value = false;
    loadDating.value = false;
    return;
  }
  loading.value = false;
  areaData.value = [...all, ...areaRes.data]; //搜索处的间隔
  //处理电压等级的搜索展示数据
  const levelData = [
    ...new Set(areaRes.data.map((itemlevel) => itemlevel.voltage_level)),
  ];
  if (!levelData) return;
  levelData.forEach((myLevelItem) => {
    const findData = allLevel.value.find((allItem) => {
      return allItem.id == myLevelItem;
    });
    if (findData) {
      voltageLevel.value.push(findData);
    }
  });
  //处理主界面的数据展示
  if (!voltageLevel.value) return;
  voltageLevel.value.forEach((item) => {
    if (item.id == "alls") return;
    item.levelData = [];
    const findType = areaRes.data.filter((itemType) => {
      return itemType.voltage_level == item.id;
    });
    if (findType) {
      item.levelData.push(...findType);
    }
  });
  loadDating.value = true;
};

//设备类型
const iedTypeData = ref([]);
const getTypelist = async () => {
  const typeRes = await iedTypelist({ scd_id: scdIdValue });
  iedTypeData.value = typeRes.data ? [...allIedType, ...typeRes.data] : [];
};
const iedName = ref([]);
const showIedList = ref(false);
//搜索ied编码或名称
const searchIedList = ref([]);
const selectRef = ref(null);
const searchInput = (value) => {
  loadingsearch.value = true;
  setTimeout(() => {
    if (value && iedName.value) {
      loadingsearch.value = false;
      showIedList.value = true;
      searchIedList.value = Object.values(iedName.value).filter((item) => {
        const lowercaseValue = value.toLowerCase(); //不区分大小写
        const iedNameLower = item.ied_name ? item.ied_name.toLowerCase() : null;
        const descLower = item.desc ? item.desc.toLowerCase() : null;
        return (
          (iedNameLower !== null && iedNameLower.includes(lowercaseValue)) ||
          (descLower !== null && descLower.includes(lowercaseValue))
        );
      });

      // 选择框自动展开
      // nextTick(() => {
      //   selectRef.value.toggleMenu();
      // });
    } else {
      showIedList.value = false;
      searchIedList.value = [];
    }
  }, 200);
};
const count = ref(0);
const iedNameData = async () => {
  //IED编码或名称
  const iedRes = await scdIedRelation({ scd_id: scdIdValue });
  iedName.value = iedRes.data;
  count.value = iedRes.count;
};
const done = (emits) => {
  open.value = emits;
  reset();
  dialogData.value = [];
};
//选择电压
const dialogData = ref([]);
const levelRef = ref(null); //为了得到选中的label值
const checkLabel = ref("");
const changeLevel = async (value, mainValue) => {
  nextTick(() => {
    checkLabel.value = mainValue ? mainValue : levelRef.value.selectedLabel;
  });
  //如果选中的是当前选项,那么其他搜索框的内容应置为空
  Object.keys(queryParams.value).forEach((item) => {
    if (queryParams.value[item] !== value && item != "scd_id") {
      queryParams.value[item] = null;
    }
  });
  if (value == "alls") {
    //全部
    open.value = true;
    dialogData.value = iedName.value;
  } else if (value) {
    const mainClick = { scd_id: scdIdValue, area_id: value };
    const forms = mainValue ? mainClick : queryParams.value;
    open.value = true;
    dialogData.value = [];
    //搜索的弹框内容
    const searchLevel = await areaIedList(forms);
    if (!searchLevel.data) return;
    dialogData.value = Object.values(iedName.value).filter((item) => {
      return searchLevel.data.some((levelItem) => {
        return item.node_id == levelItem.ied_id;
      });
    });
  }
};
//弹窗=============
provide("scdId", scdIdValue);
onMounted(async () => {
  iedNameData();
  allLevel.value = await userStoreCode.GlobalCodes();
  getArea();
  getTypelist();
});
</script>
<style scoped lang="scss">
@mixin mid-center {
  display: flex;
  align-items: center;
}
.main {
  margin: 40px;
}
.search-nav {
  @include mid-center;
  justify-content: center;
  .nav-item {
    color: #134bea;
    font-size: 16px;
    span {
      color: #ffcb11;
      font-size: 20px;
    }
  }
  :deep(.el-form-item__label) {
    color: #1a2447;
    line-height: 40px;
  }
  :deep(.el-input) {
    height: 40px;
  }
}
.search-header {
  display: flex;
  justify-content: center;
  span {
    color: #134bea;
    padding: 0 2px;
  }
}
//主要内容版块
.contanier {
  background: #f6faff;
  box-shadow: inset 0px 0px 11px 1px rgba(188, 207, 255, 0.78);
  border-radius: 8px;
  margin-bottom: 24px;
  //   max-height: 320px;
  @include mid-center;
  overflow-y: auto;
  .file_img {
    @include mid-center;
    justify-content: center;
    background: url("~@/assets/image/instruct/file_back.png") no-repeat;
    background-size: 144px;
    width: 144px;
    height: 144px;
    margin: 24px;
    font-size: 20px;
    color: #1a2447;
    font-weight: bold;
    padding-top: 8px;
  }
  .file_lim {
    background-size: 144px 80px;
    width: 144px;
    height: 80px;
    font-size: 16px;
  }
  @media (max-width: 1220px) {
    .file_img {
      background-size: 100px;
      width: 100px;
      height: 100px;
    }
  }
  .ied_item {
    // margin: 0px 24px 10px 0;
    margin: 24px;
    margin-left: 0;
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    .ied_item_child {
      display: flex;
      flex-basis: 14%;
      flex-direction: column;
      align-items: center;
      font-size: 16px;
      cursor: pointer;
      div {
        position: relative;
        top: 10px;
        display: -webkit-box;
        /*弹性伸缩盒子模型显示*/
        -webkit-box-orient: vertical;
        /*排列方式*/
        -webkit-line-clamp: 1;
        /*显示文本行数*/
        overflow: hidden;
        /*溢出隐藏*/
      }
    }
    .ied_item_child:hover div {
      color: #255ce7;
      font-weight: 600;
    }
    img {
      width: 64px;
      height: 64px;
    }
  }
}
.container-none {
  font-size: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  & > img {
    width: 220px;
    height: 220px;
  }
}
:deep(.el-input .el-input__icon) {
  cursor: pointer;
}
</style>