|
@@ -0,0 +1,218 @@
|
|
|
+<!-- 通用信息点 -->
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="InfoPoint">
|
|
|
+ <div class="title">通用信息点</div>
|
|
|
+ <el-form
|
|
|
+ label-position="top"
|
|
|
+ label-width="120px"
|
|
|
+ :model="formLabelAlign"
|
|
|
+ :rules="rules"
|
|
|
+ ref="infopointform"
|
|
|
+ >
|
|
|
+ <el-form-item label="全局编码" prop="EqId">
|
|
|
+ <el-input
|
|
|
+ @keyup.enter.native="submitForm"
|
|
|
+ @blur="submitForm"
|
|
|
+ v-model="formLabelAlign.EqId"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="设备类型(classCode)" prop="classCode">
|
|
|
+ <el-input
|
|
|
+ @keyup.enter.native="submitForm"
|
|
|
+ @blur="submitForm"
|
|
|
+ v-model="formLabelAlign.classCode"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="信息点编码(code)" prop="code">
|
|
|
+ <el-input
|
|
|
+ @keyup.enter.native="submitForm"
|
|
|
+ @blur="submitForm"
|
|
|
+ v-model="formLabelAlign.code"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="信息点名称" @blur="changeText" v-show="InfoItem &&InfoItem.data.properties.infoData">
|
|
|
+ <el-input v-model="formLabelAlign.subName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import bus from "@/bus/bus";
|
|
|
+import { queryDict } from "@/api/editer";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ text: "", //文本
|
|
|
+ formLabelAlign: {
|
|
|
+ EqId: "", //全局code(设备id)
|
|
|
+ classCode: "", //设备类型
|
|
|
+ code: "", //信息点编码
|
|
|
+ subName: "",
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ // 校验规则
|
|
|
+ EqId: [{ required: true, message: "请输入全局编码", trigger: "blur" }],
|
|
|
+ classCode: [
|
|
|
+ { required: true, message: "请输入设备类型", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ code: [
|
|
|
+ { required: true, message: "请输入信息点编码", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ InfoItem: null, //信息点实例
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 改变文字
|
|
|
+ changeText(val) {
|
|
|
+ bus.$emit("updateStyle", "text", val);
|
|
|
+ },
|
|
|
+ // 提交表单
|
|
|
+ submitForm() {
|
|
|
+ this.$refs["infopointform"].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ // 请求信息
|
|
|
+ this.queryMsg();
|
|
|
+ } else {
|
|
|
+ this.$message.error("信息点参数请求失败!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 请求公共信息点
|
|
|
+ queryMsg() {
|
|
|
+ const data = {
|
|
|
+ filters: `classCode = '${this.formLabelAlign.classCode}';code = '${this.formLabelAlign.code}'`,
|
|
|
+ };
|
|
|
+ queryDict(data).then((res) => {
|
|
|
+ if (res && res.content && res.content.length) {
|
|
|
+ this.formLabelAlign.subName = res.content[0].aliasName;
|
|
|
+ this.changeText(this.formLabelAlign.subName);
|
|
|
+ // 获取到信息点信息存入实例中的infoData字段
|
|
|
+ if (this.InfoItem) {
|
|
|
+ this.InfoItem.data.properties.infoData = Object.assign(
|
|
|
+ res.content[0],
|
|
|
+ {
|
|
|
+ equipId: this.formLabelAlign.EqId,
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.changeText("信息点");
|
|
|
+ if (this.InfoItem) {
|
|
|
+ if (this.InfoItem.data.properties.infoData) {
|
|
|
+ this.$delete(this.InfoItem.data.properties, "infoData");
|
|
|
+ console.log("this.InfoItem.data.properties",this.InfoItem.data.properties);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取到信息点
|
|
|
+ emitChoice(itemList) {
|
|
|
+ let itemType = null;
|
|
|
+ this.formLabelAlign.EqId = "";
|
|
|
+ this.formLabelAlign.classCode = "";
|
|
|
+ this.formLabelAlign.code = "";
|
|
|
+
|
|
|
+ this.InfoItem = null;
|
|
|
+ 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;
|
|
|
+ itemType = data.properties.type ? data.properties.type : "";
|
|
|
+ } else {
|
|
|
+ itemType = "";
|
|
|
+ }
|
|
|
+ if (itemType == "InfoPoint") {
|
|
|
+ this.InfoItem = itemList[0];
|
|
|
+ //赋值名称
|
|
|
+ this.formLabelAlign.subName = itemList[0].text;
|
|
|
+ if (itemList[0].data.properties.infoData) {
|
|
|
+ const data = itemList[0].data.properties.infoData;
|
|
|
+ this.formLabelAlign.EqId = data.equipId;
|
|
|
+ this.formLabelAlign.classCode = data.classCode;
|
|
|
+ this.formLabelAlign.code = data.code;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ bus.$on("emitChoice", this.emitChoice);
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+ul,
|
|
|
+li {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ list-style-type: none;
|
|
|
+}
|
|
|
+.InfoPoint {
|
|
|
+ padding: 0 12px 0 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .title {
|
|
|
+ height: 47px;
|
|
|
+ border-bottom: 1px solid #979797;
|
|
|
+ color: #646c73;
|
|
|
+ font-size: 16px;
|
|
|
+ padding-left: 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ width: calc(~"100% - 24px");
|
|
|
+ margin: -1px 12px 0 12px;
|
|
|
+ li {
|
|
|
+ border-top: 1px solid #979797;
|
|
|
+ .small-title {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #8d9399;
|
|
|
+ margin: 12px 0;
|
|
|
+ }
|
|
|
+ .property {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ .color-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ .cololorSelect {
|
|
|
+ width: 32px;
|
|
|
+ height: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ margin: 4px 0;
|
|
|
+ .fix-box-1 {
|
|
|
+ margin-top: -8px;
|
|
|
+ margin-left: -8px;
|
|
|
+ /deep/ .el-color-picker__trigger {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .line-width {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-left: 8px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #1f2429;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|