yinq
/
XMXS-OS-UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加图表

Browse Source
main
夜笙歌 5 months ago
parent 570f252741
commit 809897c2ec
4 changed files with 371 additions and 33 deletions
Show Stats Download Patch File Download Diff File

19
jsconfig.json
Unescape Escape View File

@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}

2
package.json
Unescape Escape View File

@ -40,7 +40,7 @@
"af-table-column": "^1.0.3",
"axios": "0.24.0",
"clipboard": "2.0.8",
"core-js": "3.25.3",
"core-js": "^3.37.1",
"echarts": "5.4.0",
"element-ui": "2.15.14",
"file-saver": "2.0.5",

35
src/components/Charts/Chart.vue
Unescape Escape View File

@ -0,0 +1,35 @@
<template>
<div />
</template>
<script>
import * as echarts from 'echarts';
export default {
expose: ['setData'],
data() {
return {
chart: null,
}
},
mounted() {
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
setData(option) {
this.initChart(option)
},
initChart(option) {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption(option)
}
}
}
</script>

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

@ -54,9 +54,9 @@
<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-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"/>
@ -109,17 +109,19 @@
<!-- </template>-->
<!-- </el-table-column>-->
</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>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
@ -127,17 +129,20 @@
<script>
import {
listRecordDnbInstant,
getRecordDnbInstant,
getRecordDnbInstant, dnbInstantList,
} 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 '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { parseTime } from '@/utils/ruoyi'
import {parseTime} from '@/utils/ruoyi'
import Chart from "@/components/Charts/Chart";
import * as echarts from 'echarts';
export default {
name: 'CurrentVoltageCurve',
dicts: ['collect_type'],
components: {
Chart,
Treeselect
},
data() {
@ -197,26 +202,26 @@ export default {
// 表单校验
rules: {
objId: [
{ required: true, message: '编号不能为空', trigger: 'blur' }
{required: true, message: '编号不能为空', trigger: 'blur'}
]
},
columns: [
{ key: 0, label: `主键标识`, visible: false },
{ key: 1, label: `计量设备编号`, visible: true },
{ key: 2, label: `采集时间`, visible: true },
{ key: 3, label: `A项电压`, visible: true },
{ key: 4, label: `B项电压`, visible: true },
{ key: 5, label: `C项电压`, visible: true },
{ key: 6, label: `A项电流`, visible: true },
{ key: 7, label: `B项电流`, visible: true },
{ key: 8, label: `C项电流`, visible: true },
{ key: 9, label: `记录时间`, visible: true },
{ key: 10, label: `功率因数`, visible: true },
{ key: 11, label: `正向有功`, visible: true },
{ key: 12, label: `有功功率`, visible: false },
{ key: 13, label: `无功功率`, visible: false },
{ key: 14, label: `采集方式`, visible: true },
{ key: 15, label: `计量设备名称`, visible: true }
{key: 0, label: `主键标识`, visible: false},
{key: 1, label: `计量设备编号`, visible: true},
{key: 2, label: `采集时间`, visible: true},
{key: 3, label: `A项电压`, visible: true},
{key: 4, label: `B项电压`, visible: true},
{key: 5, label: `C项电压`, visible: true},
{key: 6, label: `A项电流`, visible: true},
{key: 7, label: `B项电流`, visible: true},
{key: 8, label: `C项电流`, visible: true},
{key: 9, label: `记录时间`, visible: true},
{key: 10, label: `功率因数`, visible: true},
{key: 11, label: `正向有功`, visible: true},
{key: 12, label: `有功功率`, visible: false},
{key: 13, label: `无功功率`, visible: false},
{key: 14, label: `采集方式`, visible: true},
{key: 15, label: `计量设备名称`, visible: true}
]
}
},
@ -258,6 +263,7 @@ export default {
this.total = response.total
this.loading = false
})
this.getChart()
},
// 取消按钮
cancel() {
@ -317,7 +323,7 @@ export default {
/** 查询计量设备信息下拉树结构 */
getTreeselect() {
getMonitorInfoTree({ monitorType: 2 }).then(response => {
getMonitorInfoTree({monitorType: 2}).then(response => {
this.monitorInfoOptions = response.data
})
},
@ -332,8 +338,286 @@ export default {
handleNodeClick(data) {
this.queryParams.monitorCode = data.code
this.handleQuery()
}
},
async getChart(){
let query = JSON.parse(JSON.stringify(this.queryParams))
delete query.pageNum
delete query.pageSize
const {data} = await dnbInstantList(query)
let option1 = {
grid: {
top: "10%",
bottom: "10%",
left:'3%',
right:'3%'
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
label: {
show: true,
},
},
},
dataZoom:[{
type:'slider'
}],
legend: {},
xAxis: {
data: data.map(e=>e.collectTime),
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: "#000",
},
},
axisTick: {
show: true, //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: "#000", //X轴文字颜色
},
},
},
yAxis: [
{
type: "value",
name: "电流",
nameTextStyle: {
color: "#000",
},
splitLine: {
show: false,
},
axisTick: {
show: true,
},
axisLine: {
show: true,
lineStyle: {
color: "#000",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#000",
},
},
},
],
series: [
{
name: "A电流",
type: "line",
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: "circle", //标记的图形为实心圆
symbolSize: 10, //标记的大小
// itemStyle: {
// //折线拐点标志的样式
// color: "#058cff",
// },
// lineStyle: {
// color: "#058cff",
// },
// areaStyle: {
// color: "rgba(5,140,255, 0.2)",
// },
data: data.map(e=>e.ia),
},
{
name: "B电流",
type: "line",
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: "circle", //标记的图形为实心圆
symbolSize: 10, //标记的大小
// itemStyle: {
// //折线拐点标志的样式
// color: "#058cff",
// },
// lineStyle: {
// color: "#058cff",
// },
// areaStyle: {
// color: "rgba(5,140,255, 0.2)",
// },
data: data.map(e=>e.ib),
},
{
name: "C电流",
type: "line",
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: "circle", //标记的图形为实心圆
symbolSize: 10, //标记的大小
// itemStyle: {
// color: "#058cff",
// },
// lineStyle: {
// color: "#058cff",
// },
// areaStyle: {
// color: "rgba(5,140,255, 0.2)",
// },
data: data.map(e=>e.ic),
},
],
}
let option2 = {
grid: {
top: "10%",
bottom: "10%",
left:'3%',
right:'3%'
},
dataZoom:[{
type:'slider'
}],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
label: {
show: true,
},
},
},
legend: {},
xAxis: {
data: data.map(e=>e.collectTime),
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: "#000",
},
},
axisTick: {
show: true, //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: "#000", //X轴文字颜色
},
},
},
yAxis: [
{
type: "value",
name: "电压",
nameTextStyle: {
color: "#000",
},
splitLine: {
show: false,
},
axisTick: {
show: true,
},
axisLine: {
show: true,
lineStyle: {
color: "#000",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#000",
},
},
},
],
series: [
{
name: "A电压",
type: "line",
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: "circle", //标记的图形为实心圆
symbolSize: 10, //标记的大小
// itemStyle: {
// //折线拐点标志的样式
// color: "#058cff",
// },
// lineStyle: {
// color: "#058cff",
// },
// areaStyle: {
// color: "rgba(5,140,255, 0.2)",
// },
data: data.map(e=>e.va),
},
{
name: "B电压",
type: "line",
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: "circle", //标记的图形为实心圆
symbolSize: 10, //标记的大小
// itemStyle: {
// //折线拐点标志的样式
// color: "#058cff",
// },
// lineStyle: {
// color: "#058cff",
// },
// areaStyle: {
// color: "rgba(5,140,255, 0.2)",
// },
data: data.map(e=>e.vb),
},
{
name: "C电压",
type: "line",
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: "circle", //标记的图形为实心圆
symbolSize: 10, //标记的大小
// itemStyle: {
// color: "#058cff",
// },
// lineStyle: {
// color: "#058cff",
// },
// areaStyle: {
// color: "rgba(5,140,255, 0.2)",
// },
data: data.map(e=>e.vc),
},
],
}
this.$refs.Chart1.setData(option1)
this.$refs.Chart2.setData(option2)
echarts.connect(this.$refs.Chart1.chart,this.$refs.Chart2.chart)
this.$refs.Chart1.chart.on('datazoom',(e)=>{
option2.dataZoom[0].start = e.start
option2.dataZoom[0].end = e.end
this.$refs.Chart2.setData(option2)
})
this.$refs.Chart2.chart.on('datazoom',(e)=>{
option1.dataZoom[0].start = e.start
option1.dataZoom[0].end = e.end
this.$refs.Chart1.setData(option1)
})
}
}
}
</script>
<style>
.chart1{
width: 100%;
height: 40vh;
}
.chart2{
width: 100%;
height: 40vh;
}
</style>

Write Preview
Loading…
Cancel
Save