mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request 'projects/mesxc-zjl' (#309) from projects/mesxc-zjl into projects/mesxc-test

Browse Source 
Reviewed-on: #309
This commit is contained in:
朱菊兰 2024-04-07 12:19:50 +08:00
commit f6d866907c
18 changed files with 1978 additions and 1372 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.dev
View File

@ -18,7 +18,7 @@ VUE_APP_TITLE = MES系统
# VUE_APP_BASE_API = 'http://192.168.2.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.49:48082'
# VUE_APP_BASE_API = 'http://192.168.1.8:48082' # VUE_APP_BASE_API = 'http://192.168.1.8:48082'
# VUE_APP_BASE_API = 'http://192.168.4.173:48082' # VUE_APP_BASE_API = 'http://192.168.4.173:9001'
# VUE_APP_BASE_API = 'http://192.168.1.104:48082' # VUE_APP_BASE_API = 'http://192.168.1.104: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.1.62:48082' # VUE_APP_BASE_API = 'http://192.168.1.62:48082'

24
src/api/base/energyQuantityManual.js
View File

@ -53,4 +53,28 @@ export function energyQuantityManualExport(data) {
data: data, data: data,
responseType: 'blob' 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
})
} }

1
src/store/modules/dict.js
View File

@ -32,6 +32,7 @@ const actions = {
} }
// 处理 dictValue 层级 // 处理 dictValue 层级
dictDataMap[dictData.dictType].push({ dictDataMap[dictData.dictType].push({
id: dictData.id,
value: dictData.value, value: dictData.value,
label: dictData.label, label: dictData.label,
colorType: dictData.colorType, colorType: dictData.colorType,

4
src/views/energy/analysis/trendAnalysis/components/lineChart.vue
View File

@ -14,7 +14,7 @@ export default {
return { return {
chartDom: '', chartDom: '',
chart: '', chart: '',
chartHeight: this.tableHeight(214) - 100, chartHeight: this.tableHeight(314),
}; };
}, },
props: { props: {
@ -37,7 +37,7 @@ export default {
}, },
mounted() { mounted() {
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.chartHeight = this.tableHeight(214) - 70; this.chartHeight = this.tableHeight(314);
}); });
}, },
methods: { methods: {

209
src/views/energy/analysis/yoyAnalysis/components/lineChart.vue
View File

@ -1,102 +1,119 @@
<template> <template>
<div id="analysischartLine" style="width: 100%;height: 100%;"></div> <div
id="analysischartLine"
style="width: 100%"
:style="{ height: chartHeight + 'px' }"></div>
</template> </template>
<script> <script>
import * as echarts from 'echarts' import * as echarts from 'echarts';
import resize from '@/utils/chartMixins/resize' import resize from '@/utils/chartMixins/resize';
export default { export default {
name: "LineChart", name: 'LineChart',
mixins: [resize], mixins: [resize],
data() { data() {
return { return {
chartDom: '', chartDom: '',
chart: '', chart: '',
chartHeight: this.tableHeight(214) - 70 chartHeight: this.tableHeight(250) / 2,
} };
}, },
props: { props: {
chartData: { chartData: {
type: Array, type: Array,
required: true, required: true,
default: () => { default: () => {
return [] return [];
} },
} },
}, },
watch: { watch: {
chartData: function () { chartData: function () {
this.getChart() this.getChart();
} },
}, },
mounted() { mounted() {
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.chartHeight = this.tableHeight(214) - 70 this.chartHeight = this.tableHeight(250) / 2;
}) });
}, },
methods: { methods: {
getChart() { getChart() {
if ( if (
this.chart !== null && this.chart !== null &&
this.chart !== '' && this.chart !== '' &&
this.chart !== undefined this.chart !== undefined
) { ) {
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例 this.chart.dispose(); // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
} }
this.chartDom = document.getElementById('analysischartLine') this.chartDom = document.getElementById('analysischartLine');
this.chart = echarts.init(this.chartDom) this.chart = echarts.init(this.chartDom);
if (this.chartData.length === 0) { if (this.chartData.length === 0) {
return false return false;
} }
let xData = [] let xData = [];
let arr = this.chartData[0].type let arr = this.chartData[0].type;
let keys = Object.keys(this.chartData[0]) let keys = Object.keys(this.chartData[0]);
let yData = [] let yData = [];
for (let j = 0; j < arr.length; j++) { for (let j = 0; j < arr.length; j++) {
for (let k = 0; k < keys.length; k++) { for (let k = 0; k < keys.length; k++) {
if (keys[k].indexOf(arr[j] + '_上年同期') > -1 || keys[k].indexOf(arr[j] + '_能源消耗') > -1) { if (
let obj = { keys[k].indexOf(arr[j] + '_上年同期') > -1 ||
name: '', keys[k].indexOf(arr[j] + '_能源消耗') > -1
type: 'line', ) {
data: [] let obj = {
} name: '',
obj.name = keys[k] type: 'line',
yData.push(obj) 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]) for (let i = 0; i < this.chartData.length; i++) {
} xData.push(this.chartData[i].time);
} for (let p = 0; p < yData.length; p++) {
var option = { yData[p].data.push(this.chartData[i][yData[p].name]);
color: ['#FFDC94', '#8EF0AB', '#63BDFF', '#288AFF', '#7164FF', '#FF6860', '#FF9747', '#B0EB42', '#D680FF', '#0043D2'], }
legend: { }
data: keys, var option = {
right: '1%' color: [
}, '#FFDC94',
tooltip: { '#8EF0AB',
trigger: 'axis' '#63BDFF',
}, '#288AFF',
grid: { '#7164FF',
left: '1%', '#FF6860',
right: '1%', '#FF9747',
bottom: '3%', '#B0EB42',
containLabel: true '#D680FF',
}, '#0043D2',
xAxis: { ],
type: 'category', legend: {
data: xData data: keys,
}, right: '1%',
yAxis: { },
type: 'value' tooltip: {
}, trigger: 'axis',
series: yData },
}; 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> </script>

274
src/views/energy/analysis/yoyAnalysis/index.vue
View File

@ -1,143 +1,153 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<search-area @submit="getList" @exportD="exportData"/> <search-area
<div v-show='chartData.length'> @submit="getList"
<div class="chartTitle">同比分析图</div> @exportD="exportData" />
<div style='width: 100%;height: 400px;'> <div v-show="chartData.length">
<line-chart ref="analysisLineChart" :chartData="chartData"/> <div class="chartTitle">同比分析图</div>
</div> <div style="width: 100%">
<!-- 表格 --> <line-chart
<base-table ref="analysisLineChart"
:table-props="tableProps" :chartData="chartData" />
:table-data="list" </div>
:max-height="tableH" <!-- 表格 -->
class="yoy-out-table" <base-table
/> :table-props="tableProps"
</div> :table-data="list"
<!-- 没有数据 --> :max-height="tableH"
<div class="no-data-bg" v-show='!chartData.length'></div> class="yoy-out-table" />
</div> </div>
<!-- 没有数据 -->
<div
class="no-data-bg"
v-show="!chartData.length"></div>
</div>
</template> </template>
<script> <script>
import { getYoy } from "@/api/analysis/energyAnalysis" import { getYoy } from '@/api/analysis/energyAnalysis';
import subRate from "./components/subRate.vue" import subRate from './components/subRate.vue';
import SearchArea from "./components/searchArea" import SearchArea from './components/searchArea';
import LineChart from "./components/lineChart" import LineChart from './components/lineChart';
import FileSaver from "file-saver" import FileSaver from 'file-saver';
import * as XLSX from 'xlsx/xlsx.mjs' import * as XLSX from 'xlsx/xlsx.mjs';
export default { export default {
name: 'YoyAnalysis', name: 'YoyAnalysis',
components: { SearchArea, LineChart }, components: { SearchArea, LineChart },
data() { data() {
return { return {
chartData: [], chartData: [],
tableProps: [], tableProps: [],
list: [], list: [],
tableH: this.tableHeight(640) tableH: this.tableHeight(250) / 2,
} };
}, },
mounted() { mounted() {
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.tableH = this.tableHeight(640) this.tableH = this.tableHeight(250) / 2;
}) });
}, },
methods: { methods: {
getList(params) { getList(params) {
getYoy({ ...params }).then((res) => { getYoy({ ...params }).then((res) => {
if (res.code === 0 && res.data) { if (res.code === 0 && res.data) {
this.getTableList(res.data) this.getTableList(res.data);
} else { } else {
this.chartData = [] this.chartData = [];
this.list = [] this.list = [];
} }
}) });
}, },
getTableList(arr) { getTableList(arr) {
let data = arr.data let data = arr.data;
let nameData = arr.nameData let nameData = arr.nameData;
let tempX = [] let tempX = [];
data[0].data.map((item) => { data[0].data.map((item) => {
let obj = {} let obj = {};
obj.prop = item.dynamicName obj.prop = item.dynamicName;
obj.label = item.dynamicName obj.label = item.dynamicName;
obj.id = item.id obj.id = item.id;
obj.children = [] obj.children = [];
tempX.push(obj) tempX.push(obj);
}) });
for (let i = 0; i < nameData.length; i++) { for (let i = 0; i < nameData.length; i++) {
for (let j = 0; j < tempX.length; j++) { for (let j = 0; j < tempX.length; j++) {
if (tempX[j].id === nameData[i].parentId) { if (tempX[j].id === nameData[i].parentId) {
let obj = {} let obj = {};
obj.prop = tempX[j].prop + '_' + nameData[i].name obj.prop = tempX[j].prop + '_' + nameData[i].name;
obj.label = nameData[i].name obj.label = nameData[i].name;
if (obj.label.indexOf('同比')!= -1) { if (obj.label.indexOf('同比') != -1) {
obj.subcomponent = subRate obj.subcomponent = subRate;
} }
tempX[j].children.push(obj) tempX[j].children.push(obj);
} }
} }
} }
this.tableProps = [{prop: 'time',label: '时间'}].concat(tempX) this.tableProps = [{ prop: 'time', label: '时间' }].concat(tempX);
console.log(this.tableProps) console.log(this.tableProps);
// 数据 // 数据
this.list = [] this.list = [];
for (let k = 0; k < data.length; k++) { for (let k = 0; k < data.length; k++) {
let obj = {} let obj = {};
obj.time = data[k].time obj.time = data[k].time;
let arr1 = data[k].data let arr1 = data[k].data;
obj.type = [] obj.type = [];
for (let q = 0; q < arr1.length; q++) { for (let q = 0; q < arr1.length; q++) {
let name = arr1[q].dynamicName let name = arr1[q].dynamicName;
obj.type.push(name) obj.type.push(name);
let arr2 = arr1[q].children let arr2 = arr1[q].children;
for (let p = 0; p < arr2.length; p++) { for (let p = 0; p < arr2.length; p++) {
let prop = name + '_' + arr2[p].dynamicName let prop = name + '_' + arr2[p].dynamicName;
obj[prop] = arr2[p].dynamicValue obj[prop] = arr2[p].dynamicValue;
} }
} }
this.list.push(obj) this.list.push(obj);
} }
this.chartData = this.list this.chartData = this.list;
}, },
exportData(val) { exportData(val) {
if (this.list.length > 0) { if (this.list.length > 0) {
var wb = XLSX.utils.table_to_book(document.querySelector(".yoy-out-table")) var wb = XLSX.utils.table_to_book(
let fileName = val.name + "同比分析.xlsx" document.querySelector('.yoy-out-table')
var wbout = XLSX.write(wb, { );
bookType: "xlsx", let fileName = val.name + '同比分析.xlsx';
bookSST: true, var wbout = XLSX.write(wb, {
type: "array" bookType: 'xlsx',
}) bookSST: true,
try { type: 'array',
FileSaver.saveAs( });
new Blob([wbout], { type: "application/octet-stream" }), try {
fileName FileSaver.saveAs(
) new Blob([wbout], { type: 'application/octet-stream' }),
} catch (e) { fileName
if (typeof console !== "undefined") console.log(e, wbout); );
} } catch (e) {
return wbout if (typeof console !== 'undefined') console.log(e, wbout);
} else { }
this.$modal.msgWarning("暂无数据导出") return wbout;
} } else {
} this.$modal.msgWarning('暂无数据导出');
} }
} },
},
};
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.yoy-out-table {
margin-top: 20px;
}
.chartTitle { .chartTitle {
font-size: 16px; font-size: 16px;
color: #000; color: #000;
} }
.chartTitle::before { .chartTitle::before {
content: ''; content: '';
display: inline-block; display: inline-block;
width: 4px; width: 4px;
height: 18px; height: 18px;
background-color: #0B58FF; background-color: #0b58ff;
border-radius: 1px; border-radius: 1px;
margin-right: 8px; margin-right: 8px;
vertical-align: bottom; vertical-align: bottom;
} }
</style> </style>

285
src/views/energy/base/energyPlcConnect/components/energyPlcParamAdd.vue
View File

@ -1,132 +1,163 @@
<template> <template>
<el-form ref="form" :rules="rules" label-width="100px" :model="form"> <el-form
<el-row> ref="form"
<el-col :span="12"> :rules="rules"
<el-form-item label="能源类型" prop="typeId"> label-width="100px"
<el-select v-model="form.typeId" placeholder="请选择" style="width: 100%;" filterable> :model="form">
<el-option <el-row>
v-for="item in energyListType" <el-col :span="12">
:key="item.id" <el-form-item
:label="item.name" label="能源类型"
:value="item.id"> prop="typeId">
</el-option> <el-select
</el-select> v-model="form.typeId"
</el-form-item> placeholder="请选择"
</el-col> style="width: 100%"
<el-col :span="12"> filterable>
<el-form-item label="参数列名" prop="plcParamName"> <el-option
<el-input v-model="form.plcParamName"></el-input> v-for="item in energyListType"
</el-form-item> :key="item.id"
</el-col> :label="item.labelName"
</el-row> :value="item.id"></el-option>
<el-row> </el-select>
<el-col :span="12"> </el-form-item>
<el-form-item label="参数名称" prop="name"> </el-col>
<el-input v-model="form.name"></el-input> <el-col :span="12">
</el-form-item> <el-form-item
</el-col> label="参数列名"
<el-col :span="12"> prop="plcParamName">
<el-form-item label="单位" prop="unit"> <el-input v-model="form.plcParamName"></el-input>
<el-select v-model="form.unit" placeholder="请选择" style="width: 100%;"> </el-form-item>
<el-option </el-col>
v-for="item in getDictDatas(DICT_TYPE.ENERGY_UNIT)" </el-row>
:key="item.value" <el-row>
:label="item.label" <el-col :span="12">
:value="item.value"> <el-form-item
</el-option> label="参数名称"
</el-select> prop="name">
</el-form-item> <el-input v-model="form.name"></el-input>
</el-col> </el-form-item>
</el-row> </el-col>
<el-row> <el-col :span="12">
<el-col :span="12"> <el-form-item
<el-form-item label="是否采集" prop="collection"> label="单位"
<el-switch v-model="form.collection"></el-switch> prop="unit">
</el-form-item> <el-select
</el-col> v-model="form.unit"
<el-col :span="12"> placeholder="请选择"
<el-form-item label="描述" prop="description"> style="width: 100%">
<el-input v-model="form.description"></el-input> <el-option
</el-form-item> v-for="item in getDictDatas(DICT_TYPE.UNIT_DICT)"
</el-col> :key="item.value"
</el-row> :label="item.label"
</el-form> :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> </template>
<script> <script>
import { getEnergyPlcParam, updateEnergyPlcParam, createEnergyPlcParam } from '@/api/base/energyPlcParam' import {
import { getEnergyTypeListAll } from '@/api/base/energyType' getEnergyPlcParam,
updateEnergyPlcParam,
createEnergyPlcParam,
} from '@/api/base/energyPlcParam';
import { getEnergyTypeListAll } from '@/api/base/energyType';
export default { export default {
name: 'EnergyPlcParamAdd', name: 'EnergyPlcParamAdd',
data() { data() {
return { return {
form: { form: {
id: '', id: '',
typeId: '', typeId: '',
plcParamName: '', plcParamName: '',
name: '', name: '',
unit: '', unit: '',
description: '', description: '',
collection: true, collection: true,
connectId: '' connectId: '',
}, },
energyListType: [], energyListType: [],
isEdit: false, //是否是编辑 isEdit: false, //是否是编辑
rules: { rules: {
typeId: [{ required: true, message: '能源类型不能为空', trigger: 'change' }], typeId: [
plcParamName: [{ required: true, message: '参数列名不能为空', trigger: 'blur' }], { required: true, message: '能源类型不能为空', trigger: 'change' },
name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }] ],
} plcParamName: [
} { required: true, message: '参数列名不能为空', trigger: 'blur' },
}, ],
methods: { name: [
init(param) { { required: true, message: '参数名称不能为空', trigger: 'blur' },
this.form.connectId = param.connectId ],
getEnergyTypeListAll().then((res) => { },
this.energyListType = res.data || [] };
}) },
if (param.id) { methods: {
this.isEdit = true init(param) {
this.form.id = param.id this.form.connectId = param.connectId;
getEnergyPlcParam(this.form.id).then((res) => { getEnergyTypeListAll().then((res) => {
if (res.code === 0) { this.energyListType = res.data || [];
this.form = res.data });
this.form.collection = this.form.collection === 0 ? false : true if (param.id) {
} this.isEdit = true;
}) this.form.id = param.id;
} else { getEnergyPlcParam(this.form.id).then((res) => {
this.isEdit = false if (res.code === 0) {
this.form.id = '' this.form = res.data;
} this.form.collection = this.form.collection === 0 ? false : true;
}, }
submitForm() { });
this.$refs['form'].validate((valid) => { } else {
if (valid) { this.isEdit = false;
this.form.collection = this.form.collection === false ? 0 : 1 this.form.id = '';
if (this.isEdit) { }
// 编辑 },
updateEnergyPlcParam({...this.form}).then((res) => { submitForm() {
if (res.code === 0) { this.$refs['form'].validate((valid) => {
this.$modal.msgSuccess("操作成功"); if (valid) {
this.$emit('successSubmit') this.form.collection = this.form.collection === false ? 0 : 1;
} if (this.isEdit) {
}) // 编辑
} else { updateEnergyPlcParam({ ...this.form }).then((res) => {
createEnergyPlcParam({...this.form}).then((res) => { if (res.code === 0) {
if (res.code === 0) { this.$modal.msgSuccess('操作成功');
this.$modal.msgSuccess("操作成功"); this.$emit('successSubmit');
this.$emit('successSubmit') }
} });
}) } else {
} createEnergyPlcParam({ ...this.form }).then((res) => {
} else { if (res.code === 0) {
return false this.$modal.msgSuccess('操作成功');
} this.$emit('successSubmit');
}) }
}, });
formClear() { }
this.$refs.form.resetFields() } else {
this.isEdit = false return false;
} }
} });
} },
formClear() {
this.$refs.form.resetFields();
this.isEdit = false;
},
},
};
</script> </script>

139
src/views/energy/base/energyQuantityManual/components/AddTable.vue Normal file
View File

@ -0,0 +1,139 @@
<template>
<div class="energyQuantityManualAddTable">
<el-table
:data="renderData"
border
style="width: 100%"
:header-cell-style="{
background: '#F2F4F9',
color: '#606266',
}">
<el-table-column
prop="tableName"
label="表名*">
<template slot-scope="scope">
<div class="tableInner">
<el-select
v-model="scope.row.tableName"
placeholder="请选择"
style="width: 100%"
@change="changeSelect(scope.row, 'tableName')">
<el-option
v-for="item in tableNameList"
:key="item.id"
:label="item.label"
:value="item.id"></el-option>
</el-select>
</div>
</template>
</el-table-column>
<el-table-column
prop="readingQuantity"
label="抄表数*">
<template slot-scope="scope">
<div class="tableInner">
<el-input-number
v-model="scope.row.readingQuantity"
:min="0"
:max="999999999"
style="width: 100%"
:controls="false"
@change="changeInput(scope.row, 'readingQuantity')"
:precision="2"></el-input-number>
</div>
</template>
</el-table-column>
</el-table>
<el-button
class="addButton"
icon="el-icon-plus"
@click="emitButtonClick">
新增
</el-button>
</div>
</template>
<script>
export default {
name: 'AddTable',
props: {
tableData: {
type: Array,
required: true,
default: () => {
return [];
},
},
tableNameList: {
type: Array,
required: true,
default: () => {
return [];
},
},
},
data() {
return {};
},
computed: {
renderData() {
return this.tableData.map((item, index) => {
return {
...item,
_pageIndex: index + 1,
};
});
},
},
methods: {
emitButtonClick() {
this.$emit('emitButtonClick');
},
changeInput(val1, val2) {
val1.prop = val2;
this.$emit('emitFun', val1);
},
changeSelect(val1, val2) {
val1.prop = val2;
this.$emit('emitFun', val1);
},
},
};
</script>
<style lang='scss' scoped>
.energyQuantityManualAddTable {
.el-table .el-table__cell {
padding: 0;
height: 35px;
}
.addButton {
width: 100%;
height: 35px;
border-top: none;
color: #0b58ff;
border-color: #ebeef5;
border-radius: 0;
}
.addButton:hover {
color: #0b58ff;
border-color: #ebeef5;
background-color: #fff;
}
.addButton:focus {
border-color: #ebeef5;
background-color: #fff;
}
.tableInner .el-input__inner {
border: none;
padding: 0;
height: 33px;
}
}
</style>
<style lang='scss'>
.energyQuantityManualAddTable {
.el-table .el-table__cell {
padding: 0;
height: 35px;
}
}
</style>

383
src/views/energy/base/energyQuantityManual/components/energyQuantityManualAdd.vue
View File

@ -1,167 +1,228 @@
<template> <template>
<el-form ref="energyQuantityManualForm" :rules="rules" label-width="90px" :model="form"> <el-form
<el-row :gutter="20"> ref="energyQuantityManualForm"
<el-col :span='12'> :rules="rules"
<el-form-item label="能源类型" prop="energyTypeId"> label-width="90px"
<el-select v-model="form.energyTypeId" placeholder="请选择" style="width: 100%;" filterable> :model="form">
<el-option v-for="item in this.energyTypeList" :key="item.id" :label="item.name" :value="item.id"> <el-row :gutter="20">
</el-option> <el-col :span="12">
</el-select> <el-form-item
</el-form-item> label="能源类型"
</el-col> prop="energyTypeId">
<el-col :span='12'> <el-select
<el-form-item label="抄表日期" prop="recordTime"> v-model="form.energyTypeId"
<el-date-picker v-model="form.recordTime" type="date" format="yyyy-MM-dd" value-format="timestamp" placeholder="请选择"
placeholder="选择日期" style="width: 100%;"> style="width: 100%"
</el-date-picker> @change="selEnergyType"
</el-form-item> filterable>
</el-col> <el-option
</el-row> v-for="item in this.energyTypeList"
<el-row :gutter="20"> :key="item.id"
<el-col :span='24'> :label="item.labelName"
<base-table border :table-props="tableProps" :table-data="tableData" :add-button-show="addButtonShow" :value="item.id"></el-option>
@emitFun="inputChange" @emitButtonClick="emitButtonClick" /> </el-select>
</el-col> </el-form-item>
</el-row> </el-col>
</el-form> <el-col :span="12">
<el-form-item
label="抄表日期"
prop="recordTime">
<el-date-picker
v-model="form.recordTime"
type="date"
format="yyyy-MM-dd"
value-format="timestamp"
placeholder="选择日期"
style="width: 100%"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<add-table
:table-props="tableProps"
:table-data="tableData"
:table-name-list="tableNameList"
@emitFun="inputChange"
@emitButtonClick="emitButtonClick" />
<!-- <base-table
border
:table-props="tableProps"
:table-data="tableData"
:add-button-show="addButtonShow"
@emitFun="inputChange"
@emitButtonClick="emitButtonClick" /> -->
</el-col>
</el-row>
</el-form>
</template> </template>
<script> <script>
import { energyQuantityManualCreate, energyQuantityManualUpdate, energyQuantityManualGet } from '@/api/base/energyQuantityManual' import {
import moment from 'moment' energyQuantityManualCreate,
import InputArea from './InputArea' energyQuantityManualUpdate,
import SelectArea from './SelectArea' energyQuantityManualGet,
} from '@/api/base/energyQuantityManual';
import moment from 'moment';
import AddTable from './AddTable';
import InputArea from './InputArea';
import SelectArea from './SelectArea';
import { energyTableGet } from '@/api/base/energyQuantityManual';
const tableProps = [ const tableProps = [
{ {
prop: 'tableName', prop: 'tableName',
label: '表名*', label: '表名*',
subcomponent: SelectArea subcomponent: SelectArea,
}, },
{ {
prop: 'readingQuantity', prop: 'readingQuantity',
label: '抄表数*', label: '抄表数*',
subcomponent: InputArea subcomponent: InputArea,
} },
] ];
export default { export default {
name: 'EnergyQuantityManualAdd', name: 'EnergyQuantityManualAdd',
props: { props: {
energyTypeList: { energyTypeList: {
type: Array, type: Array,
required: true, required: true,
default: () => { default: () => {
return [] return [];
} },
} },
}, },
data() { data() {
return { return {
tableProps, tableProps,
tableData: [], tableData: [],
addButtonShow: '新增', tableNameList: [], //表名list
form: { addButtonShow: '新增',
id: '', form: {
energyTypeId: '', id: '',
unit: '', energyTypeId: '',
recordTime: '' unit: '',
}, recordTime: '',
rules: { },
energyTypeId: [{ required: true, message: '能源类型不能为空', trigger: 'change' }], rules: {
recordTime: [{ required: true, message: '抄表日期不能为空', trigger: 'change' }] energyTypeId: [
}, { required: true, message: '能源类型不能为空', trigger: 'change' },
isEdit: false ],
} recordTime: [
}, { required: true, message: '抄表日期不能为空', trigger: 'change' },
methods: { ],
init(params) { },
this.form.recordTime = moment().valueOf() isEdit: false,
if (params.type === 'add') { };
this.isEdit = false },
} else if (params.type === 'meterReading') { components: { AddTable },
this.isEdit = false methods: {
this.form.energyTypeId = params.energyTypeId init(params) {
let obj = {} this.form.recordTime = moment().valueOf();
obj.tableName = params.tableName + '' if (params.type === 'add') {
obj.readingQuantity = 0 this.isEdit = false;
this.tableData.push(obj) } else if (params.type === 'meterReading') {
} else { this.isEdit = false;
this.isEdit = true this.form.energyTypeId = params.energyTypeId;
this.form.id = params.id let obj = {};
this.addButtonShow = '' obj.tableName = params.tableName + '';
energyQuantityManualGet({ id: this.form.id }).then(res => { obj.readingQuantity = 0;
if (res.code === 0) { this.tableData.push(obj);
this.form.energyTypeId = res.data.energyTypeId } else {
this.form.recordTime = res.data.recordTime ? res.data.recordTime : null this.isEdit = true;
let obj = {} this.form.id = params.id;
obj.tableName = res.data.tableName ? res.data.tableName + '' : '' this.addButtonShow = '';
obj.readingQuantity = res.data.readingQuantity energyQuantityManualGet({ id: this.form.id }).then((res) => {
this.tableData.push(obj) if (res.code === 0) {
} this.form.energyTypeId = res.data.energyTypeId;
}) this.form.recordTime = res.data.recordTime
} ? res.data.recordTime
}, : null;
inputChange(val) { let obj = {};
this.tableData[val._pageIndex - 1][val.prop] = val[val.prop] obj.tableName = res.data.tableName ? res.data.tableName + '' : '';
}, obj.readingQuantity = res.data.readingQuantity;
emitButtonClick() { this.tableData.push(obj);
let obj = {} }
obj.tableName = '' });
obj.readingQuantity = 0 }
this.tableData.push(obj) },
}, inputChange(val) {
submitForm() { this.tableData[val._pageIndex - 1][val.prop] = val[val.prop];
this.$refs['energyQuantityManualForm'].validate((valid) => { console.log(this.tableData);
if (valid) { },
// 校验表格 emitButtonClick() {
if (this.tableData.length === 0) { if (!this.form.energyTypeId) {
this.$modal.msgError("抄表数据不能为空"); this.$modal.msgWarning('请先选择能源类型');
return false return false;
} else { }
for (let item of this.tableData) { let obj = {};
console.log(item) obj.tableName = '';
if (!item.tableName || (!item.readingQuantity && item.readingQuantity !== 0)) { obj.readingQuantity = 0;
this.$modal.msgError("抄表数据有空值，请检查"); this.tableData.push(obj);
return false },
} selEnergyType(id) {
} // 切换能源类型
} this.tableData = [];
if (this.isEdit) { this.tableNameList = [];
// 编辑 energyTableGet({ energyTypeId: id }).then((res) => {
energyQuantityManualUpdate({ this.tableNameList = res.data.tableObjs || [];
id: this.form.id, });
energyTypeId: this.form.energyTypeId, },
recordTime: this.form.recordTime, submitForm() {
tableName: this.tableData[0].tableName, this.$refs['energyQuantityManualForm'].validate((valid) => {
readingQuantity: this.tableData[0].readingQuantity if (valid) {
}).then((res) => { // 校验表格
if (res.code === 0) { if (this.tableData.length === 0) {
this.$modal.msgSuccess("操作成功"); this.$modal.msgError('抄表数据不能为空');
this.$emit('successSubmit') return false;
} } else {
}) for (let item of this.tableData) {
} else { console.log(item);
energyQuantityManualCreate({ if (
energyTypeId: this.form.energyTypeId, !item.tableName ||
recordTime: this.form.recordTime, (!item.readingQuantity && item.readingQuantity !== 0)
data: this.tableData ) {
}).then((res) => { this.$modal.msgError('抄表数据有空值，请检查');
if (res.code === 0) { return false;
this.$modal.msgSuccess("操作成功"); }
this.$emit('successSubmit') }
} }
}) if (this.isEdit) {
} // 编辑
} else { energyQuantityManualUpdate({
return false id: this.form.id,
} energyTypeId: this.form.energyTypeId,
}) recordTime: this.form.recordTime,
}, tableName: this.tableData[0].tableName,
formClear() { readingQuantity: this.tableData[0].readingQuantity,
this.$refs.energyQuantityManualForm.resetFields() }).then((res) => {
this.form.unit = '' if (res.code === 0) {
this.isEdit = false this.$modal.msgSuccess('操作成功');
this.addButtonShow = '新增' this.$emit('successSubmit');
this.tableData = [] }
} });
} } else {
} energyQuantityManualCreate({
energyTypeId: this.form.energyTypeId,
recordTime: this.form.recordTime,
data: this.tableData,
}).then((res) => {
if (res.code === 0) {
this.$modal.msgSuccess('操作成功');
this.$emit('successSubmit');
}
});
}
} else {
return false;
}
});
},
formClear() {
this.$refs.energyQuantityManualForm.resetFields();
this.form.unit = '';
this.isEdit = false;
this.addButtonShow = '新增';
this.tableData = [];
},
},
};
</script> </script>

576
src/views/energy/base/energyQuantityManual/index.vue
View File

@ -1,271 +1,321 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<!-- 搜索工作栏 -->
<!-- 搜索工作栏 --> <search-bar
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> :formConfigs="formConfig"
<!-- 列表 --> ref="searchBarForm"
<base-table :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-props="tableProps" :table-data="list" @headBtnClick="buttonClick" />
:max-height="tableH" @selection-change="selectChange"> <!-- 列表 -->
<method-btn v-if="tableBtn.length" slot="handleBtn" :width="120" label="操作" :method-list="tableBtn" <base-table
@clickBtn="handleClick" /> :page="queryParams.pageNo"
</base-table> :limit="queryParams.pageSize"
<pagination :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" :total="total" :table-props="tableProps"
@pagination="getList" /> :table-data="list"
<!-- 新增 --> :max-height="tableH"
<base-dialog :dialogTitle="addOrEditTitle" :dialogVisible="centervisible" @cancel="handleCancel" @selection-change="selectChange">
@confirm="handleConfirm" :before-close="handleCancel"> <method-btn
<energy-quantity-manual-add ref="energyQuantityManualAdd" :energyTypeList="energyTypeList" v-if="tableBtn.length"
@successSubmit="successSubmit" /> slot="handleBtn"
</base-dialog> :width="120"
</div> 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> </template>
<script> <script>
import { energyQuantityManualPage, energyQuantityManualDelete, energyQuantityManualExport } from "@/api/base/energyQuantityManual" import {
import { getEnergyTypeListAll } from "@/api/base/energyType" energyQuantityManualPage,
import { publicFormatter } from '@/utils/dict' energyQuantityManualDelete,
import { parseTime, parseTimeTable } from '@/utils/ruoyi' energyQuantityManualExport,
// import FileSaver from "file-saver" } from '@/api/base/energyQuantityManual';
// import * as XLSX from 'xlsx/xlsx.mjs' import { getEnergyTypeListAll } from '@/api/base/energyType';
import EnergyQuantityManualAdd from './components/energyQuantityManualAdd' import { publicFormatter } from '@/utils/dict';
import moment from 'moment' import { parseTimeTable } from '@/utils/ruoyi';
import EnergyQuantityManualAdd from './components/energyQuantityManualAdd';
import moment from 'moment';
const tableProps = [ const tableProps = [
{ {
prop: 'energyType', prop: 'energyType',
label: '能源类型', label: '能源类型',
minWidth: 110, minWidth: 110,
showOverflowtooltip: true filter: publicFormatter('energy_type'),
}, showOverflowtooltip: true,
{ },
prop: 'unit', {
label: '单位', prop: 'unit',
filter: publicFormatter('energy_unit'), label: '单位',
minWidth: 110 filter: publicFormatter('energy_unit'),
}, minWidth: 110,
{ },
prop: 'tableName', {
label: '能源表名', prop: 'tableName',
filter: publicFormatter('table_name'), label: '能源表名',
minWidth: 110, filter: publicFormatter('table_name'),
showOverflowtooltip: true minWidth: 110,
}, showOverflowtooltip: true,
{ },
prop: 'recordTime', {
label: '抄表日期', prop: 'recordTime',
filter: parseTimeTable('{y}-{m}-{d}'), label: '抄表日期',
minWidth: 110 filter: parseTimeTable('{y}-{m}-{d}'),
}, minWidth: 110,
{ },
prop: 'readingQuantity', {
label: '抄表值' prop: 'readingQuantity',
}, label: '抄表值',
{ },
prop: 'useQty', {
label: '差值' prop: 'useQty',
} label: '差值',
] },
];
export default { export default {
name: "EnergyQuantityManual", name: 'EnergyQuantityManual',
data() { data() {
return { return {
formConfig: [ formConfig: [
{ {
type: 'select', type: 'select',
label: '能源类型', label: '能源类型',
selectOptions: [], labelField: 'labelName',
param: 'energyTypeId', selectOptions: [],
filterable: true param: 'energyTypeId',
}, filterable: true,
{ },
type: 'datePicker', {
label: '抄表日期', type: 'datePicker',
dateType: 'daterange', label: '抄表日期',
format: 'yyyy-MM-dd', dateType: 'daterange',
valueFormat: "timestamp", format: 'yyyy-MM-dd',
rangeSeparator: '-', valueFormat: 'timestamp',
startPlaceholder: '开始时间', rangeSeparator: '-',
endPlaceholder: '结束时间', startPlaceholder: '开始时间',
param: 'timeVal', endPlaceholder: '结束时间',
defaultSelect: [] param: 'timeVal',
}, defaultSelect: [],
{ },
type: 'button', {
btnName: '查询', type: 'button',
name: 'search', btnName: '查询',
color: 'primary' name: 'search',
}, color: 'primary',
{ },
type: 'separate' {
}, type: 'separate',
{ },
type: this.$auth.hasPermi('base:energy-quantity-manual:export') ? 'button' : '', {
btnName: '导出', type: this.$auth.hasPermi('base:energy-quantity-manual:export')
name: 'export', ? 'button'
color: 'primary', : '',
plain: true btnName: '导出',
}, name: 'export',
{ color: 'primary',
type: this.$auth.hasPermi('base:energy-quantity-manual:create') ? 'button' : '', plain: true,
btnName: '新增', },
name: 'add', {
color: 'success', type: this.$auth.hasPermi('base:energy-quantity-manual:create')
plain: true ? 'button'
} : '',
], btnName: '新增',
tableProps, name: 'add',
tableH: this.tableHeight(260), color: 'success',
// 总条数 plain: true,
total: 0, },
// 班次基础信息列表 ],
list: [], tableProps,
tableBtn: [ tableH: this.tableHeight(260),
this.$auth.hasPermi('base:energy-quantity-manual:create') // 总条数
? { total: 0,
type: 'meterReading', // 班次基础信息列表
btnName: '抄表' list: [],
} tableBtn: [
: undefined, this.$auth.hasPermi('base:energy-quantity-manual:create')
this.$auth.hasPermi('base:energy-quantity-manual:update') ? {
? { type: 'meterReading',
type: 'edit', btnName: '抄表',
btnName: '编辑' }
} : undefined,
: undefined, this.$auth.hasPermi('base:energy-quantity-manual:update')
this.$auth.hasPermi('base:energy-quantity-manual:delete') ? {
? { type: 'edit',
type: 'delete', btnName: '编辑',
btnName: '删除' }
} : undefined,
: undefined this.$auth.hasPermi('base:energy-quantity-manual:delete')
].filter((v) => v), ? {
// 查询参数 type: 'delete',
queryParams: { btnName: '删除',
pageNo: 1, }
pageSize: 20, : undefined,
energyTypeId: '', ].filter((v) => v),
recordTime: [] // 查询参数
}, queryParams: {
energyTypeList: [], pageNo: 1,
exportList: [], pageSize: 20,
addOrEditTitle: '', energyTypeId: '',
centervisible: false, recordTime: [],
},
}; energyTypeList: [],
}, exportList: [],
components: { EnergyQuantityManualAdd }, addOrEditTitle: '',
created() { centervisible: false,
window.addEventListener('resize', () => { };
this.tableH = this.tableHeight(260) },
}) components: { EnergyQuantityManualAdd },
let end = moment(moment().format('YYYY-MM-DD 23:59:59')).valueOf() created() {
let start = moment(moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')).valueOf() window.addEventListener('resize', () => {
this.formConfig[1].defaultSelect = [start, end] this.tableH = this.tableHeight(260);
this.queryParams.recordTime[0] = start });
this.queryParams.recordTime[1] = end let end = moment(moment().format('YYYY-MM-DD 23:59:59')).valueOf();
this.getList(); let start = moment(
this.getTypeList() moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')
}, ).valueOf();
methods: { this.formConfig[1].defaultSelect = [start, end];
buttonClick(val) { this.queryParams.recordTime[0] = start;
this.queryParams.pageNo = 1; this.queryParams.recordTime[1] = end;
this.queryParams.energyTypeId = val.energyTypeId this.getList();
this.queryParams.recordTime[0] = val.timeVal ? moment(moment(val.timeVal[0]).format('YYYY-MM-DD 00:00:00')).valueOf() : null this.getTypeList();
this.queryParams.recordTime[1] = val.timeVal ? moment(moment(val.timeVal[1]).format('YYYY-MM-DD 23:59:59')).valueOf() : null },
switch (val.btnName) { methods: {
case 'search': buttonClick(val) {
this.getList() this.queryParams.pageNo = 1;
break this.queryParams.energyTypeId = val.energyTypeId;
case 'add': this.queryParams.recordTime[0] = val.timeVal
this.addOrEditTitle = '新增' ? moment(moment(val.timeVal[0]).format('YYYY-MM-DD 00:00:00')).valueOf()
this.centervisible = true : null;
let params = {} this.queryParams.recordTime[1] = val.timeVal
params.type = 'add' ? moment(moment(val.timeVal[1]).format('YYYY-MM-DD 23:59:59')).valueOf()
this.$nextTick(() => { : null;
this.$refs.energyQuantityManualAdd.init(params) switch (val.btnName) {
}) case 'search':
break this.getList();
default: break;
this.$modal.confirm('是否确认导出').then(() => { case 'add':
return energyQuantityManualExport({ energyTypeId: this.queryParams.energyTypeId, recordTime: this.queryParams.recordTime }); this.addOrEditTitle = '新增';
}).then(response => { this.centervisible = true;
this.$download.excel(response, '能源报表.xls'); let params = {};
}).catch(() => { }) params.type = 'add';
} this.$nextTick(() => {
}, this.$refs.energyQuantityManualAdd.init(params);
/** 查询列表 */ });
getList() { break;
energyQuantityManualPage(this.queryParams).then(response => { default:
let arr = response.data.list || [] this.$modal
arr && arr.map(item => { .confirm('是否确认导出')
item.amount = item.amount ? (!isNaN(parseFloat(item.amount)) && isFinite(item.amount) ? item.amount.toFixed(2) : '') : '' .then(() => {
}) return energyQuantityManualExport({
this.list = arr energyTypeId: this.queryParams.energyTypeId,
this.total = response.data.total; recordTime: this.queryParams.recordTime,
this.exportList = [] });
}); })
}, .then((response) => {
getTypeList() { this.$download.excel(response, '能源报表.xls');
getEnergyTypeListAll().then((res) => { })
this.formConfig[0].selectOptions = res.data || [] .catch(() => {});
this.energyTypeList = res.data || [] }
}) },
}, /** 查询列表 */
selectChange(val) { getList() {
console.log(val) energyQuantityManualPage(this.queryParams).then((response) => {
this.exportList = val let arr = response.data.list || [];
}, arr &&
handleClick(val) { arr.map((item) => {
console.log(val) item.amount = item.amount
switch (val.type) { ? !isNaN(parseFloat(item.amount)) && isFinite(item.amount)
case 'edit': ? item.amount.toFixed(2)
this.addOrEditTitle = '编辑' : ''
this.centervisible = true : '';
let paramA = {} });
paramA.type = 'edit' this.list = arr;
paramA.id = val.data.id this.total = response.data.total;
this.$nextTick(() => { this.exportList = [];
this.$refs.energyQuantityManualAdd.init(paramA) });
}) },
break getTypeList() {
case 'meterReading': getEnergyTypeListAll().then((res) => {
this.addOrEditTitle = '新增' this.formConfig[0].selectOptions = res.data || [];
this.centervisible = true this.energyTypeList = res.data || [];
let paramB = {} });
paramB.type = 'meterReading' },
paramB.energyTypeId = val.data.energyTypeId selectChange(val) {
paramB.tableName = val.data.tableName console.log(val);
this.$nextTick(() => { this.exportList = val;
this.$refs.energyQuantityManualAdd.init(paramB) },
}) handleClick(val) {
break console.log(val);
default: switch (val.type) {
this.handleDelete(val.data) case 'edit':
} this.addOrEditTitle = '编辑';
}, this.centervisible = true;
// 新增 let paramA = {};
handleCancel() { paramA.type = 'edit';
this.$refs.energyQuantityManualAdd.formClear() paramA.id = val.data.id;
this.centervisible = false this.$nextTick(() => {
this.addOrEditTitle = '' this.$refs.energyQuantityManualAdd.init(paramA);
}, });
handleConfirm() { break;
this.$refs.energyQuantityManualAdd.submitForm() case 'meterReading':
}, this.addOrEditTitle = '新增';
successSubmit() { this.centervisible = true;
this.handleCancel() let paramB = {};
this.getList() paramB.type = 'meterReading';
}, paramB.energyTypeId = val.data.energyTypeId;
/** 删除按钮操作 */ paramB.tableName = val.data.tableName;
handleDelete(row) { this.$nextTick(() => {
console.log(row.id) this.$refs.energyQuantityManualAdd.init(paramB);
this.$modal.confirm('是否确认删除能源类型为"' + row.energyType + '"的数据项?').then(function () { });
return energyQuantityManualDelete({ id: row.id }); break;
}).then(() => { default:
this.queryParams.pageNo = 1; this.handleDelete(val.data);
this.getList(); }
this.$modal.msgSuccess("删除成功"); },
}).catch(() => { }); // 新增
} 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> </script>

76
src/views/energy/base/tableNameConfig/components/tableNameConfigUpdate.vue Normal file
View File

@ -0,0 +1,76 @@
<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.tableObjs &&
res.data.tableObjs.map((item) => {
return item.id;
});
});
},
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>

106
src/views/energy/base/tableNameConfig/index.vue Normal file
View File

@ -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>

42
src/views/energy/monitoring/energyLimit/components/energyLimitAdd.vue
View File

@ -33,11 +33,28 @@
v-model="objIds" v-model="objIds"
:options="objList" :options="objList"
:props="{ checkStrictly: true, value: 'id', label: 'name' }" :props="{ checkStrictly: true, value: 'id', label: 'name' }"
popper-class="cascaderParent"
@change="selectObj" @change="selectObj"
clearable></el-cascader> clearable></el-cascader>
</el-form-item> </el-form-item>
</el-col> </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 <el-col
:span="12" :span="12"
v-if="form.method == 2"> v-if="form.method == 2">
@ -56,24 +73,6 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </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 <el-col
:span="12" :span="12"
v-if="form.method == 1"> v-if="form.method == 1">
@ -353,8 +352,3 @@ export default {
}, },
}; };
</script> </script>
<style>
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
display: none;
}
</style>

10
src/views/energy/monitoring/energyLimit/index.vue
View File

@ -48,7 +48,7 @@ import {
deleteEnergyLimit, deleteEnergyLimit,
} from '@/api/monitoring/energyLimit'; } from '@/api/monitoring/energyLimit';
import { getEnergyTypeListAll } from '@/api/base/energyType'; import { getEnergyTypeListAll } from '@/api/base/energyType';
import { getTree } from '@/api/base/factory'; import { getTree } from '@/api/analysis/energyAnalysis';
import { publicFormatter } from '@/utils/dict'; import { publicFormatter } from '@/utils/dict';
import EnergyLimitAdd from './components/energyLimitAdd'; import EnergyLimitAdd from './components/energyLimitAdd';
const tableProps = [ const tableProps = [
@ -60,20 +60,27 @@ const tableProps = [
{ {
prop: 'objName', prop: 'objName',
label: '监控对象', label: '监控对象',
minWidth: 100,
showOverflowtooltip: true,
}, },
{ {
prop: 'objCode', prop: 'objCode',
label: '对象编码', label: '对象编码',
minWidth: 140,
showOverflowtooltip: true,
}, },
{ {
prop: 'tableName', prop: 'tableName',
label: '能源表名', label: '能源表名',
filter: publicFormatter('table_name'), filter: publicFormatter('table_name'),
minWidth: 120,
showOverflowtooltip: true,
}, },
{ {
prop: 'energyType', prop: 'energyType',
label: '能源类型', label: '能源类型',
filter: publicFormatter('energy_type'), filter: publicFormatter('energy_type'),
showOverflowtooltip: true,
}, },
{ {
prop: 'type', prop: 'type',
@ -104,6 +111,7 @@ export default {
type: 'select', type: 'select',
label: '能源类型', label: '能源类型',
selectOptions: [], selectOptions: [],
labelField: 'labelName',
param: 'energyTypeId', param: 'energyTypeId',
}, },
{ {

481
src/views/energy/monitoring/energyOverlimitLog/index.vue
View File

@ -1,248 +1,271 @@
<template> <template>
<div class="app-container energyOverlimitLog"> <div class="app-container energyOverlimitLog">
<!-- 搜索工作栏 -->
<!-- 搜索工作栏 --> <search-bar
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> :formConfigs="formConfig"
<el-tabs v-model="activeName" @tab-click="toggleTab"> ref="searchBarForm"
<el-tab-pane label="自动抄表" name="auto"></el-tab-pane> @headBtnClick="buttonClick" />
<el-tab-pane label="手动抄表" name="manual"></el-tab-pane> <el-tabs
</el-tabs> v-model="activeName"
<!-- 列表 --> @tab-click="toggleTab">
<div v-if="activeName === 'auto'"> <el-tab-pane
<base-table :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-props="tableProps" :table-data="list" label="自动抄表"
:max-height="tableH" /> name="auto"></el-tab-pane>
</div> <el-tab-pane
<div v-if="activeName === 'manual'"> label="手动抄表"
<base-table :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-props="tableProps2" name="manual"></el-tab-pane>
:table-data="list2" :max-height="tableH" /> </el-tabs>
</div> <!-- 列表 -->
<pagination :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" :total="total" <div v-if="activeName === 'auto'">
@pagination="getList" /> <base-table
</div> :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> </template>
<script> <script>
import { getEnergyOverlimitLogPage } from "@/api/monitoring/energyOverlimitLog"; import { getEnergyOverlimitLogPage } from '@/api/monitoring/energyOverlimitLog';
import { getEnergyTypeListAll } from "@/api/base/energyType"; import { getEnergyTypeListAll } from '@/api/base/energyType';
import { publicFormatter } from '@/utils/dict' import { publicFormatter } from '@/utils/dict';
import { parseTime } from '@/utils/ruoyi' import { parseTime } from '@/utils/ruoyi';
const tableProps = [ const tableProps = [
{ {
prop: 'objName', prop: 'objName',
label: '监控对象' label: '监控对象',
}, },
{ {
prop: 'objCode', prop: 'objCode',
label: '对象编码' label: '对象编码',
}, },
{ {
prop: 'energyType', prop: 'energyType',
label: '能源类型' label: '能源类型',
}, filter: publicFormatter('energy_type'),
{ },
prop: 'type', {
label: '监控模式' prop: 'type',
}, label: '监控模式',
{ },
prop: 'paramName', {
label: '监控参数' prop: 'paramName',
}, label: '监控参数',
{ },
prop: 'limitType', {
label: '指标类型', prop: 'limitType',
filter: publicFormatter('monitor_index_type') label: '指标类型',
}, filter: publicFormatter('monitor_index_type'),
{ },
prop: 'realityValue', {
label: '实际值' prop: 'realityValue',
}, label: '实际值',
{ },
prop: 'limitValue', {
label: '阈值' prop: 'limitValue',
}, label: '阈值',
{ },
prop: 'overValue', {
label: '超出值' prop: 'overValue',
}, label: '超出值',
{ },
prop: 'time', {
label: '提醒时间', prop: 'time',
filter: parseTime, label: '提醒时间',
minWidth: 160 filter: parseTime,
} minWidth: 160,
] },
];
const tableProps2 = [ const tableProps2 = [
{ {
prop: 'energyType', prop: 'energyType',
label: '能源类型' label: '能源类型',
}, filter: publicFormatter('energy_type'),
{ },
prop: 'limitType', {
label: '指标类型', prop: 'limitType',
filter: publicFormatter('monitor_index_type') label: '指标类型',
}, filter: publicFormatter('monitor_index_type'),
{ },
prop: 'realityValue', {
label: '实际值' prop: 'realityValue',
}, label: '实际值',
{ },
prop: 'limitValue', {
label: '阈值' prop: 'limitValue',
}, label: '阈值',
{ },
prop: 'overValue', {
label: '超出值' prop: 'overValue',
}, label: '超出值',
{ },
prop: 'time', {
label: '提醒时间', prop: 'time',
filter: parseTime, label: '提醒时间',
minWidth: 160 filter: parseTime,
} minWidth: 160,
] },
];
export default { export default {
name: "EnergyOverlimitLog", name: 'EnergyOverlimitLog',
data() { data() {
return { return {
formConfig: [ formConfig: [
{ {
type: 'select', type: 'select',
label: '能源类型', label: '能源类型',
selectOptions: [], labelField: 'labelName',
param: 'energyTypeId' selectOptions: [],
}, param: 'energyTypeId',
{ },
type: 'select', {
label: '指标类型', type: 'select',
selectOptions: this.getDictDatas(this.DICT_TYPE.MONITOR_INDEX_TYPE), label: '指标类型',
labelField: 'label', selectOptions: this.getDictDatas(this.DICT_TYPE.MONITOR_INDEX_TYPE),
valueField: 'value', labelField: 'label',
param: 'indexType' valueField: 'value',
}, param: 'indexType',
{ },
type: 'button', {
btnName: '查询', type: 'button',
name: 'search', btnName: '查询',
color: 'primary' name: 'search',
} color: 'primary',
], },
activeName: 'auto', ],
tableProps, activeName: 'auto',
tableProps2, tableProps,
tableH: this.tableHeight(260), tableProps2,
total: 0, tableH: this.tableHeight(260),
list: [], total: 0,
list2: [], list: [],
// 查询参数 list2: [],
queryParams: { // 查询参数
pageNo: 1, queryParams: {
pageSize: 20, pageNo: 1,
energyTypeId: '', pageSize: 20,
indexType: '', energyTypeId: '',
method: '1' indexType: '',
}, method: '1',
typeList: [ },
{ id: 1, name: '合并' }, typeList: [
{ id: 2, name: '详细' } { id: 1, name: '合并' },
] { id: 2, name: '详细' },
}; ],
}, };
created() { },
window.addEventListener('resize', () => { created() {
this.tableH = this.tableHeight(260) window.addEventListener('resize', () => {
}) this.tableH = this.tableHeight(260);
this.getList(); });
this.getTypeList() this.getList();
}, this.getTypeList();
methods: { },
buttonClick(val) { methods: {
this.queryParams.pageNo = 1; buttonClick(val) {
this.queryParams.energyTypeId = val.energyTypeId this.queryParams.pageNo = 1;
this.queryParams.indexType = val.indexType this.queryParams.energyTypeId = val.energyTypeId;
this.getList() this.queryParams.indexType = val.indexType;
}, this.getList();
/** 查询列表 */ },
getList() { /** 查询列表 */
getEnergyOverlimitLogPage(this.queryParams).then(response => { getList() {
let arr = response.data.list || []; getEnergyOverlimitLogPage(this.queryParams).then((response) => {
arr && arr.map((item) => { let arr = response.data.list || [];
this.typeList.map((i) => { arr &&
if (item.type === i.id) { arr.map((item) => {
item.type = i.name 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) { if (item.minValue && item.maxValue) {
item.limitValue = '最小值' + item.minValue item.limitValue = item.minValue + '-' + item.maxValue;
} else if (item.maxValue) { } else if (item.minValue) {
item.limitValue = '最大值' + item.maxValue item.limitValue = '最小值' + item.minValue;
} else { } else if (item.maxValue) {
item.limitValue = '' item.limitValue = '最大值' + item.maxValue;
} } else {
}) item.limitValue = '';
if (this.queryParams.method === '1') { }
this.list = arr });
this.list2 = [] if (this.queryParams.method === '1') {
} else { this.list = arr;
this.list2 = arr this.list2 = [];
this.list1 = [] } else {
} this.list2 = arr;
this.total = response.data.total; this.list1 = [];
}); }
}, this.total = response.data.total;
getTypeList() { });
getEnergyTypeListAll().then((res) => { },
console.log(res) getTypeList() {
this.formConfig[0].selectOptions = res.data || [] getEnergyTypeListAll().then((res) => {
}) console.log(res);
}, this.formConfig[0].selectOptions = res.data || [];
toggleTab() { });
if (this.activeName === 'auto') { },
this.queryParams.method = '1' toggleTab() {
} else { if (this.activeName === 'auto') {
this.queryParams.method = '2' this.queryParams.method = '1';
} } else {
this.queryParams.pageNo = 1 this.queryParams.method = '2';
this.getList() }
} this.queryParams.pageNo = 1;
} this.getList();
},
},
}; };
</script> </script>
<style lang='scss'> <style lang='scss'>
.energyOverlimitLog { .energyOverlimitLog {
.el-tabs__nav::after { .el-tabs__nav::after {
content: ""; content: '';
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 2px; height: 2px;
background-color: #e4e7ed; background-color: #e4e7ed;
} }
.el-tabs__nav-wrap::after { .el-tabs__nav-wrap::after {
width: 0; width: 0;
} }
.el-tabs__item { .el-tabs__item {
padding: 0 10px; padding: 0 10px;
} }
.el-tabs__item:hover { .el-tabs__item:hover {
color: rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85);
} }
.el-tabs__item.is-active { .el-tabs__item.is-active {
color: rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85);
} }
.el-tabs__item { .el-tabs__item {
color: rgba(0, 0, 0, 0.45); color: rgba(0, 0, 0, 0.45);
} }
.searchBarBox { .searchBarBox {
margin-bottom: 0; margin-bottom: 0;
} }
} }
</style> </style>

2
src/views/energy/monitoring/energyReport/index.vue
View File

@ -56,6 +56,7 @@ const tableProps = [
{ {
prop: 'energyType', prop: 'energyType',
label: '能源类型', label: '能源类型',
filter: publicFormatter('energy_type'),
}, },
{ {
prop: 'startNum', prop: 'startNum',
@ -79,6 +80,7 @@ export default {
{ {
type: 'select', type: 'select',
label: '能源类型', label: '能源类型',
labelField: 'labelName',
selectOptions: [], selectOptions: [],
param: 'energyTypeId', param: 'energyTypeId',
filterable: true, filterable: true,

276
src/views/energy/monitoring/energyStatistics/components/energyStatisticsAdd.vue
View File

@ -1,128 +1,160 @@
<template> <template>
<el-form ref="form" :rules="rules" label-width="100px" :model="form"> <el-form
<el-row> ref="form"
<el-col :span="12"> :rules="rules"
<el-form-item label="方案名称" prop="name"> label-width="100px"
<el-input v-model="form.name"></el-input> :model="form">
</el-form-item> <el-row>
</el-col> <el-col :span="12">
<el-col :span="12"> <el-form-item
<el-form-item label="方案编码" prop="code"> label="方案名称"
<el-input v-model="form.code" disabled></el-input> prop="name">
</el-form-item> <el-input v-model="form.name"></el-input>
</el-col> </el-form-item>
</el-row> </el-col>
<el-row> <el-col :span="12">
<el-col :span="12"> <el-form-item
<el-form-item label="统计类型" prop="type"> label="方案编码"
<el-select v-model="form.type" placeholder="请选择" style="width: 100%;"> prop="code">
<el-option <el-input
v-for="item in getDictDatas(DICT_TYPE.STATISTIC_TYPE)" v-model="form.code"
:key="item.value" disabled></el-input>
:label="item.label" </el-form-item>
:value="item.value"> </el-col>
</el-option> </el-row>
</el-select> <el-row>
</el-form-item> <el-col :span="12">
</el-col> <el-form-item
<el-col :span="12"> label="统计类型"
<el-form-item label="能源类型" prop="energyTypeId"> prop="type">
<el-select v-model="form.energyTypeId" placeholder="请选择" style="width: 100%;" filterable> <el-select
<el-option v-model="form.type"
v-for="item in energyListType" placeholder="请选择"
:key="item.id" style="width: 100%">
:label="item.name" <el-option
:value="item.id"> v-for="item in getDictDatas(DICT_TYPE.STATISTIC_TYPE)"
</el-option> :key="item.value"
</el-select> :label="item.label"
</el-form-item> :value="item.value"></el-option>
</el-col> </el-select>
</el-row> </el-form-item>
<el-row> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="备注" prop="remark"> <el-form-item
<el-input v-model="form.remark"></el-input> label="能源类型"
</el-form-item> prop="energyTypeId">
</el-col> <el-select
</el-row> v-model="form.energyTypeId"
</el-form> 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> </template>
<script> <script>
import { getCode, createEnergyStatistics, updateEnergyStatistics, getEnergyStatistics } from "@/api/monitoring/energyStatistics"; import {
import { getEnergyTypeListAll } from '@/api/base/energyType' getCode,
createEnergyStatistics,
updateEnergyStatistics,
getEnergyStatistics,
} from '@/api/monitoring/energyStatistics';
import { getEnergyTypeListAll } from '@/api/base/energyType';
import { number } from 'echarts'; import { number } from 'echarts';
export default { export default {
name: 'EnergyStatisticsAdd', name: 'EnergyStatisticsAdd',
data() { data() {
return { return {
form: { form: {
id: '', id: '',
name: '', name: '',
code: '', code: '',
type: '', type: '',
energyTypeId: '' energyTypeId: '',
}, },
plcList: [], plcList: [],
objList: [], objList: [],
isEdit: false, //是否是编辑 isEdit: false, //是否是编辑
rules: { rules: {
name: [{ required: true, message: '方案名称不能为空', trigger: 'blur' }], name: [
type: [{ required: true, message: '统计类型不能为空', trigger: 'change' }], { required: true, message: '方案名称不能为空', trigger: 'blur' },
energyTypeId: [{ required: true, message: '能源类型不能为空', trigger: 'change' }] ],
}, type: [
energyListType: [], { required: true, message: '统计类型不能为空', trigger: 'change' },
} ],
}, energyTypeId: [
methods: { { required: true, message: '能源类型不能为空', trigger: 'change' },
init(id) { ],
getEnergyTypeListAll().then((res) => { },
this.energyListType = res.data || [] energyListType: [],
}) };
if (id) { },
this.isEdit = true methods: {
this.form.id = id init(id) {
getEnergyStatistics( id ).then((res) => { getEnergyTypeListAll().then((res) => {
if (res.code === 0) { this.energyListType = res.data || [];
this.form = res.data });
this.form.type = this.form.type + '' if (id) {
} this.isEdit = true;
}) this.form.id = id;
} else { getEnergyStatistics(id).then((res) => {
getCode().then((res) => { if (res.code === 0) {
this.form.code = res.data this.form = res.data;
}) this.form.type = this.form.type + '';
this.isEdit = false }
this.form.id = '' });
} } else {
}, getCode().then((res) => {
submitForm() { this.form.code = res.data;
this.$refs['form'].validate((valid) => { });
if (valid) { this.isEdit = false;
if (this.isEdit) { this.form.id = '';
// 编辑 }
updateEnergyStatistics({...this.form}).then((res) => { },
if (res.code === 0) { submitForm() {
this.$modal.msgSuccess("操作成功"); this.$refs['form'].validate((valid) => {
this.$emit('successSubmit') if (valid) {
} if (this.isEdit) {
}) // 编辑
} else { updateEnergyStatistics({ ...this.form }).then((res) => {
createEnergyStatistics({...this.form}).then((res) => { if (res.code === 0) {
if (res.code === 0) { this.$modal.msgSuccess('操作成功');
this.$modal.msgSuccess("操作成功"); this.$emit('successSubmit');
this.$emit('successSubmit') }
} });
}) } else {
} createEnergyStatistics({ ...this.form }).then((res) => {
} else { if (res.code === 0) {
return false this.$modal.msgSuccess('操作成功');
} this.$emit('successSubmit');
}) }
}, });
formClear() { }
this.$refs.form.resetFields() } else {
this.isEdit = false return false;
} }
} });
} },
formClear() {
this.$refs.form.resetFields();
this.isEdit = false;
},
},
};
</script> </script>

460
src/views/energy/monitoring/energyStatistics/index.vue
View File

@ -1,222 +1,254 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<!-- 搜索工作栏 -->
<!-- 搜索工作栏 --> <search-bar
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> :formConfigs="formConfig"
<!-- 列表 --> ref="searchBarForm"
<base-table :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-props="tableProps" :table-data="list" @headBtnClick="buttonClick" />
:max-height="tableH"> <!-- 列表 -->
<method-btn v-if="tableBtn.length" slot="handleBtn" :width="160" label="操作" :method-list="tableBtn" <base-table
@clickBtn="handleClick" /> :page="queryParams.pageNo"
</base-table> :limit="queryParams.pageSize"
<pagination :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" :total="total" :table-props="tableProps"
@pagination="getList" /> :table-data="list"
<!-- 新增 --> :max-height="tableH">
<base-dialog :dialogTitle="addOrEditTitle" :dialogVisible="centervisible" @cancel="handleCancel" <method-btn
@confirm="handleConfirm" :before-close="handleCancel"> v-if="tableBtn.length"
<energy-statistics-add ref="energyStatistics" @successSubmit="successSubmit" /> slot="handleBtn"
</base-dialog> :width="160"
<!-- 参数绑定/查看 --> label="操作"
<energy-statistics-det ref="plcParam" @closeDrawer="closeDrawer" :method-list="tableBtn"
:energyTypeList="energyTypeList"></energy-statistics-det> @clickBtn="handleClick" />
</div> </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> </template>
<script> <script>
import { getEnergyStatisticsPage, deleteEnergyStatistics } from "@/api/monitoring/energyStatistics"; import {
import { publicFormatter } from '@/utils/dict' getEnergyStatisticsPage,
import { getEnergyTypeListAll } from '@/api/base/energyType' deleteEnergyStatistics,
import EnergyStatisticsAdd from './components/energyStatisticsAdd' } from '@/api/monitoring/energyStatistics';
import EnergyStatisticsDet from './components/energyStatisticsDet' import { publicFormatter } from '@/utils/dict';
import { getEnergyTypeListAll } from '@/api/base/energyType';
import EnergyStatisticsAdd from './components/energyStatisticsAdd';
import EnergyStatisticsDet from './components/energyStatisticsDet';
const tableProps = [ const tableProps = [
{ {
prop: 'name', prop: 'name',
label: '方案名称' label: '方案名称',
}, },
{ {
prop: 'code', prop: 'code',
label: '方案编码', label: '方案编码',
minWidth: 120, minWidth: 120,
showOverflowtooltip: true showOverflowtooltip: true,
}, },
{ {
prop: 'type', prop: 'type',
label: '统计类型', label: '统计类型',
filter: publicFormatter('statistic_type') filter: publicFormatter('statistic_type'),
}, },
{ {
prop: 'energyType', prop: 'energyType',
label: '能源类型' label: '能源类型',
}, filter: publicFormatter('energy_type'),
{ },
prop: 'paramNum', {
label: '统计参数数量' prop: 'paramNum',
}, label: '统计参数数量',
{ },
prop: 'remark', {
label: '备注' prop: 'remark',
} label: '备注',
] },
];
export default { export default {
name: "EnergyStatistics", name: 'EnergyStatistics',
components: { EnergyStatisticsAdd, EnergyStatisticsDet }, components: { EnergyStatisticsAdd, EnergyStatisticsDet },
data() { data() {
return { return {
formConfig: [ formConfig: [
{ {
type: 'input', type: 'input',
label: '方案名称', label: '方案名称',
placeholder: '方案名称', placeholder: '方案名称',
param: 'name' param: 'name',
}, },
{ {
type: 'button', type: 'button',
btnName: '查询', btnName: '查询',
name: 'search', name: 'search',
color: 'primary' color: 'primary',
}, },
{ {
type: 'separate' type: 'separate',
}, },
{ {
type: this.$auth.hasPermi('monitoring:energy-statistics:create') ? 'button' : '', type: this.$auth.hasPermi('monitoring:energy-statistics:create')
btnName: '新增', ? 'button'
name: 'add', : '',
color: 'success', btnName: '新增',
plain: true name: 'add',
} color: 'success',
], plain: true,
tableProps, },
tableBtn: [ ],
this.$auth.hasPermi('monitoring:energy-statistics:bind') tableProps,
? { tableBtn: [
type: 'connect', this.$auth.hasPermi('monitoring:energy-statistics:bind')
btnName: '绑定' ? {
} type: 'connect',
: undefined, btnName: '绑定',
{ }
type: 'detail', : undefined,
btnName: '详情' {
}, type: 'detail',
this.$auth.hasPermi('monitoring:energy-statistics:update') btnName: '详情',
? { },
type: 'edit', this.$auth.hasPermi('monitoring:energy-statistics:update')
btnName: '编辑' ? {
} type: 'edit',
: undefined, btnName: '编辑',
this.$auth.hasPermi('monitoring:energy-statistics:delete') }
? { : undefined,
type: 'delete', this.$auth.hasPermi('monitoring:energy-statistics:delete')
btnName: '删除' ? {
} type: 'delete',
: undefined btnName: '删除',
].filter((v) => v), }
tableH: this.tableHeight(260), : undefined,
// 总条数 ].filter((v) => v),
total: 0, tableH: this.tableHeight(260),
// 班次基础信息列表 // 总条数
list: [], total: 0,
// 弹出层标题 // 班次基础信息列表
addOrEditTitle: "", list: [],
// 是否显示弹出层 // 弹出层标题
centervisible: false, addOrEditTitle: '',
// 查询参数 // 是否显示弹出层
queryParams: { centervisible: false,
pageNo: 1, // 查询参数
pageSize: 20, queryParams: {
name: null pageNo: 1,
}, pageSize: 20,
energyTypeList: [] name: null,
}; },
}, energyTypeList: [],
created() { };
window.addEventListener('resize', () => { },
this.tableH = this.tableHeight(260) created() {
}) window.addEventListener('resize', () => {
this.getList(); this.tableH = this.tableHeight(260);
}, });
mounted() { this.getList();
// 获取能源列表 },
this.getEnergyTypeList() mounted() {
}, // 获取能源列表
methods: { this.getEnergyTypeList();
buttonClick(val) { },
switch (val.btnName) { methods: {
case 'search': buttonClick(val) {
this.queryParams.pageNo = 1; switch (val.btnName) {
this.queryParams.name = val.name case 'search':
this.getList() this.queryParams.pageNo = 1;
break this.queryParams.name = val.name;
default: this.getList();
this.addOrEditTitle = '新增' break;
this.centervisible = true default:
this.$nextTick(() => { this.addOrEditTitle = '新增';
this.$refs.energyStatistics.init() this.centervisible = true;
}) this.$nextTick(() => {
} this.$refs.energyStatistics.init();
}, });
/** 查询列表 */ }
getList() { },
getEnergyStatisticsPage(this.queryParams).then(response => { /** 查询列表 */
let arr = response.data.list || []; getList() {
this.list = arr getEnergyStatisticsPage(this.queryParams).then((response) => {
this.total = response.data.total; let arr = response.data.list || [];
}); this.list = arr;
}, this.total = response.data.total;
handleClick(val) { });
console.log(val) },
switch (val.type) { handleClick(val) {
case 'edit': console.log(val);
this.addOrEditTitle = '编辑' switch (val.type) {
this.$nextTick(() => { case 'edit':
this.$refs.energyStatistics.init(val.data.id) this.addOrEditTitle = '编辑';
}) this.$nextTick(() => {
this.centervisible = true this.$refs.energyStatistics.init(val.data.id);
break });
case 'delete': this.centervisible = true;
this.handleDelete(val.data) break;
break case 'delete':
case 'detail': this.handleDelete(val.data);
this.$nextTick(() => { break;
this.$refs.plcParam.init(val.data, 'detail') case 'detail':
}) this.$nextTick(() => {
break this.$refs.plcParam.init(val.data, 'detail');
default: });
this.$nextTick(() => { break;
this.$refs.plcParam.init(val.data, 'connect') default:
}) this.$nextTick(() => {
} this.$refs.plcParam.init(val.data, 'connect');
}, });
handleCancel() { }
this.$refs.energyStatistics.formClear() },
this.centervisible = false handleCancel() {
this.addOrEditTitle = '' this.$refs.energyStatistics.formClear();
}, this.centervisible = false;
handleConfirm() { this.addOrEditTitle = '';
this.$refs.energyStatistics.submitForm() },
}, handleConfirm() {
successSubmit() { this.$refs.energyStatistics.submitForm();
this.handleCancel() },
this.getList() successSubmit() {
}, this.handleCancel();
/** 删除按钮操作 */ this.getList();
handleDelete(row) { },
this.$modal.confirm('是否确认删除方案名称为"' + row.name + '"的数据项?').then(function () { /** 删除按钮操作 */
return deleteEnergyStatistics(row.id); handleDelete(row) {
}).then(() => { this.$modal
this.queryParams.pageNo = 1; .confirm('是否确认删除方案名称为"' + row.name + '"的数据项?')
this.getList(); .then(function () {
this.$modal.msgSuccess("删除成功"); return deleteEnergyStatistics(row.id);
}).catch(() => { }); })
}, .then(() => {
closeDrawer() { this.queryParams.pageNo = 1;
this.getList() this.getList();
}, this.$modal.msgSuccess('删除成功');
getEnergyTypeList() { })
getEnergyTypeListAll().then((res) => { .catch(() => {});
this.energyTypeList = res.data || [] },
}) closeDrawer() {
} this.getList();
} },
getEnergyTypeList() {
getEnergyTypeListAll().then((res) => {
this.energyTypeList = res.data || [];
});
},
},
}; };
</script> </script>