瀏覽代碼

优化交互

zhangyu 4 年之前
父節點
當前提交
2489579a25

+ 1 - 1
src/api/datacenter.ts

@@ -2,7 +2,7 @@
  * 数据中台通用接口文档
  */
 import httputils from '@/api/httputils'
-const baseApi = '/datacenter';
+const baseApi = '/datacenter2';
 
 // 查询建筑信息
 export function buildingQuery(postParams: any): any {

+ 1 - 1
src/api/equipcomponnet.ts

@@ -2,4 +2,4 @@
  * 数据中台专用接口文档
  */
 import httputils from '@/api/httputils'
-const baseApi = '/equip-componnet';
+const baseApi = '/equip-componet2';

+ 59 - 64
src/components/homeView/createCanvasDialog.vue

@@ -57,6 +57,7 @@
 </template>
 <script>
 import { buildingQuery } from "@/api/datacenter";
+import { folderQuery, planarCreate } from "@/api/labsl";
 export default {
     components: {},
     data() {
@@ -65,7 +66,7 @@ export default {
          */
         const validateBuildFloor = (rule, value, callback) => {
             if (value.length !== 2) {
-                callback(new Error('请选择具体的楼层'));
+                callback(new Error("请选择具体的楼层"));
             } else {
                 callback();
             }
@@ -79,7 +80,7 @@ export default {
             rules: {
                 buildFloor: [
                     { required: true, message: "请选择建筑楼层", trigger: "change" },
-                    { validator: validateBuildFloor, trigger: 'change' }
+                    { validator: validateBuildFloor, trigger: "change" },
                 ],
                 name: [
                     { required: true, message: "请输入名称", trigger: "blur" },
@@ -98,56 +99,17 @@ export default {
             dynamicTags: [],
             inputValue: "",
             inputVisible: false,
-            folderData: [
-                {
-                    id: 1,
-                    name: "能源系统",
-                    updateName: "能源系统",
-                    checked: false,
-                    showInput: false,
-                },
-                {
-                    id: 2,
-                    name: "排水系统",
-                    updateName: "排水系统",
-                    checked: false,
-                    showInput: false,
-                },
-                {
-                    id: 3,
-                    name: "消防水系统",
-                    updateName: "消防水系统",
-                    checked: false,
-                    showInput: false,
-                },
-                {
-                    id: 4,
-                    name: "公共照明系统公共照明系统公共照明系统公共照明系统",
-                    updateName: "公共照明系统公共照明系统公共照明系统公共照明系统",
-                    checked: false,
-                    showInput: false,
-                },
-                {
-                    id: 5,
-                    name: "暖通空调系统",
-                    updateName: "暖通空调系统",
-                    checked: false,
-                    showInput: false,
-                },
-            ],
+            folderData: [],
         };
     },
-    created() {
-        this.getBuildingFloorData();
-    },
     methods: {
         // 显示创建平面图弹窗
         showDialog() {
             this.outerVisible = true;
         },
-        // 获取建筑楼层数据
-        getBuildingFloorData() {
-            const params = {
+        // 获取建筑楼层数据和文件夹数据
+        getData() {
+            const params1 = {
                 pageNumber: 1,
                 pageSize: 1000,
                 orders: "name asc, createTime desc",
@@ -158,8 +120,23 @@ export default {
                     },
                 ],
             };
-            buildingQuery(params).then((res) => {
-                this.buildFloorData = res.content;
+            const params2 = {
+                pageNumber: 1,
+                pageSize: 1000,
+                orders: "name asc, createTime desc",
+            };
+            const promise1 = new Promise((resolve) => {
+                const res = buildingQuery(params1);
+                resolve(res);
+            });
+            const promise2 = new Promise((resolve) => {
+                const res = folderQuery(params2);
+                resolve(res);
+            });
+            Promise.all([promise1, promise2]).then((values) => {
+                console.log(values);
+                this.buildFloorData = values[0].content;
+                this.folderData = values[1].content;
             });
         },
         // 展示标签输入框
@@ -200,32 +177,50 @@ export default {
             this.outerVisible = false;
         },
         // 创建平面图接口
-        createPlan() {
-            const pa = {
-                content: [
-                    {
-                        name: this.ruleForm.name,
-                        label: this.dynamicTags,
-                        building: this.ruleForm.buildFloor[0],
-                        floor: this.ruleForm.buildFloor[1]
-                    },
-                ],
+        async createPlan() {
+            const params = {
+                name: this.ruleForm.name,
+                buildingId: this.ruleForm.buildFloor[0],
+                floorId: this.ruleForm.buildFloor[1],
             };
-            if (this.folderData.find(folder =>{return folder.id === this.ruleForm.folder})) {
-                console.log("选中已有文件夹", this.ruleForm.folder);
+            // 判断是否添加标签字段
+            if (this.dynamicTags.length) params.babel = this.dynamicTags;
+            // 判断是否新建文件夹
+            if (
+                this.folderData.find((folder) => {
+                    return folder.id === this.ruleForm.folder;
+                })
+            ) {
+                params.folderId = this.ruleForm.folder;
+            } else {
+                params.folderName = this.ruleForm.folder;
+            }
+            console.log(params);
+            const res = await planarCreate(params);
+            if (res.result === "success" && res.entityList.length) {
+                this.$emit("createPlanar", {
+                    folderId: res.entityList[0].folderId,
+                    folderName: res.entityList[0].folderName,
+                });
+                this.$message.success("新建画布成功!");
+                this.outerVisible = false;
             } else {
-                console.log("新建文件夹", this.ruleForm.folder);
+                this.$message.error(res.message);
             }
-            console.log(pa)
-            /**
-             * 返回参数中要返给我是否新建文件夹标识
-             */
         },
         // 关闭创建弹窗回调(重置创建信息)
         closeModal() {
             this.resetForm("ruleForm");
         },
     },
+    watch: {
+        outerVisible: {
+            handler(n) {
+                if (n) this.getData();
+            },
+            immediate: true,
+        },
+    },
 };
 </script>
 <style lang="less" scoped>

+ 35 - 81
src/components/homeView/leftFolder.vue

@@ -1,6 +1,6 @@
 <!-- 左侧文件夹结构 -->
 <template>
-    <div class="left-folder">
+    <div class="left-folder" v-loading="loading">
         <el-scrollbar style="height: 100%">
             <el-row style="padding: 6px 12px; margin-top: 10px">
                 <span style="font-size: 12px; color: #646c73">文件夹</span>
@@ -22,7 +22,6 @@
                 </li>
                 <li
                     class="folder-item"
-                    v-loading="loading"
                     :class="{ 'folder-select': folder.checked }"
                     v-for="folder in folderData"
                     :key="folder.id"
@@ -80,54 +79,27 @@ export default {
     },
     methods: {
         // 获取文件夹数据
-        async getFolderData(folderId) {
+        async getFolderData(folder) {
             this.loading = true;
-            const res = await folderQuery({});
+            const params = {
+                pageNumber: 1,
+                pageSize: 1000,
+                orders: "name asc, createTime desc"
+            }
+            const res = await folderQuery(params);
             this.folderData = res.content.map((folder) => {
                 folder.updateName = folder.name;
                 folder.checked = false;
                 folder.showInput = false;
                 return folder;
             });
-            if (folderId) {
-                // 如果参数传入文件夹Id,则选中对应的文件夹
-                this.handleCheckFolder(folderId);
+            // 如果参数传入文件夹,则选中对应的文件夹,否则默认选中第一个文件夹
+            if (folder) {
+                // this.handleCheckFolder(folder);
+            } else {
+                this.handleCheckFolder(this.folderData[0].id);
             }
             this.loading = false;
-            // setTimeout(() => {
-            //     const res = [
-            //         {
-            //             id: 1,
-            //             name: "能源系统",
-            //         },
-            //         {
-            //             id: 2,
-            //             name: "排水系统",
-            //         },
-            //         {
-            //             id: 3,
-            //             name: "消防水系统",
-            //         },
-            //         {
-            //             id: 4,
-            //             name: "公共照明系统",
-            //         },
-            //         {
-            //             id: 5,
-            //             name: "暖通空调系统",
-            //         },
-            //     ];
-            //     this.folderData = res.map(folder => {
-            //         folder.updateName = folder.name;
-            //         folder.checked = false;
-            //         folder.showInput = false;
-            //         return folder
-            //     })
-            //     if (folderId) {// 如果参数传入文件夹Id,则选中对应的文件夹
-            //         this.handleCheckFolder(folderId)
-            //     }
-            //     this.loading = false;
-            // }, 1000);
         },
         // 点击添加文件夹icon打开弹窗
         handleShowAddFolder() {
@@ -147,9 +119,9 @@ export default {
             ) {
                 this.$message({ showClose: true, message: "您输入的文件夹已存在!" });
             } else {
-                const res = await folderCreate({content: [{name: this.folderName}]});
+                const res = await folderCreate({ content: [{ name: this.folderName }] });
                 if (res.result === "success" && res.entityList.length) {
-                    res.forEach(item => {
+                    res.entityList.forEach((item) => {
                         this.folderData.unshift({
                             id: item.id,
                             name: item.name,
@@ -157,26 +129,13 @@ export default {
                             checked: false,
                             showInput: false,
                         });
-                    })
+                    });
                     this.$message.success("添加文件夹成功!");
                     this.handleRevokeAddFolder();
                     this.handleCheckFolder(res.entityList[res.entityList.length - 1].id);
                 } else {
                     this.$message.error(res.message);
                 }
-                // setTimeout(() => {
-                //     const folderId = Math.floor(Math.random() * 1000);
-                //     this.folderData.unshift({
-                //         id: folderId,
-                //         name: this.folderName,
-                //         updateName: this.folderName,
-                //         checked: false,
-                //         showInput: false,
-                //     });
-                //     this.$message.success("添加文件夹成功!");
-                //     this.handleRevokeAddFolder();
-                //     this.handleCheckFolder(folderId);
-                // }, 1000);
             }
         },
         // 撤销添加文件夹
@@ -227,21 +186,21 @@ export default {
             ) {
                 this.$message({ showClose: true, message: "您输入的文件夹已存在!" });
             } else {
-                const res = await folderUpdate({content: [{
-                    id: folder.id,
-                    name: folder.updateName
-                }]});
-                console.log(res)
-                // if () {
-
-                // } else {
-
-                // }
-                // setTimeout(() => {
-                //     folder.name = folder.updateName;
-                //     this.$message.success("文件夹重命名成功!");
-                //     folder.showInput = false;
-                // }, 1000);
+                const res = await folderUpdate({
+                    content: [
+                        {
+                            id: folder.id,
+                            name: folder.updateName,
+                        },
+                    ],
+                });
+                if (res.result === "success") {
+                    folder.name = folder.updateName;
+                    this.$message.success("文件夹重命名成功!");
+                    folder.showInput = false;
+                } else {
+                    this.$message.error(res.message);
+                }
             }
         },
         // 撤销重命名
@@ -257,23 +216,18 @@ export default {
                     cancelButtonText: "取消",
                     type: "warning",
                 }).then(async () => {
-                    const res = await folderDelete([{id: this.rightClickFolder.id}]);
+                    const res = await folderDelete([{ id: this.rightClickFolder.id }]);
                     if (res.result === "success") {
                         this.folderData.splice(
                             this.folderData.findIndex((item) => {
                                 return item.id === this.rightClickFolder.id;
-                        }), 1);
+                            }),
+                            1
+                        );
                         this.$message.success("删除成功!");
                     } else {
                         this.$message.error(res.message);
                     }
-                    // setTimeout(() => {
-                    //     this.folderData.splice(
-                    //         this.folderData.findIndex((item) => {
-                    //             return item.id === this.rightClickFolder.id;
-                    //     }), 1);
-                    //     this.$message({ type: "success", message: "删除成功!" });
-                    // }, 1000);
                 });
             }
         },

+ 9 - 4
src/views/home.vue

@@ -101,7 +101,7 @@
         </el-container>
 
         <!-- 创建画布 -->
-        <createCanvasDialog ref="createCanvasDialog"></createCanvasDialog>
+        <createPlanarDialog ref="createPlanarDialog" @createPlanar="createPlanarCallback"></createPlanarDialog>
         <!-- <createGraphDialog ref="createGraphDialog"></createGraphDialog> -->
         <!-- 重命名 -->
         <rename ref="rename" :isPub="isPub" @updateSuc="updateSuc"></rename>
@@ -130,7 +130,7 @@ import deleteDialog from "@/components/homeView/deleteDialog";
 import tagDialog from "@/components/homeView/tagDialog";
 import recycle from "@/components/homeView/recycle";
 import createGraphDialog from "@/components/homeView/createGraphDialog";
-import createCanvasDialog from "@/components/homeView/createCanvasDialog";
+import createPlanarDialog from "@/components/homeView/createPlanarDialog";
 import { SNetUtil } from "@persagy-web/base";
 import equipmentDeatil from "@/components/editview/equipmentDeatilDialog";
 export default {
@@ -146,7 +146,7 @@ export default {
         deleteDialog,
         recycle,
         tagDialog,
-        createCanvasDialog,
+        createPlanarDialog,
         leftFolder,
         equipmentDeatil,
     },
@@ -202,7 +202,12 @@ export default {
         },
         // 创建画布
         createCanvas() {
-            this.$refs.createCanvasDialog.showDialog();
+            this.$refs.createPlanarDialog.showDialog();
+        },
+        // 新建画布成功回调
+        createPlanarCallback(folder) {
+            console.log(folder)
+            debugger
         },
         // 批量新建画布
         batchCreateCanvas(val) {