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

调整页面echart

Browse Source
This commit is contained in:
GGJ
2025-05-06 16:38:10 +08:00
parent f8a26b3320
commit 60cdff21b6
9 changed files with 186 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -64,6 +64,18 @@ const initChart = () => {
backgroundColor: 'rgba(0,0,0,0.55)',
borderWidth: 0,
confine: true,
formatter: function (params: any) {
let tips = `<strong>${params[0].name}</strong></br>` // 标题加粗
params.forEach((item: any) => {
const value = item.value === 3.14159 ? '暂无数据' : Math.round(item.value * 100) / 100 // 处理特殊值
tips += `<div style=" display: flex;justify-content: space-between;">
<span>${item.marker}
${item.seriesName}:
</span>　${value}
</div>` // 统一格式
})
return tips
},
...(props.options?.tooltip || null)
},
toolbox: {

2
src/views/pqs/business/terminal/FrontManagement/index.vue
View File

@@ -144,7 +144,7 @@
<!-- 绑定监测点 -->
<Bind ref="bindRef" />
<!-- 绑定进程号 -->
<el-dialog draggable title="选择进程号" v-model="popUps" :close-on-click-modal="false" width="400px">
<el-dialog draggable title="绑定进程号" v-model="popUps" :close-on-click-modal="false" width="400px">
<el-select v-model="processNo" placeholder="请选择进程号" style="width: 100%">
<el-option
v-for="item in dataSource"

4
src/views/pqs/business/terminal/deviceter/index.vue
View File

@@ -1612,7 +1612,7 @@
<el-select
filterable
v-model="lineItem.areaSelect"
v-model="lineItem.actualArea"
placeholder="请选择实际安裝粒置"
:disabled="pageStatus == 1"
style="width: 100%"
@@ -1853,7 +1853,7 @@ const monitorPointDetail: any = ref({
calssificationGrade: 1,
//电网测变电站
powerSubstationName: '',
areaSelect: '',
actualArea: '',
//监测点拥有着
owner: '',
//拥有者职位

33
src/views/pqs/harmonicMonitoring/area/getIntegrityData/components/charts.vue
View File

@@ -111,24 +111,21 @@ const tableStore = new TableStore({
},
tooltip: {
backgroundColor: '#fff',
textStyle: {
color: '#000'
},
formatter: function (params: any) {
var tips = `<div style="min-width:80px;display:flex;justify-content:space-between;align-items:center">
<span style="margin-left:5px;dislpay:block;min-width:80px;color:#000">${params[0].name}</span></div>`
for (var i = 0; i < params.length; i++) {
// <p style="width:14px;height:8px;border-radius:2px;background:${
// legendColorList[i]
// }"></p>
tips += `<div style="min-width:80px;display:flex;justify-content:space-between;align-items:center">
<span style="margin-left:5px;dislpay:block;min-width:80px;color:#000">${params[i].seriesName
}</span> ${params[i].seriesName == '在线率' ? params[i].value?.toFixed(2) : params[i].value
} </div>`
}
return tips
}
// formatter: function (params: any) {
// var tips = `<div style="min-width:80px;display:flex;justify-content:space-between;align-items:center">
// <span style="margin-left:5px;dislpay:block;min-width:80px;color:#000">${params[0].name}</span></div>`
// for (var i = 0; i < params.length; i++) {
// // <p style="width:14px;height:8px;border-radius:2px;background:${
// // legendColorList[i]
// // }"></p>
// tips += `<div style="min-width:80px;display:flex;justify-content:space-between;align-items:center">
// <span style="margin-left:5px;dislpay:block;min-width:80px;color:#000">${params[i].seriesName
// }</span> ${params[i].seriesName == '在线率' ? params[i].value?.toFixed(2) : params[i].value
// } </div>`
// }
// return tips
// }
},
calculable: true,

32
src/views/pqs/harmonicMonitoring/area/harmonicDistortionRate/components/charts.vue
View File

@@ -58,22 +58,22 @@ const tableStore = new TableStore({
text: title
},
tooltip: {
formatter: function (params: any) {
var tips = ''
// tooltip: {
// formatter: function (params: any) {
// var tips = ''
for (var i = 0; i < params.length; i++) {
if (params[i].value == 1) {
tips += params[i].name + '</br>'
tips += '总畸变率:暂无数据'
} else {
tips += params[i].name + '</br>'
tips += '总畸变率:' + params[i].value.toFixed(2)
}
}
return tips
}
},
// for (var i = 0; i < params.length; i++) {
// if (params[i].value == 1) {
// tips += params[i].name + '</br>'
// tips += '总畸变率:暂无数据'
// } else {
// tips += params[i].name + '</br>'
// tips += '总畸变率:' + params[i].value.toFixed(2)
// }
// }
// return tips
// }
// },
xAxis: {
name: titleX,
@@ -85,7 +85,7 @@ const tableStore = new TableStore({
},
series: [
{
name: '',
name: '总畸变率',
type: 'bar',
data: tableStore.table.data.single,

188
src/views/pqs/harmonicMonitoring/area/qualifiedRate/components/charts.vue
View File

@@ -1,36 +1,47 @@
<template>
<div class="charts" style="position: relative; width: 100%">
<div style="position: absolute; right: 60px; top: 5px; font-weight: bold">
<el-tag style="
<el-tag
style="
background: #cc0000;
width: 30px;
height: 15px;
border: 1px solid #cc0000;
float: left;
margin-top: 2px;
"></el-tag>
"
></el-tag>
<span style="color: #cc0000; font-weight: 400; float: left">&nbsp&nbsp在线率<60% &nbsp&nbsp</span>
<el-tag size="small" style="
<el-tag
size="small"
style="
background: #ffcc33;
width: 30px;
height: 15px;
border: 1px solid #ffcc33;
float: left;
margin-top: 2px;
"></el-tag>
<span style="color: #ffcc33; font-weight: 400; float: left">&nbsp&nbsp60%≤在线率<90% &nbsp&nbsp</span>
<el-tag style="
"
></el-tag>
<span style="color: #ffcc33; font-weight: 400; float: left">&nbsp&nbsp60%≤在线率<90% &nbsp&nbsp</span>
<el-tag
style="
background: #339966;
width: 30px;
height: 15px;
border: 1px solid #339966;
float: left;
margin-top: 2px;
"></el-tag>
<span style="color: #339966; font-weight: 400; float: left">&nbsp&nbsp在线率≥90%</span>
"
></el-tag>
<span style="color: #339966; font-weight: 400; float: left">&nbsp&nbsp在线率≥90%</span>
</div>
<my-echart v-loading="loading" class="mt10" :style="`height: calc(${tableStore.table.height} - 135px)`"
:options="options" />
<my-echart
v-loading="loading"
class="mt10"
:style="`height: calc(${tableStore.table.height} - 135px)`"
:options="options"
/>
</div>
</template>
<script setup lang="ts">
@@ -44,8 +55,6 @@ import * as echarts from 'echarts/core'
const dictData = useDictData()
const options = ref({})
const TableHeaderRef = ref()
const tableStoreParams: any = ref({})
const loading = ref(false)
@@ -72,11 +81,11 @@ const itemStyle = {
[
{
offset: 1,
color: '#339966',
},
color: '#339966'
}
],
false
);
)
} else if (params.value >= 60 && params.value <= 90) {
return new echarts.graphic.LinearGradient(
0,
@@ -86,11 +95,11 @@ const itemStyle = {
[
{
offset: 1,
color: '#FFCC33',
},
color: '#FFCC33'
}
],
false
);
)
} else if (params.value <= 60 && params.value !== 3.14159) {
return new echarts.graphic.LinearGradient(
0,
@@ -100,11 +109,11 @@ const itemStyle = {
[
{
offset: 1,
color: '#CC0000',
},
color: '#CC0000'
}
],
false
);
)
} else if (params.value == 3.14159) {
return new echarts.graphic.LinearGradient(
0,
@@ -114,17 +123,16 @@ const itemStyle = {
[
{
offset: 1,
color: "#cccccc",
},
color: '#cccccc'
}
],
false
);
)
}
},
},
}
}
}
const tableStore = new TableStore({
url: '/harmonic-boot/steadyQualify/getSteadyQualifyCensus',
showPage: false,
@@ -135,7 +143,6 @@ const tableStore = new TableStore({
tableStore.table.params = tableStoreParams.value
},
loadCallback: () => {
let code = tableStore.table.params.statisticalType.code
let title = '',
titleX = ''
@@ -163,22 +170,21 @@ const tableStore = new TableStore({
show: false
},
// tooltip: {
// formatter: function (params: any) {
// var tips = ''
tooltip: {
// for (var i = 0; i < params.length; i++) {
// if (params[i].value == 1) {
// tips += params[i].name + '</br>'
// tips += '总畸变率:暂无数据'
// } else {
// tips += params[i].name + '</br>'
// tips += '总畸变率:' + params[i].value.toFixed(2)
// }
// }
// return tips
// }
// },
formatter: function (params: any) {
let tips = `<strong>${params[0].name}</strong></br>` // 标题加粗
params.forEach((item: any) => {
const value = item.value === 3.14159 ? '暂无数据' : item.value // 处理特殊值
tips += `<div style=" display: flex;justify-content: space-between;">
<span>${item.marker}
${item.seriesName}:
</span>　${value}
</div>` // 统一格式
})
return tips
}
},
xAxis: {
name: titleX,
@@ -190,112 +196,110 @@ const tableStore = new TableStore({
},
series: [
{
name: "频率偏差",
type: "bar",
name: '频率偏差',
type: 'bar',
itemStyle: itemStyle,
data: tableStore.table.data.freqOffset,
markLine: {
silent: false,
symbol: "circle",
symbol: 'circle',
data: [
{
name: "",
name: '',
yAxis: 100,
lineStyle: {
color: '#339966',
color: '#339966'
},
label: {
// position: "middle",
formatter: "{b}",
formatter: '{b}',
textStyle: {
color: '#339966',
},
},
color: '#339966'
}
}
},
{
name: "",
name: '',
yAxis: 90,
lineStyle: {
color: '#FFCC33',
color: '#FFCC33'
},
label: {
// position: "middle",
formatter: "{b}",
formatter: '{b}',
textStyle: {
color: '#FFCC33',
},
},
color: '#FFCC33'
}
}
},
{
name: "",
name: '',
yAxis: 60,
lineStyle: {
color: '#CC0000',
color: '#CC0000'
},
label: {
// position: "middle",
formatter: "{b}",
formatter: '{b}',
textStyle: {
color: '#CC0000',
},
},
},
],
},
color: '#CC0000'
}
}
}
]
}
},
{
name: "闪变",
type: "bar",
name: '闪变',
type: 'bar',
itemStyle: itemStyle,
data: tableStore.table.data.flicker,
data: tableStore.table.data.flicker
},
{
name: "三相电压不平衡",
type: "bar",
name: '三相电压不平衡',
type: 'bar',
itemStyle: itemStyle,
data: tableStore.table.data.voltageUnbalance,
data: tableStore.table.data.voltageUnbalance
},
{
name: "谐波电压",
type: "bar",
name: '谐波电压',
type: 'bar',
itemStyle: itemStyle,
data: tableStore.table.data.harmonicVoltage,
data: tableStore.table.data.harmonicVoltage
},
{
name: "电压偏差",
type: "bar",
name: '电压偏差',
type: 'bar',
itemStyle: itemStyle,
data: tableStore.table.data.voltageOffset,
data: tableStore.table.data.voltageOffset
},
{
name: "谐波电流",
type: "bar",
name: '谐波电流',
type: 'bar',
itemStyle: itemStyle,
data: tableStore.table.data.harmonicCurrent,
data: tableStore.table.data.harmonicCurrent
},
{
name: "负序电流",
type: "bar",
name: '负序电流',
type: 'bar',
itemStyle: itemStyle,
data: tableStore.table.data.negativeCurrent,
data: tableStore.table.data.negativeCurrent
},
{
name: "间谐波电压含有率",
type: "bar",
name: '间谐波电压含有率',
type: 'bar',
itemStyle: itemStyle,
data: tableStore.table.data.interHarmonic,
},
data: tableStore.table.data.interHarmonic
}
]
}
loading.value = false
}
})
provide('tableStore', tableStore)
onMounted(() => { })
onMounted(() => {})
defineExpose({ getTableStoreParams })
</script>
<style scoped lang="scss"></style>

40
src/views/pqs/harmonicMonitoring/area/terminalonlinerate/components/charts.vue
View File

@@ -125,26 +125,26 @@ const tableStore = new TableStore({
right: 0,
top: 0
},
tooltip: {
backgroundColor: '#fff',
textStyle: {
color: '#000'
},
formatter: function (params: any) {
var tips = `<div style="min-width:80px;display:flex;justify-content:space-between;align-items:center">
<span style="margin-left:5px;dislpay:block;min-width:80px;color:#000">${params[0].name}</span></div>`
for (var i = 0; i < params.length; i++) {
// <p style="width:14px;height:8px;border-radius:2px;background:${
// legendColorList[i]
// }"></p>
tips += `<div style="min-width:80px;display:flex;justify-content:space-between;align-items:center">
<span style="margin-left:5px;dislpay:block;min-width:80px;color:#000">${params[i].seriesName
}</span> ${params[i].seriesName == '在线率' ? params[i].value?.toFixed(2) : params[i].value
} </div>`
}
return tips
}
},
// tooltip: {
// backgroundColor: '#fff',
// textStyle: {
// color: '#000'
// },
// formatter: function (params: any) {
// var tips = `<div style="min-width:80px;display:flex;justify-content:space-between;align-items:center">
// <span style="margin-left:5px;dislpay:block;min-width:80px;color:#000">${params[0].name}</span></div>`
// for (var i = 0; i < params.length; i++) {
// // <p style="width:14px;height:8px;border-radius:2px;background:${
// // legendColorList[i]
// // }"></p>
// tips += `<div style="min-width:80px;display:flex;justify-content:space-between;align-items:center">
// <span style="margin-left:5px;dislpay:block;min-width:80px;color:#000">${params[i].seriesName
// }</span> ${params[i].seriesName == '在线率' ? params[i].value?.toFixed(2) : params[i].value
// } </div>`
// }
// return tips
// }
// },
grid: {
top: '50px', // 等价于 y: '16%'
left: '10px',

20
src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaishujufenxi/index.vue
View File

@@ -72,7 +72,7 @@
</div>
</div>
<div :style="{ height: pageHeight.height }" style="padding: 10px; overflow: hidden" v-if="!view">
<waveForm ref="waveFormRef" senior @backbxlb="backbxlb" />
<waveForm ref="waveFormRef" senior @backbxlb="backbxlb" />
</div>
</div>
</template>
@@ -1400,27 +1400,27 @@ const getEcharts = () => {
}
if (params[i].seriesName == 'A相谐波电流方向') {
tips +=
params[i].value[1] > 0
params[i].marker + params[i].value[1] > 0
? 'A相谐波电流方向:流入<br/>'
: params[i].value[1] == 0
? 'A相谐波电流方向:无<br/>'
: 'A相谐波电流方向:流出<br/>'
} else if (params[i].seriesName == 'B相谐波电流方向') {
tips +=
tips += params[i].marker +
params[i].value[1] > 0
? 'B相谐波电流方向:流入<br/>'
: params[i].value[1] == 0
? 'B相谐波电流方向:无<br/>'
: 'B相谐波电流方向:流出<br/>'
} else if (params[i].seriesName == 'C相谐波电流方向') {
tips +=
tips += params[i].marker +
params[i].value[1] > 0
? 'C相谐波电流方向:流入<br/>'
: params[i].value[1] == 0
? 'C相谐波电流方向:无<br/>'
: 'C相谐波电流方向:流出<br/>'
} else if (params[i].seriesName == '总谐波电流方向') {
tips +=
tips += params[i].marker +
params[i].value[1] > 0
? '总谐波电流方向:流入<br/>'
: params[i].value[1] == 0
@@ -1430,22 +1430,22 @@ const getEcharts = () => {
let str = (params[i].value[1] * 1).toString()
let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
let str1 = str.replace(reg, '$1,')
tips += params[i].seriesName.replace('(kV)', '') + ':' + str1 + 'kV<br/>'
tips += params[i].marker + params[i].seriesName.replace('(kV)', '') + ':' + str1 + 'kV<br/>'
} else if (params[i].seriesName == '零序电压(V)' || params[i].seriesName == '负序电压(V)') {
let str = (params[i].value[1] * 1).toString()
let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
let str1 = str.replace(reg, '$1,')
tips += params[i].seriesName.replace('(V)', '') + ':' + str1 + 'V<br/>'
tips += params[i].marker + params[i].seriesName.replace('(V)', '') + ':' + str1 + 'V<br/>'
} else if (params[i].seriesName !== '正序电压(kV)') {
let str = (params[i].value[1] * 1).toString()
let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
let str1 = str.replace(reg, '$1,')
tips += params[i].seriesName + ':' + str1 + '<br/>'
tips += params[i].marker + params[i].seriesName + ':' + str1 + '<br/>'
} else {
let str = (params[i].value[2] * 1).toString()
let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
let str1 = str.replace(reg, '$1,')
tips += params[i].seriesName + ':' + str1 + '<br/>'
tips += params[i].marker + params[i].seriesName + ':' + str1 + '<br/>'
let str2 = (params[i].value[3] * 1).toString()
let reg2 = str2.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
@@ -1453,7 +1453,7 @@ const getEcharts = () => {
// if(params[i].seriesName){
// }
tips += params[i].seriesName + ':' + str12 + '<br/>'
tips += params[i].marker + params[i].seriesName + ':' + str12 + '<br/>'
}
}

26
src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizhibiaohegelv/index.vue
View File

@@ -225,19 +225,19 @@ const init = () => {
fontSize: 14
},
backgroundColor: 'rgba(0,0,0,0.55)',
formatter: function (params: any) {
//console.log(params)
let msg = ''
msg += params[0].name + '<br/>'
for (let i in params) {
if (params[i].data == 1) {
msg += params[i].seriesName + ':暂无数据<br/>'
} else {
msg += params[i].seriesName + ':' + params[i].data + '<br/>'
}
}
return msg
}
// formatter: function (params: any) {
// //console.log(params)
// let msg = ''
// msg += params[0].name + '<br/>'
// for (let i in params) {
// if (params[i].data == 1) {
// msg += params[i].seriesName + ': 暂无数据<br/>'
// } else {
// msg += params[i].seriesName + ': ' + params[i].data + '<br/>'
// }
// }
// return msg
// }
},
xAxis: {
name: '指标类型',