@@ -53,4 +53,28 @@ export function energyQuantityManualExport(data) { | |||
data: data, | |||
responseType: 'blob' | |||
}) | |||
} | |||
// 获得能源表名配置分页 | |||
export function energyTablePage(data) { | |||
return request({ | |||
url: '/base/energy-table/page', | |||
method: 'post', | |||
data: data | |||
}) | |||
} | |||
// 获得能源表名配置 | |||
export function energyTableGet(query) { | |||
return request({ | |||
url: '/base/energy-table/get', | |||
method: 'get', | |||
params: query | |||
}) | |||
} | |||
// 更新能源表名配置 | |||
export function energyTableUpdate(data) { | |||
return request({ | |||
url: '/base/energy-table/update', | |||
method: 'put', | |||
data: data | |||
}) | |||
} |
@@ -32,6 +32,7 @@ const actions = { | |||
} | |||
// 处理 dictValue 层级 | |||
dictDataMap[dictData.dictType].push({ | |||
id: dictData.id, | |||
value: dictData.value, | |||
label: dictData.label, | |||
colorType: dictData.colorType, | |||
@@ -14,7 +14,7 @@ export default { | |||
return { | |||
chartDom: '', | |||
chart: '', | |||
chartHeight: this.tableHeight(214) - 100, | |||
chartHeight: this.tableHeight(314), | |||
}; | |||
}, | |||
props: { | |||
@@ -37,7 +37,7 @@ export default { | |||
}, | |||
mounted() { | |||
window.addEventListener('resize', () => { | |||
this.chartHeight = this.tableHeight(214) - 70; | |||
this.chartHeight = this.tableHeight(314); | |||
}); | |||
}, | |||
methods: { | |||
@@ -1,102 +1,119 @@ | |||
<template> | |||
<div id="analysischartLine" style="width: 100%;height: 100%;"></div> | |||
<div | |||
id="analysischartLine" | |||
style="width: 100%" | |||
:style="{ height: chartHeight + 'px' }"></div> | |||
</template> | |||
<script> | |||
import * as echarts from 'echarts' | |||
import resize from '@/utils/chartMixins/resize' | |||
import * as echarts from 'echarts'; | |||
import resize from '@/utils/chartMixins/resize'; | |||
export default { | |||
name: "LineChart", | |||
mixins: [resize], | |||
data() { | |||
return { | |||
chartDom: '', | |||
chart: '', | |||
chartHeight: this.tableHeight(214) - 70 | |||
} | |||
}, | |||
props: { | |||
chartData: { | |||
type: Array, | |||
required: true, | |||
default: () => { | |||
return [] | |||
} | |||
} | |||
}, | |||
watch: { | |||
chartData: function () { | |||
this.getChart() | |||
} | |||
}, | |||
mounted() { | |||
window.addEventListener('resize', () => { | |||
this.chartHeight = this.tableHeight(214) - 70 | |||
}) | |||
}, | |||
methods: { | |||
getChart() { | |||
if ( | |||
this.chart !== null && | |||
this.chart !== '' && | |||
this.chart !== undefined | |||
) { | |||
this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例 | |||
} | |||
this.chartDom = document.getElementById('analysischartLine') | |||
this.chart = echarts.init(this.chartDom) | |||
if (this.chartData.length === 0) { | |||
return false | |||
} | |||
let xData = [] | |||
let arr = this.chartData[0].type | |||
let keys = Object.keys(this.chartData[0]) | |||
let yData = [] | |||
for (let j = 0; j < arr.length; j++) { | |||
for (let k = 0; k < keys.length; k++) { | |||
if (keys[k].indexOf(arr[j] + '_上年同期') > -1 || keys[k].indexOf(arr[j] + '_能源消耗') > -1) { | |||
let obj = { | |||
name: '', | |||
type: 'line', | |||
data: [] | |||
} | |||
obj.name = keys[k] | |||
yData.push(obj) | |||
} | |||
} | |||
} | |||
for (let i = 0; i < this.chartData.length; i++) { | |||
xData.push(this.chartData[i].time) | |||
for (let p = 0; p < yData.length; p++) { | |||
yData[p].data.push(this.chartData[i][yData[p].name]) | |||
} | |||
} | |||
var option = { | |||
color: ['#FFDC94', '#8EF0AB', '#63BDFF', '#288AFF', '#7164FF', '#FF6860', '#FF9747', '#B0EB42', '#D680FF', '#0043D2'], | |||
legend: { | |||
data: keys, | |||
right: '1%' | |||
}, | |||
tooltip: { | |||
trigger: 'axis' | |||
}, | |||
grid: { | |||
left: '1%', | |||
right: '1%', | |||
bottom: '3%', | |||
containLabel: true | |||
}, | |||
xAxis: { | |||
type: 'category', | |||
data: xData | |||
}, | |||
yAxis: { | |||
type: 'value' | |||
}, | |||
series: yData | |||
}; | |||
name: 'LineChart', | |||
mixins: [resize], | |||
data() { | |||
return { | |||
chartDom: '', | |||
chart: '', | |||
chartHeight: this.tableHeight(250) / 2, | |||
}; | |||
}, | |||
props: { | |||
chartData: { | |||
type: Array, | |||
required: true, | |||
default: () => { | |||
return []; | |||
}, | |||
}, | |||
}, | |||
watch: { | |||
chartData: function () { | |||
this.getChart(); | |||
}, | |||
}, | |||
mounted() { | |||
window.addEventListener('resize', () => { | |||
this.chartHeight = this.tableHeight(250) / 2; | |||
}); | |||
}, | |||
methods: { | |||
getChart() { | |||
if ( | |||
this.chart !== null && | |||
this.chart !== '' && | |||
this.chart !== undefined | |||
) { | |||
this.chart.dispose(); // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例 | |||
} | |||
this.chartDom = document.getElementById('analysischartLine'); | |||
this.chart = echarts.init(this.chartDom); | |||
if (this.chartData.length === 0) { | |||
return false; | |||
} | |||
let xData = []; | |||
let arr = this.chartData[0].type; | |||
let keys = Object.keys(this.chartData[0]); | |||
let yData = []; | |||
for (let j = 0; j < arr.length; j++) { | |||
for (let k = 0; k < keys.length; k++) { | |||
if ( | |||
keys[k].indexOf(arr[j] + '_上年同期') > -1 || | |||
keys[k].indexOf(arr[j] + '_能源消耗') > -1 | |||
) { | |||
let obj = { | |||
name: '', | |||
type: 'line', | |||
data: [], | |||
}; | |||
obj.name = keys[k]; | |||
yData.push(obj); | |||
} | |||
} | |||
} | |||
for (let i = 0; i < this.chartData.length; i++) { | |||
xData.push(this.chartData[i].time); | |||
for (let p = 0; p < yData.length; p++) { | |||
yData[p].data.push(this.chartData[i][yData[p].name]); | |||
} | |||
} | |||
var option = { | |||
color: [ | |||
'#FFDC94', | |||
'#8EF0AB', | |||
'#63BDFF', | |||
'#288AFF', | |||
'#7164FF', | |||
'#FF6860', | |||
'#FF9747', | |||
'#B0EB42', | |||
'#D680FF', | |||
'#0043D2', | |||
], | |||
legend: { | |||
data: keys, | |||
right: '1%', | |||
}, | |||
tooltip: { | |||
trigger: 'axis', | |||
}, | |||
grid: { | |||
left: '1%', | |||
right: '1%', | |||
bottom: '3%', | |||
containLabel: true, | |||
}, | |||
xAxis: { | |||
type: 'category', | |||
data: xData, | |||
}, | |||
yAxis: { | |||
type: 'value', | |||
}, | |||
series: yData, | |||
}; | |||
option && this.chart.setOption(option); | |||
} | |||
} | |||
} | |||
option && this.chart.setOption(option); | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -1,143 +1,153 @@ | |||
<template> | |||
<div class="app-container"> | |||
<!-- 搜索工作栏 --> | |||
<search-area @submit="getList" @exportD="exportData"/> | |||
<div v-show='chartData.length'> | |||
<div class="chartTitle">同比分析图</div> | |||
<div style='width: 100%;height: 400px;'> | |||
<line-chart ref="analysisLineChart" :chartData="chartData"/> | |||
</div> | |||
<!-- 表格 --> | |||
<base-table | |||
:table-props="tableProps" | |||
:table-data="list" | |||
:max-height="tableH" | |||
class="yoy-out-table" | |||
/> | |||
</div> | |||
<!-- 没有数据 --> | |||
<div class="no-data-bg" v-show='!chartData.length'></div> | |||
</div> | |||
<div class="app-container"> | |||
<!-- 搜索工作栏 --> | |||
<search-area | |||
@submit="getList" | |||
@exportD="exportData" /> | |||
<div v-show="chartData.length"> | |||
<div class="chartTitle">同比分析图</div> | |||
<div style="width: 100%"> | |||
<line-chart | |||
ref="analysisLineChart" | |||
:chartData="chartData" /> | |||
</div> | |||
<!-- 表格 --> | |||
<base-table | |||
:table-props="tableProps" | |||
:table-data="list" | |||
:max-height="tableH" | |||
class="yoy-out-table" /> | |||
</div> | |||
<!-- 没有数据 --> | |||
<div | |||
class="no-data-bg" | |||
v-show="!chartData.length"></div> | |||
</div> | |||
</template> | |||
<script> | |||
import { getYoy } from "@/api/analysis/energyAnalysis" | |||
import subRate from "./components/subRate.vue" | |||
import SearchArea from "./components/searchArea" | |||
import LineChart from "./components/lineChart" | |||
import FileSaver from "file-saver" | |||
import * as XLSX from 'xlsx/xlsx.mjs' | |||
import { getYoy } from '@/api/analysis/energyAnalysis'; | |||
import subRate from './components/subRate.vue'; | |||
import SearchArea from './components/searchArea'; | |||
import LineChart from './components/lineChart'; | |||
import FileSaver from 'file-saver'; | |||
import * as XLSX from 'xlsx/xlsx.mjs'; | |||
export default { | |||
name: 'YoyAnalysis', | |||
components: { SearchArea, LineChart }, | |||
data() { | |||
return { | |||
chartData: [], | |||
tableProps: [], | |||
list: [], | |||
tableH: this.tableHeight(640) | |||
} | |||
}, | |||
mounted() { | |||
window.addEventListener('resize', () => { | |||
this.tableH = this.tableHeight(640) | |||
}) | |||
}, | |||
methods: { | |||
getList(params) { | |||
getYoy({ ...params }).then((res) => { | |||
if (res.code === 0 && res.data) { | |||
this.getTableList(res.data) | |||
} else { | |||
this.chartData = [] | |||
this.list = [] | |||
} | |||
}) | |||
}, | |||
getTableList(arr) { | |||
let data = arr.data | |||
let nameData = arr.nameData | |||
let tempX = [] | |||
data[0].data.map((item) => { | |||
let obj = {} | |||
obj.prop = item.dynamicName | |||
obj.label = item.dynamicName | |||
obj.id = item.id | |||
obj.children = [] | |||
tempX.push(obj) | |||
}) | |||
for (let i = 0; i < nameData.length; i++) { | |||
for (let j = 0; j < tempX.length; j++) { | |||
if (tempX[j].id === nameData[i].parentId) { | |||
let obj = {} | |||
obj.prop = tempX[j].prop + '_' + nameData[i].name | |||
obj.label = nameData[i].name | |||
if (obj.label.indexOf('同比')!= -1) { | |||
obj.subcomponent = subRate | |||
} | |||
tempX[j].children.push(obj) | |||
} | |||
} | |||
} | |||
this.tableProps = [{prop: 'time',label: '时间'}].concat(tempX) | |||
console.log(this.tableProps) | |||
// 数据 | |||
this.list = [] | |||
for (let k = 0; k < data.length; k++) { | |||
let obj = {} | |||
obj.time = data[k].time | |||
let arr1 = data[k].data | |||
obj.type = [] | |||
for (let q = 0; q < arr1.length; q++) { | |||
let name = arr1[q].dynamicName | |||
obj.type.push(name) | |||
let arr2 = arr1[q].children | |||
for (let p = 0; p < arr2.length; p++) { | |||
let prop = name + '_' + arr2[p].dynamicName | |||
obj[prop] = arr2[p].dynamicValue | |||
} | |||
} | |||
this.list.push(obj) | |||
} | |||
this.chartData = this.list | |||
}, | |||
exportData(val) { | |||
if (this.list.length > 0) { | |||
var wb = XLSX.utils.table_to_book(document.querySelector(".yoy-out-table")) | |||
let fileName = val.name + "同比分析.xlsx" | |||
var wbout = XLSX.write(wb, { | |||
bookType: "xlsx", | |||
bookSST: true, | |||
type: "array" | |||
}) | |||
try { | |||
FileSaver.saveAs( | |||
new Blob([wbout], { type: "application/octet-stream" }), | |||
fileName | |||
) | |||
} catch (e) { | |||
if (typeof console !== "undefined") console.log(e, wbout); | |||
} | |||
return wbout | |||
} else { | |||
this.$modal.msgWarning("暂无数据导出") | |||
} | |||
} | |||
} | |||
} | |||
name: 'YoyAnalysis', | |||
components: { SearchArea, LineChart }, | |||
data() { | |||
return { | |||
chartData: [], | |||
tableProps: [], | |||
list: [], | |||
tableH: this.tableHeight(250) / 2, | |||
}; | |||
}, | |||
mounted() { | |||
window.addEventListener('resize', () => { | |||
this.tableH = this.tableHeight(250) / 2; | |||
}); | |||
}, | |||
methods: { | |||
getList(params) { | |||
getYoy({ ...params }).then((res) => { | |||
if (res.code === 0 && res.data) { | |||
this.getTableList(res.data); | |||
} else { | |||
this.chartData = []; | |||
this.list = []; | |||
} | |||
}); | |||
}, | |||
getTableList(arr) { | |||
let data = arr.data; | |||
let nameData = arr.nameData; | |||
let tempX = []; | |||
data[0].data.map((item) => { | |||
let obj = {}; | |||
obj.prop = item.dynamicName; | |||
obj.label = item.dynamicName; | |||
obj.id = item.id; | |||
obj.children = []; | |||
tempX.push(obj); | |||
}); | |||
for (let i = 0; i < nameData.length; i++) { | |||
for (let j = 0; j < tempX.length; j++) { | |||
if (tempX[j].id === nameData[i].parentId) { | |||
let obj = {}; | |||
obj.prop = tempX[j].prop + '_' + nameData[i].name; | |||
obj.label = nameData[i].name; | |||
if (obj.label.indexOf('同比') != -1) { | |||
obj.subcomponent = subRate; | |||
} | |||
tempX[j].children.push(obj); | |||
} | |||
} | |||
} | |||
this.tableProps = [{ prop: 'time', label: '时间' }].concat(tempX); | |||
console.log(this.tableProps); | |||
// 数据 | |||
this.list = []; | |||
for (let k = 0; k < data.length; k++) { | |||
let obj = {}; | |||
obj.time = data[k].time; | |||
let arr1 = data[k].data; | |||
obj.type = []; | |||
for (let q = 0; q < arr1.length; q++) { | |||
let name = arr1[q].dynamicName; | |||
obj.type.push(name); | |||
let arr2 = arr1[q].children; | |||
for (let p = 0; p < arr2.length; p++) { | |||
let prop = name + '_' + arr2[p].dynamicName; | |||
obj[prop] = arr2[p].dynamicValue; | |||
} | |||
} | |||
this.list.push(obj); | |||
} | |||
this.chartData = this.list; | |||
}, | |||
exportData(val) { | |||
if (this.list.length > 0) { | |||
var wb = XLSX.utils.table_to_book( | |||
document.querySelector('.yoy-out-table') | |||
); | |||
let fileName = val.name + '同比分析.xlsx'; | |||
var wbout = XLSX.write(wb, { | |||
bookType: 'xlsx', | |||
bookSST: true, | |||
type: 'array', | |||
}); | |||
try { | |||
FileSaver.saveAs( | |||
new Blob([wbout], { type: 'application/octet-stream' }), | |||
fileName | |||
); | |||
} catch (e) { | |||
if (typeof console !== 'undefined') console.log(e, wbout); | |||
} | |||
return wbout; | |||
} else { | |||
this.$modal.msgWarning('暂无数据导出'); | |||
} | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style lang='scss' scoped> | |||
.yoy-out-table { | |||
margin-top: 20px; | |||
} | |||
.chartTitle { | |||
font-size: 16px; | |||
color: #000; | |||
font-size: 16px; | |||
color: #000; | |||
} | |||
.chartTitle::before { | |||
content: ''; | |||
display: inline-block; | |||
width: 4px; | |||
height: 18px; | |||
background-color: #0B58FF; | |||
border-radius: 1px; | |||
margin-right: 8px; | |||
vertical-align: bottom; | |||
content: ''; | |||
display: inline-block; | |||
width: 4px; | |||
height: 18px; | |||
background-color: #0b58ff; | |||
border-radius: 1px; | |||
margin-right: 8px; | |||
vertical-align: bottom; | |||
} | |||
</style> |
@@ -1,132 +1,163 @@ | |||
<template> | |||
<el-form ref="form" :rules="rules" label-width="100px" :model="form"> | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item label="能源类型" prop="typeId"> | |||
<el-select v-model="form.typeId" placeholder="请选择" style="width: 100%;" filterable> | |||
<el-option | |||
v-for="item in energyListType" | |||
:key="item.id" | |||
:label="item.name" | |||
:value="item.id"> | |||
</el-option> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="参数列名" prop="plcParamName"> | |||
<el-input v-model="form.plcParamName"></el-input> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item label="参数名称" prop="name"> | |||
<el-input v-model="form.name"></el-input> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="单位" prop="unit"> | |||
<el-select v-model="form.unit" placeholder="请选择" style="width: 100%;"> | |||
<el-option | |||
v-for="item in getDictDatas(DICT_TYPE.ENERGY_UNIT)" | |||
:key="item.value" | |||
:label="item.label" | |||
:value="item.value"> | |||
</el-option> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item label="是否采集" prop="collection"> | |||
<el-switch v-model="form.collection"></el-switch> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="描述" prop="description"> | |||
<el-input v-model="form.description"></el-input> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
</el-form> | |||
<el-form | |||
ref="form" | |||
:rules="rules" | |||
label-width="100px" | |||
:model="form"> | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item | |||
label="能源类型" | |||
prop="typeId"> | |||
<el-select | |||
v-model="form.typeId" | |||
placeholder="请选择" | |||
style="width: 100%" | |||
filterable> | |||
<el-option | |||
v-for="item in energyListType" | |||
:key="item.id" | |||
:label="item.labelName" | |||
:value="item.id"></el-option> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item | |||
label="参数列名" | |||
prop="plcParamName"> | |||
<el-input v-model="form.plcParamName"></el-input> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item | |||
label="参数名称" | |||
prop="name"> | |||
<el-input v-model="form.name"></el-input> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item | |||
label="单位" | |||
prop="unit"> | |||
<el-select | |||
v-model="form.unit" | |||
placeholder="请选择" | |||
style="width: 100%"> | |||
<el-option | |||
v-for="item in getDictDatas(DICT_TYPE.UNIT_DICT)" | |||
:key="item.value" | |||
:label="item.label" | |||
:value="item.value"></el-option> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item | |||
label="是否采集" | |||
prop="collection"> | |||
<el-switch v-model="form.collection"></el-switch> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item | |||
label="描述" | |||
prop="description"> | |||
<el-input v-model="form.description"></el-input> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
</el-form> | |||
</template> | |||
<script> | |||
import { getEnergyPlcParam, updateEnergyPlcParam, createEnergyPlcParam } from '@/api/base/energyPlcParam' | |||
import { getEnergyTypeListAll } from '@/api/base/energyType' | |||
import { | |||
getEnergyPlcParam, | |||
updateEnergyPlcParam, | |||
createEnergyPlcParam, | |||
} from '@/api/base/energyPlcParam'; | |||
import { getEnergyTypeListAll } from '@/api/base/energyType'; | |||
export default { | |||
name: 'EnergyPlcParamAdd', | |||
data() { | |||
return { | |||
form: { | |||
id: '', | |||
typeId: '', | |||
plcParamName: '', | |||
name: '', | |||
unit: '', | |||
description: '', | |||
collection: true, | |||
connectId: '' | |||
}, | |||
energyListType: [], | |||
isEdit: false, //是否是编辑 | |||
rules: { | |||
typeId: [{ required: true, message: '能源类型不能为空', trigger: 'change' }], | |||
plcParamName: [{ required: true, message: '参数列名不能为空', trigger: 'blur' }], | |||
name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }] | |||
} | |||
} | |||
}, | |||
methods: { | |||
init(param) { | |||
this.form.connectId = param.connectId | |||
getEnergyTypeListAll().then((res) => { | |||
this.energyListType = res.data || [] | |||
}) | |||
if (param.id) { | |||
this.isEdit = true | |||
this.form.id = param.id | |||
getEnergyPlcParam(this.form.id).then((res) => { | |||
if (res.code === 0) { | |||
this.form = res.data | |||
this.form.collection = this.form.collection === 0 ? false : true | |||
} | |||
}) | |||
} else { | |||
this.isEdit = false | |||
this.form.id = '' | |||
} | |||
}, | |||
submitForm() { | |||
this.$refs['form'].validate((valid) => { | |||
if (valid) { | |||
this.form.collection = this.form.collection === false ? 0 : 1 | |||
if (this.isEdit) { | |||
// 编辑 | |||
updateEnergyPlcParam({...this.form}).then((res) => { | |||
if (res.code === 0) { | |||
this.$modal.msgSuccess("操作成功"); | |||
this.$emit('successSubmit') | |||
} | |||
}) | |||
} else { | |||
createEnergyPlcParam({...this.form}).then((res) => { | |||
if (res.code === 0) { | |||
this.$modal.msgSuccess("操作成功"); | |||
this.$emit('successSubmit') | |||
} | |||
}) | |||
} | |||
} else { | |||
return false | |||
} | |||
}) | |||
}, | |||
formClear() { | |||
this.$refs.form.resetFields() | |||
this.isEdit = false | |||
} | |||
} | |||
} | |||
name: 'EnergyPlcParamAdd', | |||
data() { | |||
return { | |||
form: { | |||
id: '', | |||
typeId: '', | |||
plcParamName: '', | |||
name: '', | |||
unit: '', | |||
description: '', | |||
collection: true, | |||
connectId: '', | |||
}, | |||
energyListType: [], | |||
isEdit: false, //是否是编辑 | |||
rules: { | |||
typeId: [ | |||
{ required: true, message: '能源类型不能为空', trigger: 'change' }, | |||
], | |||
plcParamName: [ | |||
{ required: true, message: '参数列名不能为空', trigger: 'blur' }, | |||
], | |||
name: [ | |||
{ required: true, message: '参数名称不能为空', trigger: 'blur' }, | |||
], | |||
}, | |||
}; | |||
}, | |||
methods: { | |||
init(param) { | |||
this.form.connectId = param.connectId; | |||
getEnergyTypeListAll().then((res) => { | |||
this.energyListType = res.data || []; | |||
}); | |||
if (param.id) { | |||
this.isEdit = true; | |||
this.form.id = param.id; | |||
getEnergyPlcParam(this.form.id).then((res) => { | |||
if (res.code === 0) { | |||
this.form = res.data; | |||
this.form.collection = this.form.collection === 0 ? false : true; | |||
} | |||
}); | |||
} else { | |||
this.isEdit = false; | |||
this.form.id = ''; | |||
} | |||
}, | |||
submitForm() { | |||
this.$refs['form'].validate((valid) => { | |||
if (valid) { | |||
this.form.collection = this.form.collection === false ? 0 : 1; | |||
if (this.isEdit) { | |||
// 编辑 | |||
updateEnergyPlcParam({ ...this.form }).then((res) => { | |||
if (res.code === 0) { | |||
this.$modal.msgSuccess('操作成功'); | |||
this.$emit('successSubmit'); | |||
} | |||
}); | |||
} else { | |||
createEnergyPlcParam({ ...this.form }).then((res) => { | |||
if (res.code === 0) { | |||
this.$modal.msgSuccess('操作成功'); | |||
this.$emit('successSubmit'); | |||
} | |||
}); | |||
} | |||
} else { | |||
return false; | |||
} | |||
}); | |||
}, | |||
formClear() { | |||
this.$refs.form.resetFields(); | |||
this.isEdit = false; | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -1,271 +1,323 @@ | |||
<template> | |||
<div class="app-container"> | |||
<!-- 搜索工作栏 --> | |||
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> | |||
<!-- 列表 --> | |||
<base-table :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-props="tableProps" :table-data="list" | |||
:max-height="tableH" @selection-change="selectChange"> | |||
<method-btn v-if="tableBtn.length" slot="handleBtn" :width="120" label="操作" :method-list="tableBtn" | |||
@clickBtn="handleClick" /> | |||
</base-table> | |||
<pagination :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" :total="total" | |||
@pagination="getList" /> | |||
<!-- 新增 --> | |||
<base-dialog :dialogTitle="addOrEditTitle" :dialogVisible="centervisible" @cancel="handleCancel" | |||
@confirm="handleConfirm" :before-close="handleCancel"> | |||
<energy-quantity-manual-add ref="energyQuantityManualAdd" :energyTypeList="energyTypeList" | |||
@successSubmit="successSubmit" /> | |||
</base-dialog> | |||
</div> | |||
<div class="app-container"> | |||
<!-- 搜索工作栏 --> | |||
<search-bar | |||
:formConfigs="formConfig" | |||
ref="searchBarForm" | |||
@headBtnClick="buttonClick" /> | |||
<!-- 列表 --> | |||
<base-table | |||
:page="queryParams.pageNo" | |||
:limit="queryParams.pageSize" | |||
:table-props="tableProps" | |||
:table-data="list" | |||
:max-height="tableH" | |||
@selection-change="selectChange"> | |||
<method-btn | |||
v-if="tableBtn.length" | |||
slot="handleBtn" | |||
:width="120" | |||
label="操作" | |||
:method-list="tableBtn" | |||
@clickBtn="handleClick" /> | |||
</base-table> | |||
<pagination | |||
:page.sync="queryParams.pageNo" | |||
:limit.sync="queryParams.pageSize" | |||
:total="total" | |||
@pagination="getList" /> | |||
<!-- 新增 --> | |||
<base-dialog | |||
:dialogTitle="addOrEditTitle" | |||
:dialogVisible="centervisible" | |||
@cancel="handleCancel" | |||
@confirm="handleConfirm" | |||
:before-close="handleCancel"> | |||
<energy-quantity-manual-add | |||
ref="energyQuantityManualAdd" | |||
:energyTypeList="energyTypeList" | |||
@successSubmit="successSubmit" /> | |||
</base-dialog> | |||
</div> | |||
</template> | |||
<script> | |||
import { energyQuantityManualPage, energyQuantityManualDelete, energyQuantityManualExport } from "@/api/base/energyQuantityManual" | |||
import { getEnergyTypeListAll } from "@/api/base/energyType" | |||
import { publicFormatter } from '@/utils/dict' | |||
import { parseTime, parseTimeTable } from '@/utils/ruoyi' | |||
import { | |||
energyQuantityManualPage, | |||
energyQuantityManualDelete, | |||
energyQuantityManualExport, | |||
} from '@/api/base/energyQuantityManual'; | |||
import { getEnergyTypeListAll } from '@/api/base/energyType'; | |||
import { publicFormatter } from '@/utils/dict'; | |||
import { parseTime, parseTimeTable } from '@/utils/ruoyi'; | |||
// import FileSaver from "file-saver" | |||
// import * as XLSX from 'xlsx/xlsx.mjs' | |||
import EnergyQuantityManualAdd from './components/energyQuantityManualAdd' | |||
import moment from 'moment' | |||
import EnergyQuantityManualAdd from './components/energyQuantityManualAdd'; | |||
import moment from 'moment'; | |||
const tableProps = [ | |||
{ | |||
prop: 'energyType', | |||
label: '能源类型', | |||
minWidth: 110, | |||
showOverflowtooltip: true | |||
}, | |||
{ | |||
prop: 'unit', | |||
label: '单位', | |||
filter: publicFormatter('energy_unit'), | |||
minWidth: 110 | |||
}, | |||
{ | |||
prop: 'tableName', | |||
label: '能源表名', | |||
filter: publicFormatter('table_name'), | |||
minWidth: 110, | |||
showOverflowtooltip: true | |||
}, | |||
{ | |||
prop: 'recordTime', | |||
label: '抄表日期', | |||
filter: parseTimeTable('{y}-{m}-{d}'), | |||
minWidth: 110 | |||
}, | |||
{ | |||
prop: 'readingQuantity', | |||
label: '抄表值' | |||
}, | |||
{ | |||
prop: 'useQty', | |||
label: '差值' | |||
} | |||
] | |||
{ | |||
prop: 'energyType', | |||
label: '能源类型', | |||
minWidth: 110, | |||
filter: publicFormatter('energy_type'), | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'unit', | |||
label: '单位', | |||
filter: publicFormatter('energy_unit'), | |||
minWidth: 110, | |||
}, | |||
{ | |||
prop: 'tableName', | |||
label: '能源表名', | |||
filter: publicFormatter('table_name'), | |||
minWidth: 110, | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'recordTime', | |||
label: '抄表日期', | |||
filter: parseTimeTable('{y}-{m}-{d}'), | |||
minWidth: 110, | |||
}, | |||
{ | |||
prop: 'readingQuantity', | |||
label: '抄表值', | |||
}, | |||
{ | |||
prop: 'useQty', | |||
label: '差值', | |||
}, | |||
]; | |||
export default { | |||
name: "EnergyQuantityManual", | |||
data() { | |||
return { | |||
formConfig: [ | |||
{ | |||
type: 'select', | |||
label: '能源类型', | |||
selectOptions: [], | |||
param: 'energyTypeId', | |||
filterable: true | |||
}, | |||
{ | |||
type: 'datePicker', | |||
label: '抄表日期', | |||
dateType: 'daterange', | |||
format: 'yyyy-MM-dd', | |||
valueFormat: "timestamp", | |||
rangeSeparator: '-', | |||
startPlaceholder: '开始时间', | |||
endPlaceholder: '结束时间', | |||
param: 'timeVal', | |||
defaultSelect: [] | |||
}, | |||
{ | |||
type: 'button', | |||
btnName: '查询', | |||
name: 'search', | |||
color: 'primary' | |||
}, | |||
{ | |||
type: 'separate' | |||
}, | |||
{ | |||
type: this.$auth.hasPermi('base:energy-quantity-manual:export') ? 'button' : '', | |||
btnName: '导出', | |||
name: 'export', | |||
color: 'primary', | |||
plain: true | |||
}, | |||
{ | |||
type: this.$auth.hasPermi('base:energy-quantity-manual:create') ? 'button' : '', | |||
btnName: '新增', | |||
name: 'add', | |||
color: 'success', | |||
plain: true | |||
} | |||
], | |||
tableProps, | |||
tableH: this.tableHeight(260), | |||
// 总条数 | |||
total: 0, | |||
// 班次基础信息列表 | |||
list: [], | |||
tableBtn: [ | |||
this.$auth.hasPermi('base:energy-quantity-manual:create') | |||
? { | |||
type: 'meterReading', | |||
btnName: '抄表' | |||
} | |||
: undefined, | |||
this.$auth.hasPermi('base:energy-quantity-manual:update') | |||
? { | |||
type: 'edit', | |||
btnName: '编辑' | |||
} | |||
: undefined, | |||
this.$auth.hasPermi('base:energy-quantity-manual:delete') | |||
? { | |||
type: 'delete', | |||
btnName: '删除' | |||
} | |||
: undefined | |||
].filter((v) => v), | |||
// 查询参数 | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 20, | |||
energyTypeId: '', | |||
recordTime: [] | |||
}, | |||
energyTypeList: [], | |||
exportList: [], | |||
addOrEditTitle: '', | |||
centervisible: false, | |||
}; | |||
}, | |||
components: { EnergyQuantityManualAdd }, | |||
created() { | |||
window.addEventListener('resize', () => { | |||
this.tableH = this.tableHeight(260) | |||
}) | |||
let end = moment(moment().format('YYYY-MM-DD 23:59:59')).valueOf() | |||
let start = moment(moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')).valueOf() | |||
this.formConfig[1].defaultSelect = [start, end] | |||
this.queryParams.recordTime[0] = start | |||
this.queryParams.recordTime[1] = end | |||
this.getList(); | |||
this.getTypeList() | |||
}, | |||
methods: { | |||
buttonClick(val) { | |||
this.queryParams.pageNo = 1; | |||
this.queryParams.energyTypeId = val.energyTypeId | |||
this.queryParams.recordTime[0] = val.timeVal ? moment(moment(val.timeVal[0]).format('YYYY-MM-DD 00:00:00')).valueOf() : null | |||
this.queryParams.recordTime[1] = val.timeVal ? moment(moment(val.timeVal[1]).format('YYYY-MM-DD 23:59:59')).valueOf() : null | |||
switch (val.btnName) { | |||
case 'search': | |||
this.getList() | |||
break | |||
case 'add': | |||
this.addOrEditTitle = '新增' | |||
this.centervisible = true | |||
let params = {} | |||
params.type = 'add' | |||
this.$nextTick(() => { | |||
this.$refs.energyQuantityManualAdd.init(params) | |||
}) | |||
break | |||
default: | |||
this.$modal.confirm('是否确认导出').then(() => { | |||
return energyQuantityManualExport({ energyTypeId: this.queryParams.energyTypeId, recordTime: this.queryParams.recordTime }); | |||
}).then(response => { | |||
this.$download.excel(response, '能源报表.xls'); | |||
}).catch(() => { }) | |||
} | |||
}, | |||
/** 查询列表 */ | |||
getList() { | |||
energyQuantityManualPage(this.queryParams).then(response => { | |||
let arr = response.data.list || [] | |||
arr && arr.map(item => { | |||
item.amount = item.amount ? (!isNaN(parseFloat(item.amount)) && isFinite(item.amount) ? item.amount.toFixed(2) : '') : '' | |||
}) | |||
this.list = arr | |||
this.total = response.data.total; | |||
this.exportList = [] | |||
}); | |||
}, | |||
getTypeList() { | |||
getEnergyTypeListAll().then((res) => { | |||
this.formConfig[0].selectOptions = res.data || [] | |||
this.energyTypeList = res.data || [] | |||
}) | |||
}, | |||
selectChange(val) { | |||
console.log(val) | |||
this.exportList = val | |||
}, | |||
handleClick(val) { | |||
console.log(val) | |||
switch (val.type) { | |||
case 'edit': | |||
this.addOrEditTitle = '编辑' | |||
this.centervisible = true | |||
let paramA = {} | |||
paramA.type = 'edit' | |||
paramA.id = val.data.id | |||
this.$nextTick(() => { | |||
this.$refs.energyQuantityManualAdd.init(paramA) | |||
}) | |||
break | |||
case 'meterReading': | |||
this.addOrEditTitle = '新增' | |||
this.centervisible = true | |||
let paramB = {} | |||
paramB.type = 'meterReading' | |||
paramB.energyTypeId = val.data.energyTypeId | |||
paramB.tableName = val.data.tableName | |||
this.$nextTick(() => { | |||
this.$refs.energyQuantityManualAdd.init(paramB) | |||
}) | |||
break | |||
default: | |||
this.handleDelete(val.data) | |||
} | |||
}, | |||
// 新增 | |||
handleCancel() { | |||
this.$refs.energyQuantityManualAdd.formClear() | |||
this.centervisible = false | |||
this.addOrEditTitle = '' | |||
}, | |||
handleConfirm() { | |||
this.$refs.energyQuantityManualAdd.submitForm() | |||
}, | |||
successSubmit() { | |||
this.handleCancel() | |||
this.getList() | |||
}, | |||
/** 删除按钮操作 */ | |||
handleDelete(row) { | |||
console.log(row.id) | |||
this.$modal.confirm('是否确认删除能源类型为"' + row.energyType + '"的数据项?').then(function () { | |||
return energyQuantityManualDelete({ id: row.id }); | |||
}).then(() => { | |||
this.queryParams.pageNo = 1; | |||
this.getList(); | |||
this.$modal.msgSuccess("删除成功"); | |||
}).catch(() => { }); | |||
} | |||
} | |||
name: 'EnergyQuantityManual', | |||
data() { | |||
return { | |||
formConfig: [ | |||
{ | |||
type: 'select', | |||
label: '能源类型', | |||
labelField: 'labelName', | |||
selectOptions: [], | |||
param: 'energyTypeId', | |||
filterable: true, | |||
}, | |||
{ | |||
type: 'datePicker', | |||
label: '抄表日期', | |||
dateType: 'daterange', | |||
format: 'yyyy-MM-dd', | |||
valueFormat: 'timestamp', | |||
rangeSeparator: '-', | |||
startPlaceholder: '开始时间', | |||
endPlaceholder: '结束时间', | |||
param: 'timeVal', | |||
defaultSelect: [], | |||
}, | |||
{ | |||
type: 'button', | |||
btnName: '查询', | |||
name: 'search', | |||
color: 'primary', | |||
}, | |||
{ | |||
type: 'separate', | |||
}, | |||
{ | |||
type: this.$auth.hasPermi('base:energy-quantity-manual:export') | |||
? 'button' | |||
: '', | |||
btnName: '导出', | |||
name: 'export', | |||
color: 'primary', | |||
plain: true, | |||
}, | |||
{ | |||
type: this.$auth.hasPermi('base:energy-quantity-manual:create') | |||
? 'button' | |||
: '', | |||
btnName: '新增', | |||
name: 'add', | |||
color: 'success', | |||
plain: true, | |||
}, | |||
], | |||
tableProps, | |||
tableH: this.tableHeight(260), | |||
// 总条数 | |||
total: 0, | |||
// 班次基础信息列表 | |||
list: [], | |||
tableBtn: [ | |||
this.$auth.hasPermi('base:energy-quantity-manual:create') | |||
? { | |||
type: 'meterReading', | |||
btnName: '抄表', | |||
} | |||
: undefined, | |||
this.$auth.hasPermi('base:energy-quantity-manual:update') | |||
? { | |||
type: 'edit', | |||
btnName: '编辑', | |||
} | |||
: undefined, | |||
this.$auth.hasPermi('base:energy-quantity-manual:delete') | |||
? { | |||
type: 'delete', | |||
btnName: '删除', | |||
} | |||
: undefined, | |||
].filter((v) => v), | |||
// 查询参数 | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 20, | |||
energyTypeId: '', | |||
recordTime: [], | |||
}, | |||
energyTypeList: [], | |||
exportList: [], | |||
addOrEditTitle: '', | |||
centervisible: false, | |||
}; | |||
}, | |||
components: { EnergyQuantityManualAdd }, | |||
created() { | |||
window.addEventListener('resize', () => { | |||
this.tableH = this.tableHeight(260); | |||
}); | |||
let end = moment(moment().format('YYYY-MM-DD 23:59:59')).valueOf(); | |||
let start = moment( | |||
moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00') | |||
).valueOf(); | |||
this.formConfig[1].defaultSelect = [start, end]; | |||
this.queryParams.recordTime[0] = start; | |||
this.queryParams.recordTime[1] = end; | |||
this.getList(); | |||
this.getTypeList(); | |||
}, | |||
methods: { | |||
buttonClick(val) { | |||
this.queryParams.pageNo = 1; | |||
this.queryParams.energyTypeId = val.energyTypeId; | |||
this.queryParams.recordTime[0] = val.timeVal | |||
? moment(moment(val.timeVal[0]).format('YYYY-MM-DD 00:00:00')).valueOf() | |||
: null; | |||
this.queryParams.recordTime[1] = val.timeVal | |||
? moment(moment(val.timeVal[1]).format('YYYY-MM-DD 23:59:59')).valueOf() | |||
: null; | |||
switch (val.btnName) { | |||
case 'search': | |||
this.getList(); | |||
break; | |||
case 'add': | |||
this.addOrEditTitle = '新增'; | |||
this.centervisible = true; | |||
let params = {}; | |||
params.type = 'add'; | |||
this.$nextTick(() => { | |||
this.$refs.energyQuantityManualAdd.init(params); | |||
}); | |||
break; | |||
default: | |||
this.$modal | |||
.confirm('是否确认导出') | |||
.then(() => { | |||
return energyQuantityManualExport({ | |||
energyTypeId: this.queryParams.energyTypeId, | |||
recordTime: this.queryParams.recordTime, | |||
}); | |||
}) | |||
.then((response) => { | |||
this.$download.excel(response, '能源报表.xls'); | |||
}) | |||
.catch(() => {}); | |||
} | |||
}, | |||
/** 查询列表 */ | |||
getList() { | |||
energyQuantityManualPage(this.queryParams).then((response) => { | |||
let arr = response.data.list || []; | |||
arr && | |||
arr.map((item) => { | |||
item.amount = item.amount | |||
? !isNaN(parseFloat(item.amount)) && isFinite(item.amount) | |||
? item.amount.toFixed(2) | |||
: '' | |||
: ''; | |||
}); | |||
this.list = arr; | |||
this.total = response.data.total; | |||
this.exportList = []; | |||
}); | |||
}, | |||
getTypeList() { | |||
getEnergyTypeListAll().then((res) => { | |||
this.formConfig[0].selectOptions = res.data || []; | |||
this.energyTypeList = res.data || []; | |||
}); | |||
}, | |||
selectChange(val) { | |||
console.log(val); | |||
this.exportList = val; | |||
}, | |||
handleClick(val) { | |||
console.log(val); | |||
switch (val.type) { | |||
case 'edit': | |||
this.addOrEditTitle = '编辑'; | |||
this.centervisible = true; | |||
let paramA = {}; | |||
paramA.type = 'edit'; | |||
paramA.id = val.data.id; | |||
this.$nextTick(() => { | |||
this.$refs.energyQuantityManualAdd.init(paramA); | |||
}); | |||
break; | |||
case 'meterReading': | |||
this.addOrEditTitle = '新增'; | |||
this.centervisible = true; | |||
let paramB = {}; | |||
paramB.type = 'meterReading'; | |||
paramB.energyTypeId = val.data.energyTypeId; | |||
paramB.tableName = val.data.tableName; | |||
this.$nextTick(() => { | |||
this.$refs.energyQuantityManualAdd.init(paramB); | |||
}); | |||
break; | |||
default: | |||
this.handleDelete(val.data); | |||
} | |||
}, | |||
// 新增 | |||
handleCancel() { | |||
this.$refs.energyQuantityManualAdd.formClear(); | |||
this.centervisible = false; | |||
this.addOrEditTitle = ''; | |||
}, | |||
handleConfirm() { | |||
this.$refs.energyQuantityManualAdd.submitForm(); | |||
}, | |||
successSubmit() { | |||
this.handleCancel(); | |||
this.getList(); | |||
}, | |||
/** 删除按钮操作 */ | |||
handleDelete(row) { | |||
console.log(row.id); | |||
this.$modal | |||
.confirm('是否确认删除能源类型为"' + row.energyType + '"的数据项?') | |||
.then(function () { | |||
return energyQuantityManualDelete({ id: row.id }); | |||
}) | |||
.then(() => { | |||
this.queryParams.pageNo = 1; | |||
this.getList(); | |||
this.$modal.msgSuccess('删除成功'); | |||
}) | |||
.catch(() => {}); | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -0,0 +1,72 @@ | |||
<template> | |||
<el-form | |||
ref="form" | |||
label-width="100px" | |||
:model="form"> | |||
<el-form-item | |||
label="能源类型" | |||
prop="energyType"> | |||
<el-input v-model="form.energyType"></el-input> | |||
</el-form-item> | |||
<el-form-item | |||
label="能源表名" | |||
prop="tableIds"> | |||
<el-select | |||
v-model="form.tableIds" | |||
placeholder="请选择" | |||
style="width: 100%" | |||
:multiple="true" | |||
filterable> | |||
<el-option | |||
v-for="dict in getDictDatas('table_name')" | |||
:key="dict.id" | |||
:label="dict.label" | |||
:value="dict.id" /> | |||
</el-select> | |||
</el-form-item> | |||
</el-form> | |||
</template> | |||
<script> | |||
import { | |||
energyTableGet, | |||
energyTableUpdate, | |||
} from '@/api/base/energyQuantityManual'; | |||
export default { | |||
name: 'TableNameConfigUpdate', | |||
data() { | |||
return { | |||
form: { | |||
energyType: '', | |||
energyTypeId: '', | |||
tableIds: [], | |||
}, | |||
}; | |||
}, | |||
methods: { | |||
init(id) { | |||
energyTableGet({ energyTypeId: id }).then((res) => { | |||
this.form.energyType = res.data.energyType || ''; | |||
this.form.energyTypeId = res.data.energyTypeId || ''; | |||
this.form.tableIds = res.data.tableIds || []; | |||
}); | |||
}, | |||
submitForm() { | |||
this.$refs['form'].validate((valid) => { | |||
// 编辑 | |||
energyTableUpdate({ ...this.form }).then((res) => { | |||
if (res.code === 0) { | |||
this.$modal.msgSuccess('操作成功'); | |||
this.$emit('successSubmit'); | |||
} | |||
}); | |||
}); | |||
}, | |||
formClear() { | |||
this.form.energyType = ''; | |||
this.form.energyTypeId = ''; | |||
this.form.tableIds = []; | |||
this.isEdit = false; | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -0,0 +1,106 @@ | |||
<template> | |||
<div class="app-container"> | |||
<!-- 列表 --> | |||
<base-table | |||
:page="queryParams.pageNo" | |||
:limit="queryParams.pageSize" | |||
:table-props="tableProps" | |||
:table-data="list" | |||
:max-height="tableH"> | |||
<method-btn | |||
v-if="tableBtn.length" | |||
slot="handleBtn" | |||
:width="80" | |||
label="操作" | |||
:method-list="tableBtn" | |||
@clickBtn="handleClick" /> | |||
</base-table> | |||
<!-- 新增 --> | |||
<base-dialog | |||
dialogTitle="编辑" | |||
:dialogVisible="centervisible" | |||
@cancel="handleCancel" | |||
@confirm="handleConfirm" | |||
:before-close="handleCancel"> | |||
<table-name-config-update | |||
ref="tableNameConfigU" | |||
@successSubmit="successSubmit" /> | |||
</base-dialog> | |||
</div> | |||
</template> | |||
<script> | |||
import { energyTablePage } from '@/api/base/energyQuantityManual'; | |||
import { publicFormatter } from '@/utils/dict'; | |||
import tableNameConfigUpdate from './components/tableNameConfigUpdate.vue'; | |||
const tableProps = [ | |||
{ | |||
prop: 'energyType', | |||
label: '能源类型', | |||
width: 200, | |||
filter: publicFormatter('energy_type'), | |||
}, | |||
{ | |||
prop: 'tableName', | |||
label: '能源表名', | |||
}, | |||
]; | |||
export default { | |||
name: 'TableNameConfig', | |||
components: { tableNameConfigUpdate }, | |||
data() { | |||
return { | |||
tableProps, | |||
tableBtn: [ | |||
this.$auth.hasPermi('base:table-name-config:edit') | |||
? { | |||
type: 'edit', | |||
btnName: '编辑', | |||
} | |||
: undefined, | |||
].filter((v) => v), | |||
list: [], | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 100, | |||
}, | |||
tableH: this.tableHeight(165), | |||
centervisible: false, | |||
}; | |||
}, | |||
created() { | |||
this.getList(); | |||
}, | |||
methods: { | |||
getList() { | |||
energyTablePage({ ...this.queryParams }).then((res) => { | |||
let temp = res.data.list || []; | |||
this.list = temp.map((item) => { | |||
return { | |||
energyType: item.energyType, | |||
energyTypeId: item.energyTypeId, | |||
tableName: item.tables.join('、'), | |||
}; | |||
}); | |||
}); | |||
}, | |||
handleClick(val) { | |||
console.log('编辑'); | |||
this.centervisible = true; | |||
this.$nextTick(() => { | |||
this.$refs.tableNameConfigU.init(val.data.energyTypeId); | |||
}); | |||
}, | |||
handleCancel() { | |||
this.$refs.tableNameConfigU.formClear(); | |||
this.centervisible = false; | |||
}, | |||
handleConfirm() { | |||
this.$refs.tableNameConfigU.submitForm(); | |||
}, | |||
successSubmit() { | |||
this.handleCancel(); | |||
this.getList(); | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -33,11 +33,28 @@ | |||
v-model="objIds" | |||
:options="objList" | |||
:props="{ checkStrictly: true, value: 'id', label: 'name' }" | |||
popper-class="cascaderParent" | |||
@change="selectObj" | |||
clearable></el-cascader> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item | |||
label="监控能源类型" | |||
prop="energyTypeId"> | |||
<el-select | |||
v-model="form.energyTypeId" | |||
placeholder="请选择" | |||
style="width: 100%" | |||
filterable | |||
@change="toggleType"> | |||
<el-option | |||
v-for="item in this.energyTypeList" | |||
:key="item.id" | |||
:label="item.labelName" | |||
:value="item.id"></el-option> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
<el-col | |||
:span="12" | |||
v-if="form.method == 2"> | |||
@@ -56,24 +73,6 @@ | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item | |||
label="监控能源类型" | |||
prop="energyTypeId"> | |||
<el-select | |||
v-model="form.energyTypeId" | |||
placeholder="请选择" | |||
style="width: 100%" | |||
filterable | |||
@change="toggleType"> | |||
<el-option | |||
v-for="item in this.energyTypeList" | |||
:key="item.id" | |||
:label="item.name" | |||
:value="item.id"></el-option> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
<el-col | |||
:span="12" | |||
v-if="form.method == 1"> | |||
@@ -353,8 +352,3 @@ export default { | |||
}, | |||
}; | |||
</script> | |||
<style> | |||
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio { | |||
display: none; | |||
} | |||
</style> |
@@ -48,7 +48,7 @@ import { | |||
deleteEnergyLimit, | |||
} from '@/api/monitoring/energyLimit'; | |||
import { getEnergyTypeListAll } from '@/api/base/energyType'; | |||
import { getTree } from '@/api/base/factory'; | |||
import { getTree } from '@/api/analysis/energyAnalysis'; | |||
import { publicFormatter } from '@/utils/dict'; | |||
import EnergyLimitAdd from './components/energyLimitAdd'; | |||
const tableProps = [ | |||
@@ -60,20 +60,27 @@ const tableProps = [ | |||
{ | |||
prop: 'objName', | |||
label: '监控对象', | |||
minWidth: 100, | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'objCode', | |||
label: '对象编码', | |||
minWidth: 140, | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'tableName', | |||
label: '能源表名', | |||
filter: publicFormatter('table_name'), | |||
minWidth: 120, | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'energyType', | |||
label: '能源类型', | |||
filter: publicFormatter('energy_type'), | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'type', | |||
@@ -104,6 +111,7 @@ export default { | |||
type: 'select', | |||
label: '能源类型', | |||
selectOptions: [], | |||
labelField: 'labelName', | |||
param: 'energyTypeId', | |||
}, | |||
{ | |||
@@ -1,248 +1,271 @@ | |||
<template> | |||
<div class="app-container energyOverlimitLog"> | |||
<!-- 搜索工作栏 --> | |||
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> | |||
<el-tabs v-model="activeName" @tab-click="toggleTab"> | |||
<el-tab-pane label="自动抄表" name="auto"></el-tab-pane> | |||
<el-tab-pane label="手动抄表" name="manual"></el-tab-pane> | |||
</el-tabs> | |||
<!-- 列表 --> | |||
<div v-if="activeName === 'auto'"> | |||
<base-table :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-props="tableProps" :table-data="list" | |||
:max-height="tableH" /> | |||
</div> | |||
<div v-if="activeName === 'manual'"> | |||
<base-table :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-props="tableProps2" | |||
:table-data="list2" :max-height="tableH" /> | |||
</div> | |||
<pagination :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" :total="total" | |||
@pagination="getList" /> | |||
</div> | |||
<div class="app-container energyOverlimitLog"> | |||
<!-- 搜索工作栏 --> | |||
<search-bar | |||
:formConfigs="formConfig" | |||
ref="searchBarForm" | |||
@headBtnClick="buttonClick" /> | |||
<el-tabs | |||
v-model="activeName" | |||
@tab-click="toggleTab"> | |||
<el-tab-pane | |||
label="自动抄表" | |||
name="auto"></el-tab-pane> | |||
<el-tab-pane | |||
label="手动抄表" | |||
name="manual"></el-tab-pane> | |||
</el-tabs> | |||
<!-- 列表 --> | |||
<div v-if="activeName === 'auto'"> | |||
<base-table | |||
:page="queryParams.pageNo" | |||
:limit="queryParams.pageSize" | |||
:table-props="tableProps" | |||
:table-data="list" | |||
:max-height="tableH" /> | |||
</div> | |||
<div v-if="activeName === 'manual'"> | |||
<base-table | |||
:page="queryParams.pageNo" | |||
:limit="queryParams.pageSize" | |||
:table-props="tableProps2" | |||
:table-data="list2" | |||
:max-height="tableH" /> | |||
</div> | |||
<pagination | |||
:page.sync="queryParams.pageNo" | |||
:limit.sync="queryParams.pageSize" | |||
:total="total" | |||
@pagination="getList" /> | |||
</div> | |||
</template> | |||
<script> | |||
import { getEnergyOverlimitLogPage } from "@/api/monitoring/energyOverlimitLog"; | |||
import { getEnergyTypeListAll } from "@/api/base/energyType"; | |||
import { publicFormatter } from '@/utils/dict' | |||
import { parseTime } from '@/utils/ruoyi' | |||
import { getEnergyOverlimitLogPage } from '@/api/monitoring/energyOverlimitLog'; | |||
import { getEnergyTypeListAll } from '@/api/base/energyType'; | |||
import { publicFormatter } from '@/utils/dict'; | |||
import { parseTime } from '@/utils/ruoyi'; | |||
const tableProps = [ | |||
{ | |||
prop: 'objName', | |||
label: '监控对象' | |||
}, | |||
{ | |||
prop: 'objCode', | |||
label: '对象编码' | |||
}, | |||
{ | |||
prop: 'energyType', | |||
label: '能源类型' | |||
}, | |||
{ | |||
prop: 'type', | |||
label: '监控模式' | |||
}, | |||
{ | |||
prop: 'paramName', | |||
label: '监控参数' | |||
}, | |||
{ | |||
prop: 'limitType', | |||
label: '指标类型', | |||
filter: publicFormatter('monitor_index_type') | |||
}, | |||
{ | |||
prop: 'realityValue', | |||
label: '实际值' | |||
}, | |||
{ | |||
prop: 'limitValue', | |||
label: '阈值' | |||
}, | |||
{ | |||
prop: 'overValue', | |||
label: '超出值' | |||
}, | |||
{ | |||
prop: 'time', | |||
label: '提醒时间', | |||
filter: parseTime, | |||
minWidth: 160 | |||
} | |||
] | |||
{ | |||
prop: 'objName', | |||
label: '监控对象', | |||
}, | |||
{ | |||
prop: 'objCode', | |||
label: '对象编码', | |||
}, | |||
{ | |||
prop: 'energyType', | |||
label: '能源类型', | |||
filter: publicFormatter('energy_type'), | |||
}, | |||
{ | |||
prop: 'type', | |||
label: '监控模式', | |||
}, | |||
{ | |||
prop: 'paramName', | |||
label: '监控参数', | |||
}, | |||
{ | |||
prop: 'limitType', | |||
label: '指标类型', | |||
filter: publicFormatter('monitor_index_type'), | |||
}, | |||
{ | |||
prop: 'realityValue', | |||
label: '实际值', | |||
}, | |||
{ | |||
prop: 'limitValue', | |||
label: '阈值', | |||
}, | |||
{ | |||
prop: 'overValue', | |||
label: '超出值', | |||
}, | |||
{ | |||
prop: 'time', | |||
label: '提醒时间', | |||
filter: parseTime, | |||
minWidth: 160, | |||
}, | |||
]; | |||
const tableProps2 = [ | |||
{ | |||
prop: 'energyType', | |||
label: '能源类型' | |||
}, | |||
{ | |||
prop: 'limitType', | |||
label: '指标类型', | |||
filter: publicFormatter('monitor_index_type') | |||
}, | |||
{ | |||
prop: 'realityValue', | |||
label: '实际值' | |||
}, | |||
{ | |||
prop: 'limitValue', | |||
label: '阈值' | |||
}, | |||
{ | |||
prop: 'overValue', | |||
label: '超出值' | |||
}, | |||
{ | |||
prop: 'time', | |||
label: '提醒时间', | |||
filter: parseTime, | |||
minWidth: 160 | |||
} | |||
] | |||
{ | |||
prop: 'energyType', | |||
label: '能源类型', | |||
filter: publicFormatter('energy_type'), | |||
}, | |||
{ | |||
prop: 'limitType', | |||
label: '指标类型', | |||
filter: publicFormatter('monitor_index_type'), | |||
}, | |||
{ | |||
prop: 'realityValue', | |||
label: '实际值', | |||
}, | |||
{ | |||
prop: 'limitValue', | |||
label: '阈值', | |||
}, | |||
{ | |||
prop: 'overValue', | |||
label: '超出值', | |||
}, | |||
{ | |||
prop: 'time', | |||
label: '提醒时间', | |||
filter: parseTime, | |||
minWidth: 160, | |||
}, | |||
]; | |||
export default { | |||
name: "EnergyOverlimitLog", | |||
data() { | |||
return { | |||
formConfig: [ | |||
{ | |||
type: 'select', | |||
label: '能源类型', | |||
selectOptions: [], | |||
param: 'energyTypeId' | |||
}, | |||
{ | |||
type: 'select', | |||
label: '指标类型', | |||
selectOptions: this.getDictDatas(this.DICT_TYPE.MONITOR_INDEX_TYPE), | |||
labelField: 'label', | |||
valueField: 'value', | |||
param: 'indexType' | |||
}, | |||
{ | |||
type: 'button', | |||
btnName: '查询', | |||
name: 'search', | |||
color: 'primary' | |||
} | |||
], | |||
activeName: 'auto', | |||
tableProps, | |||
tableProps2, | |||
tableH: this.tableHeight(260), | |||
total: 0, | |||
list: [], | |||
list2: [], | |||
// 查询参数 | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 20, | |||
energyTypeId: '', | |||
indexType: '', | |||
method: '1' | |||
}, | |||
typeList: [ | |||
{ id: 1, name: '合并' }, | |||
{ id: 2, name: '详细' } | |||
] | |||
}; | |||
}, | |||
created() { | |||
window.addEventListener('resize', () => { | |||
this.tableH = this.tableHeight(260) | |||
}) | |||
this.getList(); | |||
this.getTypeList() | |||
}, | |||
methods: { | |||
buttonClick(val) { | |||
this.queryParams.pageNo = 1; | |||
this.queryParams.energyTypeId = val.energyTypeId | |||
this.queryParams.indexType = val.indexType | |||
this.getList() | |||
}, | |||
/** 查询列表 */ | |||
getList() { | |||
getEnergyOverlimitLogPage(this.queryParams).then(response => { | |||
let arr = response.data.list || []; | |||
arr && arr.map((item) => { | |||
this.typeList.map((i) => { | |||
if (item.type === i.id) { | |||
item.type = i.name | |||
} | |||
}) | |||
if (item.minValue && item.maxValue) { | |||
item.limitValue = item.minValue + '-' + item.maxValue | |||
} else if (item.minValue) { | |||
item.limitValue = '最小值' + item.minValue | |||
} else if (item.maxValue) { | |||
item.limitValue = '最大值' + item.maxValue | |||
} else { | |||
item.limitValue = '' | |||
} | |||
}) | |||
if (this.queryParams.method === '1') { | |||
this.list = arr | |||
this.list2 = [] | |||
} else { | |||
this.list2 = arr | |||
this.list1 = [] | |||
} | |||
this.total = response.data.total; | |||
}); | |||
}, | |||
getTypeList() { | |||
getEnergyTypeListAll().then((res) => { | |||
console.log(res) | |||
this.formConfig[0].selectOptions = res.data || [] | |||
}) | |||
}, | |||
toggleTab() { | |||
if (this.activeName === 'auto') { | |||
this.queryParams.method = '1' | |||
} else { | |||
this.queryParams.method = '2' | |||
} | |||
this.queryParams.pageNo = 1 | |||
this.getList() | |||
} | |||
} | |||
name: 'EnergyOverlimitLog', | |||
data() { | |||
return { | |||
formConfig: [ | |||
{ | |||
type: 'select', | |||
label: '能源类型', | |||
labelField: 'labelName', | |||
selectOptions: [], | |||
param: 'energyTypeId', | |||
}, | |||
{ | |||
type: 'select', | |||
label: '指标类型', | |||
selectOptions: this.getDictDatas(this.DICT_TYPE.MONITOR_INDEX_TYPE), | |||
labelField: 'label', | |||
valueField: 'value', | |||
param: 'indexType', | |||
}, | |||
{ | |||
type: 'button', | |||
btnName: '查询', | |||
name: 'search', | |||
color: 'primary', | |||
}, | |||
], | |||
activeName: 'auto', | |||
tableProps, | |||
tableProps2, | |||
tableH: this.tableHeight(260), | |||
total: 0, | |||
list: [], | |||
list2: [], | |||
// 查询参数 | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 20, | |||
energyTypeId: '', | |||
indexType: '', | |||
method: '1', | |||
}, | |||
typeList: [ | |||
{ id: 1, name: '合并' }, | |||
{ id: 2, name: '详细' }, | |||
], | |||
}; | |||
}, | |||
created() { | |||
window.addEventListener('resize', () => { | |||
this.tableH = this.tableHeight(260); | |||
}); | |||
this.getList(); | |||
this.getTypeList(); | |||
}, | |||
methods: { | |||
buttonClick(val) { | |||
this.queryParams.pageNo = 1; | |||
this.queryParams.energyTypeId = val.energyTypeId; | |||
this.queryParams.indexType = val.indexType; | |||
this.getList(); | |||
}, | |||
/** 查询列表 */ | |||
getList() { | |||
getEnergyOverlimitLogPage(this.queryParams).then((response) => { | |||
let arr = response.data.list || []; | |||
arr && | |||
arr.map((item) => { | |||
this.typeList.map((i) => { | |||
if (item.type === i.id) { | |||
item.type = i.name; | |||
} | |||
}); | |||
if (item.minValue && item.maxValue) { | |||
item.limitValue = item.minValue + '-' + item.maxValue; | |||
} else if (item.minValue) { | |||
item.limitValue = '最小值' + item.minValue; | |||
} else if (item.maxValue) { | |||
item.limitValue = '最大值' + item.maxValue; | |||
} else { | |||
item.limitValue = ''; | |||
} | |||
}); | |||
if (this.queryParams.method === '1') { | |||
this.list = arr; | |||
this.list2 = []; | |||
} else { | |||
this.list2 = arr; | |||
this.list1 = []; | |||
} | |||
this.total = response.data.total; | |||
}); | |||
}, | |||
getTypeList() { | |||
getEnergyTypeListAll().then((res) => { | |||
console.log(res); | |||
this.formConfig[0].selectOptions = res.data || []; | |||
}); | |||
}, | |||
toggleTab() { | |||
if (this.activeName === 'auto') { | |||
this.queryParams.method = '1'; | |||
} else { | |||
this.queryParams.method = '2'; | |||
} | |||
this.queryParams.pageNo = 1; | |||
this.getList(); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style lang='scss'> | |||
.energyOverlimitLog { | |||
.el-tabs__nav::after { | |||
content: ""; | |||
position: absolute; | |||
left: 0; | |||
bottom: 0; | |||
width: 100%; | |||
height: 2px; | |||
background-color: #e4e7ed; | |||
} | |||
.el-tabs__nav::after { | |||
content: ''; | |||
position: absolute; | |||
left: 0; | |||
bottom: 0; | |||
width: 100%; | |||
height: 2px; | |||
background-color: #e4e7ed; | |||
} | |||
.el-tabs__nav-wrap::after { | |||
width: 0; | |||
} | |||
.el-tabs__nav-wrap::after { | |||
width: 0; | |||
} | |||
.el-tabs__item { | |||
padding: 0 10px; | |||
} | |||
.el-tabs__item { | |||
padding: 0 10px; | |||
} | |||
.el-tabs__item:hover { | |||
color: rgba(0, 0, 0, 0.85); | |||
} | |||
.el-tabs__item:hover { | |||
color: rgba(0, 0, 0, 0.85); | |||
} | |||
.el-tabs__item.is-active { | |||
color: rgba(0, 0, 0, 0.85); | |||
} | |||
.el-tabs__item.is-active { | |||
color: rgba(0, 0, 0, 0.85); | |||
} | |||
.el-tabs__item { | |||
color: rgba(0, 0, 0, 0.45); | |||
} | |||
.el-tabs__item { | |||
color: rgba(0, 0, 0, 0.45); | |||
} | |||
.searchBarBox { | |||
margin-bottom: 0; | |||
} | |||
.searchBarBox { | |||
margin-bottom: 0; | |||
} | |||
} | |||
</style> |
@@ -56,6 +56,7 @@ const tableProps = [ | |||
{ | |||
prop: 'energyType', | |||
label: '能源类型', | |||
filter: publicFormatter('energy_type'), | |||
}, | |||
{ | |||
prop: 'startNum', | |||
@@ -79,6 +80,7 @@ export default { | |||
{ | |||
type: 'select', | |||
label: '能源类型', | |||
labelField: 'labelName', | |||
selectOptions: [], | |||
param: 'energyTypeId', | |||
filterable: true, | |||
@@ -1,128 +1,160 @@ | |||
<template> | |||
<el-form ref="form" :rules="rules" label-width="100px" :model="form"> | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item label="方案名称" prop="name"> | |||
<el-input v-model="form.name"></el-input> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="方案编码" prop="code"> | |||
<el-input v-model="form.code" disabled></el-input> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item label="统计类型" prop="type"> | |||
<el-select v-model="form.type" placeholder="请选择" style="width: 100%;"> | |||
<el-option | |||
v-for="item in getDictDatas(DICT_TYPE.STATISTIC_TYPE)" | |||
:key="item.value" | |||
:label="item.label" | |||
:value="item.value"> | |||
</el-option> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="能源类型" prop="energyTypeId"> | |||
<el-select v-model="form.energyTypeId" placeholder="请选择" style="width: 100%;" filterable> | |||
<el-option | |||
v-for="item in energyListType" | |||
:key="item.id" | |||
:label="item.name" | |||
:value="item.id"> | |||
</el-option> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item label="备注" prop="remark"> | |||
<el-input v-model="form.remark"></el-input> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
</el-form> | |||
<el-form | |||
ref="form" | |||
:rules="rules" | |||
label-width="100px" | |||
:model="form"> | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item | |||
label="方案名称" | |||
prop="name"> | |||
<el-input v-model="form.name"></el-input> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item | |||
label="方案编码" | |||
prop="code"> | |||
<el-input | |||
v-model="form.code" | |||
disabled></el-input> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item | |||
label="统计类型" | |||
prop="type"> | |||
<el-select | |||
v-model="form.type" | |||
placeholder="请选择" | |||
style="width: 100%"> | |||
<el-option | |||
v-for="item in getDictDatas(DICT_TYPE.STATISTIC_TYPE)" | |||
:key="item.value" | |||
:label="item.label" | |||
:value="item.value"></el-option> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item | |||
label="能源类型" | |||
prop="energyTypeId"> | |||
<el-select | |||
v-model="form.energyTypeId" | |||
placeholder="请选择" | |||
style="width: 100%" | |||
filterable> | |||
<el-option | |||
v-for="item in energyListType" | |||
:key="item.id" | |||
:label="item.labelName" | |||
:value="item.id"></el-option> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
<el-row> | |||
<el-col :span="12"> | |||
<el-form-item | |||
label="备注" | |||
prop="remark"> | |||
<el-input v-model="form.remark"></el-input> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
</el-form> | |||
</template> | |||
<script> | |||
import { getCode, createEnergyStatistics, updateEnergyStatistics, getEnergyStatistics } from "@/api/monitoring/energyStatistics"; | |||
import { getEnergyTypeListAll } from '@/api/base/energyType' | |||
import { | |||
getCode, | |||
createEnergyStatistics, | |||
updateEnergyStatistics, | |||
getEnergyStatistics, | |||
} from '@/api/monitoring/energyStatistics'; | |||
import { getEnergyTypeListAll } from '@/api/base/energyType'; | |||
import { number } from 'echarts'; | |||
export default { | |||
name: 'EnergyStatisticsAdd', | |||
data() { | |||
return { | |||
form: { | |||
id: '', | |||
name: '', | |||
code: '', | |||
type: '', | |||
energyTypeId: '' | |||
}, | |||
plcList: [], | |||
objList: [], | |||
isEdit: false, //是否是编辑 | |||
rules: { | |||
name: [{ required: true, message: '方案名称不能为空', trigger: 'blur' }], | |||
type: [{ required: true, message: '统计类型不能为空', trigger: 'change' }], | |||
energyTypeId: [{ required: true, message: '能源类型不能为空', trigger: 'change' }] | |||
}, | |||
energyListType: [], | |||
} | |||
}, | |||
methods: { | |||
init(id) { | |||
getEnergyTypeListAll().then((res) => { | |||
this.energyListType = res.data || [] | |||
}) | |||
if (id) { | |||
this.isEdit = true | |||
this.form.id = id | |||
getEnergyStatistics( id ).then((res) => { | |||
if (res.code === 0) { | |||
this.form = res.data | |||
this.form.type = this.form.type + '' | |||
} | |||
}) | |||
} else { | |||
getCode().then((res) => { | |||
this.form.code = res.data | |||
}) | |||
this.isEdit = false | |||
this.form.id = '' | |||
} | |||
}, | |||
submitForm() { | |||
this.$refs['form'].validate((valid) => { | |||
if (valid) { | |||
if (this.isEdit) { | |||
// 编辑 | |||
updateEnergyStatistics({...this.form}).then((res) => { | |||
if (res.code === 0) { | |||
this.$modal.msgSuccess("操作成功"); | |||
this.$emit('successSubmit') | |||
} | |||
}) | |||
} else { | |||
createEnergyStatistics({...this.form}).then((res) => { | |||
if (res.code === 0) { | |||
this.$modal.msgSuccess("操作成功"); | |||
this.$emit('successSubmit') | |||
} | |||
}) | |||
} | |||
} else { | |||
return false | |||
} | |||
}) | |||
}, | |||
formClear() { | |||
this.$refs.form.resetFields() | |||
this.isEdit = false | |||
} | |||
} | |||
} | |||
name: 'EnergyStatisticsAdd', | |||
data() { | |||
return { | |||
form: { | |||
id: '', | |||
name: '', | |||
code: '', | |||
type: '', | |||
energyTypeId: '', | |||
}, | |||
plcList: [], | |||
objList: [], | |||
isEdit: false, //是否是编辑 | |||
rules: { | |||
name: [ | |||
{ required: true, message: '方案名称不能为空', trigger: 'blur' }, | |||
], | |||
type: [ | |||
{ required: true, message: '统计类型不能为空', trigger: 'change' }, | |||
], | |||
energyTypeId: [ | |||
{ required: true, message: '能源类型不能为空', trigger: 'change' }, | |||
], | |||
}, | |||
energyListType: [], | |||
}; | |||
}, | |||
methods: { | |||
init(id) { | |||
getEnergyTypeListAll().then((res) => { | |||
this.energyListType = res.data || []; | |||
}); | |||
if (id) { | |||
this.isEdit = true; | |||
this.form.id = id; | |||
getEnergyStatistics(id).then((res) => { | |||
if (res.code === 0) { | |||
this.form = res.data; | |||
this.form.type = this.form.type + ''; | |||
} | |||
}); | |||
} else { | |||
getCode().then((res) => { | |||
this.form.code = res.data; | |||
}); | |||
this.isEdit = false; | |||
this.form.id = ''; | |||
} | |||
}, | |||
submitForm() { | |||
this.$refs['form'].validate((valid) => { | |||
if (valid) { | |||
if (this.isEdit) { | |||
// 编辑 | |||
updateEnergyStatistics({ ...this.form }).then((res) => { | |||
if (res.code === 0) { | |||
this.$modal.msgSuccess('操作成功'); | |||
this.$emit('successSubmit'); | |||
} | |||
}); | |||
} else { | |||
createEnergyStatistics({ ...this.form }).then((res) => { | |||
if (res.code === 0) { | |||
this.$modal.msgSuccess('操作成功'); | |||
this.$emit('successSubmit'); | |||
} | |||
}); | |||
} | |||
} else { | |||
return false; | |||
} | |||
}); | |||
}, | |||
formClear() { | |||
this.$refs.form.resetFields(); | |||
this.isEdit = false; | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -1,222 +1,254 @@ | |||
<template> | |||
<div class="app-container"> | |||
<!-- 搜索工作栏 --> | |||
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> | |||
<!-- 列表 --> | |||
<base-table :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-props="tableProps" :table-data="list" | |||
:max-height="tableH"> | |||
<method-btn v-if="tableBtn.length" slot="handleBtn" :width="160" label="操作" :method-list="tableBtn" | |||
@clickBtn="handleClick" /> | |||
</base-table> | |||
<pagination :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" :total="total" | |||
@pagination="getList" /> | |||
<!-- 新增 --> | |||
<base-dialog :dialogTitle="addOrEditTitle" :dialogVisible="centervisible" @cancel="handleCancel" | |||
@confirm="handleConfirm" :before-close="handleCancel"> | |||
<energy-statistics-add ref="energyStatistics" @successSubmit="successSubmit" /> | |||
</base-dialog> | |||
<!-- 参数绑定/查看 --> | |||
<energy-statistics-det ref="plcParam" @closeDrawer="closeDrawer" | |||
:energyTypeList="energyTypeList"></energy-statistics-det> | |||
</div> | |||
<div class="app-container"> | |||
<!-- 搜索工作栏 --> | |||
<search-bar | |||
:formConfigs="formConfig" | |||
ref="searchBarForm" | |||
@headBtnClick="buttonClick" /> | |||
<!-- 列表 --> | |||
<base-table | |||
:page="queryParams.pageNo" | |||
:limit="queryParams.pageSize" | |||
:table-props="tableProps" | |||
:table-data="list" | |||
:max-height="tableH"> | |||
<method-btn | |||
v-if="tableBtn.length" | |||
slot="handleBtn" | |||
:width="160" | |||
label="操作" | |||
:method-list="tableBtn" | |||
@clickBtn="handleClick" /> | |||
</base-table> | |||
<pagination | |||
:page.sync="queryParams.pageNo" | |||
:limit.sync="queryParams.pageSize" | |||
:total="total" | |||
@pagination="getList" /> | |||
<!-- 新增 --> | |||
<base-dialog | |||
:dialogTitle="addOrEditTitle" | |||
:dialogVisible="centervisible" | |||
@cancel="handleCancel" | |||
@confirm="handleConfirm" | |||
:before-close="handleCancel"> | |||
<energy-statistics-add | |||
ref="energyStatistics" | |||
@successSubmit="successSubmit" /> | |||
</base-dialog> | |||
<!-- 参数绑定/查看 --> | |||
<energy-statistics-det | |||
ref="plcParam" | |||
@closeDrawer="closeDrawer" | |||
:energyTypeList="energyTypeList"></energy-statistics-det> | |||
</div> | |||
</template> | |||
<script> | |||
import { getEnergyStatisticsPage, deleteEnergyStatistics } from "@/api/monitoring/energyStatistics"; | |||
import { publicFormatter } from '@/utils/dict' | |||
import { getEnergyTypeListAll } from '@/api/base/energyType' | |||
import EnergyStatisticsAdd from './components/energyStatisticsAdd' | |||
import EnergyStatisticsDet from './components/energyStatisticsDet' | |||
import { | |||
getEnergyStatisticsPage, | |||
deleteEnergyStatistics, | |||
} from '@/api/monitoring/energyStatistics'; | |||
import { publicFormatter } from '@/utils/dict'; | |||
import { getEnergyTypeListAll } from '@/api/base/energyType'; | |||
import EnergyStatisticsAdd from './components/energyStatisticsAdd'; | |||
import EnergyStatisticsDet from './components/energyStatisticsDet'; | |||
const tableProps = [ | |||
{ | |||
prop: 'name', | |||
label: '方案名称' | |||
}, | |||
{ | |||
prop: 'code', | |||
label: '方案编码', | |||
minWidth: 120, | |||
showOverflowtooltip: true | |||
}, | |||
{ | |||
prop: 'type', | |||
label: '统计类型', | |||
filter: publicFormatter('statistic_type') | |||
}, | |||
{ | |||
prop: 'energyType', | |||
label: '能源类型' | |||
}, | |||
{ | |||
prop: 'paramNum', | |||
label: '统计参数数量' | |||
}, | |||
{ | |||
prop: 'remark', | |||
label: '备注' | |||
} | |||
] | |||
{ | |||
prop: 'name', | |||
label: '方案名称', | |||
}, | |||
{ | |||
prop: 'code', | |||
label: '方案编码', | |||
minWidth: 120, | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'type', | |||
label: '统计类型', | |||
filter: publicFormatter('statistic_type'), | |||
}, | |||
{ | |||
prop: 'energyType', | |||
label: '能源类型', | |||
filter: publicFormatter('energy_type'), | |||
}, | |||
{ | |||
prop: 'paramNum', | |||
label: '统计参数数量', | |||
}, | |||
{ | |||
prop: 'remark', | |||
label: '备注', | |||
}, | |||
]; | |||
export default { | |||
name: "EnergyStatistics", | |||
components: { EnergyStatisticsAdd, EnergyStatisticsDet }, | |||
data() { | |||
return { | |||
formConfig: [ | |||
{ | |||
type: 'input', | |||
label: '方案名称', | |||
placeholder: '方案名称', | |||
param: 'name' | |||
}, | |||
{ | |||
type: 'button', | |||
btnName: '查询', | |||
name: 'search', | |||
color: 'primary' | |||
}, | |||
{ | |||
type: 'separate' | |||
}, | |||
{ | |||
type: this.$auth.hasPermi('monitoring:energy-statistics:create') ? 'button' : '', | |||
btnName: '新增', | |||
name: 'add', | |||
color: 'success', | |||
plain: true | |||
} | |||
], | |||
tableProps, | |||
tableBtn: [ | |||
this.$auth.hasPermi('monitoring:energy-statistics:bind') | |||
? { | |||
type: 'connect', | |||
btnName: '绑定' | |||
} | |||
: undefined, | |||
{ | |||
type: 'detail', | |||
btnName: '详情' | |||
}, | |||
this.$auth.hasPermi('monitoring:energy-statistics:update') | |||
? { | |||
type: 'edit', | |||
btnName: '编辑' | |||
} | |||
: undefined, | |||
this.$auth.hasPermi('monitoring:energy-statistics:delete') | |||
? { | |||
type: 'delete', | |||
btnName: '删除' | |||
} | |||
: undefined | |||
].filter((v) => v), | |||
tableH: this.tableHeight(260), | |||
// 总条数 | |||
total: 0, | |||
// 班次基础信息列表 | |||
list: [], | |||
// 弹出层标题 | |||
addOrEditTitle: "", | |||
// 是否显示弹出层 | |||
centervisible: false, | |||
// 查询参数 | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 20, | |||
name: null | |||
}, | |||
energyTypeList: [] | |||
}; | |||
}, | |||
created() { | |||
window.addEventListener('resize', () => { | |||
this.tableH = this.tableHeight(260) | |||
}) | |||
this.getList(); | |||
}, | |||
mounted() { | |||
// 获取能源列表 | |||
this.getEnergyTypeList() | |||
}, | |||
methods: { | |||
buttonClick(val) { | |||
switch (val.btnName) { | |||
case 'search': | |||
this.queryParams.pageNo = 1; | |||
this.queryParams.name = val.name | |||
this.getList() | |||
break | |||
default: | |||
this.addOrEditTitle = '新增' | |||
this.centervisible = true | |||
this.$nextTick(() => { | |||
this.$refs.energyStatistics.init() | |||
}) | |||
} | |||
}, | |||
/** 查询列表 */ | |||
getList() { | |||
getEnergyStatisticsPage(this.queryParams).then(response => { | |||
let arr = response.data.list || []; | |||
this.list = arr | |||
this.total = response.data.total; | |||
}); | |||
}, | |||
handleClick(val) { | |||
console.log(val) | |||
switch (val.type) { | |||
case 'edit': | |||
this.addOrEditTitle = '编辑' | |||
this.$nextTick(() => { | |||
this.$refs.energyStatistics.init(val.data.id) | |||
}) | |||
this.centervisible = true | |||
break | |||
case 'delete': | |||
this.handleDelete(val.data) | |||
break | |||
case 'detail': | |||
this.$nextTick(() => { | |||
this.$refs.plcParam.init(val.data, 'detail') | |||
}) | |||
break | |||
default: | |||
this.$nextTick(() => { | |||
this.$refs.plcParam.init(val.data, 'connect') | |||
}) | |||
} | |||
}, | |||
handleCancel() { | |||
this.$refs.energyStatistics.formClear() | |||
this.centervisible = false | |||
this.addOrEditTitle = '' | |||
}, | |||
handleConfirm() { | |||
this.$refs.energyStatistics.submitForm() | |||
}, | |||
successSubmit() { | |||
this.handleCancel() | |||
this.getList() | |||
}, | |||
/** 删除按钮操作 */ | |||
handleDelete(row) { | |||
this.$modal.confirm('是否确认删除方案名称为"' + row.name + '"的数据项?').then(function () { | |||
return deleteEnergyStatistics(row.id); | |||
}).then(() => { | |||
this.queryParams.pageNo = 1; | |||
this.getList(); | |||
this.$modal.msgSuccess("删除成功"); | |||
}).catch(() => { }); | |||
}, | |||
closeDrawer() { | |||
this.getList() | |||
}, | |||
getEnergyTypeList() { | |||
getEnergyTypeListAll().then((res) => { | |||
this.energyTypeList = res.data || [] | |||
}) | |||
} | |||
} | |||
name: 'EnergyStatistics', | |||
components: { EnergyStatisticsAdd, EnergyStatisticsDet }, | |||
data() { | |||
return { | |||
formConfig: [ | |||
{ | |||
type: 'input', | |||
label: '方案名称', | |||
placeholder: '方案名称', | |||
param: 'name', | |||
}, | |||
{ | |||
type: 'button', | |||
btnName: '查询', | |||
name: 'search', | |||
color: 'primary', | |||
}, | |||
{ | |||
type: 'separate', | |||
}, | |||
{ | |||
type: this.$auth.hasPermi('monitoring:energy-statistics:create') | |||
? 'button' | |||
: '', | |||
btnName: '新增', | |||
name: 'add', | |||
color: 'success', | |||
plain: true, | |||
}, | |||
], | |||
tableProps, | |||
tableBtn: [ | |||
this.$auth.hasPermi('monitoring:energy-statistics:bind') | |||
? { | |||
type: 'connect', | |||
btnName: '绑定', | |||
} | |||
: undefined, | |||
{ | |||
type: 'detail', | |||
btnName: '详情', | |||
}, | |||
this.$auth.hasPermi('monitoring:energy-statistics:update') | |||
? { | |||
type: 'edit', | |||
btnName: '编辑', | |||
} | |||
: undefined, | |||
this.$auth.hasPermi('monitoring:energy-statistics:delete') | |||
? { | |||
type: 'delete', | |||
btnName: '删除', | |||
} | |||
: undefined, | |||
].filter((v) => v), | |||
tableH: this.tableHeight(260), | |||
// 总条数 | |||
total: 0, | |||
// 班次基础信息列表 | |||
list: [], | |||
// 弹出层标题 | |||
addOrEditTitle: '', | |||
// 是否显示弹出层 | |||
centervisible: false, | |||
// 查询参数 | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 20, | |||
name: null, | |||
}, | |||
energyTypeList: [], | |||
}; | |||
}, | |||
created() { | |||
window.addEventListener('resize', () => { | |||
this.tableH = this.tableHeight(260); | |||
}); | |||
this.getList(); | |||
}, | |||
mounted() { | |||
// 获取能源列表 | |||
this.getEnergyTypeList(); | |||
}, | |||
methods: { | |||
buttonClick(val) { | |||
switch (val.btnName) { | |||
case 'search': | |||
this.queryParams.pageNo = 1; | |||
this.queryParams.name = val.name; | |||
this.getList(); | |||
break; | |||
default: | |||
this.addOrEditTitle = '新增'; | |||
this.centervisible = true; | |||
this.$nextTick(() => { | |||
this.$refs.energyStatistics.init(); | |||
}); | |||
} | |||
}, | |||
/** 查询列表 */ | |||
getList() { | |||
getEnergyStatisticsPage(this.queryParams).then((response) => { | |||
let arr = response.data.list || []; | |||
this.list = arr; | |||
this.total = response.data.total; | |||
}); | |||
}, | |||
handleClick(val) { | |||
console.log(val); | |||
switch (val.type) { | |||
case 'edit': | |||
this.addOrEditTitle = '编辑'; | |||
this.$nextTick(() => { | |||
this.$refs.energyStatistics.init(val.data.id); | |||
}); | |||
this.centervisible = true; | |||
break; | |||
case 'delete': | |||
this.handleDelete(val.data); | |||
break; | |||
case 'detail': | |||
this.$nextTick(() => { | |||
this.$refs.plcParam.init(val.data, 'detail'); | |||
}); | |||
break; | |||
default: | |||
this.$nextTick(() => { | |||
this.$refs.plcParam.init(val.data, 'connect'); | |||
}); | |||
} | |||
}, | |||
handleCancel() { | |||
this.$refs.energyStatistics.formClear(); | |||
this.centervisible = false; | |||
this.addOrEditTitle = ''; | |||
}, | |||
handleConfirm() { | |||
this.$refs.energyStatistics.submitForm(); | |||
}, | |||
successSubmit() { | |||
this.handleCancel(); | |||
this.getList(); | |||
}, | |||
/** 删除按钮操作 */ | |||
handleDelete(row) { | |||
this.$modal | |||
.confirm('是否确认删除方案名称为"' + row.name + '"的数据项?') | |||
.then(function () { | |||
return deleteEnergyStatistics(row.id); | |||
}) | |||
.then(() => { | |||
this.queryParams.pageNo = 1; | |||
this.getList(); | |||
this.$modal.msgSuccess('删除成功'); | |||
}) | |||
.catch(() => {}); | |||
}, | |||
closeDrawer() { | |||
this.getList(); | |||
}, | |||
getEnergyTypeList() { | |||
getEnergyTypeListAll().then((res) => { | |||
this.energyTypeList = res.data || []; | |||
}); | |||
}, | |||
}, | |||
}; | |||
</script> |