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

<!--属性栏-->
<template>
  <div class="propertys">
    <baseTextPro
      :strokeColor="strokeColor"
      :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>
    <BaseGraphy
      :lineStyle="lineStyle"
      :lineWidth="lineWidth"
      :strokeColor="strokeColor"
      :fillColor="fillColor"
      :Url="Url"
      :Width="Width"
      :Height="Height"
      v-show="
        itemType == 'BaseRect' ||
        itemType == 'BaseTriangle' ||
        itemType == 'BaseCircle' ||
        itemType == 'BasePolygon' ||
        itemType == 'BaseArrowPolygon'
      "
    ></BaseGraphy>
    <BaseImagePro
      :lineStyle="lineStyle"
      :lineWidth="lineWidth"
      :strokeColor="strokeColor"
      :Url="Url"
      :Width="Width"
      :Height="Height"
      v-show="itemType == 'BaseImage'"
    ></BaseImagePro>
    <BaseEquipment
      :InfoPointList="infoPointList"
      :EquipData="EquipData"
      v-show="itemType == 'BaseEquipment'"
    ></BaseEquipment>
  </div>
</template>
<script>
import baseTextPro from "./baseTextPro.vue";
import baseLinePro from "./baseLinePro.vue";
import BaseGraphy from "./BaseGraphy";
import BaseImagePro from "./BaseImagePro";
import BaseEquipment from "./BaseEquipment";
import bus from "@/bus/bus";
const lineStyle = {
  0: "Solid",
  1: "Dashed",
  /** 点线    */
  2: "Dotted",
  /** 无    */
  3: "None",
};
const arrowType = {
  0: "None",
  1: "Basic",
  /** 点线    */
  2: "Triangle",
  /** 无    */
  3: "Diamond",
  4: "Square",
  5: "Circle",
};
export default {
  components: {
    baseTextPro,
    baseLinePro,
    BaseGraphy,
    BaseImagePro,
    BaseEquipment,
  },
  data() {
    return {
      itemType: "", // item 类型
      strokeColor: "", //线条颜色
      lineStyle: "solid", //线条样式
      lineWidth: 1, //线宽
      fontSize: 0, //字体大小
      textMsg: "", // 文本
      backgroundColor: "", // 背景色
      Width: 0, //item 宽
      Height: 0, //item 高
      Url: "", // 路径
      fillColor: "", //填充色
      begin: "", //开头样式
      end: "", //结尾样式
      infoPointList: [], //设备--信息点数组
      EquipData: {}, //设备 id
    };
  },
  mounted() {
    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 : "";
      } else {
        this.itemType = "";
      }
      // 同步联动样式
      this.linkStyle(itemList);
      console.log("itemList", itemList);
    },
    // 同步样式
    linkStyle(itemList) {
      const item = itemList[0];
      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];
        console.log(this.begin, this.end);
      } 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.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") {
        if (
          item.legendData.properties &&
          item.legendData.properties.infoPointList
        ) {
          this.infoPointList = item.legendData.properties.infoPointList;
        } else {
          this.infoPointList = [];
        }
        this.EquipData = item.legendData;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.propertys {
}
</style>