Browse Source

1. fix: 去除用户页,多选平面图时,多余的下载按钮
2.修改右侧属性栏

yunxing 4 years ago
parent
commit
f3283a592c

+ 52 - 26
src/components/editview/rightPropertyBar/BaseGraphy.vue

@@ -22,7 +22,13 @@
                 <div class="property property-push">
                     <div class="color-box">
                         <div class="cololorSelect">
-                            <el-color-picker show-alpha @change="changeFillcolor" class="fix-box-1" v-model="fillColor"></el-color-picker>
+                            <el-color-picker
+                                show-alpha
+                                popper-class="graphy-color-picker"
+                                @change="changeFillcolor"
+                                class="fix-box-1"
+                                v-model="fillColor"
+                            ></el-color-picker>
                         </div>
                         <span>颜色</span>
                     </div>
@@ -33,7 +39,13 @@
                 <div class="property">
                     <div class="color-box">
                         <div class="cololorSelect">
-                            <el-color-picker @change="changeColor" show-alpha class="fix-box-1" v-model="color"></el-color-picker>
+                            <el-color-picker
+                                @change="changeColor"
+                                popper-class="graphy-color-picker"
+                                show-alpha
+                                class="fix-box-1"
+                                v-model="color"
+                            ></el-color-picker>
                         </div>
                         <span>颜色</span>
                     </div>
@@ -65,8 +77,11 @@
 </template>
 <script>
 import bus from "@/bus/bus";
+import { SColor } from "@persagy-web/draw";
+import { rgbaNum } from "@persagy-web/big-edit/lib/until";
+import { findIndex } from "lodash";
 export default {
-    props: ["strokeColor", "lineStyle", "lineWidth", "Width", "Height", "fillColor"],
+    props: ["GraphyItem", "strokeColor", "lineStyle", "lineWidth", "Width", "Height", "fillColor"],
     data() {
         return {
             width: 0,
@@ -90,28 +105,6 @@ export default {
             linestyle: "Solid",
         };
     },
-    mounted() {},
-    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);
-        },
-    },
     watch: {
         strokeColor(val) {
             this.color = val;
@@ -133,10 +126,40 @@ export default {
         },
     },
     mounted() {
-        // console.log(Select)
+        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);
+        },
     },
 };
 </script>
+<style lang="less" >
+.graphy-color-picker {
+    /deep/.el-input__inner {
+        padding-right: 0 !important;
+    }
+}
+</style>
 <style lang="less" scoped>
 ul,
 li {
@@ -216,5 +239,8 @@ li {
         border-top: 1px solid #e4e5e7;
         border-bottom: 1px solid #e4e5e7;
     }
+    /deep/ .el-input-number .el-input__inner {
+        padding-right: 40px !important;
+    }
 }
 </style>

+ 9 - 3
src/components/editview/rightPropertyBar/BaseImagePro.vue

@@ -41,7 +41,7 @@
                 <div class="property">
                     <div class="color-box">
                         <div class="cololorSelect">
-                            <el-color-picker show-alpha class="fix-box-1" v-model="color"></el-color-picker>
+                            <el-color-picker show-alpha popper-class="imgae-color-picker" class="fix-box-1" v-model="color"></el-color-picker>
                         </div>
                         <span class="text">颜色</span>
                     </div>
@@ -191,8 +191,6 @@ export default {
             },
         },
     },
-
-    watch: {},
     mounted() {},
     methods: {
         /**
@@ -293,6 +291,11 @@ export default {
         text-align: center;
     }
 }
+.imgae-color-picker {
+    /deep/.el-input__inner {
+        padding-right: 0 !important;
+    }
+}
 </style>
 <style lang="less" scoped>
 ul,
@@ -384,5 +387,8 @@ li {
             }
         }
     }
+    /deep/ .el-input-number .el-input__inner {
+        padding-right: 40px !important;
+    }
 }
 </style>

+ 188 - 50
src/components/editview/rightPropertyBar/baseLinePro.vue

@@ -8,29 +8,37 @@
                 <div class="property">
                     <div class="color-box">
                         <div class="cololorSelect">
-                            <el-color-picker show-alpha @change="changeColor" class="fix-box-1" v-model="color"></el-color-picker>
+                            <el-color-picker show-alpha popper-class="line-color-picker" class="fix-box-1" v-model="strokeColor"></el-color-picker>
                         </div>
                         <span class="text">颜色</span>
                     </div>
                     <div class="line-width">
-                        <el-input-number
+                        <!-- <el-input-number
                             style="width: 80px"
                             v-model="linewidth"
                             controls-position="right"
-                            @change="changeWidth"
                             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 class="text">线宽</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">
+                        <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" />
-                            </a-select-option>
-                        </a-select>
+                            </el-option>
+                        </el-select>
                         <span class="text">线型</span>
                     </div>
                 </div>
@@ -39,7 +47,7 @@
                 <div class="property">
                     <div class="line-style">
                         <div class="line-arrow">
-                            <a-select
+                            <!-- <a-select
                                 style="width: 80px; margin-right: 8px"
                                 v-model="begin"
                                 :default-value="arrowType[0].id"
@@ -48,15 +56,43 @@
                                 <a-select-option v-for="item in arrowType" :key="item.id" :label="item.src" :value="item.id">
                                     {{ item.src }}
                                 </a-select-option>
-                            </a-select>
+                            </a-select> -->
+                            <el-select
+                                v-model="begin"
+                                class="line-begin"
+                                popper-class="line-select"
+                                :default-value="arrowType[0].id"
+                                size="mini"
+                                style="width: 90px"
+                                placeholder="请选择"
+                            >
+                                <el-option v-for="item in arrowType" :key="item.id" :label="item.src" :value="item.id">
+                                    <!-- <img :src="item.src" alt width="60" /> -->
+                                    {{ item.src }}
+                                </el-option>
+                            </el-select>
                             <span class="text">左箭头</span>
                         </div>
                         <div class="line-arrow">
-                            <a-select style="width: 80px" v-model="end" :default-value="arrowType[0].id" @change="changeArrowType('end')">
+                            <!-- <a-select style="width: 90px" v-model="end" :default-value="arrowType[0].id" @change="changeArrowType('end')">
                                 <a-select-option v-for="item in arrowType" :key="item.id" :label="item.src" :value="item.id">
                                     {{ item.src }}
                                 </a-select-option>
-                            </a-select>
+                            </a-select> -->
+                            <el-select
+                                v-model="end"
+                                class="line-end"
+                                popper-class="line-select"
+                                :default-value="arrowType[0].id"
+                                size="mini"
+                                style="width: 90px"
+                                placeholder="请选择"
+                            >
+                                <el-option v-for="item in arrowType" :key="item.id" :label="item.src" :value="item.id">
+                                    <!-- <img :src="item.src" alt width="60" /> -->
+                                    {{ item.src }}
+                                </el-option>
+                            </el-select>
                             <span class="text">右箭头</span>
                         </div>
                     </div>
@@ -67,16 +103,14 @@
 </template>
 <script>
 import bus from "@/bus/bus";
+import { rgbaNum } from "@persagy-web/big-edit/lib/until";
+import { findIndex } from "lodash";
+import { SColor } from "@persagy-web/draw";
+
 export default {
-    // props: ["strokeColor", "lineStyle", "lineWidth", "Begin", "End",],
-    props: ["strokeColor", "lineStyle", "lineWidth", "Begin", "End", "TextItem"],
+    props: ["LineItem"],
     data() {
         return {
-            color: "",
-            linewidth: "",
-            linestyle: "",
-            begin: "None",
-            end: "None",
             borderLineOption: [
                 {
                     id: "Solid",
@@ -116,48 +150,136 @@ export default {
             ],
         };
     },
-    methods: {
-        // 改变线宽
-        changeWidth(val) {
-            bus.$emit("updateStyle", "lineWidth", val);
+    computed: {
+        /**
+         * 边框颜色
+         */
+        strokeColor: {
+            get: function () {
+                return this.LineItem.strokeColor.toRgba();
+            },
+            set: function (val) {
+                const colorList = rgbaNum(val);
+                const oldV = this.LineItem.strokeColor;
+                const newV = new SColor(Number(colorList[0]), Number(colorList[1]), Number(colorList[2]), colorList[3] * 255);
+                this.LineItem.strokeColor = newV;
+                bus.$emit("undoAttr", this.LineItem, "strokeColor", oldV, newV);
+            },
         },
-        // 改变颜色
-        changeColor(val) {
-            bus.$emit("updateStyle", "strokeColor", val);
+        /**
+         * 边框线宽
+         */
+        lineWidth: {
+            get: function () {
+                const size = this.LineItem.lineWidth;
+                if (size > 20) {
+                    return 20;
+                }
+                return size;
+            },
+            set: function (newV) {
+                const oldV = this.LineItem.lineWidth;
+                this.LineItem.lineWidth = newV;
+                bus.$emit("undoAttr", this.LineItem, "font", oldV, newV);
+            },
+        },
+        /**
+         * 边框线型
+         */
+        lineStyle: {
+            get: function () {
+                const id = this.borderLineOption[this.LineItem.lineStyle].id;
+                // 修改线型下啦菜单样式
+                this.$nextTick(() => {
+                    this.setLineStyle("selectLine", id);
+                });
+                return id;
+            },
+            set: function (newV) {
+                newV = findIndex(this.borderLineOption, ["id", newV]);
+                const oldV = this.LineItem.lineStyle;
+                this.LineItem.lineStyle = newV;
+                bus.$emit("undoAttr", this.LineItem, "lineStyle", oldV, newV);
+            },
         },
-        // 改变线样式
-        changeLineStyle(val) {
-            bus.$emit("updateStyle", "lineStyle", val);
+        /**
+         * 开始箭头
+         */
+        begin: {
+            get: function () {
+                const id = this.arrowType[this.LineItem.begin].id;
+                return id;
+            },
+            set: function (newV) {
+                newV = findIndex(this.arrowType, ["id", newV]);
+                const oldV = this.LineItem.begin;
+                this.LineItem.begin = newV;
+                bus.$emit("undoAttr", this.LineItem, "begin", oldV, newV);
+            },
         },
-        // 改变箭头样式
-        changeArrowType(dir) {
-            bus.$emit("updateStyle", dir, this[dir]);
+        /**
+         * 结束箭头
+         */
+        end: {
+            get: function () {
+                const id = this.arrowType[this.LineItem.end].id;
+                return id;
+            },
+            set: function (newV) {
+                newV = findIndex(this.arrowType, ["id", newV]);
+                const oldV = this.LineItem.end;
+                this.LineItem.end = newV;
+                bus.$emit("undoAttr", this.LineItem, "end", oldV, newV);
+            },
         },
     },
     mounted() {
-        // console.log(Select)
-        // console.log(this.TextItem);
+        console.log(this.LineItem);
     },
-    watch: {
-        strokeColor(val) {
-            this.color = val;
-        },
-        lineWidth(val) {
-            this.linewidth = val;
-        },
-        lineStyle(val) {
-            console.log("lineStyle::::");
-            this.linestyle = val;
-        },
-        Begin(val) {
-            this.begin = val;
-        },
-        End(val) {
-            this.end = val;
+    methods: {
+        /**
+         * 修改线型下啦菜单样式
+         * @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;
+                    `
+                );
+            }
         },
     },
 };
 </script>
+
+<style lang="less" >
+.line-color-picker {
+    /deep/.el-input__inner {
+        padding-right: 0 !important;
+    }
+}
+.line-select {
+    text-align: center;
+}
+</style>
 <style lang="less" scoped>
 ul,
 li {
@@ -229,6 +351,19 @@ li {
                         display: flex;
                         flex-direction: column;
                         text-align: center;
+                        .line-end {
+                            margin-left: 8px;
+                        }
+                    }
+                    .line-begin,
+                    .line-end {
+                        /deep/ .el-input__inner {
+                            padding-left: 5px;
+                            padding-right: 10px;
+                        }
+                        /deep/ .el-input__suffix {
+                            right: 0;
+                        }
                     }
                 }
                 .text {
@@ -240,5 +375,8 @@ li {
             }
         }
     }
+    /deep/ .el-input-number .el-input__inner {
+        padding-right: 40px !important;
+    }
 }
 </style>

+ 84 - 50
src/components/editview/rightPropertyBar/baseTextPro.vue

@@ -8,33 +8,38 @@
                 <div class="property">
                     <div class="color-box">
                         <div class="cololorSelect">
-                            <el-color-picker show-alpha @change="changeColor" class="fix-box-1" v-model="textColor"></el-color-picker>
+                            <el-color-picker popper-class="text-color-picker" show-alpha class="fix-box-1" v-model="color"></el-color-picker>
                         </div>
                         <span class="text">颜色</span>
                     </div>
                     <div class="line-width">
-                        <el-input-number
+                        <!-- <el-input-number
                             style="width: 80px"
                             v-model="size"
                             controls-position="right"
-                            @change="changeFontSize"
                             size="mini"
                             :min="1"
                             :max="20"
                             :maxlength="100"
-                        ></el-input-number>
+                        ></el-input-number> -->
+                        <el-input style="width: 80px" v-model="size" type="number" size="mini" placeholder="输入字号" />
                         <span class="text">字号</span>
                     </div>
                     <div class="color-box">
                         <div class="cololorSelect">
-                            <el-color-picker @change="changeBackground" show-alpha class="fix-box-1" v-model="bgColor"></el-color-picker>
+                            <el-color-picker
+                                popper-class="text-color-picker"
+                                show-alpha
+                                class="fix-box-1"
+                                v-model="backgroundColor"
+                            ></el-color-picker>
                         </div>
                         <span class="text">背景颜色</span>
                     </div>
                 </div>
             </li>
             <li>
-                <el-input type="textarea" @input="changeText" :autosize="{ minRows: 2, maxRows: 4 }" v-model="text"></el-input>
+                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="text"></el-input>
                 <span class="textarea-text">文本</span>
             </li>
         </ul>
@@ -42,16 +47,12 @@
 </template>
 <script>
 import { rgbaNum } from "@persagy-web/big-edit/lib/until";
-import { SColor } from "@persagy-web/draw";
+import { SColor, SFont } from "@persagy-web/draw";
 import bus from "@/bus/bus";
 export default {
-    props: ["fontSize", "backgroundColor", "textMsg", "color"],
+    props: ["TextItem"],
     data() {
         return {
-            size: 0, //font-size
-            text: "", //文本
-            textColor: "",
-            bgColor: "",
             borderLineOption: [
                 {
                     id: "solid",
@@ -69,48 +70,81 @@ export default {
             borderStyle: "solid",
         };
     },
-    methods: {
-        // 改变文字
-        changeText(val) {
-            bus.$emit("updateStyle", "text", val);
+    computed: {
+        /**
+         * 边框颜色
+         */
+        color: {
+            get: function () {
+                return this.TextItem.color.toRgba();
+            },
+            set: function (val) {
+                const colorList = rgbaNum(val);
+                const oldV = this.TextItem.color;
+                const newV = new SColor(Number(colorList[0]), Number(colorList[1]), Number(colorList[2]), colorList[3] * 255);
+                this.TextItem.color = newV;
+                bus.$emit("undoAttr", this.TextItem, "color", oldV, newV);
+            },
         },
-        // 改变颜色
-        changeColor(val) {
-            const colorList = rgbaNum(val);
-            const color = new SColor(Number(colorList[0]), Number(colorList[1]), Number(colorList[2]), colorList[3] * 255);
-            bus.$emit("updateStyle", "color", color);
-        },
-        // 改变背景颜色
-        changeBackground(val) {
-            bus.$emit("updateStyle", "backgroundColor", val);
-        },
-        // 改变字体大小
-        changeFontSize(val) {
-            bus.$emit("updateStyle", "font", val);
-        },
-    },
-    mounted() {
-        // console.log(Select)
-    },
-    watch: {
-        color(val) {
-            this.textColor = val;
-        },
-        fontSize(val) {
-            this.size = val;
+        /**
+         * 文字大小
+         */
+        size: {
+            get: function () {
+                const size = this.TextItem.font.size;
+                if (size > 20) {
+                    return 20;
+                }
+                return size;
+            },
+            set: function (newV) {
+                newV = new SFont("sans-serif", newV);
+                const oldV = new SFont("sans-serif", this.TextItem.font.size);
+                this.TextItem.font = newV;
+                bus.$emit("undoAttr", this.TextItem, "font", oldV, newV);
+            },
         },
-        backgroundColor(val) {
-            console.log("watch backgroundColor :::::::::::::");
-            console.log(val);
-            this.bgColor = val;
+        /**
+         * 背景颜色
+         */
+        backgroundColor: {
+            get: function () {
+                return this.TextItem.backgroundColor.toRgba();
+            },
+            set: function (val) {
+                const colorList = rgbaNum(val);
+                const oldV = this.TextItem.backgroundColor;
+                const newV = new SColor(Number(colorList[0]), Number(colorList[1]), Number(colorList[2]), colorList[3] * 255);
+                this.TextItem.backgroundColor = newV;
+                bus.$emit("undoAttr", this.TextItem, "backgroundColor", oldV, newV);
+            },
         },
-
-        textMsg(val) {
-            this.text = val;
+        /**
+         * 文本值
+         */
+        text: {
+            get: function () {
+                return this.TextItem.text;
+            },
+            set: function (newV) {
+                const oldV = this.TextItem.text;
+                this.TextItem.text = newV;
+                bus.$emit("undoAttr", this.TextItem, "text", oldV, newV);
+            },
         },
     },
+    methods: {},
+    mounted() {},
+    watch: {},
 };
 </script>
+<style lang="less" >
+.text-color-picker {
+    /deep/.el-input__inner {
+        padding-right: 0 !important;
+    }
+}
+</style>
 <style lang="less" scoped>
 ul,
 li {
@@ -189,8 +223,8 @@ li {
             }
         }
     }
-}
-/deep/.el-input__inner {
-    padding-right: 30px !important;
+    /deep/ .el-input-number .el-input__inner {
+        padding-right: 40px !important;
+    }
 }
 </style>

+ 5 - 33
src/components/editview/rightPropertyBar/property.vue

@@ -1,22 +1,8 @@
 <!--属性栏-->
 <template>
     <div class="propertys" :class="{ width: itemType }">
-        <baseTextPro
-            :TextItem="itemObj"
-            :color="color"
-            :fontSize="fontSize"
-            :textMsg="textMsg"
-            :backgroundColor="backgroundColor"
-            v-show="itemType == 'BaseText' || itemType == 'BaseExplain'"
-        ></baseTextPro>
-        <baseLinePro
-            v-show="itemType == 'BaseArrow'"
-            :strokeColor="strokeColor"
-            :lineStyle="lineStyle"
-            :lineWidth="lineWidth"
-            :Begin="begin"
-            :End="end"
-        ></baseLinePro>
+        <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"
@@ -25,24 +11,10 @@
             :Url="Url"
             :Width="Width"
             :Height="Height"
-            v-show="
-                itemType == 'BaseRect' ||
-                itemType == 'BaseTriangle' ||
-                itemType == 'BaseCircle' ||
-                itemType == 'BasePolygon' ||
-                itemType == 'BaseArrowPolygon'
-            "
+            v-if="itemObj && ['BaseRect', 'BaseTriangle', 'BaseCircle', 'BasePolygon', 'BaseArrowPolygon'].includes(itemType)"
+            :GraphyItem="itemObj"
         ></BaseGraphy>
-        <BaseImagePro
-            :ImageItem="itemObj"
-            :lineStyle="lineStyle"
-            :lineWidth="lineWidth"
-            :strokeColor="strokeColor"
-            :Url="Url"
-            :Width="Width"
-            :Height="Height"
-            v-if="itemObj && itemType == 'BaseImage'"
-        ></BaseImagePro>
+        <BaseImagePro v-if="itemObj && itemType == 'BaseImage'" :ImageItem="itemObj"></BaseImagePro>
         <BaseEquipment :EquipItem="itemObj" v-if="itemObj && itemType == 'BaseEquipment'"></BaseEquipment>
     </div>
 </template>

+ 1 - 1
src/views/home.vue

@@ -63,7 +63,7 @@
                             >项目</span
                         >
                         <el-button size="mini" @click="groupMove">移动到</el-button>
-                        <el-button size="mini" @click="groupDownload" v-if="isPub">下载</el-button>
+                        <!-- <el-button size="mini" @click="groupDownload" v-if="isPub">下载</el-button> -->
                         <el-button size="mini" @click="groupDelete">删除</el-button>
                         <i class="el-icon-close" style="float: right; line-height: 28px; margin-right: 5px" @click="handleCheckAllChange(false)"></i>
                     </div>