index.vue 18 KB

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