yinq
/
HKZD-EMS-UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update 电对比分析对接接口

Browse Source
master
yinq 1 week ago
parent 6b60deb9c5
commit 36ab48e2aa
2 changed files with 207 additions and 106 deletions
Show Stats Download Patch File Download Diff File

9
src/api/ems/report/reportPort.js
Unescape Escape View File

@ -26,3 +26,12 @@ export function energyPreviewReportList(query) {
params: query
})
}
// 查询能源对比分析接口接口
export function comparativeAnalysisReport(query) {
return request({
url: '/ems/report/comparativeAnalysisReport',
method: 'get',
params: query
})
}

304
src/views/ems/report/comparativeAnalysisReport/index.vue
Unescape Escape View File

@ -4,6 +4,15 @@
<el-row :gutter="20">
<el-col :span="5" :xs="24">
<div class="head-container">
<!-- <el-tag-->
<!-- :key="item.monitorId"-->
<!-- v-for="item in dynamicTags"-->
<!-- closable-->
<!-- :disable-transitions="false"-->
<!-- @close="handleClose(item.id)"-->
<!-- >-->
<!-- {{ item.label }}-->
<!-- </el-tag>-->
<el-input
v-model="workUnitName"
placeholder="请输入统计单元名称"
@ -19,18 +28,22 @@
:props="workUnitProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
:check-strictly="true"
ref="tree"
node-key="id"
default-expand-all
highlight-current
show-checkbox
@node-click="handleNodeClick"
@check="handleTreeCheck"
/>
</div>
</el-col>
<el-col :span="19" :xs="24">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
label-width="100px">
label-width="100px"
>
<el-form-item label="日期类型" prop="dateType">
<el-select v-model="queryParams.dateType" placeholder="请选择日期类型">
<el-option
@ -50,6 +63,7 @@
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:clearable="false"
></el-date-picker>
</el-form-item>
@ -59,37 +73,13 @@
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出
</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<div style="margin-bottom: 24px;">
<div id="barChart" style="height: 350px; width: 100%;"></div>
</div>
<div>
<div id="lineChart" style="height: 350px; width: 100%;"></div>
</div>
<el-table v-loading="loading" :data="monitorWorkUnitList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="主键标识" align="center" prop="objId" v-if="columns[0].visible" />
<el-table-column label="统计单元编号" align="center" prop="workUnitCode" v-if="columns[1].visible" />
<el-table-column label="统计单元名称" align="center" prop="workUnitName" v-if="columns[2].visible" />
<el-table-column label="统计日期" align="center" prop="pointTime" v-if="columns[3].visible" />
<el-table-column label="分时类型" align="center" prop="priceType" v-if="columns[4].visible" />
<el-table-column label="耗量(kwh)" align="center" prop="expend" v-if="columns[5].visible" />
<el-table-column label="价格" align="center" prop="price" v-if="columns[6].visible" />
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-col>
</el-row>
</div>
@ -98,15 +88,17 @@
<script>
import { getWorkUnitTrees } from '@/api/ems/base/baseWorkUnit'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { peaksValleysConsumptionReportList } from '@//api/ems/report/reportPort.js'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { comparativeAnalysisReport } from '@//api/ems/report/reportPort.js'
import { parseTime } from '@//utils/ruoyi'
import * as echarts from 'echarts'
export default {
name: "ComparativeAnalysisReport",
name: 'ComparativeAnalysisReport',
components: {
Treeselect
// Chart 不再注册
}, data() {
return {
monitorInfoOptions: [],
@ -128,126 +120,161 @@ export default {
monitorWorkUnitList: [],
daterangeCollectTime: [],
// 弹出层标题
title: "",
title: '',
// 是否显示弹出层
open: false,
// 查询参数
dynamicTags: [],
queryParams: {
pageNum: 1,
pageSize: 10,
monitorCode: null,
workUnitCode: null,
monitorStatus: null,
monitorType: null,
dateType: 10,
workUnitCodeList: null,
dateType: 10
},
// 表单参数
form: {},
workUnitProps: {
children: "children",
label: "label"
children: 'children',
label: 'label'
},
dateTypeList: [
{dateTypeCode: 10, dateTypeName: '日'},
{dateTypeCode: 7, dateTypeName: '月'},
{dateTypeCode: 4, dateTypeName: '年'},
{ dateTypeCode: 10, dateTypeName: '日' },
{ dateTypeCode: 7, dateTypeName: '月' },
{ dateTypeCode: 4, dateTypeName: '年' }
],
columns: [
{key: 0, label: `主键标识`, visible: false},
{key: 1, label: `统计单元编号`, visible: true},
{key: 2, label: `统计单元名称`, visible: true},
{key: 3, label: `统计日期`, visible: true},
{key: 4, label: `分时类型`, visible: true},
{key: 5, label: `仪表值(kwh)`, visible: true},
{key: 6, label: `价格`, visible: true},
]
};
{ key: 0, label: `主键标识`, visible: false },
{ key: 1, label: `统计单元编号`, visible: true },
{ key: 2, label: `统计单元名称`, visible: true },
{ key: 3, label: `统计日期`, visible: true },
{ key: 4, label: `分时类型`, visible: true },
{ key: 5, label: `仪表值(kwh)`, visible: true },
{ key: 6, label: `价格`, visible: true }
],
barChartOption: {
title: {
text: '耗量柱状图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['耗量']
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [{
name: '耗量',
type: 'bar',
data: []
}]
},
lineChartOption: {
title: {
text: '耗量折线图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['耗量']
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [{
name: '耗量',
type: 'line',
data: []
}]
}
}
},
created() {
// 其余初始化逻辑
const nowDate = parseTime(new Date(), '{y}-{m}-{d}')
this.daterangeCollectTime[0] = nowDate
this.daterangeCollectTime[1] = nowDate
this.getList();
this.getWorkUnitTrees();
this.getWorkUnitTrees()
},
mounted() {
this.initCharts()
},
watch: {
// 根据名称筛选部门树
workUnitName(val) {
this.$refs.tree.filter(val);
this.$refs.tree.filter(val)
}
},
methods: {
/** 转换统计单元信息数据结构 */
workUnitOptionsNormalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
delete node.children
}
return {
id2: node.workUnitCode,
label2: node.workUnitName,
children2: node.children
};
}
},
/** 查询计量设备下拉树结构 */
getWorkUnitTrees() {
getWorkUnitTrees().then(response => {
this.workUnitOptions = [];
this.workUnitOptions = JSON.parse(JSON.stringify(response.data).replaceAll('id','id2').replaceAll('code','id'));
});
this.workUnitOptions = []
this.workUnitOptions = JSON.parse(JSON.stringify(response.data).replaceAll('id', 'id2').replaceAll('code', 'id'))
})
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
if (!value) return true
return data.label.indexOf(value) !== -1
},
// 节点单击事件
handleNodeClick(data) {
this.queryParams.workUnitCode = data.id;
this.handleQuery();
// this.queryParams.workUnitCode = data.id;
//
},
/** 查询统计计量信息列表 */
getList() {
this.loading = true;
this.queryParams.beginCollectTime = null;
this.queryParams.endCollectTime = null;
if (this.daterangeCollectTime != null && this.daterangeCollectTime !== '') {
this.queryParams.beginCollectTime = this.daterangeCollectTime[0];
this.queryParams.endCollectTime = this.daterangeCollectTime[1];
handleTreeCheck(data) {
const isExisting = this.dynamicTags.some(item => data.id === item.value)
if (isExisting) {
const index = this.dynamicTags.findIndex(item => data.id === item.value)
if (index !== -1) {
this.dynamicTags.splice(index, 1)
}
} else {
this.dynamicTags.push({ label: data.label, value: data.id })
}
peaksValleysConsumptionReportList(this.queryParams).then(response => {
this.monitorWorkUnitList = response.rows;
this.total = response.total;
this.loading = false;
});
this.handleQuery()
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
parentIds: null,
parentId: null,
objId: null,
monitorCode: null,
workUnitCode: null,
monitorStatus: 0,
monitorType: 1,
};
this.resetForm("form");
//删除左上头部的tag
handleClose(item) {
this.dynamicTags.splice(this.dynamicTags.indexOf(item), 1)
console.log('handleClose:', this.dynamicTags)
this.handleQuery()
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
this.queryParams.pageNum = 1
this.getList(true)
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.queryParams.workUnitCode = null;
this.handleQuery();
this.resetForm('queryForm')
this.queryParams.workUnitCode = null
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
@ -255,12 +282,77 @@ export default {
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 导出按钮操作 */
handleExport() {
this.download('ems/report/peaksValleysConsumptionReportList/export', {
...this.queryParams
}, `峰平谷耗量报表_${new Date().getTime()}.xlsx`)
// 渲染柱状图
renderBarChart(option) {
const barDom = document.getElementById('barChart')
if (barDom) {
const barChart = echarts.init(barDom)
barChart.setOption(option)
window.addEventListener('resize', () => barChart.resize())
}
},
// 渲染折线图
renderLineChart(option) {
const lineDom = document.getElementById('lineChart')
if (lineDom) {
const lineChart = echarts.init(lineDom)
lineChart.setOption(option)
window.addEventListener('resize', () => lineChart.resize())
}
},
getChartOption({ title, deviceNames, times, series }) {
return {
title: { text: title },
tooltip: { trigger: 'axis' },
legend: { data: deviceNames },
xAxis: { type: 'category', data: times },
yAxis: { type: 'value' },
series
}
},
/** 查询统计计量信息列表 */
getList(updateChart = false) {
this.loading = true
this.queryParams.beginCollectTime = null
this.queryParams.endCollectTime = null
if (this.daterangeCollectTime != null && this.daterangeCollectTime !== '') {
this.queryParams.beginCollectTime = this.daterangeCollectTime[0]
this.queryParams.endCollectTime = this.daterangeCollectTime[1]
}
const valueList = this.dynamicTags.map(item => item.value)
this.queryParams.workUnitCodeList = valueList.toString()
comparativeAnalysisReport(this.queryParams).then(response => {
// 表格数据
this.monitorWorkUnitList = response.rows || []
this.total = response.total || 0
this.loading = false
// 图表数据
if (updateChart && response.data) {
const { deviceNames, times, seriesBar, seriesLine } = response.data
const barOption = this.getChartOption({
title: '耗量对比分析',
deviceNames,
times,
series: seriesBar
})
const lineOption = this.getChartOption({
title: '能耗曲线',
deviceNames,
times,
series: seriesLine
})
this.renderBarChart(barOption)
this.renderLineChart(lineOption)
}
})
},
// 初始化图表
initCharts() {
this.getList(true)
}
}
};
}
</script>

Write Preview
Loading…
Cancel
Save