attr_select.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <template>
  2. <div>
  3. <!--网格-->
  4. <div class="attr-select" v-if="type==='网格'">
  5. <section class="grid">
  6. <a-checkbox @change="onChange">
  7. 网格
  8. </a-checkbox>
  9. <div class="grid-content">网格精度
  10. <a-select default-value="10" style="width: 60%" @change="handleChange" :disabled="precision">
  11. <a-select-option v-for="item in precisionList" :value="item.value" :key="item.value">
  12. {{item.value}}
  13. </a-select-option>
  14. </a-select>
  15. </div>
  16. </section>
  17. </div>
  18. <!--文字内容-->
  19. <div class="attr-select" v-if="type==='文字内容'">
  20. <section class="grid">文字内容
  21. <div class="grid-content">
  22. <a-textarea placeholder="textarea with clear icon" allow-clear @change="changeTextArea" :rows="4"/>
  23. </div>
  24. </section>
  25. </div>
  26. <!--图片-->
  27. <div class="attr-select" v-if="type==='图片'">
  28. <section class="grid">图片
  29. <div class="grid-content">
  30. <a-upload-dragger
  31. name="file"
  32. :multiple="true"
  33. action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  34. @change="changeImage"
  35. >
  36. <p class="icon-image">
  37. <a-icon type="cloud-upload"/>
  38. </p>
  39. <p class="ant-upload-text">将图片拖动到这里替换 </p>
  40. <p class="ant-upload-hint">本地上传</p>
  41. </a-upload-dragger>
  42. </div>
  43. </section>
  44. </div>
  45. <!--外观-->
  46. <div class="attr-select" v-if="type==='外观'">
  47. <section class="grid">外观
  48. <div class="grid-content">线宽
  49. <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 168px"/>
  50. </div>
  51. </section>
  52. </div>
  53. <!--针对“设备/位置/管线/分区”属性示例-->
  54. <div class="attr-select">
  55. <section class="grid">
  56. <span>名称显示</span>
  57. <!-- v-if -> 编辑设备/区域/管道 -->
  58. <a-button type="link" class="edit-option-btn">{{`编辑设备`}}</a-button>
  59. <div class="grid-content">
  60. <a-input/>
  61. </div>
  62. <div class="grid-content">字号
  63. <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 168px"/>
  64. </div>
  65. <div class="grid-content" v-if="type ==='设备'">数量
  66. <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 218px"/>
  67. </div>
  68. <div class="grid-content" v-if="type ==='管线'">线宽
  69. <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 218px"/>
  70. </div>
  71. </section>
  72. </div>
  73. <!--设备/工程信息化ID/工程信息化中的位置类型-->
  74. <div class="attr-select">
  75. <section class="grid">
  76. <!-- v-if -> 设备/工程信息化ID/工程信息化中的位置类型 -->
  77. <span>{{`设备`}}</span>
  78. <a-button type="link" class="edit-option-btn">选择编辑</a-button>
  79. <div class="grid-content">
  80. <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD4</a-card>
  81. <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD</a-card>
  82. </div>
  83. </section>
  84. </div>
  85. <!-- 快捷操作提示-->
  86. <div style="position: fixed;bottom: 0;width: 280px;">
  87. <a-collapse :bordered="false" expand-icon-position="right">
  88. <template #expandIcon="props">
  89. <a-icon type="caret-up" :rotate="props.isActive ? 180 : 0"/>
  90. </template>
  91. <a-collapse-panel key="1" header="键盘操作提示" :style="customStyle">
  92. <p v-for="item in keyboardOperation">{{item.value}}</p>
  93. </a-collapse-panel>
  94. </a-collapse>
  95. </div>
  96. </div>
  97. </template>
  98. <script>
  99. export default {
  100. name: "attr_select",
  101. props: ['type'],
  102. data() {
  103. return {
  104. precisionList: [
  105. {value: 10}, {value: 20}, {value: 30},
  106. ],
  107. precision: true,
  108. numberValue: 4,
  109. customStyle: 'background: #fff;overflow: hidden; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);border:0',
  110. keyboardOperation: [
  111. {value: '拖动画布:'}, {value: '加选对象:'}, {value: '确认操作:'}, {value: '取消对象:'},
  112. ],
  113. }
  114. },
  115. methods: {
  116. onChange(e) {
  117. this.precision = e.target.checked === true ? false : true
  118. },
  119. handleChange(value) {
  120. console.log(`selected ${value}`);
  121. },
  122. changeNumber(value) {
  123. console.log(value)
  124. },
  125. changeTextArea(value) {
  126. console.log(value)
  127. },
  128. changeImage(info) {
  129. const status = info.file.status;
  130. if (status !== 'uploading') {
  131. console.log(info.file, info.fileList);
  132. }
  133. if (status === 'done') {
  134. this.$message.success(`${info.file.name} file uploaded successfully.`);
  135. } else if (status === 'error') {
  136. this.$message.error(`${info.file.name} file upload failed.`);
  137. }
  138. }
  139. }
  140. }
  141. </script>
  142. <style scoped lang="less">
  143. .attr-select {
  144. border-top: 1px solid #c3c7cb;
  145. margin-top: 30px;
  146. .grid {
  147. margin: 10px 15px;
  148. }
  149. .grid-content {
  150. margin-top: 10px;
  151. }
  152. .icon-image {
  153. font-size: 25px;
  154. }
  155. .edit-option-btn {
  156. float: right;
  157. margin-top: -5px;
  158. }
  159. .attr-card {
  160. width: 250px;
  161. margin-bottom: 10px;
  162. white-space: normal;
  163. box-shadow: 0px 2px 6px 0px rgba(31, 36, 41, 0.05);
  164. border-radius: 4px;
  165. }
  166. .ant-upload.ant-upload-drag p.ant-upload-text {
  167. font-size: 14px;
  168. color: #C3C7CB;
  169. }
  170. .ant-upload.ant-upload-drag p.ant-upload-hint {
  171. color: #0091FF;
  172. }
  173. }
  174. </style>