index.vue 16 KB

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