到处格式,拆分时间

This commit is contained in:
weicw
2021-11-09 09:17:49 +08:00
parent 9b52b7abac
commit eda3eb3de1
11 changed files with 378 additions and 468 deletions

View File

@@ -7,7 +7,12 @@
<!-- 搜索表单 -->
<a-form layout="inline" :model="where" :labelCol="{ offset: 1}">
<a-form-item label="起始日期:">
<a-date-picker valueFormat="YYYY-MM-DD 00:00:00" v-model:value="where.reportTimeStart"></a-date-picker>
</a-form-item>
<a-form-item label="结束日期:">
<a-date-picker valueFormat="YYYY-MM-DD 23:59:59" v-model:value="where.reportTimeEnd"></a-date-picker>
</a-form-item>
<a-form-item label="区域等级:">
<a-select v-model:value="where.regionLevel" allowClear placeholder="未选择">
<a-select-option :value="'市级'">市级</a-select-option>
@@ -25,9 +30,7 @@
<a-input v-model:value.trim="where.billName" placeholder="请输入" allow-clear />
</a-form-item>
<a-form-item label="上报时间:">
<a-range-picker separator="~" v-model:value="reportTimeScope" />
</a-form-item>
<a-form-item class="ele-text-right" :wrapper-col="{span: 24}">
<a-space>
@@ -228,12 +231,6 @@
/* 刷新表格 */
reload() {
this.where.reportTimeStart = null;
this.where.reportTimeEnd = null;
if (this.reportTimeScope && this.reportTimeScope.length == 2) {
this.where.reportTimeStart = this.reportTimeScope[0].format("Y-M-D H:m:s")
this.where.reportTimeEnd = this.reportTimeScope[1].format("Y-M-D H:m:s")
}
this.$refs.table.reload({
where: this.where
});
@@ -342,7 +339,7 @@
this.$message.error(e.msg);
}).finally(() => hide());
},
}
}
</script>
@@ -390,4 +387,4 @@
.editable-cell:hover .editable-cell-icon {
display: inline-block;
}
</style>
</style>

View File

@@ -7,6 +7,12 @@
<!-- 搜索表单 -->
<a-form layout="inline" :model="where" :labelCol="{ offset: 1}">
<a-form-item label="起始日期:">
<a-date-picker valueFormat="YYYY-MM-DD 00:00:00" v-model:value="where.reportTimeStart"></a-date-picker>
</a-form-item>
<a-form-item label="结束日期:">
<a-date-picker valueFormat="YYYY-MM-DD 23:59:59" v-model:value="where.reportTimeEnd"></a-date-picker>
</a-form-item>
<a-form-item label="区域等级:">
<a-select v-model:value="where.regionLevel" allowClear placeholder="未选择">
<a-select-option :value="'市级'">市级</a-select-option>
@@ -24,9 +30,6 @@
<a-input v-model:value.trim="where.billName" placeholder="请输入" allow-clear />
</a-form-item>
<a-form-item label="上报时间:">
<a-range-picker separator="~" v-model:value="reportTimeScope" />
</a-form-item>
<a-form-item class="ele-text-right" :wrapper-col="{span: 24}">
<a-space>
@@ -227,12 +230,7 @@
/* 刷新表格 */
reload() {
this.where.reportTimeStart = null;
this.where.reportTimeEnd = null;
if (this.reportTimeScope && this.reportTimeScope.length == 2) {
this.where.reportTimeStart = this.reportTimeScope[0].format("Y-M-D H:m:s")
this.where.reportTimeEnd = this.reportTimeScope[1].format("Y-M-D H:m:s")
}
this.$refs.table.reload({
where: this.where
});
@@ -341,7 +339,7 @@
this.$message.error(e.msg);
}).finally(() => hide());
},
}
}
</script>
@@ -389,4 +387,4 @@
.editable-cell:hover .editable-cell-icon {
display: inline-block;
}
</style>
</style>

View File

@@ -12,38 +12,33 @@
>
<template #toolbar>
<!-- 搜索表单 -->
<a-form :model="where" layout="inline" :labelCol="{ offset: 1 }">
<a-row>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="昼夜:">
<a-select
:options="timeSlotOptions"
v-model:value="where.timeSlot"
placeholder="昼夜"
>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :sm="24" :xs="24">
<a-form-item label="时间范围:">
<!-- <a-month-picker v-model:value="timeScope" placeholder="起始" /> -->
<a-range-picker v-model:value="timeScope" format="YYYY-MM-DD" />
</a-form-item>
</a-col>
<a-form :model="where" layout="inline" >
<a-form-item label="起始日期:">
<a-date-picker valueFormat="YYYY-MM-DD 00:00:00" v-model:value="where.timeStart"></a-date-picker>
</a-form-item>
<a-form-item label="结束日期:">
<a-date-picker valueFormat="YYYY-MM-DD 23:59:59" v-model:value="where.timeEnd"></a-date-picker>
</a-form-item>
<a-form-item label="昼夜:">
<a-select
:options="timeSlotOptions"
v-model:value="where.timeSlot"
placeholder="昼夜"
>
</a-select>
</a-form-item>
<a-col :lg="4" :md="12" :sm="24" :xs="24">
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
<a-space>
<a-button type="primary" @click="reload">查询</a-button>
<a-button @click="reset">重置</a-button>
<a-button @click="exportFile">导出excel</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
<a-space>
<a-button type="primary" @click="reload">查询</a-button>
<a-button @click="reset">重置</a-button>
<a-button @click="exportFile">导出excel</a-button>
</a-space>
</a-form-item>
</a-form>
<!-- <a-space>
</a-space> -->
</template>
<template #Leq="{ text, record }">
@@ -53,7 +48,8 @@
(where.timeSlot == '夜' && text <= 58)
"
color="green"
>{{ text }}</a-tag
>{{ text }}
</a-tag
>
<a-tag
v-else-if="
@@ -61,7 +57,8 @@
(record.timeSlot == '夜' && text > 58 && text <= 60)
"
color="blue"
>{{ text }}</a-tag
>{{ text }}
</a-tag
>
<a-tag
v-else-if="
@@ -69,7 +66,8 @@
(record.timeSlot == '夜' && text > 60 && text <= 62)
"
color="red"
>{{ text }}</a-tag
>{{ text }}
</a-tag
>
<a-tag
v-else-if="
@@ -77,7 +75,8 @@
(record.timeSlot == '夜' && text > 62 && text <= 64)
"
color="red"
>{{ text }}</a-tag
>{{ text }}
</a-tag
>
<a-tag
v-else-if="
@@ -85,7 +84,8 @@
(record.timeSlot == '夜' && text > 64)
"
color="red"
>{{ text }}</a-tag
>{{ text }}
</a-tag
>
<template v-else color="#FFF">{{ text }}</template>
</template>
@@ -96,7 +96,8 @@
<script>
import _ from "lodash";
import XLSX from "xlsx";
import { pageRoadNoiseStatisticUrl } from "@/api/ecology/noise/road-sound";
import {pageRoadNoiseStatisticUrl} from "@/api/ecology/noise/road-sound";
const columns = [
{
title: "城区",
@@ -118,25 +119,25 @@ const columns = [
{
title: "LeqdB(A)",
dataIndex: "avgLeq",
slots: { customRender: "Leq" },
slots: {customRender: "Leq"},
sorter: true,
},
{
title: "SDdB(A)",
dataIndex: "avgSD",
},
{
title: "L10dB(A)",
dataIndex: "avgL10",
},
{
title: "L50dB(A)",
dataIndex: "avgL50",
},
{
title: "L90dB(A)",
dataIndex: "avgL90",
},
// {
// title: "SDdB(A)",
// dataIndex: "avgSD",
// },
// {
// title: "L10dB(A)",
// dataIndex: "avgL10",
// },
// {
// title: "L50dB(A)",
// dataIndex: "avgL50",
// },
// {
// title: "L90dB(A)",
// dataIndex: "avgL90",
// },
];
export default {
name: "StatisticSoundRoadAverage",
@@ -185,18 +186,7 @@ export default {
/* 刷新表格 */
reload() {
this.$refs.table.reload({
where: {
model: this.where.model,
timeStart:
this.timeScope.length == 2
? this.timeScope[0].format("Y-M-D")
: null,
timeEnd:
this.timeScope.length == 2
? this.timeScope[1].format("Y-M-D")
: null,
timeSlot: this.where.timeSlot,
},
where: this.where
});
let cloneColumns = _.cloneDeep(columns);
if (this.where.model == "area") {
@@ -255,4 +245,4 @@ export default {
</script>
<style scoped>
</style>
</style>

View File

@@ -121,6 +121,7 @@
import XLSX from "xlsx";
import { pageRoadNoiseUrl, getColumnOptions,listAll } from "@/api/ecology/noise/road-sound";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import moment from "moment";
// import moment from "moment";
// import utils from "./utils";
export default {
@@ -141,6 +142,7 @@ export default {
title: "监测日期",
dataIndex: "monitorTime",
sorter: true,
customRender:({text})=>moment(text).format("YYYY-MM-DD HH:mm")
},
{
title: "测点名称",
@@ -212,7 +214,7 @@ export default {
dataIndex: "indexLeq",
slots: {customRender: "Leq"},
sorter: true,
},
{
title: "SDdB(A)",
@@ -505,8 +507,8 @@ export default {
dataIndex: "monitorMinute",
sorter: true,
},
{
title: "中小型车20min车流量",
dataIndex: "smallTrafficFlow",
@@ -522,7 +524,7 @@ export default {
dataIndex: "indexLeq",
sorter: true,
},
{
title: "L10",
dataIndex: "indexL10",
@@ -625,4 +627,4 @@ export default {
</script>
<style scoped lang="less">
</style>
</style>

View File

@@ -1,267 +1,248 @@
<template>
<div class="">
<a-form labelAlign="left"
layout="vertical" :model="where" :rules="whereRules"
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 18, }, sm: { span: 24 } }"
<div class="">
<a-form labelAlign="left"
layout="inline" :model="where" :rules="whereRules"
>
<a-form-item label="起始日期:">
<a-input-number id="inputNumber" v-model:value="where.startYear" :min="1970" :max="2050" />
</a-form-item>
<a-form-item label="结束日期:">
<a-input-number id="inputNumber" v-model:value="where.endYear" :min="1970" :max="2050" />
</a-form-item>
<a-form-item label="昼夜:">
<a-select
:options="timeSlotOptions"
v-model:value="where.timeSlot"
placeholder="昼夜"
>
<a-row>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item name="timeRange" label="时间范围:">
<a-range-picker
@panelChange="timeRangePanelChange"
v-model:value="timeRange"
format="YYYY"
:mode="['year', 'year']"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="昼夜:">
<a-select
:options="timeSlotOptions"
v-model:value="where.timeSlot"
placeholder="昼夜"
>
</a-select>
</a-form-item>
</a-col>
</a-select>
</a-form-item>
<a-col :lg="24" :md="24" :sm="24" :xs="24">
<a-form-item class="ele-text-left" :wrapper-col="{ span: 24 }">
<a-space>
<a-button type="primary" @click="reload">查询</a-button>
<a-button @click="reset">重置</a-button>
<a-button @click="exportFile">导出Excel</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-form>
<ele-pro-table
v-if="hisYears.length > 0"
ref="table"
row-key="id"
:datasource="url"
:columns="columns"
:where="where"
:needPage="false"
:initLoad="false"
:scroll="{ x: 'max-content' }"
:method="'POST'"
@done="(d) => (data = d.data)"
>
<template #toolbar>
<!-- 搜索表单 -->
<a-form-item class="ele-text-left" :wrapper-col="{ span: 24 }">
<a-space>
<a-button type="primary" @click="reload">查询</a-button>
<a-button @click="reset">重置</a-button>
<a-button @click="exportFile">导出Excel</a-button>
</a-space>
</a-form-item>
</a-form>
<ele-pro-table
v-if="hisYears.length > 0"
ref="table"
row-key="id"
:datasource="url"
:columns="columns"
:where="where"
:needPage="false"
:initLoad="false"
:scroll="{ x: 'max-content' }"
:method="'POST'"
@done="(d) => (data = d.data)"
>
<template #toolbar>
<!-- 搜索表单 -->
<!-- <a-space>
<!-- <a-space>
</a-space> -->
</template>
</ele-pro-table>
</div>
</a-space> -->
</template>
</ele-pro-table>
</div>
</template>
<script>
// import _ from "lodash";
import XLSX from "xlsx";
import {
pageRoadNoiseCompare,
getHistoryyears,
pageRoadNoiseCompare,
getHistoryyears,
} from "@/api/ecology/noise/road-sound";
export default {
name: "StatisticSoundRoadCompare",
components: {},
data() {
name: "StatisticSoundRoadCompare",
components: {},
data() {
const groupTimeLengthOptions = [
{
label: "年",
value: "monitor_year",
},
{
label: "季度",
value: "quarter",
},
];
const whereRules = {};
return {
url: pageRoadNoiseCompare,
data: [],
where: {
groupModel: "area",
groupTimeLength: "monitor_year",
reportTimeScope: [],
valueType: ["index_Leq"],
timeSlot: "昼",
timeRange: [],
regionLevel: "市级"
},
timeRange: [],
whereRules,
hisYears: [],
timeScope: [],
columns: [{title: "年", dataIndex: "year"}],
groupTimeLengthOptions,
timeSlotOptions: [
{
value: "昼",
label: "昼",
},
{
value: "夜",
label: "夜",
},
],
};
const groupTimeLengthOptions = [
{
label: "年",
value: "monitor_year",
},
{
label: "季度",
value: "quarter",
},
];
const whereRules = {};
return {
url: pageRoadNoiseCompare,
data: [],
where: {
groupModel: "area",
groupTimeLength: "monitor_year",
reportTimeScope: [],
valueType: ["index_Leq"],
timeSlot: "昼",
timeRange: [],
regionLevel: "市级"
},
timeRange: [],
whereRules,
hisYears: [],
timeScope: [],
columns: [{title: "年", dataIndex: "year"}],
groupTimeLengthOptions,
timeSlotOptions: [
{
value: "昼",
label: "昼",
},
{
value: "夜",
label: "夜",
},
],
};
},
mounted() {
getHistoryyears().then((res) => {
this.hisYears = res.data.data;
this.$nextTick(() => {
this.reload();
});
});
},
methods: {
/* 刷新表格 */
reload() {
if (this.where.valueType.length == 0) {
this.$message.error("请至少选择一个类型");
return;
}
this.stableDone();
this.$refs.table.reload({
where: this.where,
});
},
mounted() {
getHistoryyears().then((res) => {
this.hisYears = res.data.data;
this.$nextTick(() => {
this.reload();
});
/* 重置搜索 */
reset() {
this.where = {
groupModel: "area",
groupTimeLength: "monitor_year",
reportTimeScope: [],
valueType: ["index_Leq"],
timeRange: [],
timeSlot: "昼",
regionLevel: "市级"
};
this.this.timeScope = [];
this.reload();
},
reportTimeScopeChange(d, dstr) {
console.log(d, dstr);
},
timeRangePanelChange(val) {
val[0] && (this.where.timeRange[0] = val[0].year());
val[1] && (this.where.timeRange[1] = val[1].year());
this.timeRange = val;
},
// 数据加载完成
stableDone() {
const columns = [];
if (this.where.groupModel == "area") {
columns.push({
title: "城区",
dataIndex: "area",
sorter: true,
});
} else if (this.where.groupModel == "place") {
columns.push({
title: "测点",
dataIndex: "area",
sorter: true,
});
} else if (this.where.groupModel == "city") {
columns.push({
title: "城市",
dataIndex: "area",
sorter: true,
});
}
this.hisYears.forEach((item) => {
if (
(!this.where.startYear || this.where.startYear <= item) &&
(!this.where.endYear || !this.where.endYear >= item)
) {
if (this.where.valueType.includes("index_Leq")) {
columns.push({
title: item + "年",
align: "center",
children: [
{
title: "Leq",
dataIndex: item + "Leq",
align: "center",
customRender: ({text}) => {
const val = text ? Number(text).toFixed(1) : "";
return val;
},
},
{
title: "等级",
align: "center",
dataIndex: item + "LeqLevel",
}
]
});
}
}
});
//
this.columns = columns;
},
methods: {
/* 刷新表格 */
reload() {
if (this.where.valueType.length == 0) {
this.$message.error("请至少选择一个类型");
return;
}
// 结束时间必须大于开始时间
if (this.where.timeRange && this.where.timeRange.length == 2) {
if (this.where.timeRange[0] > this.where.timeRange[1]) {
this.$message.error("结束时间必须大于起始时间");
return;
}
this.where.startYear = this.where.timeRange[0];
this.where.endYear = this.where.timeRange[1];
}
this.stableDone();
this.$refs.table.reload({
where: this.where,
});
},
/* 重置搜索 */
reset() {
this.where = {
groupModel: "area",
groupTimeLength: "monitor_year",
reportTimeScope: [],
valueType: ["index_Leq"],
timeRange: [],
timeSlot: "昼",
regionLevel: "市级"
};
this.this.timeScope = [];
this.reload();
},
reportTimeScopeChange(d, dstr) {
console.log(d, dstr);
},
timeRangePanelChange(val) {
val[0] && (this.where.timeRange[0] = val[0].year());
val[1] && (this.where.timeRange[1] = val[1].year());
this.timeRange = val;
},
// 数据加载完成
stableDone() {
const columns = [];
if (this.where.groupModel == "area") {
columns.push({
title: "城区",
dataIndex: "area",
sorter: true,
});
} else if (this.where.groupModel == "place") {
columns.push({
title: "测点",
dataIndex: "area",
sorter: true,
});
} else if (this.where.groupModel == "city") {
columns.push({
title: "城市",
dataIndex: "area",
sorter: true,
});
}
this.hisYears.forEach((item) => {
if (
(!this.where.timeRange[0] || this.where.timeRange[0] <= item) &&
(!this.where.timeRange[1] || this.where.timeRange[1] >= item)
) {
if (this.where.valueType.includes("index_Leq")) {
columns.push({
title: item + "年",
align:"center",
children: [
{
title:"Leq",
dataIndex: item + "Leq",
align:"center",
customRender: ({text}) => {
const val = text ? Number(text).toFixed(1) : "";
return val;
},
},
{
title:"等级",
align:"center",
dataIndex: item + "LeqLevel",
}
]
});
}
}
});
//
this.columns = columns;
},
exportFile() {
const arr = [];
const th1 = [];
const th2 = [];
const merges = []; // 合并
const columnsTemp = []; // 树形结构整理成list
this.columns.forEach((item,index)=>{
if(item.children){
item.children.forEach(citem=>{
th1.push(item.title)
th2.push(citem.title)
columnsTemp.push(citem)
})
merges.push({s: {r: 0, c: th1.length-2}, e: {r: 0, c: th1.length-1}})
}else{
th1.push(item.title)
th2.push("")
columnsTemp.push(item)
merges.push({s: {r: 0, c: index}, e: {r: 1, c: index}})
}
})
arr.push(th1,th2);
this.data.forEach((d) => {
const td = columnsTemp.map((item) => {
if (typeof d[item.dataIndex] == "number") {
return d[item.dataIndex].toFixed(1);
}
return d[item.dataIndex];
});
arr.push(td);
});
let sheet = XLSX.utils.aoa_to_sheet(arr);
sheet['!merges'] = merges;
this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
},
exportFile() {
const arr = [];
const th1 = [];
const th2 = [];
const merges = []; // 合并
const columnsTemp = []; // 树形结构整理成list
this.columns.forEach((item, index) => {
if (item.children) {
item.children.forEach(citem => {
th1.push(item.title)
th2.push(citem.title)
columnsTemp.push(citem)
})
merges.push({s: {r: 0, c: th1.length - 2}, e: {r: 0, c: th1.length - 1}})
} else {
th1.push(item.title)
th2.push("")
columnsTemp.push(item)
merges.push({s: {r: 0, c: index}, e: {r: 1, c: index}})
}
})
arr.push(th1, th2);
this.data.forEach((d) => {
const td = columnsTemp.map((item) => {
if (typeof d[item.dataIndex] == "number") {
return d[item.dataIndex].toFixed(1);
}
return d[item.dataIndex];
});
arr.push(td);
});
let sheet = XLSX.utils.aoa_to_sheet(arr);
sheet['!merges'] = merges;
this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
},
},
};
</script>
<style scoped>
</style>
</style>

View File

@@ -7,6 +7,12 @@
<!-- 搜索表单 -->
<a-form layout="inline" :model="where" :labelCol="{ offset: 1}">
<a-form-item label="起始日期:">
<a-date-picker valueFormat="YYYY-MM-DD 00:00:00" v-model:value="where.reportTimeStart"></a-date-picker>
</a-form-item>
<a-form-item label="结束日期:">
<a-date-picker valueFormat="YYYY-MM-DD 23:59:59" v-model:value="where.reportTimeEnd"></a-date-picker>
</a-form-item>
<a-form-item label="区域等级:">
<a-select v-model:value="where.regionLevel" allowClear placeholder="未选择">
<a-select-option :value="'市级'">市级</a-select-option>
@@ -24,9 +30,6 @@
<a-input v-model:value.trim="where.billName" placeholder="请输入" allow-clear />
</a-form-item>
<a-form-item label="上报时间:">
<a-range-picker separator="~" v-model:value="reportTimeScope" />
</a-form-item>
<a-form-item class="ele-text-right" :wrapper-col="{span: 24}">
<a-space>
@@ -223,16 +226,8 @@
};
},
methods: {
/* 刷新表格 */
reload() {
this.where.reportTimeStart = null;
this.where.reportTimeEnd = null;
if (this.reportTimeScope && this.reportTimeScope.length == 2) {
this.where.reportTimeStart = this.reportTimeScope[0].format("Y-M-D H:m:s")
this.where.reportTimeEnd = this.reportTimeScope[1].format("Y-M-D H:m:s")
}
this.$refs.table.reload({
where: this.where
});
@@ -341,7 +336,7 @@
this.$message.error(e.msg);
}).finally(() => hide());
},
}
}
</script>
@@ -389,4 +384,4 @@
.editable-cell:hover .editable-cell-icon {
display: inline-block;
}
</style>
</style>