123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145 |
- <template>
- <div class="dustMonitor">
- <div class="search-area">
- <a-row>
- <a-col :span="12">
- <div class="area-item">
- <div class="item-text">录入时间:</div>
- <span style="width: 240px; color: #fff">{{ createTime }}</span>
- </div>
- </a-col>
- <a-col :span="12">
- <div class="area-item">
- <div class="item-text">录入人员:</div>
- <span style="width: 240px; color: #fff">{{ createBy }}</span>
- </div>
- </a-col>
- </a-row>
- </div>
- <div class="content-area"> <a-table :columns="bundleSpycolumns" :data-source="tableData" size="small" class="tableW" /></div>
- </div>
- </template>
- <script setup lang="ts">
- import { ref, onMounted, reactive } from 'vue';
- import { bundleSpycolumns } from './comment.data';
- import { getInfoList, getAllFileList } from './comment.api';
- import 'ant-design-vue/dist/antd.css'; // 引入样式
- let selectList = ref<any[]>([]);
- let formSearch = reactive({
- pageNum: 1,
- pageSize: 1000,
- fileId: '',
- fileName: '',
- });
- const latentCount = ref(0); // 缓慢氧化阶段(潜伏期)
- const selfHeatingCount = ref(0); // 加速氧化阶段(自热期)
- const combustionCount = ref(0); // 剧烈氧化阶段(燃烧期)
- const latentPercent = ref(0); // 缓慢氧化阶段(潜伏期)
- const selfHeatingPercent = ref(0); // 加速氧化阶段(自热期)
- const combustionPercent = ref(0); // 剧烈氧化阶段(燃烧期)
- let createBy = ref<any[]>([]);
- let createTime = ref<any[]>([]);
- let tableData = ref<any[]>([]);
- let selectedFileId = ref<string | null>(null);
- //获取色谱仪报表
- async function getTableList(params: any) {
- let res = await getInfoList({ type: 'bundleSpy', ...params });
- const content = res.content;
- let contentArr = JSON.parse(content);
- createBy.value = res.createBy;
- createTime.value = res.createTime;
- latentCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '缓慢氧化阶段(潜伏期)').length;
- selfHeatingCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '加速氧化阶段(自热期)').length;
- combustionCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '剧烈氧化阶段(燃烧期)').length;
- const total = contentArr.length;
- latentPercent.value = (latentCount.value / total) * 100;
- selfHeatingPercent.value = (selfHeatingCount.value / total) * 100;
- combustionPercent.value = (combustionCount.value / total) * 100;
- tableData.value = contentArr;
- }
- //获取所有文件列表
- async function getAllFile() {
- let res = await getAllFileList({ type: 'bundleSpy' });
- selectList.value = res.records.map((item: any) => ({
- fileId: item.fileId,
- fileName: item.fileName,
- }));
- if (selectList.value.length > 0) {
- formSearch.fileId = selectList.value[0].fileId;
- getSearch();
- }
- }
- //查询
- function getSearch() {
- const selectedFile = selectList.value.find((item) => item.fileId === formSearch.fileId);
- const params = {
- fileId: formSearch.fileId,
- fileName: selectedFile ? selectedFile.fileName : '',
- };
- getTableList(params);
- }
- onMounted(() => {
- getTableList({ type: 'bundleSpy' });
- getAllFile().then(() => {
- if (selectList.value.length > 0) {
- formSearch.fileId = selectList.value[0].fileId;
- selectedFileId.value = selectList.value[0].fileId;
- getSearch();
- }
- });
- });
- </script>
- <style lang="less" scoped>
- @ventSpace: zxm;
- .dustMonitor {
- .search-area {
- margin: 15px;
- .area-item {
- display: flex;
- align-items: center;
- .item-text {
- color: #fff;
- }
- }
- }
- .zxm-picker,
- .zxm-input {
- border: 1px solid #3ad8ff77;
- background-color: #ffffff00;
- color: #fff;
- }
- }
- :deep(.@{ventSpace}-table-body) {
- height: auto !important;
- tr > td {
- background: #ffffff00 !important;
- }
- tr.@{ventSpace}-table-row-selected {
- td {
- background: #007cc415 !important;
- }
- }
- }
- :deep(.jeecg-basic-table .@{ventSpace}-table-wrapper .@{ventSpace}-table-title) {
- min-height: 0;
- }
- :deep(.@{ventSpace}-pagination) {
- margin-right: 20px !important;
- }
- :deep(.zxm-table-thead > tr > th:last-child) {
- border-right: 1px solid #91e9fe55 !important;
- }
- </style>
|