From ffa4fdb58442c4e4304d14ec8ac6fb7f34fb4c69 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期一, 17 二月 2025 09:07:39 +0800
Subject: [PATCH] 修改统计日期传参
---
src/components/view/b4-site-hours-statistics.vue | 398 ++++++++++++++++++++++++++++++--------------------------
1 files changed, 214 insertions(+), 184 deletions(-)
diff --git a/src/components/view/b4-site-hours-statistics.vue b/src/components/view/b4-site-hours-statistics.vue
index b8f9791..fb2d20c 100644
--- a/src/components/view/b4-site-hours-statistics.vue
+++ b/src/components/view/b4-site-hours-statistics.vue
@@ -5,32 +5,56 @@
<el-date-picker
v-model="month"
type="month"
- placeholder="閫夋嫨鏈�" style="margin-right: 20px;" @change="changeTime">
+ placeholder="閫夋嫨鏈�"
+ style="margin-right: 20px;"
+ @change="changeTime"
+ >
</el-date-picker>
</div>
<el-row :gutter="20" class="card" v-loading="loading">
- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" v-for="(item,index) in siteList" :key="index">
- <div class="card-item" :style="`background: url(../../../static/img/site/bg-${item.bg}.png) no-repeat;background-size:100% 100%;margin-bottom:16px`">
- <h3 :style="`color:${item.color};font-weight: 500;font-size: 28px;`" class="card-item-title">
- <img :src="`../../../static/img/site/${item.name}.png`" alt="" style="width: 30px;height: 30px;margin-right: 10px;">
+ <el-col
+ :xs="24"
+ :sm="12"
+ :md="12"
+ :lg="8"
+ :xl="8"
+ v-for="(item, index) in siteList"
+ :key="index"
+ >
+ <div
+ class="card-item"
+ :style="
+ `background: url(../../../static/img/site/bg-${item.bg}.png) no-repeat;background-size:100% 100%;margin-bottom:16px`
+ "
+ >
+ <h3
+ :style="`color:${item.color};font-weight: 500;font-size: 28px;`"
+ class="card-item-title"
+ >
+ <img
+ :src="`../../../static/img/site/${item.name}.png`"
+ alt=""
+ style="width: 30px;height: 30px;margin-right: 10px;"
+ />
<span>{{ item.name }}绔欑偣</span>
</h3>
<el-table
:data="item.tableData"
- style="width: 100%;margin-bottom: 14px;" height="410px" size="mini"border v-loading="item.loading">
- <el-table-column
- type="index"
- label="搴忓彿"
- width="60">
+ style="width: 100%;margin-bottom: 14px;"
+ height="410px"
+ size="mini"
+ border
+ v-loading="item.loading"
+ >
+ <el-table-column type="index" label="搴忓彿" width="60">
<template #default="scope">
- <!-- 璁＄畻搴忓彿 -->
- {{ (item.page.current - 1) * item.page.size + scope.$index + 1 }}
- </template>
+ <!-- 璁＄畻搴忓彿 -->
+ {{
+ (item.page.current - 1) * item.page.size + scope.$index + 1
+ }}
+ </template>
</el-table-column>
- <el-table-column
- prop="sampleName"
- label="鏍峰搧鍚嶇О"
- width="90">
+ <el-table-column prop="sampleName" label="鏍峰搧鍚嶇О" width="90">
<template #default="scope">
<el-tooltip
class="item"
@@ -38,13 +62,13 @@
:content="scope.row.sampleName"
placement="top"
>
- <div class="single-line-ellipsis">{{ scope.row.sampleName }}</div>
+ <div class="single-line-ellipsis">
+ {{ scope.row.sampleName }}
+ </div>
</el-tooltip>
</template>
</el-table-column>
- <el-table-column
- prop="sampleCode"
- label="鏍峰搧缂栧彿">
+ <el-table-column prop="sampleCode" label="鏍峰搧缂栧彿">
<template #default="scope">
<el-tooltip
class="item"
@@ -52,17 +76,15 @@
:content="scope.row.sampleCode"
placement="top"
>
- <div class="single-line-ellipsis">{{ scope.row.sampleCode }}</div>
+ <div class="single-line-ellipsis">
+ {{ scope.row.sampleCode }}
+ </div>
</el-tooltip>
</template>
</el-table-column>
- <el-table-column
- prop="num"
- label="娆℃暟" width="70">
+ <el-table-column prop="num" label="娆℃暟" width="70">
</el-table-column>
- <el-table-column
- prop="hours"
- label="妫�楠屾椂闀�" width="100">
+ <el-table-column prop="hours" label="妫�楠屾椂闀�" width="100">
</el-table-column>
</el-table>
<el-pagination
@@ -70,7 +92,11 @@
:page-size="item.page.size"
:current-page="item.page.current"
layout="prev, pager, next"
- :total="item.page.total" small style="text-align: right;" @current-change="m=>changePage(m,item)">
+ :total="item.page.total"
+ small
+ style="text-align: right;"
+ @current-change="m => changePage(m, item)"
+ >
</el-pagination>
</div>
</el-col>
@@ -80,251 +106,255 @@
<script>
export default {
- data(){
+ data() {
return {
- month:'',
- siteList:[
+ month: "",
+ siteList: [
{
- name:'鐢佃矾璇曢獙',
- color:'#FABE63',
- bg:'榛勮壊',
- tableData:[],
- page:{
+ name: "鐢佃矾璇曢獙",
+ color: "#FABE63",
+ bg: "榛勮壊",
+ tableData: [],
+ page: {
current: 1,
size: 9,
- total:0
+ total: 0
},
- loading:false,
+ loading: false
},
{
- name:'杩滃満',
- color:'#6F83FF',
- bg:'绱壊',
- tableData:[],
- page:{
+ name: "杩滃満",
+ color: "#6F83FF",
+ bg: "绱壊",
+ tableData: [],
+ page: {
current: 1,
size: 9,
- total:0
+ total: 0
},
- loading:false,
+ loading: false
},
{
- name:'杩戝満',
- color:'#53B3F9',
- bg:'钃濊壊',
- tableData:[],
- page:{
+ name: "杩戝満",
+ color: "#53B3F9",
+ bg: "钃濊壊",
+ tableData: [],
+ page: {
current: 1,
size: 9,
- total:0
+ total: 0
},
- loading:false,
+ loading: false
},
{
- name:'鎸姩',
- color:'#6F83FF',
- bg:'绱壊',
- tableData:[],
- page:{
+ name: "鎸姩",
+ color: "#6F83FF",
+ bg: "绱壊",
+ tableData: [],
+ page: {
current: 1,
size: 9,
- total:0
+ total: 0
},
- loading:false,
+ loading: false
},
{
- name:'娣嬮洦',
- color:'#53B3F9',
- bg:'钃濊壊',
- tableData:[],
- page:{
+ name: "娣嬮洦",
+ color: "#53B3F9",
+ bg: "钃濊壊",
+ tableData: [],
+ page: {
current: 1,
size: 9,
- total:0
+ total: 0
},
- loading:false,
+ loading: false
},
{
- name:'楂樹綆娓�',
- color:'#80CD62',
- bg:'缁胯壊',
- tableData:[],
- page:{
+ name: "楂樹綆娓�",
+ color: "#80CD62",
+ bg: "缁胯壊",
+ tableData: [],
+ page: {
current: 1,
size: 9,
- total:0
+ total: 0
},
- loading:false,
+ loading: false
},
{
- name:'鐩愰浘',
- color:'#6F83FF',
- bg:'绱壊',
- tableData:[],
- page:{
+ name: "鐩愰浘",
+ color: "#6F83FF",
+ bg: "绱壊",
+ tableData: [],
+ page: {
current: 1,
size: 9,
- total:0
+ total: 0
},
- loading:false,
+ loading: false
},
{
- name:'椋庤浇',
- color:'#53B3F9',
- bg:'钃濊壊',
- tableData:[],
- page:{
+ name: "椋庤浇",
+ color: "#53B3F9",
+ bg: "钃濊壊",
+ tableData: [],
+ page: {
current: 1,
size: 9,
- total:0
+ total: 0
},
- loading:false,
+ loading: false
},
{
- name:'璺岃惤',
- color:'#FABE63',
- bg:'榛勮壊',
- tableData:[],
- page:{
+ name: "璺岃惤",
+ color: "#FABE63",
+ bg: "榛勮壊",
+ tableData: [],
+ page: {
current: 1,
size: 9,
- total:0
+ total: 0
},
- loading:false,
+ loading: false
},
{
- name:'鑰佸寲',
- color:'#80CD62',
- bg:'缁胯壊',
- tableData:[],
- page:{
+ name: "鑰佸寲",
+ color: "#80CD62",
+ bg: "缁胯壊",
+ tableData: [],
+ page: {
current: 1,
size: 9,
- total:0
+ total: 0
},
- loading:false,
+ loading: false
},
{
- name:'闈欏帇',
- color:'#53B3F9',
- bg:'钃濊壊',
- tableData:[],
- page:{
+ name: "闈欏帇",
+ color: "#53B3F9",
+ bg: "钃濊壊",
+ tableData: [],
+ page: {
current: 1,
size: 9,
- total:0
+ total: 0
},
- loading:false,
+ loading: false
},
{
- name:'鍐插嚮',
- color:'#6F83FF',
- bg:'绱壊',
- tableData:[],
- page:{
+ name: "鍐插嚮",
+ color: "#6F83FF",
+ bg: "绱壊",
+ tableData: [],
+ page: {
current: 1,
size: 9,
- total:0
+ total: 0
},
- loading:false,
+ loading: false
},
{
- name:'鍔熺巼瀹归噺',
- color:'#80CD62',
- bg:'缁胯壊',
- tableData:[],
- page:{
+ name: "鍔熺巼瀹归噺",
+ color: "#80CD62",
+ bg: "缁胯壊",
+ tableData: [],
+ page: {
current: 1,
size: 9,
- total:0
+ total: 0
},
- loading:false,
- },
+ loading: false
+ }
],
- startTime:null,
- endTime:null,
- loading:false,
- }
+ startTime: null,
+ endTime: null,
+ loading: false
+ };
},
- mounted(){
- this.month = new Date()
- this.changeTime()
+ mounted() {
+ this.month = new Date();
+ this.changeTime();
},
- methods:{
- init(){
- this.loading = true
- this.$axios.post(this.$api.report.timeByStation, {
- startTime:this.startTime,
- endTime:this.endTime,
- current: 1,
- size: 9
- }).then(res => {
- this.loading = false
- if (res.code === 201) {
- return
- }
- for(let m in res.data){
- this.siteList.forEach(item=>{
- if(item.name==m){
- item.page.total = res.data[m].total
- item.tableData = res.data[m].records
- }
- })
- }
- })
+ methods: {
+ init() {
+ this.loading = true;
+ this.$axios
+ .post(this.$api.report.timeByStation, {
+ startTime: this.startTime,
+ endTime: this.endTime,
+ current: 1,
+ size: 9
+ })
+ .then(res => {
+ this.loading = false;
+ if (res.code === 201) {
+ return;
+ }
+ for (let m in res.data) {
+ this.siteList.forEach(item => {
+ if (item.name == m) {
+ item.page.total = res.data[m].total;
+ item.tableData = res.data[m].records;
+ }
+ });
+ }
+ });
},
- changePage(current,row){
- row.page.current = current
- row.loading = true
- this.$axios.post(this.$api.report.timeByStation, {
- startTime:this.startTime,
- endTime:this.endTime,
- current: current,
- size: row.page.size,
- sonLaboratory:row.name
- }).then(res => {
- row.loading = false
- if (res.code === 201) {
- return
- }
- row.tableData = res.data[row.name].records
- row.page.total = res.data[row.name].total
- })
+ changePage(current, row) {
+ row.page.current = current;
+ row.loading = true;
+ this.$axios
+ .post(this.$api.report.timeByStation, {
+ startTime: this.startTime,
+ endTime: this.endTime,
+ current: current,
+ size: row.page.size,
+ sonLaboratory: row.name
+ })
+ .then(res => {
+ row.loading = false;
+ if (res.code === 201) {
+ return;
+ }
+ row.tableData = res.data[row.name].records;
+ row.page.total = res.data[row.name].total;
+ });
},
- changeTime(){
+ changeTime() {
const year = new Date(this.month).getFullYear();
- const month = new Date(this.month).getMonth()+1;
+ const month = new Date(this.month).getMonth() + 1;
const day = new Date(year, month + 1, 0).getDate(); //
// 璁剧疆璧峰鏃ユ湡鍜岀粨鏉熸棩鏈�
- this.startTime = `${year}-${month>9?'0'+month:month}-01`
- this.endTime = `${year}-${month>9?'0'+month:month}-${day}` // 鏈堟湯
- this.siteList.forEach(item=>{
- item.page.current = 1
- })
- this.init()
+ this.startTime = `${year}-${month > 9 ? "0" + month : month}-01`;
+ this.endTime = `${year}-${month > 9 ? "0" + month : month}-${day}`; // 鏈堟湯
+ this.siteList.forEach(item => {
+ item.page.current = 1;
+ });
+ this.init();
}
}
-}
+};
</script>
<style scoped>
-.title{
+.title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
}
-.card{
+.card {
height: calc(100vh - 156px);
overflow-y: auto;
}
-.card-item{
+.card-item {
height: 540px;
- box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.05);
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
padding: 20px 10px 10px 20px;
box-sizing: border-box;
}
-.card-item-title{
+.card-item-title {
display: flex;
align-items: center;
margin-bottom: 20px;
--
Gitblit v1.9.3