index.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653
  1. <template>
  2. <div class='legend-library'>
  3. <!-- <div class='nav'>
  4. <img class='img-menu' src='@/assets/imgs/menu.png' alt />
  5. <el-divider direction='vertical'></el-divider>
  6. <img class='img-logo' src='@/assets/imgs/logo_tu.png' alt />
  7. <span class='nav-span1'>万达管理说明书</span>
  8. <span class='circular'></span>
  9. <Dropdown v-model='selVal' :data='dataSelect'>
  10. <span style=' font-size: 14px;color: #1f2329 ;'>{{selText}}</span>
  11. </Dropdown>
  12. </div>-->
  13. <div class='legend-library-top'>
  14. <span style='display:inline-block;font-size:16px'>图例库管理</span>
  15. <span class='library-btn'>
  16. <el-button size='small' @click='dumpRules'>图例绘制规则</el-button>
  17. <el-button size='small' type='primary' @click='add'>添加图例</el-button>
  18. </span>
  19. </div>
  20. <div class='legend-library-bottom'>
  21. <div class='select-box'>
  22. <Select
  23. width='180'
  24. tipPlace='top'
  25. caption='所属分类:'
  26. v-model='Type'
  27. :selectdata='typeOptions'
  28. :placeholder='"请选择"'
  29. @change='getTableList'
  30. :hideClear='true'
  31. ></Select>
  32. <span class='instructions'>
  33. <TreeSelect
  34. title='已选项'
  35. caption='说明书位置:'
  36. tipPlace='top'
  37. width='220'
  38. style='margin:0 0 0 12px'
  39. :returnParentNode='false'
  40. :isShowAllChoice='true'
  41. :choseArea='true'
  42. :lastStage='true'
  43. :data='positionSelect'
  44. @change='treeConfirmPosition'
  45. />
  46. </span>
  47. <span class='device-position'>
  48. <TreeSelect
  49. caption='专业/设备、位置类型:'
  50. tipPlace='top'
  51. width='280'
  52. style='margin:0 12px'
  53. :isShowAllChoice='true'
  54. :returnParentNode='true'
  55. :choseArea='true'
  56. :data='deviceList'
  57. :lastStage='true'
  58. @change='treeConfirmDevice'
  59. />
  60. </span>
  61. <!-- <TreeSelect
  62. caption='专业:'
  63. tipPlace='top'
  64. height='180'
  65. style='margin:0 12px'
  66. :returnParentNode='false'
  67. :isShowAllChoice='true'
  68. :choseArea='true'
  69. :data='majorList'
  70. @change='treeConfirmMajor'
  71. :hideClear='true'
  72. />-->
  73. <span class='visualization'>
  74. <TreeSelect
  75. caption='铺位可视化:'
  76. tipPlace='top'
  77. width='250'
  78. :returnParentNode='false'
  79. :isShowAllChoice='true'
  80. :choseArea='true'
  81. :data='typeVisualization'
  82. @change='treeConfirm'
  83. :lastStage='true'
  84. @focusChange='focusChange'
  85. />
  86. </span>
  87. <Select
  88. width='150'
  89. tipPlace='top'
  90. caption='状态:'
  91. v-model='state'
  92. :selectdata='stateSelect'
  93. @change='getTableList'
  94. :placeholder='"请选择"'
  95. style='margin:0 12px'
  96. :hideClear='true'
  97. ></Select>
  98. <el-input
  99. size='small'
  100. @change='getTableList'
  101. prefix-icon='el-icon-search'
  102. v-model='keyword'
  103. clearable
  104. style='width:180px;margin-right:12px;float:right;position: absolute;right:6px; top: 45px;'
  105. @clear='keyword = ""'
  106. ></el-input>
  107. </div>
  108. <el-table :data='tableData' v-loading='loading' :key='key' :border='true' style='width: 100%'>
  109. <el-table-column prop='Name' label='图例名称' width='180'>
  110. <template slot-scope='{row}'>{{row.Name }}</template>
  111. </el-table-column>
  112. <el-table-column prop='style' label='图例样式' width='150'>
  113. <template slot-scope='{row}'>
  114. <img :class='`${row.Type=="Zone"?"img1":"img"}`' :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
  115. </template>
  116. </el-table-column>
  117. <el-table-column prop='Unit' label='单位' width='120'>
  118. <template slot-scope='{row}'>{{row.Unit}}</template>
  119. </el-table-column>
  120. <el-table-column prop='position' label='对应广场说明书的位置' show-overflow-tooltip>
  121. <template slot-scope='{row}'>
  122. <span v-for='item in row.GraphCategorys ' :key='item.Name'>{{item.Name}}</span>
  123. </template>
  124. </el-table-column>
  125. <el-table-column label='对应工程信息化' align='center'>
  126. <el-table-column prop='type' label='位置/设备分类' show-overflow-tooltip>
  127. <template slot-scope='{row}'>
  128. <span v-for='item in row.InfoLocal ' :key='item.name'>{{item.name}}</span>
  129. </template>
  130. </el-table-column>
  131. <el-table-column prop='system' label='专业' show-overflow-tooltip width='120'>
  132. <template slot-scope='{row}'>
  133. <span v-for='(item,index) in row.InfoSystem ' :key='index'>{{item.Name}}</span>
  134. </template>
  135. </el-table-column>
  136. </el-table-column>
  137. <el-table-column prop='typeId' resizable label='铺位可视化typeid' width='140' show-overflow-tooltip>
  138. <template slot-scope='{row}'>
  139. <span v-for='(item,index) in row.InfoTypes ' :key='index'>{{item.Name}}</span>
  140. </template>
  141. </el-table-column>
  142. <el-table-column label='操作' width='100' v-if='state==1'>
  143. <template slot-scope='scope' v-if='state==1'>
  144. <el-button @click='modifyClick(scope.row)' type='text'>修改</el-button>
  145. <el-button @click='deleteClick(scope.row)' type='text'>作废</el-button>
  146. </template>
  147. </el-table-column>
  148. <el-table-column v-if='state==0' prop='DeleteTime' label='作废时间' width='180'>
  149. <template v-if='state==0' slot-scope='{row}'>{{row.DeleteTime}}</template>
  150. </el-table-column>
  151. </el-table>
  152. <div class='foot'>
  153. <el-pagination
  154. background
  155. layout='prev, pager, next'
  156. :total='total'
  157. :page-size='size'
  158. @prev-click='pageChanged'
  159. @next-click='pageChanged'
  160. @current-change='pageChanged'
  161. ></el-pagination>
  162. </div>
  163. </div>
  164. <add-legend ref='addLegend' @updateSuccess='updateSuccess' @addSuccess='addSuccess' @cancal='cancal'></add-legend>
  165. <Modal :show='modalStatusTip' title='确定要作废图例吗?' mode='tip' type='error' @close='modalStatusTip=false'>
  166. <template #content>作废后则不可更改</template>
  167. <template #handle>
  168. <Button @click='modalStatusTip=false' type='default'>取消</Button>
  169. <Button @click='modalConfirm' type='error'>作废</Button>
  170. </template>
  171. </Modal>
  172. </div>
  173. </template>
  174. <script>
  175. import addLegend from './addLegend'
  176. import transparency from './transparency.js'
  177. import Select from '@/components/Select/Select.vue'
  178. import {
  179. queryDeviceAndPOsition,
  180. graphElementSearch,
  181. getLegendTree,
  182. queryLegend,
  183. deleteLegend,
  184. queryTypeId,
  185. getVisualization,
  186. queryRelation
  187. } from '@/api/legendLibrary.js'
  188. function hexToRgba(hex) {
  189. let opacity = '',
  190. a = hex.slice(7, 9)
  191. transparency.forEach((i, index) => {
  192. if (i == a) {
  193. opacity = index / 100
  194. }
  195. })
  196. return (
  197. 'rgba(' +
  198. parseInt('0x' + hex.slice(1, 3)) +
  199. ',' +
  200. parseInt('0x' + hex.slice(3, 5)) +
  201. ',' +
  202. parseInt('0x' + hex.slice(5, 7)) +
  203. ',' +
  204. opacity +
  205. ')'
  206. )
  207. }
  208. export default {
  209. components: { addLegend, Select },
  210. data() {
  211. return {
  212. loading: true,
  213. deleteObject: {},
  214. modalStatusTip: false,
  215. tableData: [],
  216. key: 1,
  217. dataSelect2: [
  218. { id: 'test1', name: '选择项' },
  219. { id: 'test2', name: '单平米' },
  220. { id: 'test3', name: '下级分项' },
  221. { id: 'test4', name: '滑动平均滑动平均' }
  222. ],
  223. stateSelect: [
  224. { id: '1', name: '正常' },
  225. { id: '0', name: '已作废' }
  226. ],
  227. Type: 'all', //所属分类
  228. selText: '图例库管理',
  229. selVal: '0',
  230. dataSelect: [
  231. { id: '0', name: '图例库管理' },
  232. { id: '1', name: '图例绘制规则' }
  233. ],
  234. typeOptions: [
  235. {
  236. id: 'all',
  237. name: '全部'
  238. },
  239. {
  240. id: 'None',
  241. name: '非图例'
  242. },
  243. {
  244. id: 'Zone',
  245. name: '区域'
  246. },
  247. {
  248. id: 'Image',
  249. name: '图标'
  250. },
  251. {
  252. id: 'Line',
  253. name: '线条'
  254. }
  255. ],
  256. TypeId: '',
  257. typeIdSelect: [{ id: 'Zone', name: '铺位面' }],
  258. size: 10,
  259. total: 0,
  260. currentPage: 1,
  261. state: '1',
  262. position: [],
  263. positionSelect: [],
  264. keyword: undefined,
  265. typeVisualization: [],
  266. visualizationList: [], //已选铺位可视化
  267. // majorList: [], //专业
  268. deviceList: [],
  269. GraphCategoryIds: [], //说明书位置勾选集合
  270. InfoLocals: [], //工程信息化
  271. InfoSystems: [], //工程信息化专业/系统
  272. InfoTypeIds: [] //铺位可视化typeid
  273. }
  274. },
  275. watch: {
  276. selVal(n, o) {
  277. if (n === o) return
  278. this.selText = this.dataSelect.find(d => d.id === n).name
  279. console.log(n, o)
  280. if (n == 0) {
  281. this.$router.push({ path: 'legendLibrary' })
  282. }
  283. if (n == 1) {
  284. this.$router.push({ path: 'legendRules' })
  285. }
  286. }
  287. },
  288. methods: {
  289. //业下设备分类和位置分类树形结构
  290. initQueryDeviceAndPOsition() {
  291. let postParams = {}
  292. queryDeviceAndPOsition({ postParams }).then(res => {
  293. this.deviceList = res.data
  294. })
  295. },
  296. //说明书位置
  297. instruction() {
  298. let getParams = {}
  299. getLegendTree({ getParams }).then(res => {
  300. this.positionSelect = res.Content && res.Content.map(i => this.getTree(i))
  301. })
  302. },
  303. //监听取消 修改的时候取消会导致表格不刷新
  304. cancal(info) {
  305. console.log(info)
  306. this.key++
  307. this.getTableList()
  308. },
  309. dumpRules() {
  310. this.$router.push('/home/legendRules')
  311. },
  312. getTypeId() {
  313. let postParams = {}
  314. queryTypeId({ postParams }).then(res => {
  315. this.typeIdSelect = res.Content
  316. })
  317. },
  318. visualization() {
  319. getVisualization({}).then(res => {
  320. this.typeVisualization =
  321. res.Data &&
  322. res.Data.map(i => {
  323. return {
  324. id: i.Id,
  325. name: i.Name,
  326. children: i.Children
  327. ? i.Children.map(j => {
  328. return {
  329. id: j.Id,
  330. name: j.Id + '-' + j.Name
  331. }
  332. })
  333. : []
  334. }
  335. })
  336. })
  337. },
  338. getTree(data) {
  339. let child = data.Children || data.Category
  340. return {
  341. id: data.Id,
  342. name: data.Name,
  343. children: child ? child.map(i => this.getTree(i)) : []
  344. }
  345. },
  346. add() {
  347. this.$refs.addLegend.open('', '添加图例库')
  348. },
  349. modifyClick(row) {
  350. this.$refs.addLegend.open(row, '修改图例库')
  351. },
  352. modalConfirm() {
  353. let postParams = [
  354. {
  355. Id: this.deleteObject.Id
  356. }
  357. ]
  358. deleteLegend({ postParams })
  359. .then(res => {
  360. if (res.Result == 'success') {
  361. this.$message({
  362. type: 'success',
  363. message: '作废成功!'
  364. })
  365. this.modalStatusTip = false
  366. this.getTableList()
  367. }
  368. })
  369. .catch(() => {
  370. this.$message({
  371. type: 'info',
  372. message: '已取消删除'
  373. })
  374. })
  375. },
  376. deleteClick(row) {
  377. this.deleteObject = row
  378. this.modalStatusTip = true
  379. // this.$confirm('作废后则不可更改', '确定要作废图例吗?', {
  380. // confirmButtonText: '作废',
  381. // cancelButtonText: '取消',
  382. // type: 'warning',
  383. // center: true
  384. // })
  385. // .then(() => {
  386. // let postParams = [
  387. // {
  388. // Id: row.Id
  389. // }
  390. // ]
  391. // deleteLegend({ postParams }).then(res => {
  392. // if (res.Result == 'success') {
  393. // this.$message({
  394. // type: 'success',
  395. // message: '作废成功!'
  396. // })
  397. // this.getTableList()
  398. // }
  399. // })
  400. // })
  401. // .catch(() => {
  402. // this.$message({
  403. // type: 'info',
  404. // message: '已取消删除'
  405. // })
  406. // })
  407. },
  408. pageChanged(page, size) {
  409. this.currentPage = page
  410. this.getTableList()
  411. },
  412. getTableListPosition(val) {
  413. let postParams = val.map(({ id }) => id)
  414. let data = {}
  415. queryRelation({ data, postParams }).then(res => {
  416. this.tableData = res.data.Content
  417. this.loading = false
  418. this.total = res.Total
  419. })
  420. },
  421. transformDate(arr) {
  422. arr.map(({ GraphCategorys, InfoLocal, InfoSystems, InfoTypes }) => {
  423. if (GraphCategorys.length) {
  424. GraphCategorys.map(i => i)
  425. }
  426. if (InfoLocal.length) {
  427. GraphCategorys.map(i => {
  428. i.name
  429. })
  430. }
  431. if (InfoSystems.length) {
  432. GraphCategorys.map()
  433. }
  434. if (InfoTypes.length) {
  435. GraphCategorys.map()
  436. }
  437. })
  438. return arr
  439. },
  440. getTableList() {
  441. // if (this.GraphCategoryIds || this.InfoLocals || this.InfoSystems || this.keyword) {
  442. // this.currentPage = 1
  443. // }
  444. let postParams = {
  445. Deleted: this.state == 1 ? false : true,
  446. GraphCategoryIds: this.GraphCategoryIds.length ? this.GraphCategoryIds : undefined, //说明书位置
  447. InfoLocals: this.InfoLocals.length ? this.InfoLocals : undefined, //工程信息化位置与设备分类
  448. InfoSystems: this.InfoSystems.length ? this.InfoSystems : undefined, //工程信息化专业/系统
  449. InfoTypeIds: this.InfoTypeIds.length ? this.InfoTypeIds : undefined, //铺位可视化typeid
  450. Name: this.keyword,
  451. PageNumber: this.currentPage,
  452. PageSize: this.size,
  453. Type: this.Type == 'all' ? undefined : this.Type
  454. }
  455. graphElementSearch({ postParams }).then(res => {
  456. this.key++
  457. // this.tableData = res.Content
  458. this.total = res.Total
  459. this.tableData =
  460. res.Content &&
  461. res.Content.map(i => {
  462. if (i.FillColor.length == '9') {
  463. i.FillColor = hexToRgba(i.FillColor)
  464. }
  465. return i
  466. })
  467. this.loading = false
  468. })
  469. },
  470. updateSuccess() {
  471. this.getTableList()
  472. },
  473. addSuccess() {
  474. this.getTableList()
  475. },
  476. // 铺位可视化
  477. treeConfirm(id, info) {
  478. this.InfoTypeIds = id
  479. this.getTableList()
  480. },
  481. //专业
  482. // treeConfirmMajor(id, info) {
  483. // this.InfoSystems = id
  484. // this.getTableList()
  485. // },
  486. //位置/设备
  487. treeConfirmDevice(id, info) {
  488. this.InfoSystems = []
  489. this.InfoLocals = []
  490. if (info) {
  491. for (let i = 0; i < info.length; i++) {
  492. let type = info[i]
  493. if (type.name.includes('/')) {
  494. this.InfoLocals.push(type.id)
  495. } else {
  496. this.InfoSystems.push(type.id)
  497. }
  498. }
  499. } else {
  500. this.InfoSystems = []
  501. this.InfoLocals = []
  502. }
  503. this.getTableList()
  504. },
  505. //说明书位置
  506. treeConfirmPosition(id, info) {
  507. this.GraphCategoryIds = id
  508. this.getTableList()
  509. },
  510. focusChange(status) {
  511. // console.log('focusChange', status)
  512. }
  513. },
  514. mounted() {
  515. this.getTypeId()
  516. this.instruction()
  517. this.visualization()
  518. this.getTableList()
  519. this.initQueryDeviceAndPOsition()
  520. }
  521. }
  522. </script>
  523. <style lang="less" scoped>
  524. .legend-library {
  525. display: flex;
  526. flex-direction: column;
  527. height: 100%;
  528. .nav {
  529. height: 48px;
  530. line-height: 48px;
  531. width: 100%;
  532. background: #fff;
  533. margin-left: 17px;
  534. display: flex;
  535. align-items: center;
  536. .img-menu {
  537. margin-right: 9px;
  538. }
  539. .img-logo {
  540. margin: 0 9px;
  541. }
  542. .nav-span1 {
  543. height: 26px;
  544. font-size: 14px;
  545. font-family: MicrosoftYaHei;
  546. color: rgba(31, 35, 41, 1);
  547. line-height: 26px;
  548. }
  549. .circular {
  550. display: inline-block;
  551. width: 4px;
  552. height: 4px;
  553. background: rgba(195, 198, 203, 1);
  554. border-radius: 50%;
  555. margin: 0 8px 0px 8px;
  556. }
  557. }
  558. /deep/ .p-drop {
  559. height: 48px;
  560. }
  561. /deep/ .p-drop .p-drop-title .p-drop-triangle {
  562. margin-top: -5px;
  563. }
  564. .legend-library-top {
  565. height: 45px;
  566. background: rgba(247, 249, 250, 1);
  567. text-align: center;
  568. line-height: 48px;
  569. color: #1f2329;
  570. font-size: 14px;
  571. font-family: MicrosoftYaHei;
  572. color: rgba(31, 36, 41, 1);
  573. .library-btn {
  574. float: right;
  575. margin-right: 16px;
  576. }
  577. }
  578. .legend-library-bottom {
  579. flex: 1;
  580. background: #fff;
  581. padding: 0 16px;
  582. .select-box {
  583. height: 56px;
  584. line-height: 56px;
  585. min-width: 1344px;
  586. display: flex;
  587. align-items: center;
  588. }
  589. .img {
  590. width: 28px;
  591. height: 28px;
  592. }
  593. .img1 {
  594. width: 32px;
  595. height: 18px;
  596. }
  597. }
  598. .foot {
  599. height: 32px;
  600. display: flex;
  601. justify-content: flex-end;
  602. margin-top: 28px;
  603. }
  604. /deep/ .p-select-input-content {
  605. line-height: 32px;
  606. }
  607. .device-position {
  608. /deep/ .p-select-input-caption {
  609. display: block;
  610. width: 250px !important;
  611. max-width: 250px !important;
  612. }
  613. }
  614. .instructions {
  615. /deep/ .p-select-input-caption {
  616. display: block;
  617. width: 100px !important;
  618. max-width: 200px !important;
  619. }
  620. }
  621. .visualization {
  622. /deep/ .p-select-input-caption {
  623. display: block;
  624. width: 100px !important;
  625. max-width: 200px !important;
  626. }
  627. }
  628. }
  629. </style>
  630. <style lang="less">
  631. .legend-library {
  632. th {
  633. font-size: 12px;
  634. color: #646a73 !important;
  635. padding: 6px 0 !important;
  636. background: rgba(248, 249, 250, 1);
  637. }
  638. td {
  639. color: #1f2429 !important;
  640. padding: 6px 0 !important;
  641. }
  642. .ant-select {
  643. margin-right: 12px;
  644. }
  645. }
  646. .p-select-option-box {
  647. background: #fff;
  648. border: 1px solid #ccc;
  649. }
  650. </style>