index.vue 13 KB

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