Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实时数据-数据更新闪动问题修改

Browse Source
This commit is contained in:
zhujiyan
2024-10-21 10:08:05 +08:00
parent 9ec4a8676c
commit 382085c514
2 changed files with 33 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/echarts/MyEchart.vue
View File

@@ -20,7 +20,7 @@ const config = useConfig()
color[0] = config.layout.elementUiPrimary[0]
const chartRef = ref<HTMLDivElement>()
const props = defineProps(['options','isInterVal'])
const props = defineProps(['options', 'isInterVal', 'pieInterVal'])
let chart: echarts.ECharts | any = null
const resizeHandler = () => {
// 不在视野中的时候不进行resize
@@ -33,8 +33,8 @@ const resizeHandler = () => {
})
}
const initChart = () => {
if(!props.isInterVal){
chart?.dispose()
if (!props.isInterVal && !props.pieInterVal) {
chart?.dispose()
}
// chart?.dispose()
chart = echarts.init(chartRef.value as HTMLDivElement)
@@ -111,6 +111,7 @@ const initChart = () => {
handlerBar(options)
// 处理柱状图
chart.setOption(options)
setTimeout(() => {
chart.resize()
}, 0)
@@ -146,7 +147,7 @@ const handlerYAxis = () => {
nameTextStyle: {
color: '#000'
},
splitNumber:5,
splitNumber: 5,
minInterval: 1,
axisLine: {
show: true,
@@ -158,7 +159,7 @@ const handlerYAxis = () => {
color: '#000',
fontSize: 14,
formatter: function (value) {
return value.toFixed(0); // 格式化显示为一位小数
return value.toFixed(0) // 格式化显示为一位小数
}
},
splitLine: {
@@ -168,8 +169,7 @@ const handlerYAxis = () => {
type: 'dashed',
opacity: 0.5
}
},
}
}
// props.options?.xAxis 是数组还是对象
if (Array.isArray(props.options?.yAxis)) {
@@ -199,11 +199,9 @@ const handlerXAxis = () => {
// textStyle: {
fontFamily: 'dinproRegular',
color: '#000',
fontSize: '12',
fontSize: '12'
// }
}
}
// props.options?.xAxis 是数组还是对象
if (Array.isArray(props.options?.xAxis)) {
@@ -244,7 +242,7 @@ onBeforeUnmount(() => {
watch(
() => props.options,
(newVal, oldVal) => {
initChart()
initChart()
}
)
</script>

39
src/views/govern/device/control/tabs/realtime.vue
View File

@@ -4,20 +4,32 @@
<!-- 左侧仪表盘 -->
<div class="view_top_left">
<div class="left_charts_title">电压有效值(kV)</div>
<div class="left_charts"><MyEchart ref="pieChart1" :options="echartsDataV1"></MyEchart></div>
<div class="left_charts"><MyEchart ref="pieChart2" :options="echartsDataV2"></MyEchart></div>
<div class="left_charts"><MyEchart ref="pieChart3" :options="echartsDataV3"></MyEchart></div>
<div class="left_charts">
<MyEchart :pieInterVal="true" ref="pieChart1" :options="echartsDataV1"></MyEchart>
</div>
<div class="left_charts">
<MyEchart :pieInterVal="true" ref="pieChart2" :options="echartsDataV2"></MyEchart>
</div>
<div class="left_charts">
<MyEchart :pieInterVal="true" ref="pieChart3" :options="echartsDataV3"></MyEchart>
</div>
</div>
<div class="view_top_mid">
<div class="mid_charts_title">基波电压/电流幅值(相位)</div>
<div class="mid_charts"><MyEchart :options="echartsData1"></MyEchart></div>
<div class="mid_charts"><MyEchart :pieInterVal="true" :options="echartsData1"></MyEchart></div>
</div>
<!-- 右侧仪表盘 -->
<div class="view_top_right">
<div class="right_charts_title">电流有效值(A)</div>
<div class="right_charts"><MyEchart ref="pieChart4" :options="echartsDataA1"></MyEchart></div>
<div class="right_charts"><MyEchart ref="pieChart5" :options="echartsDataA2"></MyEchart></div>
<div class="right_charts"><MyEchart ref="pieChart6" :options="echartsDataA3"></MyEchart></div>
<div class="right_charts">
<MyEchart :pieInterVal="true" ref="pieChart4" :options="echartsDataA1"></MyEchart>
</div>
<div class="right_charts">
<MyEchart :pieInterVal="true" ref="pieChart5" :options="echartsDataA2"></MyEchart>
</div>
<div class="right_charts">
<MyEchart :pieInterVal="true" ref="pieChart6" :options="echartsDataA3"></MyEchart>
</div>
</div>
</div>
<div class="view_bot">
@@ -178,7 +190,9 @@ const initRadioCharts = () => {
tooltip: {
formatter: '{a} <br/>{c} {b}'
},
legend: [],
legend: {
show: false
},
series: [
// 外圈电压 内圈电流
{
@@ -456,6 +470,7 @@ const init = () => {
//数值位置
detail: {
fontSize: 12,
valueAnimation: true,
formatter: '{value}',
offsetCenter: ['0%', '25%']
},
@@ -490,7 +505,6 @@ const columnsData: any = ref([])
const getColumns = () => {
getRealTimeTableList().then(res => {
columnsData.value = res.data
console.log(dataList.value, '+++++++++++++++++++++++++446')
getTableData(dataList.value)
})
}
@@ -498,12 +512,10 @@ const getColumns = () => {
const columnsDataTop: any = ref([])
const columnsDataBot: any = ref([])
const getTableData = (list: any) => {
console.log(list, '+++++++++++')
loading.value = true
tableData.value = list
columnsDataTop.value = []
columnsDataBot.value = []
console.log('🚀 ~ columnsData.value.map ~ columnsData.value:', columnsData.value)
columnsData.value.map((item: any, index: any) => {
item.map((vv: any) => {
@@ -526,14 +538,11 @@ const vRadioList: any = ref([])
const realData = ref<any>({})
const realList = ref<any>([])
console.log(realData.value, '++++++++++++++++++++++757')
const setRealData = (val: any) => {
console.log(val, '实时数据')
realData.value = val
realList.value = [val]
initRadioCharts()
//新的
console.log(realData.value, '--99--88--77')
echartsDataV1.value.options.series[0].data = [
{
name: 'A相',
@@ -630,7 +639,7 @@ onMounted(() => {
height: 80%;
position: absolute;
top: 20%;
bottom:10px;
bottom: 10px;
}
}