index.vue 15 KB

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