更新首页

This commit is contained in:
朱文强 2025-02-19 14:14:57 +08:00
parent d5744b4f3d
commit 491b88f220
12 changed files with 541 additions and 151 deletions

View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2024-04-18 16:53:17 * @Date: 2024-04-18 16:53:17
* @LastEditors: zwq * @LastEditors: zwq
* @LastEditTime: 2024-09-06 14:35:13 * @LastEditTime: 2025-02-17 15:47:58
* @Description: * @Description:
*/ */
@ -61,3 +61,12 @@ export function getData(query) {
params: query params: query
}) })
} }
// 获得成本首页 -详细首页数据
export function getDetailData(query) {
return request({
url: '/monitoring/cost-homepage/getDetailData',
method: 'get',
params: query
})
}

View File

@ -79,6 +79,12 @@ export const constantRoutes = [
component: (resolve) => require(["@/views/cost/index"], resolve), component: (resolve) => require(["@/views/cost/index"], resolve),
name: "首页", name: "首页",
meta: { title: "首页", icon: "dashboard", affix: true }, meta: { title: "首页", icon: "dashboard", affix: true },
},
{
path: "indexDetail",
component: (resolve) => require(["@/views/cost/indexDetail"], resolve),
name: "首页详细",
meta: { title: "首页详细", icon: "dashboard"},
hidden: true hidden: true
}, },
], ],

View File

@ -215,13 +215,16 @@ export default {
{ {
type: 'datePicker', type: 'datePicker',
label: '时间范围', label: '时间范围',
dateType: 'daterange', dateType: 'datetimerange',
format: 'yyyy-MM-dd', format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss', valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-', rangeSeparator: '-',
startPlaceholder: '开始时间', startPlaceholder: '开始时间',
endPlaceholder: '结束时间', endPlaceholder: '结束时间',
defaultTime: ['08:30:00', '08:30:00'],
param: 'searchTime', param: 'searchTime',
width: 350,
clearable: false,
}, },
{ {
type: 'button', type: 'button',
@ -277,8 +280,6 @@ export default {
this.tableProps[0].filter = (val) => this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年{m}月{d}日'); parseTime(val, '{y}年{m}月{d}日');
} }
this.formConfig2[1].startPlaceholder = '开始时间';
this.formConfig2[1].endPlaceholder = '结束时间';
switch (val.btnName) { switch (val.btnName) {
case 'search': case 'search':
this.listQuery.pageNo = 1; this.listQuery.pageNo = 1;
@ -286,10 +287,11 @@ export default {
this.listQuery.energyTypeId = val.name || null; this.listQuery.energyTypeId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1; this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null; this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime ? val.searchTime[1] : null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59' ? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null; : null;
if (this.activeName === 'his') {
this.getDataList(); this.getDataList();
} else { } else {
this.getDataList2(); this.getDataList2();
@ -304,9 +306,14 @@ export default {
this.listQuery.energyTypeId = val.name || null; this.listQuery.energyTypeId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1; this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null; this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1]
: null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59' ? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null; : null;
}
this.handleExport(); this.handleExport();
break; break;
default: default:
@ -328,10 +335,14 @@ export default {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00'; this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59'; this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
this.formConfig2[1].startPlaceholder = parseTime(start).substr(0, 10); this.$nextTick(() => {
this.formConfig2[1].endPlaceholder = parseTime(end).substr(0, 10); this.$refs.searchBarForm2.formInline.searchTime = [
this.listQuery.startTime,
this.listQuery.endTime,
];
});
this.listQuery.name = null; this.listQuery.name = null;
this.listQuery.pageNo = 1; this.listQuery.pageNo = 1;
this.getDataList2(); this.getDataList2();

View File

@ -190,13 +190,16 @@ export default {
{ {
type: 'datePicker', type: 'datePicker',
label: '时间范围', label: '时间范围',
dateType: 'daterange', dateType: 'datetimerange',
format: 'yyyy-MM-dd', format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss', valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-', rangeSeparator: '-',
startPlaceholder: '开始时间', startPlaceholder: '开始时间',
endPlaceholder: '结束时间', endPlaceholder: '结束时间',
defaultTime: ['08:30:00', '08:30:00'],
param: 'searchTime', param: 'searchTime',
width: 350,
clearable: false,
}, },
{ {
type: 'button', type: 'button',
@ -252,8 +255,6 @@ export default {
this.tableProps[0].filter = (val) => this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年{m}月{d}日'); parseTime(val, '{y}年{m}月{d}日');
} }
this.formConfig2[1].startPlaceholder = '开始时间';
this.formConfig2[1].endPlaceholder = '结束时间';
switch (val.btnName) { switch (val.btnName) {
case 'search': case 'search':
this.listQuery.pageNo = 1; this.listQuery.pageNo = 1;
@ -262,9 +263,12 @@ export default {
this.listQuery.statisticType = val.statisticType || 1; this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null; this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59' ? val.searchTime[1]
: null; : null;
if (this.activeName === 'his') { if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
this.getDataList(); this.getDataList();
} else { } else {
this.getDataList2(); this.getDataList2();
@ -279,9 +283,14 @@ export default {
this.listQuery.name = val.name || null; this.listQuery.name = val.name || null;
this.listQuery.statisticType = val.statisticType || 1; this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null; this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1]
: null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59' ? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null; : null;
}
this.handleExport(); this.handleExport();
break; break;
default: default:
@ -303,10 +312,14 @@ export default {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00'; this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59'; this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
this.formConfig2[1].startPlaceholder = parseTime(start).substr(0, 10); this.$nextTick(() => {
this.formConfig2[1].endPlaceholder = parseTime(end).substr(0, 10); this.$refs.searchBarForm2.formInline.searchTime = [
this.listQuery.startTime,
this.listQuery.endTime,
];
});
this.listQuery.name = null; this.listQuery.name = null;
this.listQuery.pageNo = 1; this.listQuery.pageNo = 1;
this.getDataList2(); this.getDataList2();

View File

@ -178,13 +178,15 @@ export default {
{ {
type: 'datePicker', type: 'datePicker',
label: '时间范围', label: '时间范围',
dateType: 'daterange', dateType: 'datetimerange',
format: 'yyyy-MM-dd', format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss', valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-', rangeSeparator: '-',
startPlaceholder: '开始时间', startPlaceholder: '开始时间',
endPlaceholder: '结束时间', endPlaceholder: '结束时间',
defaultTime: ['08:30:00', '08:30:00'],
param: 'searchTime', param: 'searchTime',
width: 350,
}, },
{ {
type: 'button', type: 'button',
@ -248,7 +250,7 @@ export default {
this.listQuery.statisticType = val.statisticType || 1; this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null; this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59' ? val.searchTime[1]
: null; : null;
if (this.activeName === 'his') { if (this.activeName === 'his') {
this.getDataList(); this.getDataList();
@ -266,7 +268,7 @@ export default {
this.listQuery.statisticType = val.statisticType || 1; this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null; this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59' ? val.searchTime[1]
: null; : null;
this.handleExport(); this.handleExport();
break; break;

View File

@ -233,13 +233,16 @@ export default {
{ {
type: 'datePicker', type: 'datePicker',
label: '时间范围', label: '时间范围',
dateType: 'daterange', dateType: 'datetimerange',
format: 'yyyy-MM-dd', format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss', valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-', rangeSeparator: '-',
startPlaceholder: '开始时间', startPlaceholder: '开始时间',
endPlaceholder: '结束时间', endPlaceholder: '结束时间',
defaultTime: ['08:30:00', '08:30:00'],
param: 'searchTime', param: 'searchTime',
width: 350,
clearable: false,
}, },
{ {
type: 'select', type: 'select',
@ -303,8 +306,6 @@ export default {
this.tableProps[0].filter = (val) => this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年{m}月{d}日'); parseTime(val, '{y}年{m}月{d}日');
} }
this.formConfig2[0].startPlaceholder = '开始时间';
this.formConfig2[0].endPlaceholder = '结束时间';
switch (val.btnName) { switch (val.btnName) {
case 'search': case 'search':
this.listQuery.pageNo = 1; this.listQuery.pageNo = 1;
@ -313,9 +314,12 @@ export default {
this.listQuery.statisticType = val.statisticType || 1; this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null; this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59' ? val.searchTime[1]
: null; : null;
if (this.activeName === 'his') { if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
this.getDataList(); this.getDataList();
} else { } else {
this.getDataList2(); this.getDataList2();
@ -330,9 +334,14 @@ export default {
this.listQuery.bindObjectId = val.name || null; this.listQuery.bindObjectId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1; this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null; this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1]
: null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59' ? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null; : null;
}
this.handleExport(); this.handleExport();
break; break;
default: default:
@ -354,10 +363,14 @@ export default {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00'; this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59'; this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
this.formConfig2[0].startPlaceholder = parseTime(start).substr(0, 10); this.$nextTick(() => {
this.formConfig2[0].endPlaceholder = parseTime(end).substr(0, 10); this.$refs.searchBarForm2.formInline.searchTime = [
this.listQuery.startTime,
this.listQuery.endTime,
];
});
this.listQuery.name = null; this.listQuery.name = null;
this.listQuery.pageNo = 1; this.listQuery.pageNo = 1;
this.getDataList2(); this.getDataList2();

View File

@ -1,7 +1,8 @@
<template> <template>
<div class="home-page"> <div class="home-page">
<div class="date-tabs"> <div class="date-tabs">
<el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true"> <!-- @tab-click="handleClick" -->
<el-tabs v-model="activeName" @tab-click="timedayChange" :stretch="true">
<el-tab-pane <el-tab-pane
:label="'\u2002\u2002日\u2002\u2002'" :label="'\u2002\u2002日\u2002\u2002'"
name="日"></el-tab-pane> name="日"></el-tab-pane>
@ -15,8 +16,28 @@
:label="'\u2002\u2002年\u2002\u2002'" :label="'\u2002\u2002年\u2002\u2002'"
name="年"></el-tab-pane> name="年"></el-tab-pane>
</el-tabs> </el-tabs>
<div class="current-date">( {{ showTime }} )</div> <div class="detail">
<el-date-picker
v-model="timeday"
align="right"
type="date"
format="yyyy-MM-dd"
valueFormat="yyyy-MM-dd"
:clearable="false"
@change="timedayChange"
placeholder="选择日期"
:picker-options="pickerOptions"></el-date-picker>
</div>
<!-- <div class="current-date">( {{ showTime }} )</div> -->
<div class="current-time"> <div class="current-time">
<el-button
size="mini"
type="text"
style="font-size: 24px; color: white; margin-right: 30px"
@click="goDetail">
<svg-icon icon-class="list"></svg-icon>
详细
</el-button>
<span style="display: inline-block; margin-right: 16px"> <span style="display: inline-block; margin-right: 16px">
{{ topTime + timeZone }} {{ topTime + timeZone }}
</span> </span>
@ -46,10 +67,10 @@
<div class="num-style">{{ homeData.otherPriceS }}万元</div> <div class="num-style">{{ homeData.otherPriceS }}万元</div>
<div class="unit-style">其他成本</div> <div class="unit-style">其他成本</div>
</el-col> </el-col>
<el-col :span="4" class="num-box shadow"> <!-- <el-col :span="4" class="num-box shadow">
<div class="num-style">{{ homeData.ratioS }}</div> <div class="num-style">{{ homeData.ratioS }}</div>
<div class="unit-style">综合良品率/%</div> <div class="unit-style">综合良品率/%</div>
</el-col> </el-col> -->
<el-col :span="4" class="num-box shadow"> <el-col :span="4" class="num-box shadow">
<div class="num-style">{{ homeData.areaPriceS }}</div> <div class="num-style">{{ homeData.areaPriceS }}</div>
<div class="unit-style">综合每平米成本</div> <div class="unit-style">综合每平米成本</div>
@ -204,17 +225,47 @@ export default {
timeZone: '', timeZone: '',
lineChartData: lineChartData.newVisitis, lineChartData: lineChartData.newVisitis,
homeData: {}, homeData: {},
timeday: moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD'),
startTime: startTime:
moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD') + moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD') +
' 00:00:00', ' 00:00:00',
endTime: endTime:
moment(new Date()).subtract(-1, 'days').format('YYYY-MM-DD') + moment(new Date()).subtract(-1, 'days').format('YYYY-MM-DD') +
' 00:00:00', ' 00:00:00',
pickerOptions: {
disabledDate(time) {
return time.getTime() + 3600 * 1000 * 24 > Date.now();
},
shortcuts: [
{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
},
},
{
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
},
},
{
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
},
},
],
},
}; };
}, },
created() { created() {
this.getTime(); this.getTime();
this.handleClick();
this.showTime = moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD'); this.showTime = moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD');
this.getData(); this.getData();
}, },
@ -228,8 +279,7 @@ export default {
pageSize: 10, pageSize: 10,
pageNo: 1, pageNo: 1,
statisticType: ['', '日', '周', '月', '年'].indexOf(this.activeName), statisticType: ['', '日', '周', '月', '年'].indexOf(this.activeName),
startTime: this.startTime, startTime: this.timeday + ' 00:00:00',
endTime: this.endTime,
}; };
getData(listQuery).then((response) => { getData(listQuery).then((response) => {
this.homeData = response.data; this.homeData = response.data;
@ -238,45 +288,60 @@ export default {
} }
}); });
}, },
handleClick() { timedayChange() {
let start = Date.parse(new Date()); let listQuery = {
let end = Date.parse(new Date()); //
switch (this.activeName) { pageSize: 10,
case '日': pageNo: 1,
this.showTime = moment(new Date()) statisticType: ['', '日', '周', '月', '年'].indexOf(this.activeName),
.subtract(0, 'days') startTime: this.timeday + ' 00:00:00',
.format('YYYY-MM-DD'); };
this.lineChartData = lineChartData.newVisitis; getData(listQuery).then((response) => {
break; this.homeData = response.data;
case '周': for (let i in this.homeData) {
start = moment(new Date()).subtract(6, 'days').format('x'); this.homeData[i] = Number(this.homeData[i]).toFixed(2);
this.showTime =
moment(new Date()).subtract(6, 'days').format('MM-DD') +
' ~ ' +
moment(new Date()).subtract(0, 'days').format('MM-DD');
this.lineChartData = lineChartData.messages;
break;
case '月':
start = moment(new Date()).subtract(1, 'month').format('x');
this.showTime =
moment(new Date()).subtract(1, 'month').format('MM-DD') +
' ~ ' +
moment(new Date()).subtract(0, 'days').format('MM-DD');
this.lineChartData = lineChartData.purchases;
break;
case '年':
start = moment(new Date()).subtract(1, 'year').format('x');
this.showTime =
moment(new Date()).subtract(1, 'year').format('YYYY') +
' ~ ' +
moment(new Date()).subtract(0, 'days').format('YYYY');
this.lineChartData = lineChartData.shoppings;
break;
default:
console.log(val);
} }
this.getData() });
}, },
// handleClick() {
// let start = Date.parse(new Date());
// let end = Date.parse(new Date());
// switch (this.activeName) {
// case '':
// this.showTime = moment(new Date())
// .subtract(0, 'days')
// .format('YYYY-MM-DD');
// this.lineChartData = lineChartData.newVisitis;
// break;
// case '':
// start = moment(new Date()).subtract(6, 'days').format('x');
// this.showTime =
// moment(new Date()).subtract(6, 'days').format('MM-DD') +
// ' ~ ' +
// moment(new Date()).subtract(0, 'days').format('MM-DD');
// this.lineChartData = lineChartData.messages;
// break;
// case '':
// start = moment(new Date()).subtract(1, 'month').format('x');
// this.showTime =
// moment(new Date()).subtract(1, 'month').format('MM-DD') +
// ' ~ ' +
// moment(new Date()).subtract(0, 'days').format('MM-DD');
// this.lineChartData = lineChartData.purchases;
// break;
// case '':
// start = moment(new Date()).subtract(1, 'year').format('x');
// this.showTime =
// moment(new Date()).subtract(1, 'year').format('YYYY') +
// ' ~ ' +
// moment(new Date()).subtract(0, 'days').format('YYYY');
// this.lineChartData = lineChartData.shoppings;
// break;
// default:
// console.log(val);
// }
// this.getData();
// },
getTime() { getTime() {
let _this = this; let _this = this;
this.timer = setInterval(function () { this.timer = setInterval(function () {
@ -286,6 +351,9 @@ export default {
_this.topTime = temp[1]; _this.topTime = temp[1];
}, 1000); }, 1000);
}, },
goDetail() {
this.$router.push({ path: 'indexDetail' });
},
}, },
}; };
</script> </script>
@ -308,6 +376,7 @@ export default {
padding-left: 40px; padding-left: 40px;
padding-top: 20px; padding-top: 20px;
position: relative; position: relative;
margin-bottom: 20px;
} }
:deep(.date-tabs) { :deep(.date-tabs) {
.el-tabs__header { .el-tabs__header {
@ -332,13 +401,25 @@ export default {
color: #0b58ff; color: #0b58ff;
} }
} }
.current-date { .detail {
color: #fff; display: inline-block;
font-size: 18px;
position: absolute; position: absolute;
left: 260px; left: 260px;
top: 14px; top: 10px;
} }
:deep(.detail) {
.el-input__inner {
background-color: transparent;
color: white;
}
}
// .current-date {
// color: #fff;
// font-size: 18px;
// position: absolute;
// left: 260px;
// top: 14px;
// }
.current-time { .current-time {
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;
@ -360,7 +441,7 @@ export default {
position: absolute; position: absolute;
left: 42px; left: 42px;
top: 5px; top: 5px;
font-size: calc(100vw *20 / 1920); font-size: calc(100vw * 20 / 1920);
} }
} }
.box { .box {
@ -376,11 +457,11 @@ export default {
text-align: center; text-align: center;
.num-style { .num-style {
color: #000; color: #000;
font-size: calc(100vw *40 / 1920); font-size: calc(100vw * 40 / 1920);
} }
.unit-style { .unit-style {
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
font-size: calc(100vw *18 / 1920); font-size: calc(100vw * 18 / 1920);
} }
} }
.shadow { .shadow {

View File

@ -0,0 +1,211 @@
<template>
<div class="app-container">
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<base-table
:table-props="tableProps1"
:page="1"
:limit="100"
:table-data="tableData1"></base-table>
<base-table
:table-props="tableProps2"
:page="1"
:limit="100"
:table-data="tableData2"></base-table>
</div>
</template>
<script>
import { getDetailData } from '@/api/cost/allCost';
import moment from 'moment';
const tableProps1 = [
{
prop: 'name',
label: '成本项目-原片',
},
{
prop: 'f1',
label: '本期领用',
children: [
{
prop: 'quantity',
label: '数量',
},
{
prop: 'price',
label: '单价',
},
{
prop: 'sumPrice',
label: '金额',
},
],
},
{
prop: 'f2',
label: '单位成本',
children: [
{
prop: 'sprice',
label: '本月',
},
],
},
];
const tableProps2 = [
{
prop: 'name',
label: '成本项目-加工',
},
{
prop: 'quantity',
label: '耗用数量',
},
{
prop: 'price',
label: '平均耗用单价',
},
{
prop: 'sumPrice',
label: '总成本',
},
{
prop: 'f2',
label: '综合单位成本',
children: [
{
prop: 'sprice',
label: '本月',
},
],
},
];
export default {
data() {
return {
tableProps1,
tableData1: [],
tableProps2,
tableData2: [],
listQuery: {
pageSize: 10,
pageNo: 1,
statisticType: 1,
},
activeName: '日',
startTime:
moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD') +
' 00:00:00',
endTime:
moment(new Date()).subtract(-1, 'days').format('YYYY-MM-DD') +
' 00:00:00',
formConfig: [
{
type: 'select',
label: '维度',
selectOptions: [
{ id: 1, name: '日' },
{ id: 2, name: '周' },
{ id: 3, name: '月' },
{ id: 4, name: '年' },
],
param: 'statisticType',
defaultSelect: 1, // ,
clearable: false,
},
{
//
type: 'datePicker',
// label: '',
dateType: 'date',
placeholder: '选择日期',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd',
param: 'timeday',
clearable: false,
pickerOptions: {
disabledDate(time) {
return (time.getTime()+ 3600 * 1000 * 24) > Date.now();
},
shortcuts: [
{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
},
},
{
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
},
},
{
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
},
},
],
},
},
{
type: 'button',
btnName: '搜索',
name: 'search',
color: 'primary',
},
{
type: 'separate',
},
{
type: 'button',
btnName: '返回首页',
name: 'back',
color: 'warning',
},
],
};
},
created() {},
mounted() {
this.listQuery.startTime = this.startTime;
this.$refs.searchBarForm.formInline.timeday = this.startTime.substr(0, 10)
this.getDataList();
},
methods: {
//
getDataList() {
getDetailData(this.listQuery).then((response) => {
this.tableData1 = response.data.odata;
this.tableData2 = response.data.ddata;
});
},
buttonClick(val) {
switch (val.btnName) {
case 'search':
console.log(val.timeday)
this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.timeday
? val.timeday + ' 00:00:00'
: null;
this.getDataList();
break;
case 'back':
this.$router.go(-1)
break;
default:
console.log(val);
}
},
},
};
</script>

View File

@ -215,13 +215,16 @@ export default {
{ {
type: 'datePicker', type: 'datePicker',
label: '时间范围', label: '时间范围',
dateType: 'daterange', dateType: 'datetimerange',
format: 'yyyy-MM-dd', format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss', valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-', rangeSeparator: '-',
startPlaceholder: '开始时间', startPlaceholder: '开始时间',
endPlaceholder: '结束时间', endPlaceholder: '结束时间',
defaultTime: ['08:30:00', '08:30:00'],
param: 'searchTime', param: 'searchTime',
width: 350,
clearable: false,
}, },
{ {
type: 'button', type: 'button',
@ -245,10 +248,11 @@ export default {
activeName: 'his', activeName: 'his',
tableProps, tableProps,
tableProps2, tableProps2,
tableBtn: [{ tableBtn: [
{
type: 'edit', type: 'edit',
btnName: '编辑', btnName: '编辑',
} },
].filter((v) => v), ].filter((v) => v),
tableData: [], tableData: [],
tableData2: [], tableData2: [],
@ -271,14 +275,10 @@ export default {
methods: { methods: {
buttonClick(val) { buttonClick(val) {
if (val.statisticType === 2) { if (val.statisticType === 2) {
this.tableProps[0].filter = (val) => this.tableProps[0].filter = (val) => parseTime(val, '{y}年第{w}周');
parseTime(val, '{y}年第{w}周'); } else {
}else{ this.tableProps[0].filter = (val) => parseTime(val, '{y}年{m}月{d}日');
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年{m}月{d}日');
} }
this.formConfig2[1].startPlaceholder = '开始时间';
this.formConfig2[1].endPlaceholder = '结束时间';
switch (val.btnName) { switch (val.btnName) {
case 'search': case 'search':
this.listQuery.pageNo = 1; this.listQuery.pageNo = 1;
@ -286,10 +286,11 @@ export default {
this.listQuery.energyTypeId = val.name || null; this.listQuery.energyTypeId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1; this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null; this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime ? val.searchTime[1] : null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59' ? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null; : null;
if (this.activeName === 'his') {
this.getDataList(); this.getDataList();
} else { } else {
this.getDataList2(); this.getDataList2();
@ -304,9 +305,12 @@ export default {
this.listQuery.energyTypeId = val.name || null; this.listQuery.energyTypeId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1; this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null; this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime ? val.searchTime[1] : null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59' ? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null; : null;
}
this.handleExport(); this.handleExport();
break; break;
default: default:
@ -328,16 +332,20 @@ export default {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00'; this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59'; this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
this.formConfig2[1].startPlaceholder = parseTime(start).substr(0, 10); this.$nextTick(() => {
this.formConfig2[1].endPlaceholder = parseTime(end).substr(0, 10); this.$refs.searchBarForm2.formInline.searchTime = [
this.listQuery.startTime,
this.listQuery.endTime,
];
});
this.listQuery.name = null; this.listQuery.name = null;
this.listQuery.pageNo = 1; this.listQuery.pageNo = 1;
this.getDataList2(); this.getDataList2();
} }
}, },
getNavDataList(){ getNavDataList() {
if (this.activeName === 'his') { if (this.activeName === 'his') {
this.getDataList(); this.getDataList();
} else { } else {

View File

@ -212,13 +212,16 @@ export default {
{ {
type: 'datePicker', type: 'datePicker',
label: '时间范围', label: '时间范围',
dateType: 'daterange', dateType: 'datetimerange',
format: 'yyyy-MM-dd', format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss', valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-', rangeSeparator: '-',
startPlaceholder: '开始时间', startPlaceholder: '开始时间',
endPlaceholder: '结束时间', endPlaceholder: '结束时间',
defaultTime: ['08:30:00', '08:30:00'],
param: 'searchTime', param: 'searchTime',
width: 350,
clearable: false,
}, },
{ {
type: 'button', type: 'button',
@ -242,10 +245,11 @@ export default {
activeName: 'his', activeName: 'his',
tableProps, tableProps,
tableProps2, tableProps2,
tableBtn: [{ tableBtn: [
{
type: 'edit', type: 'edit',
btnName: '编辑', btnName: '编辑',
} },
].filter((v) => v), ].filter((v) => v),
tableData: [], tableData: [],
tableData2: [], tableData2: [],
@ -268,14 +272,10 @@ export default {
methods: { methods: {
buttonClick(val) { buttonClick(val) {
if (val.statisticType === 2) { if (val.statisticType === 2) {
this.tableProps[0].filter = (val) => this.tableProps[0].filter = (val) => parseTime(val, '{y}年第{w}周');
parseTime(val, '{y}年第{w}周'); } else {
}else{ this.tableProps[0].filter = (val) => parseTime(val, '{y}年{m}月{d}日');
this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年{m}月{d}日');
} }
this.formConfig2[1].startPlaceholder = '开始时间';
this.formConfig2[1].endPlaceholder = '结束时间';
switch (val.btnName) { switch (val.btnName) {
case 'search': case 'search':
this.listQuery.pageNo = 1; this.listQuery.pageNo = 1;
@ -284,9 +284,12 @@ export default {
this.listQuery.statisticType = val.statisticType || 1; this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null; this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59' ? val.searchTime[1]
: null; : null;
if (this.activeName === 'his') { if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
this.getDataList(); this.getDataList();
} else { } else {
this.getDataList2(); this.getDataList2();
@ -301,9 +304,14 @@ export default {
this.listQuery.materialId = val.name || null; this.listQuery.materialId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1; this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null; this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1]
: null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59' ? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null; : null;
}
this.handleExport(); this.handleExport();
break; break;
default: default:
@ -325,16 +333,20 @@ export default {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00'; this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59'; this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
this.formConfig2[1].startPlaceholder = parseTime(start).substr(0, 10); this.$nextTick(() => {
this.formConfig2[1].endPlaceholder = parseTime(end).substr(0, 10); this.$refs.searchBarForm2.formInline.searchTime = [
this.listQuery.startTime,
this.listQuery.endTime,
];
});
this.listQuery.name = null; this.listQuery.name = null;
this.listQuery.pageNo = 1; this.listQuery.pageNo = 1;
this.getDataList2(); this.getDataList2();
} }
}, },
getNavDataList(){ getNavDataList() {
if (this.activeName === 'his') { if (this.activeName === 'his') {
this.getDataList(); this.getDataList();
} else { } else {

View File

@ -190,13 +190,16 @@ export default {
{ {
type: 'datePicker', type: 'datePicker',
label: '时间范围', label: '时间范围',
dateType: 'daterange', dateType: 'datetimerange',
format: 'yyyy-MM-dd', format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss', valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-', rangeSeparator: '-',
startPlaceholder: '开始时间', startPlaceholder: '开始时间',
endPlaceholder: '结束时间', endPlaceholder: '结束时间',
defaultTime: ['08:30:00', '08:30:00'],
param: 'searchTime', param: 'searchTime',
width: 350,
clearable: false,
}, },
{ {
type: 'button', type: 'button',
@ -260,9 +263,12 @@ export default {
this.listQuery.statisticType = val.statisticType || 1; this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null; this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59' ? val.searchTime[1]
: null; : null;
if (this.activeName === 'his') { if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
this.getDataList(); this.getDataList();
} else { } else {
this.getDataList2(); this.getDataList2();
@ -277,9 +283,14 @@ export default {
this.listQuery.name = val.name || null; this.listQuery.name = val.name || null;
this.listQuery.statisticType = val.statisticType || 1; this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null; this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1]
: null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59' ? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null; : null;
}
this.handleExport(); this.handleExport();
break; break;
default: default:

View File

@ -232,13 +232,16 @@ export default {
{ {
type: 'datePicker', type: 'datePicker',
label: '时间范围', label: '时间范围',
dateType: 'daterange', dateType: 'datetimerange',
format: 'yyyy-MM-dd', format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss', valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-', rangeSeparator: '-',
startPlaceholder: '开始时间', startPlaceholder: '开始时间',
endPlaceholder: '结束时间', endPlaceholder: '结束时间',
defaultTime: ['08:30:00', '08:30:00'],
param: 'searchTime', param: 'searchTime',
width: 350,
clearable: false,
}, },
{ {
type: 'select', type: 'select',
@ -302,8 +305,6 @@ export default {
this.tableProps[0].filter = (val) => this.tableProps[0].filter = (val) =>
parseTime(val, '{y}年{m}月{d}日'); parseTime(val, '{y}年{m}月{d}日');
} }
this.formConfig2[0].startPlaceholder = '开始时间';
this.formConfig2[0].endPlaceholder = '结束时间';
switch (val.btnName) { switch (val.btnName) {
case 'search': case 'search':
this.listQuery.pageNo = 1; this.listQuery.pageNo = 1;
@ -312,9 +313,12 @@ export default {
this.listQuery.statisticType = val.statisticType || 1; this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null; this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59' ? val.searchTime[1]
: null; : null;
if (this.activeName === 'his') { if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null;
this.getDataList(); this.getDataList();
} else { } else {
this.getDataList2(); this.getDataList2();
@ -329,9 +333,14 @@ export default {
this.listQuery.bindObjectId = val.name || null; this.listQuery.bindObjectId = val.name || null;
this.listQuery.statisticType = val.statisticType || 1; this.listQuery.statisticType = val.statisticType || 1;
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null; this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
this.listQuery.endTime = val.searchTime
? val.searchTime[1]
: null;
if (this.activeName === 'his') {
this.listQuery.endTime = val.searchTime this.listQuery.endTime = val.searchTime
? val.searchTime[1].substr(0, 10) + ' 23:59:59' ? val.searchTime[1].substr(0, 10) + ' 23:59:59'
: null; : null;
}
this.handleExport(); this.handleExport();
break; break;
default: default:
@ -353,10 +362,14 @@ export default {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00'; this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59'; this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
this.formConfig2[0].startPlaceholder = parseTime(start).substr(0, 10); this.$nextTick(() => {
this.formConfig2[0].endPlaceholder = parseTime(end).substr(0, 10); this.$refs.searchBarForm2.formInline.searchTime = [
this.listQuery.startTime,
this.listQuery.endTime,
];
});
this.listQuery.name = null; this.listQuery.name = null;
this.listQuery.pageNo = 1; this.listQuery.pageNo = 1;
this.getDataList2(); this.getDataList2();