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

projects/mesxc-zjl #309

Merged
juzi merged 6 commits from projects/mesxc-zjl into projects/mesxc-test 2024-04-07 12:19:51 +08:00
Conversation 0 Commits 6 Files Changed 18 +1978 -1372
18 changed files with 1978 additions and 1372 deletions
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.1.49: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.0.33: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,
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 层级
dictDataMap[dictData.dictType].push({
id: dictData.id,
value: dictData.value,
label: dictData.label,
colorType: dictData.colorType,

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

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

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

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

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

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

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

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

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

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

@@ -1,271 +1,321 @@
<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 FileSaver from "file-saver"
// import * as XLSX from 'xlsx/xlsx.mjs'
import EnergyQuantityManualAdd from './components/energyQuantityManualAdd'
import moment from 'moment'
import {
energyQuantityManualPage,
energyQuantityManualDelete,
energyQuantityManualExport,
} from '@/api/base/energyQuantityManual';
import { getEnergyTypeListAll } from '@/api/base/energyType';
import { publicFormatter } from '@/utils/dict';
import { parseTimeTable } from '@/utils/ruoyi';
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>

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"
: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>

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

@@ -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',
},
{

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

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

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

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

276
src/views/energy/monitoring/energyStatistics/components/energyStatisticsAdd.vue
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>

460
src/views/energy/monitoring/energyStatistics/index.vue
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>