<!-- 设备列表 -->
<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>