index.vue 18 KB

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