Browse Source

图形 属性改为computed计算属性

yunxing 4 years ago
parent
commit
f44b2bcadb

+ 120 - 60
src/components/editview/rightPropertyBar/BaseGraphy.vue

@@ -8,11 +8,23 @@
                 <div class="property">
                     <div>
                         <span>W</span>
-                        <el-input style="width: 74px; margin-left: 6px" size="mini" v-model="width" placeholder="请输入内容"></el-input>
+                        <el-input
+                            style="width: 74px; margin-left: 6px"
+                            size="mini"
+                            v-model="GraphyItem.width"
+                            disabled
+                            placeholder="请输入内容"
+                        ></el-input>
                     </div>
                     <div>
                         <span>H</span>
-                        <el-input style="width: 74px; margin-left: 6px" size="mini" v-model="height" placeholder="请输入内容"></el-input>
+                        <el-input
+                            style="width: 74px; margin-left: 6px"
+                            size="mini"
+                            v-model="GraphyItem.height"
+                            disabled
+                            placeholder="请输入内容"
+                        ></el-input>
                     </div>
                     <i class="el-icon-link"></i>
                 </div>
@@ -22,13 +34,7 @@
                 <div class="property property-push">
                     <div class="color-box">
                         <div class="cololorSelect">
-                            <el-color-picker
-                                show-alpha
-                                popper-class="graphy-color-picker"
-                                @change="changeFillcolor"
-                                class="fix-box-1"
-                                v-model="fillColor"
-                            ></el-color-picker>
+                            <el-color-picker show-alpha popper-class="graphy-color-picker" class="fix-box-1" v-model="fillColor"></el-color-picker>
                         </div>
                         <span>颜色</span>
                     </div>
@@ -39,34 +45,44 @@
                 <div class="property">
                     <div class="color-box">
                         <div class="cololorSelect">
-                            <el-color-picker
-                                popper-class="graphy-color-picker"
-                                show-alpha
-                                class="fix-box-1"
-                                v-model="strokeColor"
-                            ></el-color-picker>
+                            <el-color-picker popper-class="graphy-color-picker" show-alpha class="fix-box-1" v-model="strokeColor"></el-color-picker>
                         </div>
                         <span>颜色</span>
                     </div>
                     <div class="line-width">
-                        <el-input-number
+                        <!-- <el-input-number
                             style="width: 80px"
-                            v-model="linewidth"
+                            v-model="lineWidth"
                             controls-position="right"
-                            @change="changeLinewidth"
                             size="mini"
                             :min="1"
                             :max="20"
                             :maxlength="100"
-                        ></el-input-number>
+                            
+                        ></el-input-number> -->
+                        <el-input style="width: 80px" v-model="lineWidth" type="number" size="mini" placeholder="输入线宽" />
+
                         <span>线宽</span>
                     </div>
                     <div class="line-width">
-                        <a-select style="width: 80px" v-model="linestyle" :default-value="borderLineOption[0].id" @change="changeLineStyle">
+                        <!-- <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>
+                        </a-select> -->
+                        <el-select
+                            v-model="lineStyle"
+                            popper-class="line-select"
+                            :default-value="borderLineOption[0].id"
+                            size="mini"
+                            style="width: 80px"
+                            placeholder="请选择"
+                            ref="selectLine"
+                        >
+                            <el-option v-for="item in borderLineOption" :key="item.id" :label="item.src" :value="item.id">
+                                <img :src="item.src" alt width="60" />
+                            </el-option>
+                        </el-select>
                         <span>线形</span>
                     </div>
                 </div>
@@ -80,12 +96,11 @@ import { SColor } from "@persagy-web/draw";
 import { rgbaNum } from "@persagy-web/big-edit/lib/until";
 import { findIndex } from "lodash";
 export default {
-    props: ["GraphyItem", "lineStyle", "lineWidth", "Width", "Height", "fillColor"],
+    props: ["GraphyItem"],
     data() {
         return {
             width: 0,
             height: 0,
-            linewidth: 1,
             borderLineOption: [
                 {
                     id: "Solid",
@@ -100,10 +115,27 @@ export default {
                     src: require("@/assets/images/dotLine.png"),
                 },
             ],
-            linestyle: "Solid",
         };
     },
     computed: {
+        /**
+         * 填充颜色
+         */
+        fillColor: {
+            get: function () {
+                return this.GraphyItem.fillColor.toRgba();
+            },
+            set: function (val) {
+                const colorList = rgbaNum(val);
+                const oldVal = this.GraphyItem.fillColor;
+                const newVal = new SColor(Number(colorList[0]), Number(colorList[1]), Number(colorList[2]), colorList[3] * 255);
+                bus.$emit("undoAttr", this.GraphyItem, "fillColor", oldVal, newVal);
+                this.GraphyItem.fillColor = newVal;
+            },
+        },
+        /**
+         * 边框颜色
+         */
         strokeColor: {
             get: function () {
                 return this.GraphyItem.strokeColor.toRgba();
@@ -116,51 +148,79 @@ export default {
                 this.GraphyItem.strokeColor = newVal;
             },
         },
-    },
-    watch: {
-        // strokeColor(val) {
-        //     this.color = val;
-        // },
-        lineWidth(val) {
-            this.linewidth = val;
-        },
-        lineStyle(val) {
-            this.linestyle = val;
-        },
-        Width(val) {
-            this.width = val;
-        },
-        Height(val) {
-            this.height = val;
+
+        /**
+         * 边框线宽
+         */
+        lineWidth: {
+            get: function () {
+                const size = this.GraphyItem.lineWidth;
+                if (size > 20) {
+                    return 20;
+                }
+                return Number(size);
+            },
+            set: function (newV) {
+                const oldV = this.GraphyItem.lineWidth;
+                this.GraphyItem.lineWidth = Number(newV);
+                bus.$emit("undoAttr", this.GraphyItem, "lineWidth", oldV, newV);
+            },
         },
-        fillColor(val) {
-            this.fillcolor = val;
+        /**
+         * 边框线型
+         */
+        lineStyle: {
+            get: function () {
+                const id = this.borderLineOption[this.GraphyItem.lineStyle].id;
+                // 修改线型下拉菜单样式
+                this.$nextTick(() => {
+                    this.setLineStyle("selectLine", id);
+                });
+                return id;
+            },
+            set: function (newV) {
+                newV = findIndex(this.borderLineOption, ["id", newV]);
+                const oldV = this.GraphyItem.lineStyle;
+                this.GraphyItem.lineStyle = newV;
+                bus.$emit("undoAttr", this.GraphyItem, "lineStyle", oldV, newV);
+            },
         },
     },
+    watch: {},
     mounted() {
         console.log("GraphyItem:", this.GraphyItem);
         window.SColor = SColor;
         window.GraphyItem = this.GraphyItem;
     },
     methods: {
-        changeHeight(val) {
-            bus.$emit("updateStyle", "height", val);
-        },
-        changeWidth(val) {
-            bus.$emit("updateStyle", "width", val);
-        },
-        changeLinewidth(val) {
-            bus.$emit("updateStyle", "lineWidth", val);
-        },
-        changeFillcolor(val) {
-            bus.$emit("updateStyle", "fillColor", val);
-        },
-        // changeColor(val) {
-        //     bus.$emit("updateStyle", "strokeColor", val);
-        // },
-        // 改变线样式
-        changeLineStyle(val) {
-            bus.$emit("updateStyle", "lineStyle", val);
+        /**
+         * 修改线型下啦菜单样式
+         * @param {String} ref refs名称
+         * @param {String} id 选中的线型id
+         */
+        setLineStyle(ref, id) {
+            const img = this.borderLineOption.filter((v) => v.id === id)[0]?.src;
+            if (img) {
+                this.$refs[ref]?.$el?.children[0].children[0].setAttribute(
+                    "style",
+                    `
+                        background: url(${img}) no-repeat;
+                        color: rgba(0,0,0,0);
+                        text-indent: -9999px;
+                        background-position: 15px center;
+                        background-size: 40px 1px;
+                    `
+                );
+            } else {
+                this.$refs[ref]?.$el?.children[0].children[0].setAttribute(
+                    "style",
+                    `
+                        background: inherit;
+                        color:inherit;
+                        text-indent: 0;
+                    `
+                );
+            }
         },
     },
 };

+ 71 - 78
src/components/editview/rightPropertyBar/property.vue

@@ -4,15 +4,8 @@
         <baseTextPro v-if="itemObj && ['BaseText', 'BaseExplain'].includes(itemType)" :TextItem="itemObj"></baseTextPro>
         <baseLinePro v-if="itemObj && itemType == 'BaseArrow'" :LineItem="itemObj"></baseLinePro>
         <BaseGraphy
-            :lineStyle="lineStyle"
-            :lineWidth="lineWidth"
-            :strokeColor="strokeColor"
-            :fillColor="fillColor"
-            :Url="Url"
-            :Width="Width"
-            :Height="Height"
-            v-if="itemObj && ['BaseRect', 'BaseTriangle', 'BaseCircle', 'BasePolygon', 'BaseArrowPolygon'].includes(itemType)"
             :GraphyItem="itemObj"
+            v-if="itemObj && ['BaseRect', 'BaseTriangle', 'BaseCircle', 'BasePolygon', 'BaseArrowPolygon'].includes(itemType)"
         ></BaseGraphy>
         <BaseImagePro v-if="itemObj && itemType == 'BaseImage'" :ImageItem="itemObj"></BaseImagePro>
         <BaseEquipment :EquipItem="itemObj" v-if="itemObj && itemType == 'BaseEquipment'"></BaseEquipment>
@@ -57,22 +50,22 @@ export default {
     data() {
         return {
             itemType: "", // item 类型
-            strokeColor: "", //线条颜色
-            lineStyle: "solid", //线条样式
-            lineWidth: 1, //线宽
-            color: "", ///文本颜色
-            fontSize: 0, //字体大小
-            textMsg: "", // 文本
-            backgroundColor: "", // 背景色
-            Width: 0, //item 宽
-            Height: 0, //item 高
-            posX: 0, // item X坐标
-            posY: 0, // item Y坐标
-            Url: "", // 路径
-            fillColor: "", //填充色
-            begin: "", //开头样式
-            end: "", //结尾样式
-            AnotherMsg: "", // 附加信息 (只用与设备图例)
+            // strokeColor: "", //线条颜色
+            // lineStyle: "solid", //线条样式
+            // lineWidth: 1, //线宽
+            // color: "", ///文本颜色
+            // fontSize: 0, //字体大小
+            // textMsg: "", // 文本
+            // backgroundColor: "", // 背景色
+            // Width: 0, //item 宽
+            // Height: 0, //item 高
+            // posX: 0, // item X坐标
+            // posY: 0, // item Y坐标
+            // Url: "", // 路径
+            // fillColor: "", //填充色
+            // begin: "", //开头样式
+            // end: "", //结尾样式
+            // AnotherMsg: "", // 附加信息 (只用与设备图例)
             itemObj: null,
         };
     },
@@ -105,63 +98,63 @@ export default {
             //         this.itemType = "BaseEquipmentMsg";
             //     }
             // }
-            console.log(`this.itemType: ,${this.itemType}`, this.itemObj);
+            // console.log(`this.itemType: ,${this.itemType}`, this.itemObj);
             // 同步联动样式
-            this.linkStyle(itemList);
+            // this.linkStyle(itemList);
         },
         // 同步样式
-        linkStyle(itemList) {
-            const item = itemList[0];
-            this.EquipMsgItem = null;
-            if (this.itemType == "BaseArrow") {
-                this.strokeColor = item.strokeColor.toRgba();
-                this.lineStyle = lineStyle[item.lineStyle];
-                this.lineWidth = item.lineWidth;
-                this.begin = arrowType[item.begin];
-                this.end = arrowType[item.end];
-            } else if (this.itemType == "BaseText" || this.itemType == "BaseExplain") {
-                this.strokeColor = item.strokeColor.toRgba();
-                this.color = item.color.toRgba();
-                this.backgroundColor = item.backgroundColor.toRgba();
-                this.textMsg = item.text;
-                this.fontSize = item.font.size;
-            } else if (this.itemType == "BaseImage" || this.itemType == "BasePipeUninTool") {
-                this.Width = item.width; //item 宽
-                this.Height = item.height; //item 高
-                this.Url = item.url; // 路径
-                this.lineStyle = lineStyle[item.lineStyle];
-                this.lineWidth = item.lineWidth;
-                this.strokeColor = item.strokeColor.toRgba();
-            } else if (
-                this.itemType == "BaseRect" ||
-                this.itemType == "BaseTriangle" ||
-                this.itemType == "BaseCircle" ||
-                this.itemType == "BasePolygon"
-            ) {
-                this.Width = item.width; //item 宽
-                this.Height = item.height; //item 高
-                this.lineStyle = lineStyle[item.lineStyle];
-                this.lineWidth = item.lineWidth;
-                this.strokeColor = item.strokeColor.toRgba();
-                this.fillColor = item.fillColor.toRgba();
-                // 填充色
-            }
-            // else if (this.itemType == "BaseEquipment") {
-            //     this.posX = item.pos.x; //item 宽
-            //     this.posY = item.pos.y; //item 高
-            //     this.AnotherMsg = item.anotherMsg;
-            //     if (item.infoPointList && item.infoPointList.length) {
-            //         this.infoPointList = item.infoPointList;
-            //     } else {
-            //         this.infoPointList = [];
-            //     }
-            // }
-            // else if (this.itemType == "BaseEquipmentMsg") {
-            //     // 获取信息点详情信息
-            //     this.EquipMsgData = item.curTextItem.propertyData;
-            //     this.EquipMsgItem = item.curTextItem;
-            // }
-        },
+        // linkStyle(itemList) {
+        //     const item = itemList[0];
+        //     this.EquipMsgItem = null;
+        //     if (this.itemType == "BaseArrow") {
+        //         this.strokeColor = item.strokeColor.toRgba();
+        //         this.lineStyle = lineStyle[item.lineStyle];
+        //         this.lineWidth = item.lineWidth;
+        //         this.begin = arrowType[item.begin];
+        //         this.end = arrowType[item.end];
+        //     } else if (this.itemType == "BaseText" || this.itemType == "BaseExplain") {
+        //         this.strokeColor = item.strokeColor.toRgba();
+        //         this.color = item.color.toRgba();
+        //         this.backgroundColor = item.backgroundColor.toRgba();
+        //         this.textMsg = item.text;
+        //         this.fontSize = item.font.size;
+        //     } else if (this.itemType == "BaseImage" || this.itemType == "BasePipeUninTool") {
+        //         this.Width = item.width; //item 宽
+        //         this.Height = item.height; //item 高
+        //         this.Url = item.url; // 路径
+        //         this.lineStyle = lineStyle[item.lineStyle];
+        //         this.lineWidth = item.lineWidth;
+        //         this.strokeColor = item.strokeColor.toRgba();
+        //     } else if (
+        //         this.itemType == "BaseRect" ||
+        //         this.itemType == "BaseTriangle" ||
+        //         this.itemType == "BaseCircle" ||
+        //         this.itemType == "BasePolygon"
+        //     ) {
+        //         this.Width = item.width; //item 宽
+        //         this.Height = item.height; //item 高
+        //         this.lineStyle = lineStyle[item.lineStyle];
+        //         this.lineWidth = item.lineWidth;
+        //         this.strokeColor = item.strokeColor.toRgba();
+        //         this.fillColor = item.fillColor.toRgba();
+        //         // 填充色
+        //     }
+        //     // else if (this.itemType == "BaseEquipment") {
+        //     //     this.posX = item.pos.x; //item 宽
+        //     //     this.posY = item.pos.y; //item 高
+        //     //     this.AnotherMsg = item.anotherMsg;
+        //     //     if (item.infoPointList && item.infoPointList.length) {
+        //     //         this.infoPointList = item.infoPointList;
+        //     //     } else {
+        //     //         this.infoPointList = [];
+        //     //     }
+        //     // }
+        //     // else if (this.itemType == "BaseEquipmentMsg") {
+        //     //     // 获取信息点详情信息
+        //     //     this.EquipMsgData = item.curTextItem.propertyData;
+        //     //     this.EquipMsgItem = item.curTextItem;
+        //     // }
+        // },
         // 修改设备信息点数据
         changeEquipMsg(val) {
             const obj = this.EquipMsgItem.propertyData;