123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 |
- <template>
- <div>
- <!--网格-->
- <div class="attr-select" v-if="type==='网格'">
- <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>
- </div>
- <!--文字内容-->
- <div class="attr-select" v-if="type==='文字内容'">
- <section class="grid">文字内容
- <div class="grid-content">
- <a-textarea placeholder="textarea with clear icon" allow-clear @change="changeTextArea" :rows="4"/>
- </div>
- </section>
- </div>
- <!--图片-->
- <div class="attr-select" v-if="type==='图片'">
- <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" 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">
- <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 ==='设备'">数量
- <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>
- </section>
- </div>
- <!--设备/工程信息化ID/工程信息化中的位置类型-->
- <div class="attr-select">
- <section class="grid">
- <!-- v-if -> 设备/工程信息化ID/工程信息化中的位置类型 -->
- <span>{{`设备`}}</span>
- <a-button type="link" class="edit-option-btn">选择编辑</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">{{item.value}}</p>
- </a-collapse-panel>
- </a-collapse>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: "attr_select",
- props: ['type'],
- 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.`);
- }
- }
- }
- }
- </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>
|