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)', backgroundColor: 'rgba(0,0,0,0.55)',
borderWidth: 0, borderWidth: 0,
confine: true, 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) ...(props.options?.tooltip || null)
}, },
toolbox: { toolbox: {

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

@@ -144,7 +144,7 @@
<!-- 绑定监测点 --> <!-- 绑定监测点 -->
<Bind ref="bindRef" /> <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-select v-model="processNo" placeholder="请选择进程号" style="width: 100%">
<el-option <el-option
v-for="item in dataSource" v-for="item in dataSource"

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

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

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

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

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

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

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

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

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

@@ -1400,27 +1400,27 @@ const getEcharts = () => {
} }
if (params[i].seriesName == 'A相谐波电流方向') { if (params[i].seriesName == 'A相谐波电流方向') {
tips += tips +=
params[i].value[1] > 0 params[i].marker + params[i].value[1] > 0
? 'A相谐波电流方向:流入<br/>' ? 'A相谐波电流方向:流入<br/>'
: params[i].value[1] == 0 : params[i].value[1] == 0
? 'A相谐波电流方向:无<br/>' ? 'A相谐波电流方向:无<br/>'
: 'A相谐波电流方向:流出<br/>' : 'A相谐波电流方向:流出<br/>'
} else if (params[i].seriesName == 'B相谐波电流方向') { } else if (params[i].seriesName == 'B相谐波电流方向') {
tips += tips += params[i].marker +
params[i].value[1] > 0 params[i].value[1] > 0
? 'B相谐波电流方向:流入<br/>' ? 'B相谐波电流方向:流入<br/>'
: params[i].value[1] == 0 : params[i].value[1] == 0
? 'B相谐波电流方向:无<br/>' ? 'B相谐波电流方向:无<br/>'
: 'B相谐波电流方向:流出<br/>' : 'B相谐波电流方向:流出<br/>'
} else if (params[i].seriesName == 'C相谐波电流方向') { } else if (params[i].seriesName == 'C相谐波电流方向') {
tips += tips += params[i].marker +
params[i].value[1] > 0 params[i].value[1] > 0
? 'C相谐波电流方向:流入<br/>' ? 'C相谐波电流方向:流入<br/>'
: params[i].value[1] == 0 : params[i].value[1] == 0
? 'C相谐波电流方向:无<br/>' ? 'C相谐波电流方向:无<br/>'
: 'C相谐波电流方向:流出<br/>' : 'C相谐波电流方向:流出<br/>'
} else if (params[i].seriesName == '总谐波电流方向') { } else if (params[i].seriesName == '总谐波电流方向') {
tips += tips += params[i].marker +
params[i].value[1] > 0 params[i].value[1] > 0
? '总谐波电流方向:流入<br/>' ? '总谐波电流方向:流入<br/>'
: params[i].value[1] == 0 : params[i].value[1] == 0
@@ -1430,22 +1430,22 @@ const getEcharts = () => {
let str = (params[i].value[1] * 1).toString() let str = (params[i].value[1] * 1).toString()
let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
let str1 = str.replace(reg, '$1,') 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)') { } else if (params[i].seriesName == '零序电压(V)' || params[i].seriesName == '负序电压(V)') {
let str = (params[i].value[1] * 1).toString() let str = (params[i].value[1] * 1).toString()
let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
let str1 = str.replace(reg, '$1,') 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)') { } else if (params[i].seriesName !== '正序电压(kV)') {
let str = (params[i].value[1] * 1).toString() let str = (params[i].value[1] * 1).toString()
let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
let str1 = str.replace(reg, '$1,') let str1 = str.replace(reg, '$1,')
tips += params[i].seriesName + ':' + str1 + '<br/>' tips += params[i].marker + params[i].seriesName + ':' + str1 + '<br/>'
} else { } else {
let str = (params[i].value[2] * 1).toString() let str = (params[i].value[2] * 1).toString()
let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
let str1 = str.replace(reg, '$1,') 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 str2 = (params[i].value[3] * 1).toString()
let reg2 = str2.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g let reg2 = str2.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
@@ -1453,7 +1453,7 @@ const getEcharts = () => {
// if(params[i].seriesName){ // 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 fontSize: 14
}, },
backgroundColor: 'rgba(0,0,0,0.55)', backgroundColor: 'rgba(0,0,0,0.55)',
formatter: function (params: any) { // formatter: function (params: any) {
//console.log(params) // //console.log(params)
let msg = '' // let msg = ''
msg += params[0].name + '<br/>' // msg += params[0].name + '<br/>'
for (let i in params) { // for (let i in params) {
if (params[i].data == 1) { // if (params[i].data == 1) {
msg += params[i].seriesName + ':暂无数据<br/>' // msg += params[i].seriesName + ': 暂无数据<br/>'
} else { // } else {
msg += params[i].seriesName + ':' + params[i].data + '<br/>' // msg += params[i].seriesName + ': ' + params[i].data + '<br/>'
} // }
} // }
return msg // return msg
} // }
}, },
xAxis: { xAxis: {
name: '指标类型', name: '指标类型',