|
@@ -1,13 +1,24 @@
|
|
|
<template>
|
|
|
<div class="dustMonitor">
|
|
|
<customHeader>束管日报分析</customHeader>
|
|
|
- <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 500 }" class="tableW">
|
|
|
- <template #bodyCell="{ column, record }">
|
|
|
- <template v-if="column.dataIndex === 'action'">
|
|
|
- <a class="action-link" @click="toDetail(record)">数据分析</a>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </a-table>
|
|
|
+ <div class="content-container">
|
|
|
+ <div class="file-list">
|
|
|
+ <ul>
|
|
|
+ <li v-for="item in selectList" :key="item.fileId" :class="{ selected: item.fileId === selectedFileId }" @click="handleFileClick(item)">
|
|
|
+ {{ item.fileName }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="table-container">
|
|
|
+ <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 500 }" class="tableW">
|
|
|
+ <template #bodyCell="{ column, record }">
|
|
|
+ <template v-if="column.dataIndex === 'action'">
|
|
|
+ <a class="action-link" @click="toDetail(record)">数据分析</a>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<a-modal style="width: 24%; height: 600px" title="爆炸三角形" v-model:visible="modalVisible" :draggable="true" :footer="null">
|
|
|
<blastDelta :posMonitor="posMonitor" />
|
|
|
</a-modal>
|
|
@@ -15,40 +26,125 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, onMounted, shallowRef } from 'vue';
|
|
|
+import { ref, onMounted, shallowRef, reactive } from 'vue';
|
|
|
import { columns } from './bundle-table.data';
|
|
|
-import { getBundleInfoList } from './bundle-table.api';
|
|
|
+import { getBundleInfoList, getAllFileList } from './bundle-table.api';
|
|
|
import customHeader from '/@/components/vent/customHeader.vue';
|
|
|
// import { blastDelta } from './modal/blastDelta.vue';
|
|
|
import blastDelta from './modal/blastDelta.vue';
|
|
|
-
|
|
|
+let selectList = ref<any[]>([]);
|
|
|
+let formSearch = reactive({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 1000,
|
|
|
+ fileId: '',
|
|
|
+ fileName: '',
|
|
|
+});
|
|
|
let tableData = ref<any[]>([]);
|
|
|
let modalVisible = ref(false);
|
|
|
+let selectedFileId = ref<string | null>(null);
|
|
|
const posMonitor = shallowRef({});
|
|
|
-async function getTableList() {
|
|
|
- let res = await getBundleInfoList({ type: 'bundle' });
|
|
|
+
|
|
|
+function toDetail(record: any) {
|
|
|
+ posMonitor.value = record;
|
|
|
+ console.log(posMonitor.value, '爆炸三角形');
|
|
|
+ modalVisible.value = true;
|
|
|
+}
|
|
|
+
|
|
|
+//获取色谱仪报表
|
|
|
+async function getTableList(params: any) {
|
|
|
+ let res = await getBundleInfoList({ type: 'bundle', ...params });
|
|
|
const content = res.content;
|
|
|
let contentArr = JSON.parse(content);
|
|
|
tableData.value = contentArr;
|
|
|
}
|
|
|
|
|
|
-function toDetail(record: any) {
|
|
|
- posMonitor.value = record;
|
|
|
- console.log(posMonitor.value, 'posMonitor');
|
|
|
- modalVisible.value = true;
|
|
|
+//获取所有文件列表
|
|
|
+async function getAllFile() {
|
|
|
+ let res = await getAllFileList({ type: 'bundle' });
|
|
|
+ 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 handleFileClick(item: any) {
|
|
|
+ formSearch.fileId = item.fileId;
|
|
|
+ formSearch.fileName = item.fileName;
|
|
|
+ selectedFileId.value = item.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();
|
|
|
+ getTableList({ type: 'bundle' });
|
|
|
+ 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>
|
|
|
@import '/@/design/theme.less';
|
|
|
|
|
|
+.content-container {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.file-list {
|
|
|
+ width: 20%;
|
|
|
+ padding: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 50px;
|
|
|
+ border: 1px solid #99e8ff66;
|
|
|
+ background: #27546e1a;
|
|
|
+ box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
|
|
|
+ -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
|
|
|
+ -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
|
|
|
+}
|
|
|
+
|
|
|
+.file-list ul {
|
|
|
+ list-style: none;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.file-list li {
|
|
|
+ color: #fff;
|
|
|
+ padding: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.file-list li:hover,
|
|
|
+.file-list li.selected {
|
|
|
+ background: #26adfc1a;
|
|
|
+}
|
|
|
+
|
|
|
+.table-container {
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 80%;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
.dustMonitor {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- padding: 80px 10px 15px 10px;
|
|
|
+ padding: 10px 10px 15px 10px;
|
|
|
box-sizing: border-box;
|
|
|
position: relative;
|
|
|
}
|