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 ++++++-----
src/components/view/b4-daily-business-statistics.vue | 687 +++++++++++++--------
src/components/view/b4-inspection-item-statistics.vue | 799 ++++++++++++++----------
3 files changed, 1,115 insertions(+), 769 deletions(-)
diff --git a/src/components/view/b4-daily-business-statistics.vue b/src/components/view/b4-daily-business-statistics.vue
index 99b11f8..192cd36 100644
--- a/src/components/view/b4-daily-business-statistics.vue
+++ b/src/components/view/b4-daily-business-statistics.vue
@@ -1,328 +1,486 @@
<template>
-<div class="daily-main" v-loading="loading">
- <div class="daily-content" style="height:100%">
- <div class="time" style="margin-bottom: 10px;">
- <el-radio-group v-model="type" size="small">
- <el-radio-button label="鍛�" ></el-radio-button>
- <el-radio-button label="鏈�"></el-radio-button>
- <el-radio-button label="骞�"></el-radio-button>
- </el-radio-group>
- <el-date-picker
- v-model="time.week"
- type="week"
- format="yyyy 绗� WW 鍛�"
- placeholder="閫夋嫨鍛�" size="small" v-if="type=='鍛�'" @change="m=>changeTime(type,m)">
- </el-date-picker>
- <el-date-picker
- v-model="time.month"
- type="month"
- placeholder="閫夋嫨鏈�" size="small" v-if="type=='鏈�'" @change="m=>changeTime(type,m)">
- </el-date-picker>
- <el-date-picker
- v-model="time.year"
- type="year"
- placeholder="閫夋嫨骞�" size="small" v-if="type=='骞�'" @change="m=>changeTime(type,m)">
- </el-date-picker>
+ <div class="daily-main" v-loading="loading">
+ <div class="daily-content" style="height:100%">
+ <div class="time" style="margin-bottom: 10px;">
+ <el-radio-group v-model="type" size="small">
+ <el-radio-button label="鍛�"></el-radio-button>
+ <el-radio-button label="鏈�"></el-radio-button>
+ <el-radio-button label="骞�"></el-radio-button>
+ </el-radio-group>
+ <el-date-picker
+ v-model="time.week"
+ type="week"
+ format="yyyy 绗� WW 鍛�"
+ placeholder="閫夋嫨鍛�"
+ size="small"
+ v-if="type == '鍛�'"
+ @change="m => changeTime(type, m)"
+ >
+ </el-date-picker>
+ <el-date-picker
+ v-model="time.month"
+ type="month"
+ placeholder="閫夋嫨鏈�"
+ size="small"
+ v-if="type == '鏈�'"
+ @change="m => changeTime(type, m)"
+ >
+ </el-date-picker>
+ <el-date-picker
+ v-model="time.year"
+ type="year"
+ placeholder="閫夋嫨骞�"
+ size="small"
+ v-if="type == '骞�'"
+ @change="m => changeTime(type, m)"
+ >
+ </el-date-picker>
+ </div>
+ <el-row :gutter="20">
+ <el-col
+ :xs="12"
+ :sm="8"
+ :md="6"
+ :lg="4"
+ :xl="4"
+ style="margin-bottom: 16px;"
+ >
+ <div class="daily-card">
+ <div class="daily-head">
+ <div class="daily-head-left">
+ <h4>鏈瑊{ type }}浠诲姟鎺ユ敹</h4>
+ <span>{{ pageData.RECEIVE }}</span>
+ </div>
+ <img src="../../../static/img/daliy-0.svg" alt="" srcset="" />
+ </div>
+ <div class="daily-head-left-info">
+ <img
+ :src="
+ `../../../static/img/daliy-${
+ pageData.RECEIVE_RATIO < 0 ? 'down' : 'up'
+ }.svg`
+ "
+ alt=""
+ />
+ <span
+ :class="{ active: pageData.RECEIVE_RATIO < 0 }"
+ class="num"
+ v-html="` ${handleData(pageData.RECEIVE_RATIO)}% `"
+ ></span>
+ <span style="font-size: 12px;">杈冧笂{{ type }}</span>
+ </div>
+ </div>
+ </el-col>
+ <el-col
+ :xs="12"
+ :sm="8"
+ :md="6"
+ :lg="4"
+ :xl="4"
+ style="margin-bottom: 16px;"
+ >
+ <div class="daily-card">
+ <div class="daily-head">
+ <div class="daily-head-left">
+ <h4>鏈瑊{ type }}浠诲姟瀹屾垚</h4>
+ <span>{{ pageData.FINISHE }}</span>
+ </div>
+ <img src="../../../static/img/daliy-1.svg" alt="" srcset="" />
+ </div>
+ <div class="daily-head-left-info">
+ <img
+ :src="
+ `../../../static/img/daliy-${
+ pageData.FINISHE_RATIO < 0 ? 'down' : 'up'
+ }.svg`
+ "
+ alt=""
+ />
+ <span
+ :class="{ active: pageData.FINISHE_RATIO < 0 }"
+ class="num"
+ v-html="` ${handleData(pageData.FINISHE_RATIO)}% `"
+ ></span>
+ <span style="font-size: 12px;">杈冧笂{{ type }}</span>
+ </div>
+ </div>
+ </el-col>
+ <el-col
+ :xs="12"
+ :sm="8"
+ :md="6"
+ :lg="4"
+ :xl="4"
+ style="margin-bottom: 16px;"
+ >
+ <div class="daily-card">
+ <div class="daily-head">
+ <div class="daily-head-left">
+ <h4>鏈瑊{ type }}浠诲姟鍓╀綑</h4>
+ <span>{{ pageData.SURPLUS }}</span>
+ </div>
+ <img src="../../../static/img/daliy-2.svg" alt="" srcset="" />
+ </div>
+ <div class="daily-head-left-info">
+ <img
+ :src="
+ `../../../static/img/daliy-${
+ pageData.SURPLUS_RATIO < 0 ? 'down' : 'up'
+ }.svg`
+ "
+ alt=""
+ />
+ <span
+ :class="{ active: pageData.SURPLUS_RATIO < 0 }"
+ class="num"
+ v-html="` ${handleData(pageData.SURPLUS_RATIO)}% `"
+ ></span>
+ <span style="font-size: 12px;">杈冧笂{{ type }}</span>
+ </div>
+ </div>
+ </el-col>
+ <el-col
+ :xs="12"
+ :sm="8"
+ :md="6"
+ :lg="4"
+ :xl="4"
+ style="margin-bottom: 16px;"
+ >
+ <div class="daily-card">
+ <div class="daily-head">
+ <div class="daily-head-left">
+ <h4>鏈瑊{ type }}妫�娴嬭垂鐢�</h4>
+ <span>锟{ handlePrice(pageData.PRICE) }}</span>
+ </div>
+ <img src="../../../static/img/daliy-3.svg" alt="" srcset="" />
+ </div>
+ <div class="daily-head-left-info">
+ <img
+ :src="
+ `../../../static/img/daliy-${
+ pageData.PRICE_RATIO < 0 ? 'down' : 'up'
+ }.svg`
+ "
+ alt=""
+ />
+ <span
+ :class="{ active: pageData.PRICE_RATIO < 0 }"
+ class="num"
+ v-html="` ${handleData(pageData.PRICE_RATIO)}% `"
+ ></span>
+ <span style="font-size: 12px;">杈冧笂{{ type }}</span>
+ </div>
+ </div>
+ </el-col>
+ <el-col
+ :xs="12"
+ :sm="8"
+ :md="6"
+ :lg="4"
+ :xl="4"
+ style="margin-bottom: 16px;"
+ >
+ <div class="daily-card">
+ <div class="daily-head">
+ <div class="daily-head-left">
+ <h4>鏈瑊{ type }}妫�娴嬪伐鏃�</h4>
+ <span>{{ pageData.COST }}</span>
+ </div>
+ <img src="../../../static/img/daliy-4.svg" alt="" srcset="" />
+ </div>
+ <div class="daily-head-left-info">
+ <img
+ :src="
+ `../../../static/img/daliy-${
+ pageData.COST_RATIO < 0 ? 'down' : 'up'
+ }.svg`
+ "
+ alt=""
+ />
+ <span
+ :class="{ active: pageData.COST_RATIO < 0 }"
+ class="num"
+ v-html="` ${handleData(pageData.COST_RATIO)}% `"
+ ></span>
+ <span style="font-size: 12px;">杈冧笂{{ type }}</span>
+ </div>
+ </div>
+ </el-col>
+ <el-col
+ :xs="12"
+ :sm="8"
+ :md="6"
+ :lg="4"
+ :xl="4"
+ style="margin-bottom: 16px;"
+ >
+ <div class="daily-card">
+ <div class="daily-head">
+ <div class="daily-head-left">
+ <h4>鏈瑊{ type }}妫�娴嬩汉鍛�</h4>
+ <span>{{ pageData.PERSON }}</span>
+ </div>
+ <img src="../../../static/img/daliy-5.svg" alt="" srcset="" />
+ </div>
+ <div class="daily-head-left-info">
+ <img
+ :src="
+ `../../../static/img/daliy-${
+ pageData.PERSON_RATIO < 0 ? 'down' : 'up'
+ }.svg`
+ "
+ alt=""
+ />
+ <span
+ :class="{ active: pageData.PERSON_RATIO < 0 }"
+ class="num"
+ v-html="` ${handleData(pageData.PERSON_RATIO)}% `"
+ ></span>
+ <span style="font-size: 12px;">杈冧笂{{ type }}</span>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20" style="height: calc(100% - 200px);">
+ <el-col
+ :xs="24"
+ :sm="24"
+ :md="12"
+ :lg="12"
+ :xl="12"
+ style="margin-bottom: 16px;height: 100%;"
+ >
+ <div class="daily-card chart-box" style="height: 100%;">
+ <h4>鏈瑊{ type }}浠诲姟鎺ユ敹閲�</h4>
+ <echart-module
+ :id="'daily-left'"
+ :config="chartConfig0"
+ :datas="chartData0"
+ style="height: calc(100% - 32px);"
+ ></echart-module>
+ </div>
+ </el-col>
+ <el-col
+ :xs="24"
+ :sm="24"
+ :md="12"
+ :lg="12"
+ :xl="12"
+ style="margin-bottom: 16px;height: 100%;"
+ >
+ <div class="daily-card chart-box" style="height: 100%;">
+ <h4>鏈瑊{ type }}瀹為檯瀹屾垚浠诲姟涓庢帴鏀朵换鍔″姣�</h4>
+ <echart-module
+ :id="'daily-right'"
+ :config="chartConfig1"
+ :datas="chartData1"
+ style="height: calc(100% - 32px);"
+ ></echart-module>
+ </div>
+ </el-col>
+ </el-row>
</div>
- <el-row :gutter="20">
- <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
- <div class="daily-card">
- <div class="daily-head">
- <div class="daily-head-left">
- <h4>鏈瑊{type}}浠诲姟鎺ユ敹</h4>
- <span>{{ pageData.RECEIVE }}</span>
- </div>
- <img src="../../../static/img/daliy-0.svg" alt="" srcset="">
- </div>
- <div class="daily-head-left-info">
- <img :src="`../../../static/img/daliy-${pageData.RECEIVE_RATIO<0?'down':'up'}.svg`" alt="">
- <span :class="{active:pageData.RECEIVE_RATIO<0}" class="num" v-html="` ${handleData(pageData.RECEIVE_RATIO)}% `"></span>
- <span style="font-size: 12px;">杈冧笂{{type}}</span>
- </div>
- </div>
- </el-col>
- <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
- <div class="daily-card">
- <div class="daily-head">
- <div class="daily-head-left">
- <h4>鏈瑊{type}}浠诲姟瀹屾垚</h4>
- <span >{{ pageData.FINISHE }}</span>
- </div>
- <img src="../../../static/img/daliy-1.svg" alt="" srcset="">
- </div>
- <div class="daily-head-left-info">
- <img :src="`../../../static/img/daliy-${pageData.FINISHE_RATIO<0?'down':'up'}.svg`" alt="">
- <span :class="{active:pageData.FINISHE_RATIO<0}" class="num" v-html="` ${handleData(pageData.FINISHE_RATIO)}% `"></span>
- <span style="font-size: 12px;">杈冧笂{{type}}</span>
- </div>
- </div>
- </el-col>
- <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
- <div class="daily-card">
- <div class="daily-head">
- <div class="daily-head-left">
- <h4>鏈瑊{type}}浠诲姟鍓╀綑</h4>
- <span >{{ pageData.SURPLUS }}</span>
- </div>
- <img src="../../../static/img/daliy-2.svg" alt="" srcset="">
- </div>
- <div class="daily-head-left-info">
- <img :src="`../../../static/img/daliy-${pageData.SURPLUS_RATIO<0?'down':'up'}.svg`" alt="">
- <span :class="{active:pageData.SURPLUS_RATIO<0}" class="num" v-html="` ${handleData(pageData.SURPLUS_RATIO)}% `"></span>
- <span style="font-size: 12px;">杈冧笂{{type}}</span>
- </div>
- </div>
- </el-col>
- <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
- <div class="daily-card">
- <div class="daily-head">
- <div class="daily-head-left">
- <h4>鏈瑊{type}}妫�娴嬭垂鐢�</h4>
- <span>锟{ handlePrice(pageData.PRICE) }}</span>
- </div>
- <img src="../../../static/img/daliy-3.svg" alt="" srcset="">
- </div>
- <div class="daily-head-left-info">
- <img :src="`../../../static/img/daliy-${pageData.PRICE_RATIO<0?'down':'up'}.svg`" alt="">
- <span :class="{active:pageData.PRICE_RATIO<0}" class="num" v-html="` ${handleData(pageData.PRICE_RATIO)}% `"></span>
- <span style="font-size: 12px;">杈冧笂{{type}}</span>
- </div>
- </div>
- </el-col>
- <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
- <div class="daily-card">
- <div class="daily-head">
- <div class="daily-head-left">
- <h4>鏈瑊{type}}妫�娴嬪伐鏃�</h4>
- <span>{{pageData.COST}}</span>
- </div>
- <img src="../../../static/img/daliy-4.svg" alt="" srcset="">
- </div>
- <div class="daily-head-left-info">
- <img :src="`../../../static/img/daliy-${pageData.COST_RATIO<0?'down':'up'}.svg`" alt="">
- <span :class="{active:pageData.COST_RATIO<0}" class="num" v-html="` ${handleData(pageData.COST_RATIO)}% `"></span>
- <span style="font-size: 12px;">杈冧笂{{type}}</span>
- </div>
- </div>
- </el-col>
- <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
- <div class="daily-card">
- <div class="daily-head">
- <div class="daily-head-left">
- <h4>鏈瑊{type}}妫�娴嬩汉鍛�</h4>
- <span >{{ pageData.PERSON }}</span>
- </div>
- <img src="../../../static/img/daliy-5.svg" alt="" srcset="">
- </div>
- <div class="daily-head-left-info">
- <img :src="`../../../static/img/daliy-${pageData.PERSON_RATIO<0?'down':'up'}.svg`" alt="">
- <span :class="{active:pageData.PERSON_RATIO<0}" class="num" v-html="` ${handleData(pageData.PERSON_RATIO)}% `"></span>
- <span style="font-size: 12px;">杈冧笂{{type}}</span>
- </div>
- </div>
- </el-col>
- </el-row>
- <el-row :gutter="20" style="height: calc(100% - 200px);">
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 16px;height: 100%;">
- <div class="daily-card chart-box" style="height: 100%;">
- <h4>鏈瑊{type}}浠诲姟鎺ユ敹閲�</h4>
- <echart-module :id="'daily-left'" :config="chartConfig0" :datas="chartData0" style="height: calc(100% - 32px);"></echart-module>
- </div>
- </el-col>
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 16px;height: 100%;">
- <div class="daily-card chart-box" style="height: 100%;">
- <h4>鏈瑊{type}}瀹為檯瀹屾垚浠诲姟涓庢帴鏀朵换鍔″姣�</h4>
- <echart-module :id="'daily-right'" :config="chartConfig1" :datas="chartData1" style="height: calc(100% - 32px);"></echart-module>
- </div>
- </el-col>
- </el-row>
</div>
-</div>
</template>
<script>
-
-import EchartModule from '../tool/echart.vue'
-import {
- getYearAndMonthAndDays
- } from '../../util/date'
+import EchartModule from "../tool/echart.vue";
+import { getYearAndMonthAndDays } from "../../util/date";
export default {
- components: {EchartModule},
- data(){
- return{
- chartConfig0:{
- height: '',
- isLoading:false,
- type:'line'
+ components: { EchartModule },
+ data() {
+ return {
+ chartConfig0: {
+ height: "",
+ isLoading: false,
+ type: "line"
},
- chartData0:{
- xData:[],
- yData:[
+ chartData0: {
+ xData: [],
+ yData: [
{
- title:'浠诲姟鎺ユ敹閲�',
- data:[]
+ title: "浠诲姟鎺ユ敹閲�",
+ data: []
}
]
},
- chartConfig1:{
- height: '',
- isLoading:false,
- type:'bar'
+ chartConfig1: {
+ height: "",
+ isLoading: false,
+ type: "bar"
},
- chartData1:{
- xData:[],
- yData:[
+ chartData1: {
+ xData: [],
+ yData: [
{
- title:'鎺ユ敹',
- data:[]
+ title: "鎺ユ敹",
+ data: []
},
{
- title:'瀹屾垚',
- data:[]
- },
+ title: "瀹屾垚",
+ data: []
+ }
]
},
- pageData:{},
- loading:false,
- timers:null,
- type:'鍛�',
- time:{
- week:'',
- month:'',
- year:'',
+ pageData: {},
+ loading: false,
+ timers: null,
+ type: "鍛�",
+ time: {
+ week: "",
+ month: "",
+ year: ""
},
- startTime:'',
- endTime:''
- }
+ startTime: "",
+ endTime: ""
+ };
},
- watch:{
- type(val){
- switch(val){
- case '鍛�':
- this.time.week = new Date()
- this.changeTime(val,this.time.week)
+ watch: {
+ type(val) {
+ switch (val) {
+ case "鍛�":
+ this.time.week = new Date();
+ this.changeTime(val, this.time.week);
break;
- case '鏈�':
- this.time.month = new Date()
- this.changeTime(val,this.time.month)
+ case "鏈�":
+ this.time.month = new Date();
+ this.changeTime(val, this.time.month);
break;
- case '骞�':
- this.time.year = new Date()
- this.changeTime(val,this.time.year)
+ case "骞�":
+ this.time.year = new Date();
+ this.changeTime(val, this.time.year);
break;
}
}
},
- mounted(){
- this.changeTime(this.type)
+ mounted() {
+ this.changeTime(this.type);
// this.timers&&clearInterval(this.timers);
// setInterval(this.changeTime(this.type),1000*60*5)
},
- methods:{
- init(){
- this.chartConfig0.isLoading = false
- this.chartConfig1.isLoading = false
+ methods: {
+ init() {
+ this.chartConfig0.isLoading = false;
+ this.chartConfig1.isLoading = false;
this.loading = true;
- this.$axios.get(this.$api.report.businessStatisticsByDay+'?startTime='+this.startTime+'&endTime='+this.endTime+'&type='+this.type).then(res => {
- if (res.code == 201) return
- this.pageData = this.HaveJson(res.data)
- console.log(3333,res.data)
- let xData = res.data.DAYS.map(m=>{
- let arr = m.split('-')
- if(this.type=='骞�'){
- return `${arr[1]}鏈坄
- }else{
- return `${arr[1]}-${arr[2]}`
- }
- })
- this.chartData0.xData = xData
- this.chartData1.xData = xData
- this.chartData0.yData[0].data = this.pageData.RECETENDAYS
- this.chartData1.yData[0].data = this.pageData.RECETENDAYS
- this.chartData1.yData[1].data = this.pageData.FINISHTENDAYS
- this.loading = false;
- this.chartConfig0.isLoading = true
- this.chartConfig1.isLoading = true
- })
+ this.$axios
+ .get(
+ this.$api.report.businessStatisticsByDay +
+ "?startTime=" +
+ this.startTime +
+ "&endTime=" +
+ this.endTime +
+ "&type=" +
+ this.type
+ )
+ .then(res => {
+ if (res.code == 201) return;
+ this.pageData = this.HaveJson(res.data);
+ let xData = res.data.DAYS.map(m => {
+ let arr = m.split("-");
+ if (this.type == "骞�") {
+ return `${arr[1]}鏈坄;
+ } else {
+ return `${arr[1]}-${arr[2]}`;
+ }
+ });
+ this.chartData0.xData = xData;
+ this.chartData1.xData = xData;
+ this.chartData0.yData[0].data = this.pageData.RECETENDAYS;
+ this.chartData1.yData[0].data = this.pageData.RECETENDAYS;
+ this.chartData1.yData[1].data = this.pageData.FINISHTENDAYS;
+ this.loading = false;
+ this.chartConfig0.isLoading = true;
+ this.chartConfig1.isLoading = true;
+ });
},
- handleData(val){
- if(val){
- let num = Math.abs(val)*100
+ handleData(val) {
+ if (val) {
+ let num = Math.abs(val) * 100;
return num.toFixed(0);
- }else{
- return '0'
+ } else {
+ return "0";
}
},
- changeTime(type,m){
- if(m){
- switch(type){
- case '鍛�':
- this.startTime = getYearAndMonthAndDays(new Date(this.time.week.getTime() - 24 * 60 * 60 * 1000))
- this.endTime = getYearAndMonthAndDays(new Date(this.time.week.getTime() + 24 * 60 * 60 * 1000 * 5))
+ changeTime(type, m) {
+ if (m) {
+ switch (type) {
+ case "鍛�":
+ this.startTime = getYearAndMonthAndDays(
+ new Date(this.time.week.getTime() - 24 * 60 * 60 * 1000)
+ );
+ this.endTime = getYearAndMonthAndDays(
+ new Date(this.time.week.getTime() + 24 * 60 * 60 * 1000 * 5)
+ );
break;
- case '鏈�':
+ case "鏈�":
const year = new Date(this.time.month).getFullYear();
- const month = new Date(this.time.month).getMonth();
- const day = new Date(year, month + 1, 0).getDate(); //
+ const month = new Date(this.time.month).getMonth() + 1;
+ const day = new Date(year, month, 0).getDate(); //
// 璁剧疆璧峰鏃ユ湡鍜岀粨鏉熸棩鏈�
- this.startTime = `${year}-${month + 1}-01`
- this.endTime = `${year}-${month + 1}-${day}` // 鏈堟湯
+ this.startTime = `${year}-${month > 9 ? "0" + month : month}-01`;
+ this.endTime = `${year}-${month > 9 ? "0" + month : month}-${day}`; // 鏈堟湯
break;
- case '骞�':
+ case "骞�":
const year0 = new Date(this.time.year).getFullYear();
this.startTime = `${year0}-01-01`; // 骞村垵
this.endTime = `${year0}-12-31`; // 骞存湯
break;
}
- }else{
- this.startTime = getYearAndMonthAndDays(new Date((new Date).getTime() - 24 * 60 * 60 * 1000))
- this.endTime = getYearAndMonthAndDays(new Date((new Date).getTime() + 24 * 60 * 60 * 1000 * 5))
- this.time.week = new Date()
+ } else {
+ this.startTime = getYearAndMonthAndDays(
+ new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
+ );
+ this.endTime = getYearAndMonthAndDays(
+ new Date(new Date().getTime() + 24 * 60 * 60 * 1000 * 5)
+ );
+ this.time.week = new Date();
}
- this.init()
+ this.init();
},
- handlePrice(val){
- if(val>999999){
- return (val/1000000).toFixed(2)+'鐧句竾';
- }else if(val>9999){
- return (val/10000).toFixed(2)+'涓�';
- }else{
+ handlePrice(val) {
+ if (val > 999999) {
+ return (val / 1000000).toFixed(2) + "鐧句竾";
+ } else if (val > 9999) {
+ return (val / 10000).toFixed(2) + "涓�";
+ } else {
return val;
}
}
},
- deactivated(){
- this.timers&&clearInterval(this.timers);
+ deactivated() {
+ this.timers && clearInterval(this.timers);
}
-}
+};
</script>
<style scoped>
-.daily-main{
+.daily-main {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
-.daily-content{
+.daily-content {
padding: 20px 0;
box-sizing: border-box;
}
-.daily-card{
+.daily-card {
width: 100%;
- background: #FFFFFF;
+ background: #ffffff;
border-radius: 14px;
- box-shadow: 6px 6px 54px 0px rgba(0,0,0,0.05);
+ box-shadow: 6px 6px 54px 0px rgba(0, 0, 0, 0.05);
padding: 16px;
box-sizing: border-box;
}
-.daily-head{
+.daily-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
-.daily-head-left h4{
+.daily-head-left h4 {
color: #202224;
font-size: 16px;
font-weight: 400;
@@ -330,34 +488,35 @@
opacity: 0.8;
}
-.daily-head-left>span{
- font-family: Nunito Sans-Bold;color: #202224;
+.daily-head-left > span {
+ font-family: Nunito Sans-Bold;
+ color: #202224;
font-weight: bold;
font-size: 24px;
display: inline-block;
margin-bottom: 12px;
}
-.daily-head-left-info{
+.daily-head-left-info {
display: flex;
align-items: center;
font-size: 16px;
color: #202224;
}
-.num{
- color: #00B69B;
+.num {
+ color: #00b69b;
}
-.num.active{
- color: #F93C65;
+.num.active {
+ color: #f93c65;
}
-.chart-box{
+.chart-box {
padding: 16px 24px;
box-sizing: border-box;
}
-.chart-box h4{
+.chart-box h4 {
color: #202224;
font-family: PingFang SC-Regular;
font-weight: 400;
@@ -365,7 +524,7 @@
margin-bottom: 16px;
}
-.chart{
+.chart {
width: 100%;
height: 450px;
}
diff --git a/src/components/view/b4-inspection-item-statistics.vue b/src/components/view/b4-inspection-item-statistics.vue
index 5654875..e356bfe 100644
--- a/src/components/view/b4-inspection-item-statistics.vue
+++ b/src/components/view/b4-inspection-item-statistics.vue
@@ -3,7 +3,7 @@
<div class="inspection-content" style="height:100%">
<div class="time" style="margin-bottom: 10px;">
<el-radio-group v-model="type" size="small">
- <el-radio-button label="鍛�" ></el-radio-button>
+ <el-radio-button label="鍛�"></el-radio-button>
<el-radio-button label="鏈�"></el-radio-button>
<el-radio-button label="骞�"></el-radio-button>
</el-radio-group>
@@ -11,401 +11,558 @@
v-model="time.week"
type="week"
format="yyyy 绗� WW 鍛�"
- placeholder="閫夋嫨鍛�" size="small" v-if="type=='鍛�'" @change="m=>changeTime(type,m)">
+ placeholder="閫夋嫨鍛�"
+ size="small"
+ v-if="type == '鍛�'"
+ @change="m => changeTime(type, m)"
+ >
</el-date-picker>
<el-date-picker
v-model="time.month"
type="month"
- placeholder="閫夋嫨鏈�" size="small" v-if="type=='鏈�'" @change="m=>changeTime(type,m)">
+ placeholder="閫夋嫨鏈�"
+ size="small"
+ v-if="type == '鏈�'"
+ @change="m => changeTime(type, m)"
+ >
</el-date-picker>
<el-date-picker
v-model="time.year"
type="year"
- placeholder="閫夋嫨骞�" size="small" v-if="type=='骞�'" @change="m=>changeTime(type,m)">
+ placeholder="閫夋嫨骞�"
+ size="small"
+ v-if="type == '骞�'"
+ @change="m => changeTime(type, m)"
+ >
</el-date-picker>
</div>
<el-row :gutter="20">
- <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
+ <el-col
+ :xs="12"
+ :sm="8"
+ :md="6"
+ :lg="4"
+ :xl="4"
+ style="margin-bottom: 16px;"
+ >
<div class="inspection-card">
<div class="inspection-head">
<div class="inspection-head-left">
- <h4>鏈瑊{type}}椤圭洰鎺ユ敹</h4>
- <span >{{ pageData.RECEVICE }}</span>
+ <h4>鏈瑊{ type }}椤圭洰鎺ユ敹</h4>
+ <span>{{ pageData.RECEVICE }}</span>
</div>
- <img src="../../../static/img/daliy-0.svg" alt="" srcset="">
+ <img src="../../../static/img/daliy-0.svg" alt="" srcset="" />
</div>
<div class="inspection-head-left-info">
- <img :src="`../../../static/img/daliy-${pageData.RECEIVE_RATIO<0?'down':'up'}.svg`" alt="">
- <span :class="{active:pageData.RECEIVE_RATIO<0}" class="num" v-html="` ${handleData(pageData.RECEIVE_RATIO)}% `"></span>
- <span style="font-size: 12px;">杈冧笂{{type}}</span>
+ <img
+ :src="
+ `../../../static/img/daliy-${
+ pageData.RECEIVE_RATIO < 0 ? 'down' : 'up'
+ }.svg`
+ "
+ alt=""
+ />
+ <span
+ :class="{ active: pageData.RECEIVE_RATIO < 0 }"
+ class="num"
+ v-html="` ${handleData(pageData.RECEIVE_RATIO)}% `"
+ ></span>
+ <span style="font-size: 12px;">杈冧笂{{ type }}</span>
</div>
</div>
</el-col>
- <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
+ <el-col
+ :xs="12"
+ :sm="8"
+ :md="6"
+ :lg="4"
+ :xl="4"
+ style="margin-bottom: 16px;"
+ >
<div class="inspection-card">
<div class="inspection-head">
<div class="inspection-head-left">
- <h4>鏈瑊{type}}椤圭洰瀹屾垚</h4>
- <span >{{ pageData.FINISHE }}</span>
+ <h4>鏈瑊{ type }}椤圭洰瀹屾垚</h4>
+ <span>{{ pageData.FINISHE }}</span>
</div>
- <img src="../../../static/img/daliy-1.svg" alt="" srcset="">
+ <img src="../../../static/img/daliy-1.svg" alt="" srcset="" />
</div>
<div class="inspection-head-left-info">
- <img :src="`../../../static/img/daliy-${pageData.FINISHE_RATIO<0?'down':'up'}.svg`" alt="">
- <span :class="{active:pageData.FINISHE_RATIO<0}" class="num" v-html="` ${handleData(pageData.FINISHE_RATIO)}% `"></span>
- <span style="font-size: 12px;">杈冧笂{{type}}</span>
+ <img
+ :src="
+ `../../../static/img/daliy-${
+ pageData.FINISHE_RATIO < 0 ? 'down' : 'up'
+ }.svg`
+ "
+ alt=""
+ />
+ <span
+ :class="{ active: pageData.FINISHE_RATIO < 0 }"
+ class="num"
+ v-html="` ${handleData(pageData.FINISHE_RATIO)}% `"
+ ></span>
+ <span style="font-size: 12px;">杈冧笂{{ type }}</span>
</div>
</div>
</el-col>
- <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
+ <el-col
+ :xs="12"
+ :sm="8"
+ :md="6"
+ :lg="4"
+ :xl="4"
+ style="margin-bottom: 16px;"
+ >
<div class="inspection-card">
<div class="inspection-head">
<div class="inspection-head-left">
- <h4>鏈瑊{type}}椤圭洰鍓╀綑</h4>
- <span >{{ pageData.SURPLUS }}</span>
+ <h4>鏈瑊{ type }}椤圭洰鍓╀綑</h4>
+ <span>{{ pageData.SURPLUS }}</span>
</div>
- <img src="../../../static/img/daliy-2.svg" alt="" srcset="">
+ <img src="../../../static/img/daliy-2.svg" alt="" srcset="" />
</div>
<div class="inspection-head-left-info">
- <img :src="`../../../static/img/daliy-${pageData.SURPLUS_RATIO<0?'down':'up'}.svg`" alt="">
- <span :class="{active:pageData.SURPLUS_RATIO<0}" class="num" v-html="` ${handleData(pageData.SURPLUS_RATIO)}% `"></span>
- <span style="font-size: 12px;">杈冧笂{{type}}</span>
+ <img
+ :src="
+ `../../../static/img/daliy-${
+ pageData.SURPLUS_RATIO < 0 ? 'down' : 'up'
+ }.svg`
+ "
+ alt=""
+ />
+ <span
+ :class="{ active: pageData.SURPLUS_RATIO < 0 }"
+ class="num"
+ v-html="` ${handleData(pageData.SURPLUS_RATIO)}% `"
+ ></span>
+ <span style="font-size: 12px;">杈冧笂{{ type }}</span>
</div>
</div>
</el-col>
- <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
- <div class="inspection-card inspection-head" style="flex-direction: column;padding-bottom: 5px;">
- <h4 style="margin-bottom: 5px;">鏈瑊{type}}椤圭洰鍚堟牸鐜�</h4>
- <echart-module :id="'inspection-qualified'" :config="chartConfig2" :datas="chartData2" style="align-self: center;"></echart-module>
+ <el-col
+ :xs="12"
+ :sm="8"
+ :md="6"
+ :lg="4"
+ :xl="4"
+ style="margin-bottom: 16px;"
+ >
+ <div
+ class="inspection-card inspection-head"
+ style="flex-direction: column;padding-bottom: 5px;"
+ >
+ <h4 style="margin-bottom: 5px;">鏈瑊{ type }}椤圭洰鍚堟牸鐜�</h4>
+ <echart-module
+ :id="'inspection-qualified'"
+ :config="chartConfig2"
+ :datas="chartData2"
+ style="align-self: center;"
+ ></echart-module>
</div>
</el-col>
- <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
- <div class="inspection-card inspection-head" style="flex-direction: column;padding-bottom: 5px;">
- <h4 style="margin-bottom: 5px;">鏈瑊{type}}椤圭洰瀹屾垚鐜�</h4>
- <echart-module :id="'inspection-complete'" :config="chartConfig3" :datas="chartData3" style="align-self: center;"></echart-module>
+ <el-col
+ :xs="12"
+ :sm="8"
+ :md="6"
+ :lg="4"
+ :xl="4"
+ style="margin-bottom: 16px;"
+ >
+ <div
+ class="inspection-card inspection-head"
+ style="flex-direction: column;padding-bottom: 5px;"
+ >
+ <h4 style="margin-bottom: 5px;">鏈瑊{ type }}椤圭洰瀹屾垚鐜�</h4>
+ <echart-module
+ :id="'inspection-complete'"
+ :config="chartConfig3"
+ :datas="chartData3"
+ style="align-self: center;"
+ ></echart-module>
</div>
</el-col>
- <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
- <div class="inspection-card inspection-head" style="flex-direction: column;padding-bottom: 5px;">
- <h4 style="margin-bottom: 5px;">鏈瑊{type}}椤圭洰寤舵湡鐜�</h4>
- <echart-module :id="'inspection-extension'" :config="chartConfig4" :datas="chartData4" style="align-self: center;"></echart-module>
+ <el-col
+ :xs="12"
+ :sm="8"
+ :md="6"
+ :lg="4"
+ :xl="4"
+ style="margin-bottom: 16px;"
+ >
+ <div
+ class="inspection-card inspection-head"
+ style="flex-direction: column;padding-bottom: 5px;"
+ >
+ <h4 style="margin-bottom: 5px;">鏈瑊{ type }}椤圭洰寤舵湡鐜�</h4>
+ <echart-module
+ :id="'inspection-extension'"
+ :config="chartConfig4"
+ :datas="chartData4"
+ style="align-self: center;"
+ ></echart-module>
</div>
</el-col>
</el-row>
<el-row :gutter="20" style="height: calc(100% - 200px);">
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 16px; height: 100%;">
+ <el-col
+ :xs="24"
+ :sm="24"
+ :md="12"
+ :lg="12"
+ :xl="12"
+ style="margin-bottom: 16px; height: 100%;"
+ >
<div class="inspection-card chart-box" style="height: 100%;">
- <h4>鏈瑊{type}}椤圭洰鎺ユ敹閲�</h4>
- <echart-module :id="'inspection-left'" :config="chartConfig0" :datas="chartData0" style="height: calc(100% - 32px);"></echart-module>
+ <h4>鏈瑊{ type }}椤圭洰鎺ユ敹閲�</h4>
+ <echart-module
+ :id="'inspection-left'"
+ :config="chartConfig0"
+ :datas="chartData0"
+ style="height: calc(100% - 32px);"
+ ></echart-module>
</div>
</el-col>
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 16px;height: 100%;">
+ <el-col
+ :xs="24"
+ :sm="24"
+ :md="12"
+ :lg="12"
+ :xl="12"
+ style="margin-bottom: 16px;height: 100%;"
+ >
<div class="inspection-card chart-box" style="height: 100%;">
- <h4>鏈瑊{type}}瀹為檯瀹屾垚椤圭洰涓庢帴鏀堕」鐩姣�</h4>
- <echart-module :id="'inspection-right'" :config="chartConfig1" :datas="chartData1" style="height: calc(100% - 32px);"></echart-module>
+ <h4>鏈瑊{ type }}瀹為檯瀹屾垚椤圭洰涓庢帴鏀堕」鐩姣�</h4>
+ <echart-module
+ :id="'inspection-right'"
+ :config="chartConfig1"
+ :datas="chartData1"
+ style="height: calc(100% - 32px);"
+ ></echart-module>
</div>
</el-col>
</el-row>
</div>
</div>
- </template>
+</template>
- <script>
-
- import EchartModule from '../tool/echart.vue'
- import {
- getYearAndMonthAndDays
- } from '../../util/date'
- export default {
- components: {EchartModule},
- data(){
- return{
- chartConfig0:{
- height: '',
- isLoading:true,
- type:'line'
- },
- chartData0:{
- xData:[],
- yData:[
- {
- title:'椤圭洰鎺ユ敹閲�',
- data:[]
- }
- ]
- },
- chartConfig1:{
- height: '',
- isLoading:true,
- type:'bar'
- },
- chartData1:{
- xData:[],
- yData:[
- {
- title:'鎺ユ敹',
- data:[]
- },
- {
- title:'瀹屾垚',
- data:[]
- },
- ]
- },
- chartConfig2:{
- height: '103px',
- width:'140px',
- isLoading:true,
- type:'pie'
- },
- chartData2:{
- title:'椤圭洰鍚堟牸鐜�',
- percentage:'0',
- color:['#1CCAB8','#E1E4E8'],
- data:[
- {
- name:'鍚堟牸',
- value:'0'
- },
- {
- name:'涓嶅悎鏍�',
- value:'0'
- },
- ]
- },
- chartConfig3:{
- height: '103px',
- width:'140px',
- isLoading:true,
- type:'pie'
- },
- chartData3:{
- title:'椤圭洰瀹屾垚鐜�',
- percentage:'0',
- color:['#FBB647','#E1E4E8'],
- data:[
- {
- name:'瀹屾垚',
- value:'0'
- },
- {
- name:'鏈畬鎴�',
- value:'0'
- },
- ]
- },
- chartConfig4:{
- height: '103px',
- width:'140px',
- isLoading:true,
- type:'pie'
- },
- chartData4:{
- title:'椤瑰欢鏈熺巼',
- percentage:'0',
- color:['#FF3838','#E1E4E8'],
- data:[
- {
- name:'寤舵湡',
- value:'0'
- },
- {
- name:'鏈欢鏈�',
- value:'0'
- },
- ]
- },
- loading:false,
- pageData:{},
- timers:null,
- type:'鍛�',
- time:{
- week:'',
- month:'',
- year:'',
- },
- startTime:'',
- endTime:''
- }
- },
- watch:{
- type(val){
- switch(val){
- case '鍛�':
- this.time.week = new Date()
- this.changeTime(val,this.time.week)
+<script>
+import EchartModule from "../tool/echart.vue";
+import { getYearAndMonthAndDays } from "../../util/date";
+export default {
+ components: { EchartModule },
+ data() {
+ return {
+ chartConfig0: {
+ height: "",
+ isLoading: true,
+ type: "line"
+ },
+ chartData0: {
+ xData: [],
+ yData: [
+ {
+ title: "椤圭洰鎺ユ敹閲�",
+ data: []
+ }
+ ]
+ },
+ chartConfig1: {
+ height: "",
+ isLoading: true,
+ type: "bar"
+ },
+ chartData1: {
+ xData: [],
+ yData: [
+ {
+ title: "鎺ユ敹",
+ data: []
+ },
+ {
+ title: "瀹屾垚",
+ data: []
+ }
+ ]
+ },
+ chartConfig2: {
+ height: "103px",
+ width: "140px",
+ isLoading: true,
+ type: "pie"
+ },
+ chartData2: {
+ title: "椤圭洰鍚堟牸鐜�",
+ percentage: "0",
+ color: ["#1CCAB8", "#E1E4E8"],
+ data: [
+ {
+ name: "鍚堟牸",
+ value: "0"
+ },
+ {
+ name: "涓嶅悎鏍�",
+ value: "0"
+ }
+ ]
+ },
+ chartConfig3: {
+ height: "103px",
+ width: "140px",
+ isLoading: true,
+ type: "pie"
+ },
+ chartData3: {
+ title: "椤圭洰瀹屾垚鐜�",
+ percentage: "0",
+ color: ["#FBB647", "#E1E4E8"],
+ data: [
+ {
+ name: "瀹屾垚",
+ value: "0"
+ },
+ {
+ name: "鏈畬鎴�",
+ value: "0"
+ }
+ ]
+ },
+ chartConfig4: {
+ height: "103px",
+ width: "140px",
+ isLoading: true,
+ type: "pie"
+ },
+ chartData4: {
+ title: "椤瑰欢鏈熺巼",
+ percentage: "0",
+ color: ["#FF3838", "#E1E4E8"],
+ data: [
+ {
+ name: "寤舵湡",
+ value: "0"
+ },
+ {
+ name: "鏈欢鏈�",
+ value: "0"
+ }
+ ]
+ },
+ loading: false,
+ pageData: {},
+ timers: null,
+ type: "鍛�",
+ time: {
+ week: "",
+ month: "",
+ year: ""
+ },
+ startTime: "",
+ endTime: ""
+ };
+ },
+ watch: {
+ type(val) {
+ switch (val) {
+ case "鍛�":
+ this.time.week = new Date();
+ this.changeTime(val, this.time.week);
break;
- case '鏈�':
- this.time.month = new Date()
- this.changeTime(val,this.time.month)
+ case "鏈�":
+ this.time.month = new Date();
+ this.changeTime(val, this.time.month);
break;
- case '骞�':
- this.time.year = new Date()
- this.changeTime(val,this.time.year)
+ case "骞�":
+ this.time.year = new Date();
+ this.changeTime(val, this.time.year);
break;
}
}
},
- mounted(){
- this.changeTime(this.type)
- // this.timers&&clearInterval(this.timers);
- // setInterval(this.changeTime(this.type),1000*60*5)
- },
- methods:{
- init(){
- this.chartConfig0.isLoading = false
- this.chartConfig1.isLoading = false
- this.chartConfig2.isLoading = false
- this.chartConfig3.isLoading = false
- this.chartConfig4.isLoading = false
+ mounted() {
+ this.changeTime(this.type);
+ // this.timers&&clearInterval(this.timers);
+ // setInterval(this.changeTime(this.type),1000*60*5)
+ },
+ methods: {
+ init() {
+ this.chartConfig0.isLoading = false;
+ this.chartConfig1.isLoading = false;
+ this.chartConfig2.isLoading = false;
+ this.chartConfig3.isLoading = false;
+ this.chartConfig4.isLoading = false;
this.loading = true;
- this.$axios.get(this.$api.report.testProductByDay+'?startTime='+this.startTime+'&endTime='+this.endTime+'&type='+this.type).then(res => {
- if (res.code == 201) return
- this.pageData = this.HaveJson(res.data)
- let xData = res.data.DAYS.map(m=>{
- let arr = m.split('-')
- if(this.type=='骞�'){
- return `${arr[1]}鏈坄
- }else{
- return `${arr[1]}-${arr[2]}`
- }
- })
- this.chartData0.xData = xData
- this.chartData1.xData = xData
- this.chartData0.yData[0].data = this.pageData.RECETENDAYS
- this.chartData1.yData[0].data = this.pageData.RECETENDAYS
- this.chartData1.yData[1].data = this.pageData.FINISHTENDAYS
- this.chartData2.percentage = (this.pageData.ACCEPT_RATE_TODAY*100).toFixed(0)+'%'
- this.chartData3.percentage = (this.pageData.FINISH_RATE_TODAY*100).toFixed(0)+'%'
- this.chartData4.percentage = (this.pageData.DELAY_RATE_TODAY*100).toFixed(0)+'%'
- this.chartData2.data[0].value = this.pageData.ACCEPT
- this.chartData2.data[1].value = this.pageData.FINISHE - this.pageData.ACCEPT
- this.loading = false;
- this.chartData3.data[0].value = this.pageData.FINISHE
- this.chartData3.data[1].value = this.pageData.RECEVICE - this.pageData.FINISHE
- this.chartData4.data[0].value = this.pageData.SURPLUS
- this.chartData4.data[1].value = this.pageData.RECEVICE - this.pageData.SURPLUS
- this.chartConfig0.isLoading = true
- this.chartConfig1.isLoading = true
- this.chartConfig2.isLoading = true
- this.chartConfig3.isLoading = true
- this.chartConfig4.isLoading = true
- })
- },
- handleData(val){
- if(val){
- let num = Math.abs(val)*100
- return num.toFixed(0);
- }else{
- return '0'
- }
- },
- changeTime(type,m){
- if(m){
- switch(type){
- case '鍛�':
- this.startTime = getYearAndMonthAndDays(new Date(this.time.week.getTime() - 24 * 60 * 60 * 1000))
- this.endTime = getYearAndMonthAndDays(new Date(this.time.week.getTime() + 24 * 60 * 60 * 1000 * 5))
- break;
- case '鏈�':
- const year = new Date(this.time.month).getFullYear();
- const month = new Date(this.time.month).getMonth();
- const day = new Date(year, month + 1, 0).getDate(); //
- // 璁剧疆璧峰鏃ユ湡鍜岀粨鏉熸棩鏈�
- this.startTime = `${year}-${month + 1}-01`
- this.endTime = `${year}-${month + 1}-${day}` // 鏈堟湯
- break;
- case '骞�':
- const year0 = new Date(this.time.year).getFullYear();
- this.startTime = `${year0}-01-01`; // 骞村垵
- this.endTime = `${year0}-12-31`; // 骞存湯
- break;
- }
- }else{
- this.startTime = getYearAndMonthAndDays(new Date((new Date).getTime() - 24 * 60 * 60 * 1000))
- this.endTime = getYearAndMonthAndDays(new Date((new Date).getTime() + 24 * 60 * 60 * 1000 * 5))
- this.time.week = new Date()
- }
- this.init()
+ this.$axios
+ .get(
+ this.$api.report.testProductByDay +
+ "?startTime=" +
+ this.startTime +
+ "&endTime=" +
+ this.endTime +
+ "&type=" +
+ this.type
+ )
+ .then(res => {
+ if (res.code == 201) return;
+ this.pageData = this.HaveJson(res.data);
+ let xData = res.data.DAYS.map(m => {
+ let arr = m.split("-");
+ if (this.type == "骞�") {
+ return `${arr[1]}鏈坄;
+ } else {
+ return `${arr[1]}-${arr[2]}`;
+ }
+ });
+ this.chartData0.xData = xData;
+ this.chartData1.xData = xData;
+ this.chartData0.yData[0].data = this.pageData.RECETENDAYS;
+ this.chartData1.yData[0].data = this.pageData.RECETENDAYS;
+ this.chartData1.yData[1].data = this.pageData.FINISHTENDAYS;
+ this.chartData2.percentage =
+ (this.pageData.ACCEPT_RATE_TODAY * 100).toFixed(0) + "%";
+ this.chartData3.percentage =
+ (this.pageData.FINISH_RATE_TODAY * 100).toFixed(0) + "%";
+ this.chartData4.percentage =
+ (this.pageData.DELAY_RATE_TODAY * 100).toFixed(0) + "%";
+ this.chartData2.data[0].value = this.pageData.ACCEPT;
+ this.chartData2.data[1].value =
+ this.pageData.FINISHE - this.pageData.ACCEPT;
+ this.loading = false;
+ this.chartData3.data[0].value = this.pageData.FINISHE;
+ this.chartData3.data[1].value =
+ this.pageData.RECEVICE - this.pageData.FINISHE;
+ this.chartData4.data[0].value = this.pageData.SURPLUS;
+ this.chartData4.data[1].value =
+ this.pageData.RECEVICE - this.pageData.SURPLUS;
+ this.chartConfig0.isLoading = true;
+ this.chartConfig1.isLoading = true;
+ this.chartConfig2.isLoading = true;
+ this.chartConfig3.isLoading = true;
+ this.chartConfig4.isLoading = true;
+ });
+ },
+ handleData(val) {
+ if (val) {
+ let num = Math.abs(val) * 100;
+ return num.toFixed(0);
+ } else {
+ return "0";
}
},
- deactivated(){
- this.timers&&clearInterval(this.timers);
+ changeTime(type, m) {
+ if (m) {
+ switch (type) {
+ case "鍛�":
+ this.startTime = getYearAndMonthAndDays(
+ new Date(this.time.week.getTime() - 24 * 60 * 60 * 1000)
+ );
+ this.endTime = getYearAndMonthAndDays(
+ new Date(this.time.week.getTime() + 24 * 60 * 60 * 1000 * 5)
+ );
+ break;
+ case "鏈�":
+ const year = new Date(this.time.month).getFullYear();
+ const month = new Date(this.time.month).getMonth() + 1;
+ const day = new Date(year, month, 0).getDate(); //
+ // 璁剧疆璧峰鏃ユ湡鍜岀粨鏉熸棩鏈�
+ this.startTime = `${year}-${month > 9 ? "0" + month : month}-01`;
+ this.endTime = `${year}-${month > 9 ? "0" + month : month}-${day}`; // 鏈堟湯
+ break;
+ case "骞�":
+ const year0 = new Date(this.time.year).getFullYear();
+ this.startTime = `${year0}-01-01`; // 骞村垵
+ this.endTime = `${year0}-12-31`; // 骞存湯
+ break;
+ }
+ } else {
+ this.startTime = getYearAndMonthAndDays(
+ new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
+ );
+ this.endTime = getYearAndMonthAndDays(
+ new Date(new Date().getTime() + 24 * 60 * 60 * 1000 * 5)
+ );
+ this.time.week = new Date();
+ }
+ this.init();
}
+ },
+ deactivated() {
+ this.timers && clearInterval(this.timers);
}
- </script>
+};
+</script>
- <style scoped>
- .inspection-main{
- height: 100%;
- overflow-y: auto;
- overflow-x: hidden;
- }
- .inspection-content{
- padding: 20px 0;
- box-sizing: border-box;
- }
- .inspection-card{
- width: 100%;
- background: #FFFFFF;
- border-radius: 14px;
- box-shadow: 6px 6px 54px 0px rgba(0,0,0,0.05);
- padding: 16px;
+<style scoped>
+.inspection-main {
+ height: 100%;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+.inspection-content {
+ padding: 20px 0;
box-sizing: border-box;
- }
+}
+.inspection-card {
+ width: 100%;
+ background: #ffffff;
+ border-radius: 14px;
+ box-shadow: 6px 6px 54px 0px rgba(0, 0, 0, 0.05);
+ padding: 16px;
+ box-sizing: border-box;
+}
- .inspection-head{
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- }
+.inspection-head {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+}
- .inspection-head h4{
- color: #202224;
- font-size: 16px;
- font-weight: 400;
- margin-bottom: 20px;
- opacity: 0.8;
- }
+.inspection-head h4 {
+ color: #202224;
+ font-size: 16px;
+ font-weight: 400;
+ margin-bottom: 20px;
+ opacity: 0.8;
+}
- .inspection-head-left>span{
- font-family: Nunito Sans-Bold;color: #202224;
- font-weight: bold;
- font-size: 24px;
- display: inline-block;
- margin-bottom: 18px;
- }
+.inspection-head-left > span {
+ font-family: Nunito Sans-Bold;
+ color: #202224;
+ font-weight: bold;
+ font-size: 24px;
+ display: inline-block;
+ margin-bottom: 18px;
+}
- .inspection-head-left-info{
- display: flex;
- align-items: center;
- font-size: 16px;
- color: #202224;
- }
+.inspection-head-left-info {
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ color: #202224;
+}
- .num{
- color: #00B69B;
- }
+.num {
+ color: #00b69b;
+}
- .num.active{
- color: #F93C65;
- }
+.num.active {
+ color: #f93c65;
+}
- .chart-box{
- padding: 16px 24px;
- box-sizing: border-box;
- }
+.chart-box {
+ padding: 16px 24px;
+ box-sizing: border-box;
+}
- .chart-box h4{
- color: #202224;
- font-family: PingFang SC-Regular;
- font-weight: 400;
- font-size: 24px;
- margin-bottom: 16px;
- }
+.chart-box h4 {
+ color: #202224;
+ font-family: PingFang SC-Regular;
+ font-weight: 400;
+ font-size: 24px;
+ margin-bottom: 16px;
+}
- .chart{
- width: 100%;
- height: 450px;
- }
- </style>
+.chart {
+ width: 100%;
+ height: 450px;
+}
+</style>
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