Browse Source

Merge branch 'dev' of git.sagacloud.cn:web/persagy-plan-editer into dev

zhangyu 4 years ago
parent
commit
dcc77db19c

+ 13 - 0
src/api/datacenter.ts

@@ -8,6 +8,10 @@ const baseApi = "/datacenter4";
 export function buildingQuery(postParams: any): any {
     return httputils.postJson(`${baseApi}/object/building/query`, postParams);
 }
+// 字典查询
+export function dictCategoryQuery(postParams: any): any {
+    return httputils.postJson(`${baseApi}/dict/category`, postParams);
+}
 // 查询项目下类型的信息点-->编辑器 空间功能类型 列表-->自己转成树
 
 export function dictQuery(postParams: any): any {
@@ -17,3 +21,12 @@ export function dictQuery(postParams: any): any {
     // }
     return httputils.postJson(`${baseApi}/dict/query`, postParams);
 }
+
+// 查询空间实例
+export function PartiInstancQuery(postParams: any): any {
+    // postParams:{
+    // "filters": "code='roomFuncType'",
+    // "type": "GeneralZone"
+    // }
+    return httputils.postJson(`${baseApi}/object/zone/query`, postParams);
+}

+ 3 - 0
src/api/equipcomponent.ts

@@ -12,3 +12,6 @@ export function categoryQuery(postParams: any): any {
 export function typeQuery(postParams: any): any {
     return httputils.postJson(`${baseApi}/labsl/zone/type`, postParams);
 }
+export function equipQuery(postParams: any): any {
+    return httputils.postJson(`${baseApi}/planar/equip`, postParams);
+}

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

@@ -20,7 +20,8 @@
                 </template>
             </SidebarCustom>
         </div>
-        <edit-info-point type='equipment'/>
+        <!-- TODO: -->
+        <!-- <edit-info-point type='equipment'/> -->
     </div>
 </template>
 <script>

+ 103 - 60
src/components/editview/leftToolBar/addEquipmentDialog.vue

@@ -104,9 +104,9 @@
             style="width: 100%; margin-top: 10px"
             :row-class-name="tableRowClassName"
         >
-            <el-table-column prop="date" label="设备类" style="width: 30%"> </el-table-column>
-            <el-table-column prop="name" label="设备实例数量" tyle="width: 30%"> </el-table-column>
-            <el-table-column prop="address" label="操作">
+            <el-table-column prop="codeName" label="设备类" style="width: 30%"> </el-table-column>
+            <el-table-column prop="total" label="设备实例数量" tyle="width: 30%"> </el-table-column>
+            <el-table-column prop="classCode" label="操作">
                 <template slot-scope="scope">
                     <el-link type="primary" @click="editInfo(scope.row)" :underline="false">编辑信息点</el-link>
                 </template>
@@ -122,7 +122,8 @@
             <el-button @click="close">取 消</el-button>
             <el-button :disabled="!tableData.length" :type="tableData.length ? 'primary' : 'info'" @click="confirm">确 定</el-button>
         </div>
-        <edit-info-point type="equipment" @closeModal="showEditInfoPoint = false" :showDialog="showEditInfoPoint" />
+        <!-- TODO:  -->
+        <!-- <edit-info-point type="equipment" @closeModal="showEditInfoPoint = false" :showDialog="showEditInfoPoint" /> -->
     </el-dialog>
 </template>
 <script>
@@ -132,8 +133,8 @@
 import editInfoPoint from "./editInfoPoint";
 import { Select, TreeSelect } from "meri-design";
 import { cloneDeep } from "lodash";
-import { dictQuery } from "@/api/datacenter";
-import { categoryQuery, typeQuery } from "@/api/equipcomponent";
+import { dictCategoryQuery, dictQuery, PartiInstancQuery } from "@/api/datacenter";
+import { categoryQuery, typeQuery, equipQuery } from "@/api/equipcomponent";
 import { array2Tree } from "@/utils/utils";
 const dataTree = [
     {
@@ -199,47 +200,21 @@ export default {
             spacePartitionTypeData: [],
             curentSelectTree3: [], //选中的空间 功能类型
             dialogTableVisible: false,
-            spacePartitionInstance: "", //选中的空间分区下实例
+            spacePartitionInstance: [], //选中的空间分区下实例
             selectData: [
-                { id: "test1", name: "选择项" },
-                { id: "test2", name: "单平米" },
-                { id: "test3", name: "下级分项" },
-                { id: "test4", name: "4444444" },
+                // { id: "test1", name: "选择项" },
             ],
             tableData: [
-                {
-                    date: "实例总数量 111111",
-                },
-                {
-                    date: "监控器",
-                    name: "111",
-                    address: "dfadfasdfa",
-                },
-                {
-                    date: "监控前端设备",
-                    name: "222",
-                },
-                {
-                    date: "监控控制箱",
-                    name: "333",
-                },
-                {
-                    date: "监控摄像头",
-                    name: "44",
-                },
-                {
-                    date: "水景系统",
-                    name: "11",
-                },
-                {
-                    date: "泳池系统",
-                    name: "11",
-                },
-                {
-                    date: "网络系统",
-                    name: "22",
-                },
+                // {
+                //     date: "实例总数量 111111",
+                // },
+                // {
+                //     date: "监控器",
+                //     name: "111",
+                //     address: "dfadfasdfa",
+                // },
             ],
+            _tableData: [],
             showEditInfoPoint: false, //显示编辑信息点弹窗
         };
     },
@@ -253,8 +228,11 @@ export default {
         },
     },
     created() {},
-    async mounted() {
+    mounted() {
         // window.vm = this;
+        setTimeout(() => {
+            this.showPopover = true;
+        }, 2000);
     },
     methods: {
         /**
@@ -267,6 +245,8 @@ export default {
                 // 筛选树的最后一级,按照组件返回数组的name中/的个数
                 this.curentSelectTree1 = dataObj.filter((v) => v.name.split("/").length === 3).map((v) => v.id);
             }
+            // 查询设备列表
+            this.curentSelectTree1.length && this.getTableData();
         },
         focusChange1(status) {
             // console.log("focusChange", status);
@@ -274,7 +254,7 @@ export default {
         /**
          * 空间 分区类型树
          */
-        treeChange2(data, dataObj) {
+        /*  treeChange2(data, dataObj) {
             // 清空选中的分区下的实例
             this.spacePartitionInstance = [];
             if (!dataObj) {
@@ -283,10 +263,12 @@ export default {
                 // 筛选树的最后一级,按照组件返回数组的name中/的个数
                 this.curentSelectTree2 = dataObj.filter((v) => v.name.split("/").length === 2).map((v) => v.id);
             }
-        },
+        }, */
         spacePartitionTypeConfirm(data) {
-            console.log(data);
-            console.log(this.spacePartitionType);
+            // 查询分区下实例列表
+            if (this.spacePartitionType.length) {
+                this.getPartiInstance();
+            }
         },
         /**
          * 空间 分区下实例
@@ -294,6 +276,7 @@ export default {
         selectConfirm(data) {
             console.log("selectConfirm");
             console.log(data);
+            console.log(this.spacePartitionInstance);
         },
         focusChange2(status) {
             // console.log("focusChange", status);
@@ -315,15 +298,7 @@ export default {
         /**
          * 显示弹窗时的处理
          */
-        async initModal() {
-            this.showPopover = false;
-            // this.tableData = []; //TODO:
-            // 没有tableData,显示popover
-            if (!this.tableData.length) {
-                this.timer = setTimeout(() => {
-                    this.showPopover = true;
-                }, 1000);
-            }
+        initModal() {
             // 查询设备实例树
             this.getCategory();
             // 分区类型 列表
@@ -334,22 +309,56 @@ export default {
          * 查询设备实例树
          */
         async getCategory() {
-            let res = await categoryQuery({});
+            let res = await dictCategoryQuery({ type: "majorSystemEquip" });
             console.log(res);
             let tree = res?.content || [];
-            tree.map((v) => (v.id = v.code));
+            // tree.map((v) => (v.id = v.code));
+            tree.forEach((item) => {
+                item._id = item.id;
+                item.id = item.code;
+                item?.children?.forEach((detail) => {
+                    detail._id = detail.id;
+                    detail.id = detail.code;
+                    detail?.children.forEach((v) => (v.id = v.code));
+                });
+            });
             this.dataTree1 = tree;
         },
         /**
          * 空间分区类型 列表
          */
         async getType() {
-            let res = await typeQuery({});
+            let res = await dictCategoryQuery({ type: "space" });
             let data = res?.content || [];
             data.map((v) => (v.id = v.code));
             //  name,code-->    { id: "test1", name: "选择项" },
             this.spacePartitionTypeData = data;
         },
+        /**
+         * 空间分区实例
+         */
+        async getPartiInstance() {
+            let postParams = {
+                pageNumber: 1,
+                pageSize: 1000,
+                floorId: "Fl11010500296bc7ca3a0d5d41419cf95c5b45116400",
+                buildingId: "Bd1101050029cb77fbd1846611eaac87cd1cd6a961c6",
+                // floorId: "",
+                // buildingId: "",
+                zoneTypeList: this.spacePartitionType,
+            };
+            let res = await PartiInstancQuery(postParams);
+            console.log("==================");
+            console.log(res);
+            console.log(res.content);
+            let data = res.content.map((v) => {
+                return { id: v.id, name: v.localName };
+            });
+            this.selectData = data;
+            this.spacePartitionInstance = [];
+            //   v-model="spacePartitionInstance"
+            // :selectdata="selectData"
+        },
         // 空间功能类型
         async getDict() {
             let res = await dictQuery({
@@ -361,6 +370,35 @@ export default {
             // 构造树
             this.dataTree3 = array2Tree(data, "parentCode");
         },
+        async getTableData() {
+            // 东坝地上二层
+            let postParams = {
+                equipTypes: this.curentSelectTree1, //设备类型  //["FFFSSN"],
+                zoneTypes: [], //空间类型
+                spaceIds: [], //空间实例id
+                funcTypes: [], //空间功能区类型
+                floorId: "Fl11010500296bc7ca3a0d5d41419cf95c5b45116400",
+                buildingId: "Bd1101050029cb77fbd1846611eaac87cd1cd6a961c6",
+            };
+            let res = await equipQuery(postParams);
+            let data = res.content || [];
+            this._tableData = data;
+            let map = {};
+            data.map((item) => {
+                if (!map[item.classCode]) {
+                    map[item.classCode] = {
+                        classCode: item.classCode,
+                        codeName: item.codeName,
+                        total: 1,
+                    };
+                } else {
+                    map[item.classCode].total++;
+                }
+            });
+            let tableData = Object.values(map);
+            tableData.unshift({ codeName: "实例总数量: " + data.length });
+            this.tableData = tableData;
+        },
         /**
          * 合并第一行
          */
@@ -491,5 +529,10 @@ export default {
         justify-content: center;
         align-items: center;
     }
+    /deep/ .el-dialog__footer {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+    }
 }
 </style>

+ 279 - 7
src/components/editview/leftToolBar/editInfoPoint.vue

@@ -62,19 +62,102 @@
 
         <!-- 属性 -->
         <div class="property-tab" v-show="tab === 1">
-            <div class="equipment" v-if="type === 'equipment'">
+            <!-- 设备的属性 -->
+            <div class="equipment" v-if="false && type === 'equipment'">
                 <div class="color">
                     <p>字符颜色</p>
                     <div class="color-select">
-                        <el-color-picker show-alpha @change="changeColor" class="fix-box-1" v-model="color"></el-color-picker>
+                        <el-color-picker show-alpha @change="changeColor" class="fix-box-1" v-model="equipmentData.color"></el-color-picker>
                     </div>
                 </div>
                 <div class="size">
                     <p>字符大小</p>
-                    <el-input></el-input>
+                    <el-input-number
+                        style="width: 90px"
+                        v-model="equipmentData.size"
+                        controls-position="right"
+                        size="mini"
+                        :min="1"
+                        :max="20"
+                        :maxlength="100"
+                    ></el-input-number>
                 </div>
                 <div class="icon">
                     <p>显示图标</p>
+                    <el-upload
+                        class="avatar-uploader"
+                        action="https://jsonplaceholder.typicode.com/posts/"
+                        :show-file-list="false"
+                        :before-upload="beforeAvatarUpload"
+                    >
+                        <el-button type="small">替换图标</el-button>
+                    </el-upload>
+                </div>
+            </div>
+            <!-- 设备组的属性 -->
+            <div class="equipment-group" v-else-if="false && type === 'equipment-group'"></div>
+            <!-- 空间的属性 -->
+            <div class="space" v-else-if="true || type === 'space'">
+                <!-- 字符 -->
+                <div class="font">
+                    <div class="color">
+                        <p>字符色</p>
+                        <div class="color-select">
+                            <el-color-picker show-alpha @change="changeColor" class="fix-box-1" v-model="spaceData.color"></el-color-picker>
+                        </div>
+                    </div>
+                    <div class="size">
+                        <p>字符大小</p>
+                        <el-input-number
+                            style="width: 90px"
+                            v-model="spaceData.size"
+                            controls-position="right"
+                            size="mini"
+                            :min="1"
+                            :max="20"
+                            :maxlength="100"
+                        ></el-input-number>
+                    </div>
+                </div>
+                <!-- 填充色 -->
+                <div class="fill-color">
+                    <p>填充色</p>
+                    <div class="color-select">
+                        <el-color-picker show-alpha @change="changeColor" class="fix-box-1" v-model="spaceData.color"></el-color-picker>
+                    </div>
+                </div>
+                <!-- 边框 -->
+                <div class="border">
+                    <p>边框</p>
+                    <div class="property">
+                        <div class="color-box">
+                            <div class="cololorSelect">
+                                <el-color-picker show-alpha @change="" class="fix-box-1" v-model="spaceData.borderColor"></el-color-picker>
+                            </div>
+                            <span>颜色</span>
+                        </div>
+                        <div class="line-width">
+                            <el-input-number
+                                style="width: 80px"
+                                v-model="spaceData.linewidth"
+                                controls-position="right"
+                                @change="changeLineWidth"
+                                size="mini"
+                                :min="1"
+                                :max="20"
+                                :maxlength="100"
+                            ></el-input-number>
+                            <span>线宽</span>
+                        </div>
+                        <div class="line-width">
+                            <a-select style="width: 80px" v-model="linestyle" :default-value="borderLineOption[0].id" @change="changeLineStyle">
+                                <a-select-option v-for="item in borderLineOption" :key="item.id" :label="item.src" :value="item.id">
+                                    <img :src="item.src" alt width="60" />
+                                </a-select-option>
+                            </a-select>
+                            <span>线型</span>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -124,7 +207,7 @@ export default {
     components: {},
     data() {
         return {
-            dialogVisible: true,
+            dialogVisible: false,
             tab: 0,
             dynamicTags: Array(10).fill(123),
             inputVisible: false,
@@ -137,7 +220,34 @@ export default {
             accumulativeCheckList: [],
             accumulativeList: cloneDeep(list),
             /** -------------------设备属性使用值start-------------------------- */
-            color: "",
+            equipmentData: {
+                color: "",
+                size: 1,
+                iconUrl: undefined,
+            },
+            spaceData: {
+                color: "",
+                size: 1,
+                iconUrl: undefined,
+                borderColor: "#cccccc",
+                linewidth: 1,
+            },
+            linewidth: 1,
+            borderLineOption: [
+                {
+                    id: "Solid",
+                    src: require("@/assets/images/solidLine.png"),
+                },
+                {
+                    id: "Dashed",
+                    src: require("@/assets/images/dashedLine.png"),
+                },
+                {
+                    id: "Dotted",
+                    src: require("@/assets/images/dotLine.png"),
+                },
+            ],
+            linestyle: "solid",
             /** -------------------设备属性使用值end-------------------------- */
         };
     },
@@ -152,7 +262,7 @@ export default {
     },
     beforeMount() {},
     mounted() {
-        console.log("mountdddddd");
+        window.vm = this;
     },
     methods: {
         initModal() {},
@@ -198,6 +308,90 @@ export default {
         changeColor(val) {
             console.log("changeColor: ", val);
         },
+        beforeAvatarUpload(file) {
+            let that = this;
+            const fileReader = new FileReader();
+            fileReader.readAsDataURL(file); //读取图片
+            console.log(file);
+            const ftype = file.type;
+            const fname = file.name;
+            const uploadKey = file.uid;
+            const imgType = ftype.split(".")[ftype.length - 1];
+            fileReader.addEventListener("load", function () {
+                // 读取完成
+                let res = fileReader.result;
+                //将canvas的base64位图片转换成图片png的file
+                var blob = that.dataURLtoBlob(res, ftype);
+                //将其转换成file对象
+                let file = new File([blob], fname, {
+                    type: ftype,
+                    lastModified: Date.now(),
+                }); //blob转file
+
+                // try sending
+                let reader = new FileReader();
+                let fileType = file.name.split(".");
+                let imgType = fileType[fileType.length - 1];
+                let CreateTime = that.formatDate(new Date(file.lastModified));
+                reader.onloadend = function () {
+                    // 这个事件在读取结束后,无论成功或者失败都会触发
+                    if (reader.error) {
+                    } else {
+                        // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
+                        var xhr = new XMLHttpRequest();
+                        xhr.open(
+                            /* method */
+                            "POST",
+                            /* target url */
+                            "/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true" +
+                                "&key=" +
+                                uploadKey +
+                                "." +
+                                imgType
+                        );
+                        xhr.send(reader.result);
+                        xhr.onreadystatechange = function () {
+                            if (xhr.readyState == 4) {
+                                if (xhr.status == 200) {
+                                    that.equipmentData.iconUrl = baseUrl + uploadKey + "." + imgType;
+                                    // bus.$emit("updateStyle", "url", baseUrl + uploadKey + "." + imgType);
+                                }
+                            }
+                        };
+                    }
+                };
+                reader.readAsArrayBuffer(file);
+            });
+        },
+        dataURLtoBlob(dataURI, type) {
+            var binary = atob(dataURI.split(",")[1]);
+            var array = [];
+            for (var i = 0; i < binary.length; i++) {
+                array.push(binary.charCodeAt(i));
+            }
+            return new Blob([new Uint8Array(array)], { type: type });
+        },
+        formatDate(now) {
+            let year = now.getFullYear();
+            let month = now.getMonth() + 1;
+            let date = now.getDate();
+            let hour = now.getHours();
+            let minute = now.getMinutes();
+            let second = now.getSeconds();
+            return (
+                year +
+                "-" +
+                month +
+                "-" +
+                (date > 10 ? date : "0" + date) +
+                " " +
+                hour +
+                ":" +
+                (minute > 10 ? minute : "0" + minute) +
+                ":" +
+                (second > 10 ? second : "0" + second)
+            );
+        },
     },
 };
 </script>
@@ -328,7 +522,7 @@ export default {
     }
     // 属性tab
     .property-tab {
-        margin-bottom: 20px;
+        margin-top: 20px;
         // 设备样式
         .equipment {
             & > div {
@@ -353,6 +547,84 @@ export default {
                 }
             }
         }
+        // 空间样式
+        .space {
+            & > div {
+                margin-bottom: 15px;
+                font-size: 12px;
+                color: #8d9399;
+                line-height: 16px;
+            }
+            .color-select {
+                width: 32px;
+                height: 20px;
+                overflow: hidden;
+                position: relative;
+                margin: 4px 0;
+                .fix-box-1 {
+                    margin-top: -8px;
+                    margin-left: -8px;
+                    /deep/ .el-color-picker__trigger {
+                        width: 200px;
+                        height: 200px;
+                    }
+                }
+            }
+            .font {
+                display: flex;
+                // height: 20px;
+                .color {
+                    margin-right: 20px;
+                    p{
+                        margin-bottom: 10px;
+                    }
+                    .color-select {
+                        top: 4px;
+                    }
+                }
+            }
+            // 边框
+            .border {
+                width: 240px;
+                .property {
+                    display: flex;
+                    align-items: center;
+                    // justify-content: space-around;
+                    .color-box {
+                        display: flex;
+                        align-items: center;
+                        flex-direction: column;
+                        .cololorSelect {
+                            width: 32px;
+                            height: 20px;
+                            overflow: hidden;
+                            position: relative;
+                            margin: 4px 0;
+                            .fix-box-1 {
+                                margin-top: -16px;
+                                margin-left: -8px;
+                                /deep/ .el-color-picker__trigger {
+                                    width: 200px;
+                                    height: 200px;
+                                }
+                            }
+                        }
+                    }
+                    .line-width {
+                        display: flex;
+                        align-items: center;
+                        flex-direction: column;
+                        margin-left: 20px;
+                        position: relative;
+                    }
+                    span {
+                        font-size: 12px;
+                        color: #1f2429;
+                        margin-top: 4px;
+                    }
+                }
+            }
+        }
     }
 }
 </style>

+ 4 - 4
src/components/editview/leftToolBar/legendList.vue

@@ -2,14 +2,14 @@
 <template>
     <div class="lengend-list">
         <!-- 基础图例 -->
-        <addBaseItem v-if="chiceStatus == 0" />
+        <addBaseItem v-show="chiceStatus == 0" />
         <!-- 管线类 -->
-        <pipeList v-else-if="chiceStatus == 1" />
+        <pipeList v-show="chiceStatus == 1" />
         <!-- 设备类 -->
-        <equipment-list v-else-if="chiceStatus == 2" @openAddEqupModle="showAddEquipmentDialog = true" />
+        <equipment-list v-show="chiceStatus == 2" @openAddEqupModle="showAddEquipmentDialog = true" />
         <!-- 设备组 -->
         <!-- 空间 -->
-        <space-list v-else-if="chiceStatus == 4" @openAddEqupModle="showAddSpaceDialog = true" />
+        <space-list v-show="chiceStatus == 4" @openAddEqupModle="showAddSpaceDialog = true" />
         <!-- 添加设备 -->
         <add-equipment-dialog @closeModal="showAddEquipmentDialog = false" :showDialog="showAddEquipmentDialog" />
         <!-- 添加空间 -->