attr_select.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717
  1. <template>
  2. <div id="attr-select">
  3. <!--选中-->
  4. <div class="attr-select" v-if="type==='baseLine'">
  5. <span class="grid-title">外观</span>
  6. <div class="row">
  7. <div class="row-tit">线宽</div>
  8. <div class="grid-content">
  9. <a-input-number
  10. v-model="lineWidth"
  11. :min="1"
  12. :max="9"
  13. @change="changeLineWidth"
  14. style="width: 168px"
  15. />
  16. </div>
  17. <div class="color-choice">
  18. <swatches v-model="borderColor" popover-x="left" @close="changeBorderColor" />
  19. </div>
  20. </div>
  21. <div class="row">
  22. <div class="row-tit">线型</div>
  23. <a-select
  24. style="width: 208px"
  25. v-model="borderStyle"
  26. :default-value="borderLineOption[0].id"
  27. @change="changeBorder"
  28. >
  29. <a-select-option
  30. v-for="item in borderLineOption"
  31. :key="item.id"
  32. :label="item.src"
  33. :value="item.id"
  34. >
  35. <img :src="item.src" alt />
  36. </a-select-option>
  37. </a-select>
  38. </div>
  39. </div>
  40. <!--文字内容-->
  41. <div class="attr-select" v-if="type==='baseText'">
  42. <span class="grid-title">文字内容</span>
  43. <div class="grid-content">
  44. <a-textarea
  45. placeholder="请在此处输入文字!"
  46. v-model="textMsg"
  47. allow-clear
  48. @change="changeTextArea"
  49. :rows="4"
  50. />
  51. </div>
  52. <span class="grid-title">外观</span>
  53. <div class="row">
  54. <div class="row-tit">字号</div>
  55. <div class="grid-content">
  56. <a-input-number v-model="fontSize" :min="1" @change="changeFont" style="width: 168px" />
  57. </div>
  58. <div class="color-choice">
  59. <swatches v-model="fontColor" popover-x="left" @close="changeFontColor" />
  60. </div>
  61. </div>
  62. <div class="row">
  63. <div class="row-tit">背景色</div>
  64. <div class="color-choice">
  65. <swatches
  66. v-model="backColor"
  67. :swatches="swatches"
  68. popover-x="left"
  69. @close="changebackColor"
  70. />
  71. </div>
  72. </div>
  73. </div>
  74. <!--图片-->
  75. <div class="attr-select" v-if="type=='baseImage'">
  76. <span class="grid-title">文字内容</span>
  77. <section class="grid">
  78. <div class="grid-content">
  79. <a-upload-dragger
  80. name="file"
  81. :customRequest="customRequest"
  82. :showUploadList="false"
  83. action="https://jsonplaceholder.typicode.com/posts/"
  84. @change="changeImage"
  85. >
  86. <p class="icon-image">
  87. <a-icon type="cloud-upload" />
  88. </p>
  89. <p class="ant-upload-text">将图片拖动到这里替换</p>
  90. <p class="ant-upload-hint">本地上传</p>
  91. </a-upload-dragger>
  92. </div>
  93. </section>
  94. <span class="grid-title">外观</span>
  95. <div class="row">
  96. <div class="row-tit">边框</div>
  97. <div class="grid-content">
  98. <a-input-number
  99. v-model="lineWidth"
  100. :min="1"
  101. :max="9"
  102. @change="changeLineWidth"
  103. style="width: 168px"
  104. />
  105. </div>
  106. <div class="color-choice">
  107. <swatches v-model="color" popover-x="left" />
  108. </div>
  109. </div>
  110. </div>
  111. <!--针对“设备/位置/管线/分区”属性示例-->
  112. <div class="attr-select" v-show="type =='Image'|| type == 'Line' || type == 'Zone'">
  113. <div v-if="type =='Image'|| type == 'Line'">
  114. <div class="row">
  115. <div class="row-tit">名称显示</div>
  116. <a-button type="link" class="edit-option-btn" @click="OpenEditStatus">{{editStatus[type]}}</a-button>
  117. </div>
  118. <div class="row">
  119. <a-input v-model="lengedName" @change="changeLengedName" />
  120. </div>
  121. <div class="row">
  122. <div class="row-tit">字号</div>
  123. <div class="grid-content">
  124. <a-input-number v-model="fontSize" :min="1" @change="changeFont" style="width: 168px" />
  125. </div>
  126. <div class="color-choice">
  127. <swatches v-model="fontColor" @close="changeFontColor" popover-x="left" />
  128. </div>
  129. </div>
  130. <!-- 当为设备状态时 -->
  131. <div class="row" v-if="type =='Image'">
  132. <div class="row-tit">数量</div>
  133. <div class="grid-content">
  134. <a-input-number
  135. v-model="imageNum"
  136. :min="attrCards.length==imageNum?imageNum:1"
  137. @change="changeImageNum"
  138. style="width: 208px"
  139. />
  140. </div>
  141. </div>
  142. <!-- 当为管道状态时 -->
  143. <div class="row" v-if="type =='Line'">
  144. <div class="row-tit">线宽</div>
  145. <div class="grid-content">
  146. <a-input-number
  147. v-model="lineWidth"
  148. :min="1"
  149. :max="9"
  150. @change="changeLineWidth"
  151. style="width: 208px"
  152. />
  153. </div>
  154. </div>
  155. </div>
  156. <div v-if="type == 'Zone'">
  157. <div v-if="SubType=='FHFQ'">
  158. <!-- 防火分区 -->
  159. <div class="row-tit">颜色</div>
  160. <div class="row">
  161. <swatches @input="changefillColor" :swatches="swatchess" v-model="fillColor" inline></swatches>
  162. </div>
  163. <div class="row">
  164. <div class="row-tit">名称显示</div>
  165. <a-button
  166. type="link"
  167. class="edit-option-btn"
  168. @click="OpenEditStatus"
  169. >{{editStatus[type]}}</a-button>
  170. </div>
  171. <div class="row">
  172. <a-input v-model="lengedName" @change="changeLengedName" />
  173. </div>
  174. <div class="row">
  175. <div class="row-tit">字号</div>
  176. <div class="grid-content">
  177. <a-input-number
  178. v-model="fontSize"
  179. :min="1"
  180. @change="changeFont"
  181. style="width: 168px"
  182. />
  183. </div>
  184. <div class="color-choice">
  185. <swatches v-model="fontColor" @close="changeFontColor" popover-x="left" />
  186. </div>
  187. </div>
  188. </div>
  189. <div v-if="SubType=='SCPZ'">
  190. <!-- 石材铺装 -->
  191. <div class="row">
  192. <div class="row-tit">图例说明</div>
  193. <a-button type="link" class="edit-option-btn" @click="OpenEditStatus">编辑区域</a-button>
  194. </div>
  195. <div class="row">
  196. <a-textarea
  197. @change="changeitemExplain"
  198. v-model="itemExplain"
  199. :auto-size="{ minRows: 4, maxRows: 6 }"
  200. />
  201. </div>
  202. <div class="row">
  203. <div class="row-tit">描边</div>
  204. <div class="grid-content">
  205. <a-input-number
  206. v-model="lineWidth"
  207. :min="1"
  208. :max="9"
  209. @change="changeLineWidth"
  210. style="width: 168px"
  211. />
  212. </div>
  213. <div class="color-choice">
  214. <swatches v-model="borderColor" @close="changeBorderColor" popover-x="left" />
  215. </div>
  216. </div>
  217. <div class="row">
  218. <div class="row-tit">填充</div>
  219. <div class="color-choice">
  220. <swatches v-model="fillColor" @close="changefillColor" popover-x="left" />
  221. </div>
  222. </div>
  223. </div>
  224. <div v-if="!SubType">
  225. <!-- 普通分区 -->
  226. <div class="row">
  227. <div class="row-tit">显示名称</div>
  228. <a-button
  229. type="link"
  230. class="edit-option-btn"
  231. @click="OpenEditStatus"
  232. >{{editStatus[type]}}</a-button>
  233. </div>
  234. <div class="row">
  235. <a-input v-model="lengedName" @change="changeLengedName" />
  236. </div>
  237. <div class="row">
  238. <div class="row-tit">字号</div>
  239. <div class="grid-content">
  240. <a-input-number
  241. v-model="fontSize"
  242. :min="1"
  243. @change="changeFont"
  244. style="width: 168px"
  245. />
  246. </div>
  247. <div class="color-choice">
  248. <swatches v-model="fontColor" @close="changeFontColor" popover-x="left" />
  249. </div>
  250. </div>
  251. </div>
  252. </div>
  253. </div>
  254. <!--设备/工程信息化ID/工程信息化中的位置类型-->
  255. <div
  256. class="attr-select attr-select-bottom"
  257. v-if="type =='Zone' || type =='Image'||type == 'Line'"
  258. >
  259. <a-spin :spinning="spinning">
  260. <div class="row">
  261. <span class="edit-option-text">{{type =='Zone'?`工程信息化中的位置类型`:'工程信息化中的设备类型'}}</span>
  262. <a-button type="link" class="edit-option-btn" @click="handleEdit">选择编辑</a-button>
  263. </div>
  264. <div class="grid-content">
  265. <a-card
  266. class="attr-card"
  267. v-for="(item,index) in attrCards"
  268. :key="index"
  269. >{{item.sbjc ||item.wzjc}}</a-card>
  270. </div>
  271. </a-spin>
  272. </div>
  273. <!-- 快捷操作提示-->
  274. <div style="position: fixed;bottom: 0;width: 280px;" class="key-boards">
  275. <a-collapse :bordered="false" expand-icon-position="right">
  276. <template #expandIcon="props">
  277. <a-icon type="caret-up" :rotate="props.isActive ? 180 : 0" />
  278. </template>
  279. <a-collapse-panel key="1" :style="customStyle">
  280. <template slot="header">
  281. <div style="font-size: 12px;color: #8D9399;">
  282. <a-icon type="exclamation-circle" />
  283. <span style="margin-left: 5px;">键盘操作提示</span>
  284. </div>
  285. </template>
  286. <p
  287. v-for="item in keyboardOperation"
  288. :key="item.value"
  289. style="display: flex;margin-top: 13px;"
  290. >
  291. <span>{{item.value}}</span>
  292. <span class="key-board">{{item.keys}}</span>
  293. <span v-if="item.events" style="margin: 0 5px;">
  294. +
  295. <img style="width:13px;height:18px;" src="./../../assets/images/shubiao.png" alt />
  296. </span>
  297. <span>{{item.events}}</span>
  298. </p>
  299. </a-collapse-panel>
  300. </a-collapse>
  301. </div>
  302. <editDialog ref="dialog" :attrCards="attrCards" :sysNum="imageNum" :key="new Date().getTime()" />
  303. <!-- <editDialog ref="dialog" :typeEdit="2" :getmajorId="'1001'" :sysNum="5" />-->
  304. </div>
  305. </template>
  306. <script>
  307. import editDialog from "./edit-dialog";
  308. import Swatches from "vue-swatches";
  309. import bus from "@/bus";
  310. import "vue-swatches/dist/vue-swatches.css";
  311. import { SLineStyle } from "@saga-web/graph/lib";
  312. import {
  313. uploadImg,
  314. queryGlsmsLocation,
  315. queryGlsmsAsset
  316. } from "@/api/editer.js";
  317. import { getUrlMsg } from "@/components/urlMsg.js";
  318. export default {
  319. name: "attr_select",
  320. props: ["type", "focusItemList"],
  321. components: { editDialog, Swatches },
  322. data() {
  323. return {
  324. precisionList: [{ value: 10 }, { value: 20 }, { value: 30 }],
  325. precision: true,
  326. customStyle:
  327. "background: #fff;overflow: hidden; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);border:0",
  328. keyboardOperation: [
  329. { value: "拖动画布:", keys: "Space", events: "Click" },
  330. { value: "加选对象:", keys: "Ctrl", events: "Press" },
  331. { value: "确认操作:", keys: "Enter" },
  332. { value: "取消对象:", keys: "Enter" }
  333. ],
  334. numberValue: 3,
  335. fontSize: 12, //字体大小
  336. lineWidth: 0,
  337. textMsg: "", //
  338. color: "#1CA085",
  339. fontColor: "#1CA085", //文字颜色
  340. borderColor: "", // 边框颜色 直线,折线,多边形等
  341. backColor: "", //背景色 用于text文字
  342. borderStyle: "solid",
  343. borderLineOption: [
  344. {
  345. id: "solid",
  346. src: require("@/assets/images/1pxline.jpg")
  347. },
  348. {
  349. id: "dashed",
  350. src: require("@/assets/images/dashedLine.jpg")
  351. },
  352. {
  353. id: "dotted",
  354. src: require("@/assets/images/dotLine.jpg")
  355. }
  356. ],
  357. linepxOption: [
  358. {
  359. id: 1,
  360. src: require("@/assets/images/1pxline.jpg")
  361. },
  362. {
  363. id: 2,
  364. src: require("@/assets/images/2pxline.jpg")
  365. },
  366. {
  367. id: 3,
  368. src: require("@/assets/images/3pxline.jpg")
  369. }
  370. ],
  371. editStatus: {
  372. Image: "编辑设备",
  373. Line: "管道编辑",
  374. Zone: "编辑区域"
  375. },
  376. swatchess: ["#69C5FC", "#656EDF", "#58AF6F", "#2D8FAA"],
  377. swatches: [
  378. "#00000000",
  379. "#1FBC9C",
  380. "#1CA085",
  381. "#2ECC70",
  382. "#27AF60",
  383. "#3398DB",
  384. "#2980B9",
  385. "#A463BF",
  386. "#8E43AD",
  387. "#3D556E",
  388. "#222F3D"
  389. ],
  390. lengedName: "", // 图例名称
  391. imageNum: 1, //设备数量
  392. fillColor: "", //修改填充色 (主要针对防火风区以及石材铺装)
  393. SubType: "", //空间类型,区分石材铺装
  394. itemExplain: "", //图例说明 只针对石材铺装
  395. attrCards: [],
  396. spinning: false,
  397. getmajorId: ""
  398. };
  399. },
  400. methods: {
  401. onChange(e) {
  402. this.precision = e.target.checked === true ? false : true;
  403. },
  404. changeBorder(value) {
  405. bus.$emit("changeBorder", value);
  406. },
  407. changeNumber() {
  408. bus.$emit("changeFont", this.fontSize);
  409. },
  410. // 改变字体大小
  411. changeFont() {
  412. bus.$emit("changeFont", this.fontSize);
  413. },
  414. // 改变线宽
  415. changeLineWidth() {
  416. bus.$emit("changeLineWidth", this.lineWidth);
  417. },
  418. // 改变文案
  419. changeTextArea() {
  420. bus.$emit("changeText", this.textMsg);
  421. },
  422. // 改变线的颜色
  423. changeBorderColor() {
  424. if (this.borderColor) {
  425. bus.$emit("changeBorderColor", this.borderColor);
  426. }
  427. },
  428. // 改变字体颜色
  429. changeFontColor(color) {
  430. if (color) {
  431. bus.$emit("changeFontColor", color);
  432. }
  433. },
  434. changebackColor(color) {
  435. if (color) {
  436. bus.$emit("changebackColor", color);
  437. }
  438. },
  439. customRequest(info) {
  440. const formData = new FormData();
  441. formData.append("file", info.file);
  442. const postParams = formData;
  443. uploadImg({ postParams }).then(res => {
  444. if (res.Result == "success") {
  445. bus.$emit("upadataImageUrl", res.EntityList[0]);
  446. this.$message.success(
  447. `${info.file.name} file uploaded successfully.`
  448. );
  449. } else {
  450. this.$message.error(`${info.file.name} file upload failed.`);
  451. }
  452. });
  453. },
  454. //更改图例名称
  455. changeLengedName() {
  456. bus.$emit("changeLengedName", this.lengedName);
  457. },
  458. changeImage(info) {
  459. const status = info.file.status;
  460. console.log(status);
  461. if (status !== "uploading") {
  462. console.log(info.file, info.fileList);
  463. }
  464. if (status === "done") {
  465. this.$message.success(`${info.file.name} file uploaded successfully.`);
  466. } else if (status === "error") {
  467. this.$message.error(`${info.file.name} file upload failed.`);
  468. }
  469. },
  470. handleEdit() {
  471. this.$refs.dialog.showModal();
  472. },
  473. // 修改设备数量
  474. changeImageNum() {
  475. if (!this.imageNum) {
  476. this.imageNum = 1;
  477. }
  478. bus.$emit("changeImageNum", this.imageNum);
  479. },
  480. changefillColor() {
  481. if (this.fillColor) {
  482. bus.$emit("changefillColor", this.fillColor);
  483. }
  484. },
  485. //设置缩小item为编辑状态
  486. OpenEditStatus() {
  487. bus.$emit("OpenEditStatus");
  488. },
  489. // 编辑图例说明
  490. changeitemExplain() {
  491. bus.$emit("changeitemExplain", this.itemExplain);
  492. },
  493. // 更改工程信息化数据
  494. changeAttachObjectIds(arr) {
  495. bus.$emit("changeAttachObjectIds", arr);
  496. }
  497. },
  498. watch: {
  499. focusItemList: function(newval) {
  500. const Item = newval.itemList[0];
  501. this.getmajorId = Item.data.Properties.InfoSystemId;
  502. this.imageNum = 1; //切换item初始化
  503. if (Item.data && Item.data.SubType) {
  504. this.SubType = Item.data.SubType;
  505. } else {
  506. this.SubType = "";
  507. }
  508. if (newval.itemList.length == 1) {
  509. if (newval.itemType == "baseText") {
  510. this.textMsg = Item.text;
  511. this.fontSize = Item.font.size;
  512. this.fontColor = Item.color.value;
  513. this.backColor = Item.backgroundColor.value;
  514. } else if (newval.itemType == "baseLine") {
  515. this.lineWidth = Item.lineWidth;
  516. this.borderColor = Item.strokeColor.value;
  517. if (Item.lineStyle == SLineStyle.Solid) {
  518. this.borderStyle = "solid";
  519. } else if (Item.lineStyle == SLineStyle.Dashed) {
  520. this.borderStyle = "dashed";
  521. } else if (Item.lineStyle == SLineStyle.Dotted) {
  522. this.borderStyle = "dotted";
  523. }
  524. } else if (
  525. newval.itemType == "Zone" ||
  526. newval.itemType == "Line" ||
  527. newval.itemType == "Image"
  528. ) {
  529. this.lengedName = Item.data.Name;
  530. this.borderColor = Item.strokeColor ? Item.strokeColor.value : "";
  531. this.fillColor = Item.fillColor ? Item.fillColor.value : "";
  532. this.itemExplain = "";
  533. if (Item.data.Properties.ItemExplain) {
  534. this.itemExplain = Item.data.Properties.ItemExplain
  535. ? Item.data.Properties.ItemExplain
  536. : "";
  537. }
  538. if (newval.itemType == "Image") {
  539. this.imageNum = Item.num;
  540. this.color = Item.color.value;
  541. this.fontSize = Item.font.size;
  542. } else if (newval.itemType == "Line") {
  543. this.color = Item.color.value;
  544. this.fillColor = Item.fillColor.value;
  545. this.borderColor = Item.strokeColor.value;
  546. this.lineWidth = Item.lineWidth;
  547. }
  548. }
  549. }
  550. const locationList = [];
  551. const assetnumList = [];
  552. let params = {};
  553. this.attrCards = [];
  554. Item.data.AttachObjectIds.map(item => {
  555. if (item.type == "Zone") {
  556. locationList.push(item.id);
  557. } else if (item.type == "Image") {
  558. assetnumList.push(item.id);
  559. }
  560. });
  561. // if(newval.itemType == 'Zone'){
  562. this.spinning = true;
  563. if (locationList.length) {
  564. params = { locationList: locationList };
  565. } else {
  566. params = { locationList: [""] };
  567. }
  568. queryGlsmsLocation({ plazaId: getUrlMsg().projectId }, params).then(
  569. res => {
  570. this.spinning = false;
  571. if (res.data.result == "success") {
  572. console.log(res.data);
  573. if (res.data.data && res.data.data.length) {
  574. this.attrCards = this.attrCards.concat(res.data.data);
  575. }
  576. } else {
  577. this.$message.error("工程信息化中的位置信息获取失败");
  578. }
  579. }
  580. );
  581. // }else if(newval.itemType == 'Image'){
  582. this.spinning = true;
  583. if (assetnumList.length) {
  584. params = { assetnumList: assetnumList };
  585. } else {
  586. params = { assetnumList: [""] };
  587. }
  588. queryGlsmsAsset({ plazaId: getUrlMsg().projectId }, params).then(res => {
  589. this.spinning = false;
  590. if (res.data.result == "success") {
  591. console.log(res.data);
  592. if (res.data.data && res.data.data.length) {
  593. this.attrCards = this.attrCards.concat(res.data.data);
  594. }
  595. } else {
  596. this.$message.error("工程信息化中的设备信息获取失败");
  597. }
  598. });
  599. // }
  600. console.log(this.attrCards);
  601. }
  602. }
  603. };
  604. </script>
  605. <style scoped lang="less">
  606. /deep/ .ant-spin-nested-loading {
  607. height: 100% !important;
  608. .ant-spin-container {
  609. height: 100% !important;
  610. }
  611. }
  612. .attr-select {
  613. padding: 12px 16px;
  614. box-sizing: border-box;
  615. .grid-title {
  616. font-size: 12px;
  617. color: #8d9399;
  618. }
  619. .row {
  620. width: 100%;
  621. display: flex;
  622. justify-content: space-between;
  623. align-items: center;
  624. margin-top: 12px;
  625. .color-choice {
  626. & /deep/ .vue-swatches__trigger {
  627. width: 26px !important;
  628. height: 26px !important;
  629. border-radius: 0px !important;
  630. }
  631. }
  632. .row-tit {
  633. color: #8d9399;
  634. font-size: 14px;
  635. }
  636. }
  637. .grid {
  638. margin: 10px 15px;
  639. .grid-title {
  640. font-size: 12px;
  641. color: #8d9399;
  642. }
  643. }
  644. .grid-content {
  645. margin-top: 12px;
  646. position: relative;
  647. }
  648. .icon-image {
  649. font-size: 25px;
  650. }
  651. .edit-option-text {
  652. color: #8d9399;
  653. height: 32px;
  654. line-height: 32px;
  655. margin-top: -5px;
  656. }
  657. .edit-option-btn {
  658. float: right;
  659. margin-top: -5px;
  660. }
  661. .attr-card {
  662. width: 250px;
  663. margin-bottom: 10px;
  664. white-space: normal;
  665. box-shadow: 0px 2px 6px 0px rgba(31, 36, 41, 0.05);
  666. border-radius: 4px;
  667. }
  668. .ant-upload.ant-upload-drag p.ant-upload-text {
  669. font-size: 14px;
  670. color: #c3c7cb;
  671. }
  672. .ant-upload.ant-upload-drag p.ant-upload-hint {
  673. color: #0091ff;
  674. }
  675. }
  676. .key-boards {
  677. .key-board {
  678. width: 52px;
  679. height: 24px;
  680. border-radius: 3px;
  681. border: 1px solid rgba(195, 199, 203, 1);
  682. font-size: 14px;
  683. color: #646a73;
  684. text-align: center;
  685. }
  686. /deep/ .ant-collapse-content {
  687. border-top: 1px solid #eff0f1;
  688. }
  689. }
  690. #attr-select {
  691. width: 100%;
  692. height: 100%;
  693. .attr-select-bottom {
  694. height: 100%;
  695. width: 100%;
  696. position: absolute;
  697. overflow-y: auto;
  698. padding-bottom: 400px;
  699. }
  700. }
  701. </style>