index.vue 15 KB

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