persagy_topo_editer/src/components/editview/leftToolBar/equipmentList.vue

<!-- 设备列表 -->
<template>
  <div class="equip-list">
    <!-- 筛选 -->
    <div class="clp">
      <Input
        class="baseItemInput"
        :width="188"
        iconType="search"
        placeholder="搜索元素名称"
        v-model="baseItemVal"
        @pressEnter="pressEnter"
      />
      <Popover type="confirm" placement="bottom-center">
        <template slot="content">
          <div class="">
            <div>
              <span>分区类型</span>
              <Cascader
                multiple
                allText="全部"
                :data="cascaderData6"
                showPanel
                width="300"
                @change="changeItem"
                @confirm="changeItem"
              ></Cascader>
            </div>
            <div>
              <span>建筑类型</span>
              <Cascader
                multiple
                allText="全部"
                :data="cascaderData6"
                showPanel
                width="300"
                @change="changeItem"
                @confirm="changeItem"
              ></Cascader>
            </div>
            <el-button class="reset" type="text">重置</el-button>
          </div>
        </template>
        <span
          @click="screen"
          class="icon iconfont icon-shaixuan shaixuan"
        ></span>
      </Popover>
    </div>
    <!-- 设备 list -->
    <div class="porfess" v-for="(items, index) in equipmentList" :key="index">
      <div @click="collapse(items)" class="porfess-title">
        <span>{{ items.porfess }}</span>
        <i
          v-bind:class="[
            items.isShow ? 'caret-icon-active' : 'caret-icon',
            'el-icon-arrow-down',
          ]"
        ></i>
      </div>
      <el-collapse-transition>
        <div v-show="items.isShow">
          <div class="equipType" v-for="(item, i) in items.children" :key="i">
            <div class="equipType-title" @click="collapse(item)">
              <i
                v-bind:class="[
                  item.isShow ? 'caret-icon-active' : 'caret-icon',
                  'el-icon-caret-bottom',
                ]"
              ></i>
              <span>{{ item.equipType }}</span>
            </div>
            <el-collapse-transition>
              <ul @mouseout="deletehover" v-show="item.isShow">
                <li
                  @click="getEquipItem('lengganji.svg')"
                  v-for="(a, b) in item.children"
                  :key="b"
                  @mouseover="sethover(b)"
                >
                  <div class="left">
                    <div class="showEyes">
                      <Icon v-show="hoverIndex == b" name="preview" />
                    </div>
                    <div class="icon"></div>
                  </div>
                  <div class="right">
                    <div class="t">{{ a.name }}</div>
                    <div class="b">W3456112345093</div>
                  </div>
                  <div class="icons">
                    <Icon v-show="hoverIndex == b" name="more" />
                  </div>
                </li>
              </ul>
            </el-collapse-transition>
          </div>
        </div>
      </el-collapse-transition>
    </div>

    <!-- 添加设备 -->
    <div class="addbtn" @click="openAddEqupModle">
      <i class="el-icon-plus"></i>
      添加设备示例
    </div>
  </div>
</template>
<script>
import { mapMutations, mapState } from "vuex";
import { equipmentList } from "./equipData";
export default {
  data() {
    return {
      cascaderData6: [
        {
          title: "United Kingdom",
          id: "id1",
          children: [
            { id: "id2", title: "London" },
            { id: "id3", title: "Edinburgh" },
            { id: "id4", title: "Cardiff" },
            { id: "id5", title: "Birmingham" },
            { id: "id6", title: "Liverpool" },
            { id: "id7", title: "Oxford" },
            { id: "id8", title: "Plymouth" },
          ],
        },
        {
          title: "AMERICAN",
          id: "id9",
          children: [
            { id: "id10", title: "Chicago" },
            { id: "id11", title: "Philadelphia" },
            { id: "id12", title: "Boston" },
            { id: "id13", title: "Houston" },
            { id: "id14", title: "Atlanta" },
            { id: "id15", title: "San Francisco" },
          ],
        },
        {
          title: "CHINA",
          id: "id16",
          children: [
            { id: "id17", title: "BeiJing" },
            { id: "id18", title: "ShangHAI" },
            {
              title: "GuiYang",
              id: "id19",
              children: [
                { id: "id20", title: "Qingyan" },
                { id: "id21", title: "Guian" },
              ],
            },
            { id: "id22", title: "ZunYi" },
          ],
        },
        {
          title: "韩国",
          id: "id23",
          children: [
            { id: "id24", title: "首尔" },
            { id: "id25", title: "仁川" },
            { id: "id26", title: "釜山" },
            {
              id: "id27",
              title: "蔚山",
              children: [
                { id: "id10", title: "Chicago" },
                { id: "id11", title: "Philadelphia" },
                { id: "id12", title: "Boston" },
                { id: "id13", title: "Houston" },
                { id: "id14", title: "Atlanta" },
                { id: "id15", title: "San Francisco" },
              ],
            },
          ],
        },
      ],
      equipmentList: [],
      hoverIndex: -1,
      baseItemVal: "",
    };
  },
  methods: {
    ...mapMutations(["SETCHOICELEHEND", "SETLEGENDOBJ"]),
    // 打开添加弹窗
    openAddEqupModle() {
      this.$emit("openAddEqupModle");
    },
    // 设置hover显示
    sethover(b) {
      this.hoverIndex = b;
    },
    deletehover() {
      this.hoverIndex = -1;
    },
    // 获取设备图例
    getEquipItem(id) {
      const obj = {
        url: id,
      };
      this.SETLEGENDOBJ(obj);
      const cmd = "EditEuqipment";
      this.SETCHOICELEHEND(cmd);
    },
    // 筛选
    screen() {},
    // 判断是否再数组中
    isinlist(item, idName, name, list) {
      let index = -1;
      list.forEach((item, i) => {
        if (item[idName] == item[idName]) {
          index = i;
        }
      });
      if (index < 0) {
        list.push({
          [idName]: item[idName],
          [name]: item[name],
          isShow: true,
          children: [],
        });
      }
      return index;
    },
    // 折叠
    collapse(item) {
      item.isShow = !item.isShow;
    },
    //
    changeItem() {},
    pressEnter(){}
  },
  computed: {
    ...mapState(["editCmd"]),
    // equipmentList
  },
  mounted() {
    let list = [];
    // 获取树专业
    equipmentList.forEach((items) => {
      const porfessId = items.porfessId;
      const equipTypeId = items.equipTypeId;
      const listIndex = this.isinlist(items, "porfessId", "porfess", list);
      // 第二次;
      list.forEach((listItem) => {
        this.isinlist(items, "equipTypeId", "equipType", listItem.children);
        // 第三层
        if (porfessId == listItem.porfessId) {
          listItem.children.forEach((item) => {
            if (equipTypeId == item.equipTypeId) {
              item.children.push({
                name: items.name,
                id: items.id,
                url: items.url,
              });
            }
          });
        }
      });
    });
    this.equipmentList = list;
  },
};
</script>
<style lang="less" scoped>
div {
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.equip-list {
  width: 100%;
  height: 100%;
  position: relative;
  .clp {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 12px;
    .shaixuan {
      cursor: pointer;
    }
  }
  .porfess {
    .porfess-title {
      width: 100%;
      padding: 16px 16px 0 16px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
    }
    .equipType {
      .equipType-title {
        margin: 20px 0 20px 18px;
        cursor: pointer;
      }
      ul {
        li {
          width: 100%;
          height: 48px;
          display: flex;
          cursor: pointer;
          &:hover {
            background: #f5f6f7;
          }
          .left {
            width: 60px;
            display: flex;
            height: 100%;
            align-items: center;
            .showEyes {
              width: 28px;
              height: 28px;
            }
            .icon {
              width: 28px;
              height: 28px;
              border-radius: 50% 50%;
              background: red;
            }
          }
          .right {
            padding: 4px;
            box-sizing: border-box;
            .t {
              font-size: 14px;
              color: #1f2429;
            }
            .b {
              font-size: 10px;
              color: #8d9399;
            }
          }
        }
      }
    }
  }

  .addbtn {
    width: 100%;
    height: 46px;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.11);
    cursor: pointer;
    &:hover {
      color: #0091ff;
    }
  }
  .caret-icon {
    animation: nowhirling 0.2s linear forwards;
  }
  .caret-icon-active {
    animation: whirling 0.2s linear forwards;
  }
}
.reset {
  position: absolute;
  bottom: 16px;
  left: 24px;
}
@keyframes whirling {
  0% {
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg); /* Internet Explorer */
    -moz-transform: rotate(-90deg); /* Firefox */
    -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
    -o-transform: rotate(-90deg); /* Opera */
  }
  100% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg); /* Internet Explorer */
    -moz-transform: rotate(0deg); /* Firefox */
    -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
    -o-transform: rotate(0deg); /* Opera */
  }
}
@keyframes nowhirling {
  0% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg); /* Internet Explorer */
    -moz-transform: rotate(0deg); /* Firefox */
    -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
    -o-transform: rotate(0deg); /* Opera */
  }
  100% {
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg); /* Internet Explorer */
    -moz-transform: rotate(-90deg); /* Firefox */
    -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
    -o-transform: rotate(-90deg); /* Opera */
  }
}
</style>