persagy_topo_editer/src/components/editview/rightPropertyBar/property.vue

<!--属性栏-->
<template>
  <div class="propertys">
    <baseTextProVue
      :strokeColor="strokeColor"
      :fontSize="fontSize"
      :textMsg="textMsg"
      :backgroundColor="backgroundColor"
      v-show="itemType == 'BaseText' || itemType == 'BaseExplain' "
    ></baseTextProVue>
    <baseLinePro
      v-show="itemType == 'BaseLine'"
      :strokeColor="strokeColor"
      :lineStyle="lineStyle"
      :lineWidth="lineWidth"
    ></baseLinePro>
    <BaseGraphy
      :lineStyle="lineStyle"
      :lineWidth="lineWidth"
      :strokeColor="strokeColor"
      :fillColor="fillColor"
      :Url="Url"
      :Width="Width"
      :Height="Height"
      v-show="itemType == 'BaseRect' || itemType == 'BaseTriangle' || itemType == 'BaseArrow'|| itemType == 'BaseCircle'"
    ></BaseGraphy>
    <BaseImagePro
      :lineStyle="lineStyle"
      :lineWidth="lineWidth"
      :strokeColor="strokeColor"
      :Url="Url"
      :Width="Width"
      :Height="Height"
      v-show="itemType == 'BaseImage'"
    ></BaseImagePro>
  </div>
</template>
<script>
import baseTextProVue from "./baseTextPro.vue";
import baseLinePro from "./baseLinePro.vue";
import BaseGraphy from "./BaseGraphy";
import BaseImagePro from "./BaseImagePro";
import bus from "@/bus/bus";
const lineStyle = {
  0: "Solid",
  1: "Dashed",
  /** 点线    */
  2: "Dotted",
  /** 无    */
  3: "None",
};
export default {
  components: { baseTextProVue, baseLinePro, BaseGraphy, BaseImagePro },
  data() {
    return {
      itemType: "", // item 类型
      strokeColor: "", //线条颜色
      lineStyle: "solid", //线条样式
      lineWidth: 1, //线宽
      fontSize: 12, //字体大小
      textMsg: "", // 文本
      backgroundColor: "", // 背景色
      Width: 0, //item 宽
      Height: 0, //item 高
      Url: "", // 路径
      fillColor: "", //填充色
    };
  },
  mounted() {
    bus.$on("emitChoice", this.emitChoice);
  },
  methods: {
    emitChoice(itemList) {
      console.log('itemList',itemList)
      if (itemList.length == 1) {
        this.itemType = itemList[0].data.Properties.Type
          ? itemList[0].data.Properties.Type
          : "";
      } else {
        this.itemType = "";
      }
      console.log(this.itemType);
      // 同步联动样式
      this.linkStyle(itemList);
    },
    // 同步样式
    linkStyle(itemList) {
      const item = itemList[0];
      if (this.itemType == "BaseLine") {
        this.strokeColor = item.strokeColor.toRgba();
        this.lineStyle = lineStyle[item.lineStyle];
        this.lineWidth = item.lineWidth;
      } else if (
        this.itemType == "BaseText" ||
        this.itemType == "BaseExplain"
      ) {
        this.strokeColor = item.strokeColor.toRgba();
        this.backgroundColor = item.backgroundColor.toRgba();
        this.textMsg = item.text;
        this.fontSize = item.font.size;
      } else if (this.itemType == "BaseImage") {
        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 == "BaseArrow" ||
        this.itemType == "BaseCircle"
      ) {
        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()
        // 填充色
      }
    },
  },
};
</script>
<style lang="less" scoped>
.propertys {
}
</style>