index.vue 22 KB

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