修改测试bug 优化页面
This commit is contained in:
guanj
308
src/components/cockpit/crossingTime/index.vue
Normal file
308
src/components/cockpit/crossingTime/index.vue
Normal file
@@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--暂态越限时间分布 -->
|
||||
<TableHeader
|
||||
ref="TableHeaderRef"
|
||||
:timeKeyList="prop.timeKey"
|
||||
:showReset="false"
|
||||
@selectChange="selectChange"
|
||||
datePicker
|
||||
v-if="fullscreen"
|
||||
></TableHeader>
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList1"
|
||||
:style="{
|
||||
width: prop.width,
|
||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
||||
}"
|
||||
/>
|
||||
<!-- <my-echart
|
||||
class="mt10"
|
||||
:options="echartList1"
|
||||
:style="{
|
||||
width: prop.width,
|
||||
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
||||
}"
|
||||
/> -->
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { getTime } from '@/utils/formatTime'
|
||||
|
||||
const prop = defineProps({
|
||||
w: { type: [String, Number] },
|
||||
h: { type: [String, Number] },
|
||||
width: { type: [String, Number] },
|
||||
height: { type: [String, Number] },
|
||||
timeKey: { type: Array as () => string[] },
|
||||
timeValue: { type: Object },
|
||||
interval: { type: Number }
|
||||
})
|
||||
|
||||
const TableHeaderRef = ref()
|
||||
|
||||
const headerHeight = ref(57)
|
||||
|
||||
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||||
headerHeight.value = height
|
||||
|
||||
if (datePickerValue && datePickerValue.timeValue) {
|
||||
// 更新时间参数
|
||||
tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
|
||||
tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
|
||||
}
|
||||
}
|
||||
|
||||
// 计算是否全屏展示
|
||||
const fullscreen = computed(() => {
|
||||
const w = Number(prop.w)
|
||||
const h = Number(prop.h)
|
||||
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
|
||||
// 执行相应逻辑
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
const config = useConfig()
|
||||
|
||||
const echartList = ref({})
|
||||
|
||||
const echartList1 = ref({})
|
||||
|
||||
const processDataForChart = (rawData: any[]) => {
|
||||
// 将后端返回的扁平数据转换为 ECharts 需要的三维坐标格式 [x, y, z]
|
||||
const chartData = rawData.map(item => [item.x, item.y, item.z])
|
||||
|
||||
return chartData
|
||||
}
|
||||
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/cs-harmonic-boot/csevent/getEventCoords',
|
||||
method: 'POST',
|
||||
showPage: false,
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
setTime()
|
||||
},
|
||||
loadCallback: () => {
|
||||
const processedData = processDataForChart(tableStore.table.data.innerList || [])
|
||||
const trendList = tableStore.table.data.trendList || []
|
||||
const xlist = tableStore.table.data.xlist || []
|
||||
|
||||
// 处理趋势图数据
|
||||
const seriesData = trendList.map((item: any) => {
|
||||
// 根据接口返回的name字段确定系列名称和颜色
|
||||
let name = ''
|
||||
let color = ''
|
||||
|
||||
switch (item.name) {
|
||||
case 'Evt_Sys_DipStr':
|
||||
name = '电压暂降'
|
||||
color = '#FFBF00'
|
||||
break
|
||||
case 'Evt_Sys_IntrStr':
|
||||
name = '电压中断'
|
||||
color = '#FF9100'
|
||||
break
|
||||
case 'Evt_Sys_SwlStr':
|
||||
name = '电压暂升'
|
||||
color = config.layout.elementUiPrimary[0]
|
||||
break
|
||||
default:
|
||||
name = item.name
|
||||
color = '#000000'
|
||||
}
|
||||
|
||||
return {
|
||||
name: name,
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
color: color,
|
||||
data: item.trendList?.map((value: number, index: number) => [xlist[index], value]) || []
|
||||
}
|
||||
})
|
||||
|
||||
// 获取x轴和y轴的标签值
|
||||
const xLabels = [
|
||||
'0-10%',
|
||||
'10%-20%',
|
||||
'20%-30%',
|
||||
'30%-40%',
|
||||
'40%-50%',
|
||||
'50%-60%',
|
||||
'60%-70%',
|
||||
'70%-80%',
|
||||
'80%-90%',
|
||||
'90%-100%'
|
||||
]
|
||||
const yLabels = ['0-0.01s', '0.01s-0.1s', '0.1s-1s', '1s-10s', '10s']
|
||||
|
||||
echartList.value = {
|
||||
options: {
|
||||
xAxis: null,
|
||||
yAxis: null,
|
||||
dataZoom: null,
|
||||
backgroundColor: '#fff',
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
formatter: function (params: any) {
|
||||
var tips = ''
|
||||
tips += '持续时间: ' + yLabels[params.value[1]] + '</br>'
|
||||
tips += '特征幅值: ' + xLabels[params.value[0]] + '</br>'
|
||||
tips += '事件次数: ' + params.value[2] + '</br>'
|
||||
return tips
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: '暂态事件概率分布',
|
||||
x: 'center'
|
||||
},
|
||||
visualMap: {
|
||||
max: 500,
|
||||
show: false,
|
||||
inRange: {
|
||||
color: ['#313695', '#00BB00', '#ff8000', '#a50026']
|
||||
}
|
||||
},
|
||||
xAxis3D: {
|
||||
type: 'category',
|
||||
name: '特征幅值',
|
||||
data: xLabels,
|
||||
nameGap: 40
|
||||
},
|
||||
yAxis3D: {
|
||||
type: 'category',
|
||||
name: '持续时间',
|
||||
data: yLabels,
|
||||
nameGap: 40,
|
||||
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
},
|
||||
zAxis3D: {
|
||||
type: 'value',
|
||||
minInterval: 10,
|
||||
name: '暂态事件次数',
|
||||
nameGap: 30
|
||||
},
|
||||
grid3D: {
|
||||
viewControl: {
|
||||
projection: 'perspective',
|
||||
distance: 260
|
||||
},
|
||||
boxWidth: 200,
|
||||
boxDepth: 80,
|
||||
light: {
|
||||
main: {
|
||||
intensity: 1.2
|
||||
},
|
||||
ambient: {
|
||||
intensity: 0.3
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar3D',
|
||||
data: processedData,
|
||||
shading: 'realistic',
|
||||
label: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
borderWidth: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
echartList1.value = {
|
||||
title: {
|
||||
text: '暂态越限时间概率分布'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xlist,
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: '次'
|
||||
},
|
||||
grid: {
|
||||
left: '10px',
|
||||
right: '20px'
|
||||
},
|
||||
series: seriesData
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
const setTime = () => {
|
||||
const time = getTime(
|
||||
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
|
||||
prop.timeKey,
|
||||
fullscreen.value
|
||||
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
|
||||
: prop.timeValue
|
||||
)
|
||||
|
||||
if (Array.isArray(time)) {
|
||||
tableStore.table.params.searchBeginTime = time[0]
|
||||
tableStore.table.params.searchEndTime = time[1]
|
||||
TableHeaderRef.value?.setInterval(time[2] - 0)
|
||||
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
|
||||
} else {
|
||||
console.warn('获取时间失败，time 不是一个有效数组')
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => prop.timeValue,
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -15,7 +15,7 @@
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出excel</el-button>
|
||||
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<div style="display: flex">
|
||||
@@ -72,7 +72,7 @@ const initListByIds = () => {
|
||||
|
||||
const templateListData = () => {
|
||||
getTemplateList({}).then(res => {
|
||||
templateList.value = res.data
|
||||
templateList.value = res.data.filter(item => item.name === '稳态治理报表')
|
||||
if (!tableStore.table.params.tempId && templateList.value?.length > 0) {
|
||||
tableStore.table.params.tempId = templateList.value[0].id
|
||||
}
|
||||
@@ -156,6 +156,8 @@ const setTime = () => {
|
||||
if (Array.isArray(time)) {
|
||||
tableStore.table.params.searchBeginTime = time[0]
|
||||
tableStore.table.params.searchEndTime = time[1]
|
||||
tableStore.table.params.startTime = time[0]
|
||||
tableStore.table.params.endTime = time[1]
|
||||
TableHeaderRef.value?.setInterval(time[2] - 0)
|
||||
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
|
||||
} else {
|
||||
|
||||
463
src/components/cockpit/indicatorCrossingTime/index.vue
Normal file
463
src/components/cockpit/indicatorCrossingTime/index.vue
Normal file
@@ -0,0 +1,463 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--指标越限时间分布
|
||||
-->
|
||||
<TableHeader :showReset="false" :timeKeyList="prop.timeKey" ref="TableHeaderRef" @selectChange="selectChange" datePicker v-if="fullscreen">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="监测点">
|
||||
<el-select size="small" filterable v-model="tableStore.table.params.lineId">
|
||||
<el-option
|
||||
v-for="item in lineList"
|
||||
:key="item.lineId"
|
||||
:label="item.name"
|
||||
:value="item.lineId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<div v-loading="tableStore.table.loading">
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList1"
|
||||
:style="{
|
||||
width: prop.width,
|
||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
||||
}"
|
||||
/>
|
||||
<!-- <my-echart
|
||||
class="mt10"
|
||||
:options="echartList1"
|
||||
:style="{
|
||||
width: prop.width,
|
||||
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
||||
}"
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { limitProbabilityData, cslineList } from '@/api/harmonic-boot/cockpit/cockpit'
|
||||
import { getTime } from '@/utils/formatTime'
|
||||
|
||||
const prop = defineProps({
|
||||
w: { type: [String, Number] },
|
||||
h: { type: [String, Number] },
|
||||
width: { type: [String, Number] },
|
||||
height: { type: [String, Number] },
|
||||
timeKey: { type: Array as () => string[] },
|
||||
timeValue: { type: Object },
|
||||
interval: { type: Number }
|
||||
})
|
||||
|
||||
// const options = ref(JSON.parse(window.localStorage.getItem('lineIdList') || '[]'))
|
||||
|
||||
const lineList = ref()
|
||||
|
||||
const headerHeight = ref(57)
|
||||
|
||||
const TableHeaderRef = ref()
|
||||
|
||||
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||||
headerHeight.value = height
|
||||
|
||||
if (datePickerValue && datePickerValue.timeValue) {
|
||||
// 更新时间参数
|
||||
tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
|
||||
tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
|
||||
}
|
||||
}
|
||||
|
||||
// 计算是否全屏展示
|
||||
const fullscreen = computed(() => {
|
||||
const w = Number(prop.w)
|
||||
const h = Number(prop.h)
|
||||
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
|
||||
// 执行相应逻辑
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
const echartList = ref()
|
||||
|
||||
const echartList1 = ref()
|
||||
|
||||
const probabilityData = ref()
|
||||
|
||||
const initLineList = async () => {
|
||||
cslineList({}).then(res => {
|
||||
lineList.value = res.data
|
||||
tableStore.table.params.lineId = lineList.value[0].lineId
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
|
||||
// 越限程度概率分布
|
||||
const initProbabilityData = () => {
|
||||
// 只有当 lineList 已加载且有数据时才设置默认 lineId
|
||||
if (!tableStore.table.params.lineId && lineList.value && lineList.value.length > 0) {
|
||||
tableStore.table.params.lineId = lineList.value[0].lineId
|
||||
}
|
||||
const params = {
|
||||
searchBeginTime: tableStore.table.params.searchBeginTime || prop.timeValue?.[0],
|
||||
searchEndTime: tableStore.table.params.searchEndTime || prop.timeValue?.[1],
|
||||
lineId: tableStore.table.params.lineId
|
||||
}
|
||||
limitProbabilityData(params).then((res: any) => {
|
||||
probabilityData.value = res.data
|
||||
|
||||
// 处理接口返回的数据，转换为图表所需格式
|
||||
if (res.data && Array.isArray(res.data)) {
|
||||
// 定义指标类型顺序
|
||||
const indicatorOrder = ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相电压不平衡度', '频率偏差']
|
||||
// 按照指定顺序排序数据
|
||||
const sortedData = [...res.data].sort((a, b) => {
|
||||
return indicatorOrder.indexOf(a.indexName) - indicatorOrder.indexOf(b.indexName)
|
||||
})
|
||||
|
||||
// 构造 series 数据
|
||||
const seriesData: any = []
|
||||
let maxValue: any = 0 // 用于存储数据中的最大值
|
||||
// 遍历每个越限程度区间（0-20%, 20-40%, 40-60%, 60-80%, 80-100%）
|
||||
for (let xIndex = 0; xIndex < 5; xIndex++) {
|
||||
// 遍历每个指标类型
|
||||
sortedData.forEach((item, yIndex) => {
|
||||
// 从 extentGrades 中获取对应区间的值
|
||||
const extentGrade = item.extentGrades[xIndex]
|
||||
const value = extentGrade ? (Object.values(extentGrade)[0] as number) : 0
|
||||
seriesData.push([xIndex, yIndex, value])
|
||||
|
||||
// 更新最大值
|
||||
if (value > maxValue) {
|
||||
maxValue = value
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 计算 z 轴最大值（最大值加 5）
|
||||
const zAxisMax = Math.ceil(maxValue) + 5
|
||||
// 构造 yAxis 数据（指标类型名称）
|
||||
const yAxisData = sortedData.map(item => item.indexName)
|
||||
|
||||
echartList.value = {
|
||||
options: {
|
||||
backgroundColor: '#fff',
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
formatter: function (params: any) {
|
||||
var yIndex = params.value[1] //获取y轴索引
|
||||
var tips = ''
|
||||
tips += '指标类型: ' + yAxisData[yIndex] + '</br>'
|
||||
tips += '越限程度: ' + params.seriesName + '</br>'
|
||||
tips += '越限次数: ' + params.value[2] + '</br>'
|
||||
return tips
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: '指标越限概率分布',
|
||||
x: 'center',
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
// 移除或隐藏 visualMap 组件
|
||||
visualMap: {
|
||||
show: false, // 设置为 false 隐藏右侧颜色条
|
||||
min: 0,
|
||||
// max: 100,
|
||||
max: zAxisMax, // 使用计算出的最大值加5
|
||||
inRange: {
|
||||
color: ['#313695', '#00BB00', '#ff8000', '#d73027', '#a50026']
|
||||
}
|
||||
},
|
||||
// 添加 legend 配置并设置为不显示
|
||||
legend: {
|
||||
show: false // 隐藏图例
|
||||
},
|
||||
xAxis3D: {
|
||||
type: 'category',
|
||||
name: '越限程度',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 50,
|
||||
data: ['0-20%', '20-40%', '40-60%', '60-80%', '80-100%']
|
||||
},
|
||||
yAxis3D: {
|
||||
type: 'category',
|
||||
name: '指标类型',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 50,
|
||||
data: yAxisData,
|
||||
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
},
|
||||
zAxis3D: {
|
||||
type: 'value',
|
||||
name: '越限次数',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 30,
|
||||
minInterval: 10
|
||||
|
||||
// max: 100
|
||||
},
|
||||
grid3D: {
|
||||
viewControl: {
|
||||
projection: 'perspective',
|
||||
distance: 260,
|
||||
rotateSensitivity: 10,
|
||||
zoomSensitivity: 2
|
||||
},
|
||||
boxWidth: 150,
|
||||
boxDepth: 100,
|
||||
boxHeight: 100,
|
||||
light: {
|
||||
main: {
|
||||
intensity: 1.2
|
||||
},
|
||||
ambient: {
|
||||
intensity: 0.4
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar3D',
|
||||
name: '0-20%',
|
||||
data: seriesData.filter((item: any) => item[0] === 0),
|
||||
shading: 'realistic',
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 0.9
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#ff8000'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'bar3D',
|
||||
name: '20-40%',
|
||||
data: seriesData.filter((item: any) => item[0] === 1),
|
||||
shading: 'realistic',
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 0.9
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#ff8000'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'bar3D',
|
||||
name: '40-60%',
|
||||
data: seriesData.filter((item: any) => item[0] === 2),
|
||||
shading: 'realistic',
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 0.9
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#ff8000'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'bar3D',
|
||||
name: '60-80%',
|
||||
data: seriesData.filter((item: any) => item[0] === 3),
|
||||
shading: 'realistic',
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 0.9
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#ff8000'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'bar3D',
|
||||
name: '80-100%',
|
||||
data: seriesData.filter((item: any) => item[0] === 4),
|
||||
shading: 'realistic',
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 0.9
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#ff8000'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/cs-harmonic-boot/limitRateDetailD/limitTimeProbabilityData',
|
||||
method: 'POST',
|
||||
showPage: false,
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
setTime()
|
||||
// 只有当 lineList 已加载且有数据时才设置默认 lineId
|
||||
if (!tableStore.table.params.lineId && lineList.value && lineList.value.length > 0) {
|
||||
tableStore.table.params.lineId = lineList.value[0].lineId
|
||||
}
|
||||
},
|
||||
loadCallback: () => {
|
||||
// 处理返回的数据，将其转换为图表所需格式
|
||||
const indexNames: any = [...new Set(tableStore.table.data.map((item: any) => item.indexName))]
|
||||
const timePeriods = [...new Set(tableStore.table.data.map((item: any) => item.timePeriod))]
|
||||
|
||||
// 构建系列数据
|
||||
const seriesData = indexNames.map((indexName: string) => {
|
||||
const dataIndex = tableStore.table.data.filter((item: any) => item.indexName === indexName)
|
||||
return {
|
||||
name: indexName,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
data: dataIndex.map((item: any) => [item.timePeriod, item.times])
|
||||
}
|
||||
})
|
||||
|
||||
echartList1.value = {
|
||||
title: {
|
||||
text: '指标越限时间概率分布'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: indexNames
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: '时间段',
|
||||
data: timePeriods
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
// name: '次数'
|
||||
},
|
||||
series: seriesData
|
||||
}
|
||||
initProbabilityData()
|
||||
}
|
||||
})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
initLineList()
|
||||
})
|
||||
|
||||
const setTime = () => {
|
||||
const time = getTime(
|
||||
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
|
||||
prop.timeKey,
|
||||
fullscreen.value
|
||||
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
|
||||
: prop.timeValue
|
||||
)
|
||||
|
||||
if (Array.isArray(time)) {
|
||||
tableStore.table.params.searchBeginTime = time[0]
|
||||
tableStore.table.params.searchEndTime = time[1]
|
||||
TableHeaderRef.value?.setInterval(time[2] - 0)
|
||||
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
|
||||
} else {
|
||||
console.warn('获取时间失败，time 不是一个有效数组')
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue,
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -21,17 +21,17 @@
|
||||
:options="echartList"
|
||||
:style="{
|
||||
width: prop.width,
|
||||
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
||||
}"
|
||||
/>
|
||||
<my-echart
|
||||
<!-- <my-echart
|
||||
class="mt10"
|
||||
:options="echartList1"
|
||||
:style="{
|
||||
width: prop.width,
|
||||
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
||||
}"
|
||||
/>
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -220,7 +220,7 @@ const initProbabilityData = () => {
|
||||
grid3D: {
|
||||
viewControl: {
|
||||
projection: 'perspective',
|
||||
distance: 250,
|
||||
distance: 260,
|
||||
rotateSensitivity: 10,
|
||||
zoomSensitivity: 2
|
||||
},
|
||||
@@ -394,7 +394,7 @@ const tableStore: any = new TableStore({
|
||||
|
||||
echartList1.value = {
|
||||
title: {
|
||||
text: '越限时间概率分布'
|
||||
text: '指标越限时间概率分布'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
|
||||
@@ -39,7 +39,7 @@ const headerHeight = ref(57)
|
||||
const TableHeaderRef = ref()
|
||||
|
||||
const dictData = useDictData()
|
||||
const sensitiveUserType = dictData.getBasicData('Sensitive_User_Type')
|
||||
const sensitiveUserType = dictData.getBasicData('Interference_Source')
|
||||
|
||||
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||||
headerHeight.value = height
|
||||
|
||||
@@ -1,23 +1,30 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--暂态事件概率分布 -->
|
||||
<TableHeader ref="TableHeaderRef" :timeKeyList="prop.timeKey" :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader>
|
||||
<TableHeader
|
||||
ref="TableHeaderRef"
|
||||
:timeKeyList="prop.timeKey"
|
||||
:showReset="false"
|
||||
@selectChange="selectChange"
|
||||
datePicker
|
||||
v-if="fullscreen"
|
||||
></TableHeader>
|
||||
<my-echart
|
||||
class="tall"
|
||||
:options="echartList"
|
||||
:style="{
|
||||
width: prop.width,
|
||||
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
||||
}"
|
||||
/>
|
||||
<my-echart
|
||||
<!-- <my-echart
|
||||
class="mt10"
|
||||
:options="echartList1"
|
||||
:style="{
|
||||
width: prop.width,
|
||||
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
||||
}"
|
||||
/>
|
||||
/> -->
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
@@ -33,7 +40,7 @@ const prop = defineProps({
|
||||
h: { type: [String, Number] },
|
||||
width: { type: [String, Number] },
|
||||
height: { type: [String, Number] },
|
||||
timeKey: { type: Array as () => string[] },
|
||||
timeKey: { type: Array as () => string[] },
|
||||
timeValue: { type: Object },
|
||||
interval: { type: Number }
|
||||
})
|
||||
@@ -70,7 +77,6 @@ const echartList = ref({})
|
||||
|
||||
const echartList1 = ref({})
|
||||
|
||||
|
||||
const processDataForChart = (rawData: any[]) => {
|
||||
// 将后端返回的扁平数据转换为 ECharts 需要的三维坐标格式 [x, y, z]
|
||||
const chartData = rawData.map(item => [item.x, item.y, item.z])
|
||||
@@ -84,7 +90,7 @@ const tableStore: any = new TableStore({
|
||||
showPage: false,
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
setTime()
|
||||
setTime()
|
||||
},
|
||||
loadCallback: () => {
|
||||
const processedData = processDataForChart(tableStore.table.data.innerList || [])
|
||||
@@ -177,15 +183,14 @@ const tableStore: any = new TableStore({
|
||||
type: 'category',
|
||||
name: '特征幅值',
|
||||
data: xLabels,
|
||||
nameGap: 40,
|
||||
|
||||
nameGap: 40
|
||||
},
|
||||
yAxis3D: {
|
||||
type: 'category',
|
||||
name: '持续时间',
|
||||
data: yLabels,
|
||||
nameGap: 40,
|
||||
|
||||
nameGap: 40,
|
||||
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
@@ -197,24 +202,26 @@ const tableStore: any = new TableStore({
|
||||
type: 'value',
|
||||
minInterval: 10,
|
||||
name: '暂态事件次数',
|
||||
nameGap: 30,
|
||||
nameGap: 30
|
||||
},
|
||||
grid3D: {
|
||||
viewControl: {
|
||||
projection: 'perspective',
|
||||
distance: 250
|
||||
},
|
||||
|
||||
boxWidth: 200,
|
||||
boxDepth: 80,
|
||||
light: {
|
||||
main: {
|
||||
intensity: 1.2
|
||||
projection: 'perspective',
|
||||
distance: 260,
|
||||
rotateSensitivity: 10,
|
||||
zoomSensitivity: 2
|
||||
},
|
||||
ambient: {
|
||||
intensity: 0.3
|
||||
boxWidth: 150,
|
||||
boxDepth: 100,
|
||||
boxHeight: 100,
|
||||
light: {
|
||||
main: {
|
||||
intensity: 1.2
|
||||
},
|
||||
ambient: {
|
||||
intensity: 0.4
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@@ -227,9 +234,7 @@ const tableStore: any = new TableStore({
|
||||
fontSize: 16,
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -296,7 +301,7 @@ watch(
|
||||
watch(
|
||||
() => prop.timeValue,
|
||||
(newVal, oldVal) => {
|
||||
tableStore.index()
|
||||
tableStore.index()
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
|
||||
Reference in New Issue
Block a user