<template>
|
<div class="FX_box">
|
<div class="FX_title">分析报告导出</div>
|
<div class="form_box">
|
<div class="inp_box">
|
<!-- <span>监测点选择</span> -->
|
<!-- <el-select v-model="data.SJvalue" class="m-2" size="large">
|
<el-option
|
v-for="item in optionsSJ"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
|
</el-select> -->
|
<el-date-picker
|
size="large"
|
v-model="selectform.value1"
|
type="datetimerange"
|
@change="changeTime"
|
value-format="YYYY-MM-DD HH"
|
format="YYYY-MM-DD HH"
|
/>
|
<!-- <el-date-picker
|
size="large"
|
v-model="selectform.value1"
|
type="date"
|
@change="changeTime"
|
value-format="YYYY-MM-DD"
|
/>
|
-->
|
</div>
|
|
<div class="button_box">
|
<el-button @click="selectList" class="button">确认</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { reactive, onMounted, watch, ref } from "vue";
|
import { useStore } from "vuex";
|
import {
|
qxshControllerByTime,
|
bjyjControllerGetAll,
|
queryWeatherList,
|
qxshController_query,
|
weatherController_query,
|
ysshSuYuanX00Controller_500_query,
|
forecastAnalyse,
|
getRunAlarm,
|
getRunWarning,
|
getAlarmAndWarnByTime,
|
} from "@/api/api.js";
|
import docxtemplater from "docxtemplater";
|
import PizZip from "pizzip";
|
import JSZipUtils from "jszip-utils";
|
import { saveAs } from "file-saver";
|
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
setup(props) {
|
const store = useStore();
|
let data = reactive({
|
SJvalue: "",
|
optionisshow: false,
|
// 表单对象
|
form: {
|
time: "",
|
temperature: "",
|
windSpeed: "",
|
windDirection: "",
|
weather: "",
|
arrLength: "",
|
},
|
// 表格信息
|
tableData: [],
|
time_show: "",
|
});
|
const selectform = reactive({
|
value1: [],
|
value: "",
|
});
|
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];
|
},
|
},
|
]);
|
let optionsSJ = ref([]);
|
//网格名称选择框
|
const getWGname = () => {
|
let arr = [];
|
// optionsSJ = [];
|
store.state.jkList.forEach((e) => {
|
arr.push({ value: e.name, label: e.name });
|
});
|
optionsSJ = arr;
|
// console.log(optionsSJ);
|
};
|
// 时间格式
|
function getTime() {
|
const year = new Date().getFullYear();
|
const month =
|
new Date().getMonth() + 1 < 10
|
? "0" + (new Date().getMonth() + 1)
|
: new Date().getMonth() + 1;
|
const date =
|
new Date().getDate() < 10
|
? "0" + new Date().getDate()
|
: new Date().getDate();
|
const hh =
|
new Date().getHours() < 10
|
? "0" + new Date().getHours()
|
: new Date().getHours();
|
const h = new Date().getHours();
|
const mm =
|
new Date().getMinutes() < 10
|
? "0" + new Date().getMinutes()
|
: new Date().getMinutes();
|
const ss =
|
new Date().getSeconds() < 10
|
? "0" + new Date().getSeconds()
|
: new Date().getSeconds();
|
const week = new Date().getDay();
|
if (week === 1) {
|
data.nowWeek = "星期一";
|
} else if (week === 2) {
|
data.nowWeek = "星期二";
|
} else if (week === 3) {
|
data.nowWeek = "星期三";
|
} else if (week === 4) {
|
data.nowWeek = "星期四";
|
} else if (week === 5) {
|
data.nowWeek = "星期五";
|
} else if (week === 6) {
|
data.nowWeek = "星期六";
|
} else if (week === 0) {
|
data.nowWeek = "星期日";
|
} else if (week === 27) {
|
data.nowWeek = "星期日";
|
}
|
|
data.form.time = `${year}-${month}-${date} ${hh}:${mm}:${ss}`;
|
data.time_show = `${year}-${month}-${date}-${hh}:${mm}:${ss}`;
|
// data.h = hh;
|
|
// sgworld.Analysis.setTime(hh);
|
}
|
// getWGname();
|
// watch(
|
// () => store.state.jkList,
|
// (nVal, oVal) => {
|
// getWGname();
|
// },
|
|
// { deep: true }
|
// );
|
// 点击导出word
|
function exportWord() {
|
// 读取并获得模板文件的二进制内容
|
JSZipUtils.getBinaryContent("input.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, "厂区VOCs状态简报.docx");
|
});
|
}
|
//格式化天气
|
const formatWeather = (row) => {
|
if (row == undefined) {
|
return;
|
}
|
data.form.temperature = parseInt(row.temperature);
|
data.form.windSpeed = Number(row.windSpeed).toFixed(2);
|
// data.form.temperature = parseInt(row.temperature);
|
// data.form.windSpeed = Number(row.windSpeed).toFixed(2);
|
|
switch (row.windDirection) {
|
case "Southwest":
|
data.form.windDirection = "西南风";
|
break;
|
case "Southeast":
|
data.form.windDirection = "东南风";
|
break;
|
case "Northeast":
|
data.form.windDirection = "东北风";
|
break;
|
case "Northwest":
|
data.form.windDirection = "西北风";
|
break;
|
case "North":
|
data.form.windDirection = "北风";
|
break;
|
case "East":
|
data.form.windDirection = "东风";
|
break;
|
case "West":
|
data.form.windDirection = "西风";
|
break;
|
case "South":
|
data.form.windDirection = "南风";
|
break;
|
}
|
|
switch (row.weatherCondition) {
|
case "Sunny":
|
data.form.weather = "晴天";
|
break;
|
|
case "Moderate Rain":
|
data.form.weather = "中雨";
|
break;
|
case "Heavy Rain":
|
data.form.weather = "大雨";
|
break;
|
case "Light Rain":
|
data.form.weather = "小雨";
|
break;
|
case "Light Snow":
|
data.form.weather = "小雪";
|
break;
|
case "Moderate Snow":
|
data.form.weather = "中雪";
|
break;
|
case "Heavy Snow":
|
data.form.weather = "大雪";
|
break;
|
case "T-Storm":
|
data.form.weather = "暴风雨";
|
break;
|
case "T-Storm Snow":
|
data.form.weather = "暴风雪";
|
break;
|
}
|
|
// window.sgworld.Analysis.createWeather(weatherData, true);
|
};
|
const selectList = async () => {
|
data.form.time =
|
selectform.value1[0] + ":00:00" + "-" + selectform.value1[1] + ":00:00";
|
let begin = selectform.value1[0].replace(" ", "-");
|
let end = selectform.value1[1].replace(" ", "-");
|
console.log(begin, end);
|
//获取实时预警数据
|
// const dt = await getRunWarning();
|
// //获取实时报警数据
|
// const dt1 = await getRunAlarm();
|
const dt = await getAlarmAndWarnByTime({
|
begin: selectform.value1[0] + ":00:00",
|
end: selectform.value1[1] + ":00:00",
|
});
|
//获取天气
|
const weather = await queryWeatherList(begin, end);
|
formatWeather(weather.result[0]);
|
var flag = 0;
|
if (dt.result && dt.result.length > 0) {
|
dt.result.forEach((item) => {
|
flag++;
|
let lastVal = item.lastVal == null ? "无" : item.lastVal;
|
let isSame = item.isSame == 1 ? " 一致。" : " 不一致。";
|
let maxAddr = item.maxAddr == null ? "" : `（${item.maxAddr}）`;
|
let suObj = {
|
addr1: ``,
|
addr2: ``,
|
addr3: ``,
|
};
|
if (item.su) {
|
if (item.su.addr1) {
|
suObj.addr1 = `可疑污染源：1、地点名：${item.su.addr1} 概率：${
|
item.su.odds1 * 100
|
}%。`;
|
}
|
if (item.su.addr2) {
|
suObj.addr2 = `2、地点名：${item.su.addr2} 概率：${
|
item.su.odds2 * 100
|
}%。`;
|
}
|
if (item.su.addr3) {
|
suObj.addr3 = `3、地点名：${item.su.addr3} 概率：${
|
item.su.odds3 * 100
|
}%。`;
|
}
|
}
|
|
const content =
|
"异常站点 " +
|
item.name +
|
" 的浓度值为 " +
|
item.val +
|
" 。去年同时期的浓度值为 " +
|
lastVal +
|
" 。站点风速为 " +
|
data.form.windSpeed +
|
" ，风向为 " +
|
data.form.windDirection +
|
" 。周围500米范围内的最大浓度值为 " +
|
item.maxVal +
|
"，对应格子为 " +
|
item.maxId +
|
maxAddr +
|
" 。该最大浓度值距离异常站点 " +
|
item.dis +
|
" 米，风向为" +
|
item.maxDir +
|
" 。与风速方向" +
|
isSame +
|
suObj.addr1 +
|
suObj.addr2 +
|
suObj.addr3;
|
data.tableData.push({
|
no: flag,
|
name: item.name,
|
value: item.val,
|
content: content,
|
pos: item.lon + "," + item.lat,
|
speed: data.form.windSpeed,
|
direction: data.form.windDirection,
|
});
|
});
|
}
|
|
if (data.tableData.length == 0) {
|
data.form.arrLength = "无";
|
} else {
|
data.form.arrLength = "有";
|
}
|
exportWord();
|
};
|
|
async function querydata(res) {
|
const dtx1 = await qxshController_query(res.name);
|
}
|
function qxshControllerQuery(res) {}
|
function changeTime(value) {}
|
onMounted(() => {});
|
return {
|
data,
|
selectList,
|
optionsSJ,
|
getWGname,
|
selectform,
|
shortcuts,
|
changeTime,
|
};
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.FX_box {
|
width: calc(742px * 1);
|
height: calc(200px * 1);
|
// position: absolute;
|
// right: 70px;
|
// top: 490px;
|
background: url("../assets/img/d.png") no-repeat center;
|
background-size: 100% 100%;
|
padding: 40px;
|
box-sizing: border-box;
|
.FX_title {
|
font-size: 30px;
|
font-weight: bold;
|
color: #ffffff;
|
padding-bottom: 10px;
|
}
|
}
|
.form_box {
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
.inp_box {
|
/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;
|
}
|
.el-select {
|
width: 180px;
|
}
|
.el-select /deep/ .el-input__wrapper {
|
background: rgba(0, 0, 0, 0.2);
|
border: 2px solid #2e58cc;
|
border-radius: 10px;
|
color: #ffffff;
|
padding: 0;
|
padding-left: 6px;
|
}
|
.el-select /deep/ .el-input__inner {
|
color: #ffffff;
|
font-size: 24px;
|
}
|
}
|
}
|
.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>
|
