property.vue 6.7 KB

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