|
|
@@ -0,0 +1,284 @@
|
|
|
+<!-- 用于动态设置 name -->
|
|
|
+<!-- <script>
|
|
|
+export default {
|
|
|
+ name: location.hash.includes('assay-record') ? "AssayRecord" : "DetectionRecord"
|
|
|
+}
|
|
|
+</script> -->
|
|
|
+<script setup>
|
|
|
+import { getDeviceList, getDrawerData } from '@/api/report/lab';
|
|
|
+import { dayjs } from 'element-plus';
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const route = useRoute();
|
|
|
+
|
|
|
+defineOptions({
|
|
|
+ name: 'DetectionRecord'
|
|
|
+})
|
|
|
+
|
|
|
+const queryParams = ref({
|
|
|
+ deviceNo: '',
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10
|
|
|
+ });
|
|
|
+
|
|
|
+const datePieckerValue = ref([dayjs(new Date()).format('YYYY-MM-DD'), dayjs(new Date()).format('YYYY-MM-DD')]);
|
|
|
+
|
|
|
+let firstDeviceNo = '';
|
|
|
+
|
|
|
+const total = ref(0);
|
|
|
+const tableData = ref([]);
|
|
|
+const loading = ref(false);
|
|
|
+const options = ref([]);
|
|
|
+const columns = [
|
|
|
+ {
|
|
|
+ label: '基本资料',
|
|
|
+ children: [
|
|
|
+ { label: "化验开始时间", prop: 'assayTime', width: 180 },
|
|
|
+ // { label: "设备名称", prop: 'deviceName', width: 180 },
|
|
|
+ // { label: "设备名称", prop: 'deviceNo', width: 180 },
|
|
|
+ { label: "所属水厂", prop: 'worksName', width: 180 },
|
|
|
+ // { label: "样品名称", prop: 'assayTypeName', width: 180 }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '高COD',
|
|
|
+ children: [
|
|
|
+ { label: "质控值", prop: 'highCodStandardVal', width: 100 },
|
|
|
+ { label: "化验值", prop: 'highCodResultConcentration', width: 100 },
|
|
|
+ { label: "偏差度", prop: 'highCodDeviationRate', width: 100 }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '低COD',
|
|
|
+ children: [
|
|
|
+ { label: "质控值", prop: 'lowCodStandardVal', width: 100 },
|
|
|
+ { label: "化验值", prop: 'lowCodResultConcentration', width: 100 },
|
|
|
+ { label: "偏差度", prop: 'lowCodDeviationRate', width: 100 }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '氨氮',
|
|
|
+ children: [
|
|
|
+ { label: "质控值", prop: 'anDanStandardVal', width: 100 },
|
|
|
+ { label: "化验值", prop: 'anDanResultConcentration', width: 100 },
|
|
|
+ { label: "偏差度", prop: 'anDanDeviationRate', width: 100 }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '总氮',
|
|
|
+ children: [
|
|
|
+ { label: "质控值", prop: 'tnStandardVal', width: 100 },
|
|
|
+ { label: "化验值", prop: 'tnResultConcentration', width: 100 },
|
|
|
+ { label: "偏差度", prop: 'tnDeviationRate', width: 100 }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '总磷',
|
|
|
+ children: [
|
|
|
+ { label: "质控值", prop: 'tpStandardVal', width: 100 },
|
|
|
+ { label: "化验值", prop: 'tpResultConcentration', width: 100 },
|
|
|
+ { label: "偏差度", prop: 'tpDeviationRate', width: 100 }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '硝酸盐氮',
|
|
|
+ children: [
|
|
|
+ { label: "质控值", prop: 'xsydStandardVal', width: 100 },
|
|
|
+ { label: "化验值", prop: 'xsydResultConcentration', width: 100 },
|
|
|
+ { label: "偏差度", prop: 'xsydDeviationRate', width: 100 }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '亚硝酸盐',
|
|
|
+ children: [
|
|
|
+ { label: "质控值", prop: 'yxsyStandardVal', width: 100 },
|
|
|
+ { label: "化验值", prop: 'yxsyResultConcentration', width: 100 },
|
|
|
+ { label: "偏差度", prop: 'yxsyDeviationRate', width: 100 }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '正磷酸盐',
|
|
|
+ children: [
|
|
|
+ { label: "质控值", prop: 'zlsyStandardVal', width: 100 },
|
|
|
+ { label: "化验值", prop: 'zlsyResultConcentration', width: 100 },
|
|
|
+ { label: "偏差度", prop: 'zlsyDeviationRate', width: 100 }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+const finalyColumns = ref([]);
|
|
|
+
|
|
|
+const initPageData = async () => {
|
|
|
+
|
|
|
+ loading.value = true;
|
|
|
+
|
|
|
+ const [ timeBegin, timeEnd ] = datePieckerValue.value;
|
|
|
+ const { total: tableTotal, rows } = await getDrawerData({ ...queryParams.value, timeBegin, timeEnd, type: route.query.t });
|
|
|
+
|
|
|
+ const arr = [];
|
|
|
+
|
|
|
+ for (let index = 1; index < columns.length; index++) {
|
|
|
+ const children = columns[index].children;
|
|
|
+ const tempArr = [];
|
|
|
+ for (let i = 1; i < children.length; i++) {
|
|
|
+ const item = children[i];
|
|
|
+ tempArr.push(item.prop);
|
|
|
+ }
|
|
|
+ arr.push( tempArr );
|
|
|
+ }
|
|
|
+
|
|
|
+ const tempColumns = [];
|
|
|
+
|
|
|
+ arr.forEach((item, index) => {
|
|
|
+ const [k1] = item;
|
|
|
+
|
|
|
+ const isExits = rows.some((val) => val[k1]);
|
|
|
+ if ( isExits ) {
|
|
|
+ tempColumns.push(columns[index + 1]);
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ finalyColumns.value = rows.length ? [columns[0]].concat(tempColumns) : [];
|
|
|
+
|
|
|
+ tableData.value = rows;
|
|
|
+ total.value = tableTotal;
|
|
|
+ loading.value = false;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+// 查询
|
|
|
+const handleQuery = async() => {
|
|
|
+ initPageData();
|
|
|
+}
|
|
|
+
|
|
|
+// 重置
|
|
|
+const handleReset = () => {
|
|
|
+ datePieckerValue.value = [dayjs(new Date()).format('YYYY-MM-DD'), dayjs(new Date()).format('YYYY-MM-DD')];
|
|
|
+ queryParams.value.pageNum = 1;
|
|
|
+ queryParams.value.pageSize = 10;
|
|
|
+ queryParams.value.deviceNo = firstDeviceNo;
|
|
|
+ initPageData();
|
|
|
+}
|
|
|
+
|
|
|
+// 导出
|
|
|
+const handleExport = () => {
|
|
|
+ const [ timeBegin, timeEnd ] = datePieckerValue.value;
|
|
|
+
|
|
|
+ proxy.getDownload("/business/exportAssayPageListByDeviceNoAndDate", {
|
|
|
+ timeBegin, timeEnd, deviceNo: queryParams.value.deviceNo, type: route.query.t
|
|
|
+ }, `${new Date().getTime()}.xlsx`);
|
|
|
+}
|
|
|
+
|
|
|
+const test = (key, item) => {
|
|
|
+
|
|
|
+ let color = '#606266';
|
|
|
+
|
|
|
+ // const whitelist = [
|
|
|
+ // 'highCodDeviationRate',
|
|
|
+ // 'lowCodDeviationRate',
|
|
|
+ // 'anDanDeviationRate',
|
|
|
+ // 'tnDeviationRate',
|
|
|
+ // 'tpDeviationRate',
|
|
|
+ // 'xsydDeviationRate',
|
|
|
+ // 'yxsyDeviationRate',
|
|
|
+ // 'zlsyDeviationRate',
|
|
|
+ // ]
|
|
|
+
|
|
|
+ const fieldMapping = {
|
|
|
+ highCodDeviationRate: 'highCodRed',
|
|
|
+ lowCodDeviationRate: 'lowCodRed',
|
|
|
+ anDanDeviationRate: 'anDanRed',
|
|
|
+ tnDeviationRate: 'tnRed',
|
|
|
+ tpDeviationRate: 'tpRed',
|
|
|
+ xsydDeviationRate: 'xsydRed',
|
|
|
+ yxsyDeviationRate: 'yxsyRed',
|
|
|
+ zlsyDeviationRate: 'zlsyRed'
|
|
|
+ }
|
|
|
+
|
|
|
+ if ( fieldMapping[key] && item[fieldMapping[key]] ) {
|
|
|
+ color = 'red'
|
|
|
+ //const n = item[key + 'Number'];
|
|
|
+ // if ( (n || n == 0) && Math.abs( n ) > 0.1 ) {
|
|
|
+ // color = 'red'
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
+ return {color};
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ await getDeviceList({ type: 2 }).then(({ data }) => {
|
|
|
+ const [ item ] = data;
|
|
|
+ queryParams.value.deviceNo = item?.deviceNo;
|
|
|
+ firstDeviceNo = item?.deviceNo;
|
|
|
+ options.value = data
|
|
|
+ });
|
|
|
+ await initPageData();
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="space-y-[10px]">
|
|
|
+ <el-card shadow="never" :body-style="{ border: '0px' }">
|
|
|
+ <template #header>
|
|
|
+ <p class="space-x-[10px]">
|
|
|
+ <span class="font-bold">数据筛选</span>
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <el-row class="pt-[5px]" justify="space-between" :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="设备名称">
|
|
|
+ <el-select v-model="queryParams.deviceNo" placeholder="请选择" filterable clearable>
|
|
|
+ <el-option v-for="item in options" :key="item.deviceNo" :label="item.deviceName" :value="item.deviceNo" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item>
|
|
|
+ <template #label>
|
|
|
+ <span class="font-bold">化验日期</span>
|
|
|
+ </template>
|
|
|
+ <el-date-picker
|
|
|
+ :clearable="false"
|
|
|
+ v-model="datePieckerValue"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ :editable="false"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" :offset="6">
|
|
|
+ <div class="flex justify-end">
|
|
|
+ <el-button type="primary" @click="handleQuery" :loading="loading">查询</el-button>
|
|
|
+ <el-button @click="handleReset" :loading="loading">重置</el-button>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card shadow="never" :body-style="{ padding: '20px' }">
|
|
|
+ <div class="flex justify-between items-center mb-[10px]">
|
|
|
+ <h4 class="font-bold">化验记录</h4>
|
|
|
+ <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
|
|
+ </div>
|
|
|
+ <el-table :data="tableData" style="width: 100%" v-loading="loading">
|
|
|
+ <el-table-column :label="col.label" :min-width="col.width" :fixed="col.fixed" align="center" v-for="col in finalyColumns">
|
|
|
+ <el-table-column :prop="child.prop" :label="child.label" :min-width="child.width" v-for="child in col.children">
|
|
|
+ <template #default="scope">
|
|
|
+ <span :style="test(child.prop, scope.row)">{{ scope.row[child.prop] }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="">
|
|
|
+ <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
|
|
+ v-model:limit="queryParams.pageSize" @pagination="initPageData" />
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="less" scoped></style>
|
