|
@@ -102,55 +102,115 @@
|
|
|
</div>
|
|
|
|
|
|
<!--针对“设备/位置/管线/分区”属性示例-->
|
|
|
- <div
|
|
|
- class="attr-select"
|
|
|
- v-if="type =='Zone' || type =='Image' ||type == 'fire-Zone' ||type == 'Line'"
|
|
|
- >
|
|
|
- <div class="row-tit" v-if="type == 'fire-area'">颜色</div>
|
|
|
- <div class="row" v-if="type == 'fire-area'">
|
|
|
- <swatches :swatches="swatchess" v-model="color" inline></swatches>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="row-tit">名称显示</div>
|
|
|
- <a-button type="link" class="edit-option-btn">{{editStatus[type]}}</a-button>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <a-input v-model="lengedName" @change="changeLengedName" />
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="row-tit">字号</div>
|
|
|
- <div class="grid-content">
|
|
|
- <a-input-number v-model="fontSize" :min="1" @change="changeFont" style="width: 168px" />
|
|
|
+ <div class="attr-select">
|
|
|
+ <div v-if="type =='Image'||type == 'Line'">
|
|
|
+ <div class="row-tit" v-if="true">颜色</div>
|
|
|
+ <div class="row" v-if="true">
|
|
|
+ <swatches @input="changefillColor" :swatches="swatchess" v-model="fillColor" inline></swatches>
|
|
|
</div>
|
|
|
- <div class="color-choice">
|
|
|
- <swatches v-model="color" @close="changeFontColor" popover-x="left" />
|
|
|
+ <div class="row">
|
|
|
+ <div class="row-tit">名称显示</div>
|
|
|
+ <a-button type="link" class="edit-option-btn" @click="OpenEditStatus">{{editStatus[type]}}</a-button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- 当为设备状态时 -->
|
|
|
- <div class="row" v-if="type =='Image'">
|
|
|
- <div class="row-tit">数量</div>
|
|
|
- <div class="grid-content">
|
|
|
- <a-input-number
|
|
|
- v-model="imageNum"
|
|
|
- :min="1"
|
|
|
- @change="changeImageNum"
|
|
|
- style="width: 208px"
|
|
|
- />
|
|
|
+ <div class="row">
|
|
|
+ <a-input v-model="lengedName" @change="changeLengedName" />
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="row-tit">字号</div>
|
|
|
+ <div class="grid-content">
|
|
|
+ <a-input-number v-model="fontSize" :min="1" @change="changeFont" style="width: 168px" />
|
|
|
+ </div>
|
|
|
+ <div class="color-choice">
|
|
|
+ <swatches v-model="color" @close="changeFontColor" popover-x="left" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 当为设备状态时 -->
|
|
|
+ <div class="row" v-if="type =='Image'">
|
|
|
+ <div class="row-tit">数量</div>
|
|
|
+ <div class="grid-content">
|
|
|
+ <a-input-number
|
|
|
+ v-model="imageNum"
|
|
|
+ :min="1"
|
|
|
+ @change="changeImageNum"
|
|
|
+ style="width: 208px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 当为管道状态时 -->
|
|
|
+ <div class="row" v-if="type =='Line'">
|
|
|
+ <div class="row-tit">线宽</div>
|
|
|
+ <div class="grid-content">
|
|
|
+ <a-input-number
|
|
|
+ v-model="lineWidth"
|
|
|
+ :min="1"
|
|
|
+ @change="changeLineWidth"
|
|
|
+ style="width: 208px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- 当为管道状态时 -->
|
|
|
- <div class="row" v-if="type =='Line'">
|
|
|
- <div class="row-tit">线宽</div>
|
|
|
- <div class="grid-content">
|
|
|
- <a-input-number
|
|
|
- v-model="lineWidth"
|
|
|
- :min="1"
|
|
|
- @change="changeLineWidth"
|
|
|
- style="width: 208px"
|
|
|
- />
|
|
|
+ <div v-else>
|
|
|
+ <div v-if="false">
|
|
|
+ <!-- 防火分区 -->
|
|
|
+ <div class="row-tit">颜色</div>
|
|
|
+ <div class="row">
|
|
|
+ <swatches @input="changefillColor" :swatches="swatchess" v-model="fillColor" inline></swatches>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="row-tit">名称显示</div>
|
|
|
+ <a-button type="link" class="edit-option-btn" @click="OpenEditStatus">{{editStatus[type]}}</a-button>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <a-input v-model="lengedName" @change="changeLengedName" />
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="row-tit">字号</div>
|
|
|
+ <div class="grid-content">
|
|
|
+ <a-input-number
|
|
|
+ v-model="fontSize"
|
|
|
+ :min="1"
|
|
|
+ @change="changeFont"
|
|
|
+ style="width: 168px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="color-choice">
|
|
|
+ <swatches v-model="color" @close="changeFontColor" popover-x="left" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <!-- 石材铺装 -->
|
|
|
+ <div class="row">
|
|
|
+ <div class="row-tit">图例说明</div>
|
|
|
+ <a-button type="link" class="edit-option-btn" @click="OpenEditStatus">编辑区域</a-button>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <a-textarea :auto-size="{ minRows: 4, maxRows: 6 }" />
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="row-tit">描边</div>
|
|
|
+ <div class="grid-content">
|
|
|
+ <a-input-number
|
|
|
+ v-model="fontSize"
|
|
|
+ :min="1"
|
|
|
+ @change="changeFont"
|
|
|
+ style="width: 168px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="color-choice">
|
|
|
+ <swatches v-model="color" @close="changeFontColor" popover-x="left" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="row-tit">填充</div>
|
|
|
+ <div class="color-choice">
|
|
|
+ <swatches v-model="color" @close="changeFontColor" popover-x="left" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
<!--设备/工程信息化ID/工程信息化中的位置类型-->
|
|
|
<div
|
|
|
class="attr-select attr-select-bottom"
|
|
@@ -176,22 +236,29 @@
|
|
|
<a-collapse-panel key="1" :style="customStyle">
|
|
|
<template slot="header">
|
|
|
<div style="font-size: 12px;color: #8D9399;">
|
|
|
- <a-icon type="exclamation-circle" /> <span>键盘操作提示</span>
|
|
|
+ <a-icon type="exclamation-circle" />
|
|
|
+ <span>键盘操作提示</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
- <p v-for="item in keyboardOperation" :key="item.value" style="display: flex;margin-top: 13px;">
|
|
|
- <span> {{item.value}}</span>
|
|
|
+ <p
|
|
|
+ v-for="item in keyboardOperation"
|
|
|
+ :key="item.value"
|
|
|
+ style="display: flex;margin-top: 13px;"
|
|
|
+ >
|
|
|
+ <span>{{item.value}}</span>
|
|
|
<span class="key-board">{{item.keys}}</span>
|
|
|
- <span v-if="item.events" style="margin: 0 5px;">+ <a-icon type="user" /></span>
|
|
|
- <span> {{item.events}}</span>
|
|
|
+ <span v-if="item.events" style="margin: 0 5px;">
|
|
|
+ +
|
|
|
+ <a-icon type="user" />
|
|
|
+ </span>
|
|
|
+ <span>{{item.events}}</span>
|
|
|
</p>
|
|
|
</a-collapse-panel>
|
|
|
</a-collapse>
|
|
|
</div>
|
|
|
<editDialog ref="dialog" :typeEdit="1" :getmajorId="'1001'" :sysNum="5" />
|
|
|
-<!-- <editDialog ref="dialog" :typeEdit="2" :getmajorId="'设备间'" :sysNum="5" />-->
|
|
|
-
|
|
|
+ <!-- <editDialog ref="dialog" :typeEdit="2" :getmajorId="'设备间'" :sysNum="5" />-->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -213,10 +280,10 @@ export default {
|
|
|
customStyle:
|
|
|
"background: #fff;overflow: hidden; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);border:0",
|
|
|
keyboardOperation: [
|
|
|
- { value: "拖动画布:", keys:'Space',events:'Click' },
|
|
|
- { value: "加选对象:", keys:'Ctrl',events:'Press' },
|
|
|
- { value: "确认操作:", keys:'Enter' },
|
|
|
- { value: "取消对象:", keys:'Enter' }
|
|
|
+ { value: "拖动画布:", keys: "Space", events: "Click" },
|
|
|
+ { value: "加选对象:", keys: "Ctrl", events: "Press" },
|
|
|
+ { value: "确认操作:", keys: "Enter" },
|
|
|
+ { value: "取消对象:", keys: "Enter" }
|
|
|
],
|
|
|
numberValue: 3,
|
|
|
fontSize: 12, //字体大小
|
|
@@ -255,14 +322,15 @@ export default {
|
|
|
}
|
|
|
],
|
|
|
editStatus: {
|
|
|
- equipment: "编辑设备",
|
|
|
- pipeline: "管道编辑",
|
|
|
- "fire-area": "编辑区域",
|
|
|
- position: "编辑区域"
|
|
|
+ Image: "编辑设备",
|
|
|
+ Line: "管道编辑",
|
|
|
+ Zone: "编辑区域",
|
|
|
},
|
|
|
- swatchess: ["#57C5FC", "#5F70E1", "#4DAE6C", "#028FAA"],
|
|
|
+ swatchess: ["#69C5FC", "#656EDF", "#58AF6F", "#2D8FAA"],
|
|
|
lengedName: "", // 图例名称
|
|
|
- imageNum: 1 //设备数量
|
|
|
+ imageNum: 1, //设备数量
|
|
|
+ fillColor: "", //修改填充色 (主要针对防火风区以及石材铺装)
|
|
|
+ focusItem:null //选中得item
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
@@ -338,6 +406,13 @@ export default {
|
|
|
this.imageNum = 1;
|
|
|
}
|
|
|
bus.$emit("changeImageNum", this.imageNum);
|
|
|
+ },
|
|
|
+ changefillColor() {
|
|
|
+ bus.$emit("changefillColor", this.fillColor);
|
|
|
+ },
|
|
|
+ //设置缩小item为编辑状态
|
|
|
+ OpenEditStatus(){
|
|
|
+ bus.$emit("OpenEditStatus");
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
@@ -412,7 +487,6 @@ export default {
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.icon-image {
|
|
|
font-size: 25px;
|
|
|
}
|
|
@@ -439,18 +513,18 @@ export default {
|
|
|
color: #0091ff;
|
|
|
}
|
|
|
}
|
|
|
-.key-boards{
|
|
|
- .key-board{
|
|
|
+.key-boards {
|
|
|
+ .key-board {
|
|
|
width: 52px;
|
|
|
height: 24px;
|
|
|
border-radius: 3px;
|
|
|
border: 1px solid rgba(195, 199, 203, 1);
|
|
|
font-size: 14px;
|
|
|
- color: #646A73;
|
|
|
+ color: #646a73;
|
|
|
text-align: center;
|
|
|
}
|
|
|
- /deep/ .ant-collapse-content{
|
|
|
- border-top: 1px solid #EFF0F1;
|
|
|
+ /deep/ .ant-collapse-content {
|
|
|
+ border-top: 1px solid #eff0f1;
|
|
|
}
|
|
|
}
|
|
|
#attr-select {
|