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

280
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-form-item>
</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="Chart2" class="chart2"/>
</el-col>
</el-row>
</div>
</template>
<script>
import {
listRecordDnbInstant,
getRecordDnbInstant, dnbInstantList,
getRecordDnbInstant, dnbInstantList
} from '@/api/ems/record/recordDnbInstant'
import { getMonitorInfoTree } from '@/api/ems/base/baseMonitorInfo'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { parseTime } from '@/utils/ruoyi'
import Chart from "@/components/Charts/Chart";
import * as echarts from 'echarts';
import Chart from '@/components/Charts/Chart'
import * as echarts from 'echarts'
export default {
name: 'CurrentVoltageCurve',
@ -152,6 +90,8 @@ export default {
//左侧树结构List
monitorInfoOptions: [],
workUnitName: undefined,
//左侧树结构 检索设备名称
selectMonitorName: null,
//计量设备信息
baseMonitorInfoList: [],
// 采集方式时间范围
@ -176,16 +116,8 @@ export default {
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
monitorCode: null,
collectTime: null,
va: null,
vb: null,
vc: null,
ia: null,
ib: null,
ic: null,
recordTime: null,
glys: null,
zxyg: null,
@ -258,18 +190,16 @@ export default {
this.queryParams.params['beginCollectTime'] = this.daterangeCollectTime[0]
this.queryParams.params['endCollectTime'] = this.daterangeCollectTime[1]
}
listRecordDnbInstant(this.queryParams).then(response => {
this.dataList = response.rows
this.total = response.total
this.loading = false
})
console.log(this.monitorInfoOptions)
this.getChart()
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
@ -281,39 +211,19 @@ export default {
}
this.resetForm('form')
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams.monitorCode = null
this.resetForm('queryForm')
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() {
this.download('ems/record/recordDnbInstant/export', {
@ -328,42 +238,45 @@ export default {
})
},
// 筛选节点
/** 筛选节点 */
filterNode(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
},
// 节点单击事件
/** 节点单击事件 */
handleNodeClick(data) {
this.queryParams.monitorCode = data.code
this.selectMonitorName = data.label
this.handleQuery()
},
/** 电流电压曲线 */
async getChart() {
if (this.queryParams.monitorCode == null) {
return
}
let query = JSON.parse(JSON.stringify(this.queryParams))
delete query.pageNum
delete query.pageSize
const { data } = await dnbInstantList(query)
let option1 = {
title: {
text:'电流曲线',
text: this.selectMonitorName + ' 电流曲线',
x: 'center'
},
grid: {
top: "15%",
bottom: "10%",
top: '15%',
bottom: '10%',
left: '3%',
right: '3%'
},
tooltip: {
trigger: "axis",
trigger: 'axis',
axisPointer: {
type: "shadow",
type: 'shadow',
label: {
show: true,
},
},
show: true
}
}
},
dataZoom: [{
type: 'slider'
@ -376,53 +289,53 @@ export default {
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: "#000",
},
color: '#000'
}
},
axisTick: {
show: true, //隐藏X轴刻度
show: true //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: "#000", //X轴文字颜色
},
},
color: '#000' //X轴文字颜色
}
}
},
yAxis: [
{
type: "value",
name: "电流（A）",
type: 'value',
name: '电流（A）',
nameTextStyle: {
color: "#000",
color: '#000'
},
splitLine: {
show: false,
show: false
},
axisTick: {
show: true,
show: true
},
axisLine: {
show: true,
lineStyle: {
color: "#000",
},
color: '#000'
}
},
axisLabel: {
show: true,
textStyle: {
color: "#000",
},
},
},
color: '#000'
}
}
}
],
series: [
{
name: "A相电流",
type: "line",
name: 'A相电流',
type: 'line',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: "circle", //标记的图形为实心圆
symbol: 'circle', //标记的图形为实心圆
symbolSize: 10, //标记的大小
// itemStyle: {
// //折线拐点标志的样式
@ -434,14 +347,14 @@ export default {
// areaStyle: {
// color: "rgba(5,140,255, 0.2)",
// },
data: data.map(e=>e.ia),
data: data.map(e => e.ia)
},
{
name: "B相电流",
type: "line",
name: 'B相电流',
type: 'line',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: "circle", //标记的图形为实心圆
symbol: 'circle', //标记的图形为实心圆
symbolSize: 10, //标记的大小
// itemStyle: {
// //折线拐点标志的样式
@ -453,14 +366,14 @@ export default {
// areaStyle: {
// color: "rgba(5,140,255, 0.2)",
// },
data: data.map(e=>e.ib),
data: data.map(e => e.ib)
},
{
name: "C相电流",
type: "line",
name: 'C相电流',
type: 'line',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: "circle", //标记的图形为实心圆
symbol: 'circle', //标记的图形为实心圆
symbolSize: 10, //标记的大小
// itemStyle: {
// color: "#058cff",
@ -471,18 +384,18 @@ export default {
// areaStyle: {
// color: "rgba(5,140,255, 0.2)",
// },
data: data.map(e=>e.ic),
},
],
data: data.map(e => e.ic)
}
]
}
let option2 = {
title: {
text:'电压曲线',
text: this.selectMonitorName + ' 电压曲线',
x: 'center'
},
grid: {
top: "15%",
bottom: "10%",
top: '15%',
bottom: '10%',
left: '3%',
right: '3%'
},
@ -491,13 +404,13 @@ export default {
type: 'slider'
}],
tooltip: {
trigger: "axis",
trigger: 'axis',
axisPointer: {
type: "shadow",
type: 'shadow',
label: {
show: true,
},
},
show: true
}
}
},
legend: {
right: 0
@ -507,53 +420,53 @@ export default {
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: "#000",
},
color: '#000'
}
},
axisTick: {
show: true, //隐藏X轴刻度
show: true //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: "#000", //X轴文字颜色
},
},
color: '#000' //X轴文字颜色
}
}
},
yAxis: [
{
type: "value",
name: "电压（V）",
type: 'value',
name: '电压（V）',
nameTextStyle: {
color: "#000",
color: '#000'
},
splitLine: {
show: false,
show: false
},
axisTick: {
show: true,
show: true
},
axisLine: {
show: true,
lineStyle: {
color: "#000",
},
color: '#000'
}
},
axisLabel: {
show: true,
textStyle: {
color: "#000",
},
},
},
color: '#000'
}
}
}
],
series: [
{
name: "A相电压",
type: "line",
name: 'A相电压',
type: 'line',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: "circle", //标记的图形为实心圆
symbol: 'circle', //标记的图形为实心圆
symbolSize: 10, //标记的大小
// itemStyle: {
// //折线拐点标志的样式
@ -565,14 +478,14 @@ export default {
// areaStyle: {
// color: "rgba(5,140,255, 0.2)",
// },
data: data.map(e=>e.va),
data: data.map(e => e.va)
},
{
name: "B相电压",
type: "line",
name: 'B相电压',
type: 'line',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: "circle", //标记的图形为实心圆
symbol: 'circle', //标记的图形为实心圆
symbolSize: 10, //标记的大小
// itemStyle: {
// //折线拐点标志的样式
@ -584,14 +497,14 @@ export default {
// areaStyle: {
// color: "rgba(5,140,255, 0.2)",
// },
data: data.map(e=>e.vb),
data: data.map(e => e.vb)
},
{
name: "C相电压",
type: "line",
name: 'C相电压',
type: 'line',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: "circle", //标记的图形为实心圆
symbol: 'circle', //标记的图形为实心圆
symbolSize: 10, //标记的大小
// itemStyle: {
// color: "#058cff",
@ -602,9 +515,9 @@ export default {
// areaStyle: {
// 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.Chart2.setData(option2)
@ -628,6 +541,7 @@ export default {
width: 100%;
height: 40vh;
}
.chart2 {
width: 100%;
height: 40vh;

Write Preview
Loading…
Cancel
Save