<template>
|
<div class="picker_box">
|
<div class="picker_title">预测时间</div>
|
<div class="form_box">
|
<div class="inp_box">
|
<!-- <span>时间选择</span> -->
|
<el-date-picker
|
size="large"
|
v-model="selectform.value1"
|
type="datetimerange"
|
:shortcuts="shortcuts"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
@change="changeTime"
|
format="YYYY-MM-DD HH"
|
value-format="YYYY-MM-DD HH"
|
:disabledDate="disabledDate"
|
/>
|
</div>
|
|
<div class="button_box">
|
<el-button @click="selectBtn">确认</el-button>
|
</div>
|
<div class="button_box">
|
<el-button @click="selectBtn('compare')">对比</el-button>
|
</div>
|
<div class="button_box">
|
<el-button @click="XZBtn">下载</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { ref, reactive, onMounted, watch, computed } from "vue";
|
import docxtemplater from "docxtemplater";
|
import PizZip from "pizzip";
|
import JSZipUtils from "jszip-utils";
|
import { saveAs } from "file-saver";
|
import { forecastAnalyse, qxshControllerByTime } from "@/api/api.js";
|
import { useStore } from "vuex";
|
import { FormInstance, ElMessage, ElMessageBox } from "element-plus";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
props: ["state"],
|
data() {
|
return {
|
color: "red",
|
};
|
},
|
setup(props, { emit }) {
|
const store = useStore();
|
let data = reactive({
|
value1: "",
|
newTimeStr: "",
|
value: "",
|
// 表单对象
|
form: {
|
startTime: "",
|
endTime: "",
|
},
|
// 表格信息
|
tableData: [],
|
WGisshow: true,
|
});
|
const selectform = reactive({
|
value1: [],
|
value: "",
|
});
|
const options = reactive([
|
{
|
value: "100m",
|
label: "100m",
|
},
|
{
|
value: " 200m",
|
label: " 200m",
|
},
|
{
|
value: "300m",
|
label: "300m",
|
},
|
{
|
value: "500m",
|
label: "500m",
|
},
|
]);
|
|
const shortcuts = reactive([
|
{
|
text: "最近一周",
|
value: () => {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
return [start, end];
|
},
|
},
|
{
|
text: "最近一个月",
|
value: () => {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
return [start, end];
|
},
|
},
|
{
|
text: "最近三个月",
|
value: () => {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
return [start, end];
|
},
|
},
|
]);
|
//全域网格
|
const WGBtn = () => {
|
data.WGisshow = !data.WGisshow;
|
};
|
// 点击导出word
|
function exportWord() {
|
// 读取并获得模板文件的二进制内容
|
JSZipUtils.getBinaryContent("zdyc.docx", function (error, content) {
|
// input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
|
// 抛出异常
|
if (error) {
|
throw error;
|
}
|
|
// 创建一个JSZip实例，内容为模板的内容
|
let zip = new PizZip(content);
|
// 创建并加载docxtemplater实例对象
|
let doc = new docxtemplater().loadZip(zip);
|
// 设置模板变量的值
|
doc.setData({
|
...data.form,
|
table: data.tableData,
|
});
|
|
try {
|
// 用模板变量的值替换所有模板变量
|
doc.render();
|
} catch (error) {
|
// 抛出异常
|
let e = {
|
message: error.message,
|
name: error.name,
|
stack: error.stack,
|
properties: error.properties,
|
};
|
console.log(JSON.stringify({ error: e }));
|
throw error;
|
}
|
|
// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
|
let out = doc.getZip().generate({
|
type: "blob",
|
mimeType:
|
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
});
|
// 将目标文件对象保存为目标类型的文件，并命名
|
saveAs(out, "站点预测数据.docx");
|
});
|
}
|
// watch(
|
// () => props.state,
|
// (nVal, oVal) => {
|
|
// },
|
// { deep: true }
|
// );
|
const selectBtn = async (status) => {
|
if (selectform.value1.length == 0) {
|
return ElMessage.error("请选择时间段");
|
}
|
// let lefttime = selectform.value1[0].split("-");
|
// let righttime = selectform.value1[1].split("-");
|
//
|
// let lefh = lefttime[3].split(":");
|
// let righ = righttime[3].split(":");
|
// store.commit(
|
// "getycleftTime",
|
// `${lefttime[0]}${lefttime[1]}${lefttime[2]}${lefh[0]}`
|
// );
|
// store.commit(
|
// "getycrightTime",
|
// `${righttime[0]}${righttime[1]}${righttime[2]}${righ[0]}`
|
// );
|
store.commit("getycleftTime", selectform.value1[0]);
|
store.commit("getycrightTime", selectform.value1[1]);
|
if (status == "compare") {
|
store.commit("getPOItype", "CWYY");
|
} else {
|
store.commit("getPOItype", "WYY");
|
}
|
store.commit("getYCstate", Math.random());
|
};
|
const XZBtn = async () => {
|
if (selectform.value1.length == 0) {
|
return ElMessage.error("请选择时间段");
|
}
|
data.tableData = [];
|
// let lefttime = selectform.value1[0].split("-");
|
// let righttime = selectform.value1[1].split("-");
|
//
|
// let lefh = lefttime[3].split(":");
|
// let righ = righttime[3].split(":");
|
// data.form.startTime = `${lefttime[0]}${lefttime[1]}${lefttime[2]}${lefh[0]}`;
|
// data.form.endTime = `${righttime[0]}${righttime[1]}${righttime[2]}${righ[0]}`;
|
// let dt = await qxshControllerByTime({
|
// leftTime: `${lefttime[0]}${lefttime[1]}${lefttime[2]}${lefh[0]}`,
|
// rightTime: `${righttime[0]}${righttime[1]}${righttime[2]}${righ[0]}`,
|
// name: store.state.POIname,
|
// });
|
data.form.startTime = selectform.value1[0];
|
data.form.endTime = selectform.value1[1];
|
let dt = await forecastAnalyse({
|
beginTime: selectform.value1[0],
|
endTime: selectform.value1[1],
|
name: store.state.POIname,
|
});
|
if (dt.result.length !== 0) {
|
dt.result.forEach((e) => {
|
// data.tableData.push({ name: e.name, time: e.time, value: e.value });
|
data.tableData.push({
|
name: store.state.POIname,
|
time: e.time,
|
value: e.forecastValue,
|
});
|
});
|
}
|
exportWord();
|
};
|
// function operationType(type) {
|
// switch (type) {
|
// case "t":
|
// break;
|
|
// default:
|
// break;
|
// }
|
// }
|
//限制时间选择范围
|
const disabledDate = (time) => {
|
if (store.state.POItype == "CJ") {
|
const start = new Date(
|
new Date(new Date().toLocaleDateString()).getTime() +
|
96 * 60 * 60 * 1000 -
|
1
|
);
|
return (
|
// time.getTime() < new Date().getTime() - 1 * 24 * 60 * 60 * 1000 ||
|
time.getTime() > new Date().getTime() + (start - new Date().getTime())
|
);
|
} else {
|
const start = new Date(
|
new Date(new Date().toLocaleDateString()).getTime() +
|
96 * 60 * 60 * 1000 -
|
1
|
);
|
|
return (
|
// time.getTime() < new Date().getTime() - 1 * 24 * 60 * 60 * 1000 ||
|
time.getTime() > new Date().getTime() + (start - new Date().getTime())
|
);
|
}
|
};
|
function changeTime(value) {}
|
|
const scale = ref(2);
|
function nowSize(val, initWidth = 1920) {
|
let nowClientWidth = document.documentElement.clientWidth;
|
|
return val * (nowClientWidth / initWidth);
|
}
|
return {
|
disabledDate,
|
data,
|
changeTime,
|
shortcuts,
|
options,
|
selectBtn,
|
selectform,
|
XZBtn,
|
scale,
|
WGBtn,
|
};
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.picker_box {
|
width: calc(742px * 1.5);
|
// width: 560px;
|
height: calc(200px * 1);
|
position: absolute;
|
right: 70px;
|
top: 1130px;
|
background: url("../assets/img/d.png") no-repeat center;
|
background-size: 100% 100%;
|
padding: 40px;
|
box-sizing: border-box;
|
padding-left: 60px;
|
padding-right: 60px;
|
.picker_title {
|
font-size: 30px;
|
font-family: Microsoft YaHei;
|
font-weight: bold;
|
color: #ffffff;
|
padding-bottom: 10px;
|
}
|
|
.form_box {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.inp_box {
|
span {
|
font-size: 24px;
|
font-weight: 400;
|
color: #ffffff;
|
padding-right: 10px;
|
}
|
:deep(.el-date-editor) {
|
height: 64px;
|
}
|
.el-date-picker {
|
}
|
/deep/ .el-input__wrapper {
|
width: 460px;
|
background: rgba(0, 0, 0, 0.2);
|
border: 2px solid #2e58cc;
|
border-radius: 10px;
|
color: #ffffff;
|
padding: 0;
|
padding-left: 3px;
|
}
|
/deep/ .el-input__inner,
|
/deep/ .el-textarea__inner {
|
// background-color: rgba(134, 132, 132, 0.5);
|
color: #ffffff;
|
font-size: 24px;
|
}
|
/deep/.el-range-input {
|
color: white;
|
}
|
/deep/ .el-range-separator {
|
color: white;
|
}
|
}
|
:deep(.el-range-editor--large .el-range-separator) {
|
font-size: 24px;
|
}
|
:deep(.el-input__icon),
|
:deep(.el-range__icon) {
|
font-size: 28px;
|
}
|
::-webkit-input-placeholder {
|
font-size: 24px;
|
}
|
:deep(.el-range-input) {
|
font-size: 28px;
|
}
|
}
|
.el-button {
|
background: rgba(0, 0, 0, 0.2);
|
border: 4px solid #2e58cc !important;
|
border-radius: 20px !important;
|
color: #ffffff;
|
height: 64px !important;
|
font-size: 28px !important;
|
padding: 16px 30px !important;
|
}
|
}
|
</style>
|
<style>
|
@media (width: 1920px) {
|
.el-date-range-picker {
|
transform: scale(1);
|
}
|
}
|
|
@media (width: 3840px) {
|
.el-date-range-picker {
|
transform: scale(1.7);
|
}
|
}
|
</style>
|
