|
@@ -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>
|