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

echats样式修改

Browse Source
This commit is contained in:
仲么了
2024-02-27 14:18:01 +08:00
parent 92000b039f
commit 18080cc806
11 changed files with 388 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/api/device-boot/communicate.ts Normal file
View File

@@ -0,0 +1,18 @@
import request from '@/utils/request'
// 事件分析 获取数据
export function getRunOnlineRateData(data) {
return request({
url: "/device-boot/communicate/getRunOnlineRateData",
method: "post",
data
});
}
// 事件分析 运行状态 获取数据
export function getComFlagInfoData(data) {
return request({
url: "/device-boot/communicate/getComFlagInfoData",
method: "post",
data
});
}

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

@@ -8,6 +8,7 @@ import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
import * as echarts from 'echarts' // 全引入
import 'echarts-gl'
import 'echarts/lib/component/dataZoom'
import { color, gradeColor } from './color'
const chartRef = ref<HTMLDivElement>()
@@ -24,7 +25,7 @@ const initChart = () => {
chart?.dispose()
chart = echarts.init(chartRef.value as HTMLDivElement)
chart.setOption({
const options = {
title: {
left: 'center',
textStyle: {
@@ -35,7 +36,6 @@ const initChart = () => {
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
@@ -75,47 +75,56 @@ const initChart = () => {
},
xAxis: props.options.xAxis ? handlerXAxis() : null,
yAxis: props.options.yAxis ? handlerYAxis() : null,
dataZoom: [
dataZoom: props.options.dataZoom || [
{
type: 'inside',
height: 13,
start: 0,
bottom: '20px',
end: 100,
...(props.options.dataZoom || null)
end: 100
},
{
start: 0,
height: 13,
bottom: '20px',
end: 100,
...(props.options.dataZoom || null)
end: 100
}
],
color: [
...(props.options.color || ''),
'#07CCCA',
'#00BFF5',
'#FFBF00',
'#77DA63',
'#D5FF6B',
'#Ff6600',
'#FF9100',
'#5B6E96',
'#66FFCC',
'#B3B3B3'
],
color: props.options.color || color,
series: props.options.series,
...props.options.options
})
}
handlerBar(options)
// 处理柱状图
chart.setOption(options)
setTimeout(() => {
chart.resize()
}, 0)
}
const handlerBar = (options: any) => {
if (Array.isArray(options.series)) {
options.series.forEach((item: any) => {
if (item.type === 'bar') {
item.barMinHeight = 10
item.itemStyle = Object.assign(
{
color: (params: any) => {
console.log(params)
if (params.value == 0 || params.value == 3.14159) {
return '#ccc'
} else {
return color[params.seriesIndex]
}
}
}
)
}
})
}
}
const handlerYAxis = () => {
let temp = {
type: 'value',
nameTextStyle: {
color: '#000'
},

13
src/components/echarts/color.ts Normal file
View File

@@ -0,0 +1,13 @@
export const color = [
'#07CCCA',
'#00BFF5',
'#FFBF00',
'#77DA63',
'#D5FF6B',
'#Ff6600',
'#FF9100',
'#5B6E96',
'#66FFCC',
'#B3B3B3'
]
export const gradeColor = ['#339966', '#FFCC33', '#CC0000']

2
src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/ITICquxianfenxi/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div style='display: flex;flex-direction: column;height: 100%' v-loading='loading'>
<el-form :inline='true'>
<el-form-item label='时间间隔'>
<el-form-item label='日期'>
<DatePicker ref='datePickerRef'></DatePicker>
</el-form-item>
<el-form-item>

2
src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/SEMIF47fenxi/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div style='display: flex;flex-direction: column;height: 100%'>
<el-form :inline='true'>
<el-form-item label='时间间隔'>
<el-form-item label='日期'>
<DatePicker ref='datePickerRef'></DatePicker>
</el-form-item>
<el-form-item>

2
src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/chixushijiangailvfenbu/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div style='display: flex;flex-direction: column;height: 100%'>
<el-form :inline='true'>
<el-form-item label='时间间隔'>
<el-form-item label='日期'>
<DatePicker ref='datePickerRef'></DatePicker>
</el-form-item>
<el-form-item>

2
src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div v-loading='loading' class='dianyazanjiangbaojimidu'>
<el-form :inline='true'>
<el-form-item label='时间间隔'>
<el-form-item label='日期'>
<DatePicker ref='datePickerRef'></DatePicker>
</el-form-item>
<el-form-item>

11
src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfenbutongji/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div style='display: flex;flex-direction: column;height: 100%' v-loading='loading'>
<el-form :inline='true'>
<el-form-item label='时间间隔'>
<el-form-item label='日期'>
<DatePicker ref='datePickerRef'></DatePicker>
</el-form-item>
<el-form-item>
@@ -23,6 +23,7 @@ import DatePicker from '@/components/form/datePicker/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
import { getReasonTypeTime, getStatistic } from '@/api/event-boot/monitor'
import { color } from '@/components/echarts/color'
const datePickerRef = ref()
const loading = ref(true)
@@ -135,22 +136,20 @@ const initFirst = () => {
{
name: '暂降次数',
type: 'bar',
barMaxWidth: 30,
barMinHeight: 5,
barMinHeight: 10,
itemStyle: {
normal: {
color: function(params: any) {
if (params.data == 0) {
return '#ccc'
} else {
return '#07CCCA'
return color[0]
}
},
label: {
show: true,
textStyle: {
label: { show: true, position: 'top' },
color: '#8B008B'
label: { show: true, position: 'top' }
}
}
}

22
src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfuzhigailvfenbu/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div style='display: flex;flex-direction: column;height: 100%'>
<el-form :inline='true'>
<el-form-item label='时间间隔'>
<el-form-item label='日期'>
<DatePicker ref='datePickerRef'></DatePicker>
</el-form-item>
<el-form-item>
@@ -146,14 +146,6 @@ const init = () => {
}
],
series: [
{
name: '概率分布',
type: 'line',
data: eventValue,
itemStyle: {
normal: { show: true }
}
},
{
name: '占比',
type: 'bar',
@@ -162,10 +154,18 @@ const init = () => {
itemStyle: {
normal: { show: true }
}
},
{
name: '概率分布',
type: 'line',
data: eventValue,
itemStyle: {
normal: { show: true }
}
}
],
options:{
dataZoom: null,
options: {
dataZoom: null
}
}
nextTick(() => {

2
src/views/pms/voltageSags/monitoringPoint/online/index.vue
View File

@@ -10,7 +10,7 @@
<el-tab-pane label='事件分析' name='3' lazy>
<EventStudy />
</el-tab-pane>
<el-tab-pane label='运行情况' name='4' lazy>
<el-tab-pane label='运行情况' name='4' lazy :style='height'>
<RunningCondition />
</el-tab-pane>
</el-tabs>

309
src/views/pms/voltageSags/monitoringPoint/online/runningCondition/index.vue
View File

@@ -1,10 +1,311 @@
<template>
<div class='default-main'>
<div style='display: flex;flex-direction: column;height: 100%' v-loading='loading'>
<el-form :inline='true'>
<el-form-item label='日期'>
<DatePicker ref='datePickerRef'></DatePicker>
</el-form-item>
<el-form-item>
<el-button type='primary' @click='init'>查询</el-button>
</el-form-item>
</el-form>
<div style='flex: 1;' class='mt10 zanjiangfenbutongji'>
<my-echart :options='secondOptions' style='flex: 1;height: 100%' />
<my-echart :options='firstOptions' style='flex: 1;height: 100%' />
</div>
</div>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
import { nextTick, onMounted, reactive, ref } from 'vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
import { getComFlagInfoData, getRunOnlineRateData } from '@/api/device-boot/communicate'
import { gradeColor } from '@/components/echarts/color'
const datePickerRef = ref()
const loading = ref(true)
const monitoringPoint = useMonitoringPoint()
const formData = reactive({
id: monitoringPoint.state.lineId,
searchBeginTime: '',
searchEndTime: '',
timeFlag: 1
})
const firstOptions = ref<any>({})
const secondOptions = ref<any>({})
const firstData = ref<any>([])
const secondData = ref<any>([])
const init = () => {
loading.value = true
formData.searchBeginTime = datePickerRef.value.timeValue[0]
formData.searchEndTime = datePickerRef.value.timeValue[1]
formData.timeFlag = datePickerRef.value.interval
Promise.all([getRunOnlineRateData(formData), getComFlagInfoData(formData)]).then(res => {
firstData.value = res[0].data
secondData.value = res[1].data
initFirst()
initSecond()
loading.value = false
})
}
const initFirst = () => {
let months = new Array()
let handle = new Array()
let year = firstData.value[0].year
for (let i = 0; i < firstData.value.length; i++) {
if (formData.timeFlag == 0) {
months[i] = firstData.value[i].month
months[0] = firstData.value[i].month + '\n' + '(' + year + ')'
} else {
months[i] = firstData.value[i].month + '-' + firstData.value[i].day
months[0] = firstData.value[i].month + '-' + firstData.value[i].day + '\n' + '(' + year + ')'
}
handle.push(firstData.value[i].onlineRate)
}
firstOptions.value = {
title: {
text: '在线率统计',
x: 'center',
textStyle: {
fontWeight: 'normal'
}
},
// legend: {
// data: ["在线率"],
// left: "5%",
// },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
color: '#fff',
fontSize: 16
}
},
textStyle: {
color: '#fff',
fontStyle: 'normal',
opacity: 0.35,
fontSize: 14
},
backgroundColor: 'rgba(0,0,0,0.35)',
formatter: function(params: any) {
let tips = ''
tips += '时间:' + year + '-' + params[0].name + '</br/>'
for (let i = 0; i < params.length; i++) {
if (params[i].value == 3.14159) {
tips += params[i].seriesName + ':暂无数据<br/>'
} else {
tips += params[i].seriesName + ':' + params[i].value + '%<br/>'
}
}
return tips
}
},
xAxis: [
{
type: 'category',
data: months,
name: '时间',
nameTextStyle: {
verticalAlign: 'top', //标题位置
padding: [-5, 0, 0, -10]
},
splitLine: {
show: false
},
axisLine: {
show: true
}
}
],
yAxis: [
{
min: 0,
max: 100,
type: 'value',
name: '%',
axisLine: {
show: true
},
splitLine: {
show: false,
lineStyle: {
// 使用深浅的间隔色
type: 'dashed',
opacity: 0.5
}
}
}
],
series: [
{
name: '在线率',
zlevel: -99,
type: 'bar',
data: handle,
label: {
normal: {
show: false,
position: 'top'
}
},
markLine: {
silent: false,
symbol: 'circle',
data: [
{
yAxis: 100,
lineStyle: {
color: gradeColor[0]
},
label: {
position: 'end',
formatter: '100%'
}
},
{
yAxis: 90,
lineStyle: {
color: gradeColor[1]
},
label: {
position: 'end',
formatter: '90%'
}
},
{
yAxis: 60,
lineStyle: {
color: gradeColor[2]
},
label: {
position: 'end',
formatter: '60%'
}
}
]
}
}
]
}
}
const initSecond = () => {
let list = secondData.value.type
let items = secondData.value.updateTime
for (let i = 0; i < items.length; i++) {
if (i != 0) {
i
items[i] = items[i].slice(11)
} else if (i == 0) {
let date = items[i].slice(11)
let t = items[i].slice(0, 10)
items[i] = '(' + date + ')' + '\n' + t
}
}
secondOptions.value = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
color: '#fff',
fontSize: 16
}
},
textStyle: {
color: '#fff',
fontStyle: 'normal',
opacity: 0.35,
fontSize: 14
},
backgroundColor: 'rgba(0,0,0,0.35)',
formatter: function(params: any) {
let res = '时间: ' + params[0].name + '<br/>运行状态：'
let texts = ''
if (params[0].value === 2 || params[0].value === '2') {
texts = '退出'
} else if (params[0].value === 0 || params[0].value === '0') {
texts = '中断'
} else if (params[0].value === 1 || params[0].value === '1') {
texts = '正常'
}
res = res + texts
return res
}
},
legend: {
data: ['运行状态'],
left: '5%'
},
dataZoom: [
{
type: 'inside',
height: 13,
start: 0,
end: 100,
bottom: '25px'
},
{ height: 13, start: 0, bottom: '25px', end: 100 }
],
xAxis: {
name: '时间',
type: 'category',
data: items,
boundaryGap: false
},
yAxis: {
name: '状态',
type: 'value',
axisLine: {
show: true
},
axisLabel: {
show: true,
textStyle: {
color: 'blue'
},
// 这里重新定义就可以
formatter: function(value: number) {
let texts = []
if (value === 2) {
texts.push('退出')
} else if (value === 0) {
texts.push('中断')
} else if (value === 1) {
texts.push('正常')
}
return texts
}
}
},
series: [
{
name: '运行状态',
type: 'line',
step: 'end',
data: list
}
]
}
}
onMounted(() => {
init()
})
</script>
<style></style>
<style lang='scss'>
.zanjiangfenbutongji {
display: flex;
overflow: hidden;
}
</style>