zangch
/
JDAirPort.Ems.UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change - 电流电压曲线优化

Browse Source
boardTest
yinq 1 year ago
parent a1164fcd3e
commit 2d0e4917af
1 changed files with 140 additions and 226 deletions
Show Stats Download Patch File Download Diff File

366
src/views/ems/report/currentVoltageCurve/index.vue
Unescape Escape View File

@ -54,89 +54,27 @@
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- <el-row :gutter="10" class="mb8">-->
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>-->
<!-- </el-row>-->
<!-- <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">-->
<!-- <el-table-column type="selection" width="55" align="center"/>-->
<!-- <el-table-column label="编号" align="center" prop="objId" v-if="columns[0].visible"/>-->
<!-- <el-table-column label="计量设备编号" align="center" prop="monitorCode" v-if="columns[1].visible" width="100"/>-->
<!-- <el-table-column label="计量设备名称" align="center" prop="monitorName" v-if="columns[15].visible" width="120"/>-->
<!-- <el-table-column label="采集时间" align="center" prop="collectTime" width="180" v-if="columns[2].visible">-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{ parseTime(scope.row.collectTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="A项电压" align="center" prop="va" v-if="columns[3].visible"/>-->
<!-- <el-table-column label="B项电压" align="center" prop="vb" v-if="columns[4].visible"/>-->
<!-- <el-table-column label="C项电压" align="center" prop="vc" v-if="columns[5].visible"/>-->
<!-- <el-table-column label="A项电流" align="center" prop="ia" v-if="columns[6].visible"/>-->
<!-- <el-table-column label="B项电流" align="center" prop="ib" v-if="columns[7].visible"/>-->
<!-- <el-table-column label="C项电流" align="center" prop="ic" v-if="columns[8].visible"/>-->
<!-- <el-table-column label="功率因数" align="center" prop="glys" v-if="columns[10].visible"/>-->
<!-- <el-table-column label="正向有功" align="center" prop="zxyg" v-if="columns[11].visible"/>-->
<!-- <el-table-column label="有功功率" align="center" prop="activePower" v-if="columns[12].visible"/>-->
<!-- <el-table-column label="无功功率" align="center" prop="reactivePower" v-if="columns[13].visible"/>-->
<!-- <el-table-column label="记录时间" align="center" prop="recordTime" width="180" v-if="columns[9].visible">-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{ parseTime(scope.row.recordTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="采集方式" align="center" prop="collectType" v-if="columns[14].visible">-->
<!-- <template slot-scope="scope">-->
<!-- <dict-tag :options="dict.type.collect_type" :value="scope.row.collectType"/>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- &lt;!&ndash; <el-table-column label="操作" align="center" class-name="small-padding fixed-width">&ndash;&gt;-->
<!-- &lt;!&ndash; <template slot-scope="scope">&ndash;&gt;-->
<!-- &lt;!&ndash; <el-button&ndash;&gt;-->
<!-- &lt;!&ndash; size="mini"&ndash;&gt;-->
<!-- &lt;!&ndash; type="text"&ndash;&gt;-->
<!-- &lt;!&ndash; icon="el-icon-edit"&ndash;&gt;-->
<!-- &lt;!&ndash; @click="handleUpdate(scope.row)"&ndash;&gt;-->
<!-- &lt;!&ndash; v-hasPermi="['ems/record:recordDnbInstant:edit']"&ndash;&gt;-->
<!-- &lt;!&ndash; >修改&ndash;&gt;-->
<!-- &lt;!&ndash; </el-button>&ndash;&gt;-->
<!-- &lt;!&ndash; <el-button&ndash;&gt;-->
<!-- &lt;!&ndash; size="mini"&ndash;&gt;-->
<!-- &lt;!&ndash; type="text"&ndash;&gt;-->
<!-- &lt;!&ndash; icon="el-icon-delete"&ndash;&gt;-->
<!-- &lt;!&ndash; @click="handleDelete(scope.row)"&ndash;&gt;-->
<!-- &lt;!&ndash; v-hasPermi="['ems/record:recordDnbInstant:remove']"&ndash;&gt;-->
<!-- &lt;!&ndash; >删除&ndash;&gt;-->
<!-- &lt;!&ndash; </el-button>&ndash;&gt;-->
<!-- &lt;!&ndash; </template>&ndash;&gt;-->
<!-- &lt;!&ndash; </el-table-column>&ndash;&gt;-->
<!-- </el-table>-->
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<Chart ref="Chart1" class="chart1"/> <Chart ref="Chart1" class="chart1"/>
<Chart ref="Chart2" class="chart2"/> <Chart ref="Chart2" class="chart2"/>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
import { import {
listRecordDnbInstant, listRecordDnbInstant,
getRecordDnbInstant, dnbInstantList, getRecordDnbInstant, dnbInstantList
} from '@/api/ems/record/recordDnbInstant' } from '@/api/ems/record/recordDnbInstant'
import {getMonitorInfoTree} from '@/api/ems/base/baseMonitorInfo' import { getMonitorInfoTree } from '@/api/ems/base/baseMonitorInfo'
import Treeselect from '@riophae/vue-treeselect' import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css' import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {parseTime} from '@/utils/ruoyi' import { parseTime } from '@/utils/ruoyi'
import Chart from "@/components/Charts/Chart"; import Chart from '@/components/Charts/Chart'
import * as echarts from 'echarts'; import * as echarts from 'echarts'
export default { export default {
name: 'CurrentVoltageCurve', name: 'CurrentVoltageCurve',
@ -152,6 +90,8 @@ export default {
//左侧树结构List //左侧树结构List
monitorInfoOptions: [], monitorInfoOptions: [],
workUnitName: undefined, workUnitName: undefined,
//左侧树结构 检索设备名称
selectMonitorName: null,
//计量设备信息 //计量设备信息
baseMonitorInfoList: [], baseMonitorInfoList: [],
// 采集方式时间范围 // 采集方式时间范围
@ -176,16 +116,8 @@ export default {
open: false, open: false,
// 查询参数 // 查询参数
queryParams: { queryParams: {
pageNum: 1,
pageSize: 10,
monitorCode: null, monitorCode: null,
collectTime: null, collectTime: null,
va: null,
vb: null,
vc: null,
ia: null,
ib: null,
ic: null,
recordTime: null, recordTime: null,
glys: null, glys: null,
zxyg: null, zxyg: null,
@ -202,26 +134,26 @@ export default {
// 表单校验 // 表单校验
rules: { rules: {
objId: [ objId: [
{required: true, message: '编号不能为空', trigger: 'blur'} { required: true, message: '编号不能为空', trigger: 'blur' }
] ]
}, },
columns: [ columns: [
{key: 0, label: `主键标识`, visible: false}, { key: 0, label: `主键标识`, visible: false },
{key: 1, label: `计量设备编号`, visible: true}, { key: 1, label: `计量设备编号`, visible: true },
{key: 2, label: `采集时间`, visible: true}, { key: 2, label: `采集时间`, visible: true },
{key: 3, label: `A项电压`, visible: true}, { key: 3, label: `A项电压`, visible: true },
{key: 4, label: `B项电压`, visible: true}, { key: 4, label: `B项电压`, visible: true },
{key: 5, label: `C项电压`, visible: true}, { key: 5, label: `C项电压`, visible: true },
{key: 6, label: `A项电流`, visible: true}, { key: 6, label: `A项电流`, visible: true },
{key: 7, label: `B项电流`, visible: true}, { key: 7, label: `B项电流`, visible: true },
{key: 8, label: `C项电流`, visible: true}, { key: 8, label: `C项电流`, visible: true },
{key: 9, label: `记录时间`, visible: true}, { key: 9, label: `记录时间`, visible: true },
{key: 10, label: `功率因数`, visible: true}, { key: 10, label: `功率因数`, visible: true },
{key: 11, label: `正向有功`, visible: true}, { key: 11, label: `正向有功`, visible: true },
{key: 12, label: `有功功率`, visible: false}, { key: 12, label: `有功功率`, visible: false },
{key: 13, label: `无功功率`, visible: false}, { key: 13, label: `无功功率`, visible: false },
{key: 14, label: `采集方式`, visible: true}, { key: 14, label: `采集方式`, visible: true },
{key: 15, label: `计量设备名称`, visible: true} { key: 15, label: `计量设备名称`, visible: true }
] ]
} }
}, },
@ -258,18 +190,16 @@ export default {
this.queryParams.params['beginCollectTime'] = this.daterangeCollectTime[0] this.queryParams.params['beginCollectTime'] = this.daterangeCollectTime[0]
this.queryParams.params['endCollectTime'] = this.daterangeCollectTime[1] this.queryParams.params['endCollectTime'] = this.daterangeCollectTime[1]
} }
listRecordDnbInstant(this.queryParams).then(response => { console.log(this.monitorInfoOptions)
this.dataList = response.rows
this.total = response.total
this.loading = false
})
this.getChart() this.getChart()
}, },
// 取消按钮 // 取消按钮
cancel() { cancel() {
this.open = false this.open = false
this.reset() this.reset()
}, },
// 表单重置 // 表单重置
reset() { reset() {
this.form = { this.form = {
@ -281,39 +211,19 @@ export default {
} }
this.resetForm('form') this.resetForm('form')
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {
this.queryParams.pageNum = 1
this.getList() this.getList()
}, },
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
this.queryParams.monitorCode = null this.queryParams.monitorCode = null
this.resetForm('queryForm') this.resetForm('queryForm')
this.handleQuery() this.handleQuery()
}, },
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.objId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.open = true
this.title = '添加电实时数据'
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const objId = row.objId || this.ids
getRecordDnbInstant(objId).then(response => {
this.form = response.data
this.open = true
this.title = '修改电实时数据'
})
},
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
this.download('ems/record/recordDnbInstant/export', { this.download('ems/record/recordDnbInstant/export', {
@ -323,106 +233,109 @@ export default {
/** 查询计量设备信息下拉树结构 */ /** 查询计量设备信息下拉树结构 */
getTreeselect() { getTreeselect() {
getMonitorInfoTree({monitorType: 2}).then(response => { getMonitorInfoTree({ monitorType: 2 }).then(response => {
this.monitorInfoOptions = response.data this.monitorInfoOptions = response.data
}) })
}, },
// 筛选节点 /** 筛选节点 */
filterNode(value, data) { filterNode(value, data) {
if (!value) return true if (!value) return true
return data.label.indexOf(value) !== -1 return data.label.indexOf(value) !== -1
}, },
// 节点单击事件 /** 节点单击事件 */
handleNodeClick(data) { handleNodeClick(data) {
this.queryParams.monitorCode = data.code this.queryParams.monitorCode = data.code
this.selectMonitorName = data.label
this.handleQuery() this.handleQuery()
}, },
async getChart(){ /** 电流电压曲线 */
async getChart() {
if (this.queryParams.monitorCode == null) {
return
}
let query = JSON.parse(JSON.stringify(this.queryParams)) let query = JSON.parse(JSON.stringify(this.queryParams))
delete query.pageNum const { data } = await dnbInstantList(query)
delete query.pageSize
const {data} = await dnbInstantList(query)
let option1 = { let option1 = {
title:{ title: {
text:'电流曲线', text: this.selectMonitorName + ' 电流曲线',
x:'center' x: 'center'
}, },
grid: { grid: {
top: "15%", top: '15%',
bottom: "10%", bottom: '10%',
left:'3%', left: '3%',
right:'3%' right: '3%'
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: 'axis',
axisPointer: { axisPointer: {
type: "shadow", type: 'shadow',
label: { label: {
show: true, show: true
}
}
}, },
}, dataZoom: [{
}, type: 'slider'
dataZoom:[{
type:'slider'
}], }],
legend: { legend: {
right:0 right: 0
}, },
xAxis: { xAxis: {
data: data.map(e=>e.collectTime), data: data.map(e => e.collectTime),
axisLine: { axisLine: {
show: true, //隐藏X轴轴线 show: true, //隐藏X轴轴线
lineStyle: { lineStyle: {
color: "#000", color: '#000'
}, }
}, },
axisTick: { axisTick: {
show: true, //隐藏X轴刻度 show: true //隐藏X轴刻度
}, },
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: "#000", //X轴文字颜色 color: '#000' //X轴文字颜色
}, }
}, }
}, },
yAxis: [ yAxis: [
{ {
type: "value", type: 'value',
name: "电流（A）", name: '电流（A）',
nameTextStyle: { nameTextStyle: {
color: "#000", color: '#000'
}, },
splitLine: { splitLine: {
show: false, show: false
}, },
axisTick: { axisTick: {
show: true, show: true
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#000", color: '#000'
}, }
}, },
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: "#000", color: '#000'
}, }
}, }
}, }
], ],
series: [ series: [
{ {
name: "A相电流", name: 'A相电流',
type: "line", type: 'line',
smooth: true, //平滑曲线显示 smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。 showAllSymbol: true, //显示所有图形。
symbol: "circle", //标记的图形为实心圆 symbol: 'circle', //标记的图形为实心圆
symbolSize: 10, //标记的大小 symbolSize: 10, //标记的大小
// itemStyle: { // itemStyle: {
// //折线拐点标志的样式 // //折线拐点标志的样式
@ -434,14 +347,14 @@ export default {
// areaStyle: { // areaStyle: {
// color: "rgba(5,140,255, 0.2)", // color: "rgba(5,140,255, 0.2)",
// }, // },
data: data.map(e=>e.ia), data: data.map(e => e.ia)
}, },
{ {
name: "B相电流", name: 'B相电流',
type: "line", type: 'line',
smooth: true, //平滑曲线显示 smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。 showAllSymbol: true, //显示所有图形。
symbol: "circle", //标记的图形为实心圆 symbol: 'circle', //标记的图形为实心圆
symbolSize: 10, //标记的大小 symbolSize: 10, //标记的大小
// itemStyle: { // itemStyle: {
// //折线拐点标志的样式 // //折线拐点标志的样式
@ -453,14 +366,14 @@ export default {
// areaStyle: { // areaStyle: {
// color: "rgba(5,140,255, 0.2)", // color: "rgba(5,140,255, 0.2)",
// }, // },
data: data.map(e=>e.ib), data: data.map(e => e.ib)
}, },
{ {
name: "C相电流", name: 'C相电流',
type: "line", type: 'line',
smooth: true, //平滑曲线显示 smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。 showAllSymbol: true, //显示所有图形。
symbol: "circle", //标记的图形为实心圆 symbol: 'circle', //标记的图形为实心圆
symbolSize: 10, //标记的大小 symbolSize: 10, //标记的大小
// itemStyle: { // itemStyle: {
// color: "#058cff", // color: "#058cff",
@ -471,89 +384,89 @@ export default {
// areaStyle: { // areaStyle: {
// color: "rgba(5,140,255, 0.2)", // color: "rgba(5,140,255, 0.2)",
// }, // },
data: data.map(e=>e.ic), data: data.map(e => e.ic)
}, }
], ]
} }
let option2 = { let option2 = {
title:{ title: {
text:'电压曲线', text: this.selectMonitorName + ' 电压曲线',
x:'center' x: 'center'
}, },
grid: { grid: {
top: "15%", top: '15%',
bottom: "10%", bottom: '10%',
left:'3%', left: '3%',
right:'3%' right: '3%'
}, },
dataZoom:[{ dataZoom: [{
type:'slider' type: 'slider'
}], }],
tooltip: { tooltip: {
trigger: "axis", trigger: 'axis',
axisPointer: { axisPointer: {
type: "shadow", type: 'shadow',
label: { label: {
show: true, show: true
}, }
}, }
}, },
legend: { legend: {
right:0 right: 0
}, },
xAxis: { xAxis: {
data: data.map(e=>e.collectTime), data: data.map(e => e.collectTime),
axisLine: { axisLine: {
show: true, //隐藏X轴轴线 show: true, //隐藏X轴轴线
lineStyle: { lineStyle: {
color: "#000", color: '#000'
}, }
}, },
axisTick: { axisTick: {
show: true, //隐藏X轴刻度 show: true //隐藏X轴刻度
}, },
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: "#000", //X轴文字颜色 color: '#000' //X轴文字颜色
}, }
}, }
}, },
yAxis: [ yAxis: [
{ {
type: "value", type: 'value',
name: "电压（V）", name: '电压（V）',
nameTextStyle: { nameTextStyle: {
color: "#000", color: '#000'
}, },
splitLine: { splitLine: {
show: false, show: false
}, },
axisTick: { axisTick: {
show: true, show: true
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#000", color: '#000'
}, }
}, },
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: "#000", color: '#000'
}, }
}, }
}, }
], ],
series: [ series: [
{ {
name: "A相电压", name: 'A相电压',
type: "line", type: 'line',
smooth: true, //平滑曲线显示 smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。 showAllSymbol: true, //显示所有图形。
symbol: "circle", //标记的图形为实心圆 symbol: 'circle', //标记的图形为实心圆
symbolSize: 10, //标记的大小 symbolSize: 10, //标记的大小
// itemStyle: { // itemStyle: {
// //折线拐点标志的样式 // //折线拐点标志的样式
@ -565,14 +478,14 @@ export default {
// areaStyle: { // areaStyle: {
// color: "rgba(5,140,255, 0.2)", // color: "rgba(5,140,255, 0.2)",
// }, // },
data: data.map(e=>e.va), data: data.map(e => e.va)
}, },
{ {
name: "B相电压", name: 'B相电压',
type: "line", type: 'line',
smooth: true, //平滑曲线显示 smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。 showAllSymbol: true, //显示所有图形。
symbol: "circle", //标记的图形为实心圆 symbol: 'circle', //标记的图形为实心圆
symbolSize: 10, //标记的大小 symbolSize: 10, //标记的大小
// itemStyle: { // itemStyle: {
// //折线拐点标志的样式 // //折线拐点标志的样式
@ -584,14 +497,14 @@ export default {
// areaStyle: { // areaStyle: {
// color: "rgba(5,140,255, 0.2)", // color: "rgba(5,140,255, 0.2)",
// }, // },
data: data.map(e=>e.vb), data: data.map(e => e.vb)
}, },
{ {
name: "C相电压", name: 'C相电压',
type: "line", type: 'line',
smooth: true, //平滑曲线显示 smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。 showAllSymbol: true, //显示所有图形。
symbol: "circle", //标记的图形为实心圆 symbol: 'circle', //标记的图形为实心圆
symbolSize: 10, //标记的大小 symbolSize: 10, //标记的大小
// itemStyle: { // itemStyle: {
// color: "#058cff", // color: "#058cff",
@ -602,19 +515,19 @@ export default {
// areaStyle: { // areaStyle: {
// color: "rgba(5,140,255, 0.2)", // color: "rgba(5,140,255, 0.2)",
// }, // },
data: data.map(e=>e.vc), data: data.map(e => e.vc)
}, }
], ]
} }
this.$refs.Chart1.setData(option1) this.$refs.Chart1.setData(option1)
this.$refs.Chart2.setData(option2) this.$refs.Chart2.setData(option2)
echarts.connect(this.$refs.Chart1.chart,this.$refs.Chart2.chart) echarts.connect(this.$refs.Chart1.chart, this.$refs.Chart2.chart)
this.$refs.Chart1.chart.on('datazoom',(e)=>{ this.$refs.Chart1.chart.on('datazoom', (e) => {
option2.dataZoom[0].start = e.start option2.dataZoom[0].start = e.start
option2.dataZoom[0].end = e.end option2.dataZoom[0].end = e.end
this.$refs.Chart2.setData(option2) this.$refs.Chart2.setData(option2)
}) })
this.$refs.Chart2.chart.on('datazoom',(e)=>{ this.$refs.Chart2.chart.on('datazoom', (e) => {
option1.dataZoom[0].start = e.start option1.dataZoom[0].start = e.start
option1.dataZoom[0].end = e.end option1.dataZoom[0].end = e.end
this.$refs.Chart1.setData(option1) this.$refs.Chart1.setData(option1)
@ -624,11 +537,12 @@ export default {
} }
</script> </script>
<style> <style>
.chart1{ .chart1 {
width: 100%; width: 100%;
height: 40vh; height: 40vh;
} }
.chart2{
.chart2 {
width: 100%; width: 100%;
height: 40vh; height: 40vh;
} }

Write Preview
Loading…
Cancel
Save