attr_select.vue 25 KB

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