@@ -13,14 +13,14 @@ VUE_APP_TITLE = MES系统 | |||
# 芋道管理系统/开发环境 | |||
# VUE_APP_BASE_API = 'http://100.64.0.26:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.0.33:48082' | |||
VUE_APP_BASE_API = 'http://192.168.0.33:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.4.173:48080' | |||
# VUE_APP_BASE_API = 'http://192.168.2.173:48080' | |||
# VUE_APP_BASE_API = 'http://192.168.1.49:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.1.8:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.4.159:48080' | |||
# VUE_APP_BASE_API = 'http://192.168.1.56:48082' | |||
VUE_APP_BASE_API = 'http://192.168.1.62:48080' | |||
# VUE_APP_BASE_API = 'http://192.168.1.62:48082' | |||
# 积木报表指向地址 | |||
VUE_APP_JIMU_API = 'http://192.168.0.33:48082' | |||
@@ -10,11 +10,11 @@ export function environmentalCheckRealtime(query) { | |||
} | |||
// 获得环保检测指标趋势数据 | |||
export function environmentalCheckRealtimeTrend(query) { | |||
export function environmentalCheckRealtimeTrend(data) { | |||
return request({ | |||
url: '/base/environmental-check-record/trend', | |||
method: 'get', | |||
params: query | |||
method: 'post', | |||
data: data | |||
}) | |||
} | |||
@@ -64,20 +64,20 @@ export function environmentalCheckDelete(query) { | |||
} | |||
// 获得环保检测记录分页 | |||
export function environmentalCheckRecordPage(query) { | |||
export function environmentalCheckRecordPage(data) { | |||
return request({ | |||
url: '/base/environmental-check-record/page', | |||
method: 'get', | |||
params: query | |||
method: 'post', | |||
data: data | |||
}) | |||
} | |||
// 导出环保检测记录 Excel | |||
export function environmentalCheckRecordExport(query) { | |||
export function environmentalCheckRecordExport(data) { | |||
return request({ | |||
url: '/base/environmental-check-record/export-excel', | |||
method: 'get', | |||
params: query, | |||
method: 'post', | |||
data: data, | |||
responseType: 'blob' | |||
}) | |||
} | |||
@@ -221,18 +221,30 @@ export default { | |||
timeSelect() { | |||
switch (this.queryParams.timeDim) { | |||
case '1': | |||
if (!this.timeValue) { | |||
this.$modal.msgError('时间范围不能为空') | |||
return false | |||
} | |||
if (this.timeValue[1] - this.timeValue[0] > 7*24*3600000) { | |||
this.$modal.msgError('最大时间范围为7天,请重新选择') | |||
this.timeValue = [] | |||
} | |||
break | |||
case '2': | |||
if (!this.dateValue) { | |||
this.$modal.msgError('时间范围不能为空') | |||
return false | |||
} | |||
if (this.dateValue[1] - this.dateValue[0] > 29*24*3600000) { | |||
this.$modal.msgError('最大时间范围为30天,请重新选择') // 自动选择默认是0:00:00要求是23:59:59 | |||
this.dateValue = [] | |||
} | |||
break | |||
case '4': | |||
if (!this.monthValue) { | |||
this.$modal.msgError('时间范围不能为空') | |||
return false | |||
} | |||
if (this.monthValue[1] - this.monthValue[0] > 729*24*3600000) { | |||
this.$modal.msgError('最大时间范围为24个月,请重新选择')// 同理上面 | |||
this.monthValue = [] | |||
@@ -338,7 +350,7 @@ export default { | |||
} | |||
switch (this.queryParams.timeDim) { | |||
case '1': | |||
if (this.timeValue.length > 0) { | |||
if (this.timeValue && this.timeValue.length > 0) { | |||
this.queryParams.startTime = this.timeValue[0] | |||
this.queryParams.endTime = this.timeValue[1] // 不用转 | |||
} else { | |||
@@ -8,7 +8,6 @@ | |||
<script> | |||
import * as echarts from 'echarts' | |||
import resize from '@/utils/chartMixins/resize' | |||
import moment from 'moment' | |||
export default { | |||
name: "LineChart", | |||
mixins: [resize], | |||
@@ -207,18 +207,30 @@ export default { | |||
timeSelect() { | |||
switch (this.queryParams.timeDim) { | |||
case '1': | |||
if (!this.timeValue) { | |||
this.$modal.msgError('时间范围不能为空') | |||
return false | |||
} | |||
if (this.timeValue[1] - this.timeValue[0] > 7*24*3600000) { | |||
this.$modal.msgError('最大时间范围为7天,请重新选择') | |||
this.timeValue = [] | |||
} | |||
break | |||
case '2': | |||
if (!this.dateValue) { | |||
this.$modal.msgError('时间范围不能为空') | |||
return false | |||
} | |||
if (this.dateValue[1] - this.dateValue[0] > 29*24*3600000) { | |||
this.$modal.msgError('最大时间范围为30天,请重新选择') // 自动选择默认是0:00:00要求是23:59:59 | |||
this.dateValue = [] | |||
} | |||
break | |||
case '4': | |||
if (!this.monthValue) { | |||
this.$modal.msgError('时间范围不能为空') | |||
return false | |||
} | |||
if (this.monthValue[1] - this.monthValue[0] > 729*24*3600000) { | |||
this.$modal.msgError('最大时间范围为24个月,请重新选择')// 同理上面 | |||
this.monthValue = [] | |||
@@ -307,7 +319,7 @@ export default { | |||
} | |||
switch (this.queryParams.timeDim) { | |||
case '1': | |||
if (this.timeValue.length > 0) { | |||
if (this.timeValue && this.timeValue.length > 0) { | |||
this.queryParams.startTime = this.timeValue[0] | |||
this.queryParams.endTime = this.timeValue[1] // 不用转 | |||
} else { | |||
@@ -316,7 +328,7 @@ export default { | |||
} | |||
break | |||
case '2': | |||
if (this.dateValue.length > 0) { | |||
if (this.dateValue && this.dateValue.length > 0) { | |||
this.queryParams.startTime = this.dateValue[0] | |||
this.queryParams.endTime = this.dateValue[1] + 86399000 // 转为23:59:59 | |||
} else { | |||
@@ -336,7 +348,7 @@ export default { | |||
} | |||
break | |||
case '4':// 转为本月最后一天的最后一秒 | |||
if (this.monthValue.length > 0) { | |||
if (this.monthValue && this.monthValue.length > 0) { | |||
this.queryParams.startTime = this.monthValue[0] | |||
this.queryParams.endTime = this.transformTime(this.monthValue[1]) | |||
} else { | |||
@@ -18,17 +18,74 @@ export default { | |||
chartHeight: this.tableHeight(420) | |||
} | |||
}, | |||
props: { | |||
chartData: { | |||
type: Object, | |||
required: true, | |||
default: () => { | |||
return {} | |||
} | |||
}, | |||
timeDim: { | |||
type: String, | |||
default: '' | |||
} | |||
}, | |||
mounted() { | |||
window.addEventListener('resize', () => { | |||
this.chartHeight = this.tableHeight(420) | |||
}) | |||
this.getChart() | |||
}, | |||
watch: { | |||
chartData: function () { | |||
this.getChart() | |||
} | |||
}, | |||
methods: { | |||
getChart() { | |||
var chartDom = document.getElementById('wasteWaterLine'); | |||
var myChart = echarts.init(chartDom); | |||
if ( | |||
this.chart !== null && | |||
this.chart !== '' && | |||
this.chart !== undefined | |||
) { | |||
this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例 | |||
} | |||
this.chartDom = document.getElementById('wasteWaterLine'); | |||
this.chart = echarts.init(this.chartDom); | |||
if (Object.keys(this.chartData).length === 0) { | |||
return false | |||
} | |||
let legendData = [] | |||
let xData = [] | |||
let seriesData = [] | |||
for (let item in this.chartData) { | |||
legendData.push(item) | |||
let obj = {} | |||
let data = [] | |||
for (let subItem in this.chartData[item]) { | |||
data.push(this.chartData[item][subItem].checkValue) | |||
} | |||
obj.name = item | |||
obj.type = 'line' | |||
obj.stack = 'Total' | |||
obj.symbol = 'none' | |||
obj.data = data | |||
seriesData.push(obj) | |||
} | |||
for (let i = 0; i < this.chartData[legendData[0]].length; i++) { | |||
let time = "" | |||
if (this.timeDim === '3') { | |||
let year = this.chartData[legendData[0]][i].axisTime.slice(0,4) | |||
let weak = this.chartData[legendData[0]][i].axisTime.slice(6,8) | |||
time = year+' 第 '+weak+' 周' | |||
} else { | |||
time = this.chartData[legendData[0]][i].axisTime | |||
} | |||
xData.push(time) | |||
} | |||
var option = { | |||
color: ['#63BDFF', '#7164FF', '#FF6860', '#FF9747', '#B0EB42', '#D680FF', '#0043D2'], | |||
tooltip: { | |||
trigger: 'axis', | |||
formatter: function (params) { | |||
@@ -51,27 +108,28 @@ export default { | |||
} | |||
}, | |||
legend: { | |||
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'], | |||
right: '1%', | |||
data: legendData, | |||
right: '2%', | |||
icon: 'rect', | |||
itemHeight: 8, | |||
itemWidth: 8 | |||
itemWidth: 8, | |||
textStyle: { | |||
color: 'auto' | |||
} | |||
}, | |||
grid: { | |||
left: '3%', | |||
right: '4%', | |||
right: '2%', | |||
bottom: '3%', | |||
containLabel: true | |||
}, | |||
toolbox: { | |||
feature: { | |||
saveAsImage: {} | |||
} | |||
}, | |||
xAxis: { | |||
type: 'category', | |||
boundaryGap: false, | |||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] | |||
data: xData, | |||
axisLabel: { | |||
rotate: "45" | |||
} | |||
}, | |||
yAxis: { | |||
type: 'value' | |||
@@ -82,46 +140,10 @@ export default { | |||
color: 'rgba(11, 88, 255, 1)' | |||
} | |||
}, | |||
series: [ | |||
{ | |||
name: 'Email', | |||
type: 'line', | |||
stack: 'Total', | |||
symbol: 'none', | |||
data: [120, 132, 101, 134, 90, 230, 210] | |||
}, | |||
{ | |||
name: 'Union Ads', | |||
type: 'line', | |||
stack: 'Total', | |||
symbol: 'none', | |||
data: [220, 182, 191, 234, 290, 330, 310] | |||
}, | |||
{ | |||
name: 'Video Ads', | |||
type: 'line', | |||
stack: 'Total', | |||
symbol: 'none', | |||
data: [150, 232, 201, 154, 190, 330, 410] | |||
}, | |||
{ | |||
name: 'Direct', | |||
type: 'line', | |||
stack: 'Total', | |||
symbol: 'none', | |||
data: [320, 332, 301, 334, 390, 330, 320] | |||
}, | |||
{ | |||
name: 'Search Engine', | |||
type: 'line', | |||
stack: 'Total', | |||
symbol: 'none', | |||
data: [820, 932, 901, 934, 1290, 1330, 1320] | |||
} | |||
] | |||
series: seriesData | |||
}; | |||
option && myChart.setOption(option); | |||
option && this.chart.setOption(option); | |||
} | |||
} | |||
} |
@@ -0,0 +1,378 @@ | |||
<template> | |||
<div class="searchBarBox divHeight" ref="searchBarRef"> | |||
<el-form :inline="true" class="demo-form-inline"> | |||
<el-form-item label="时间维度" required> | |||
<el-select v-model="queryParams.timeDim" placeholder="请选择" style="width: 80px;" size="small"> | |||
<el-option | |||
v-for="item in getDictDatas(this.DICT_TYPE.TIME_DIM)" | |||
:key="item.value" | |||
:label="item.label" | |||
:value="item.value" | |||
size="small"> | |||
</el-option> | |||
</el-select> | |||
</el-form-item> | |||
<el-form-item label="时间范围" required> | |||
<div v-show="queryParams.timeDim === '1'"> | |||
<el-date-picker | |||
v-model="timeValue" | |||
type="datetimerange" | |||
range-separator="至" | |||
start-placeholder="开始日期" | |||
end-placeholder="结束日期" | |||
format="yyyy-MM-dd HH:mm" | |||
value-format="timestamp" | |||
:picker-options="pickerOptions" | |||
popper-class="noneMinute" | |||
@change="timeSelect" | |||
size="small" | |||
style='width:350px;' | |||
> | |||
</el-date-picker> | |||
</div> | |||
<div v-show="queryParams.timeDim === '2'"> | |||
<el-date-picker | |||
v-model="dateValue" | |||
type="daterange" | |||
range-separator="至" | |||
start-placeholder="开始日期" | |||
end-placeholder="结束日期" | |||
value-format="timestamp" | |||
:picker-options="pickerOptions" | |||
@change="timeSelect" | |||
size="small" | |||
style='width:350px;' | |||
> | |||
</el-date-picker> | |||
</div> | |||
<div v-show="queryParams.timeDim === '3'"> | |||
<el-date-picker | |||
v-model="weekValue1" | |||
type="week" | |||
format="yyyy 第 WW 周" | |||
style='width:170px;' | |||
:picker-options="pickerOptionsWeek" | |||
@change="startWeek" | |||
size="small" | |||
placeholder="选择周"> | |||
</el-date-picker>- | |||
<el-date-picker | |||
v-model="weekValue2" | |||
type="week" | |||
format="yyyy 第 WW 周" | |||
:picker-options="pickerOptionsWeek" | |||
style='width:170px;' | |||
@change="endWeek" | |||
size="small" | |||
placeholder="选择周"> | |||
</el-date-picker> | |||
</div> | |||
<div v-show="queryParams.timeDim === '4'"> | |||
<el-date-picker | |||
v-model="monthValue" | |||
type="monthrange" | |||
range-separator="至" | |||
start-placeholder="开始日期" | |||
end-placeholder="结束日期" | |||
value-format="timestamp" | |||
:picker-options="pickerOptions" | |||
size="small" | |||
style='width:350px;' | |||
@change="timeSelect" | |||
> | |||
</el-date-picker> | |||
</div> | |||
<div v-show="queryParams.timeDim === '5'"> | |||
<el-date-picker | |||
style='width:170px;' | |||
v-model="yearValue1" | |||
type="year" | |||
:picker-options="pickerOptions" | |||
value-format="timestamp" | |||
placeholder="选择年" | |||
size="small" | |||
@change="startYear" | |||
> | |||
</el-date-picker>- | |||
<el-date-picker | |||
style='width:170px;' | |||
v-model="yearValue2" | |||
type="year" | |||
:picker-options="pickerOptions" | |||
value-format="timestamp" | |||
placeholder="选择年" | |||
size="small" | |||
@change="endYear" | |||
> | |||
</el-date-picker> | |||
</div> | |||
</el-form-item> | |||
<el-form-item> | |||
<el-button type="primary" size="small" @click="search">查询</el-button> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
</template> | |||
<script> | |||
import moment from 'moment' | |||
export default { | |||
name: 'SearchArea', | |||
data() { | |||
return { | |||
// 查询参数 | |||
queryParams: { | |||
timeDim: null, | |||
startTime: null, | |||
endTime: null | |||
}, | |||
timeValue: [],// 最大7天只能整点 | |||
dateValue: [],// 最大30天 | |||
weekValue1: null,//最多24周 | |||
weekValue2: null, | |||
monthValue: [],//最多24月 | |||
yearValue1: null,//最多10年 | |||
yearValue2: null, | |||
pickerOptions: { | |||
disabledDate(date) { | |||
return date.getTime() > Date.now() | |||
} | |||
}, | |||
pickerOptionsWeek: { | |||
disabledDate(time) { | |||
let day = Date.now() | |||
let limitTime = moment(day).day(-1) | |||
return time.getTime() > new Date(limitTime).getTime() | |||
} | |||
} | |||
} | |||
}, | |||
mounted() { | |||
this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时 | |||
this.timeValue = [moment().startOf('day'), moment().endOf('day')-59*61*1000] | |||
}, | |||
methods: { | |||
// 范围选择器 | |||
timeSelect() { | |||
switch (this.queryParams.timeDim) { | |||
case '1': | |||
if (!this.timeValue) { | |||
this.$modal.msgError('时间范围不能为空') | |||
return false | |||
} | |||
if (this.timeValue[1] - this.timeValue[0] > 7*24*3600000) { | |||
this.$modal.msgError('最大时间范围为7天,请重新选择') | |||
this.timeValue = [] | |||
} | |||
break | |||
case '2': | |||
if (!this.dateValue) { | |||
this.$modal.msgError('时间范围不能为空') | |||
return false | |||
} | |||
if (this.dateValue[1] - this.dateValue[0] > 29*24*3600000) { | |||
this.$modal.msgError('最大时间范围为30天,请重新选择') // 自动选择默认是0:00:00要求是23:59:59 | |||
this.dateValue = [] | |||
} | |||
break | |||
case '4': | |||
if (!this.monthValue) { | |||
this.$modal.msgError('时间范围不能为空') | |||
return false | |||
} | |||
if (this.monthValue[1] - this.monthValue[0] > 729*24*3600000) { | |||
this.$modal.msgError('最大时间范围为24个月,请重新选择')// 同理上面 | |||
this.monthValue = [] | |||
} | |||
break | |||
default: | |||
} | |||
}, | |||
// 年选择器 | |||
startYear() { | |||
if (this.yearValue2 && this.yearValue2 < this.yearValue1) { | |||
this.$modal.msgError('开始时间不能晚于结束时间,请重新选择') | |||
this.yearValue1 = null | |||
return false | |||
} | |||
if (this.yearValue1 && this.yearValue2) { | |||
if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) { | |||
this.$modal.msgError('最大时间范围为10年,请重新选择') | |||
this.yearValue1 = null | |||
return false | |||
} | |||
} | |||
}, | |||
endYear() { | |||
if (this.yearValue2 && this.yearValue2 < this.yearValue1) { | |||
this.$modal.msgError('结束时间不能早于开始时间,请重新选择') | |||
this.yearValue2 = null | |||
return false | |||
} | |||
if (this.yearValue1 && this.yearValue2) { | |||
if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) { | |||
this.$modal.msgError('最大时间范围为10年,请重新选择') | |||
this.yearValue2 = null | |||
return false | |||
} | |||
} | |||
}, | |||
// 周选择器 | |||
startWeek() { | |||
if (this.weekValue1 && this.weekValue2) { | |||
let a = new Date(this.weekValue1).getTime() | |||
let b = new Date(this.weekValue2).getTime() | |||
if (a > b) { | |||
this.$modal.msgError('开始时间不能晚于结束时间,请重新选择') | |||
this.weekValue1 = null | |||
return false | |||
} | |||
if (b - a > 167*24*3600000) { | |||
this.$modal.msgError('最大时间范围为24周,请重新选择') | |||
this.weekValue1 = null | |||
return false | |||
} | |||
} | |||
}, | |||
endWeek() { | |||
if (this.weekValue1 && this.weekValue2) { | |||
let a = new Date(this.weekValue1).getTime() | |||
let b = new Date(this.weekValue2).getTime() | |||
if (a > b) { | |||
this.$modal.msgError('结束时间不能早于开始时间,请重新选择') | |||
this.weekValue2 = null | |||
return false | |||
} | |||
if (b - a > 167*24*3600000) { | |||
this.$modal.msgError('最大时间范围为24周,请重新选择') | |||
this.weekValue2 = null | |||
return false | |||
} | |||
} | |||
}, | |||
// 查询 | |||
search() { | |||
if (!this.queryParams.timeDim) { | |||
this.$modal.msgError('请选择时间维度') | |||
return false | |||
} | |||
switch (this.queryParams.timeDim) { | |||
case '1': | |||
if (this.timeValue && this.timeValue.length > 0) { | |||
this.queryParams.startTime = this.timeValue[0] | |||
this.queryParams.endTime = this.timeValue[1] // 不用转 | |||
} else { | |||
this.$modal.msgError('时间范围不能为空') | |||
return false | |||
} | |||
break | |||
case '2': | |||
if (this.dateValue && this.dateValue.length > 0) { | |||
this.queryParams.startTime = this.dateValue[0] | |||
this.queryParams.endTime = this.dateValue[1] + 86399000 // 转为23:59:59 | |||
} else { | |||
this.$modal.msgError('日范围不能为空') | |||
return false | |||
} | |||
break | |||
case '3': | |||
if (this.weekValue1 && this.weekValue2) { | |||
let a = moment(this.weekValue1).day(0).format('YYYY-MM-DD') + ' 00:00:00' | |||
let b = moment(this.weekValue2).day(6).format('YYYY-MM-DD') + ' 23:59:59' | |||
this.queryParams.startTime = new Date(a).getTime() | |||
this.queryParams.endTime = new Date(b).getTime() | |||
} else { | |||
this.$modal.msgError('周范围不能为空') | |||
return false | |||
} | |||
break | |||
case '4':// 转为本月最后一天的最后一秒 | |||
if (this.monthValue && this.monthValue.length > 0) { | |||
this.queryParams.startTime = this.monthValue[0] | |||
this.queryParams.endTime = this.transformTime(this.monthValue[1]) | |||
} else { | |||
this.$modal.msgError('月范围不能为空') | |||
return false | |||
} | |||
break | |||
default://本年最后一天 | |||
if (this.yearValue1 && this.yearValue2) { | |||
if (this.yearValue2 < this.yearValue1) { | |||
this.$modal.msgError('结束时间不能早于开始时间') | |||
return false | |||
} else { | |||
this.queryParams.startTime = this.yearValue1 | |||
this.queryParams.endTime = this.transformYear(this.yearValue2) | |||
} | |||
} else { | |||
this.$modal.msgError('年范围不能为空') | |||
return false | |||
} | |||
} | |||
this.queryParams.startTime = this.queryParams.startTime + '' | |||
this.queryParams.endTime = this.queryParams.endTime + '' | |||
this.$emit('submit', this.queryParams) | |||
}, | |||
transformTime(timeStamp) {// 本月最后一天 | |||
let year = moment(timeStamp).format('YYYY') | |||
let month = moment(timeStamp).format('MM') | |||
let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59' | |||
let value = new Date(newData).getTime() | |||
return value | |||
}, | |||
transformYear(timeStamp) {// 本年最后一天 | |||
let year = moment(timeStamp).format('YYYY') | |||
let newData = year+'-12-31 23:59:59' | |||
let value = new Date(newData).getTime() | |||
return value | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang='scss'> | |||
/* 级联选择器 */ | |||
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio { | |||
display: none; | |||
} | |||
/* 时间整点 */ | |||
.noneMinute .el-time-spinner__wrapper { | |||
width: 100%; | |||
} | |||
.noneMinute .el-scrollbar:nth-of-type(2) { | |||
display: none; | |||
} | |||
.demo-form-inline { | |||
.el-date-editor .el-range__icon { | |||
font-size: 16px; | |||
color: #0B58FF; | |||
} | |||
.el-input__prefix .el-icon-date { | |||
font-size: 16px; | |||
color: #0B58FF; | |||
} | |||
} | |||
</style> | |||
<style lang="scss" scoped> | |||
.searchBarBox .foldClass { | |||
position: absolute; | |||
top: 14px; | |||
right: 0; | |||
cursor: pointer; | |||
font-size: 12px; | |||
color:#0B58FF; | |||
} | |||
.searchBarBox .foldClass .iconfont { | |||
font-size: 14px; | |||
} | |||
.divHeight { | |||
height: 45px; | |||
overflow: hidden; | |||
} | |||
.separateStyle { | |||
display: inline-block; | |||
width: 1px; | |||
height: 24px; | |||
background: #E8E8E8; | |||
vertical-align: middle; | |||
margin: 0 10px; | |||
} | |||
</style> |
@@ -1,5 +1,5 @@ | |||
<template> | |||
<div class="app-container"> | |||
<div class="app-container vocHis"> | |||
<!-- 搜索工作栏 --> | |||
<search-bar | |||
:formConfigs="formConfig" | |||
@@ -13,6 +13,7 @@ | |||
:table-props="tableProps" | |||
:table-data="list" | |||
:max-height="tableH" | |||
:row-class-name="tableRowClassName" | |||
/> | |||
<pagination | |||
:page.sync="queryParams.pageNo" | |||
@@ -72,14 +73,15 @@ export default { | |||
type: 'select', | |||
label: '指标名称', | |||
selectOptions: [], | |||
param: 'checkId' | |||
param: 'checkId', | |||
filterable: true | |||
}, | |||
{ | |||
type: 'datePicker', | |||
label: '时间', | |||
dateType: 'datetimerange', | |||
format: 'yyyy-MM-dd HH:mm:ss', | |||
valueFormat: "yyyy-MM-dd HH:mm:ss", | |||
valueFormat: "timestamp", | |||
rangeSeparator: '-', | |||
startPlaceholder: '开始时间', | |||
endPlaceholder: '结束时间', | |||
@@ -94,10 +96,10 @@ export default { | |||
color: 'primary' | |||
}, | |||
{ | |||
type: this.$auth.hasPermi('base:order-manage:create') ? 'separate' : '', | |||
type: this.$auth.hasPermi('base:voc:export') ? 'separate' : '', | |||
}, | |||
{ | |||
type: this.$auth.hasPermi('base:order-manage:create') ? 'button' : '', | |||
type: this.$auth.hasPermi('base:voc:export') ? 'button' : '', | |||
btnName: '导出', | |||
name: 'export', | |||
color: 'primary', | |||
@@ -110,7 +112,8 @@ export default { | |||
pageSize: 20, | |||
checkId: null, | |||
checkType: 3, | |||
checkTime: [], | |||
startTime: null, | |||
endTime: null | |||
}, | |||
tableProps, | |||
list: [], | |||
@@ -122,11 +125,11 @@ export default { | |||
window.addEventListener('resize', () => { | |||
this.tableH = this.tableHeight(260) | |||
}) | |||
let end = moment().format('YYYY-MM-DD 23:59:59') | |||
let start = moment().format('YYYY-MM-DD 00:00:00') | |||
let end = moment(moment().format('YYYY-MM-DD 23:59:59')).valueOf() | |||
let start = moment(moment().format('YYYY-MM-DD 00:00:00')).valueOf() | |||
this.formConfig[1].defaultSelect = [start, end] | |||
this.queryParams.checkTime[0] = start | |||
this.queryParams.checkTime[1] = end | |||
this.queryParams.startTime = start | |||
this.queryParams.endTime = end | |||
this.getSelectList() | |||
this.getList() | |||
}, | |||
@@ -134,8 +137,8 @@ export default { | |||
buttonClick(val) { | |||
this.queryParams.pageNo = 1; | |||
this.queryParams.checkId = val.checkId | |||
this.queryParams.checkTime[0] = val.timeVal ? val.timeVal[0] : null | |||
this.queryParams.checkTime[1] = val.timeVal ? val.timeVal[1] : null | |||
this.queryParams.startTime = val.timeVal ? val.timeVal[0] : null | |||
this.queryParams.endTime = val.timeVal ? val.timeVal[1] : null | |||
if (val.btnName === 'search') { | |||
this.getList() | |||
} else { | |||
@@ -161,7 +164,22 @@ export default { | |||
console.log(res) | |||
this.formConfig[0].selectOptions = res.data.list || [] | |||
}) | |||
}, | |||
tableRowClassName({row, rowIndex}) { | |||
console.log(row) | |||
if (row.markRed) { | |||
return 'warning-row' | |||
}else { | |||
return '' | |||
} | |||
} | |||
} | |||
} | |||
</script> | |||
</script> | |||
<style lang='scss'> | |||
.vocHis { | |||
.el-table .warning-row { | |||
background: #fee1e1; | |||
} | |||
} | |||
</style> |
@@ -23,18 +23,32 @@ | |||
<span class="blueTitle"></span> | |||
<span>检测指标趋势图</span> | |||
</div> | |||
<!-- 搜索工作栏 --> | |||
<search-area @submit="getTrend"/> | |||
<line-chart :chartData="chartData" v-show='Object.keys(chartData).length !== 0' :timeDim="queryParams.timeDim"/> | |||
<!-- 没有数据 --> | |||
<div class="no-data-bg" v-show='Object.keys(chartData).length === 0'></div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import { environmentalCheckRealtime } from '@/api/safetyEnvironmental/environmental' | |||
import { environmentalCheckRealtime, environmentalCheckRealtimeTrend } from '@/api/safetyEnvironmental/environmental' | |||
import LineChart from './../../components/lineChart' | |||
import SearchArea from './../../components/searchArea' | |||
export default { | |||
name: 'Voc', | |||
data(){ | |||
return { | |||
realtimeList:[] | |||
realtimeList:[], | |||
queryParams:{ | |||
checkType: 1, | |||
timeDim: null, | |||
timeRange: [] | |||
}, | |||
chartData: {} | |||
} | |||
}, | |||
components: { LineChart, SearchArea }, | |||
mounted() { | |||
this.getMsg() | |||
}, | |||
@@ -44,6 +58,20 @@ export default { | |||
console.log(res) | |||
this.realtimeList = res.data || [] | |||
}) | |||
}, | |||
getTrend(params) { | |||
console.log(params) | |||
this.queryParams.timeDim = params.timeDim | |||
this.queryParams.timeRange[0] = params.startTime | |||
this.queryParams.timeRange[1] = params.endTime | |||
environmentalCheckRealtimeTrend({...this.queryParams}).then(res => { | |||
console.log(res) | |||
if (res.code === 0) { | |||
this.chartData = res.data | |||
} else { | |||
this.chartData = {} | |||
} | |||
}) | |||
} | |||
} | |||
} | |||
@@ -1,5 +1,5 @@ | |||
<template> | |||
<div class="app-container"> | |||
<div class="app-container wasteGasHis"> | |||
<!-- 搜索工作栏 --> | |||
<search-bar | |||
:formConfigs="formConfig" | |||
@@ -13,6 +13,7 @@ | |||
:table-props="tableProps" | |||
:table-data="list" | |||
:max-height="tableH" | |||
:row-class-name="tableRowClassName" | |||
/> | |||
<pagination | |||
:page.sync="queryParams.pageNo" | |||
@@ -72,14 +73,15 @@ export default { | |||
type: 'select', | |||
label: '指标名称', | |||
selectOptions: [], | |||
param: 'checkId' | |||
param: 'checkId', | |||
filterable: true | |||
}, | |||
{ | |||
type: 'datePicker', | |||
label: '时间', | |||
dateType: 'datetimerange', | |||
format: 'yyyy-MM-dd HH:mm:ss', | |||
valueFormat: "yyyy-MM-dd HH:mm:ss", | |||
valueFormat: "timestamp", | |||
rangeSeparator: '-', | |||
startPlaceholder: '开始时间', | |||
endPlaceholder: '结束时间', | |||
@@ -94,10 +96,10 @@ export default { | |||
color: 'primary' | |||
}, | |||
{ | |||
type: this.$auth.hasPermi('base:order-manage:create') ? 'separate' : '', | |||
type: this.$auth.hasPermi('base:waste-gas:export') ? 'separate' : '', | |||
}, | |||
{ | |||
type: this.$auth.hasPermi('base:order-manage:create') ? 'button' : '', | |||
type: this.$auth.hasPermi('base:waste-gas:export') ? 'button' : '', | |||
btnName: '导出', | |||
name: 'export', | |||
color: 'primary', | |||
@@ -110,7 +112,8 @@ export default { | |||
pageSize: 20, | |||
checkId: null, | |||
checkType: 2, | |||
checkTime: [], | |||
startTime: null, | |||
endTime: null | |||
}, | |||
tableProps, | |||
list: [], | |||
@@ -122,11 +125,11 @@ export default { | |||
window.addEventListener('resize', () => { | |||
this.tableH = this.tableHeight(260) | |||
}) | |||
let end = moment().format('YYYY-MM-DD 23:59:59') | |||
let start = moment().format('YYYY-MM-DD 00:00:00') | |||
let end = moment(moment().format('YYYY-MM-DD 23:59:59')).valueOf() | |||
let start = moment(moment().format('YYYY-MM-DD 00:00:00')).valueOf() | |||
this.formConfig[1].defaultSelect = [start, end] | |||
this.queryParams.checkTime[0] = start | |||
this.queryParams.checkTime[1] = end | |||
this.queryParams.startTime = start | |||
this.queryParams.endTime = end | |||
this.getSelectList() | |||
this.getList() | |||
}, | |||
@@ -134,15 +137,15 @@ export default { | |||
buttonClick(val) { | |||
this.queryParams.pageNo = 1; | |||
this.queryParams.checkId = val.checkId | |||
this.queryParams.checkTime[0] = val.timeVal ? val.timeVal[0] : null | |||
this.queryParams.checkTime[1] = val.timeVal ? val.timeVal[1] : null | |||
this.queryParams.startTime = val.timeVal ? val.timeVal[0] : null | |||
this.queryParams.endTime = val.timeVal ? val.timeVal[1] : null | |||
if (val.btnName === 'search') { | |||
this.getList() | |||
} else { | |||
this.$modal.confirm('是否确认导出').then(() => { | |||
return environmentalCheckRecordExport({...this.queryParams}); | |||
}).then(response => { | |||
this.$download.excel(response, '废水检测历史记录.xls'); | |||
this.$download.excel(response, '废气检测历史记录.xls'); | |||
}).catch(() => {}) | |||
} | |||
}, | |||
@@ -161,7 +164,22 @@ export default { | |||
console.log(res) | |||
this.formConfig[0].selectOptions = res.data.list || [] | |||
}) | |||
}, | |||
tableRowClassName({row, rowIndex}) { | |||
console.log(row) | |||
if (row.markRed) { | |||
return 'warning-row' | |||
}else { | |||
return '' | |||
} | |||
} | |||
} | |||
} | |||
</script> | |||
</script> | |||
<style lang='scss'> | |||
.wasteGasHis { | |||
.el-table .warning-row { | |||
background: #fee1e1; | |||
} | |||
} | |||
</style> |
@@ -23,18 +23,32 @@ | |||
<span class="blueTitle"></span> | |||
<span>检测指标趋势图</span> | |||
</div> | |||
<!-- 搜索工作栏 --> | |||
<search-area @submit="getTrend"/> | |||
<line-chart :chartData="chartData" v-show='Object.keys(chartData).length !== 0' :timeDim="queryParams.timeDim"/> | |||
<!-- 没有数据 --> | |||
<div class="no-data-bg" v-show='Object.keys(chartData).length === 0'></div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import { environmentalCheckRealtime } from '@/api/safetyEnvironmental/environmental' | |||
import { environmentalCheckRealtime, environmentalCheckRealtimeTrend } from '@/api/safetyEnvironmental/environmental' | |||
import LineChart from './../../components/lineChart' | |||
import SearchArea from './../../components/searchArea' | |||
export default { | |||
name: 'WasteGasManagement', | |||
data(){ | |||
return { | |||
realtimeList:[] | |||
realtimeList:[], | |||
queryParams:{ | |||
checkType: 2, | |||
timeDim: null, | |||
timeRange: [] | |||
}, | |||
chartData: {} | |||
} | |||
}, | |||
components: { LineChart, SearchArea }, | |||
mounted() { | |||
this.getMsg() | |||
}, | |||
@@ -44,6 +58,20 @@ export default { | |||
console.log(res) | |||
this.realtimeList = res.data || [] | |||
}) | |||
}, | |||
getTrend(params) { | |||
console.log(params) | |||
this.queryParams.timeDim = params.timeDim | |||
this.queryParams.timeRange[0] = params.startTime | |||
this.queryParams.timeRange[1] = params.endTime | |||
environmentalCheckRealtimeTrend({...this.queryParams}).then(res => { | |||
console.log(res) | |||
if (res.code === 0) { | |||
this.chartData = res.data | |||
} else { | |||
this.chartData = {} | |||
} | |||
}) | |||
} | |||
} | |||
} | |||
@@ -1,5 +1,5 @@ | |||
<template> | |||
<div class="app-container"> | |||
<div class="app-container wasteWaterHis"> | |||
<!-- 搜索工作栏 --> | |||
<search-bar | |||
:formConfigs="formConfig" | |||
@@ -13,6 +13,7 @@ | |||
:table-props="tableProps" | |||
:table-data="list" | |||
:max-height="tableH" | |||
:row-class-name="tableRowClassName" | |||
/> | |||
<pagination | |||
:page.sync="queryParams.pageNo" | |||
@@ -72,14 +73,15 @@ export default { | |||
type: 'select', | |||
label: '指标名称', | |||
selectOptions: [], | |||
param: 'checkId' | |||
param: 'checkId', | |||
filterable: true | |||
}, | |||
{ | |||
type: 'datePicker', | |||
label: '检测时间', | |||
dateType: 'datetimerange', | |||
format: 'yyyy-MM-dd HH:mm:ss', | |||
valueFormat: "yyyy-MM-dd HH:mm:ss", | |||
valueFormat: "timestamp", | |||
rangeSeparator: '-', | |||
startPlaceholder: '开始时间', | |||
endPlaceholder: '结束时间', | |||
@@ -94,10 +96,10 @@ export default { | |||
color: 'primary' | |||
}, | |||
{ | |||
type: this.$auth.hasPermi('base:order-manage:create') ? 'separate' : '', | |||
type: this.$auth.hasPermi('base:waste-water:export') ? 'separate' : '', | |||
}, | |||
{ | |||
type: this.$auth.hasPermi('base:order-manage:create') ? 'button' : '', | |||
type: this.$auth.hasPermi('base:waste-water:export') ? 'button' : '', | |||
btnName: '导出', | |||
name: 'export', | |||
color: 'primary', | |||
@@ -110,7 +112,8 @@ export default { | |||
pageSize: 20, | |||
checkId: null, | |||
checkType: 1, | |||
// checkTime: [], | |||
startTime: null, | |||
endTime: null | |||
}, | |||
tableProps, | |||
list: [], | |||
@@ -122,11 +125,11 @@ export default { | |||
window.addEventListener('resize', () => { | |||
this.tableH = this.tableHeight(260) | |||
}) | |||
let end = moment().format('YYYY-MM-DD 23:59:59') | |||
let start = moment().format('YYYY-MM-DD 00:00:00') | |||
let end = moment(moment().format('YYYY-MM-DD 23:59:59')).valueOf() | |||
let start = moment(moment().format('YYYY-MM-DD 00:00:00')).valueOf() | |||
this.formConfig[1].defaultSelect = [start, end] | |||
this.queryParams.checkTime[0] = start | |||
this.queryParams.checkTime[1] = end | |||
this.queryParams.startTime = start | |||
this.queryParams.endTime = end | |||
this.getSelectList() | |||
this.getList() | |||
}, | |||
@@ -134,12 +137,8 @@ export default { | |||
buttonClick(val) { | |||
this.queryParams.pageNo = 1; | |||
this.queryParams.checkId = val.checkId | |||
// this.queryParams.checkTime[0] = val.timeVal ? val.timeVal[0] : null | |||
// this.queryParams.checkTime[1] = val.timeVal ? val.timeVal[1] : null | |||
// this.queryParams.checkTime[0] = 1701014400000 | |||
// this.queryParams.checkTime[1] = 1701100800000 | |||
this.queryParams.startTime = 1701014400000 | |||
this.queryParams.endTime = 1701100800000 | |||
this.queryParams.startTime = val.timeVal ? val.timeVal[0] : null | |||
this.queryParams.endTime = val.timeVal ? val.timeVal[1] : null | |||
if (val.btnName === 'search') { | |||
this.getList() | |||
} else { | |||
@@ -165,7 +164,22 @@ export default { | |||
console.log(res) | |||
this.formConfig[0].selectOptions = res.data.list || [] | |||
}) | |||
}, | |||
tableRowClassName({row, rowIndex}) { | |||
console.log(row) | |||
if (row.markRed) { | |||
return 'warning-row' | |||
}else { | |||
return '' | |||
} | |||
} | |||
} | |||
} | |||
</script> | |||
</script> | |||
<style lang='scss'> | |||
.wasteWaterHis { | |||
.el-table .warning-row { | |||
background: #fee1e1; | |||
} | |||
} | |||
</style> |
@@ -22,18 +22,17 @@ | |||
<span>检测指标趋势图</span> | |||
</div> | |||
<!-- 搜索工作栏 --> | |||
<search-bar | |||
:formConfigs="formConfig" | |||
ref="searchBarForm" | |||
@headBtnClick="buttonClick" | |||
/> | |||
<line-chart /> | |||
<search-area @submit="getTrend"/> | |||
<line-chart :chartData="chartData" v-show='Object.keys(chartData).length !== 0' :timeDim="queryParams.timeDim"/> | |||
<!-- 没有数据 --> | |||
<div class="no-data-bg" v-show='Object.keys(chartData).length === 0'></div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import { environmentalCheckRealtime, environmentalCheckRealtimeTrend } from '@/api/safetyEnvironmental/environmental' | |||
import LineChart from './components/lineChart' | |||
import LineChart from './../../components/lineChart' | |||
import SearchArea from './../../components/searchArea' | |||
export default { | |||
name: 'WasteWaterManagement', | |||
data(){ | |||
@@ -44,39 +43,10 @@ export default { | |||
timeDim: null, | |||
timeRange: [] | |||
}, | |||
formConfig: [ | |||
{ | |||
type: 'select', | |||
label: '时间维度', | |||
selectOptions: this.getDictDatas(this.DICT_TYPE.TIME_DIM), | |||
labelField: 'label', | |||
valueField: 'value', | |||
param: 'timeDim', | |||
width: 100 | |||
}, | |||
{ | |||
type: 'datePicker', | |||
label: '时间范围', | |||
dateType: 'daterange', | |||
format: 'yyyy-MM-dd', | |||
valueFormat: "yyyy-MM-dd", | |||
rangeSeparator: '-', | |||
startPlaceholder: '开始时间', | |||
endPlaceholder: '结束时间', | |||
param: 'timeVal', | |||
defaultSelect: [], | |||
width: 250 | |||
}, | |||
{ | |||
type: 'button', | |||
btnName: '查询', | |||
name: 'search', | |||
color: 'primary' | |||
} | |||
], | |||
chartData: {} | |||
} | |||
}, | |||
components: { LineChart }, | |||
components: { LineChart, SearchArea }, | |||
mounted() { | |||
this.getMsg() | |||
}, | |||
@@ -87,9 +57,18 @@ export default { | |||
this.realtimeList = res.data || [] | |||
}) | |||
}, | |||
getTrend() { | |||
getTrend(params) { | |||
console.log(params) | |||
this.queryParams.timeDim = params.timeDim | |||
this.queryParams.timeRange[0] = params.startTime | |||
this.queryParams.timeRange[1] = params.endTime | |||
environmentalCheckRealtimeTrend({...this.queryParams}).then(res => { | |||
console.log(res) | |||
if (res.code === 0) { | |||
this.chartData = res.data | |||
} else { | |||
this.chartData = {} | |||
} | |||
}) | |||
} | |||
} | |||