|
@@ -1,84 +1,148 @@
|
|
|
<!-- 设备信息点详情 -->
|
|
|
<template>
|
|
|
<div id="equip-msg">
|
|
|
- <div class="title">设备实例本地名称</div>
|
|
|
- <ul class="msg">
|
|
|
- <li>
|
|
|
- <div class="msg-name">全局编码</div>
|
|
|
- <Input
|
|
|
- :width="220"
|
|
|
- v-model="equipId"
|
|
|
- placeholder="请输入全局编码"
|
|
|
- @input="boxInput('equipId')"
|
|
|
- name="persager"
|
|
|
- disabled
|
|
|
- class="msg-input"
|
|
|
- :title="equipId"
|
|
|
- />
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="msg-name">信息点编码</div>
|
|
|
- <Input
|
|
|
- :width="220"
|
|
|
- v-model="id"
|
|
|
- disabled
|
|
|
- placeholder="请输入信息点编码"
|
|
|
- @input="boxInput('id')"
|
|
|
- name="persager"
|
|
|
- :title="id"
|
|
|
- class="msg-input"
|
|
|
- />
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="msg-name">信息点名称</div>
|
|
|
- <Input
|
|
|
- :width="220"
|
|
|
- v-model="name"
|
|
|
- placeholder="请输入信息点名称"
|
|
|
- @input="boxInput('name')"
|
|
|
- name="persager"
|
|
|
- class="msg-input"
|
|
|
- />
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="msg-name">数据格式</div>
|
|
|
- <Input
|
|
|
- :width="220"
|
|
|
- v-model="dataFormat"
|
|
|
- placeholder="请输入数据格式"
|
|
|
- @input="boxInput('dataFormat')"
|
|
|
- name="persager"
|
|
|
- class="msg-input"
|
|
|
- />
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="msg-name">实时值</div>
|
|
|
- <Input
|
|
|
- :width="220"
|
|
|
- v-model="currentData"
|
|
|
- placeholder="请输入实时值"
|
|
|
- @input="boxInput('currentData')"
|
|
|
- name="persager"
|
|
|
- class="msg-input"
|
|
|
- />
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="msg-name">单位</div>
|
|
|
- <Input
|
|
|
- :width="220"
|
|
|
- v-model="unit"
|
|
|
- placeholder="请输入单位"
|
|
|
- @input="boxInput('unit')"
|
|
|
- name="persager"
|
|
|
- class="msg-input"
|
|
|
- />
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <div class="title">{{ name ? name : "--" }}</div>
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="属性" name="first">
|
|
|
+ <div class="property">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <div class="small-title">文本</div>
|
|
|
+ <div class="property">
|
|
|
+ <div class="color-box">
|
|
|
+ <div class="cololorSelect">
|
|
|
+ <el-color-picker
|
|
|
+ show-alpha
|
|
|
+ @change="changeColor"
|
|
|
+ class="fix-box-1"
|
|
|
+ v-model="color"
|
|
|
+ ></el-color-picker>
|
|
|
+ </div>
|
|
|
+ <span>颜色</span>
|
|
|
+ </div>
|
|
|
+ <div class="line-width">
|
|
|
+ <el-input-number
|
|
|
+ style="width: 80px"
|
|
|
+ v-model="size"
|
|
|
+ controls-position="right"
|
|
|
+ @change="changeFontSize"
|
|
|
+ size="mini"
|
|
|
+ :min="1"
|
|
|
+ :max="20"
|
|
|
+ :maxlength="100"
|
|
|
+ ></el-input-number>
|
|
|
+ <span>字号</span>
|
|
|
+ </div>
|
|
|
+ <div class="color-box">
|
|
|
+ <div class="cololorSelect">
|
|
|
+ <el-color-picker
|
|
|
+ @change="changeBackground"
|
|
|
+ show-alpha
|
|
|
+ class="fix-box-1"
|
|
|
+ v-model="backgroundcolor"
|
|
|
+ ></el-color-picker>
|
|
|
+ </div>
|
|
|
+ <span>背景颜色</span>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="color-box">
|
|
|
+ <div class="cololorSelect">
|
|
|
+ <el-color-picker
|
|
|
+ @change="changeBackground"
|
|
|
+ show-alpha
|
|
|
+ class="fix-box-1"
|
|
|
+ v-model="backgroundcolor"
|
|
|
+ ></el-color-picker>
|
|
|
+ </div>
|
|
|
+ <span>背景颜色</span>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="信息点" name="second">
|
|
|
+ <ul class="msg">
|
|
|
+ <li>
|
|
|
+ <div class="msg-name">全局编码</div>
|
|
|
+ <Input
|
|
|
+ :width="220"
|
|
|
+ v-model="equipId"
|
|
|
+ placeholder="请输入全局编码"
|
|
|
+ @input="boxInput('equipId')"
|
|
|
+ name="persager"
|
|
|
+ disabled
|
|
|
+ class="msg-input"
|
|
|
+ :title="equipId"
|
|
|
+ />
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="msg-name">信息点编码</div>
|
|
|
+ <Input
|
|
|
+ :width="220"
|
|
|
+ v-model="id"
|
|
|
+ disabled
|
|
|
+ placeholder="请输入信息点编码"
|
|
|
+ @input="boxInput('id')"
|
|
|
+ name="persager"
|
|
|
+ :title="id"
|
|
|
+ class="msg-input"
|
|
|
+ />
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="msg-name">信息点名称</div>
|
|
|
+ <Input
|
|
|
+ :width="220"
|
|
|
+ v-model="name"
|
|
|
+ placeholder="请输入信息点名称"
|
|
|
+ @input="boxInput('name')"
|
|
|
+ name="persager"
|
|
|
+ class="msg-input"
|
|
|
+ />
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="msg-name">数据格式</div>
|
|
|
+ <Input
|
|
|
+ :width="220"
|
|
|
+ v-model="dataFormat"
|
|
|
+ placeholder="请输入数据格式"
|
|
|
+ @input="boxInput('dataFormat')"
|
|
|
+ name="persager"
|
|
|
+ class="msg-input"
|
|
|
+ />
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="msg-name">实时值</div>
|
|
|
+ <Input
|
|
|
+ :width="220"
|
|
|
+ v-model="currentData"
|
|
|
+ placeholder="请输入实时值"
|
|
|
+ @input="boxInput('currentData')"
|
|
|
+ name="persager"
|
|
|
+ class="msg-input"
|
|
|
+ />
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="msg-name">单位</div>
|
|
|
+ <Input
|
|
|
+ :width="220"
|
|
|
+ v-model="unit"
|
|
|
+ placeholder="请输入单位"
|
|
|
+ @input="boxInput('unit')"
|
|
|
+ name="persager"
|
|
|
+ class="msg-input"
|
|
|
+ />
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import bus from "@/bus/bus";
|
|
|
+import { rgbaNum } from "@persagy-web/big-edit/lib/until";
|
|
|
+import { SFont,SColor } from '@persagy-web/draw/lib';
|
|
|
export default {
|
|
|
- props: ["EquipMsgData"],
|
|
|
+ props: ["EquipMsgData","strokeColor", "fontSize", "backgroundColor","curTextItem"],
|
|
|
data() {
|
|
|
return {
|
|
|
equipId: "", //全局id
|
|
@@ -87,10 +151,31 @@ export default {
|
|
|
unit: "", // 信息点的单位
|
|
|
dataFormat: "", //数据格式
|
|
|
currentData: "", //实时值
|
|
|
+ activeName: "first",
|
|
|
+ color :'',
|
|
|
+ size :'',
|
|
|
+ backgroundcolor:''
|
|
|
};
|
|
|
},
|
|
|
mounted() {},
|
|
|
methods: {
|
|
|
+ // 改变颜色
|
|
|
+ changeColor(val) {
|
|
|
+ const colorlist = rgbaNum(val);
|
|
|
+ const styleValue = new SColor(Number(colorlist[0]), Number(colorlist[1]), Number(colorlist[2]), colorlist[3] * 255);
|
|
|
+ this.curTextItem.color = styleValue;
|
|
|
+ },
|
|
|
+ // 改变背景颜色
|
|
|
+ changeBackground(val) {
|
|
|
+ const colorlist = rgbaNum(val);
|
|
|
+ const styleValue = new SColor(Number(colorlist[0]), Number(colorlist[1]), Number(colorlist[2]), colorlist[3] * 255);
|
|
|
+ this.curTextItem.backgroundColor = styleValue
|
|
|
+ },
|
|
|
+ // 改变字体大小
|
|
|
+ changeFontSize(val) {
|
|
|
+ const styleValue = new SFont("sans-serif", val)
|
|
|
+ this.curTextItem.font = styleValue
|
|
|
+ },
|
|
|
boxInput() {
|
|
|
const EquipMsgData = {
|
|
|
equipId: this.equipId,
|
|
@@ -102,6 +187,16 @@ export default {
|
|
|
};
|
|
|
this.$emit("changeEquipMsgData", EquipMsgData);
|
|
|
},
|
|
|
+ // 点击切换
|
|
|
+ handleClick(tab, event) {
|
|
|
+ // 设置高度
|
|
|
+ if (tab.paneName == "second") {
|
|
|
+ const box = document.getElementsByClassName("msgPoint-list")[0];
|
|
|
+ const box2 = document.getElementsByClassName("msgPoint-list-press")[0];
|
|
|
+ box.style.height = this.equipHeight;
|
|
|
+ box2.style.height = this.equipHeight;
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
watch: {
|
|
|
EquipMsgData(val) {
|
|
@@ -111,6 +206,16 @@ export default {
|
|
|
this.unit = val.unit ? val.unit : "";
|
|
|
this.currentData = val.currentData ? val.currentData : "";
|
|
|
this.dataFormat = val.dataFormat ? val.dataFormat : "";
|
|
|
+ // 文本属性
|
|
|
+ },
|
|
|
+ strokeColor(val) {
|
|
|
+ this.color = val;
|
|
|
+ },
|
|
|
+ fontSize(val) {
|
|
|
+ this.size = val;
|
|
|
+ },
|
|
|
+ backgroundColor(val) {
|
|
|
+ this.backgroundcolor = val;
|
|
|
},
|
|
|
},
|
|
|
};
|
|
@@ -147,5 +252,54 @@ p {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ 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>
|