property.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <!--属性栏-->
  2. <template>
  3. <div class="propertys" :class="{ width: itemType }">
  4. <baseTextPro v-if="itemObj && ['BaseText', 'BaseExplain'].includes(itemType)" :TextItem="itemObj"></baseTextPro>
  5. <baseLinePro v-if="itemObj && itemType == 'BaseArrow'" :LineItem="itemObj"></baseLinePro>
  6. <BaseGraphy
  7. :GraphyItem="itemObj"
  8. v-if="itemObj && ['BaseRect', 'BaseTriangle', 'BaseCircle', 'BasePolygon', 'BaseArrowPolygon'].includes(itemType)"
  9. ></BaseGraphy>
  10. <BaseImagePro v-if="itemObj && itemType == 'BaseImage'" :ImageItem="itemObj"></BaseImagePro>
  11. <BaseImagePro v-if="itemObj && itemType == 'BgImage'" :ImageItem="itemObj"></BaseImagePro>
  12. <BaseEquipment :EquipItem="itemObj" v-if="itemObj && itemType == 'BaseEquipment'"></BaseEquipment>
  13. <BaseZone :ZoneItem="itemObj" v-if="itemObj && itemType == 'BaseZone'"></BaseZone>
  14. </div>
  15. </template>
  16. <script>
  17. import baseTextPro from "./baseTextPro.vue";
  18. import baseLinePro from "./baseLinePro.vue";
  19. import BaseGraphy from "./BaseGraphy";
  20. import BaseImagePro from "./BaseImagePro";
  21. import BgImagePro from "./BgImagePro";
  22. import BaseEquipment from "./BaseEquipment";
  23. import BaseZone from "./BaseZone";
  24. import bus from "@/bus/bus";
  25. const lineStyle = {
  26. 0: "Solid",
  27. 1: "Dashed",
  28. /** 点线 */
  29. 2: "Dotted",
  30. /** 无 */
  31. 3: "None",
  32. };
  33. const arrowType = {
  34. 0: "None",
  35. 1: "Basic",
  36. /** 点线 */
  37. 2: "Triangle",
  38. /** 无 */
  39. 3: "Diamond",
  40. 4: "Square",
  41. 5: "Circle",
  42. };
  43. export default {
  44. components: {
  45. baseTextPro,
  46. baseLinePro,
  47. BaseGraphy,
  48. BaseImagePro,
  49. BaseEquipment,
  50. BaseZone,
  51. },
  52. data() {
  53. return {
  54. itemType: "", // item 类型
  55. // strokeColor: "", //线条颜色
  56. // lineStyle: "solid", //线条样式
  57. // lineWidth: 1, //线宽
  58. // color: "", ///文本颜色
  59. // fontSize: 0, //字体大小
  60. // textMsg: "", // 文本
  61. // backgroundColor: "", // 背景色
  62. // Width: 0, //item 宽
  63. // Height: 0, //item 高
  64. // posX: 0, // item X坐标
  65. // posY: 0, // item Y坐标
  66. // Url: "", // 路径
  67. // fillColor: "", //填充色
  68. // begin: "", //开头样式
  69. // end: "", //结尾样式
  70. // AnotherMsg: "", // 附加信息 (只用与设备图例)
  71. itemObj: null,
  72. };
  73. },
  74. mounted() {
  75. const box = document.getElementsByClassName("propertys")[0];
  76. this.equipHeight = box.offsetHeight - 150 + "px";
  77. bus.$on("emitChoice", this.emitChoice);
  78. },
  79. methods: {
  80. emitChoice(itemList) {
  81. if (itemList.length == 1) {
  82. const data = itemList[0].data
  83. ? itemList[0].data
  84. : itemList[0].legendData
  85. ? itemList[0].legendData
  86. : itemList[0].relationData
  87. ? itemList[0].relationData
  88. : null;
  89. this.itemType = data?.properties?.type ? data.properties.type : "";
  90. this.itemObj = itemList[0];
  91. } else {
  92. this.itemType = "";
  93. this.itemObj = null;
  94. }
  95. // 对设备做出判断 看是否点入的是设备相关信息点
  96. // if (this.itemType == "BaseEquipment") {
  97. // this.EquipData = itemList[0].legendData;
  98. // this.EquipItem = itemList[0];
  99. // if (itemList[0].curTextItem) {
  100. // this.itemType = "BaseEquipmentMsg";
  101. // }
  102. // }
  103. // console.log(`this.itemType: ,${this.itemType}`, this.itemObj);
  104. // 同步联动样式
  105. // this.linkStyle(itemList);
  106. },
  107. // 同步样式
  108. // linkStyle(itemList) {
  109. // const item = itemList[0];
  110. // this.EquipMsgItem = null;
  111. // if (this.itemType == "BaseArrow") {
  112. // this.strokeColor = item.strokeColor.toRgba();
  113. // this.lineStyle = lineStyle[item.lineStyle];
  114. // this.lineWidth = item.lineWidth;
  115. // this.begin = arrowType[item.begin];
  116. // this.end = arrowType[item.end];
  117. // } else if (this.itemType == "BaseText" || this.itemType == "BaseExplain") {
  118. // this.strokeColor = item.strokeColor.toRgba();
  119. // this.color = item.color.toRgba();
  120. // this.backgroundColor = item.backgroundColor.toRgba();
  121. // this.textMsg = item.text;
  122. // this.fontSize = item.font.size;
  123. // } else if (this.itemType == "BaseImage" || this.itemType == "BasePipeUninTool") {
  124. // this.Width = item.width; //item 宽
  125. // this.Height = item.height; //item 高
  126. // this.Url = item.url; // 路径
  127. // this.lineStyle = lineStyle[item.lineStyle];
  128. // this.lineWidth = item.lineWidth;
  129. // this.strokeColor = item.strokeColor.toRgba();
  130. // } else if (
  131. // this.itemType == "BaseRect" ||
  132. // this.itemType == "BaseTriangle" ||
  133. // this.itemType == "BaseCircle" ||
  134. // this.itemType == "BasePolygon"
  135. // ) {
  136. // this.Width = item.width; //item 宽
  137. // this.Height = item.height; //item 高
  138. // this.lineStyle = lineStyle[item.lineStyle];
  139. // this.lineWidth = item.lineWidth;
  140. // this.strokeColor = item.strokeColor.toRgba();
  141. // this.fillColor = item.fillColor.toRgba();
  142. // // 填充色
  143. // }
  144. // // else if (this.itemType == "BaseEquipment") {
  145. // // this.posX = item.pos.x; //item 宽
  146. // // this.posY = item.pos.y; //item 高
  147. // // this.AnotherMsg = item.anotherMsg;
  148. // // if (item.infoPointList && item.infoPointList.length) {
  149. // // this.infoPointList = item.infoPointList;
  150. // // } else {
  151. // // this.infoPointList = [];
  152. // // }
  153. // // }
  154. // // else if (this.itemType == "BaseEquipmentMsg") {
  155. // // // 获取信息点详情信息
  156. // // this.EquipMsgData = item.curTextItem.propertyData;
  157. // // this.EquipMsgItem = item.curTextItem;
  158. // // }
  159. // },
  160. // 修改设备信息点数据
  161. changeEquipMsg(val) {
  162. const obj = this.EquipMsgItem.propertyData;
  163. let obj2 = Object.assign(obj, val);
  164. this.EquipMsgItem.propertyData = obj2;
  165. this.EquipMsgItem.text = val.name;
  166. },
  167. },
  168. };
  169. </script>
  170. <style lang="less" scoped>
  171. .propertys {
  172. height: 100%;
  173. }
  174. .width {
  175. width: 240px;
  176. position: absolute;
  177. right: 0;
  178. top: 0;
  179. background: #ffffff;
  180. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  181. box-sizing: border-box;
  182. }
  183. </style>