123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129 |
- <!--属性栏-->
- <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>
|