attr_select.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. <template>
  2. <div>
  3. <!--选中-->
  4. <div class="attr-select" v-if="type==='line'">
  5. <section class="grid">
  6. <section class="grid">
  7. 外观
  8. <div class="grid-content">
  9. 线宽
  10. <a-input-number
  11. v-model="lineWidth"
  12. :min="1"
  13. @change="changeLineWidth"
  14. style="width: 168px"
  15. />
  16. </div>
  17. </section>
  18. </section>
  19. </div>
  20. <!--文字内容-->
  21. <div class="attr-select" v-if="type==='text'">
  22. <section class="grid">
  23. 文字内容
  24. <div class="grid-content">
  25. <a-textarea
  26. placeholder="textarea with clear icon"
  27. v-model="textMsg"
  28. allow-clear
  29. @change="changeTextArea"
  30. :rows="4"
  31. />
  32. </div>
  33. </section>
  34. <div class="attr-select" v-if="type==='text'">
  35. <section class="grid">
  36. 外观
  37. <div class="grid-content">
  38. 字号
  39. <a-input-number v-model="fontSize" :min="1" @change="changeFont" style="width: 168px" />
  40. </div>
  41. </section>
  42. </div>
  43. </div>
  44. <!--图片-->
  45. <div class="attr-select" v-if="type==='images'">
  46. <section class="grid">
  47. 图片
  48. <div class="grid-content">
  49. <a-upload-dragger
  50. name="file"
  51. :multiple="true"
  52. action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  53. @change="changeImage"
  54. >
  55. <p class="icon-image">
  56. <a-icon type="cloud-upload" />
  57. </p>
  58. <p class="ant-upload-text">将图片拖动到这里替换</p>
  59. <p class="ant-upload-hint">本地上传</p>
  60. </a-upload-dragger>
  61. </div>
  62. </section>
  63. </div>
  64. <!--针对“设备/位置/管线/分区”属性示例-->
  65. <div class="attr-select">
  66. <section class="grid">
  67. <span>名称显示</span>
  68. <!-- v-if -> 编辑设备/区域/管道 -->
  69. <a-button type="link" class="edit-option-btn">{{`编辑设备`}}</a-button>
  70. <div class="grid-content">
  71. <a-input />
  72. </div>
  73. <div class="grid-content">
  74. 字号
  75. <a-input-number
  76. v-model="numberValue"
  77. :min="1"
  78. @change="changeNumber"
  79. style="width: 168px"
  80. />
  81. </div>
  82. <div class="grid-content" v-if="type ==='equipment'">
  83. 数量
  84. <a-input-number
  85. v-model="numberValue"
  86. :min="1"
  87. @change="changeNumber"
  88. style="width: 218px"
  89. />
  90. </div>
  91. <div class="grid-content" v-if="type ==='pipeline'">
  92. 线宽
  93. <a-input-number
  94. v-model="numberValue"
  95. :min="1"
  96. @change="changeNumber"
  97. style="width: 218px"
  98. />
  99. </div>
  100. </section>
  101. </div>
  102. <!--设备/工程信息化ID/工程信息化中的位置类型-->
  103. <div class="attr-select">
  104. <section class="grid">
  105. <!-- v-if -> 设备/工程信息化ID/工程信息化中的位置类型 -->
  106. <span>{{`设备`}}</span>
  107. <a-button type="link" class="edit-option-btn" @click="handleEdit">选择编辑</a-button>
  108. <div class="grid-content">
  109. <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD4</a-card>
  110. <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD</a-card>
  111. </div>
  112. </section>
  113. </div>
  114. <!-- 快捷操作提示-->
  115. <div style="position: fixed;bottom: 0;width: 280px;">
  116. <a-collapse :bordered="false" expand-icon-position="right">
  117. <template #expandIcon="props">
  118. <a-icon type="caret-up" :rotate="props.isActive ? 180 : 0" />
  119. </template>
  120. <a-collapse-panel key="1" header="键盘操作提示" :style="customStyle">
  121. <p v-for="item in keyboardOperation" :key="item.value">{{item.value}}</p>
  122. </a-collapse-panel>
  123. </a-collapse>
  124. </div>
  125. <editDialog ref="dialog" />
  126. </div>
  127. </template>
  128. <script>
  129. import editDialog from "./edit-dialog";
  130. import bus from "@/bus";
  131. export default {
  132. name: "attr_select",
  133. props: ["type", "focusItemList"],
  134. components: { editDialog },
  135. data() {
  136. return {
  137. precisionList: [{ value: 10 }, { value: 20 }, { value: 30 }],
  138. precision: true,
  139. customStyle:
  140. "background: #fff;overflow: hidden; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);border:0",
  141. keyboardOperation: [
  142. { value: "拖动画布:" },
  143. { value: "加选对象:" },
  144. { value: "确认操作:" },
  145. { value: "取消对象:" }
  146. ],
  147. numberValue: 3,
  148. fontSize: 12, //字体大小
  149. lineWidth: 0,
  150. color: "", //字体颜色
  151. textMsg: "" //
  152. };
  153. },
  154. methods: {
  155. onChange(e) {
  156. this.precision = e.target.checked === true ? false : true;
  157. },
  158. handleChange(value) {
  159. console.log(`selected ${value}`);
  160. },
  161. changeNumber() {
  162. bus.$emit("changeFont", this.fontSize);
  163. },
  164. // 改变字体大小
  165. changeFont() {
  166. bus.$emit("changeFont", this.fontSize);
  167. },
  168. // 改变线宽
  169. changeLineWidth() {
  170. bus.$emit("changeLineWidth", this.lineWidth);
  171. },
  172. // 改变文案
  173. changeTextArea() {
  174. bus.$emit("changeText", this.textMsg);
  175. },
  176. changeImage(info) {
  177. const status = info.file.status;
  178. if (status !== "uploading") {
  179. console.log(info.file, info.fileList);
  180. }
  181. if (status === "done") {
  182. this.$message.success(`${info.file.name} file uploaded successfully.`);
  183. } else if (status === "error") {
  184. this.$message.error(`${info.file.name} file upload failed.`);
  185. }
  186. },
  187. handleEdit() {
  188. this.$refs.dialog.showModal();
  189. }
  190. },
  191. watch: {
  192. focusItemList: function(newval) {
  193. const Item = newval.itemList[0];
  194. if (newval.itemList.length == 1) {
  195. if (newval.itemType == "text") {
  196. this.textMsg = Item.text;
  197. this.fontSize = Item.font.size;
  198. } else if (newval.itemType == "line") {
  199. console.log('line',Item.lineWidth)
  200. this.lineWidth = Item.lineWidth;
  201. }
  202. }
  203. }
  204. }
  205. };
  206. </script>
  207. <style scoped lang="less">
  208. .attr-select {
  209. border-top: 1px solid #c3c7cb;
  210. margin-top: 30px;
  211. .grid {
  212. margin: 10px 15px;
  213. }
  214. .grid-content {
  215. margin-top: 10px;
  216. }
  217. .icon-image {
  218. font-size: 25px;
  219. }
  220. .edit-option-btn {
  221. float: right;
  222. margin-top: -5px;
  223. }
  224. .attr-card {
  225. width: 250px;
  226. margin-bottom: 10px;
  227. white-space: normal;
  228. box-shadow: 0px 2px 6px 0px rgba(31, 36, 41, 0.05);
  229. border-radius: 4px;
  230. }
  231. .ant-upload.ant-upload-drag p.ant-upload-text {
  232. font-size: 14px;
  233. color: #c3c7cb;
  234. }
  235. .ant-upload.ant-upload-drag p.ant-upload-hint {
  236. color: #0091ff;
  237. }
  238. }
  239. </style>