Browse Source

首页 点击已发布卡片,逻辑修改

yunxing 4 years ago
parent
commit
0400d6527c

+ 157 - 164
src/components/editview/rightPropertyBar/baseTextPro.vue

@@ -1,189 +1,182 @@
 <!-- 基本的文本属性框 -->
 <template>
-  <div class="base-text">
-    <div class="title">属性</div>
-    <ul>
-      <li>
-        <div class="small-title">边框</div>
-        <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>
-            </div>
-            <span>颜色</span>
-          </div>
-          <div class="line-width">
-            <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>
-            <span>字号</span>
-          </div>
-          <div class="color-box">
-            <div class="cololorSelect">
-              <el-color-picker
-                @change="changeBackground"
-                show-alpha
-                class="fix-box-1"
-                v-model="backgroundcolor"
-              ></el-color-picker>
-            </div>
-            <span>背景颜色</span>
-          </div>
-        </div>
-      </li>
-      <li>
-        <el-input
-          type="textarea"
-          @input="changeText"
-          :autosize="{ minRows: 2, maxRows: 4 }"
-          v-model="text"
-        ></el-input>
-        <span>文本</span>
-      </li>
-    </ul>
-  </div>
+    <div class="base-text">
+        <div class="title">属性</div>
+        <ul>
+            <li>
+                <div class="small-title"></div>
+                <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>
+                        </div>
+                        <span>颜色</span>
+                    </div>
+                    <div class="line-width">
+                        <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>
+                        <span>字号</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>
+                        </div>
+                        <span>背景颜色</span>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <el-input type="textarea" @input="changeText" :autosize="{ minRows: 2, maxRows: 4 }" v-model="text"></el-input>
+                <span>文本</span>
+            </li>
+        </ul>
+    </div>
 </template>
 <script>
+import { rgbaNum } from "@persagy-web/big-edit/lib/until";
+import { SColor } from "@persagy-web/draw";
 import bus from "@/bus/bus";
 export default {
-  props: ["strokeColor", "fontSize", "backgroundColor", "textMsg"],
-  data() {
-    return {
-      size: 0, //font-size
-      text: "", //文本
-      color: "",
-      backgroundcolor: "",
-      borderLineOption: [
-        {
-          id: "solid",
-          src: require("@/assets/images/solidLine.png"),
+    props: ["fontSize", "backgroundColor", "textMsg", "color"],
+    data() {
+        return {
+            size: 0, //font-size
+            text: "", //文本
+            textColor: "",
+            bgColor: "",
+            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"),
+                },
+            ],
+            borderStyle: "solid",
+        };
+    },
+    methods: {
+        // 改变文字
+        changeText(val) {
+            bus.$emit("updateStyle", "text", val);
         },
-        {
-          id: "dashed",
-          src: require("@/assets/images/dashedLine.png"),
+        // 改变颜色
+        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);
         },
-        {
-          id: "dotted",
-          src: require("@/assets/images/dotLine.png"),
+        // 改变背景颜色
+        changeBackground(val) {
+            // const colorList = rgbaNum(val);
+            // const color = new SColor(Number(colorList[0]), Number(colorList[1]), Number(colorList[2]), colorList[3] * 255);
+            bus.$emit("updateStyle", "backgroundColor", val);
+        },
+        // 改变字体大小
+        changeFontSize(val) {
+            bus.$emit("updateStyle", "font", val);
         },
-      ],
-      borderStyle: "solid",
-    };
-  },
-  methods: {
-    // 改变文字
-    changeText(val) {
-      bus.$emit("updateStyle", "text", val);
-    },
-    // 改变颜色
-    changeColor(val) {
-      bus.$emit("updateStyle", "strokeColor", val);
-    },
-    // 改变背景颜色
-    changeBackground(val) {
-      bus.$emit("updateStyle", "backgroundColor", val);
-    },
-    // 改变字体大小
-    changeFontSize(val) {
-      bus.$emit("updateStyle", "font", val);
-    },
-  },
-  mounted() {
-    // console.log(Select)
-  },
-  watch: {
-    strokeColor(val) {
-      this.color = val;
-    },
-    fontSize(val) {
-      this.size = val;
     },
-    backgroundColor(val) {
-      this.backgroundcolor = val;
+    mounted() {
+        // console.log(Select)
     },
+    watch: {
+        color(val) {
+            this.textColor = val;
+        },
+        fontSize(val) {
+            this.size = val;
+        },
+        backgroundColor(val) {
+            console.log("watch backgroundColor :::::::::::::");
+            console.log(val);
+            this.bgColor = val;
+        },
 
-    textMsg(val) {
-      this.text = val;
+        textMsg(val) {
+            this.text = val;
+        },
     },
-  },
 };
 </script>
 <style lang="less" scoped>
 ul,
 li {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
 }
 .base-text {
-  .title {
-    height: 47px;
-    border-bottom: 1px solid #979797;
-    color: #646c73;
-    font-size: 16px;
-    padding-left: 12px;
-    box-sizing: border-box;
-  }
-  ul {
-    width: calc(~"100% - 24px");
-    margin: -1px 12px 0 12px;
-    li {
-      border-top: 1px solid #979797;
-      .small-title {
-        font-size: 12px;
-        color: #8d9399;
-        margin: 12px 0;
-      }
-      .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: -8px;
-              margin-left: -8px;
-              /deep/ .el-color-picker__trigger {
-                width: 200px;
-                height: 200px;
-              }
+    .title {
+        height: 47px;
+        border-bottom: 1px solid #979797;
+        color: #646c73;
+        font-size: 16px;
+        padding-left: 12px;
+        box-sizing: border-box;
+    }
+    ul {
+        width: calc(~"100% - 24px");
+        margin: -1px 12px 0 12px;
+        li {
+            border-top: 1px solid #979797;
+            .small-title {
+                font-size: 12px;
+                color: #8d9399;
+                margin: 12px 0;
+            }
+            .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: -8px;
+                            margin-left: -8px;
+                            /deep/ .el-color-picker__trigger {
+                                width: 200px;
+                                height: 200px;
+                            }
+                        }
+                    }
+                }
+                .line-width {
+                    display: flex;
+                    align-items: center;
+                    flex-direction: column;
+                    margin-left: 8px;
+                    position: relative;
+                }
+                span {
+                    font-size: 12px;
+                    color: #1f2429;
+                    margin-top: 4px;
+                }
             }
-          }
-        }
-        .line-width {
-          display: flex;
-          align-items: center;
-          flex-direction: column;
-          margin-left: 8px;
-          position: relative;
-        }
-        span {
-          font-size: 12px;
-          color: #1f2429;
-          margin-top: 4px;
         }
-      }
     }
-  }
 }
 </style>

+ 3 - 1
src/components/editview/rightPropertyBar/property.vue

@@ -3,7 +3,7 @@
     <div class="propertys" :class="{ width: itemType }">
         <baseTextPro
             :TextItem="itemObj"
-            :strokeColor="strokeColor"
+            :color="color"
             :fontSize="fontSize"
             :textMsg="textMsg"
             :backgroundColor="backgroundColor"
@@ -84,6 +84,7 @@ export default {
             strokeColor: "", //线条颜色
             lineStyle: "solid", //线条样式
             lineWidth: 1, //线宽
+            color: "", ///文本颜色
             fontSize: 0, //字体大小
             textMsg: "", // 文本
             backgroundColor: "", // 背景色
@@ -144,6 +145,7 @@ export default {
                 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;

+ 38 - 31
src/views/home.vue

@@ -380,12 +380,11 @@ export default {
          */
         toEdit(data, floorLocalName, infos) {
             const { name, id, graphId, buildingId, floorId, version, state } = data,
-                { floorMap } = infos,
+                { floorMap = "" } = infos,
                 { folderId, folderName } = this;
             // 已发布
             if (state === "Publish") {
-                // TODO: 1111
-                // return this.handlePubImgCard(data, floorLocalName, infos);
+                return this.handlePubImgCard(id, graphId, floorLocalName, floorMap);
             }
             // 未发布,直接跳转编辑器
             this.$router.push({
@@ -399,8 +398,7 @@ export default {
                     name,
                     id,
                     graphId,
-                    floorMap: floorMap || "",
-                    state: this.isPub === 1 ? "Publish" : "Draft", // Publish: 已发布 Draft: 未发布
+                    floorMap,
                     version,
                 },
             });
@@ -410,25 +408,34 @@ export default {
          * 如果在未发布中,有当前已发布的图的草稿,使用改未发布的草稿进行跳转
          * 没有的话,调用保存接口,生成一张未发布的草稿,使用该草稿进行跳转
          *
+         * @param {string} id 图id
+         * @param {string} graphId 图graphId
+         * @param {string} floorLocalName 楼层本地名称
+         * @param {string} floorMap floorMap
          */
-        async handlePubImgCard(data, floorLocalName, infos) {
-            const { name, id, graphId, buildingId, floorId, version, state } = data,
-                { floorMap } = infos,
-                { folderId, folderName } = this;
+        async handlePubImgCard(id, graphId, floorLocalName, floorMap) {
+            // 留 id,floorLocalName,floorMap
+            const { folderId, folderName } = this;
             const postParams = {
-                filters: `folderId='${folderId}'`,
+                filters: `folderId='${folderId}';state='Draft';id='${id}'`,
                 PageNumber: 1,
                 PageSize: 1000,
             };
-            if (this.queryText) {
-                postParams.filters += `;name contain '${this.queryText}'`;
-            }
             const res = await planerQuery(postParams);
             if (res.result !== "success") {
                 this.$message(res.result);
             }
+            // 判断 未发布中,是否有该张图的备份草稿,
+            let flag = false;
+            let DraftPlanarGraph = "";
+            if (res.content?.length) {
+                flag = true;
+                DraftPlanarGraph = res.content[0].floorList[0].planarGraphList[0];
+            } else {
+                flag = false;
+            }
             // 未发布中有该张图的备份草稿
-            if (res.content.filter((v) => v.id === id).length) {
+            if (flag) {
                 // 点击确认后,会继续后续流程
                 let confirmRes;
                 try {
@@ -442,7 +449,12 @@ export default {
                 }
                 // 点击确定,跳转编辑器
                 // 点击确定 confirmRes返回 confirm, 点击取消,confirmRes返回 undefined
-                confirmRes && this.finalToEdit();
+                if (confirmRes) {
+                    console.log(DraftPlanarGraph);
+                    const { folderId, buildingId, floorId, id, graphId, name, version } = DraftPlanarGraph;
+                    debugger
+                    this.finalToEdit({ folderId, folderName, buildingId, floorId, floorLocalName, name, id, graphId, floorMap, version });
+                }
             } else {
                 // 未发布中,没有该张图的备份草稿
                 // 读取该已发布的图信息
@@ -450,32 +462,27 @@ export default {
                 if (readRes.result !== "success") {
                     this.$message(readRes.result);
                 }
-                const { name, projectId, elements, label } = readRes.content;
-                const saveParams = {
-                    graphId,
-                    graphCoding: id,
-                    name,
-                    projectId,
-                    elements,
-                    label,
-                    ruleList: [],
-                    style: {},
-                    objExtInfo: {},
-                };
+                debugger;
                 // 保存该图,在未发布中,生成一张草稿
-                const resSave = await planerSave(saveParams);
+                const resSave = await planerSave(readRes.content);
+                // 取出新建图的版本号
                 if (resSave.result === "success") {
-                    this.finalToEdit();
+                    const resSaveData = resSave.entityList[0];
+                    const { folderId, buildingId, floorId, name, id, graphId, version } = resSaveData;
+                    debugger
+                    this.finalToEdit({ folderName, floorLocalName, folderId, buildingId, floorId, name, id, graphId, version, floorMap });
                 } else {
                     this.$message(resSave.result);
                 }
-                console.log("已发布, 保存生成一张未发布:", resSave);
             }
         },
         /**
          * 点击已发布,最终跳转编辑器
          */
-        finalToEdit() {},
+        finalToEdit(query) {
+            debugger;
+            this.$router.push({ name: "Editer", query });
+        },
         /**
          * 查询图形信息
          * @param { string } floderId 传入的文件ID,新建画布成功之后,会调用该接口