|
@@ -1,50 +1,73 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <div id="attr-select">
|
|
|
<!--选中-->
|
|
|
<div class="attr-select" v-if="type==='line'">
|
|
|
- <section class="grid">
|
|
|
- <section class="grid">
|
|
|
- 外观
|
|
|
- <div class="grid-content">
|
|
|
- 线宽
|
|
|
- <a-input-number
|
|
|
- v-model="lineWidth"
|
|
|
- :min="1"
|
|
|
- @change="changeLineWidth"
|
|
|
- style="width: 168px"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- </section>
|
|
|
+ <span class="grid-title">外观</span>
|
|
|
+ <div class="row">
|
|
|
+ <div class="row-tit">线宽</div>
|
|
|
+ <div class="grid-content">
|
|
|
+ <a-input-number
|
|
|
+ v-model="lineWidth"
|
|
|
+ :min="1"
|
|
|
+ @change="changeLineWidth"
|
|
|
+ style="width: 168px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="color-choice">
|
|
|
+ <swatches v-model="borderColor" popover-x="left" @close="changeBorderColor" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="row-tit">线型</div>
|
|
|
+ <a-select
|
|
|
+ style="width: 208px"
|
|
|
+ :default-value="borderLineOption[0].id"
|
|
|
+ @change="handleChange"
|
|
|
+ >
|
|
|
+ <a-select-option
|
|
|
+ v-for="item in borderLineOption"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.src"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
+ <img :src="item.src" alt />
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!--文字内容-->
|
|
|
<div class="attr-select" v-if="type==='text'">
|
|
|
- <section class="grid">
|
|
|
- 文字内容
|
|
|
+ <span class="grid-title">文字内容</span>
|
|
|
+ <div class="grid-content">
|
|
|
+ <a-textarea
|
|
|
+ placeholder="请在此处输入文字!"
|
|
|
+ v-model="textMsg"
|
|
|
+ allow-clear
|
|
|
+ @change="changeTextArea"
|
|
|
+ :rows="4"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <span class="grid-title">外观</span>
|
|
|
+ <div class="row">
|
|
|
+ <div class="row-tit">字号</div>
|
|
|
<div class="grid-content">
|
|
|
- <a-textarea
|
|
|
- placeholder="textarea with clear icon"
|
|
|
- v-model="textMsg"
|
|
|
- allow-clear
|
|
|
- @change="changeTextArea"
|
|
|
- :rows="4"
|
|
|
- />
|
|
|
+ <a-input-number v-model="fontSize" :min="1" @change="changeFont" style="width: 168px" />
|
|
|
+ </div>
|
|
|
+ <div class="color-choice">
|
|
|
+ <swatches v-model="fontColor" popover-x="left" @close="changeFontColor" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="row-tit">背景色</div>
|
|
|
+ <div class="color-choice">
|
|
|
+ <swatches v-model="color" popover-x="left" />
|
|
|
</div>
|
|
|
- </section>
|
|
|
- <div class="attr-select" v-if="type==='text'">
|
|
|
- <section class="grid">
|
|
|
- 外观
|
|
|
- <div class="grid-content">
|
|
|
- 字号
|
|
|
- <a-input-number v-model="fontSize" :min="1" @change="changeFont" style="width: 168px" />
|
|
|
- </div>
|
|
|
- </section>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--图片-->
|
|
|
<div class="attr-select" v-if="type==='images'">
|
|
|
+ <span class="grid-title">文字内容</span>
|
|
|
<section class="grid">
|
|
|
- 图片
|
|
|
<div class="grid-content">
|
|
|
<a-upload-dragger
|
|
|
name="file"
|
|
@@ -60,58 +83,94 @@
|
|
|
</a-upload-dragger>
|
|
|
</div>
|
|
|
</section>
|
|
|
+ <span class="grid-title">外观</span>
|
|
|
+ <div class="row">
|
|
|
+ <div class="row-tit">边框</div>
|
|
|
+ <div class="grid-content">
|
|
|
+ <a-input-number
|
|
|
+ v-model="lineWidth"
|
|
|
+ :min="1"
|
|
|
+ @change="changeLineWidth"
|
|
|
+ style="width: 168px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="color-choice">
|
|
|
+ <swatches v-model="color" popover-x="left" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<!--针对“设备/位置/管线/分区”属性示例-->
|
|
|
- <div class="attr-select">
|
|
|
- <section class="grid">
|
|
|
- <span>名称显示</span>
|
|
|
- <!-- v-if -> 编辑设备/区域/管道 -->
|
|
|
- <a-button type="link" class="edit-option-btn">{{`编辑设备`}}</a-button>
|
|
|
- <div class="grid-content">
|
|
|
- <a-input />
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ class="attr-select"
|
|
|
+ v-if="type =='equipment' || type =='pipeline' ||type == 'fire-area' ||type == 'position'"
|
|
|
+ >
|
|
|
+ <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 />
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="row-tit">字号</div>
|
|
|
<div class="grid-content">
|
|
|
- 字号
|
|
|
<a-input-number
|
|
|
- v-model="numberValue"
|
|
|
+ v-model="lineWidth"
|
|
|
:min="1"
|
|
|
- @change="changeNumber"
|
|
|
+ @change="changeLineWidth"
|
|
|
style="width: 168px"
|
|
|
/>
|
|
|
</div>
|
|
|
- <div class="grid-content" v-if="type ==='equipment'">
|
|
|
- 数量
|
|
|
+ <div class="color-choice">
|
|
|
+ <swatches v-model="color" popover-x="left" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 当为设备状态时 -->
|
|
|
+ <div class="row" v-if="type =='equipment'">
|
|
|
+ <div class="row-tit">数量</div>
|
|
|
+ <div class="grid-content">
|
|
|
<a-input-number
|
|
|
- v-model="numberValue"
|
|
|
+ v-model="lineWidth"
|
|
|
:min="1"
|
|
|
- @change="changeNumber"
|
|
|
- style="width: 218px"
|
|
|
+ @change="changeLineWidth"
|
|
|
+ style="width: 208px"
|
|
|
/>
|
|
|
</div>
|
|
|
- <div class="grid-content" v-if="type ==='pipeline'">
|
|
|
- 线宽
|
|
|
+ </div>
|
|
|
+ <!-- 当为管道状态时 -->
|
|
|
+ <div class="row" v-if="type =='pipeline'">
|
|
|
+ <div class="row-tit">线宽</div>
|
|
|
+ <div class="grid-content">
|
|
|
<a-input-number
|
|
|
- v-model="numberValue"
|
|
|
+ v-model="lineWidth"
|
|
|
:min="1"
|
|
|
- @change="changeNumber"
|
|
|
- style="width: 218px"
|
|
|
+ @change="changeLineWidth"
|
|
|
+ style="width: 208px"
|
|
|
/>
|
|
|
</div>
|
|
|
- </section>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!--设备/工程信息化ID/工程信息化中的位置类型-->
|
|
|
- <!-- <div class="attr-select">
|
|
|
- <section class="grid">-->
|
|
|
- <!-- v-if -> 设备/工程信息化ID/工程信息化中的位置类型 -->
|
|
|
- <!-- <span>{{`设备`}}</span>
|
|
|
+ <div
|
|
|
+ class="attr-select attr-select-bottom"
|
|
|
+ v-if="type =='equipment' || type =='pipeline' || type =='fire-area' ||type == 'position'"
|
|
|
+ >
|
|
|
+ <div class="row">
|
|
|
+ <span>{{`工程信息化ID`}}</span>
|
|
|
<a-button type="link" class="edit-option-btn" @click="handleEdit">选择编辑</a-button>
|
|
|
- <div class="grid-content">
|
|
|
- <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD4</a-card>
|
|
|
- <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD</a-card>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- </div>-->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="grid-content">
|
|
|
+ <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD4</a-card>
|
|
|
+ <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD</a-card>
|
|
|
+ <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD</a-card>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!-- 快捷操作提示-->
|
|
|
<div style="position: fixed;bottom: 0;width: 280px;">
|
|
|
<a-collapse :bordered="false" expand-icon-position="right">
|
|
@@ -129,11 +188,14 @@
|
|
|
|
|
|
<script>
|
|
|
import editDialog from "./edit-dialog";
|
|
|
+import Swatches from "vue-swatches";
|
|
|
import bus from "@/bus";
|
|
|
+import "vue-swatches/dist/vue-swatches.css";
|
|
|
+import { ItemColor } from "@saga-web/big/lib";
|
|
|
export default {
|
|
|
name: "attr_select",
|
|
|
props: ["type", "focusItemList"],
|
|
|
- components: { editDialog },
|
|
|
+ components: { editDialog, Swatches },
|
|
|
data() {
|
|
|
return {
|
|
|
precisionList: [{ value: 10 }, { value: 20 }, { value: 30 }],
|
|
@@ -149,8 +211,45 @@ export default {
|
|
|
numberValue: 3,
|
|
|
fontSize: 12, //字体大小
|
|
|
lineWidth: 0,
|
|
|
- color: "", //字体颜色
|
|
|
textMsg: "", //
|
|
|
+ color: "#1CA085",
|
|
|
+ fontColor: "#1CA085", //文字颜色
|
|
|
+ borderColor: "", // 边框颜色 直线,折线,多边形等
|
|
|
+ borderLineOption: [
|
|
|
+ {
|
|
|
+ id: "solid",
|
|
|
+ src: require("@/assets/images/1pxline.jpg")
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "dashed",
|
|
|
+ src: require("@/assets/images/dashedLine.jpg")
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "dotted",
|
|
|
+ src: require("@/assets/images/dotLine.jpg")
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ linepxOption: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ src: require("@/assets/images/1pxline.jpg")
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ src: require("@/assets/images/2pxline.jpg")
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ src: require("@/assets/images/3pxline.jpg")
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ editStatus: {
|
|
|
+ equipment: "编辑设备",
|
|
|
+ pipeline: "管道编辑",
|
|
|
+ "fire-area": "编辑区域",
|
|
|
+ position: "编辑区域"
|
|
|
+ },
|
|
|
+ swatchess: ["#57C5FC", "#5F70E1", "#4DAE6C", "#028FAA"]
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
@@ -175,6 +274,14 @@ export default {
|
|
|
changeTextArea() {
|
|
|
bus.$emit("changeText", this.textMsg);
|
|
|
},
|
|
|
+ // 改变线的颜色
|
|
|
+ changeBorderColor(color) {
|
|
|
+ bus.$emit("changeBorderColor", color);
|
|
|
+ },
|
|
|
+ // 改变字体颜色
|
|
|
+ changeFontColor(color) {
|
|
|
+ bus.$emit("changeFontColor", color);
|
|
|
+ },
|
|
|
changeImage(info) {
|
|
|
const status = info.file.status;
|
|
|
if (status !== "uploading") {
|
|
@@ -197,9 +304,10 @@ export default {
|
|
|
if (newval.itemType == "text") {
|
|
|
this.textMsg = Item.text;
|
|
|
this.fontSize = Item.font.size;
|
|
|
+ this.fontColor = Item.color;
|
|
|
} else if (newval.itemType == "line") {
|
|
|
- console.log('line',Item.lineWidth)
|
|
|
this.lineWidth = Item.lineWidth;
|
|
|
+ this.borderColor = Item.strokeColor;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -209,15 +317,41 @@ export default {
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
.attr-select {
|
|
|
- border-top: 1px solid #c3c7cb;
|
|
|
- margin-top: 30px;
|
|
|
-
|
|
|
+ padding: 12px 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .grid-title {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #8d9399;
|
|
|
+ }
|
|
|
+ .row {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 12px;
|
|
|
+ .color-choice {
|
|
|
+ & /deep/ .vue-swatches__trigger {
|
|
|
+ width: 26px !important;
|
|
|
+ height: 26px !important;
|
|
|
+ border-radius: 0px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .row-tit {
|
|
|
+ color: #1f2429;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
.grid {
|
|
|
margin: 10px 15px;
|
|
|
+ .grid-title {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #8d9399;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.grid-content {
|
|
|
- margin-top: 10px;
|
|
|
+ // margin-top: 10px;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
.icon-image {
|
|
@@ -246,4 +380,15 @@ export default {
|
|
|
color: #0091ff;
|
|
|
}
|
|
|
}
|
|
|
+#attr-select {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .attr-select-bottom {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-bottom: 400px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|