Files
hb_pqs_web/src/views/components/Time.vue
2025-01-09 19:02:44 +08:00

820 lines
25 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div>
<el-form :inline="true" :model="ruleForm" class="demo-form-inline">
<el-form-item label="时间间隔:">
<el-select
style="width: 90px;"
v-model="intervald"
@change="interchange"
placeholder="请选择"
>
<el-option
v-for="item in timeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-date-picker
style="width: 250px;"
:disabled="disabled"
:readonly="pickDisabled"
:clearable="false"
v-model="timeValue"
:picker-options="pickerOptions"
type="daterange"
value-format="yyyy-MM-dd"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button
:disabled="backDisabled"
type="primary"
icon="el-icon-d-arrow-left"
@click="preClick"
></el-button>
<el-button @click="nowTime" class="el-icon-video-pause" type="primary"
>当前</el-button
>
<el-button
:disabled="preDisabled"
type="primary"
icon="el-icon-d-arrow-right"
@click="back"
></el-button>
</el-form-item>
<!-- <el-form-item>
<el-button v-show="false" type="primary">导出文件</el-button>
</el-form-item> -->
</el-form>
<!-- <span style="font-size: 14px; font-weight: 550">
<span class="spanColor">间隔:</span>
</span>
<div style="display: inline" v-if="buttonShow">
</div> -->
<!-- <el-button
v-show="buttonShow && thb"
@click="tongbiyear"
style="margin-left: 5px"
type="primary"
>同比</el-button
>
<el-button
v-show="buttonShow && thb"
@click="huangbiyear"
style="margin-left: 5px"
type="primary"
>环比</el-button
> -->
<!-- <el-button
@click="querfromdata"
type="primary"
icon="el-icon-search"
style="margin-left: 10px"
>查询</el-button
> -->
</div>
</template>
<script>
export default {
name: "index4",
props: {
name: {
type: String,
default: undefined,
},
path: {
type: String,
default: undefined,
},
tablename: {
type: String,
default: undefined,
},
interval: {
type: Number,
default: undefined,
},
type: {
type: Number,
default: undefined,
},
falg: {
type: Boolean,
default: false,
},
query: {
type: Boolean,
default: false,
},
thb: {
type: Boolean,
default: false,
},
},
watch: {
intervald(val) {
if (val != 5) {
let endTime = this.getEndTime();
let startTime = this.getStartTime(this.intervald, endTime);
this.timeValue = [startTime, endTime];
this.pickDisabled = false;
this.buttonShow = true;
} else {
let endTime = this.getEndTime();
let startTime = this.getStartTime(this.intervald, endTime);
this.timeValue = [startTime, endTime];
this.buttonShow = false;
this.pickDisabled = false;
}
},
},
data() {
return {
ruleForm:{},
disabled: true,
buttonShow: true, //向前向后按钮显示隐藏控制按钮
pickDisabled: false, //时间组件只读控制se,
falg1: true,
timeOptions: [
{ label: "年份", value: 1 },
{ label: "季度", value: 2 },
{ label: "月份", value: 3 },
{ label: "周", value: 4 },
// { label: "自定义", value: 5 },
],
pickerOptions: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
},
},
],
},
intervald: this.interval,
tablenamed: this.tablename,
timeValue: [],
timehbValue: [],
backDisabled: false,
preDisabled: true,
huanbibiFalg: false,
tonbiFalg: false,
timeFlag: 0,
};
},
created() {},
mounted() {
let endTime = this.getEndTime();
let startTime = this.getStartTime(this.intervald, endTime);
//console.log(endTime,startTime,'endtime','startTime')
this.$store.commit("sagServerity/SET_TIMEINTERVAL",[startTime,endTime] )
this.timeValue = [startTime, endTime];
this.$emit("time",[startTime,endTime,this.intervald] );
if (this.type == 2) {
this.huangbiyear();
} else if (!this.type) {
this.querfromdata();
}
},
methods: {
interchange(val) {
let endTime = this.getEndTime();
let startTime = this.getStartTime(this.intervald, endTime);
// console.log(endTime,startTime,'endtime','startTime')
this.$store.commit("sagServerity/SET_TIMEINTERVAL",[startTime,endTime] )
this.$emit("time",[startTime,endTime,val] );
if (val == 1 || val == 2) {
this.timeFlag = 0;
} else {
this.timeFlag = 1;
}
// console.log(this.timeFlag);
this.intervald = val;
if (val == 5) {
this.tablenamed == "tab1";
this.disabled = false;
} else {
this.tablenamed == "tab2";
this.disabled = true;
}
},
// 获取当前日期,精确到日
getEndTime() {
var now = new Date();
var sep = "-";
var year = now.getFullYear();
var month = now.getMonth() + 1;
if (month < 10) {
month = "0" + month;
}
var date = now.getDate();
if (date < 10) {
date = "0" + date;
}
// 拼接当前的日期
var endTime = year + sep + month + sep + date;
return endTime;
},
// 获取起始日期
getStartTime(interval, endTime) {
var sep = "-";
var arr = endTime.split("-");
var year = arr[0];
var month = arr[1];
var date = arr[2];
// 按月份间隔
if (interval == 3) {
date = "01";
// 按季度间隔
} else if (interval == 2) {
if ((month > 0) & (month < 4)) {
// 第一季度
month = "01";
date = "01";
} else if (month > 3 && month < 7) {
// 第二季度
month = "04";
date = "01";
} else if (month > 6 && month < 10) {
// 第三季度
month = "07";
date = "01";
} else {
// 第四季度
month = "10";
date = "01";
}
} else if (interval == 1) {
month = "01";
date = "01";
} else if (interval == "半年") {
if (month < 7) {
month = "01";
date = "01";
} else {
month = "07";
date = "01";
}
} else if (interval == 4) {
//周
var start = new Date(year, month - 1, date);
var dayOfWeek = start.getDay() == 0 ? 7 : start.getDay(); // 如果为周日则置为7天
start.setDate(start.getDate() - dayOfWeek + 1); // 计算开始时间
if (this.formatTime(new Date()) != endTime) {
// 如果结束时间不是当前时间
var end = new Date(start);
end.setDate(end.getDate() + 6);
// $("#endTime").val(this.formatTime(end));
}
return this.formatTime(start);
}
var startTime = year + sep + month + sep + date;
return startTime;
},
// 时间格式化
formatTime(time) {
return (
time.getFullYear() +
"-" +
(time.getMonth() + 1 < 10 ? "0" : "") +
(time.getMonth() + 1) +
"-" +
(time.getDate() < 10 ? "0" : "") +
time.getDate()
);
},
//向前
preClick() {
let interval = this.intervald;
let startTime = this.timeValue[0];
let endTime = this.timeValue[1];
let year = parseInt(startTime.substring(0, 4));
let month = parseInt(startTime.substring(5, 7));
let date = parseInt(startTime.substring(8, 10));
//按月
if (interval == 3) {
// 换年份
if (month == 1) {
year = year - 1;
startTime = year + "-12-01";
endTime = year + "-12-31";
} else if (month <= 10) {
month = month - 1;
startTime = year + "-0" + month + "-01";
let day = this.getDays(year, month);
endTime = year + "-0" + month + "-" + day;
} else {
month = month - 1;
startTime = year + "-" + month + "-01";
let day = this.getDays(year, month);
endTime = year + "-" + month + "-" + day;
}
//按周
} else if (interval == 4) {
//根据开始时间推
let start = new Date(year, month - 1, date);
start.setDate(start.getDate() - 7);
startTime = this.formatTime(start);
var end = new Date(start);
end.setDate(start.getDate() + 6);
endTime = this.formatTime(end);
//按季度
} else if (interval == 2) {
// 换年份
if (month == 1) {
year = year - 1;
startTime = year + "-10-01";
endTime = year + "-12-31";
} else {
// 还是本年
month = month - 3;
startTime = year + "-0" + month + "-01";
month = month + 2;
var day = this.getDays(year, month);
endTime = year + "-0" + month + "-" + day;
}
//自定义
} else if (interval == 5) {
//按年
} else if (interval == 1) {
year = year - 1;
startTime = year + "-01-01";
endTime = year + "-12-31";
} else if (interval == 6) {
if (month <= 6) {
year = year - 1;
startTime = year + "-07-01";
endTime = year + "-12-31";
} else {
startTime = year + "-01-01";
endTime = year + "-06-30";
}
}
this.timeValue = [startTime, endTime];
// 判断向后键的状态
var temp = this.getEndTime();
this.timeStatus(temp, endTime);
},
//向后
back() {
let interval = this.intervald;
let startTime = this.timeValue[0];
let endTime = this.timeValue[1];
let year = parseInt(startTime.substring(0, 4));
let month = parseInt(startTime.substring(5, 7));
let date = parseInt(startTime.substring(8, 10));
var now = new Date();
// 获取当前年份
var presentY = now.getFullYear();
// 获取当前月份
var presentM = now.getMonth() + 1;
// 获取当前日期
var presentD = now.getDate();
if (interval == 3) {
if (month == 12) {
year = year + 1;
// 年份进位后,大于当前的年份,是不科学的
if (presentY < year) {
startTime = presentY + "-12-01";
if (presentD < 10) {
endTime = presentY + "-12" + "-0" + presentD;
} else {
endTime = presentY + "-12" + "-" + presentD;
}
// 年份进位后,等于当前的年份
} else if (presentY == year) {
startTime = year + "-01-01";
if (presentM > 1) {
endTime = year + "-01-31";
} else {
if (presentD < 10) {
endTime = year + "-01" + "-0" + presentD;
} else {
endTime = year + "-01" + "-" + presentD;
}
}
// 年份进位后,依旧小于当前的年份
} else {
startTime = year + "-01-01";
endTime = year + "-01-31";
}
} else {
month = month + 1;
// 年份等于当前年份
if (presentY == year) {
// 月份超过当前月份,是不科学的
if (month >= presentM) {
if (presentM < 10) {
startTime = year + "-0" + presentM + "-01";
if (presentD < 10) {
endTime = year + "-0" + presentM + "-0" + presentD;
} else {
endTime = year + "-0" + presentM + "-" + presentD;
}
} else {
startTime = year + "-" + presentM + "-01";
if (presentD < 10) {
endTime = year + "-" + presentM + "-0" + presentD;
} else {
endTime = year + "-" + presentM + "-" + presentD;
}
}
} else {
if (month < 10) {
startTime = year + "-0" + month + "-01";
var day = this.getDays(year, month);
endTime = year + "-0" + month + "-" + day;
} else {
startTime = year + "-" + month + "-01";
var day = this.getDays(year, month);
endTime = year + "-" + month + "-" + day;
}
}
// 年份小于当前的年份
} else {
if (month < 10) {
startTime = year + "-0" + month + "-01";
var day = this.getDays(year, month);
endTime = year + "-0" + month + "-" + day;
} else {
startTime = year + "-" + month + "-01";
var day = this.getDays(year, month);
endTime = year + "-" + month + "-" + day;
}
}
}
} else if (interval == 2) {
// 前进需要年份进位
if (month == 10) {
year = year + 1;
// 年份进位后大于当前年份是不科学的
if (year > presentY) {
startTime = presentY + "-10-01";
if (presentD < 10) {
endTime = year + "-" + presentM + "-0" + presentD;
} else {
endTime = year + "-" + presentM + "-" + presentD;
}
} else if (year == presentY) {
startTime = year + "-01-01";
// 当前月份大约3月份
if (presentM > 3) {
endTime = year + "-03-31";
} else {
// 当前月份也在第一季度里
if (presentD < 10) {
endTime = year + "-0" + presentM + "-0" + presentD;
} else {
endTime = year + "-0" + presentM + "-" + presentD;
}
}
} else {
startTime = year + "-01-01";
endTime = year + "-03-31";
}
} else {
month = month + 3;
// 季度进位后,超过当前月份是不科学的
if (year == presentY) {
if (month >= presentM) {
// 当季度进位后大于当前月,以当前月的时间显示季度
if (presentM > 0 && presentM < 4) {
// 第一季度
startTime = year + "-01-01";
if (presentD < 10) {
endTime = year + "-0" + presentM + "-0" + presentD;
} else {
endTime = year + "-0" + presentM + "-" + presentD;
}
} else if (presentM > 3 && presentM < 7) {
// 第二季度
startTime = year + "-04-01";
if (presentD < 10) {
endTime = year + "-0" + presentM + "-0" + presentD;
} else {
endTime = year + "-0" + presentM + "-" + presentD;
}
} else if (presentM > 6 && presentM < 10) {
// 第三季度
startTime = year + "-07-01";
if (presentD < 10) {
endTime = year + "-0" + presentM + "-0" + presentD;
} else {
endTime = year + "-0" + presentM + "-" + presentD;
}
} else {
// 第四季度
startTime = year + "-10-01";
if (presentD < 10) {
endTime = year + "-" + presentM + "-0" + presentD;
} else {
endTime = year + "-" + presentM + "-" + presentD;
}
}
} else {
if (month == 10) {
startTime = year + "-" + month + "-01";
} else {
startTime = year + "-0" + month + "-01";
}
month = month + 2;
if (month >= presentM) {
endTime = this.getEndTime();
} else {
var day = this.getDays(year, month);
endTime = year + "-" + month + "-" + day;
}
}
} else {
if (month == 10) {
startTime = year + "-" + month + "-01";
month = month + 2;
var day = this.getDays(year, month);
endTime = year + "-" + month + "-" + day;
} else {
startTime = year + "-0" + month + "-01";
month = month + 2;
var day = this.getDays(year, month);
endTime = year + "-0" + month + "-" + day;
}
}
}
} else if (interval == 5) {
} else if (interval == 4) {
//根据开始时间推
var start = new Date(year, month - 1, date);
start.setDate(start.getDate() + 7);
startTime = this.formatTime(start);
var end = new Date(start);
end.setDate(start.getDate() + 6);
endTime = this.formatTime(end);
if (parseInt((end - new Date()) / 1000 / 60) > 24) {
//相差小时大于24小时即超过当天置为当天日期
endTime = this.formatTime(new Date());
}
} else {
year = year + 1;
// 年份进位后大于当前年份,是不科学的
if (year >= presentY) {
startTime = presentY + "-01-01";
if (presentM < 10) {
if (presentD < 10) {
endTime = presentY + "-0" + presentM + "-0" + presentD;
} else {
endTime = presentY + "-0" + presentM + "-" + presentD;
}
} else {
endTime = presentY + "-" + presentM + "-" + presentD;
}
} else {
startTime = year + "-01-01";
endTime = year + "-12-31";
}
}
this.timeValue = [startTime, endTime];
// 判断向后键的状态
var temp = this.getEndTime();
this.timeStatus(temp, endTime);
},
//当前按钮点击事件
nowTime() {
let interval = this.intervald;
let endTime = this.getEndTime();
let startTime = this.getStartTime(interval, endTime);
this.timeValue = [startTime, endTime];
// 判断向后键的状态
let temp = this.getEndTime();
this.timeStatus(temp, endTime);
},
//判断向后按钮
timeStatus(temp, endTime) {
// 判断next按钮的状态
if (temp == endTime) {
this.preDisabled = true;
} else {
this.preDisabled = false;
}
},
// 获取月份的天数
getDays(year, month) {
let max = new Date(year, month, 0).getDate();
return max;
},
querfromdata() {
//type用于区分是按钮触发还是钩子函数触发 1按钮触发 underfind 钩子触发
if (!this.type) {
var data = this.timeValue;
var timehbValue = "";
this.$emit("querfromdata", data, timehbValue, this.intervald);
} else if (this.type == 2) {
this.huangbiyear();
}
},
goto() {
this.$router.push({
path: "/harmonic-boot/algorithm",
query: { name: this.name, path: this.path },
});
},
//环比
huangbiyear() {
this.huanbibiFalg = true;
let interval = this.intervald;
let startTime = this.timeValue[0];
let endTime = this.timeValue[1];
let year = parseInt(startTime.substring(0, 4));
let month = parseInt(startTime.substring(5, 7));
let date = parseInt(startTime.substring(8, 10));
//按月
if (interval == 3) {
// 换年份
if (month == 1) {
year = year - 1;
startTime = year + "-12-01";
endTime = year + "-12-31";
} else if (month <= 10) {
month = month - 1;
startTime = year + "-0" + month + "-01";
let day = this.getDays(year, month);
endTime = year + "-0" + month + "-" + day;
} else {
month = month - 1;
startTime = year + "-" + month + "-01";
let day = this.getDays(year, month);
endTime = year + "-" + month + "-" + day;
}
//按周
} else if (interval == 4) {
//根据开始时间推
let start = new Date(year, month - 1, date);
start.setDate(start.getDate() - 7);
startTime = this.formatTime(start);
var end = new Date(start);
end.setDate(start.getDate() + 6);
endTime = this.formatTime(end);
//按季度
} else if (interval == 2) {
// 换年份
if (month == 1) {
year = year - 1;
startTime = year + "-10-01";
endTime = year + "-12-31";
} else {
// 还是本年
month = month - 3;
startTime = year + "-0" + month + "-01";
month = month + 2;
var day = this.getDays(year, month);
endTime = year + "-0" + month + "-" + day;
}
//自定义
} else if (interval == 5) {
//按年
} else if (interval == 1) {
year = year - 1;
startTime = year + "-01-01";
endTime = year + "-12-31";
} else if (interval == 6) {
if (month <= 6) {
year = year - 1;
startTime = year + "-07-01";
endTime = year + "-12-31";
} else {
startTime = year + "-01-01";
endTime = year + "-06-30";
}
}
this.timehbValue = [startTime, endTime];
var data = this.timeValue;
var timehbValue = this.timehbValue;
// debugger
this.$emit("querfromdata", data, timehbValue, interval);
// 判断向后键的状态
// var temp = this.getEndTime();
//this.timeStatus(temp, endTime);
},
//同比
tongbiyear() {
this.tonbiFalg = true;
let interval = this.intervald;
let startTime = this.timeValue[0];
let endTime = this.timeValue[1];
let year = parseInt(startTime.substring(0, 4));
let month = parseInt(startTime.substring(5, 7));
let date = parseInt(startTime.substring(8, 10));
//按月
if (interval == 3) {
year = year - 1;
if (month <= 10) {
startTime = year + "-0" + month + "-01";
let day = this.getDays(year, month);
endTime = year + "-0" + month + "-" + day;
} else {
startTime = year + "-" + month + "-01";
let day = this.getDays(year, month);
endTime = year + "-" + month + "-" + day;
}
//按周
} else if (interval == 4) {
//根据开始时间推
let start = new Date(year - 1, month, date);
start.setDate(start.getDate() - 7);
startTime = this.formatTime(start);
var end = new Date(start);
end.setDate(start.getDate() + 6);
endTime = this.formatTime(end);
//按季度
} else if (interval == 2) {
year = year - 1;
if (month < 10) {
startTime = year + "-0" + month + "-01";
} else {
startTime = year + "-" + month + "-01";
}
month = month + 2;
if (month <= 10) {
var day = this.getDays(year, month);
endTime = year + "-0" + month + "-" + day;
} else {
var day = this.getDays(year, month);
endTime = year + "-" + month + "-" + day;
}
//自定义
} else if (interval == 5) {
//按年
} else if (interval == 1) {
year = year - 1;
startTime = year + "-01-01";
endTime = year + "-12-31";
} else if (interval == 6) {
if (month <= 6) {
year = year - 1;
startTime = year + "-07-01";
endTime = year + "-12-31";
} else {
startTime = year + "-01-01";
endTime = year + "-06-30";
}
}
this.timehbValue = [startTime, endTime];
var data = this.timeValue;
var timehbValue = this.timehbValue;
this.$emit("querfromdata", data, timehbValue, interval);
},
},
};
</script>
<style lang="scss" scoped>
.spanColor {
color: $themeColor;
}
</style>