|
@@ -12,46 +12,20 @@
|
|
|
@pressEnter="pressEnter"
|
|
|
@clear="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 ref="localDom" class="box-profess" id="boxprofess">
|
|
|
<div class="profess" v-show="!pressMsgData.length" v-for="items in equipmentList" :key="items.classCode">
|
|
|
+ <!-- 设备类名称 -->
|
|
|
<div @click="collapse(items)" class="profess-title">
|
|
|
<i v-bind:class="[items.isShow ? 'caret-icon-active' : 'caret-icon', 'el-icon-caret-bottom ']"></i>
|
|
|
<span class="code-name">{{ items.codeName }}</span>
|
|
|
+ <div class="action">
|
|
|
+ <Icon class="equip-edit" name="edit" @click.stop.native="editEquipment(items)" />
|
|
|
+ <Icon class="equip-delete" name="delete" @click.stop.native="deleteEquipment(items)" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <!-- 设备实例列表 -->
|
|
|
<el-collapse-transition>
|
|
|
<div v-show="items.isShow">
|
|
|
<div
|
|
@@ -61,11 +35,11 @@
|
|
|
:class="[item.visible ? 'equip-visible' : 'equip-hidden', item.selected ? 'equip-selected' : '']"
|
|
|
:key="i"
|
|
|
>
|
|
|
+ <!-- 本地名称-本地编码 -->
|
|
|
<span
|
|
|
class="local-name"
|
|
|
:title="`${item.legendData.localName}${item.legendData.localId ? '-' + item.legendData.localId : ''}`"
|
|
|
- >{{ item.legendData.localName
|
|
|
- }}<span class="local-id" :title="item.legendData.localId">-{{ item.legendData.localId }}</span>
|
|
|
+ >{{ item.legendData.localName }}<span class="local-id">-{{ item.legendData.localId || "-" }}</span>
|
|
|
</span>
|
|
|
<!-- hover行显示小眼睛 -->
|
|
|
<div class="toggle-eyes">
|
|
@@ -75,47 +49,37 @@
|
|
|
</div>
|
|
|
</el-collapse-transition>
|
|
|
</div>
|
|
|
- <ul class="choiceEquip" v-show="pressMsgData.length">
|
|
|
- <li v-for="(a, b) in pressMsgData" :key="b" @mouseover="sethover(10000, 10000, b)" @click="clickEquipItem(a)">
|
|
|
- <div class="left">
|
|
|
- <div class="showEyes">
|
|
|
- <Icon v-show="hoverIndex == '' + 10000 + 10000 + b" :name="a.visible ? 'preview' : 'hide'" @click="ShowItem(a)" />
|
|
|
- </div>
|
|
|
- <div class="icon">
|
|
|
- <img width="28" height="28" :src="a.img.url" alt="" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <div class="t" :title="a.legendData.properties.localName">
|
|
|
- {{ a.legendData.properties.localName ? a.legendData.properties.localName : "--" }}
|
|
|
- </div>
|
|
|
- <div class="b" :title="a.legendData.properties.localId">
|
|
|
- {{ a.legendData.properties.localId ? a.legendData.properties.localId : "--" }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="icons">
|
|
|
- <Popover v-show="hoverIndex == '' + 10000 + 10000 + b" type="base" placement="top-center">
|
|
|
- <template slot="content">
|
|
|
- <Button @click="deleteItem(a)" type="text" icon="edit">删除</Button>
|
|
|
- </template>
|
|
|
- <Icon name="more" />
|
|
|
- </Popover>
|
|
|
+
|
|
|
+ <!-- 筛选显示的设备类,设备实例 -->
|
|
|
+ <div class="choice-equip" v-show="pressMsgData.length">
|
|
|
+ <div
|
|
|
+ class="equipType"
|
|
|
+ @click="chioceItem(item)"
|
|
|
+ v-for="item in pressMsgData"
|
|
|
+ :key="item.id"
|
|
|
+ :class="[item.visible ? 'equip-visible' : 'equip-hidden', item.selected ? 'equip-selected' : '']"
|
|
|
+ >
|
|
|
+ <span class="local-name" :title="`${item.legendData.localName}${item.legendData.localId ? '-' + item.legendData.localId : ''}`"
|
|
|
+ >{{ item.legendData.localName }}<span class="local-id">-{{ item.legendData.localId || "-" }}</span>
|
|
|
+ </span>
|
|
|
+ <div class="toggle-eyes">
|
|
|
+ <Icon :name="item.visible ? 'preview' : 'hide'" @click.native.stop="toggleItemVisible(item)" />
|
|
|
</div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 添加设备 -->
|
|
|
- <div class="addbtn" @click="openAddEqupModle">
|
|
|
- <i class="el-icon-plus"></i>
|
|
|
- 添加设备
|
|
|
- </div>
|
|
|
+ <div class="addbtn" @click="openAddEqupModle"><i class="el-icon-plus"></i>添加设备</div>
|
|
|
+ <edit-info-point type="equipment" @closeModal="showEditInfoPoint = false" :code="classCode" :showDialog="showEditInfoPoint" />
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { mapMutations, mapState } from "vuex";
|
|
|
import { queryCategory } from "@/api/editer";
|
|
|
import bus from "@/bus/bus";
|
|
|
+import editInfoPoint from "./editInfoPoint";
|
|
|
+
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
@@ -123,11 +87,13 @@ export default {
|
|
|
hoverIndex: -1,
|
|
|
getPressMsg: "", //搜索框
|
|
|
pressMsgData: [], //搜索对应得数组
|
|
|
- equipmentTree: [], //三级设备树
|
|
|
- equipmentList: [], //二维数组
|
|
|
+ equipmentList: [], //设备列表 二维数组
|
|
|
local: null, //table loading
|
|
|
+ classCode: "",
|
|
|
+ showEditInfoPoint: false,
|
|
|
};
|
|
|
},
|
|
|
+ components: { editInfoPoint },
|
|
|
computed: {
|
|
|
...mapState(["editCmd", "equipmentItemList", "equipmentItemNum", "equipItemMap", "equipItemNum"]),
|
|
|
},
|
|
@@ -141,24 +107,10 @@ export default {
|
|
|
immediate: true,
|
|
|
},
|
|
|
equipItemNum(newV, oldV) {
|
|
|
- console.log(":::::::");
|
|
|
- console.log(newV, oldV);
|
|
|
newV && this.getEquipmentList();
|
|
|
},
|
|
|
- // equipItemMap: {
|
|
|
- // handler(newV, oldV) {
|
|
|
- // // console.log("watch:::::");
|
|
|
- // // console.log(newV);
|
|
|
- // if (newV) {
|
|
|
- // // this.getEquipmentList(newV);
|
|
|
- // }
|
|
|
- // },
|
|
|
- // deep: true,
|
|
|
- // immediate: false,
|
|
|
- // },
|
|
|
},
|
|
|
mounted() {
|
|
|
- window.vm = this;
|
|
|
this.getEquipmentList();
|
|
|
// const dombox = document.getElementById("equiplist");
|
|
|
// const boxprofess = document.getElementById("boxprofess");
|
|
@@ -176,12 +128,12 @@ export default {
|
|
|
* 查新设备列表
|
|
|
*/
|
|
|
getEquipmentList() {
|
|
|
- console.log("%cgetEquipmentList:::", "color:blue;background:#fff");
|
|
|
- // console.log(this.equipItemMap);
|
|
|
+ // console.log("%cgetEquipmentList:::", "color:blue;background:#fff");
|
|
|
+ // // console.log(this.equipItemMap);
|
|
|
// const arr = this._(this.equipItemMap).values().groupBy("legendData.classCode").values().value();
|
|
|
const arr = Object.values(this.equipItemMap);
|
|
|
const obj = this._(arr).groupBy("legendData.classCode").value();
|
|
|
- console.log(arr);
|
|
|
+ // console.log(arr);
|
|
|
const equipmentList = [];
|
|
|
for (const key in obj) {
|
|
|
const element = obj[key];
|
|
@@ -192,12 +144,22 @@ export default {
|
|
|
isShow: true,
|
|
|
});
|
|
|
}
|
|
|
- console.log(equipmentList);
|
|
|
+ // console.log(equipmentList);
|
|
|
this.equipmentList = equipmentList;
|
|
|
- // console.log(this.equipmentList);
|
|
|
+ // // console.log(this.equipmentList);
|
|
|
},
|
|
|
/**
|
|
|
- * 点击设备,更改设备的cho
|
|
|
+ * 编辑设备类
|
|
|
+ */
|
|
|
+ editEquipment(items) {
|
|
|
+ this.classCode = items.classCode;
|
|
|
+ this.showEditInfoPoint = true;
|
|
|
+ },
|
|
|
+ deleteEquipment(items) {
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 点击设备,更改图chioceItem
|
|
|
*/
|
|
|
chioceItem(item) {
|
|
|
bus.$emit("chioceItem", item);
|
|
@@ -206,53 +168,14 @@ export default {
|
|
|
* 切换设备显隐状态
|
|
|
*/
|
|
|
toggleItemVisible(item) {
|
|
|
- console.log(item);
|
|
|
+ // console.log(item);
|
|
|
item.visible = !item.visible;
|
|
|
},
|
|
|
- // 设置hover显示
|
|
|
- sethover(a, b, c) {
|
|
|
- this.hoverIndex = "" + a + b + c;
|
|
|
- },
|
|
|
- deletehover() {
|
|
|
- this.hoverIndex = -1;
|
|
|
- },
|
|
|
- // 是否展示图例
|
|
|
- ShowItem(a) {
|
|
|
- a.visible = !a.visible;
|
|
|
- },
|
|
|
+
|
|
|
// 删除Item
|
|
|
deleteItem(a) {
|
|
|
bus.$emit("deleteItem", a);
|
|
|
},
|
|
|
- // 获取设备图例
|
|
|
- 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;
|
|
@@ -278,64 +201,15 @@ export default {
|
|
|
return;
|
|
|
}
|
|
|
// 对信息点相同得提取出来
|
|
|
- this.equipmentTree.forEach((item) => {
|
|
|
- item.children.forEach((a) => {
|
|
|
- console.log("a.name", a);
|
|
|
- a.children.forEach((b) => {
|
|
|
- console.log("b.name", b);
|
|
|
- if (b.legendData.properties.localName.includes(this.getPressMsg)) {
|
|
|
- list.push(b);
|
|
|
- }
|
|
|
- });
|
|
|
+ this.equipmentList.map((item) => {
|
|
|
+ item.children.map((a) => {
|
|
|
+ if (a?.legendData?.localName.includes(this.getPressMsg)) {
|
|
|
+ list.push(a);
|
|
|
+ }
|
|
|
});
|
|
|
});
|
|
|
this.pressMsgData = list;
|
|
|
},
|
|
|
- // 获取设备相关的专业以及设备类型
|
|
|
- getCategory(itemList) {
|
|
|
- console.log("getCategory:::::");
|
|
|
- // id 数组
|
|
|
- const idList = [];
|
|
|
- itemList.forEach((item) => {
|
|
|
- idList.push(item.legendData.attachObjectIds[0]);
|
|
|
- });
|
|
|
- queryCategory(idList)
|
|
|
- .then((res) => {
|
|
|
- // 返回专业及其类型,根据类型 添加设备
|
|
|
- let category = res.content ? res.content : [];
|
|
|
- category.forEach((item) => {
|
|
|
- item.isShow = true;
|
|
|
- if (item.children && item.children.length) {
|
|
|
- item.children.map((child) => {
|
|
|
- let obj = [];
|
|
|
- child.isShow = true;
|
|
|
- this.equipmentItemList.forEach((choiceItem) => {
|
|
|
- if (choiceItem.legendData.properties.classCode == child.aliasCode) {
|
|
|
- obj.push(choiceItem);
|
|
|
- }
|
|
|
- });
|
|
|
- if (obj.length) {
|
|
|
- child.children = obj;
|
|
|
- }
|
|
|
- return child;
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- this.equipmentTree = category;
|
|
|
- // $loading结束
|
|
|
- this.$loading.close(this.local);
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- console.log("接口问题:", err);
|
|
|
- // $loading结束
|
|
|
- this.$loading.close(this.local);
|
|
|
- });
|
|
|
- },
|
|
|
- // 点击设备实例
|
|
|
- clickEquipItem(item) {
|
|
|
- // 选中 item
|
|
|
- bus.$emit("chioceItem", item);
|
|
|
- },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -347,12 +221,7 @@ div {
|
|
|
-khtml-user-select: none; /*早期浏览器*/
|
|
|
user-select: none;
|
|
|
}
|
|
|
-ul,
|
|
|
-li {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- list-style-type: none;
|
|
|
-}
|
|
|
+
|
|
|
.equip-list {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
@@ -382,7 +251,7 @@ li {
|
|
|
height: 40px;
|
|
|
line-height: 40px;
|
|
|
display: flex;
|
|
|
- padding: 0 16px;
|
|
|
+ padding: 0 10px 0 16px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
cursor: pointer;
|
|
@@ -391,6 +260,20 @@ li {
|
|
|
color: #1f2429;
|
|
|
.code-name {
|
|
|
margin-left: 10px;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .action {
|
|
|
+ // width: 100px;
|
|
|
+ display: none;
|
|
|
+ .equip-delete {
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ .action {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.equipType {
|
|
@@ -434,60 +317,6 @@ li {
|
|
|
margin: 20px 0 20px 18px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- ul {
|
|
|
- li {
|
|
|
- width: 100%;
|
|
|
- height: 48px;
|
|
|
- display: flex;
|
|
|
- cursor: pointer;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
- &: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%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- }
|
|
|
- .right {
|
|
|
- padding: 4px;
|
|
|
- box-sizing: border-box;
|
|
|
- flex: 1;
|
|
|
- .t {
|
|
|
- font-size: 14px;
|
|
|
- color: #1f2429;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- .b {
|
|
|
- font-size: 10px;
|
|
|
- color: #8d9399;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- }
|
|
|
- .icons {
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
// 选中的设备样式
|
|
|
.equip-selected {
|
|
@@ -507,10 +336,6 @@ li {
|
|
|
.addbtn {
|
|
|
width: 100%;
|
|
|
height: 40px;
|
|
|
- // position: absolute;
|
|
|
- // bottom: 0;
|
|
|
- // left: 0;
|
|
|
- // transform: translateY(-40%);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
@@ -527,57 +352,60 @@ li {
|
|
|
animation: whirling 0.2s linear forwards;
|
|
|
}
|
|
|
}
|
|
|
-.choiceEquip {
|
|
|
- li {
|
|
|
- width: 100%;
|
|
|
- height: 48px;
|
|
|
+.choice-equip {
|
|
|
+ .equipType {
|
|
|
+ padding: 0 10px 0 20px;
|
|
|
display: flex;
|
|
|
- cursor: pointer;
|
|
|
- justify-content: space-around;
|
|
|
align-items: center;
|
|
|
- &:hover {
|
|
|
- background: #f5f6f7;
|
|
|
- }
|
|
|
- .left {
|
|
|
- width: 60px;
|
|
|
+ .toggle-eyes {
|
|
|
+ width: 20px;
|
|
|
+ padding-left: 4px;
|
|
|
display: flex;
|
|
|
- height: 100%;
|
|
|
align-items: center;
|
|
|
- .showEyes {
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
+ .p-icon {
|
|
|
+ display: none;
|
|
|
}
|
|
|
- .icon {
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
- border-radius: 50% 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background-color: #f5f6f7;
|
|
|
+ .p-icon {
|
|
|
+ display: inline-block;
|
|
|
}
|
|
|
}
|
|
|
- .right {
|
|
|
- padding: 4px;
|
|
|
- box-sizing: border-box;
|
|
|
+ .local-name {
|
|
|
flex: 1;
|
|
|
- .t {
|
|
|
- font-size: 14px;
|
|
|
- color: #1f2429;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- .b {
|
|
|
- font-size: 10px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1f2429;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+
|
|
|
+ .local-id {
|
|
|
+ font-weight: 500;
|
|
|
color: #8d9399;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
+ line-height: 16px;
|
|
|
}
|
|
|
}
|
|
|
- .icons {
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
+
|
|
|
+ .equipType-title {
|
|
|
+ margin: 20px 0 20px 18px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 选中的设备样式
|
|
|
+ .equip-selected {
|
|
|
+ background-color: #f5f6f7;
|
|
|
+ }
|
|
|
+ // 隐藏的设备列表样式
|
|
|
+ .equip-hidden {
|
|
|
+ .local-name {
|
|
|
+ color: #8d9399;
|
|
|
+ .local-id {
|
|
|
+ color: #8d9399;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|