|
@@ -75,7 +75,13 @@
|
|
|
<div class="color">
|
|
|
<p>字符颜色</p>
|
|
|
<div class="color-select">
|
|
|
- <el-color-picker show-alpha @change="changeColor" class="fix-box-1" v-model="equipmentData.color"></el-color-picker>
|
|
|
+ <el-color-picker
|
|
|
+ @change="changeColor"
|
|
|
+ popper-class="m-color-picker"
|
|
|
+ show-alpha
|
|
|
+ class="fix-box-1"
|
|
|
+ v-model="equipmentData.color"
|
|
|
+ ></el-color-picker>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="size">
|
|
@@ -98,6 +104,7 @@
|
|
|
:show-file-list="false"
|
|
|
:before-upload="beforeAvatarUpload"
|
|
|
>
|
|
|
+ <img v-if="equipmentData.url" :src="mgBaseUrl + equipmentData.url" class="avatar" />
|
|
|
<el-button type="small">替换图标</el-button>
|
|
|
</el-upload>
|
|
|
</div>
|
|
@@ -111,7 +118,13 @@
|
|
|
<div class="color">
|
|
|
<p>字符色</p>
|
|
|
<div class="color-select">
|
|
|
- <el-color-picker show-alpha @change="changeColor" class="fix-box-1" v-model="spaceData.color"></el-color-picker>
|
|
|
+ <el-color-picker
|
|
|
+ show-alpha
|
|
|
+ popper-class="m-color-picker"
|
|
|
+ @change="changeColor"
|
|
|
+ class="fix-box-1"
|
|
|
+ v-model="spaceData.color"
|
|
|
+ ></el-color-picker>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="size">
|
|
@@ -131,7 +144,13 @@
|
|
|
<div class="fill-color">
|
|
|
<p>填充色</p>
|
|
|
<div class="color-select">
|
|
|
- <el-color-picker show-alpha @change="changeColor" class="fix-box-1" v-model="spaceData.fillColor"></el-color-picker>
|
|
|
+ <el-color-picker
|
|
|
+ show-alpha
|
|
|
+ popper-class="m-color-picker"
|
|
|
+ @change="changeColor"
|
|
|
+ class="fix-box-1"
|
|
|
+ v-model="spaceData.fillColor"
|
|
|
+ ></el-color-picker>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 边框 -->
|
|
@@ -140,7 +159,13 @@
|
|
|
<div class="property">
|
|
|
<div class="color-box">
|
|
|
<div class="cololorSelect">
|
|
|
- <el-color-picker show-alpha @change="" class="fix-box-1" v-model="spaceData.borderColor"></el-color-picker>
|
|
|
+ <el-color-picker
|
|
|
+ show-alpha
|
|
|
+ popper-class="m-color-picker"
|
|
|
+ @change=""
|
|
|
+ class="fix-box-1"
|
|
|
+ v-model="spaceData.borderColor"
|
|
|
+ ></el-color-picker>
|
|
|
</div>
|
|
|
<span class="text">颜色</span>
|
|
|
</div>
|
|
@@ -186,12 +211,17 @@
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
<script>
|
|
|
+/* eslint-disable no-case-declarations */
|
|
|
/**
|
|
|
* 编辑信息点页面
|
|
|
* 添加设备,设备组,空间 三个共用
|
|
|
*/
|
|
|
+import { mapState, mapMutations } from "vuex";
|
|
|
import { dictQuery } from "@/api/datacenter";
|
|
|
+import { imgBaseUrl, imgServeUpload } from "@/api/imageservice";
|
|
|
import { cloneDeep } from "lodash";
|
|
|
+import { rgbaNum } from "@persagy-web/big-edit/lib/until";
|
|
|
+import { SColor } from "@persagy-web/draw/lib";
|
|
|
const list = [
|
|
|
{ name: "运行状态", id: "yxzt" },
|
|
|
{ name: "故障状态", id: "gzzt" },
|
|
@@ -222,15 +252,14 @@ export default {
|
|
|
required: true,
|
|
|
},
|
|
|
// 设备code值
|
|
|
- codeType: {
|
|
|
+ code: {
|
|
|
type: String,
|
|
|
- required: true,
|
|
|
},
|
|
|
},
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
- dialogVisible: true,
|
|
|
+ dialogVisible: false,
|
|
|
tab: 0,
|
|
|
chooseList: [],
|
|
|
inputVisible: false,
|
|
@@ -245,9 +274,9 @@ export default {
|
|
|
// accumulativeList: cloneDeep(list),
|
|
|
/** -------------------设备属性使用值start-------------------------- */
|
|
|
equipmentData: {
|
|
|
- color: "",
|
|
|
+ color: "#000000",
|
|
|
size: 1,
|
|
|
- iconUrl: undefined,
|
|
|
+ url: "",
|
|
|
},
|
|
|
/** -------------------设备属性使用值end-------------------------- */
|
|
|
/** -------------------空间属性使用值start-------------------------- */
|
|
@@ -277,6 +306,9 @@ export default {
|
|
|
/** -------------------空间属性使用值end-------------------------- */
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ ...mapState(["styleMap"]),
|
|
|
+ },
|
|
|
watch: {
|
|
|
// 是否打开弹窗
|
|
|
showDialog(val) {
|
|
@@ -295,27 +327,20 @@ export default {
|
|
|
},
|
|
|
deep: true,
|
|
|
},
|
|
|
+ code(newV, oldV) {
|
|
|
+ if (newV && newV !== oldV) {
|
|
|
+ // this.getInfoPoint();
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
- async created() {
|
|
|
- console.time(1);
|
|
|
- const res = await dictQuery({ pageNumber: 1, pageSize: 1000, type: this.codeType || "FFFSSN" });
|
|
|
- console.timeEnd(1);
|
|
|
- console.time(2);
|
|
|
- let data = res.content;
|
|
|
- // 按照一级名称,将一维数组拆分成二维数组
|
|
|
- data = this._(data).groupBy("firstName").values().value();
|
|
|
- this.list = data;
|
|
|
- console.timeEnd(2);
|
|
|
- },
|
|
|
- beforeMount() {},
|
|
|
mounted() {
|
|
|
- // window.vm = this;
|
|
|
+ window.vm = this;
|
|
|
},
|
|
|
methods: {
|
|
|
+ ...mapMutations(["ADDSTYLE"]),
|
|
|
// 展示标签输入框
|
|
|
showInput() {
|
|
|
this.inputVisible = true;
|
|
|
- this.initDialog();
|
|
|
},
|
|
|
initDialog() {
|
|
|
this.spaceData = {
|
|
@@ -329,6 +354,24 @@ export default {
|
|
|
this.$nextTick(() => {
|
|
|
this.setLineStyle();
|
|
|
});
|
|
|
+ // 获取信息点值
|
|
|
+ this.getInfoPoint();
|
|
|
+ // 获取公式,属性信息
|
|
|
+ const styleMap = { ...this.styleMap.defaultEquipStyle, ...(this.styleMap[this.code] || {}) };
|
|
|
+ const { formula, url, color, size } = styleMap;
|
|
|
+ this.chooseList = JSON.parse(formula || "[]");
|
|
|
+ this.equipmentData = { url, color, size };
|
|
|
+ },
|
|
|
+ async getInfoPoint() {
|
|
|
+ console.time(1);
|
|
|
+ const res = await dictQuery({ pageNumber: 1, pageSize: 1000, type: this.code || "FFFSSN" });
|
|
|
+ console.timeEnd(1);
|
|
|
+ console.time(2);
|
|
|
+ let data = res.content;
|
|
|
+ // 按照一级名称,将一维数组拆分成二维数组
|
|
|
+ data = this._(data).groupBy("firstName").values().value();
|
|
|
+ this.list = data;
|
|
|
+ console.timeEnd(2);
|
|
|
},
|
|
|
// 添加标签
|
|
|
handleInputConfirm() {
|
|
@@ -354,6 +397,24 @@ export default {
|
|
|
* 点击弹窗确定,提交接口
|
|
|
*/
|
|
|
confirm() {
|
|
|
+ // equipment 设备, equipmentGroup 设备组, space 空间
|
|
|
+ switch (this.type) {
|
|
|
+ case "equipment":
|
|
|
+ const formula = JSON.stringify(this.chooseList);
|
|
|
+ let { color } = this.equipmentData;
|
|
|
+ const { url, size } = this.equipmentData;
|
|
|
+ const colorlist = rgbaNum(color);
|
|
|
+ color = new SColor(Number(colorlist[0]), Number(colorlist[1]), Number(colorlist[2]), colorlist[3] * 255).value;
|
|
|
+ this.ADDSTYLE({ id: this.code, color, size, formula, url });
|
|
|
+ break;
|
|
|
+ case "equipmentGroup":
|
|
|
+ break;
|
|
|
+ case "space":
|
|
|
+ break;
|
|
|
+
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
this.dialogVisible = false;
|
|
|
this.$emit("closeModal");
|
|
|
},
|
|
@@ -396,21 +457,13 @@ export default {
|
|
|
} else {
|
|
|
// 构造 XMLHttpRequest 对象,发送文件 Binary 数据
|
|
|
var xhr = new XMLHttpRequest();
|
|
|
- xhr.open(
|
|
|
- /* method */
|
|
|
- "POST",
|
|
|
- /* target url */
|
|
|
- "/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true" +
|
|
|
- "&key=" +
|
|
|
- uploadKey +
|
|
|
- "." +
|
|
|
- imgType
|
|
|
- );
|
|
|
+ xhr.open("POST", `${imgServeUpload}${uploadKey}.${imgType}`);
|
|
|
xhr.send(reader.result);
|
|
|
xhr.onreadystatechange = function () {
|
|
|
if (xhr.readyState == 4) {
|
|
|
if (xhr.status == 200) {
|
|
|
- that.equipmentData.iconUrl = baseUrl + uploadKey + "." + imgType;
|
|
|
+ that.equipmentData.url = uploadKey + "." + imgType;
|
|
|
+ console.log(uploadKey + "." + imgType);
|
|
|
// bus.$emit("updateStyle", "url", baseUrl + uploadKey + "." + imgType);
|
|
|
}
|
|
|
}
|
|
@@ -482,6 +535,13 @@ export default {
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
+<style lang="less">
|
|
|
+.m-color-picker {
|
|
|
+ .el-color-dropdown__value {
|
|
|
+ width: 170px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
<style lang='less' scoped>
|
|
|
/deep/ .edit-info-point-dialog {
|
|
|
width: 1200px;
|