bundleSpyMonitorTable.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template>
  2. <div class="dustMonitor">
  3. <div class="search-area">
  4. <a-row>
  5. <a-col :span="12">
  6. <div class="area-item">
  7. <div class="item-text">录入时间:</div>
  8. <span style="width: 240px; color: #fff">{{ createTime }}</span>
  9. </div>
  10. </a-col>
  11. <a-col :span="12">
  12. <div class="area-item">
  13. <div class="item-text">录入人员:</div>
  14. <span style="width: 240px; color: #fff">{{ createBy }}</span>
  15. </div>
  16. </a-col>
  17. </a-row>
  18. </div>
  19. <div class="content-area"> <a-table :columns="bundleSpycolumns" :data-source="tableData" size="small" class="tableW" /></div>
  20. </div>
  21. </template>
  22. <script setup lang="ts">
  23. import { ref, onMounted, reactive } from 'vue';
  24. import { bundleSpycolumns } from './comment.data';
  25. import { getInfoList, getAllFileList } from './comment.api';
  26. import 'ant-design-vue/dist/antd.css'; // 引入样式
  27. let selectList = ref<any[]>([]);
  28. let formSearch = reactive({
  29. pageNum: 1,
  30. pageSize: 1000,
  31. fileId: '',
  32. fileName: '',
  33. });
  34. const latentCount = ref(0); // 缓慢氧化阶段(潜伏期)
  35. const selfHeatingCount = ref(0); // 加速氧化阶段(自热期)
  36. const combustionCount = ref(0); // 剧烈氧化阶段(燃烧期)
  37. const latentPercent = ref(0); // 缓慢氧化阶段(潜伏期)
  38. const selfHeatingPercent = ref(0); // 加速氧化阶段(自热期)
  39. const combustionPercent = ref(0); // 剧烈氧化阶段(燃烧期)
  40. let createBy = ref<any[]>([]);
  41. let createTime = ref<any[]>([]);
  42. let tableData = ref<any[]>([]);
  43. let selectedFileId = ref<string | null>(null);
  44. //获取色谱仪报表
  45. async function getTableList(params: any) {
  46. let res = await getInfoList({ type: 'bundleSpy', ...params });
  47. const content = res.content;
  48. let contentArr = JSON.parse(content);
  49. createBy.value = res.createBy;
  50. createTime.value = res.createTime;
  51. latentCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '缓慢氧化阶段(潜伏期)').length;
  52. selfHeatingCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '加速氧化阶段(自热期)').length;
  53. combustionCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '剧烈氧化阶段(燃烧期)').length;
  54. const total = contentArr.length;
  55. latentPercent.value = (latentCount.value / total) * 100;
  56. selfHeatingPercent.value = (selfHeatingCount.value / total) * 100;
  57. combustionPercent.value = (combustionCount.value / total) * 100;
  58. tableData.value = contentArr;
  59. }
  60. //获取所有文件列表
  61. async function getAllFile() {
  62. let res = await getAllFileList({ type: 'bundleSpy' });
  63. selectList.value = res.records.map((item: any) => ({
  64. fileId: item.fileId,
  65. fileName: item.fileName,
  66. }));
  67. if (selectList.value.length > 0) {
  68. formSearch.fileId = selectList.value[0].fileId;
  69. getSearch();
  70. }
  71. }
  72. //查询
  73. function getSearch() {
  74. const selectedFile = selectList.value.find((item) => item.fileId === formSearch.fileId);
  75. const params = {
  76. fileId: formSearch.fileId,
  77. fileName: selectedFile ? selectedFile.fileName : '',
  78. };
  79. getTableList(params);
  80. }
  81. onMounted(() => {
  82. getTableList({ type: 'bundleSpy' });
  83. getAllFile().then(() => {
  84. if (selectList.value.length > 0) {
  85. formSearch.fileId = selectList.value[0].fileId;
  86. selectedFileId.value = selectList.value[0].fileId;
  87. getSearch();
  88. }
  89. });
  90. });
  91. </script>
  92. <style lang="less" scoped>
  93. @ventSpace: zxm;
  94. .dustMonitor {
  95. .search-area {
  96. margin: 15px;
  97. .area-item {
  98. display: flex;
  99. align-items: center;
  100. .item-text {
  101. color: #fff;
  102. }
  103. }
  104. }
  105. .zxm-picker,
  106. .zxm-input {
  107. border: 1px solid #3ad8ff77;
  108. background-color: #ffffff00;
  109. color: #fff;
  110. }
  111. }
  112. :deep(.@{ventSpace}-table-body) {
  113. height: auto !important;
  114. tr > td {
  115. background: #ffffff00 !important;
  116. }
  117. tr.@{ventSpace}-table-row-selected {
  118. td {
  119. background: #007cc415 !important;
  120. }
  121. }
  122. }
  123. :deep(.jeecg-basic-table .@{ventSpace}-table-wrapper .@{ventSpace}-table-title) {
  124. min-height: 0;
  125. }
  126. :deep(.@{ventSpace}-pagination) {
  127. margin-right: 20px !important;
  128. }
  129. :deep(.zxm-table-thead > tr > th:last-child) {
  130. border-right: 1px solid #91e9fe55 !important;
  131. }
  132. </style>