InfoPoint.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <!-- 通用信息点 -->
  2. <template>
  3. <div class="InfoPoint">
  4. <div class="title">通用信息点</div>
  5. <el-form
  6. label-position="top"
  7. label-width="120px"
  8. :model="formLabelAlign"
  9. :rules="rules"
  10. ref="infopointform"
  11. >
  12. <el-form-item label="全局编码" prop="EqId">
  13. <el-input
  14. @keyup.enter.native="submitForm"
  15. @blur="submitForm"
  16. v-model="formLabelAlign.EqId"
  17. ></el-input>
  18. </el-form-item>
  19. <el-form-item label="设备类型(classCode)" prop="classCode">
  20. <el-input
  21. @keyup.enter.native="submitForm"
  22. @blur="submitForm"
  23. v-model="formLabelAlign.classCode"
  24. ></el-input>
  25. </el-form-item>
  26. <el-form-item label="信息点编码(code)" prop="code">
  27. <el-input
  28. @keyup.enter.native="submitForm"
  29. @blur="submitForm"
  30. v-model="formLabelAlign.code"
  31. ></el-input>
  32. </el-form-item>
  33. <el-form-item label="信息点名称" v-show="InfoItem &&InfoItem.data.properties.infoData">
  34. <el-input @change="changeText" v-model="formLabelAlign.subName"></el-input>
  35. </el-form-item>
  36. </el-form>
  37. </div>
  38. </template>
  39. <script>
  40. import bus from "@/bus/bus";
  41. import { queryDict } from "@/api/editer";
  42. export default {
  43. data() {
  44. return {
  45. text: "", //文本
  46. formLabelAlign: {
  47. EqId: "", //全局code(设备id)
  48. classCode: "", //设备类型
  49. code: "", //信息点编码
  50. subName: "",
  51. },
  52. rules: {
  53. // 校验规则
  54. EqId: [{ required: true, message: "请输入全局编码", trigger: "blur" }],
  55. classCode: [
  56. { required: true, message: "请输入设备类型", trigger: "blur" },
  57. ],
  58. code: [
  59. { required: true, message: "请输入信息点编码", trigger: "blur" },
  60. ],
  61. },
  62. InfoItem: null, //信息点实例
  63. };
  64. },
  65. methods: {
  66. // 改变文字
  67. changeText(val) {
  68. bus.$emit("updateStyle", "text", val);
  69. },
  70. // 提交表单
  71. submitForm() {
  72. this.$refs["infopointform"].validate((valid) => {
  73. if (valid) {
  74. // 请求信息
  75. this.queryMsg();
  76. } else {
  77. this.$message.error("信息点参数请求失败!");
  78. return false;
  79. }
  80. });
  81. },
  82. // 请求公共信息点
  83. queryMsg() {
  84. const data = {
  85. filters: `classCode = '${this.formLabelAlign.classCode}';code = '${this.formLabelAlign.code}'`,
  86. };
  87. queryDict(data).then((res) => {
  88. if (res && res.content && res.content.length) {
  89. this.formLabelAlign.subName = res.content[0].aliasName;
  90. this.changeText(this.formLabelAlign.subName);
  91. // 获取到信息点信息存入实例中的infoData字段
  92. if (this.InfoItem) {
  93. this.InfoItem.data.properties.infoData = Object.assign(
  94. res.content[0],
  95. {
  96. equipId: this.formLabelAlign.EqId,
  97. }
  98. );
  99. }
  100. } else {
  101. this.changeText("信息点");
  102. if (this.InfoItem) {
  103. if (this.InfoItem.data.properties.infoData) {
  104. this.$delete(this.InfoItem.data.properties, "infoData");
  105. console.log("this.InfoItem.data.properties",this.InfoItem.data.properties);
  106. }
  107. }
  108. }
  109. });
  110. },
  111. // 获取到信息点
  112. emitChoice(itemList) {
  113. let itemType = null;
  114. this.formLabelAlign.EqId = "";
  115. this.formLabelAlign.classCode = "";
  116. this.formLabelAlign.code = "";
  117. this.InfoItem = null;
  118. if (itemList.length == 1) {
  119. const data = itemList[0].data
  120. ? itemList[0].data
  121. : itemList[0].legendData
  122. ? itemList[0].legendData
  123. : itemList[0].relationData
  124. ? itemList[0].relationData
  125. : null;
  126. itemType = data.properties.type ? data.properties.type : "";
  127. } else {
  128. itemType = "";
  129. }
  130. if (itemType == "InfoPoint") {
  131. this.InfoItem = itemList[0];
  132. //赋值名称
  133. this.formLabelAlign.subName = itemList[0].text;
  134. if (itemList[0].data.properties.infoData) {
  135. const data = itemList[0].data.properties.infoData;
  136. this.formLabelAlign.EqId = data.equipId;
  137. this.formLabelAlign.classCode = data.classCode;
  138. this.formLabelAlign.code = data.code;
  139. }
  140. }
  141. },
  142. },
  143. mounted() {
  144. bus.$on("emitChoice", this.emitChoice);
  145. },
  146. };
  147. </script>
  148. <style lang="less" scoped>
  149. ul,
  150. li {
  151. margin: 0;
  152. padding: 0;
  153. list-style-type: none;
  154. }
  155. .InfoPoint {
  156. padding: 0 12px 0 12px;
  157. box-sizing: border-box;
  158. .title {
  159. height: 47px;
  160. border-bottom: 1px solid #979797;
  161. color: #646c73;
  162. font-size: 16px;
  163. padding-left: 12px;
  164. box-sizing: border-box;
  165. }
  166. ul {
  167. width: calc(~"100% - 24px");
  168. margin: -1px 12px 0 12px;
  169. li {
  170. border-top: 1px solid #979797;
  171. .small-title {
  172. font-size: 12px;
  173. color: #8d9399;
  174. margin: 12px 0;
  175. }
  176. .property {
  177. display: flex;
  178. align-items: center;
  179. justify-content: space-around;
  180. .color-box {
  181. display: flex;
  182. align-items: center;
  183. flex-direction: column;
  184. .cololorSelect {
  185. width: 32px;
  186. height: 20px;
  187. overflow: hidden;
  188. position: relative;
  189. margin: 4px 0;
  190. .fix-box-1 {
  191. margin-top: -8px;
  192. margin-left: -8px;
  193. /deep/ .el-color-picker__trigger {
  194. width: 200px;
  195. height: 200px;
  196. }
  197. }
  198. }
  199. }
  200. .line-width {
  201. display: flex;
  202. align-items: center;
  203. flex-direction: column;
  204. margin-left: 8px;
  205. position: relative;
  206. }
  207. span {
  208. font-size: 12px;
  209. color: #1f2429;
  210. margin-top: 4px;
  211. }
  212. }
  213. }
  214. }
  215. }
  216. </style>