index.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664
  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' :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='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'></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. deleteObject: {},
  267. modalStatusTip: false,
  268. tableData: [],
  269. key: 1,
  270. dataSelect2: [
  271. { id: 'test1', name: '选择项' },
  272. { id: 'test2', name: '单平米' },
  273. { id: 'test3', name: '下级分项' },
  274. { id: 'test4', name: '滑动平均滑动平均' }
  275. ],
  276. stateSelect: [
  277. { id: '1', name: '正常' },
  278. { id: '0', name: '已作废' }
  279. ],
  280. Type: 'all', //所属分类
  281. selText: '图例库管理',
  282. selVal: '0',
  283. dataSelect: [
  284. { id: '0', name: '图例库管理' },
  285. { id: '1', name: '图例绘制规则' }
  286. ],
  287. typeOptions: [
  288. {
  289. id: 'all',
  290. name: '全部'
  291. },
  292. {
  293. id: 'None',
  294. name: '非图例'
  295. },
  296. {
  297. id: 'Zone',
  298. name: '区域'
  299. },
  300. {
  301. id: 'Image',
  302. name: '图标'
  303. },
  304. {
  305. id: 'Line',
  306. name: '线条'
  307. }
  308. ],
  309. TypeId: '',
  310. typeIdSelect: [{ id: 'Zone', name: '铺位面' }],
  311. size: 10,
  312. total: 0,
  313. currentPage: 1,
  314. state: '1',
  315. position: [],
  316. positionSelect: [],
  317. keyword: undefined,
  318. typeVisualization: [],
  319. visualizationList: [], //已选铺位可视化
  320. // majorList: [], //专业
  321. deviceList: [],
  322. GraphCategoryIds: [], //说明书位置勾选集合
  323. InfoLocals: [], //工程信息化
  324. InfoSystems: [], //工程信息化专业/系统
  325. InfoTypeIds: [] //铺位可视化typeid
  326. }
  327. },
  328. watch: {
  329. selVal(n, o) {
  330. if (n === o) return
  331. this.selText = this.dataSelect.find(d => d.id === n).name
  332. console.log(n, o)
  333. if (n == 0) {
  334. this.$router.push({ path: 'legendLibrary' })
  335. }
  336. if (n == 1) {
  337. this.$router.push({ path: 'legendRules' })
  338. }
  339. }
  340. },
  341. methods: {
  342. //业下设备分类和位置分类树形结构
  343. initQueryDeviceAndPOsition() {
  344. let postParams = {}
  345. queryDeviceAndPOsition({ postParams }).then(res => {
  346. this.deviceList = res.data
  347. })
  348. },
  349. //说明书位置
  350. instruction() {
  351. let getParams = {}
  352. getLegendTree({ getParams }).then(res => {
  353. this.positionSelect = res.Content && res.Content.map(i => this.getTree(i))
  354. })
  355. },
  356. dumpRules() {
  357. this.$router.push('/home/legendRules')
  358. },
  359. getTypeId() {
  360. let postParams = {}
  361. queryTypeId({ postParams }).then(res => {
  362. this.typeIdSelect = res.Content
  363. })
  364. },
  365. visualization() {
  366. getVisualization({}).then(res => {
  367. this.typeVisualization =
  368. res.Data &&
  369. res.Data.map(i => {
  370. return {
  371. id: i.Id,
  372. name: i.Name,
  373. children: i.Children
  374. ? i.Children.map(j => {
  375. return {
  376. id: j.Id,
  377. name: j.Id + '-' + j.Name
  378. }
  379. })
  380. : []
  381. }
  382. })
  383. })
  384. },
  385. getTree(data) {
  386. let child = data.Children || data.Category
  387. return {
  388. id: data.Id,
  389. name: data.Name,
  390. children: child ? child.map(i => this.getTree(i)) : []
  391. }
  392. },
  393. add() {
  394. this.$refs.addLegend.open('', '添加图例库')
  395. },
  396. modifyClick(row) {
  397. this.$refs.addLegend.open(row, '修改图例库')
  398. },
  399. modalConfirm() {
  400. let postParams = [
  401. {
  402. Id: this.deleteObject.Id
  403. }
  404. ]
  405. deleteLegend({ postParams })
  406. .then(res => {
  407. if (res.Result == 'success') {
  408. this.$message({
  409. type: 'success',
  410. message: '作废成功!'
  411. })
  412. this.modalStatusTip = false
  413. this.getTableList()
  414. }
  415. })
  416. .catch(() => {
  417. this.$message({
  418. type: 'info',
  419. message: '已取消删除'
  420. })
  421. })
  422. },
  423. deleteClick(row) {
  424. this.deleteObject = row
  425. this.modalStatusTip = true
  426. // this.$confirm('作废后则不可更改', '确定要作废图例吗?', {
  427. // confirmButtonText: '作废',
  428. // cancelButtonText: '取消',
  429. // type: 'warning',
  430. // center: true
  431. // })
  432. // .then(() => {
  433. // let postParams = [
  434. // {
  435. // Id: row.Id
  436. // }
  437. // ]
  438. // deleteLegend({ postParams }).then(res => {
  439. // if (res.Result == 'success') {
  440. // this.$message({
  441. // type: 'success',
  442. // message: '作废成功!'
  443. // })
  444. // this.getTableList()
  445. // }
  446. // })
  447. // })
  448. // .catch(() => {
  449. // this.$message({
  450. // type: 'info',
  451. // message: '已取消删除'
  452. // })
  453. // })
  454. },
  455. pageChanged(page, size) {
  456. this.currentPage = page
  457. this.getTableList()
  458. },
  459. getTableListPosition(val) {
  460. let postParams = val.map(({ id }) => id)
  461. let data = {}
  462. queryRelation({ data, postParams }).then(res => {
  463. this.tableData = res.data.Content
  464. this.total = res.Total
  465. })
  466. },
  467. getTableList() {
  468. let postParams = {
  469. Deleted: this.state == 1 ? false : true,
  470. GraphCategoryIds: this.GraphCategoryIds.length ? this.GraphCategoryIds : undefined, //说明书位置
  471. InfoLocals: this.InfoLocals.length ? this.InfoLocals : undefined, //工程信息化位置与设备分类
  472. InfoSystems: this.InfoSystems.length ? this.InfoSystems : undefined, //工程信息化专业/系统
  473. InfoTypeIds: this.InfoTypeIds.length ? this.InfoTypeIds : undefined, //铺位可视化typeid
  474. Name: this.keyword,
  475. PageNumber: this.currentPage,
  476. PageSize: this.size,
  477. Type: this.Type == 'all' ? undefined : this.Type
  478. }
  479. graphElementSearch({ postParams }).then(res => {
  480. this.key++
  481. // this.tableData = res.Content
  482. this.total = res.Total
  483. this.tableData =
  484. res.Content &&
  485. res.Content.map(i => {
  486. if (i.FillColor.length == '9') {
  487. i.FillColor = hexToRgba(i.FillColor)
  488. }
  489. return i
  490. })
  491. console.log(this.tableData)
  492. })
  493. },
  494. updateSuccess() {
  495. this.getTableList()
  496. },
  497. addSuccess() {
  498. this.getTableList()
  499. },
  500. // 铺位可视化
  501. treeConfirm(id, info) {
  502. this.InfoTypeIds = id
  503. this.getTableList()
  504. },
  505. //专业
  506. // treeConfirmMajor(id, info) {
  507. // this.InfoSystems = id
  508. // this.getTableList()
  509. // },
  510. //位置/设备
  511. treeConfirmDevice(id, info) {
  512. this.InfoSystems = []
  513. this.InfoLocals = []
  514. if (info) {
  515. for (let i = 0; i < info.length; i++) {
  516. let type = info[i]
  517. if (type.name.includes('/')) {
  518. this.InfoLocals.push(type.id)
  519. } else {
  520. this.InfoSystems.push(type.id)
  521. }
  522. }
  523. } else {
  524. this.InfoSystems = []
  525. this.InfoLocals = []
  526. }
  527. this.getTableList()
  528. },
  529. //说明书位置
  530. treeConfirmPosition(id, info) {
  531. this.GraphCategoryIds = id
  532. this.getTableList()
  533. },
  534. focusChange(status) {
  535. // console.log('focusChange', status)
  536. }
  537. },
  538. mounted() {
  539. this.getTypeId()
  540. this.instruction()
  541. this.visualization()
  542. this.getTableList()
  543. this.initQueryDeviceAndPOsition()
  544. }
  545. }
  546. </script>
  547. <style lang="less" scoped>
  548. .legend-library {
  549. display: flex;
  550. flex-direction: column;
  551. height: 100%;
  552. .nav {
  553. height: 48px;
  554. line-height: 48px;
  555. width: 100%;
  556. background: #fff;
  557. margin-left: 17px;
  558. display: flex;
  559. align-items: center;
  560. .img-menu {
  561. margin-right: 9px;
  562. }
  563. .img-logo {
  564. margin: 0 9px;
  565. }
  566. .nav-span1 {
  567. height: 26px;
  568. font-size: 14px;
  569. font-family: MicrosoftYaHei;
  570. color: rgba(31, 35, 41, 1);
  571. line-height: 26px;
  572. }
  573. .circular {
  574. display: inline-block;
  575. width: 4px;
  576. height: 4px;
  577. background: rgba(195, 198, 203, 1);
  578. border-radius: 50%;
  579. margin: 0 8px 0px 8px;
  580. }
  581. }
  582. /deep/ .p-drop {
  583. height: 48px;
  584. }
  585. /deep/ .p-drop .p-drop-title .p-drop-triangle {
  586. margin-top: -5px;
  587. }
  588. .legend-library-top {
  589. height: 45px;
  590. background: rgba(247, 249, 250, 1);
  591. text-align: center;
  592. line-height: 48px;
  593. color: #1f2329;
  594. font-size: 14px;
  595. font-family: MicrosoftYaHei;
  596. color: rgba(31, 36, 41, 1);
  597. .library-btn {
  598. float: right;
  599. margin-right: 16px;
  600. }
  601. }
  602. .legend-library-bottom {
  603. flex: 1;
  604. background: #fff;
  605. padding: 0 16px;
  606. .select-box {
  607. height: 56px;
  608. line-height: 56px;
  609. min-width: 1344px;
  610. display: flex;
  611. align-items: center;
  612. }
  613. .img {
  614. width: 28px;
  615. height: 28px;
  616. }
  617. }
  618. .foot {
  619. height: 32px;
  620. display: flex;
  621. justify-content: flex-end;
  622. margin-top: 28px;
  623. }
  624. /deep/ .p-select-input-content {
  625. line-height: 32px;
  626. }
  627. .device-position {
  628. /deep/ .p-date-picker-caption {
  629. display: block;
  630. width: 200px !important;
  631. max-width: 200px !important;
  632. }
  633. }
  634. }
  635. </style>
  636. <style lang="less">
  637. .legend-library {
  638. th {
  639. font-size: 12px;
  640. color: #646a73 !important;
  641. padding: 6px 0 !important;
  642. background: rgba(248, 249, 250, 1);
  643. }
  644. td {
  645. color: #1f2429 !important;
  646. padding: 6px 0 !important;
  647. }
  648. .ant-select {
  649. margin-right: 12px;
  650. }
  651. }
  652. .p-select-option-box {
  653. background: #fff;
  654. border: 1px solid #ccc;
  655. }
  656. </style>