index.vue 15 KB

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