|
@@ -1,229 +0,0 @@
|
|
|
-<script setup>
|
|
|
-import { dayjs } from 'element-plus';
|
|
|
-import { getContinuousAssayListNew, getDeviceList } from '@/api/report/lab';
|
|
|
-
|
|
|
-const { proxy } = getCurrentInstance();
|
|
|
-
|
|
|
-const queryParams = ref({
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 10,
|
|
|
- deviceNo: '',
|
|
|
- activeRadioName: 'daterange'
|
|
|
-});
|
|
|
-
|
|
|
-const tableLoading = ref(false);
|
|
|
-const loading = ref(false);
|
|
|
-
|
|
|
-const datePickerValue = ref([]);
|
|
|
-const tempDataValue = ref({timeBegin: dayjs(new Date()).startOf('week').format('YYYY') + '年'});
|
|
|
-
|
|
|
-const tableData = ref([]);
|
|
|
-const columns = ref([]);
|
|
|
-const options = ref([]);
|
|
|
-
|
|
|
-const dateBeforeSevenDays = computed(() => new Date(dayjs().subtract(7, 'day').format('YYYY-MM-DD')))
|
|
|
-
|
|
|
-const format = computed(() => {
|
|
|
- return queryParams.value.activeRadioName === 'week' ? tempDataValue.value.timeBegin + ' 第 ww 周' : 'YYYY-MM'
|
|
|
-})
|
|
|
-
|
|
|
-const label = computed(() => {
|
|
|
- return queryParams.value.activeRadioName === 'week' ? '选择周' : '选择月'
|
|
|
-})
|
|
|
-
|
|
|
-const onChangeDatePicker = (value) => {
|
|
|
- const timeBegin = dayjs(value).startOf('week').format('YYYY') + '年';
|
|
|
- const timeEnd = dayjs(value).endOf('week').format('MM-DD');
|
|
|
-
|
|
|
- tempDataValue.value = { timeBegin, timeEnd };
|
|
|
-}
|
|
|
-
|
|
|
-const onRadioChange = () => {
|
|
|
- datePickerValue.value = new Date();
|
|
|
-}
|
|
|
-
|
|
|
-const getStartTimeAndEndTime = () => {
|
|
|
- const { activeRadioName } = queryParams.value;
|
|
|
- const time = datePickerValue.value;
|
|
|
- let timeBegin = '';
|
|
|
- let timeEnd = '';
|
|
|
-
|
|
|
- if ( activeRadioName === 'daterange' ) {
|
|
|
- if (time.length) {
|
|
|
- const [ startTime, endTime ] = time;
|
|
|
- timeBegin = dayjs(startTime).format('YYYY-MM-DD')
|
|
|
- timeEnd = dayjs(endTime).format('YYYY-MM-DD')
|
|
|
- }
|
|
|
- } else {
|
|
|
- timeBegin = dayjs(time).startOf('month').format('YYYY-MM-DD');
|
|
|
- timeEnd = dayjs(time).endOf('month').format('YYYY-MM-DD');
|
|
|
- }
|
|
|
-
|
|
|
- return {
|
|
|
- timeBegin,
|
|
|
- timeEnd
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const initPageData = async() => {
|
|
|
- tableLoading.value = true;
|
|
|
- loading.value = true;
|
|
|
-
|
|
|
- const dateResult = getStartTimeAndEndTime();
|
|
|
- const { data } = await getContinuousAssayListNew({...dateResult, deviceNo: queryParams.value.deviceNo});
|
|
|
- console.log("data", data);
|
|
|
- const whiteTableList = [
|
|
|
- // { title: '检测指标', key: 'assayName' },
|
|
|
- { title: '实际检测数量', key: 'assayCounts' },
|
|
|
- { title: '最小值', key: 'minVal' },
|
|
|
- { title: '最大值', key: 'maxVal' },
|
|
|
- { title: '合格率(%)', key: 'passedRates' },
|
|
|
- { title: '标线(%)', key: 'bx' },
|
|
|
- { title: '合格率偏差', key: 'ratesDeviation' }
|
|
|
- ]
|
|
|
-
|
|
|
- const tempBodyObject = {};
|
|
|
- const middleData = Object.entries(data).map(([key, value]) => {
|
|
|
- const children = Object.entries(value).map(([k, v]) => {
|
|
|
- const [child] = v;
|
|
|
- tempBodyObject[key + '-' + k] = child;
|
|
|
- return {
|
|
|
- label: k,
|
|
|
- prop: key + '-' + k,
|
|
|
- width: 160
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- return {
|
|
|
- label: key === 'total' ? '' : key,
|
|
|
- children
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- if ( middleData.length ) {
|
|
|
- columns.value = [{ label: '检测点位', fixed: "left", children: [{ label: '检测指标', prop: 'title', width: 150 }]}].concat(middleData);
|
|
|
- tableData.value = whiteTableList.map(item => {
|
|
|
- const { key } = item;
|
|
|
- Object.entries(tempBodyObject).map(([k, v]) => {
|
|
|
- item = {
|
|
|
- ...item,
|
|
|
- [k]: v[key]
|
|
|
- }
|
|
|
- })
|
|
|
- return item;
|
|
|
- });
|
|
|
- } else {
|
|
|
- columns.value = [];
|
|
|
- tableData.value = []
|
|
|
- }
|
|
|
- tableLoading.value = false;
|
|
|
- loading.value = false;
|
|
|
-}
|
|
|
-
|
|
|
-const handlerQuery = () => {
|
|
|
- initPageData();
|
|
|
-}
|
|
|
-
|
|
|
-const handlerReset = () => {
|
|
|
- const [ item ] = options.value;
|
|
|
- datePickerValue.value = [dateBeforeSevenDays.value, new Date()];
|
|
|
- queryParams.value.activeRadioName = 'daterange';
|
|
|
- queryParams.value.deviceNo = item?.deviceNo || '';
|
|
|
- initPageData();
|
|
|
-}
|
|
|
-
|
|
|
-const handleExport = () => {
|
|
|
- const dateResult = getStartTimeAndEndTime();
|
|
|
- proxy.getDownload("/business/exportContinuousAssayCountByDates", {
|
|
|
- ...dateResult,
|
|
|
- deviceNo: queryParams.value.deviceNo
|
|
|
- }, `${new Date().getTime()}.xlsx`);
|
|
|
-}
|
|
|
-
|
|
|
-onMounted(async() => {
|
|
|
-
|
|
|
- datePickerValue.value = [dateBeforeSevenDays.value, new Date()];
|
|
|
-
|
|
|
- await getDeviceList({ type: 2 }).then(({ data }) => {
|
|
|
- const [ item ] = data;
|
|
|
- queryParams.value.deviceNo = item?.deviceNo || '';
|
|
|
- options.value = data
|
|
|
- });
|
|
|
-
|
|
|
- await initPageData();
|
|
|
-})
|
|
|
-</script>
|
|
|
-
|
|
|
-<template>
|
|
|
- <div class="lab-day-viewport 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="14">
|
|
|
- <div class="flex items-center space-x-[20px]">
|
|
|
- <el-form-item label="统计时段">
|
|
|
- <el-radio-group v-model="queryParams.activeRadioName" @change="onRadioChange">
|
|
|
- <el-radio-button label="按周" value="daterange" />
|
|
|
- <el-radio-button label="按月" value="month" />
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-date-picker
|
|
|
- v-model="datePickerValue"
|
|
|
- start-placeholder="开始时间"
|
|
|
- end-placeholder="结束时间"
|
|
|
- placeholder="请选择月份"
|
|
|
- :type="queryParams.activeRadioName"
|
|
|
- :editable="false"
|
|
|
- :clearable="false"
|
|
|
- style="max-width: 280px;"
|
|
|
- @change="onChangeDatePicker"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="4">
|
|
|
- <div class="flex justify-end">
|
|
|
- <el-button type="primary" @click="handlerQuery" :loading="loading">查询</el-button>
|
|
|
- <el-button @click="handlerReset" :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"
|
|
|
- :loading="loading"
|
|
|
- >导出</el-button>
|
|
|
- </div>
|
|
|
- <el-table :data="tableData" style="width: 100%" v-loading="tableLoading">
|
|
|
- <!-- <el-table-column prop="title" label="检测点位" width="160" fixed="left" header-align="center" /> -->
|
|
|
- <el-table-column :label="col.label" :width="col.width || 200" :fixed="col.fixed" align="center" v-for="col, index in columns">
|
|
|
- <el-table-column :prop="child.prop" :label="child.label" :width="child.width" v-for="child in col.children"/>
|
|
|
- </el-table-column>
|
|
|
- <!-- <el-table-column prop="totalDeviationRate" label="总质控合格率" width="120" header-align="center" fixed="right" align="center"/> -->
|
|
|
- </el-table>
|
|
|
- </el-card>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
-</template>
|
|
|
-
|
|
|
-<style lang="scss" scoped></style>
|