Преглед изворни кода

提交 设备列表,设备类修改

yunxing пре 4 година
родитељ
комит
1662783f21

+ 0 - 1
src/components/editview/leftToolBar.vue

@@ -74,7 +74,6 @@ export default {
         };
     },
     created() {
-        // window.vm = this;
     },
     methods: {
         ...mapMutations(["SETCHOICELEHEND"]),

+ 1 - 1
src/components/editview/leftToolBar/addBaseItem.vue

@@ -17,7 +17,7 @@
                 ><i :class="[item.isClip ? 'caret-icon-active' : 'caret-icon', 'el-icon-arrow-down']"></i>
             </div>
             <el-collapse-transition>
-                <div v-show="item.isClip">``
+                <div v-show="item.isClip">
                     <div class="legend-content" v-for="(itemList, i) in item.itemList" :key="i">
                         <div @click="collapse(itemList)" class="title">
                             {{ itemList.title }}

+ 0 - 2
src/components/editview/leftToolBar/addEquipmentDialog.vue

@@ -103,7 +103,6 @@
             <el-button @click="close">取 消</el-button>
             <el-button :disabled="!tableData.length" :type="tableData.length ? 'primary' : 'info'" @click="confirm">确 定</el-button>
         </div>
-        <!-- TODO:  -->
         <edit-info-point
             type="equipment"
             @closeModal="showEditInfoPoint = false"
@@ -219,7 +218,6 @@ export default {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     created() {},
     mounted() {
-        // window.vm = this;
         /*   setTimeout(() => {
             this.showPopover = true;
         }, 2000); */

+ 18 - 19
src/components/editview/leftToolBar/editInfoPoint.vue

@@ -323,7 +323,7 @@ export default {
         },
         spaceData: {
             handler(newV, oldV) {
-                // console.log("spaceData");
+                // // console.log("spaceData");
                 if (newV.linestyle) {
                     this.$nextTick(() => {
                         this.setLineStyle();
@@ -339,7 +339,6 @@ export default {
         },
     },
     mounted() {
-        // window.vm = this;
     },
     methods: {
         ...mapMutations(["ADDSTYLE"]),
@@ -376,7 +375,7 @@ export default {
                 equipmentGroup: "equipmentGroupData",
                 space: "spaceData",
             };
-            console.log(imgUrl);
+            // console.log(imgUrl);
             imgUrl && this.initImgUrl(imgUrl, dict[this.type]);
         },
         /**
@@ -393,15 +392,15 @@ export default {
                 });
         },
         async getInfoPoint() {
-            console.time(1);
-            const res = await dictQuery({ pageNumber: 1, pageSize: 1000, type: this.code || "FFFSSN" });
-            console.timeEnd(1);
-            console.time(2);
+            // console.time(1);
+            const res = await dictQuery({ pageNumber: 1, pageSize: 1000, type: this.code });
+            // console.timeEnd(1);
+            // console.time(2);
             let data = res.content;
             // 按照一级名称,将一维数组拆分成二维数组
             data = this._(data).groupBy("firstName").values().value();
             this.list = data;
-            console.timeEnd(2);
+            // console.timeEnd(2);
         },
         // 添加标签
         handleInputConfirm() {
@@ -447,14 +446,14 @@ export default {
                 default:
                     break;
             }
-            console.log({ id: this.code, style });
+            // console.log({ id: this.code, style });
             let res = "";
             // 上传的style全量信息
             const postStyle = { ...this.styleMap, [this.code]: style };
             delete postStyle.defaultEquipStyle;
-            console.log("===================");
-            console.log(postStyle);
-            console.log("===================");
+            // console.log("===================");
+            // console.log(postStyle);
+            // console.log("===================");
             // 未发布接口
             if (this.state === "Draft") {
                 res = await planerUpdate({
@@ -498,14 +497,14 @@ export default {
         /** ----------设备的属性---------- */
         // 改变颜色
         changeColor(val) {
-            // console.log("changeColor: ", val);
+            // // console.log("changeColor: ", val);
         },
         beforeAvatarUpload(file) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             const that = this;
             const fileReader = new FileReader();
             fileReader.readAsDataURL(file); //读取图片
-            console.log(file);
+            // console.log(file);
             const ftype = file.type;
             const fname = file.name;
             const uploadKey = file.uid;
@@ -539,7 +538,7 @@ export default {
                             if (xhr.readyState == 4) {
                                 if (xhr.status == 200) {
                                     that.equipmentData.url = uploadKey + "." + imgType;
-                                    console.log(uploadKey + "." + imgType);
+                                    // console.log(uploadKey + "." + imgType);
                                     // bus.$emit("updateStyle", "url", baseUrl + uploadKey + "." + imgType);
                                 }
                             }
@@ -550,7 +549,7 @@ export default {
             });
         },
         handleAvatarSuccess(res, file) {
-            console.log(res, file);
+            // console.log(res, file);
             this.equipmentData.imgUrl = URL.createObjectURL(file.raw);
         },
         dataURLtoBlob(dataURI, type) {
@@ -590,7 +589,7 @@ export default {
         },
         setLineStyle() {
             const img = this.borderLineOption.filter((v) => v.id === this.spaceData.linestyle)[0]?.src;
-            // console.log(img);
+            // // console.log(img);
             if (img) {
                 this.$refs.selectLine?.$el?.children[0].children[0].setAttribute(
                     "style",
@@ -782,9 +781,9 @@ export default {
         .equipment {
             & > div {
                 margin-bottom: 15px;
-                font-size: 12px;
+                // font-size: 12px;
                 color: #8d9399;
-                line-height: 16px;
+                // line-height: 16px;
                 .color-select {
                     width: 32px;
                     height: 20px;

+ 115 - 287
src/components/editview/leftToolBar/equipmentList.vue

@@ -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;
+            }
         }
     }
 }

+ 1 - 3
src/views/home.vue

@@ -197,9 +197,7 @@ export default {
             folderName: "", //文件夹名称
         };
     },
-    created() {
-        // window.vm = this;
-    },
+    created() {},
     methods: {
         testClick(data) {
             console.log(data);