|
@@ -0,0 +1,378 @@
|
|
|
+<template>
|
|
|
+ <div id="equip_pro">
|
|
|
+ <div class="title">空间名称</div>
|
|
|
+ <el-tabs v-model="activeName">
|
|
|
+ <el-tab-pane label="基本信息" name="first">
|
|
|
+ <div class="equip-info-box box-padding">
|
|
|
+ <div class="equip-info-item">
|
|
|
+ <p class="equip-info-title">本地名称:</p>
|
|
|
+ <h3 class="equip-info-value" :title="ZoneItem.legendData.localName || '--'">
|
|
|
+ {{ ZoneItem.legendData.localName || "--" }}
|
|
|
+ </h3>
|
|
|
+ </div>
|
|
|
+ <div class="equip-info-item">
|
|
|
+ <p class="equip-info-title">本地编码:</p>
|
|
|
+ <h3 class="equip-info-value" :title="ZoneItem.legendData.localId || '--'">
|
|
|
+ {{ ZoneItem.legendData.localId || "--" }}
|
|
|
+ </h3>
|
|
|
+ </div>
|
|
|
+ <div class="equip-info-item">
|
|
|
+ <p class="equip-info-title">BIM坐标(XYZ):</p>
|
|
|
+ <h3 class="equip-info-value" :title="ZoneItem.legendData.bimLocation || '--'">
|
|
|
+ {{ ZoneItem.legendData.bimLocation || "--" }}
|
|
|
+ </h3>
|
|
|
+ </div>
|
|
|
+ <el-button size="small" style="width: 100%" @click="$message.info('功能待开发!')">查看详情</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="map-pos-box box-padding property">
|
|
|
+ <p class="box-title">页面位置</p>
|
|
|
+ <div class="base-property">
|
|
|
+ <div class="base-property-item">
|
|
|
+ <span>X</span>
|
|
|
+ <el-input style="width: 78px; margin-left: 8px" size="mini" v-model="ZoneItem.x" placeholder="请输入内容"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="base-property-item">
|
|
|
+ <span>Y</span>
|
|
|
+ <el-input style="width: 78px; margin-left: 8px" size="mini" v-model="ZoneItem.y" placeholder="请输入内容"></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-checkbox v-model="showBimRelation">显示与BIM坐标关系</el-checkbox>
|
|
|
+ </div> -->
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="属性" name="second">
|
|
|
+ <div class="box-padding box-border-bottom">
|
|
|
+ <p class="box-title" style="padding-top: 0">公式</p>
|
|
|
+ <div class="textarea">
|
|
|
+ <el-input type="textarea" disabled v-model="formula" @change="setStyle" :rows="2" placeholder="请输入内容"> </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-padding box-border-bottom property">
|
|
|
+ <p class="box-title">字符</p>
|
|
|
+ <div class="base-property">
|
|
|
+ <div class="base-property-item">
|
|
|
+ <div class="cololorSelect">
|
|
|
+ <el-color-picker show-alpha class="fix-box-1" @change="setStyle" v-model="color"></el-color-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="base-property-item" style="flex: 1; padding: 0">
|
|
|
+ <el-input-number
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="size"
|
|
|
+ @change="setStyle"
|
|
|
+ controls-position="right"
|
|
|
+ size="mini"
|
|
|
+ :min="1"
|
|
|
+ :max="20"
|
|
|
+ :maxlength="100"
|
|
|
+ ></el-input-number>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-padding box-border-bottom property">
|
|
|
+ <p class="box-title">填充</p>
|
|
|
+ <div class="base-property">
|
|
|
+ <div class="base-property-item">
|
|
|
+ <div class="cololorSelect">
|
|
|
+ <el-color-picker show-alpha class="fix-box-1" v-model="fillColor"></el-color-picker>
|
|
|
+ </div>
|
|
|
+ <span class="text">填充色</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-padding box-border-bottom property">
|
|
|
+ <p class="box-title">边框</p>
|
|
|
+ <div class="base-property">
|
|
|
+ <div class="base-property-item">
|
|
|
+ <div class="cololorSelect">
|
|
|
+ <el-color-picker show-alpha class="fix-box-1" v-model="strokeColor"></el-color-picker>
|
|
|
+ </div>
|
|
|
+ <span class="text">颜色</span>
|
|
|
+ </div>
|
|
|
+ <div class="base-property-item" style="flex: 1;">
|
|
|
+ <el-input style="width: 100%" v-model="lineWidth" type="number" size="mini" placeholder="输入线宽" />
|
|
|
+ <span class="text">线宽</span>
|
|
|
+ </div>
|
|
|
+ <div class="base-property-item" style="flex: 1; padding: 0">
|
|
|
+ <el-select
|
|
|
+ v-model="lineStyle"
|
|
|
+ popper-class="line-select"
|
|
|
+ :default-value="borderLineOption[0].id"
|
|
|
+ size="mini"
|
|
|
+ style="width: 80px"
|
|
|
+ placeholder="请选择"
|
|
|
+ ref="selectLine"
|
|
|
+ >
|
|
|
+ <el-option v-for="item in borderLineOption" :key="item.id" :label="item.src" :value="item.id">
|
|
|
+ <img :src="item.src" alt width="60" />
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <span class="text">线型</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-padding">
|
|
|
+ <p class="box-title">附加数据</p>
|
|
|
+ <el-input type="textarea" v-model="ZoneItem.anotherMsg" :rows="3" placeholder="请填写附加数据"> </el-input>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapMutations } from "vuex";
|
|
|
+import { SColor, SFont } from "@persagy-web/draw";
|
|
|
+import { findIndex } from "lodash";
|
|
|
+import { rgbaNum } from "@persagy-web/big-edit/lib/until";
|
|
|
+import bus from "@/bus/bus";
|
|
|
+export default {
|
|
|
+ props: ["ZoneItem"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeName: "first",
|
|
|
+ borderLineOption: [
|
|
|
+ {
|
|
|
+ id: "Solid",
|
|
|
+ src: require("@/assets/images/solidLine.png"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "Dashed",
|
|
|
+ src: require("@/assets/images/dashedLine.png"),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ formula: {
|
|
|
+ get: function () {
|
|
|
+ return this.ZoneItem.formula;
|
|
|
+ },
|
|
|
+ set: function (val) {
|
|
|
+ const oldVal = this.ZoneItem.formula;
|
|
|
+ const newVal = val;
|
|
|
+ bus.$emit("undoAttr", this.ZoneItem, "formula", oldVal, newVal);
|
|
|
+ this.ZoneItem.formula = newVal;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ color: {
|
|
|
+ get: function () {
|
|
|
+ return this.ZoneItem.color.toRgba();
|
|
|
+ },
|
|
|
+ set: function (val) {
|
|
|
+ const colorList = rgbaNum(val);
|
|
|
+ const oldVal = this.ZoneItem.color;
|
|
|
+ const newVal = new SColor(Number(colorList[0]), Number(colorList[1]), Number(colorList[2]), colorList[3] * 255);
|
|
|
+ bus.$emit("undoAttr", this.ZoneItem, "color", oldVal, newVal);
|
|
|
+ this.ZoneItem.color = newVal;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ size: {
|
|
|
+ get: function () {
|
|
|
+ return this.ZoneItem.font.size;
|
|
|
+ },
|
|
|
+ set: function (val) {
|
|
|
+ const oldVal = this.ZoneItem.font;
|
|
|
+ const newVal = new SFont("sans-serif", val);
|
|
|
+ bus.$emit("undoAttr", this.ZoneItem, "font", oldVal, newVal);
|
|
|
+ this.ZoneItem.font = newVal;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ fillColor: {
|
|
|
+ get: function () {
|
|
|
+ return this.ZoneItem.fillColor.toRgba();
|
|
|
+ },
|
|
|
+ set: function (val) {
|
|
|
+ const colorList = rgbaNum(val);
|
|
|
+ const oldVal = this.ZoneItem.fillColor;
|
|
|
+ const newVal = new SColor(Number(colorList[0]), Number(colorList[1]), Number(colorList[2]), colorList[3] * 255);
|
|
|
+ bus.$emit("undoAttr", this.ZoneItem, "fillColor", oldVal, newVal);
|
|
|
+ this.ZoneItem.fillColor = newVal;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ strokeColor: {
|
|
|
+ get: function () {
|
|
|
+ return this.ZoneItem.strokeColor.toRgba();
|
|
|
+ },
|
|
|
+ set: function (val) {
|
|
|
+ const colorList = rgbaNum(val);
|
|
|
+ const oldVal = this.ZoneItem.strokeColor;
|
|
|
+ const newVal = new SColor(Number(colorList[0]), Number(colorList[1]), Number(colorList[2]), colorList[3] * 255);
|
|
|
+ bus.$emit("undoAttr", this.ZoneItem, "strokeColor", oldVal, newVal);
|
|
|
+ this.ZoneItem.strokeColor = newVal;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ lineWidth: {
|
|
|
+ get: function () {
|
|
|
+ const size = this.ZoneItem.lineWidth;
|
|
|
+ if (size > 20) {
|
|
|
+ return 20;
|
|
|
+ }
|
|
|
+ return size;
|
|
|
+ },
|
|
|
+ set: function (newV) {
|
|
|
+ const oldV = this.ZoneItem.lineWidth;
|
|
|
+ this.ZoneItem.lineWidth = newV;
|
|
|
+ bus.$emit("undoAttr", this.ZoneItem, "lineWidth", oldV, newV);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ get: function () {
|
|
|
+ const id = this.borderLineOption[this.ZoneItem.lineStyle].id;
|
|
|
+ // 修改线型下拉菜单样式
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.setLineStyle("selectLine", id);
|
|
|
+ });
|
|
|
+ return id;
|
|
|
+ },
|
|
|
+ set: function (newV) {
|
|
|
+ newV = findIndex(this.borderLineOption, ["id", newV]);
|
|
|
+ const oldV = this.ZoneItem.lineStyle;
|
|
|
+ this.ZoneItem.lineStyle = newV;
|
|
|
+ bus.$emit("undoAttr", this.ZoneItem, "lineStyle", oldV, newV);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ window.yu = this;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations(["ADDSTYLE"]),
|
|
|
+ /**
|
|
|
+ * 修改线型下啦菜单样式
|
|
|
+ * @param {String} ref refs名称
|
|
|
+ * @param {String} id 选中的线型id
|
|
|
+ */
|
|
|
+ setLineStyle(ref, id) {
|
|
|
+ const img = this.borderLineOption.filter((v) => v.id === id)[0]?.src;
|
|
|
+ if (img) {
|
|
|
+ this.$refs[ref]?.$el?.children[0].children[0].setAttribute(
|
|
|
+ "style",
|
|
|
+ `
|
|
|
+ background: url(${img}) no-repeat;
|
|
|
+ color: rgba(0,0,0,0);
|
|
|
+ text-indent: -9999px;
|
|
|
+ background-position: 15px center;
|
|
|
+ background-size: 40px 1px;
|
|
|
+ `
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ this.$refs[ref]?.$el?.children[0].children[0].setAttribute(
|
|
|
+ "style",
|
|
|
+ `
|
|
|
+ background: inherit;
|
|
|
+ color:inherit;
|
|
|
+ text-indent: 0;
|
|
|
+ `
|
|
|
+ );
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 修改样式信息
|
|
|
+ setStyle() {
|
|
|
+ const style = {
|
|
|
+ id: this.ZoneItem.id,
|
|
|
+ style: {
|
|
|
+ color: this.ZoneItem.color.value,
|
|
|
+ size: this.ZoneItem.font.size,
|
|
|
+ fillColor: this.ZoneItem.fillColor.value,
|
|
|
+ strokeColor: this.ZoneItem.strokeColor.value,
|
|
|
+ lineWidth: this.ZoneItem.lineWidth,
|
|
|
+ lineStyle: this.ZoneItem.lineStyle,
|
|
|
+ formula: this.ZoneItem.formula,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ this.ADDSTYLE(style);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.line-select {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+#equip_pro {
|
|
|
+ .title {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ color: #000000;
|
|
|
+ background: #f8f9fa;
|
|
|
+ font-size: 14px;
|
|
|
+ padding-left: 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .box-title {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #646a73;
|
|
|
+ padding: 12px 0 8px 0;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .box-padding {
|
|
|
+ padding: 0 12px 12px;
|
|
|
+ }
|
|
|
+ .box-border-bottom {
|
|
|
+ border-bottom: 1px solid #e4e5e7;
|
|
|
+ }
|
|
|
+ .flex {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ /deep/ .el-tabs__item {
|
|
|
+ padding: 0 20px !important;
|
|
|
+ }
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ padding: 0 6px;
|
|
|
+ }
|
|
|
+ .equip-info-box {
|
|
|
+ .equip-info-item {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ .equip-info-title {
|
|
|
+ color: #8d9399;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ .equip-info-value {
|
|
|
+ cursor: pointer;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ color: #1f2429;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .property {
|
|
|
+ font-size: 12px;
|
|
|
+ .base-property {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ .base-property-item {
|
|
|
+ padding-right: 6px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cololorSelect {
|
|
|
+ width: 36px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 2px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .fix-box-1 {
|
|
|
+ margin-top: -8px;
|
|
|
+ margin-left: -8px;
|
|
|
+ /deep/ .el-color-picker__trigger {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ margin-top: 4px;
|
|
|
+ display: inline-block;
|
|
|
+ color: #1f2429;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|