联调谐波责任划分页面
This commit is contained in:
guanj
@@ -48,3 +48,19 @@ export function displayHistoryData(data: any) {
|
||||
params: data
|
||||
})
|
||||
}
|
||||
//生成谐波责任指标
|
||||
export function getResponsibilityData(data: any) {
|
||||
return createAxios({
|
||||
url: '/advance-boot/responsibility/getResponsibilityData',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
//生成动态谐波责任数据
|
||||
export function getDynamicData(data: any) {
|
||||
return createAxios({
|
||||
url: '/advance-boot/responsibility/getDynamicData',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,321 +1,322 @@
|
||||
<template>
|
||||
<div class="chart">
|
||||
<div ref="chartRef" class="my-chart" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue'
|
||||
// import echarts from './echarts'
|
||||
import * as echarts from 'echarts' // 全引入
|
||||
import 'echarts-gl'
|
||||
import 'echarts-liquidfill'
|
||||
import 'echarts/lib/component/dataZoom'
|
||||
import { color, gradeColor3 } from './color'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const config = useConfig()
|
||||
// import { nextTick } from 'process'
|
||||
const emit = defineEmits(['triggerPoint', 'group'])
|
||||
color[0] = config.layout.elementUiPrimary[0]
|
||||
const chartRef = ref<HTMLDivElement>()
|
||||
|
||||
const props = defineProps(['options', 'isInterVal', 'pieInterVal'])
|
||||
let chart: echarts.ECharts | any = null
|
||||
const resizeHandler = () => {
|
||||
// 不在视野中的时候不进行resize
|
||||
if (!chartRef.value) return
|
||||
if (chartRef.value.offsetHeight == 0) return
|
||||
chart.getZr().painter.getViewportRoot().style.display = 'none'
|
||||
requestAnimationFrame(() => {
|
||||
chart.resize()
|
||||
chart.getZr().painter.getViewportRoot().style.display = ''
|
||||
})
|
||||
}
|
||||
const initChart = () => {
|
||||
if (!props.isInterVal && !props.pieInterVal) {
|
||||
chart?.dispose()
|
||||
}
|
||||
// chart?.dispose()
|
||||
chart = echarts.getInstanceByDom(chartRef.value as HTMLDivElement) || echarts.init(chartRef.value as HTMLDivElement)
|
||||
const options = {
|
||||
title: {
|
||||
left: 'center',
|
||||
// textStyle: {
|
||||
color: '#000',
|
||||
fontSize: 18,
|
||||
// },
|
||||
...(props.options?.title || null)
|
||||
},
|
||||
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.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 || item.value === 0.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: {
|
||||
right: 20,
|
||||
top: 15,
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
title: '', // 按钮标题
|
||||
icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z' // 自定义图标路径
|
||||
},
|
||||
|
||||
...(props.options?.toolbox?.featureProps || null)
|
||||
},
|
||||
emphasis: {
|
||||
iconStyle: {
|
||||
borderColor: config.layout.elementUiPrimary[0], // 鼠标悬停时的边框颜色
|
||||
color: config.layout.elementUiPrimary[0] // 鼠标悬停时的图标颜色
|
||||
}
|
||||
},
|
||||
// },
|
||||
...(props.options?.toolbox || null)
|
||||
},
|
||||
legend: {
|
||||
right: 50,
|
||||
top: 25,
|
||||
itemGap: 10,
|
||||
itemStyle: {},
|
||||
// textStyle: {
|
||||
fontSize: 12,
|
||||
padding: [2, 0, 0, 0], //[上、右、下、左]
|
||||
// },
|
||||
itemWidth: 15,
|
||||
itemHeight: 10,
|
||||
...(props.options?.legend || null)
|
||||
},
|
||||
grid: {
|
||||
top: '50px',
|
||||
left: '30px',
|
||||
right: '70px',
|
||||
bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
|
||||
containLabel: true,
|
||||
...(props.options?.grid || null)
|
||||
},
|
||||
xAxis: props.options?.xAxis ? handlerXAxis() : null,
|
||||
yAxis: props.options?.yAxis ? handlerYAxis() : null,
|
||||
dataZoom: props.options?.dataZoom || [
|
||||
{
|
||||
type: 'inside',
|
||||
height: 13,
|
||||
start: 0,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
height: 13,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
color: props.options?.color || color,
|
||||
series: props.options?.series,
|
||||
...props.options?.options
|
||||
}
|
||||
// console.log(options.series,"获取x轴");
|
||||
handlerBar(options)
|
||||
// 处理柱状图
|
||||
chart.setOption(options, true)
|
||||
// chart.group = 'group'
|
||||
emit('group',chart)
|
||||
// 添加点击事件
|
||||
chart.on('click', function (params) {
|
||||
if (params.seriesName == '暂态触发点') {
|
||||
emit('triggerPoint', params.data)
|
||||
}
|
||||
})
|
||||
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.barMaxWidth = 20
|
||||
item.itemStyle = Object.assign(
|
||||
{
|
||||
color: (params: any) => {
|
||||
if (params.value == 0 || params.value == 3.14159 || params.value == 0.14159) {
|
||||
return '#ccc'
|
||||
} else {
|
||||
return props.options?.color
|
||||
? props.options?.color[params.seriesIndex]
|
||||
: color[params.seriesIndex]
|
||||
}
|
||||
}
|
||||
},
|
||||
item.itemStyle
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const handlerYAxis = () => {
|
||||
let temp = {
|
||||
type: 'value',
|
||||
nameGap: 15,
|
||||
nameTextStyle: {
|
||||
color: '#000'
|
||||
},
|
||||
splitNumber: 5,
|
||||
minInterval: 1,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#000',
|
||||
fontSize: 14,
|
||||
formatter: function (value) {
|
||||
return parseFloat(value.toFixed(1)) // 格式化显示为一位小数
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['#ccc'],
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
// props.options?.xAxis 是数组还是对象
|
||||
if (Array.isArray(props.options?.yAxis)) {
|
||||
return props.options?.yAxis.map((item: any) => {
|
||||
return {
|
||||
...temp,
|
||||
...item
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return {
|
||||
...temp,
|
||||
...props.options?.yAxis
|
||||
}
|
||||
}
|
||||
}
|
||||
const handlerXAxis = () => {
|
||||
let temp = {
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
nameTextStyle: {
|
||||
color: '#000'
|
||||
},
|
||||
axisLine: {
|
||||
// lineStyle: {
|
||||
color: '#000'
|
||||
// }
|
||||
},
|
||||
axisLabel: {
|
||||
// textStyle: {
|
||||
fontFamily: 'dinproRegular',
|
||||
color: '#000',
|
||||
fontSize: '12'
|
||||
// }
|
||||
}
|
||||
// boundaryGap: false,
|
||||
}
|
||||
// props.options?.xAxis 是数组还是对象
|
||||
if (Array.isArray(props.options?.xAxis)) {
|
||||
return props.options?.xAxis.map((item: any) => {
|
||||
return {
|
||||
...temp,
|
||||
...item
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return {
|
||||
...temp,
|
||||
...props.options?.xAxis
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let throttle: ReturnType<typeof setTimeout>
|
||||
// 动态计算table高度
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
for (const entry of entries) {
|
||||
if (throttle) {
|
||||
clearTimeout(throttle)
|
||||
}
|
||||
throttle = setTimeout(() => {
|
||||
resizeHandler()
|
||||
}, 100)
|
||||
}
|
||||
})
|
||||
const setOptions = (options: any) => {
|
||||
chart.setOption(options)
|
||||
}
|
||||
const getChart = () => {
|
||||
return chart
|
||||
}
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
resizeObserver.observe(chartRef.value!)
|
||||
})
|
||||
defineExpose({ initChart, setOptions, getChart })
|
||||
onBeforeUnmount(() => {
|
||||
resizeObserver.unobserve(chartRef.value!)
|
||||
chart?.dispose()
|
||||
})
|
||||
watch(
|
||||
() => props.options,
|
||||
(newVal, oldVal) => {
|
||||
initChart()
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.el-button {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: -60px;
|
||||
}
|
||||
|
||||
.my-chart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="chart">
|
||||
<div ref="chartRef" class="my-chart" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue'
|
||||
// import echarts from './echarts'
|
||||
import * as echarts from 'echarts' // 全引入
|
||||
import 'echarts-gl'
|
||||
import 'echarts-liquidfill'
|
||||
import 'echarts/lib/component/dataZoom'
|
||||
import { color, gradeColor3 } from './color'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const config = useConfig()
|
||||
// import { nextTick } from 'process'
|
||||
const emit = defineEmits(['triggerPoint', 'group'])
|
||||
color[0] = config.layout.elementUiPrimary[0]
|
||||
const chartRef = ref<HTMLDivElement>()
|
||||
|
||||
const props = defineProps(['options', 'isInterVal', 'pieInterVal'])
|
||||
let chart: echarts.ECharts | any = null
|
||||
const resizeHandler = () => {
|
||||
// 不在视野中的时候不进行resize
|
||||
if (!chartRef.value) return
|
||||
if (chartRef.value.offsetHeight == 0) return
|
||||
chart.getZr().painter.getViewportRoot().style.display = 'none'
|
||||
requestAnimationFrame(() => {
|
||||
chart.resize()
|
||||
chart.getZr().painter.getViewportRoot().style.display = ''
|
||||
})
|
||||
}
|
||||
const initChart = () => {
|
||||
if (!props.isInterVal && !props.pieInterVal) {
|
||||
chart?.dispose()
|
||||
}
|
||||
// chart?.dispose()
|
||||
chart = echarts.getInstanceByDom(chartRef.value as HTMLDivElement) || echarts.init(chartRef.value as HTMLDivElement)
|
||||
const options = {
|
||||
title: {
|
||||
left: 'center',
|
||||
// textStyle: {
|
||||
color: '#000',
|
||||
fontSize: 18,
|
||||
// },
|
||||
...(props.options?.title || null)
|
||||
},
|
||||
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.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 || item.value === 0.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: {
|
||||
right: 20,
|
||||
top: 15,
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
title: '', // 按钮标题
|
||||
icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z' // 自定义图标路径
|
||||
},
|
||||
|
||||
...(props.options?.toolbox?.featureProps || null)
|
||||
},
|
||||
emphasis: {
|
||||
iconStyle: {
|
||||
borderColor: config.layout.elementUiPrimary[0], // 鼠标悬停时的边框颜色
|
||||
color: config.layout.elementUiPrimary[0] // 鼠标悬停时的图标颜色
|
||||
}
|
||||
},
|
||||
// },
|
||||
...(props.options?.toolbox || null)
|
||||
},
|
||||
legend: {
|
||||
right: 50,
|
||||
top: 25,
|
||||
itemGap: 10,
|
||||
itemStyle: {},
|
||||
// textStyle: {
|
||||
fontSize: 12,
|
||||
padding: [2, 0, 0, 0], //[上、右、下、左]
|
||||
// },
|
||||
itemWidth: 15,
|
||||
itemHeight: 10,
|
||||
...(props.options?.legend || null)
|
||||
},
|
||||
grid: {
|
||||
top: '50px',
|
||||
left: '30px',
|
||||
right: '70px',
|
||||
bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
|
||||
containLabel: true,
|
||||
...(props.options?.grid || null)
|
||||
},
|
||||
xAxis: props.options?.xAxis ? handlerXAxis() : null,
|
||||
yAxis: props.options?.yAxis ? handlerYAxis() : null,
|
||||
dataZoom: props.options?.dataZoom || [
|
||||
{
|
||||
type: 'inside',
|
||||
height: 13,
|
||||
start: 0,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
height: 13,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
color: props.options?.color || color,
|
||||
series: props.options?.series,
|
||||
...props.options?.options
|
||||
}
|
||||
// console.log(options.series,"获取x轴");
|
||||
handlerBar(options)
|
||||
// 处理柱状图
|
||||
chart.setOption(options, true)
|
||||
// chart.group = 'group'
|
||||
emit('group', chart, chartRef.value)
|
||||
// 添加点击事件
|
||||
chart.on('click', function (params) {
|
||||
if (params.seriesName == '暂态触发点') {
|
||||
emit('triggerPoint', params.data)
|
||||
}
|
||||
})
|
||||
|
||||
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.barMaxWidth = 20
|
||||
item.itemStyle = Object.assign(
|
||||
{
|
||||
color: (params: any) => {
|
||||
if (params.value == 0 || params.value == 3.14159 || params.value == 0.14159) {
|
||||
return '#ccc'
|
||||
} else {
|
||||
return props.options?.color
|
||||
? props.options?.color[params.seriesIndex]
|
||||
: color[params.seriesIndex]
|
||||
}
|
||||
}
|
||||
},
|
||||
item.itemStyle
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const handlerYAxis = () => {
|
||||
let temp = {
|
||||
type: 'value',
|
||||
nameGap: 15,
|
||||
nameTextStyle: {
|
||||
color: '#000'
|
||||
},
|
||||
splitNumber: 5,
|
||||
minInterval: 1,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#000',
|
||||
fontSize: 14,
|
||||
formatter: function (value) {
|
||||
return parseFloat(value.toFixed(1)) // 格式化显示为一位小数
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['#ccc'],
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
// props.options?.xAxis 是数组还是对象
|
||||
if (Array.isArray(props.options?.yAxis)) {
|
||||
return props.options?.yAxis.map((item: any) => {
|
||||
return {
|
||||
...temp,
|
||||
...item
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return {
|
||||
...temp,
|
||||
...props.options?.yAxis
|
||||
}
|
||||
}
|
||||
}
|
||||
const handlerXAxis = () => {
|
||||
let temp = {
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
nameTextStyle: {
|
||||
color: '#000'
|
||||
},
|
||||
axisLine: {
|
||||
// lineStyle: {
|
||||
color: '#000'
|
||||
// }
|
||||
},
|
||||
axisLabel: {
|
||||
// textStyle: {
|
||||
fontFamily: 'dinproRegular',
|
||||
color: '#000',
|
||||
fontSize: '12'
|
||||
// }
|
||||
}
|
||||
// boundaryGap: false,
|
||||
}
|
||||
// props.options?.xAxis 是数组还是对象
|
||||
if (Array.isArray(props.options?.xAxis)) {
|
||||
return props.options?.xAxis.map((item: any) => {
|
||||
return {
|
||||
...temp,
|
||||
...item
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return {
|
||||
...temp,
|
||||
...props.options?.xAxis
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let throttle: ReturnType<typeof setTimeout>
|
||||
// 动态计算table高度
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
for (const entry of entries) {
|
||||
if (throttle) {
|
||||
clearTimeout(throttle)
|
||||
}
|
||||
throttle = setTimeout(() => {
|
||||
resizeHandler()
|
||||
}, 100)
|
||||
}
|
||||
})
|
||||
const setOptions = (options: any) => {
|
||||
chart.setOption(options)
|
||||
}
|
||||
const getChart = () => {
|
||||
return chart
|
||||
}
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
resizeObserver.observe(chartRef.value!)
|
||||
})
|
||||
defineExpose({ initChart, setOptions, getChart })
|
||||
onBeforeUnmount(() => {
|
||||
resizeObserver.unobserve(chartRef.value!)
|
||||
chart?.dispose()
|
||||
})
|
||||
watch(
|
||||
() => props.options,
|
||||
(newVal, oldVal) => {
|
||||
initChart()
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.el-button {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: -60px;
|
||||
}
|
||||
|
||||
.my-chart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -69,7 +69,7 @@ const tableStore = new TableStore({
|
||||
},
|
||||
|
||||
{
|
||||
title: '日志错误码',
|
||||
title: '日志类型',
|
||||
field: 'codeName',
|
||||
minWidth: '180',
|
||||
formatter: (row: any) => {
|
||||
|
||||
@@ -4,7 +4,8 @@
|
||||
<div class="title">
|
||||
贡献度计算
|
||||
<div style="font-size: 14px; font-weight: 500">
|
||||
{{ dotList.alias || '' }}
|
||||
<!-- {{ dotList.alias || '' }} -->
|
||||
<span class="monitoring-point">当前位置：{{ dotList.alias || '' }}</span>
|
||||
<back-component />
|
||||
</div>
|
||||
</div>
|
||||
@@ -45,7 +46,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="负荷数据:">
|
||||
<el-select v-model="form.loadData" clearable filterable placeholder="请选择负荷数据">
|
||||
<el-select v-model="form.loadDataId" clearable filterable placeholder="请选择负荷数据">
|
||||
<el-option
|
||||
v-for="item in loadDataOptions"
|
||||
:key="item.id"
|
||||
@@ -61,7 +62,7 @@
|
||||
<el-button type="primary" icon="el-icon-Select" @click="submit">确定</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-tabs v-model="activeName" type="card" class="demo-tabs" v-if="showTabs">
|
||||
<el-tabs v-model="activeName" type="border-card" class="mr10" v-if="showTabs">
|
||||
<el-tab-pane v-for="(item, index) in tabList" :key="item" :label="item.label" :name="index">
|
||||
<div class="pd10">
|
||||
<div>
|
||||
@@ -75,31 +76,93 @@
|
||||
format="YYYY-MM-DD"
|
||||
date-format="YYYY-MM-DD"
|
||||
time-format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled-date="handleDisabledDate"
|
||||
/>
|
||||
<el-button type="primary" icon="el-icon-CaretRight" @click="execute(item, index)">
|
||||
执行
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="item.showExecute">
|
||||
<el-form :inline="true" v-model="item.form" class="mt10">
|
||||
<el-form-item label="限值:">
|
||||
<el-input v-model="item.form.limit" placeholder="请输入限值" />
|
||||
<div v-if="item.showEcahr == 1" class="harmonicButton">
|
||||
<el-form :inline="true" v-model="item.form">
|
||||
<el-form-item label="限值:" v-if="item.showDynamic">
|
||||
<el-input v-model="item.form.limit" placeholder="请选择限值" disabled>
|
||||
<template #append>
|
||||
<el-button
|
||||
:icon="Edit"
|
||||
:class="[code == 0 ? 'frontBox' : '']"
|
||||
@click="setCode(0)"
|
||||
/>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间点一:">
|
||||
<el-input v-model="item.form.time1" placeholder="请输入时间点一" />
|
||||
<el-form-item label="时间点一:" v-if="item.showDynamic">
|
||||
<el-input v-model="item.form.time1" placeholder="请选择时间点一" disabled>
|
||||
<template #append>
|
||||
<el-button
|
||||
:icon="Edit"
|
||||
:class="[code == 1 ? 'frontBox' : '']"
|
||||
@click="setCode(1)"
|
||||
/>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间点二:">
|
||||
<el-input v-model="item.form.time2" placeholder="请输入时间点二" />
|
||||
<el-form-item label="时间点二:" v-if="item.showDynamic">
|
||||
<el-input v-model="item.form.time2" placeholder="请选择时间点二" disabled>
|
||||
<template #append>
|
||||
<el-button
|
||||
:icon="Edit"
|
||||
:class="[code == 2 ? 'frontBox' : '']"
|
||||
@click="setCode(2)"
|
||||
/>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-Document">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-Document"
|
||||
@click="generateFn"
|
||||
v-if="!item.showDynamic"
|
||||
>
|
||||
生成动态谐波责任数据
|
||||
</el-button>
|
||||
<el-button type="primary" icon="el-icon-Document">生成谐波责任指标</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-Document"
|
||||
v-else
|
||||
@click="generateMetrics"
|
||||
>
|
||||
生成谐波责任指标
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="box" v-loading="loading">
|
||||
<MyEChart :options="item.options" v-if="item.showEcahr == 1" @group="group" />
|
||||
<el-empty description="时间范围内无谐波数据" v-if="item.showEcahr == 2" />
|
||||
</div>
|
||||
<!-- 生成动态谐波责任数据 -->
|
||||
<div class="box boxTab" v-loading="loading1">
|
||||
<MyEChart :options="item.dynamicOptions" style="flex: 1" v-if="item.showDynamic" />
|
||||
<div style="width: 500px">
|
||||
<vxe-table
|
||||
v-if="item.showDynamic"
|
||||
ref="tableRef"
|
||||
:data="item.dynamicData"
|
||||
height="auto"
|
||||
v-bind="defaultAttribute"
|
||||
>
|
||||
<vxe-column field="customerName" title="用户名(用户号)"></vxe-column>
|
||||
<vxe-column field="responsibilityData" title="责任数据(%)" width="120">
|
||||
<template v-slot="{ row }">
|
||||
{{ Math.floor(row.responsibilityData * 10000) / 10000 }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
@@ -112,14 +175,17 @@ import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import 'splitpanes/dist/splitpanes.css'
|
||||
import { Splitpanes, Pane } from 'splitpanes'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import PointTree from '@/components/tree/pqs/pointTree.vue'
|
||||
import BackComponent from '@/components/icon/back/index.vue'
|
||||
import { harmonicOptions } from '@/utils/dictionary'
|
||||
import { userDataList } from '@/api/advance-boot/division'
|
||||
import { userDataList, getHistoryHarmData, getDynamicData, getResponsibilityData } from '@/api/advance-boot/division'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import { getHistoryHarmData } from '@/api/advance-boot/division'
|
||||
import { Edit } from '@element-plus/icons-vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import { timeFormat } from '@/utils/common'
|
||||
import { yMethod } from '@/utils/echartMethod'
|
||||
defineOptions({
|
||||
name: 'division/compute'
|
||||
})
|
||||
@@ -132,23 +198,29 @@ const size = ref(0)
|
||||
const showTabs = ref(false)
|
||||
const loadDataOptions: any = ref([])
|
||||
const form: any = reactive({
|
||||
type: '0',
|
||||
type: '1',
|
||||
index: [],
|
||||
loadData: ''
|
||||
loadDataId: ''
|
||||
})
|
||||
const code = ref(3)
|
||||
const xAxisData = ref([])
|
||||
const loading = ref(false)
|
||||
const loading1 = ref(false)
|
||||
const tabList: any = ref([])
|
||||
const activeName = ref(0)
|
||||
const xValue = ref('')
|
||||
const handleNodeClick = (data: any, node: any) => {
|
||||
if (data.level == 6) {
|
||||
dotList.value = data
|
||||
}
|
||||
}
|
||||
// 设置时间
|
||||
const timeFrame = ref(['', ''])
|
||||
// 处理日期禁用逻辑
|
||||
const handleDisabledDate = date => {
|
||||
// 定义时间边界
|
||||
const startLimit = new Date(tabList.value[0].time[0]).getTime()
|
||||
const endLimit = new Date(tabList.value[0].time[1]).setHours(23, 59, 59, 999)
|
||||
const startLimit = new Date(timeFrame.value[0]).getTime() - 86400000 //向前推1天
|
||||
const endLimit = new Date(timeFrame.value[1]).setHours(23, 59, 59, 999)
|
||||
|
||||
// 如果日期不存在（选择今天时可能出现），不禁用
|
||||
if (!date) return false
|
||||
@@ -156,16 +228,26 @@ const handleDisabledDate = date => {
|
||||
// 禁用 2025-08-01 之前和 2025-08-31 之后的日期
|
||||
return date.getTime() < startLimit || date.getTime() > endLimit
|
||||
}
|
||||
// 这是按钮变色
|
||||
const setCode = (num: number) => {
|
||||
if (code.value == num) {
|
||||
return (code.value = 3)
|
||||
}
|
||||
code.value = num
|
||||
}
|
||||
// 确定
|
||||
const submit = () => {
|
||||
if (form.loadData == '') {
|
||||
if (form.loadDataId == '') {
|
||||
return ElMessage.warning('请选择负荷数据')
|
||||
}
|
||||
if (form.index.length == 0) {
|
||||
return ElMessage.warning('请选择谐波次数')
|
||||
}
|
||||
|
||||
if (form.index.length == 0) {
|
||||
showTabs.value = false
|
||||
} else {
|
||||
let timeList = loadDataOptions.value.filter((item: any) => item.id == form.loadData)[0]
|
||||
let timeList = loadDataOptions.value.filter((item: any) => item.id == form.loadDataId)[0]
|
||||
showTabs.value = true
|
||||
let list = JSON.parse(JSON.stringify(form.index)).sort((a, b) => a - b)
|
||||
tabList.value = []
|
||||
@@ -179,24 +261,311 @@ const submit = () => {
|
||||
limit: '',
|
||||
time1: '',
|
||||
time2: ''
|
||||
}
|
||||
},
|
||||
showEcahr: 3, //1显示echart 2显示无数据 3什么都没有
|
||||
options: {},
|
||||
dynamicOptions: {}, //动态echarts
|
||||
dynamicList: {}, //动态echarts
|
||||
showDynamic: false //动态执行展示
|
||||
})
|
||||
timeFrame.value = [timeList.startTime, timeList.endTime]
|
||||
})
|
||||
// tabList.value =
|
||||
code.value = 3
|
||||
activeName.value = 0
|
||||
}
|
||||
}
|
||||
// 执行
|
||||
const execute = (item: any, index: number) => {
|
||||
getHistoryHarmData({
|
||||
const execute = async (item: any, index: number) => {
|
||||
tabList.value[activeName.value].showDynamic = false
|
||||
loading.value = true
|
||||
await getHistoryHarmData({
|
||||
searchBeginTime: item.time[0],
|
||||
searchEndTime: item.time[1],
|
||||
type: form.type,
|
||||
time: item.key,
|
||||
// userDataId:form.loadData,
|
||||
lineId: dotList.value.id
|
||||
}).then((res: any) => {})
|
||||
tabList.value[index].showExecute = true
|
||||
})
|
||||
.then((res: any) => {
|
||||
let [min, max] = yMethod(res.data.historyData.map((item: any) => item.value + 0.1))
|
||||
xAxisData.value = res.data.historyData.map((item: any) => item.time)
|
||||
tabList.value[index].options = {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
name: '时间',
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
formatter(params: any) {
|
||||
xValue.value = params[0].value[0]
|
||||
let str = params[0].value[0] + '<br/>'
|
||||
for (let i = 0; i < params.length; i++) {
|
||||
str = str + params[i].marker + params[i].seriesName + '：' + params[i].value[1] + '<br/>'
|
||||
}
|
||||
|
||||
return str
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 30
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
name: form.type == 1 ? '%' : 'A',
|
||||
min: min,
|
||||
max: max
|
||||
},
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: item.key + (form.type == 1 ? '次谐波电压' : '次谐波电流'),
|
||||
data: res.data.historyData.map((item: any) => [
|
||||
item.time,
|
||||
Math.floor(item.value * 10000) / 10000
|
||||
]),
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
markLine: {
|
||||
symbol: 'none', // 去除箭头
|
||||
label: {
|
||||
show: false // 隐藏标签
|
||||
},
|
||||
data: [
|
||||
{
|
||||
yAxis: ''
|
||||
},
|
||||
{
|
||||
xAxis: ''
|
||||
},
|
||||
{
|
||||
xAxis: ''
|
||||
}
|
||||
],
|
||||
// 样式配置
|
||||
lineStyle: {
|
||||
color: 'red',
|
||||
type: 'dashed' // 虚线
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
tabList.value[index].showEcahr = 1
|
||||
loading.value = false
|
||||
})
|
||||
.catch(() => {
|
||||
tabList.value[index].showEcahr = 2
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
const resDataId = ref('')
|
||||
// 生成动态谐波责任数据
|
||||
const generateFn = async () => {
|
||||
loading1.value = true
|
||||
await getDynamicData({
|
||||
lineId: dotList.value.id,
|
||||
searchBeginTime: tabList.value[activeName.value].time[0],
|
||||
searchEndTime: tabList.value[activeName.value].time[1],
|
||||
time: tabList.value[activeName.value].key,
|
||||
type: form.type,
|
||||
userDataId: form.loadDataId
|
||||
})
|
||||
.then((res: any) => {
|
||||
resDataId.value = res.data.responsibilityDataIndex
|
||||
tabList.value[activeName.value].dynamicData = res.data.responsibilities
|
||||
let [min, max] = yMethod(res.data.datas.map((item: any) => item.valueDatas).flat())
|
||||
let series: any[] = []
|
||||
let time: any[] = res.data.timeDatas.map((item: any) => timeFormat(item))
|
||||
res.data.datas.forEach((item: any) => {
|
||||
series.push({
|
||||
name: item.customerName,
|
||||
data: item.valueDatas.map((k: any, i: number) => [time[i], Math.floor(k * 10000) / 10000]),
|
||||
type: 'line',
|
||||
symbol: 'none'
|
||||
})
|
||||
})
|
||||
|
||||
tabList.value[activeName.value].dynamicOptions = {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
name: '时间',
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
formatter(params: any) {
|
||||
let str = params[0].value[0] + '<br/>'
|
||||
for (let i = 0; i < params.length; i++) {
|
||||
str = str + params[i].marker + params[i].seriesName + '：' + params[i].value[1] + '<br/>'
|
||||
}
|
||||
|
||||
return str
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 30
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
name: form.type == 1 ? '%' : 'A',
|
||||
min: min,
|
||||
max: max
|
||||
},
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
|
||||
options: {
|
||||
series: series
|
||||
}
|
||||
}
|
||||
|
||||
tabList.value[activeName.value].showDynamic = true
|
||||
})
|
||||
.catch(() => {
|
||||
loading1.value = false
|
||||
})
|
||||
loading1.value = false
|
||||
}
|
||||
// 生成指标
|
||||
const generateMetrics = async () => {
|
||||
if (tabList.value[activeName.value].form.limit == '') return ElMessage.warning('请选择限值!')
|
||||
if (tabList.value[activeName.value].form.time1 == '') return ElMessage.warning('请选择时间一!')
|
||||
if (tabList.value[activeName.value].form.time2 == '') return ElMessage.warning('请选择时间二!')
|
||||
loading1.value = true
|
||||
await getResponsibilityData({
|
||||
limitEndTime: tabList.value[activeName.value].form.time2,
|
||||
limitStartTime: tabList.value[activeName.value].form.time1,
|
||||
limitValue: tabList.value[activeName.value].form.limit,
|
||||
resDataId: resDataId.value,
|
||||
time: tabList.value[activeName.value].key,
|
||||
type: form.type
|
||||
})
|
||||
.then((res: any) => {
|
||||
tabList.value[activeName.value].dynamicData = res.data.responsibilities
|
||||
let [min, max] = yMethod(res.data.datas.map((item: any) => item.valueDatas).flat())
|
||||
let series: any[] = []
|
||||
let time: any[] = res.data.timeDatas.map((item: any) => timeFormat(item))
|
||||
res.data.datas.forEach((item: any) => {
|
||||
series.push({
|
||||
name: item.customerName,
|
||||
data: item.valueDatas.map((k: any, i: number) => [time[i], Math.floor(k * 10000) / 10000]),
|
||||
type: 'line',
|
||||
symbol: 'none'
|
||||
})
|
||||
})
|
||||
|
||||
tabList.value[activeName.value].dynamicOptions = {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
name: '时间',
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
formatter(params: any) {
|
||||
let str = params[0].value[0] + '<br/>'
|
||||
for (let i = 0; i < params.length; i++) {
|
||||
str = str + params[i].marker + params[i].seriesName + '：' + params[i].value[1] + '<br/>'
|
||||
}
|
||||
|
||||
return str
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 30
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
name: form.type == 1 ? '%' : 'A',
|
||||
min: min,
|
||||
max: max
|
||||
},
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
|
||||
options: {
|
||||
series: series
|
||||
}
|
||||
}
|
||||
|
||||
tabList.value[activeName.value].showDynamic = true
|
||||
})
|
||||
.catch(() => {
|
||||
loading1.value = false
|
||||
})
|
||||
loading1.value = false
|
||||
}
|
||||
// 监听echart点击
|
||||
const group = (chart: any, myChartDom: any) => {
|
||||
myChartDom.addEventListener('click', function (event: any) {
|
||||
// 获取点击位置相对于图表容器的坐标
|
||||
const rect = myChartDom.getBoundingClientRect()
|
||||
const x = event.clientX - rect.left
|
||||
const y = event.clientY - rect.top
|
||||
const pointInPixel = [x, y]
|
||||
// 转换为逻辑坐标（相对于图表坐标系）
|
||||
const pointInGrid = chart.convertFromPixel({ gridIndex: 0 }, pointInPixel)
|
||||
// 计算X轴和Y轴的对应数据
|
||||
|
||||
// 处理X轴数据（分类轴）
|
||||
|
||||
// 处理Y轴数据（数值轴）
|
||||
let yValue = pointInGrid[1].toFixed(4)
|
||||
// xValue = timeFormat(pointInGrid[0].toFixed(0) - 0)
|
||||
if (code.value == 0) {
|
||||
tabList.value[activeName.value].form.limit = yValue
|
||||
tabList.value[activeName.value].options.series[0].markLine.data[0].yAxis = yValue
|
||||
chart.setOption(tabList.value[activeName.value].options)
|
||||
} else if (code.value == 1) {
|
||||
tabList.value[activeName.value].form.time1 = xValue.value
|
||||
tabList.value[activeName.value].options.series[0].markLine.data[1].xAxis = xValue.value
|
||||
chart.setOption(tabList.value[activeName.value].options)
|
||||
} else if (code.value == 2) {
|
||||
tabList.value[activeName.value].form.time2 = xValue.value
|
||||
tabList.value[activeName.value].options.series[0].markLine.data[2].xAxis = xValue.value
|
||||
chart.setOption(tabList.value[activeName.value].options)
|
||||
}
|
||||
// 控制台输出详细信息
|
||||
// console.log('点击事件详情:', {
|
||||
// X轴数据: xValue,
|
||||
// Y轴数据: yValue
|
||||
// })
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@@ -229,4 +598,32 @@ onMounted(() => {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
.monitoring-point {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
.box {
|
||||
// height: 280px;
|
||||
height: calc((100vh - 370px) / 2);
|
||||
}
|
||||
.boxTab {
|
||||
display: flex;
|
||||
}
|
||||
.harmonicButton {
|
||||
height: 42px;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
:deep(.el-tabs__content) {
|
||||
height: calc(100vh - 265px);
|
||||
}
|
||||
:deep(.el-input-group__append, .el-input-group__prepend) {
|
||||
background-color: #ffffff00;
|
||||
}
|
||||
:deep(.frontBox) {
|
||||
background-color: var(--el-color-primary) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,53 +1,173 @@
|
||||
<!-- 详情 -->
|
||||
<template>
|
||||
<div class="default-main" :style="height">
|
||||
<div class="title">
|
||||
详情
|
||||
<div style="font-size: 14px;font-weight: 500;">
|
||||
{{ query.name || '' }}
|
||||
<back-component />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { displayHistoryData } from '@/api/advance-boot/division';
|
||||
import BackComponent from '@/components/icon/back/index.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { id } from 'element-plus/es/locale';
|
||||
const { query } = useRoute() // 查询参数
|
||||
const dotList: any = ref({})
|
||||
const height = mainHeight(20)
|
||||
|
||||
const tabList: any = ref([])
|
||||
const init = () => {
|
||||
displayHistoryData({
|
||||
id: query.id,
|
||||
time:query.time
|
||||
})
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 550;
|
||||
}
|
||||
</style>
|
||||
<!-- 详情 -->
|
||||
<template>
|
||||
<div class="default-main pd10">
|
||||
<div class="title">
|
||||
<!-- <div style="font-size: 14px; font-weight: 500">
|
||||
|
||||
</div> -->
|
||||
<span class="monitoring-point"> {{ query.name || '' }}</span>
|
||||
<back-component />
|
||||
</div>
|
||||
|
||||
<el-tabs type="border-card" v-model="activeName" @tab-change="generateFn">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in tabList"
|
||||
:key="index"
|
||||
:label="item.name + '次谐波'"
|
||||
:style="height"
|
||||
:name="index"
|
||||
v-loading="loading"
|
||||
>
|
||||
<div style="height: calc(100vh - 250px); overflow-y: auto">
|
||||
<div
|
||||
class="box boxTab mb10"
|
||||
:style="`height: calc((100vh - 280px) / ${
|
||||
item.list.length == 0 ? 1 : item.list.length > 3 ? 3 : item.list.length
|
||||
})`"
|
||||
v-for="(value, i) in item.dynamicOptions"
|
||||
:key="i"
|
||||
>
|
||||
<MyEChart :options="item.dynamicOptions[i]" style="flex: 1" />
|
||||
<div style="width: 500px">
|
||||
<vxe-table ref="tableRef" :data="item.list[i]" height="auto" v-bind="defaultAttribute">
|
||||
<vxe-column field="customerName" title="用户名(用户号)"></vxe-column>
|
||||
<vxe-column field="responsibilityData" title="责任数据(%)" width="120">
|
||||
<template v-slot="{ row }">
|
||||
{{ Math.floor(row.responsibilityData * 10000) / 10000 }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import BackComponent from '@/components/icon/back/index.vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import { timeFormat } from '@/utils/common'
|
||||
import { yMethod } from '@/utils/echartMethod'
|
||||
import { displayHistoryData } from '@/api/advance-boot/division'
|
||||
const { query } = useRoute() // 查询参数
|
||||
const height = mainHeight(155)
|
||||
const activeName = ref(0)
|
||||
const tabList: any = ref([])
|
||||
|
||||
const loading: any = ref(false)
|
||||
const init = () => {
|
||||
let data = (Array.isArray(query.time) ? query.time[0] : query.time)?.split(',') ?? []
|
||||
tabList.value = []
|
||||
data.forEach((item: any) => {
|
||||
tabList.value.push({
|
||||
name: item,
|
||||
dynamicOptions: [],
|
||||
list: []
|
||||
})
|
||||
})
|
||||
activeName.value = 0
|
||||
generateFn(0)
|
||||
}
|
||||
|
||||
// 生成动态谐波责任数据
|
||||
const generateFn = async (e: any) => {
|
||||
if (tabList.value[e].dynamicOptions.length != 0) return
|
||||
|
||||
loading.value = true
|
||||
await displayHistoryData({
|
||||
id: query.id,
|
||||
time: tabList.value[e].name
|
||||
})
|
||||
.then((res: any) => {
|
||||
res.data.forEach((item: any) => {
|
||||
tabList.value[e].list.push(item.responsibilities)
|
||||
|
||||
let [min, max] = yMethod(item.datas.map((k: any) => k.valueDatas).flat())
|
||||
let series: any[] = []
|
||||
let time: any[] = item.timeDatas.map((k: any) => timeFormat(k))
|
||||
item.datas.forEach((k: any) => {
|
||||
series.push({
|
||||
name: k.customerName,
|
||||
data: k.valueDatas.map((k: any, i: number) => [time[i], Math.floor(k * 10000) / 10000]),
|
||||
type: 'line',
|
||||
symbol: 'none'
|
||||
})
|
||||
})
|
||||
tabList.value[e].dynamicOptions.push({
|
||||
title: {
|
||||
text: `时间：${item.limitSTime} 至${item.limitETime} 限值：${item.limitValue}`
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
name: '时间',
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
formatter(params: any) {
|
||||
let str = params[0].value[0] + '<br/>'
|
||||
for (let i = 0; i < params.length; i++) {
|
||||
str =
|
||||
str + params[i].marker + params[i].seriesName + '：' + params[i].value[1] + '<br/>'
|
||||
}
|
||||
|
||||
return str
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 30
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
min: min,
|
||||
max: max
|
||||
},
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
|
||||
options: {
|
||||
series: series
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 550;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
.monitoring-point {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.boxTab {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -63,8 +63,6 @@ const tableStore = new TableStore({
|
||||
|
||||
click: row => {
|
||||
console.log("🚀 ~ row:", row)
|
||||
|
||||
// push('/admin/division/detail')
|
||||
push({
|
||||
path: "/admin/division/detail",
|
||||
query: {
|
||||
|
||||
Reference in New Issue
Block a user