能源类型

This commit is contained in:
2024-04-03 16:05:27 +08:00
parent 4d0841bd32
commit 7c83268e0c
15 changed files with 1612 additions and 1208 deletions

View File

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

View File

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