YaolongHan 4 years ago
parent
commit
6237b45e6d

+ 200 - 0
src/components/editview/rightPropertyBar/BasePipe.vue

@@ -0,0 +1,200 @@
+<!--基础管道属性-->
+<template>
+  <div class="base-pipe">
+    <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="linewidth" controls-position="right" @change="changeWidth" 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>
+      </li>
+      <li>
+        <div class="small-title">拐角</div>
+        <div>
+          <el-radio-group v-model="corner" @change="changeRadio">
+            <el-radio label="1">直角</el-radio>
+            <el-radio label="2">圆角</el-radio>
+          </el-radio-group>
+        </div>
+        <div style="margin-top: 10px;" v-if="corner=='2'">
+          <label for="radius">设置圆角半径: </label>
+          <el-input-number v-model="radius" controls-position="right" size="mini" @change="changeCornerRaduis" :min="0" :step-strictly="true"></el-input-number>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import bus from "@/bus/bus";
+export default {
+  props: ["strokeColor", "lineStyle", "lineWidth", "Radius"],
+  data() {
+    return {
+      color: "",
+      linewidth: "",
+      linestyle: "",
+      borderLineOption: [
+        {
+          id: "Solid",
+          src: require("@/assets/images/solidLine.png"),
+        },
+        {
+          id: "Dashed",
+          src: require("@/assets/images/dashedLine.png"),
+        },
+        {},
+      ],
+      corner: '1', // 默认直角
+      radius: 0, // 圆角半径
+    };
+  },
+  methods: {
+    // 改变线宽
+    changeWidth(val) {
+      bus.$emit("updateStyle", "lineWidth", val);
+    },
+    // 改变颜色
+    changeColor(val) {
+      bus.$emit("updateStyle", "strokeColor", val);
+    },
+    // 改变线样式
+    changeLineStyle(val) {
+      bus.$emit("updateStyle", "lineStyle", val);
+    },
+    // 改变箭头样式
+    changeArrowType(dir) {
+      bus.$emit("updateStyle", dir, this[dir]);
+    },
+    // 改变拐角半径
+    changeCornerRaduis(val) {
+      bus.$emit("updateStyle", 'radius', this.radius);
+    },
+    // 拐角类型变化 
+    changeRadio() {
+      if (this.corner == '1') {
+        this.radius = 0;
+      }
+      bus.$emit("updateStyle", 'radius', this.radius);
+    }
+  },
+  watch: {
+    strokeColor(val) {
+      this.color = val;
+    },
+    lineWidth(val) {
+      this.linewidth = val;
+    },
+    lineStyle(val) {
+      this.linestyle = val;
+    },
+    Radius(val) {
+      console.log(val);
+      this.corner = val > 0 ? "2" : "1"
+      this.radius = val;
+    }
+  },
+};
+</script>
+<style lang="less" scoped>
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+.base-pipe {
+  .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;
+        }
+        .line-style {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          position: relative;
+          margin-top: 4px;
+          .nametype {
+            position: absolute;
+            left: 50%;
+            bottom: -80%;
+            transform: translateX(-140%);
+          }
+        }
+        span {
+          font-size: 12px;
+          color: #1f2429;
+          margin-top: 4px;
+        }
+      }
+      /deep/.el-input-number--mini {
+        width: 100px;
+      }
+    }
+  }
+}
+</style>

+ 191 - 160
src/components/editview/rightPropertyBar/property.vue

@@ -1,19 +1,50 @@
 <!--属性栏-->
 <!--属性栏-->
 <template>
 <template>
-    <!-- <div class="propertys" :class="{ width: itemType }"> -->
-    <div class="propertys width">
-        <baseTextPro v-if="itemObj && ['BaseText', 'BaseExplain'].includes(itemType)" :TextItem="itemObj"></baseTextPro>
-        <baseLinePro v-if="itemObj && itemType == 'BaseArrow'" :LineItem="itemObj"></baseLinePro>
-        <BaseGraphy
-            :GraphyItem="itemObj"
-            v-if="itemObj && ['BaseRect', 'BaseTriangle', 'BaseCircle', 'BasePolygon', 'BaseArrowPolygon'].includes(itemType)"
-        ></BaseGraphy>
-        <BaseImagePro v-if="itemObj && itemType == 'BaseImage'" :ImageItem="itemObj"></BaseImagePro>
-        <BgImagePro v-if="itemObj && itemType == 'BgImage'" :ImageItem="itemObj"></BgImagePro>
-        <BaseEquipment :EquipItem="itemObj" v-if="itemObj && itemType == 'BaseEquipment'"></BaseEquipment>
-        <BaseZone :ZoneItem="itemObj" v-if="itemObj && itemType == 'BaseZone'"></BaseZone>
-        <BaseView v-if="!itemObj"></BaseView>
-    </div>
+  <!-- <div class="propertys" :class="{ width: itemType }"> -->
+  <div class="propertys width">
+    <baseTextPro
+      v-if="itemObj && ['BaseText', 'BaseExplain'].includes(itemType)"
+      :TextItem="itemObj"
+    ></baseTextPro>
+    <baseLinePro
+      v-if="itemObj && itemType == 'BaseArrow'"
+      :LineItem="itemObj"
+    ></baseLinePro>
+    <BaseGraphy
+      :GraphyItem="itemObj"
+      v-if="
+        itemObj &&
+        [
+          'BaseRect',
+          'BaseTriangle',
+          'BaseCircle',
+          'BasePolygon',
+          'BaseArrowPolygon',
+        ].includes(itemType)
+      "
+    ></BaseGraphy>
+    <BaseImagePro
+      v-if="itemObj && itemType == 'BaseImage'"
+      :ImageItem="itemObj"
+    ></BaseImagePro>
+    <BgImagePro
+      v-if="itemObj && itemType == 'BgImage'"
+      :ImageItem="itemObj"
+    ></BgImagePro>
+    <BaseEquipment
+      :EquipItem="itemObj"
+      v-if="itemObj && itemType == 'BaseEquipment'"
+    ></BaseEquipment>
+    <BaseZone
+      :ZoneItem="itemObj"
+      v-if="itemObj && itemType == 'BaseZone'"
+    ></BaseZone>
+    <BaseView v-if="!itemObj"></BaseView>
+    <BasePipe
+       :Pipe='itemObj'
+      v-show="itemObj && itemType == 'BasePipe'"
+    ></BasePipe>
+  </div>
 </template>
 </template>
 <script>
 <script>
 import baseTextPro from "./baseTextPro.vue";
 import baseTextPro from "./baseTextPro.vue";
@@ -26,163 +57,163 @@ import BaseZone from "./BaseZone";
 import BaseView from "./BaseView";
 import BaseView from "./BaseView";
 import bus from "@/bus/bus";
 import bus from "@/bus/bus";
 const lineStyle = {
 const lineStyle = {
-    0: "Solid",
-    1: "Dashed",
-    /** 点线    */
-    2: "Dotted",
-    /** 无    */
-    3: "None",
+  0: "Solid",
+  1: "Dashed",
+  /** 点线    */
+  2: "Dotted",
+  /** 无    */
+  3: "None",
 };
 };
 const arrowType = {
 const arrowType = {
-    0: "None",
-    1: "Basic",
-    /** 点线    */
-    2: "Triangle",
-    /** 无    */
-    3: "Diamond",
-    4: "Square",
-    5: "Circle",
+  0: "None",
+  1: "Basic",
+  /** 点线    */
+  2: "Triangle",
+  /** 无    */
+  3: "Diamond",
+  4: "Square",
+  5: "Circle",
 };
 };
 export default {
 export default {
-    components: {
-        baseTextPro,
-        baseLinePro,
-        BaseGraphy,
-        BaseImagePro,
-        BgImagePro,
-        BaseEquipment,
-        BaseZone,
-        BaseView,
+  components: {
+    baseTextPro,
+    baseLinePro,
+    BaseGraphy,
+    BaseImagePro,
+    BgImagePro,
+    BaseEquipment,
+    BaseZone,
+    BaseView,
+  },
+  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: "", // 附加信息 (只用与设备图例)
+      itemObj: null,
+    };
+  },
+  mounted() {
+    const box = document.getElementsByClassName("propertys")[0];
+    this.equipHeight = box.offsetHeight - 150 + "px";
+    bus.$on("emitChoice", this.emitChoice);
+  },
+  methods: {
+    emitChoice(itemList) {
+      if (itemList.length == 1) {
+        const data = itemList[0].data
+          ? itemList[0].data
+          : itemList[0].legendData
+          ? itemList[0].legendData
+          : itemList[0].relationData
+          ? itemList[0].relationData
+          : null;
+        this.itemType = data?.properties?.type ? data.properties.type : "";
+        this.itemObj = itemList[0];
+      } else {
+        this.itemType = "";
+        this.itemObj = null;
+      }
+      // 对设备做出判断 看是否点入的是设备相关信息点
+      // if (this.itemType == "BaseEquipment") {
+      //     this.EquipData = itemList[0].legendData;
+      //     this.EquipItem = itemList[0];
+      //     if (itemList[0].curTextItem) {
+      //         this.itemType = "BaseEquipmentMsg";
+      //     }
+      // }
+      // console.log(`this.itemType: ,${this.itemType}`, this.itemObj);
+      // 同步联动样式
+      // this.linkStyle(itemList);
     },
     },
-    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: "", // 附加信息 (只用与设备图例)
-            itemObj: null,
-        };
-    },
-    mounted() {
-        const box = document.getElementsByClassName("propertys")[0];
-        this.equipHeight = box.offsetHeight - 150 + "px";
-        bus.$on("emitChoice", this.emitChoice);
-    },
-    methods: {
-        emitChoice(itemList) {
-            if (itemList.length == 1) {
-                const data = itemList[0].data
-                    ? itemList[0].data
-                    : itemList[0].legendData
-                    ? itemList[0].legendData
-                    : itemList[0].relationData
-                    ? itemList[0].relationData
-                    : null;
-                this.itemType = data?.properties?.type ? data.properties.type : "";
-                this.itemObj = itemList[0];
-            } else {
-                this.itemType = "";
-                this.itemObj = null;
-            }
-            // 对设备做出判断 看是否点入的是设备相关信息点
-            // if (this.itemType == "BaseEquipment") {
-            //     this.EquipData = itemList[0].legendData;
-            //     this.EquipItem = itemList[0];
-            //     if (itemList[0].curTextItem) {
-            //         this.itemType = "BaseEquipmentMsg";
-            //     }
-            // }
-            // console.log(`this.itemType: ,${this.itemType}`, this.itemObj);
-            // 同步联动样式
-            // 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;
-        //     // }
-        // },
-        // 修改设备信息点数据
-        changeEquipMsg(val) {
-            const obj = this.EquipMsgItem.propertyData;
-            let obj2 = Object.assign(obj, val);
-            this.EquipMsgItem.propertyData = obj2;
-            this.EquipMsgItem.text = val.name;
-        },
+    // 同步样式
+    // 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;
+      let obj2 = Object.assign(obj, val);
+      this.EquipMsgItem.propertyData = obj2;
+      this.EquipMsgItem.text = val.name;
     },
     },
+  },
 };
 };
 </script>
 </script>
 <style lang="less" scoped>
 <style lang="less" scoped>
 .propertys {
 .propertys {
-    height: 100%;
+  height: 100%;
 }
 }
 .width {
 .width {
-    width: 240px;
-    position: absolute;
-    right: 0;
-    top: 0;
-    background: #ffffff;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-    box-sizing: border-box;
+  width: 240px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background: #ffffff;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
 }
 }
 </style>
 </style>

+ 2 - 1
src/views/editer.vue

@@ -34,10 +34,11 @@ export default {
         ...mapState(["name", "folderName", "floorLocalName", "version"]),
         ...mapState(["name", "folderName", "floorLocalName", "version"]),
     },
     },
     created() {
     created() {
+        this.$route.query.projectId ? this.SETPROJECTID(this.$route.query.projectId) :''
         this.init();
         this.init();
     },
     },
     methods: {
     methods: {
-        ...mapMutations(["SETPROJECT", "INITEQUIPMAP", "INITSTYLE", "INITRULELIST", "INITOBJEXTINFO", "INITZONEMAP"]),
+        ...mapMutations(["SETPROJECTID","SETPROJECT", "INITEQUIPMAP", "INITSTYLE", "INITRULELIST", "INITOBJEXTINFO", "INITZONEMAP"]),
         init() {
         init() {
             // 重新加载时初始化 vuex 数据
             // 重新加载时初始化 vuex 数据
             this.INITEQUIPMAP();
             this.INITEQUIPMAP();

+ 3 - 2
src/views/home.vue

@@ -242,7 +242,6 @@ export default {
         return this.$store.state.projectId;
         return this.$store.state.projectId;
       },
       },
       set(newV, oldV) {
       set(newV, oldV) {
-        console.log(newV);
         this.SETPROJECTID(newV);
         this.SETPROJECTID(newV);
         this.$refs.leftFolder.getFolderData();
         this.$refs.leftFolder.getFolderData();
       },
       },
@@ -447,6 +446,7 @@ export default {
           graphId,
           graphId,
           floorMap,
           floorMap,
           version,
           version,
+          projectId: this.projectId,
         },
         },
       });
       });
       window.open(routeUrl.href, "_blank");
       window.open(routeUrl.href, "_blank");
@@ -503,7 +503,6 @@ export default {
         // 点击确定,跳转编辑器
         // 点击确定,跳转编辑器
         // 点击确定 confirmRes返回 confirm, 点击取消,confirmRes返回 undefined
         // 点击确定 confirmRes返回 confirm, 点击取消,confirmRes返回 undefined
         if (confirmRes) {
         if (confirmRes) {
-          console.log(DraftPlanarGraph);
           const {
           const {
             folderId,
             folderId,
             buildingId,
             buildingId,
@@ -524,6 +523,7 @@ export default {
             graphId,
             graphId,
             floorMap,
             floorMap,
             version,
             version,
+            projectId:this.projectId
           });
           });
         }
         }
       } else {
       } else {
@@ -558,6 +558,7 @@ export default {
             graphId,
             graphId,
             version,
             version,
             floorMap,
             floorMap,
+            projectId:this.projectId
           });
           });
         } else {
         } else {
           this.$message(resSave.result);
           this.$message(resSave.result);