123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218 |
- <!-- 通用信息点 -->
- <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="信息点名称" v-show="InfoItem &&InfoItem.data.properties.infoData">
- <el-input @change="changeText" 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>
|