index.vue 15 KB

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