1.文案修改 搜索图例名称-->搜索元素名称

2.添加信息点页面,公式逻辑修改

src/components/editview/leftToolBar/addBaseItem.vue

@@ -5,7 +5,7 @@
         <Input
             class="baseItemInput"
             :width="188"
-            placeholder="搜索图例名称"
+            placeholder="搜索元素名称"
             iconType="search"
             v-model="baseItemVal"
             @pressEnter="pressEnter"

src/components/editview/leftToolBar/editInfoPoint.vue

@@ -227,6 +227,8 @@ import { cloneDeep } from "lodash";
 import { rgbaNum, svgTobase64 } from "@persagy-web/big-edit/lib/until";
 import { SPlanDecorator } from "@/lib";
 import { SColor } from "@persagy-web/draw/lib";
+import { v1 as uuidv1 } from "uuid";
+import mergeArrByKey from "@/utils/merge";
 const list = [
     { name: "运行状态", id: "yxzt" },
     { name: "故障状态", id: "gzzt" },
@@ -258,14 +260,9 @@ export default {
             chooseList: [],
             inputVisible: false,
             inputValue: null,
-
-            //瞬时状态列表
-            // instantaneousCheckList: [],
-            // instantaneousList: cloneDeep(list),
-            // 累计指标列表
-            list: [],
-            // accumulativeCheckList: [],
-            // accumulativeList: cloneDeep(list),
+            originList: [], //接口返回信息点原始信息
+            list: [], //接口返回信息点信息
+            formula: [], //从vuex中不同类型中取得的信息点信息
             /** -------------------设备属性使用值start-------------------------- */
             equipmentData: {
                 color: "#000000",
@@ -304,7 +301,7 @@ export default {
         };
     },
     computed: {
-        ...mapState(["styleMap", "state", "id", "graphId", "buildingId", "floorId", "equipItemMap", "zoneIteMap"]),
+        ...mapState(["styleMap", "id", "graphId", "buildingId", "floorId", "equipItemMap", "zoneIteMap"]),
     },
     watch: {
         // 是否打开弹窗
@@ -373,9 +370,14 @@ export default {
          */
         initEquipment() {
             const styleMap = { ...this.styleMap.defaultEquipStyle, ...(this.styleMap[this.code] || {}) };
-            console.log("styleMap:", styleMap);
             const { formula, url, color, size } = styleMap;
-            this.chooseList = JSON.parse(formula || "[]");
+            if (typeof formula === "string") {
+                this.formula = JSON.parse(formula || "[]");
+                this.chooseList = JSON.parse(formula || "[]");
+            } else {
+                this.formula = formula;
+                this.chooseList = cloneDeep(formula).map((i) => i.name);
+            }
             // color 8位hex转rgba
             // 设备数据
             this.equipmentData = { url, color: new SColor(color).toRgba(), size, imgUrl: "" };
@@ -387,10 +389,16 @@ export default {
          */
         initSpace() {
             const spaceStyleMap = { ...this.styleMap.defaultZoneStyle, ...(this.styleMap[this.code] || {}) };
-            console.log("styleMap:", spaceStyleMap);
             // eslint-disable-next-line prefer-const
             let { formula, color, size, fillColor, strokeColor, lineWidth, lineStyle } = spaceStyleMap;
-            this.chooseList = JSON.parse(formula || "[]");
+            this.formula = formula;
+            if (typeof formula === "string") {
+                this.formula = JSON.parse(formula || "[]");
+                this.chooseList = JSON.parse(formula || "[]");
+            } else {
+                this.formula = formula;
+                this.chooseList = cloneDeep(formula).map((i) => i.name);
+            }
             // lineStyle转换
             lineStyle = this.borderLineOption[lineStyle].id;
             this.spaceData = {
@@ -420,6 +428,8 @@ export default {
         async getInfoPoint() {
             const res = await dictQuery({ pageNumber: 1, pageSize: 1000, type: this.code });
             let data = res.content;
+            // 保存原始数据
+            this.originList = data;
             // 按照一级名称,将一维数组拆分成二维数组
             data = this._(data).groupBy("firstName").values().value();
             this.list = data;
@@ -465,39 +475,52 @@ export default {
                     break;
             }
             let res = "";
+            //  16,16 9,21
             // 上传的style全量信息
             const postStyle = { ...this.styleMap, [this.code]: style };
             delete postStyle.defaultEquipStyle;
             delete postStyle.defaultZoneStyle;
             // 未发布接口
-            if (this.state === "Draft") {
-                res = await planerUpdate({
-                    content: [
-                        {
-                            buildingId: this.buildingId,
-                            floorId: this.floorId,
-                            id: this.id,
-                            graphId: this.graphId,
-                            style: postStyle,
-                        },
-                    ],
-                    projection: ["style"],
-                });
-            } else if (this.state === "Publish") {
-                //已发布接口
-                res = await pubPlanerUpdate({
-                    content: [
-                        {
-                            buildingId: this.buildingId,
-                            floorId: this.floorId,
-                            id: this.id,
-                            graphId: this.graphId,
-                            style: postStyle,
-                        },
-                    ],
-                    projection: ["style"],
-                });
-            }
+            res = await planerUpdate({
+                content: [
+                    {
+                        buildingId: this.buildingId,
+                        floorId: this.floorId,
+                        id: this.id,
+                        graphId: this.graphId,
+                        style: postStyle,
+                    },
+                ],
+                projection: ["style"],
+            });
+            // if (this.state === "Draft") {
+            //     res = await planerUpdate({
+            //         content: [
+            //             {
+            //                 buildingId: this.buildingId,
+            //                 floorId: this.floorId,
+            //                 id: this.id,
+            //                 graphId: this.graphId,
+            //                 style: postStyle,
+            //             },
+            //         ],
+            //         projection: ["style"],
+            //     });
+            // } else if (this.state === "Publish") {
+            //     //已发布接口
+            //     res = await pubPlanerUpdate({
+            //         content: [
+            //             {
+            //                 buildingId: this.buildingId,
+            //                 floorId: this.floorId,
+            //                 id: this.id,
+            //                 graphId: this.graphId,
+            //                 style: postStyle,
+            //             },
+            //         ],
+            //         projection: ["style"],
+            //     });
+            // }
             if (res.result === "success") {
                 this.ADDSTYLE({ id: this.code, style });
                 // 修改图上设备类/设备组/空间 样式
@@ -516,43 +539,65 @@ export default {
                 this.dialogVisible = false;
                 this.$emit("closeModal");
             } else {
-                this.$message(res.message);
+                this.$message.error(res.message);
             }
         },
         /**
          * 设备上传参数处理
          */
         uploadEquipment() {
-            const formula = JSON.stringify(this.chooseList);
-            // eslint-disable-next-line prefer-const
-            let { color, url, size } = this.equipmentData;
-            const colorlist = rgbaNum(color);
-            color = new SColor(Number(colorlist[0]), Number(colorlist[1]), Number(colorlist[2]), colorlist[3] * 255).value;
-            return { color, size, formula, url };
+            const formula = this.handleFormula();
+            const { color, url, size } = this.equipmentData;
+            return { color: this.handleColor(color), size, formula, url };
         },
         /**
          * 空间上传参数处理
          */
         uploadSpace() {
-            const formula = JSON.stringify(this.chooseList);
-            const handleColor = (color) => {
-                const colorlist = rgbaNum(color);
-                return new SColor(Number(colorlist[0]), Number(colorlist[1]), Number(colorlist[2]), colorlist[3] * 255).value;
-            };
+            const formula = this.handleFormula();
             // eslint-disable-next-line prefer-const
             let { color, size, fillColor, strokeColor, lineWidth, lineStyle } = this.spaceData;
             lineStyle = this.borderLineOption.filter((v) => v.id === lineStyle)[0]._value;
             return {
-                color: handleColor(color),
+                color: this.handleColor(color),
                 size,
                 formula,
-                fillColor: handleColor(fillColor),
-                strokeColor: handleColor(strokeColor),
+                fillColor: this.handleColor(fillColor),
+                strokeColor: this.handleColor(strokeColor),
                 lineWidth,
                 lineStyle,
             };
         },
         /**
+         * 处理formula
+         */
+        handleFormula() {
+            const formula = [];
+            console.time("处理formula");
+            // 按照名称 合并 接口返回的信息点数据 和 vuex中style下的formula数据 (formula数据中有信息点 pos等字段)
+            const list = mergeArrByKey(this.originList, this.formula, "name");
+            // 遍历checkbox按钮组, 生成新的 formula
+            this.chooseList.map((name) => {
+                const data = list.filter((v) => v.name === name);
+                // 正常信息点,放入全部信息
+                if (data.length) {
+                    formula.push(data[0]);
+                } else {
+                    // 自定义的公式,放入名称,id
+                    formula.push({ name, id: uuidv1() });
+                }
+            });
+            console.timeEnd("处理formula");
+            return formula;
+        },
+        /**
+         * 处理颜色
+         */
+        handleColor(color) {
+            const colorlist = rgbaNum(color);
+            return new SColor(Number(colorlist[0]), Number(colorlist[1]), Number(colorlist[2]), colorlist[3] * 255).value;
+        },
+        /**
          * 属性
          */
         /** ----------设备的属性---------- */
@@ -649,9 +694,7 @@ export default {
             this.setLineStyle();
         },
         setLineStyle() {
-            console.log("setLineStyle");
             const img = this.borderLineOption.filter((v) => v.id === this.spaceData.lineStyle)[0]?.src;
-            console.log(img);
             if (img) {
                 this.$refs.selectLine?.$el?.children[0].children[0].setAttribute(
                     "style",

src/utils/merge.js

@@ -8,12 +8,12 @@ import _, { cloneDeep, keyBy, isArray, isString } from "lodash";
  * @param {*} keyArr2 数组2中的键名
  */
 //   // 合并数据,a,b合并,相同键值按照.merge后的对象(b)
-//   var a = [
+//   const a = [
 //     { name: "a", id: "1111", a: 1, b: 2, c: 3 },
 //     { name: "b", id: "2222", a: 2 },
 //     { name: "c", id: "3333", a: 3 },
 // ];
-// var b = [
+// const b = [
 //     { text: "vv", pid: "1111", a: {assas:1} },
 //     { text: "vv", pid: "2222", a: 22 },
 //     { text: "vv", pid: "3333", a: 33 },
@@ -29,7 +29,7 @@ export default function mergeArrByKey(arr1, arr2, keyArr1, keyArr2 = keyArr1) {
     if (!isString(keyArr1)) {
         throw new Error("键名必须为字符串");
     }
-    let newArr = _(cloneDeep(arr1))
+    const newArr = _(cloneDeep(arr1))
         .keyBy(keyArr1)
         .merge(keyBy(arr2, keyArr2))
         .values()