123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249 |
- <template>
- <div>
- <!--选中-->
- <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>
- </div>
- <!--文字内容-->
- <div class="attr-select" v-if="type==='text'">
- <section class="grid">
- 文字内容
- <div class="grid-content">
- <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==='images'">
- <section class="grid">
- 图片
- <div class="grid-content">
- <a-upload-dragger
- name="file"
- :multiple="true"
- action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
- @change="changeImage"
- >
- <p class="icon-image">
- <a-icon type="cloud-upload" />
- </p>
- <p class="ant-upload-text">将图片拖动到这里替换</p>
- <p class="ant-upload-hint">本地上传</p>
- </a-upload-dragger>
- </div>
- </section>
- </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="grid-content">
- 字号
- <a-input-number
- v-model="numberValue"
- :min="1"
- @change="changeNumber"
- style="width: 168px"
- />
- </div>
- <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 ==='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>
- <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 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" />
- </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" />
- </div>
- </template>
- <script>
- 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(value) {
- 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;
- .grid {
- margin: 10px 15px;
- }
- .grid-content {
- margin-top: 10px;
- }
- .icon-image {
- font-size: 25px;
- }
- .edit-option-btn {
- float: right;
- margin-top: -5px;
- }
- .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-text {
- font-size: 14px;
- color: #c3c7cb;
- }
- .ant-upload.ant-upload-drag p.ant-upload-hint {
- color: #0091ff;
- }
- }
- </style>
|