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>

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

@ -109,10 +109,6 @@
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
</el-col>
</el-row>
<pagination
v-show="total>0"
:total="total"
@ -120,6 +116,12 @@
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<Chart ref="Chart1" class="chart1"/>
<Chart ref="Chart2" class="chart2"/>
</el-col>
</el-row>
</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 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';
export default {
name: 'CurrentVoltageCurve',
dicts: ['collect_type'],
components: {
Chart,
Treeselect
},
data() {
@ -258,6 +263,7 @@ export default {
this.total = response.total
this.loading = false
})
this.getChart()
},
// 取消按钮
cancel() {
@ -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