attr_select.vue 30 KB

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