更新首页
This commit is contained in:
parent
d5744b4f3d
commit
491b88f220
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2024-04-18 16:53:17
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2024-09-06 14:35:13
|
||||
* @LastEditTime: 2025-02-17 15:47:58
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
@ -61,3 +61,12 @@ export function getData(query) {
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获得成本首页 -详细首页数据
|
||||
export function getDetailData(query) {
|
||||
return request({
|
||||
url: '/monitoring/cost-homepage/getDetailData',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
@ -79,6 +79,12 @@ export const constantRoutes = [
|
||||
component: (resolve) => require(["@/views/cost/index"], resolve),
|
||||
name: "首页",
|
||||
meta: { title: "首页", icon: "dashboard", affix: true },
|
||||
},
|
||||
{
|
||||
path: "indexDetail",
|
||||
component: (resolve) => require(["@/views/cost/indexDetail"], resolve),
|
||||
name: "首页详细",
|
||||
meta: { title: "首页详细", icon: "dashboard"},
|
||||
hidden: true
|
||||
},
|
||||
],
|
||||
|
@ -215,13 +215,16 @@ export default {
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间范围',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
dateType: 'datetimerange',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
defaultTime: ['08:30:00', '08:30:00'],
|
||||
param: 'searchTime',
|
||||
width: 350,
|
||||
clearable: false,
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@ -277,8 +280,6 @@ export default {
|
||||
this.tableProps[0].filter = (val) =>
|
||||
parseTime(val, '{y}年{m}月{d}日');
|
||||
}
|
||||
this.formConfig2[1].startPlaceholder = '开始时间';
|
||||
this.formConfig2[1].endPlaceholder = '结束时间';
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
@ -286,10 +287,11 @@ export default {
|
||||
this.listQuery.energyTypeId = val.name || null;
|
||||
this.listQuery.statisticType = val.statisticType || 1;
|
||||
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
: null;
|
||||
this.listQuery.endTime = val.searchTime ? val.searchTime[1] : null;
|
||||
if (this.activeName === 'his') {
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
: null;
|
||||
this.getDataList();
|
||||
} else {
|
||||
this.getDataList2();
|
||||
@ -305,8 +307,13 @@ export default {
|
||||
this.listQuery.statisticType = val.statisticType || 1;
|
||||
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
? val.searchTime[1]
|
||||
: null;
|
||||
if (this.activeName === 'his') {
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
: null;
|
||||
}
|
||||
this.handleExport();
|
||||
break;
|
||||
default:
|
||||
@ -328,10 +335,14 @@ export default {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
|
||||
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
|
||||
this.formConfig2[1].startPlaceholder = parseTime(start).substr(0, 10);
|
||||
this.formConfig2[1].endPlaceholder = parseTime(end).substr(0, 10);
|
||||
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
|
||||
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
|
||||
this.$nextTick(() => {
|
||||
this.$refs.searchBarForm2.formInline.searchTime = [
|
||||
this.listQuery.startTime,
|
||||
this.listQuery.endTime,
|
||||
];
|
||||
});
|
||||
this.listQuery.name = null;
|
||||
this.listQuery.pageNo = 1;
|
||||
this.getDataList2();
|
||||
|
@ -190,13 +190,16 @@ export default {
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间范围',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
dateType: 'datetimerange',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
defaultTime: ['08:30:00', '08:30:00'],
|
||||
param: 'searchTime',
|
||||
width: 350,
|
||||
clearable: false,
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@ -252,8 +255,6 @@ export default {
|
||||
this.tableProps[0].filter = (val) =>
|
||||
parseTime(val, '{y}年{m}月{d}日');
|
||||
}
|
||||
this.formConfig2[1].startPlaceholder = '开始时间';
|
||||
this.formConfig2[1].endPlaceholder = '结束时间';
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
@ -262,9 +263,12 @@ export default {
|
||||
this.listQuery.statisticType = val.statisticType || 1;
|
||||
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
? val.searchTime[1]
|
||||
: null;
|
||||
if (this.activeName === 'his') {
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
: null;
|
||||
this.getDataList();
|
||||
} else {
|
||||
this.getDataList2();
|
||||
@ -280,8 +284,13 @@ export default {
|
||||
this.listQuery.statisticType = val.statisticType || 1;
|
||||
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
? val.searchTime[1]
|
||||
: null;
|
||||
if (this.activeName === 'his') {
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
: null;
|
||||
}
|
||||
this.handleExport();
|
||||
break;
|
||||
default:
|
||||
@ -303,10 +312,14 @@ export default {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
|
||||
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
|
||||
this.formConfig2[1].startPlaceholder = parseTime(start).substr(0, 10);
|
||||
this.formConfig2[1].endPlaceholder = parseTime(end).substr(0, 10);
|
||||
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
|
||||
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
|
||||
this.$nextTick(() => {
|
||||
this.$refs.searchBarForm2.formInline.searchTime = [
|
||||
this.listQuery.startTime,
|
||||
this.listQuery.endTime,
|
||||
];
|
||||
});
|
||||
this.listQuery.name = null;
|
||||
this.listQuery.pageNo = 1;
|
||||
this.getDataList2();
|
||||
|
@ -178,13 +178,15 @@ export default {
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间范围',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
dateType: 'datetimerange',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
defaultTime: ['08:30:00', '08:30:00'],
|
||||
param: 'searchTime',
|
||||
width: 350,
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@ -248,7 +250,7 @@ export default {
|
||||
this.listQuery.statisticType = val.statisticType || 1;
|
||||
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
? val.searchTime[1]
|
||||
: null;
|
||||
if (this.activeName === 'his') {
|
||||
this.getDataList();
|
||||
@ -266,7 +268,7 @@ export default {
|
||||
this.listQuery.statisticType = val.statisticType || 1;
|
||||
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
? val.searchTime[1]
|
||||
: null;
|
||||
this.handleExport();
|
||||
break;
|
||||
|
@ -233,13 +233,16 @@ export default {
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间范围',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
dateType: 'datetimerange',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
defaultTime: ['08:30:00', '08:30:00'],
|
||||
param: 'searchTime',
|
||||
width: 350,
|
||||
clearable: false,
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
@ -303,8 +306,6 @@ export default {
|
||||
this.tableProps[0].filter = (val) =>
|
||||
parseTime(val, '{y}年{m}月{d}日');
|
||||
}
|
||||
this.formConfig2[0].startPlaceholder = '开始时间';
|
||||
this.formConfig2[0].endPlaceholder = '结束时间';
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
@ -313,9 +314,12 @@ export default {
|
||||
this.listQuery.statisticType = val.statisticType || 1;
|
||||
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
? val.searchTime[1]
|
||||
: null;
|
||||
if (this.activeName === 'his') {
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
: null;
|
||||
this.getDataList();
|
||||
} else {
|
||||
this.getDataList2();
|
||||
@ -331,8 +335,13 @@ export default {
|
||||
this.listQuery.statisticType = val.statisticType || 1;
|
||||
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
? val.searchTime[1]
|
||||
: null;
|
||||
if (this.activeName === 'his') {
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
: null;
|
||||
}
|
||||
this.handleExport();
|
||||
break;
|
||||
default:
|
||||
@ -354,10 +363,14 @@ export default {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
|
||||
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
|
||||
this.formConfig2[0].startPlaceholder = parseTime(start).substr(0, 10);
|
||||
this.formConfig2[0].endPlaceholder = parseTime(end).substr(0, 10);
|
||||
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
|
||||
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
|
||||
this.$nextTick(() => {
|
||||
this.$refs.searchBarForm2.formInline.searchTime = [
|
||||
this.listQuery.startTime,
|
||||
this.listQuery.endTime,
|
||||
];
|
||||
});
|
||||
this.listQuery.name = null;
|
||||
this.listQuery.pageNo = 1;
|
||||
this.getDataList2();
|
||||
|
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<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
|
||||
:label="'\u2002\u2002日\u2002\u2002'"
|
||||
name="日"></el-tab-pane>
|
||||
@ -15,8 +16,28 @@
|
||||
:label="'\u2002\u2002年\u2002\u2002'"
|
||||
name="年"></el-tab-pane>
|
||||
</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">
|
||||
<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">
|
||||
{{ topTime + timeZone }}
|
||||
</span>
|
||||
@ -46,10 +67,10 @@
|
||||
<div class="num-style">{{ homeData.otherPriceS }}万元</div>
|
||||
<div class="unit-style">其他成本</div>
|
||||
</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="unit-style">综合良品率/%</div>
|
||||
</el-col>
|
||||
</el-col> -->
|
||||
<el-col :span="4" class="num-box shadow">
|
||||
<div class="num-style">{{ homeData.areaPriceS }}元</div>
|
||||
<div class="unit-style">综合每平米成本</div>
|
||||
@ -204,17 +225,47 @@ export default {
|
||||
timeZone: '',
|
||||
lineChartData: lineChartData.newVisitis,
|
||||
homeData: {},
|
||||
timeday: moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD'),
|
||||
startTime:
|
||||
moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD') +
|
||||
' 00:00:00',
|
||||
endTime:
|
||||
moment(new Date()).subtract(-1, 'days').format('YYYY-MM-DD') +
|
||||
' 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() {
|
||||
this.getTime();
|
||||
this.handleClick();
|
||||
this.showTime = moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD');
|
||||
this.getData();
|
||||
},
|
||||
@ -228,8 +279,7 @@ export default {
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
statisticType: ['', '日', '周', '月', '年'].indexOf(this.activeName),
|
||||
startTime: this.startTime,
|
||||
endTime: this.endTime,
|
||||
startTime: this.timeday + ' 00:00:00',
|
||||
};
|
||||
getData(listQuery).then((response) => {
|
||||
this.homeData = response.data;
|
||||
@ -238,45 +288,60 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
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()
|
||||
timedayChange() {
|
||||
let listQuery = {
|
||||
//分页
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
statisticType: ['', '日', '周', '月', '年'].indexOf(this.activeName),
|
||||
startTime: this.timeday + ' 00:00:00',
|
||||
};
|
||||
getData(listQuery).then((response) => {
|
||||
this.homeData = response.data;
|
||||
for (let i in this.homeData) {
|
||||
this.homeData[i] = Number(this.homeData[i]).toFixed(2);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 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() {
|
||||
let _this = this;
|
||||
this.timer = setInterval(function () {
|
||||
@ -286,6 +351,9 @@ export default {
|
||||
_this.topTime = temp[1];
|
||||
}, 1000);
|
||||
},
|
||||
goDetail() {
|
||||
this.$router.push({ path: 'indexDetail' });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -308,6 +376,7 @@ export default {
|
||||
padding-left: 40px;
|
||||
padding-top: 20px;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
:deep(.date-tabs) {
|
||||
.el-tabs__header {
|
||||
@ -332,13 +401,25 @@ export default {
|
||||
color: #0b58ff;
|
||||
}
|
||||
}
|
||||
.current-date {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
.detail {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
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 {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
@ -360,7 +441,7 @@ export default {
|
||||
position: absolute;
|
||||
left: 42px;
|
||||
top: 5px;
|
||||
font-size: calc(100vw *20 / 1920);
|
||||
font-size: calc(100vw * 20 / 1920);
|
||||
}
|
||||
}
|
||||
.box {
|
||||
@ -376,11 +457,11 @@ export default {
|
||||
text-align: center;
|
||||
.num-style {
|
||||
color: #000;
|
||||
font-size: calc(100vw *40 / 1920);
|
||||
font-size: calc(100vw * 40 / 1920);
|
||||
}
|
||||
.unit-style {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
font-size: calc(100vw *18 / 1920);
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
}
|
||||
}
|
||||
.shadow {
|
||||
|
211
src/views/cost/indexDetail.vue
Normal file
211
src/views/cost/indexDetail.vue
Normal 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>
|
@ -215,13 +215,16 @@ export default {
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间范围',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
dateType: 'datetimerange',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
defaultTime: ['08:30:00', '08:30:00'],
|
||||
param: 'searchTime',
|
||||
width: 350,
|
||||
clearable: false,
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@ -245,10 +248,11 @@ export default {
|
||||
activeName: 'his',
|
||||
tableProps,
|
||||
tableProps2,
|
||||
tableBtn: [{
|
||||
type: 'edit',
|
||||
btnName: '编辑',
|
||||
}
|
||||
tableBtn: [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: '编辑',
|
||||
},
|
||||
].filter((v) => v),
|
||||
tableData: [],
|
||||
tableData2: [],
|
||||
@ -271,14 +275,10 @@ export default {
|
||||
methods: {
|
||||
buttonClick(val) {
|
||||
if (val.statisticType === 2) {
|
||||
this.tableProps[0].filter = (val) =>
|
||||
parseTime(val, '{y}年第{w}周');
|
||||
}else{
|
||||
this.tableProps[0].filter = (val) =>
|
||||
parseTime(val, '{y}年{m}月{d}日');
|
||||
}
|
||||
this.formConfig2[1].startPlaceholder = '开始时间';
|
||||
this.formConfig2[1].endPlaceholder = '结束时间';
|
||||
this.tableProps[0].filter = (val) => parseTime(val, '{y}年第{w}周');
|
||||
} else {
|
||||
this.tableProps[0].filter = (val) => parseTime(val, '{y}年{m}月{d}日');
|
||||
}
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
@ -286,10 +286,11 @@ export default {
|
||||
this.listQuery.energyTypeId = val.name || null;
|
||||
this.listQuery.statisticType = val.statisticType || 1;
|
||||
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
: null;
|
||||
this.listQuery.endTime = val.searchTime ? val.searchTime[1] : null;
|
||||
if (this.activeName === 'his') {
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
: null;
|
||||
this.getDataList();
|
||||
} else {
|
||||
this.getDataList2();
|
||||
@ -304,9 +305,12 @@ export default {
|
||||
this.listQuery.energyTypeId = val.name || null;
|
||||
this.listQuery.statisticType = val.statisticType || 1;
|
||||
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
: null;
|
||||
this.listQuery.endTime = val.searchTime ? val.searchTime[1] : null;
|
||||
if (this.activeName === 'his') {
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
: null;
|
||||
}
|
||||
this.handleExport();
|
||||
break;
|
||||
default:
|
||||
@ -328,22 +332,26 @@ export default {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
|
||||
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
|
||||
this.formConfig2[1].startPlaceholder = parseTime(start).substr(0, 10);
|
||||
this.formConfig2[1].endPlaceholder = parseTime(end).substr(0, 10);
|
||||
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
|
||||
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
|
||||
this.$nextTick(() => {
|
||||
this.$refs.searchBarForm2.formInline.searchTime = [
|
||||
this.listQuery.startTime,
|
||||
this.listQuery.endTime,
|
||||
];
|
||||
});
|
||||
this.listQuery.name = null;
|
||||
this.listQuery.pageNo = 1;
|
||||
this.getDataList2();
|
||||
}
|
||||
},
|
||||
getNavDataList(){
|
||||
getNavDataList() {
|
||||
if (this.activeName === 'his') {
|
||||
this.getDataList();
|
||||
} else {
|
||||
this.getDataList2();
|
||||
}
|
||||
},
|
||||
},
|
||||
// 获取数据2列表
|
||||
getDataList2() {
|
||||
if (this.listQuery.startTime) {
|
||||
|
@ -212,13 +212,16 @@ export default {
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间范围',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
dateType: 'datetimerange',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
defaultTime: ['08:30:00', '08:30:00'],
|
||||
param: 'searchTime',
|
||||
width: 350,
|
||||
clearable: false,
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@ -242,10 +245,11 @@ export default {
|
||||
activeName: 'his',
|
||||
tableProps,
|
||||
tableProps2,
|
||||
tableBtn: [{
|
||||
type: 'edit',
|
||||
btnName: '编辑',
|
||||
}
|
||||
tableBtn: [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: '编辑',
|
||||
},
|
||||
].filter((v) => v),
|
||||
tableData: [],
|
||||
tableData2: [],
|
||||
@ -268,14 +272,10 @@ export default {
|
||||
methods: {
|
||||
buttonClick(val) {
|
||||
if (val.statisticType === 2) {
|
||||
this.tableProps[0].filter = (val) =>
|
||||
parseTime(val, '{y}年第{w}周');
|
||||
}else{
|
||||
this.tableProps[0].filter = (val) =>
|
||||
parseTime(val, '{y}年{m}月{d}日');
|
||||
}
|
||||
this.formConfig2[1].startPlaceholder = '开始时间';
|
||||
this.formConfig2[1].endPlaceholder = '结束时间';
|
||||
this.tableProps[0].filter = (val) => parseTime(val, '{y}年第{w}周');
|
||||
} else {
|
||||
this.tableProps[0].filter = (val) => parseTime(val, '{y}年{m}月{d}日');
|
||||
}
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
@ -284,9 +284,12 @@ export default {
|
||||
this.listQuery.statisticType = val.statisticType || 1;
|
||||
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
? val.searchTime[1]
|
||||
: null;
|
||||
if (this.activeName === 'his') {
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
: null;
|
||||
this.getDataList();
|
||||
} else {
|
||||
this.getDataList2();
|
||||
@ -302,8 +305,13 @@ export default {
|
||||
this.listQuery.statisticType = val.statisticType || 1;
|
||||
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
? val.searchTime[1]
|
||||
: null;
|
||||
if (this.activeName === 'his') {
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
: null;
|
||||
}
|
||||
this.handleExport();
|
||||
break;
|
||||
default:
|
||||
@ -325,22 +333,26 @@ export default {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
|
||||
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
|
||||
this.formConfig2[1].startPlaceholder = parseTime(start).substr(0, 10);
|
||||
this.formConfig2[1].endPlaceholder = parseTime(end).substr(0, 10);
|
||||
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
|
||||
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
|
||||
this.$nextTick(() => {
|
||||
this.$refs.searchBarForm2.formInline.searchTime = [
|
||||
this.listQuery.startTime,
|
||||
this.listQuery.endTime,
|
||||
];
|
||||
});
|
||||
this.listQuery.name = null;
|
||||
this.listQuery.pageNo = 1;
|
||||
this.getDataList2();
|
||||
}
|
||||
},
|
||||
getNavDataList(){
|
||||
getNavDataList() {
|
||||
if (this.activeName === 'his') {
|
||||
this.getDataList();
|
||||
} else {
|
||||
this.getDataList2();
|
||||
}
|
||||
},
|
||||
},
|
||||
// 获取数据2列表
|
||||
getDataList2() {
|
||||
if (this.listQuery.startTime) {
|
||||
|
@ -190,13 +190,16 @@ export default {
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间范围',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
dateType: 'datetimerange',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
defaultTime: ['08:30:00', '08:30:00'],
|
||||
param: 'searchTime',
|
||||
width: 350,
|
||||
clearable: false,
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@ -260,9 +263,12 @@ export default {
|
||||
this.listQuery.statisticType = val.statisticType || 1;
|
||||
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
? val.searchTime[1]
|
||||
: null;
|
||||
if (this.activeName === 'his') {
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
: null;
|
||||
this.getDataList();
|
||||
} else {
|
||||
this.getDataList2();
|
||||
@ -278,8 +284,13 @@ export default {
|
||||
this.listQuery.statisticType = val.statisticType || 1;
|
||||
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
? val.searchTime[1]
|
||||
: null;
|
||||
if (this.activeName === 'his') {
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
: null;
|
||||
}
|
||||
this.handleExport();
|
||||
break;
|
||||
default:
|
||||
|
@ -232,13 +232,16 @@ export default {
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间范围',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
dateType: 'datetimerange',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
defaultTime: ['08:30:00', '08:30:00'],
|
||||
param: 'searchTime',
|
||||
width: 350,
|
||||
clearable: false,
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
@ -302,8 +305,6 @@ export default {
|
||||
this.tableProps[0].filter = (val) =>
|
||||
parseTime(val, '{y}年{m}月{d}日');
|
||||
}
|
||||
this.formConfig2[0].startPlaceholder = '开始时间';
|
||||
this.formConfig2[0].endPlaceholder = '结束时间';
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
@ -312,9 +313,12 @@ export default {
|
||||
this.listQuery.statisticType = val.statisticType || 1;
|
||||
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
? val.searchTime[1]
|
||||
: null;
|
||||
if (this.activeName === 'his') {
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
: null;
|
||||
this.getDataList();
|
||||
} else {
|
||||
this.getDataList2();
|
||||
@ -330,8 +334,13 @@ export default {
|
||||
this.listQuery.statisticType = val.statisticType || 1;
|
||||
this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
? val.searchTime[1]
|
||||
: null;
|
||||
if (this.activeName === 'his') {
|
||||
this.listQuery.endTime = val.searchTime
|
||||
? val.searchTime[1].substr(0, 10) + ' 23:59:59'
|
||||
: null;
|
||||
}
|
||||
this.handleExport();
|
||||
break;
|
||||
default:
|
||||
@ -353,10 +362,14 @@ export default {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 00:00:00';
|
||||
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 23:59:59';
|
||||
this.formConfig2[0].startPlaceholder = parseTime(start).substr(0, 10);
|
||||
this.formConfig2[0].endPlaceholder = parseTime(end).substr(0, 10);
|
||||
this.listQuery.startTime = parseTime(start).substr(0, 10) + ' 08:30:00';
|
||||
this.listQuery.endTime = parseTime(end).substr(0, 10) + ' 08:30:00';
|
||||
this.$nextTick(() => {
|
||||
this.$refs.searchBarForm2.formInline.searchTime = [
|
||||
this.listQuery.startTime,
|
||||
this.listQuery.endTime,
|
||||
];
|
||||
});
|
||||
this.listQuery.name = null;
|
||||
this.listQuery.pageNo = 1;
|
||||
this.getDataList2();
|
||||
|
Loading…
Reference in New Issue
Block a user