123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184 |
- <!--属性栏-->
- <template>
- <div class="propertys" :class="{ width: itemType }">
- <baseTextPro v-if="itemObj && ['BaseText', 'BaseExplain'].includes(itemType)" :TextItem="itemObj"></baseTextPro>
- <baseLinePro v-if="itemObj && itemType == 'BaseArrow'" :LineItem="itemObj"></baseLinePro>
- <BaseGraphy
- :lineStyle="lineStyle"
- :lineWidth="lineWidth"
- :strokeColor="strokeColor"
- :fillColor="fillColor"
- :Url="Url"
- :Width="Width"
- :Height="Height"
- v-if="itemObj && ['BaseRect', 'BaseTriangle', 'BaseCircle', 'BasePolygon', 'BaseArrowPolygon'].includes(itemType)"
- :GraphyItem="itemObj"
- ></BaseGraphy>
- <BaseImagePro v-if="itemObj && itemType == 'BaseImage'" :ImageItem="itemObj"></BaseImagePro>
- <BaseEquipment :EquipItem="itemObj" v-if="itemObj && 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, //线宽
- 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.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;
- },
- },
- };
- </script>
- <style lang="less" scoped>
- .propertys {
- height: 100%;
- }
- .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;
- }
- </style>
|