|
@@ -1,55 +1,67 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <!--网格-->
|
|
|
- <div class="attr-select" v-if="type==='网格'">
|
|
|
+ <!--选中-->
|
|
|
+ <div class="attr-select" v-if="type==='line'">
|
|
|
<section class="grid">
|
|
|
- <a-checkbox @change="onChange">
|
|
|
- 网格
|
|
|
- </a-checkbox>
|
|
|
- <div class="grid-content">网格精度
|
|
|
- <a-select default-value="10" style="width: 60%" @change="handleChange" :disabled="precision">
|
|
|
- <a-select-option v-for="item in precisionList" :value="item.value" :key="item.value">
|
|
|
- {{item.value}}
|
|
|
- </a-select-option>
|
|
|
- </a-select>
|
|
|
- </div>
|
|
|
+ <section class="grid">
|
|
|
+ 外观
|
|
|
+ <div class="grid-content">
|
|
|
+ 线宽
|
|
|
+ <a-input-number
|
|
|
+ v-model="lineWidth"
|
|
|
+ :min="1"
|
|
|
+ @change="changeLineWidth"
|
|
|
+ style="width: 168px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
</section>
|
|
|
</div>
|
|
|
<!--文字内容-->
|
|
|
- <div class="attr-select" v-if="type==='文字内容'">
|
|
|
- <section class="grid">文字内容
|
|
|
+ <div class="attr-select" v-if="type==='text'">
|
|
|
+ <section class="grid">
|
|
|
+ 文字内容
|
|
|
<div class="grid-content">
|
|
|
- <a-textarea placeholder="textarea with clear icon" allow-clear @change="changeTextArea" :rows="4"/>
|
|
|
+ <a-textarea
|
|
|
+ placeholder="textarea with clear icon"
|
|
|
+ v-model="textMsg"
|
|
|
+ allow-clear
|
|
|
+ @change="changeTextArea"
|
|
|
+ :rows="4"
|
|
|
+ />
|
|
|
</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==='图片'">
|
|
|
- <section class="grid">图片
|
|
|
+ <div class="attr-select" v-if="type==='images'">
|
|
|
+ <section class="grid">
|
|
|
+ 图片
|
|
|
<div class="grid-content">
|
|
|
<a-upload-dragger
|
|
|
- name="file"
|
|
|
- :multiple="true"
|
|
|
- action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
|
|
- @change="changeImage"
|
|
|
+ name="file"
|
|
|
+ :multiple="true"
|
|
|
+ action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
|
|
+ @change="changeImage"
|
|
|
>
|
|
|
<p class="icon-image">
|
|
|
- <a-icon type="cloud-upload"/>
|
|
|
+ <a-icon type="cloud-upload" />
|
|
|
</p>
|
|
|
- <p class="ant-upload-text">将图片拖动到这里替换 </p>
|
|
|
+ <p class="ant-upload-text">将图片拖动到这里替换</p>
|
|
|
<p class="ant-upload-hint">本地上传</p>
|
|
|
</a-upload-dragger>
|
|
|
</div>
|
|
|
</section>
|
|
|
</div>
|
|
|
- <!--外观-->
|
|
|
- <div class="attr-select" v-if="type==='外观'">
|
|
|
- <section class="grid">外观
|
|
|
- <div class="grid-content">线宽
|
|
|
- <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 168px"/>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- </div>
|
|
|
+
|
|
|
<!--针对“设备/位置/管线/分区”属性示例-->
|
|
|
<div class="attr-select">
|
|
|
<section class="grid">
|
|
@@ -57,138 +69,181 @@
|
|
|
<!-- v-if -> 编辑设备/区域/管道 -->
|
|
|
<a-button type="link" class="edit-option-btn">{{`编辑设备`}}</a-button>
|
|
|
<div class="grid-content">
|
|
|
- <a-input/>
|
|
|
+ <a-input />
|
|
|
</div>
|
|
|
- <div class="grid-content">字号
|
|
|
- <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 168px"/>
|
|
|
+ <div class="grid-content">
|
|
|
+ 字号
|
|
|
+ <a-input-number
|
|
|
+ v-model="numberValue"
|
|
|
+ :min="1"
|
|
|
+ @change="changeNumber"
|
|
|
+ style="width: 168px"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div class="grid-content" v-if="type ==='设备'">数量
|
|
|
- <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 218px"/>
|
|
|
+ <div class="grid-content" v-if="type ==='equipment'">
|
|
|
+ 数量
|
|
|
+ <a-input-number
|
|
|
+ v-model="numberValue"
|
|
|
+ :min="1"
|
|
|
+ @change="changeNumber"
|
|
|
+ style="width: 218px"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div class="grid-content" v-if="type ==='管线'">线宽
|
|
|
- <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 218px"/>
|
|
|
+ <div class="grid-content" v-if="type ==='pipeline'">
|
|
|
+ 线宽
|
|
|
+ <a-input-number
|
|
|
+ v-model="numberValue"
|
|
|
+ :min="1"
|
|
|
+ @change="changeNumber"
|
|
|
+ style="width: 218px"
|
|
|
+ />
|
|
|
</div>
|
|
|
</section>
|
|
|
</div>
|
|
|
<!--设备/工程信息化ID/工程信息化中的位置类型-->
|
|
|
- <div class="attr-select">
|
|
|
- <section class="grid">
|
|
|
- <!-- v-if -> 设备/工程信息化ID/工程信息化中的位置类型 -->
|
|
|
- <span>{{`设备`}}</span>
|
|
|
+ <!-- <div class="attr-select">
|
|
|
+ <section class="grid">-->
|
|
|
+ <!-- v-if -> 设备/工程信息化ID/工程信息化中的位置类型 -->
|
|
|
+ <!-- <span>{{`设备`}}</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 style="position: fixed;bottom: 0;width: 280px;">
|
|
|
<a-collapse :bordered="false" expand-icon-position="right">
|
|
|
<template #expandIcon="props">
|
|
|
- <a-icon type="caret-up" :rotate="props.isActive ? 180 : 0"/>
|
|
|
+ <a-icon type="caret-up" :rotate="props.isActive ? 180 : 0" />
|
|
|
</template>
|
|
|
<a-collapse-panel key="1" header="键盘操作提示" :style="customStyle">
|
|
|
<p v-for="item in keyboardOperation" :key="item.value">{{item.value}}</p>
|
|
|
</a-collapse-panel>
|
|
|
</a-collapse>
|
|
|
</div>
|
|
|
- <editDialog ref="dialog"/>
|
|
|
+ <editDialog ref="dialog" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import editDialog from './edit-dialog'
|
|
|
-
|
|
|
- export default {
|
|
|
- name: "attr_select",
|
|
|
- props: ['type'],
|
|
|
- components: {editDialog},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- precisionList: [
|
|
|
- {value: 10}, {value: 20}, {value: 30},
|
|
|
- ],
|
|
|
- precision: true,
|
|
|
- numberValue: 4,
|
|
|
- customStyle: 'background: #fff;overflow: hidden; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);border:0',
|
|
|
- keyboardOperation: [
|
|
|
- {value: '拖动画布:'}, {value: '加选对象:'}, {value: '确认操作:'}, {value: '取消对象:'},
|
|
|
- ],
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- onChange(e) {
|
|
|
- this.precision = e.target.checked === true ? false : true
|
|
|
- },
|
|
|
- handleChange(value) {
|
|
|
- console.log(`selected ${value}`);
|
|
|
- },
|
|
|
- changeNumber(value) {
|
|
|
- console.log(value)
|
|
|
- },
|
|
|
- changeTextArea(value) {
|
|
|
- console.log(value)
|
|
|
-
|
|
|
- },
|
|
|
- changeImage(info) {
|
|
|
- const status = info.file.status;
|
|
|
- if (status !== 'uploading') {
|
|
|
- console.log(info.file, info.fileList);
|
|
|
- }
|
|
|
- if (status === 'done') {
|
|
|
- this.$message.success(`${info.file.name} file uploaded successfully.`);
|
|
|
- } else if (status === 'error') {
|
|
|
- this.$message.error(`${info.file.name} file upload failed.`);
|
|
|
- }
|
|
|
- },
|
|
|
- handleEdit() {
|
|
|
- this.$refs.dialog.showModal()
|
|
|
- }
|
|
|
+import editDialog from "./edit-dialog";
|
|
|
+import bus from "@/bus";
|
|
|
+export default {
|
|
|
+ name: "attr_select",
|
|
|
+ props: ["type", "focusItemList"],
|
|
|
+ components: { editDialog },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ precisionList: [{ value: 10 }, { value: 20 }, { value: 30 }],
|
|
|
+ precision: true,
|
|
|
+ customStyle:
|
|
|
+ "background: #fff;overflow: hidden; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);border:0",
|
|
|
+ keyboardOperation: [
|
|
|
+ { value: "拖动画布:" },
|
|
|
+ { value: "加选对象:" },
|
|
|
+ { value: "确认操作:" },
|
|
|
+ { value: "取消对象:" }
|
|
|
+ ],
|
|
|
+ numberValue: 3,
|
|
|
+ fontSize: 12, //字体大小
|
|
|
+ lineWidth: 0,
|
|
|
+ color: "", //字体颜色
|
|
|
+ textMsg: "" //
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onChange(e) {
|
|
|
+ this.precision = e.target.checked === true ? false : true;
|
|
|
+ },
|
|
|
+ handleChange() {
|
|
|
+ console.log(`selected ${value}`);
|
|
|
+ },
|
|
|
+ changeNumber() {
|
|
|
+ bus.$emit("changeFont", this.fontSize);
|
|
|
+ },
|
|
|
+ // 改变字体大小
|
|
|
+ changeFont() {
|
|
|
+ bus.$emit("changeFont", this.fontSize);
|
|
|
+ },
|
|
|
+ // 改变线宽
|
|
|
+ changeLineWidth() {
|
|
|
+ bus.$emit("changeLineWidth", this.lineWidth);
|
|
|
+ },
|
|
|
+ // 改变文案
|
|
|
+ changeTextArea() {
|
|
|
+ bus.$emit("changeText", this.textMsg);
|
|
|
+ },
|
|
|
+ changeImage(info) {
|
|
|
+ const status = info.file.status;
|
|
|
+ if (status !== "uploading") {
|
|
|
+ console.log(info.file, info.fileList);
|
|
|
+ }
|
|
|
+ if (status === "done") {
|
|
|
+ this.$message.success(`${info.file.name} file uploaded successfully.`);
|
|
|
+ } else if (status === "error") {
|
|
|
+ this.$message.error(`${info.file.name} file upload failed.`);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleEdit() {
|
|
|
+ this.$refs.dialog.showModal();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ focusItemList: function(newval) {
|
|
|
+ const Item = newval.itemList[0];
|
|
|
+ if (newval.itemList.length == 1) {
|
|
|
+ if (newval.itemType == "text") {
|
|
|
+ this.textMsg = Item.text;
|
|
|
+ this.fontSize = Item.font.size;
|
|
|
+ } else if (newval.itemType == "line") {
|
|
|
+ console.log('line',Item.lineWidth)
|
|
|
+ this.lineWidth = Item.lineWidth;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
+.attr-select {
|
|
|
+ border-top: 1px solid #c3c7cb;
|
|
|
+ margin-top: 30px;
|
|
|
|
|
|
- .attr-select {
|
|
|
- border-top: 1px solid #c3c7cb;
|
|
|
- margin-top: 30px;
|
|
|
-
|
|
|
- .grid {
|
|
|
-
|
|
|
- margin: 10px 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .grid-content {
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
+ .grid {
|
|
|
+ margin: 10px 15px;
|
|
|
+ }
|
|
|
|
|
|
- .icon-image {
|
|
|
- font-size: 25px;
|
|
|
- }
|
|
|
+ .grid-content {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
|
|
|
- .edit-option-btn {
|
|
|
- float: right;
|
|
|
- margin-top: -5px;
|
|
|
- }
|
|
|
+ .icon-image {
|
|
|
+ font-size: 25px;
|
|
|
+ }
|
|
|
|
|
|
- .attr-card {
|
|
|
- width: 250px;
|
|
|
- margin-bottom: 10px;
|
|
|
- white-space: normal;
|
|
|
- box-shadow: 0px 2px 6px 0px rgba(31, 36, 41, 0.05);
|
|
|
- border-radius: 4px;
|
|
|
- }
|
|
|
+ .edit-option-btn {
|
|
|
+ float: right;
|
|
|
+ margin-top: -5px;
|
|
|
+ }
|
|
|
|
|
|
- .ant-upload.ant-upload-drag p.ant-upload-text {
|
|
|
- font-size: 14px;
|
|
|
- color: #C3C7CB;
|
|
|
- }
|
|
|
+ .attr-card {
|
|
|
+ width: 250px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ white-space: normal;
|
|
|
+ box-shadow: 0px 2px 6px 0px rgba(31, 36, 41, 0.05);
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
|
|
|
- .ant-upload.ant-upload-drag p.ant-upload-hint {
|
|
|
- color: #0091FF;
|
|
|
- }
|
|
|
+ .ant-upload.ant-upload-drag p.ant-upload-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #c3c7cb;
|
|
|
+ }
|
|
|
|
|
|
+ .ant-upload.ant-upload-drag p.ant-upload-hint {
|
|
|
+ color: #0091ff;
|
|
|
}
|
|
|
+}
|
|
|
</style>
|