index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505
  1. <template>
  2. <div class="adm-device">
  3. <statistics :statistics-msg="statisticsMsg"/>
  4. <div class="operation">
  5. <el-cascader :options="list" clearable v-model="deviceType" :props="optionProps" @change="changeLinshi"
  6. class="adm-select"></el-cascader>
  7. <admSearch @SearchValue="SearchValue"/>
  8. <el-button type="default" @click="addDevice" class="adm-btn">添加设备</el-button>
  9. </div>
  10. <div class="hr"></div>
  11. <div class="content">
  12. <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
  13. <el-tab-pane v-for="(item,index) in paneMsg" :key="index" :label="item" :name="index.toString()"/>
  14. </el-tabs>
  15. <div class="table" v-loading="loading">
  16. <!-- <template v-if="deviceType">-->
  17. <template v-if="deviceType.length > 0">
  18. <admMultiTable :currentHeader="currentHeader" :tableData="tableData" :headersStage="headersStage"/>
  19. <Pagination v-if="tableData.length > 0" :paginationList="paginationList"
  20. @handleCurrentChange="handleCurrentChange"
  21. @handleSizeChange="handleSizeChange"/>
  22. </template>
  23. <div v-else class="void align">
  24. <svg-icon name="void" :width="String(120)" :height="String(123)"/>
  25. <p class="void-title">暂无内容</p>
  26. <p class="void-tips">可点击左上角选择设备类型</p>
  27. </div>
  28. </div>
  29. </div>
  30. <!-- 添加/编辑 设备-->
  31. <el-dialog
  32. :title="deviceMsg"
  33. :visible.sync="dialogVisible"
  34. @close="close"
  35. >
  36. <template v-if="next">
  37. <div class="align" style="height: 400px">
  38. <span class="text ">设备类别</span>
  39. <el-cascader :options="list" clearable v-model="deviceVal" @change="changeLinshi"
  40. :props="optionProps"
  41. class="adm-select"></el-cascader>
  42. </div>
  43. <el-button type="primary" class="fr" @click="handleNext">下一步</el-button>
  44. </template>
  45. <template v-else-if="displayLocation && deviceVal">
  46. <el-button type="primary" class="fr ml-10">保存</el-button>
  47. <el-button type="default" class="fr ml-10">取消</el-button>
  48. <el-button type="default" class="fr ml-10">重置</el-button>
  49. </template>
  50. <template v-else>
  51. <dataForm :dataFormList="dataFormList"/>
  52. <el-button type="primary" class="fr ml-10">确定</el-button>
  53. <el-button type="default" class="fr" @click="handlePosition">维护位置</el-button>
  54. </template>
  55. </el-dialog>
  56. </div>
  57. </template>
  58. <script lang="ts">
  59. import { Component, Vue } from "vue-property-decorator";
  60. import { AdmMultiTable, AdmSearch, dataForm, Pagination, Statistics } from '../components/index'
  61. import { allDevice, BeatchQueryParam, dictInfo } from "@/api/equipComponent";
  62. import { queryCount, queryEquip } from "@/api/datacenter";
  63. import { UserModule } from "@/store/modules/user";
  64. import tools from "@/utils/maintain"
  65. @Component({
  66. name: 'adm-device',
  67. components: { Statistics, AdmSearch, AdmMultiTable, Pagination, dataForm }
  68. })
  69. export default class extends Vue {
  70. optionProps = {
  71. value: 'code',
  72. label: 'name',
  73. children: 'children'
  74. }
  75. // loading
  76. loading = false
  77. // 统计信息对象
  78. private statisticsMsg = {
  79. title: '全部设备',
  80. total: 0
  81. }
  82. // 设备类值
  83. deviceType = ''
  84. // 弹窗设备类值
  85. deviceVal = ''
  86. // 维护位置
  87. displayLocation = false
  88. // 表头信息集合
  89. headerInformation = {}
  90. // 表头阶段信息结合
  91. headersStage = {}
  92. // 当前阶段表头信息点集合
  93. all = []
  94. // 搜索内容
  95. inputSearch = ''
  96. // 下拉数据
  97. list = []
  98. // 弹窗开关
  99. private dialogVisible = false
  100. // tabs数据
  101. private paneMsg = ['设计阶段维护', '施工阶段维护', '运维阶段维护']
  102. // 当前tabs值
  103. private activeName = ""
  104. // 分页
  105. private paginationList = {
  106. page: 1,
  107. size: 50,
  108. sizes: [10, 30, 50, 100, 150, 200],
  109. total: 0
  110. }
  111. // 下一步
  112. private next = true
  113. // 弹窗 title
  114. private deviceMsg = '添加设备'
  115. // 默认当前阶段
  116. private currentHeader = this.paneMsg[0]
  117. // 主体数据
  118. private tableData = []
  119. codeToDataSource = {}
  120. // 项目id
  121. private get projectId(): string {
  122. return UserModule.projectId
  123. }
  124. created() {
  125. this.deviceList();
  126. this.dataCount()
  127. }
  128. //查询统计数量
  129. dataCount() {
  130. queryCount({}).then(res => {
  131. this.statisticsMsg.total = res.count
  132. })
  133. }
  134. // 设备类数据
  135. deviceList() {
  136. allDevice({}).then(res => {
  137. this.list = res.content
  138. console.log(res)
  139. })
  140. }
  141. // todo 临时假数据函数
  142. private changeLinshi(val) {
  143. console.log(this.deviceType, this.deviceType[1])
  144. if (this.deviceType[1]) {
  145. this.loading = true
  146. let param = {
  147. category: this.deviceType[1]
  148. }
  149. let param2 = {
  150. filters: this.deviceType[1] ? `classCode='${ this.deviceType[1] }'` : undefined,
  151. pageNumber: this.paginationList.page,
  152. pageSize: this.paginationList.size,
  153. orders: "createTime desc, id asc",
  154. projectId: this.projectId
  155. }
  156. if (this.inputSearch != '') {
  157. param2.filters += `;codeName contain '${ this.inputSearch }' or systemCategory contain '${ this.inputSearch }' or bimTypeId contain '${ this.inputSearch }' or localId contain '${ this.inputSearch }'`
  158. }
  159. let promise = new Promise(resolve => {
  160. dictInfo(param).then(res => {
  161. resolve(res)
  162. })
  163. })
  164. let promise2 = new Promise(resolve => {
  165. queryEquip(param2).then(res => {
  166. resolve(res)
  167. })
  168. })
  169. Promise.all([promise, promise2]).then(res => {
  170. this.loading = false
  171. // 类型下信息点,默认设计阶段
  172. this.headerInformation = res[0] // 获取表头
  173. this.tableData = res[1].content // 主体数据
  174. this.headerStage()
  175. this.paginationList.total = res[1].total
  176. })
  177. } else {
  178. this.headerInformation = {}
  179. }
  180. }
  181. private handleFilter(val) {
  182. console.log(this.deviceType)
  183. if (this.deviceType) {
  184. this.loading = true
  185. let param = {
  186. category: this.deviceType
  187. }
  188. let param2 = {
  189. filters: this.deviceType ? `classCode='${ this.deviceType }'` : undefined,
  190. pageNumber: this.paginationList.page,
  191. pageSize: this.paginationList.size,
  192. orders: "createTime desc, id asc",
  193. projectId: this.projectId
  194. }
  195. if (this.inputSearch != '') {
  196. param2.filters += `;codeName contain '${ this.inputSearch }' or systemCategory contain '${ this.inputSearch }' or bimTypeId contain '${ this.inputSearch }' or localId contain '${ this.inputSearch }'`
  197. }
  198. let promise = new Promise(resolve => {
  199. dictInfo(param).then(res => {
  200. resolve(res)
  201. })
  202. })
  203. let promise2 = new Promise(resolve => {
  204. queryEquip(param2).then(res => {
  205. resolve(res)
  206. })
  207. })
  208. Promise.all([promise, promise2]).then(res => {
  209. this.loading = false
  210. // 类型下信息点,默认设计阶段
  211. this.headerInformation = res[0] // 获取表头
  212. this.tableData = res[1].content // 主体数据
  213. this.headerStage()
  214. this.paginationList.total = res[1].total
  215. })
  216. } else {
  217. this.headerInformation = {}
  218. }
  219. }
  220. headerStage() {
  221. let header = []
  222. if (Object.keys(this.headerInformation).length > 0) {
  223. this.headerInformation.dictStages.forEach(item => {
  224. if (this.currentHeader == item.name) {
  225. item.infos && item.infos.forEach(val => header.push(val))
  226. // item.infos && item.infos.forEach(val => {
  227. // val.name = val.unit ? `${ val.name }(${ val.unit })` : val.name
  228. // header.push(val)
  229. // })
  230. }
  231. })
  232. }
  233. this.headersStage = {
  234. basicInfos: {
  235. name: '基础信息台账',
  236. data: this.headerInformation.basicInfos
  237. },
  238. dictStages: {
  239. name: this.currentHeader,
  240. data: header
  241. }
  242. }
  243. // 信息点集合
  244. this.all = [...this.headerInformation.basicInfos, ...header]
  245. this.codeToDataSource = {}
  246. this.all.forEach(item => {
  247. if (item.dataSource) {
  248. try {
  249. this.codeToDataSource[item.code] = {}
  250. item.dataSource.forEach(dic => {
  251. this.codeToDataSource[item.code][dic.code] = dic.name;
  252. })
  253. } catch (e) {
  254. console.log(e);
  255. }
  256. }
  257. });
  258. this.getBatch(this.tableData)
  259. }
  260. // 查询动态数据
  261. getBatch(data) {
  262. let param = {
  263. groupCode: 'WD',
  264. appId: 'datacenter',
  265. projectId: this.projectId,
  266. data: []
  267. }
  268. this.all.forEach(head => {
  269. if (head.category != 'STATIC') {
  270. data.forEach(item => {
  271. let cur = tools.dataForKey(item, head.path)
  272. if (cur) {
  273. param.data.push({
  274. objectId: item.id,
  275. infoCode: head.code
  276. })
  277. }
  278. })
  279. }
  280. })
  281. if (param.data.length > 0) {
  282. BeatchQueryParam(param).then(res => {
  283. this.tableData = data.map(item => {
  284. res.data.map(child => {
  285. if (item.id == child.objectId) {
  286. if (!!child.data || child.data == 0) {
  287. this.all.map(head => {
  288. if (head.code == child.infoCode) {
  289. let contentVal = child.data
  290. if (this.codeToDataSource[child.infoCode]) {
  291. contentVal = this.codeToDataSource[child.infoCode][child.data]
  292. }
  293. tools.setDataForKey(item, head.path, contentVal);
  294. }
  295. })
  296. } else {
  297. this.all.map(head => {
  298. if (head.code == child.infoCode) {
  299. tools.setDataForKey(
  300. item,
  301. head.path,
  302. child.error
  303. );
  304. }
  305. });
  306. }
  307. }
  308. })
  309. return item
  310. })
  311. })
  312. }
  313. }
  314. // 维护阶段 tabs
  315. async handleClick(val: any) {
  316. this.currentHeader = val.label
  317. await this.headerStage()
  318. }
  319. //设备类筛选
  320. selectValue(val: string) {
  321. console.log(val, 3)
  322. }
  323. // 搜索
  324. SearchValue(val: string) {
  325. this.inputSearch = val
  326. // this.handleFilter(this.deviceType)
  327. this.changeLinshi(this.deviceType[1])
  328. }
  329. // 当前分页
  330. handleCurrentChange(val: number) {
  331. console.log(val)
  332. this.paginationList.page = val
  333. // this.handleFilter(this.deviceType)
  334. this.changeLinshi(this.deviceType[1])
  335. }
  336. handleSizeChange(val: number) {
  337. this.paginationList.size = val
  338. // this.handleFilter(this.deviceType)
  339. this.changeLinshi(this.deviceType[1])
  340. }
  341. // 添加设备
  342. addDevice() {
  343. this.dialogVisible = true
  344. }
  345. //下一步事件
  346. handleNext() {
  347. if (this.deviceVal) {
  348. this.next = false
  349. }
  350. }
  351. // 维护位置
  352. handlePosition() {
  353. this.displayLocation = true
  354. }
  355. // close
  356. close() {
  357. this.next = true
  358. this.displayLocation = false
  359. }
  360. }
  361. </script>
  362. <style lang="scss" scoped>
  363. $margin: 12px;
  364. $border: 1px solid #E1E7EA;
  365. .align {
  366. display: flex;
  367. align-items: center;
  368. justify-content: center;
  369. flex-direction: column;
  370. flex-wrap: wrap;
  371. }
  372. .adm-device {
  373. background: #fff;
  374. padding: 12px;
  375. height: 100%;
  376. .operation {
  377. margin: 12px 0;
  378. .adm-select {
  379. margin-right: $margin;
  380. }
  381. .adm-btn {
  382. float: right;
  383. }
  384. }
  385. .hr {
  386. background: #E1E7EA;
  387. color: #E1E7EA;
  388. width: 100%;
  389. height: 1px;
  390. margin-bottom: 16px;
  391. }
  392. .content {
  393. position: relative;
  394. height: calc(100% - 140px);
  395. .table {
  396. border-left: $border;
  397. border-right: $border;
  398. border-bottom: $border;
  399. height: calc(100% - 41px);
  400. padding: 12px;
  401. padding-bottom: 50px;
  402. .void {
  403. margin-top: 200px;
  404. }
  405. .void-title {
  406. color: #333333;
  407. line-height: 21px;
  408. font-size: 16px;
  409. }
  410. .void-tips {
  411. color: #9CA1A9;
  412. line-height: 22px;
  413. font-size: 14px;
  414. }
  415. }
  416. .adm-multi-table {
  417. }
  418. }
  419. .adm-pagination {
  420. right: 10px;
  421. position: absolute;
  422. bottom: 10px;
  423. }
  424. }
  425. </style>
  426. <style>
  427. .data-form {
  428. height: 430px;
  429. }
  430. .text {
  431. color: #000000;
  432. margin-bottom: 10px;
  433. }
  434. .el-tabs__header {
  435. margin: 0;
  436. }
  437. .el-dialog__header {
  438. border-bottom: 1px solid #D8D8D8;
  439. }
  440. .fl {
  441. float: left;
  442. }
  443. .fr {
  444. float: right;
  445. }
  446. .el-dialog__body {
  447. overflow: hidden;
  448. }
  449. .ml-10 {
  450. margin-left: 10px;
  451. }
  452. </style>