+
{
// }
// })
-var yAxisData = ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
+const echartList = ref()
-const echartList = ref({
- 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) {
- console.log(params, '33344')
- var yIndex = params.value[1] //获取y轴索引
- var tips = ''
- // tips += '指标类型: ' + params.name + ''
- tips += '指标类型: ' + yAxisData[yIndex] + ''
- tips += '越限程度: ' + params.seriesName + ''
- // tips += '越限占比: ' + params.value + '%'
- tips += '越限占比: ' + params.value[2] + '%'
- return tips
- }
- },
- title: {
- text: '指标越限概率分布',
- x: 'center',
- textStyle: {
- fontSize: 16,
- fontWeight: 'normal'
- }
- },
- visualMap: {
- max: 100,
- show: true,
- inRange: {
- color: [
- '#313695',
- '#4575b4',
- '#74add1',
- '#abd9e9',
- '#e0f3f8',
- '#ffffbf',
- '#fee090',
- '#fdae61',
- '#f46d43',
- '#d73027',
- '#a50026'
- ]
- }
- // calculable: true,
- // orient: 'horizontal',
- // left: 'center',
- // bottom: '5%'
- },
- xAxis3D: {
- type: 'category',
- name: '越限程度',
- nameLocation: 'middle',
- nameGap: 30,
- data: ['0-20%', '20-40%', '40-60%', '60-80%', '80-100%'],
- axisLine: {
- lineStyle: {
- color: '#111'
- }
- },
- axisLabel: {
- color: '#111',
- margin: 15
- },
- nameTextStyle: {
- color: '#111'
- }
- },
- yAxis3D: {
- type: 'category',
- name: '指标类型',
- nameLocation: 'middle',
- nameGap: 30,
- // data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡'],
- data: yAxisData,
- nameTextStyle: {
- color: '#111'
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: '#111'
- }
- },
- axisLabel: {
- color: '#111',
- margin: 15
- },
- splitLine: {
- lineStyle: {
- color: ['#111'],
- type: 'dashed',
- opacity: 0.5
- }
- }
- },
- zAxis3D: {
- type: 'value',
- name: '越限占比(%)',
- nameLocation: 'middle',
- nameGap: 30,
- nameTextStyle: {
- color: '#111'
- },
- axisLine: {
- lineStyle: {
- color: '#111'
- }
- },
- axisLabel: {
- color: '#111'
- },
- min: 0,
- max: 100
- },
- grid3D: {
- viewControl: {
- projection: 'perspective',
- distance: 250,
- 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: [
- // [xIndex, yIndex, value]
- [0, 0, 5], // 闪变 - 0-20%
- [0, 1, 10], // 谐波电压 - 0-20%
- [0, 2, 8], // 谐波电流 - 0-20%
- [0, 3, 15], // 电压偏差 - 0-20%
- [0, 4, 12] // 三相不平衡 - 0-20%
- ],
- 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: chartData.map(function (item) {
- // return {
- // value: [item[1], item[0], item[2]]
- // };
- // }),
- data: [
- [1, 0, 10], // 闪变 - 20-40%
- [1, 1, 20], // 谐波电压 - 20-40%
- [1, 2, 15], // 谐波电流 - 20-40%
- [1, 3, 25], // 电压偏差 - 20-40%
- [1, 4, 18] // 三相不平衡 - 20-40%
- ],
- 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: [
- [2, 0, 15], // 闪变 - 40-60%
- [2, 1, 25], // 谐波电压 - 40-60%
- [2, 2, 30], // 谐波电流 - 40-60%
- [2, 3, 35], // 电压偏差 - 40-60%
- [2, 4, 28] // 三相不平衡 - 40-60%
- ],
- 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: [
- [3, 0, 20], // 闪变 - 60-80%
- [3, 1, 30], // 谐波电压 - 60-80%
- [3, 2, 35], // 谐波电流 - 60-80%
- [3, 3, 40], // 电压偏差 - 60-80%
- [3, 4, 35] // 三相不平衡 - 60-80%
- ],
- 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: [
- [4, 0, 25], // 闪变 - 80-100%
- [4, 1, 35], // 谐波电压 - 80-100%
- [4, 2, 40], // 谐波电流 - 80-100%
- [4, 3, 45], // 电压偏差 - 80-100%
- [4, 4, 42] // 三相不平衡 - 80-100%
- ],
- shading: 'realistic',
- label: {
- show: false
- },
- itemStyle: {
- opacity: 0.9
- },
- emphasis: {
- label: {
- show: true,
- textStyle: {
- fontSize: 14,
- color: '#000'
- }
- },
- itemStyle: {
- color: '#ff8000'
- }
- }
- }
- ]
+const echartList1 = ref()
+
+const probabilityData = ref()
+
+// 越限程度概率分布
+const initProbabilityData = () => {
+ if (!tableStore.table.params.lineId && options.value?.length > 0) {
+ tableStore.table.params.lineId = options.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
-const echartList1 = ref({
- title: {
- text: '越限时间概率分布'
- },
+ // 处理接口返回的数据，转换为图表所需格式
+ 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)
+ })
- xAxis: {
- // name: '时间',
- // data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
- type: 'time',
- axisLabel: {
- formatter: {
- day: '{MM}-{dd}',
- month: '{MM}',
- year: '{yyyy}'
+ // 构造 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] + ''
+ tips += '越限程度: ' + params.seriesName + ''
+ tips += '越限次数: ' + params.value[2] + ''
+ 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: 30,
+ data: ['0-20%', '20-40%', '40-60%', '60-80%', '80-100%'],
+ axisLine: {
+ lineStyle: {
+ color: '#111'
+ }
+ },
+ axisLabel: {
+ color: '#111',
+ margin: 15
+ },
+ nameTextStyle: {
+ color: '#111'
+ }
+ },
+ yAxis3D: {
+ type: 'category',
+ name: '指标类型',
+ nameLocation: 'middle',
+ nameGap: 30,
+ data: yAxisData,
+ nameTextStyle: {
+ color: '#111'
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#111'
+ }
+ },
+ axisLabel: {
+ color: '#111',
+ margin: 15
+ },
+ splitLine: {
+ lineStyle: {
+ color: ['#111'],
+ type: 'dashed',
+ opacity: 0.5
+ }
+ }
+ },
+ zAxis3D: {
+ type: 'value',
+ name: '越限次数',
+ nameLocation: 'middle',
+ nameGap: 30,
+ nameTextStyle: {
+ color: '#111'
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#111'
+ }
+ },
+ axisLabel: {
+ color: '#111'
+ },
+ min: 0,
+ max: zAxisMax // 使用计算出的最大值加5
+ // max: 100
+ },
+ grid3D: {
+ viewControl: {
+ projection: 'perspective',
+ distance: 250,
+ 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'
+ }
+ }
+ }
+ ]
+ }
}
}
- },
+ })
+}
- yAxis: {
- name: '次' // 给X轴加单位
- },
- grid: {
- left: '10px',
- right: '20px'
- },
- options: {
- series: [
- {
- type: 'line',
- showSymbol: false,
- // smooth: true,
- name: '闪变',
- data: [
- ['2025-10-16 07:00:00', 10],
- ['2025-10-16 07:15:00', 10],
- ['2025-10-16 07:30:00', 10],
- ['2025-10-16 07:45:00', 10],
- ['2025-10-16 08:00:00', 30],
- ['2025-10-16 08:15:00', 50],
- ['2025-10-16 08:30:00', 60],
- ['2025-10-16 08:45:00', 70],
- ['2025-10-16 09:00:00', 100],
- ['2025-10-16 09:15:00', 120],
- ['2025-10-16 09:30:00', 130],
- ['2025-10-16 09:45:00', 140],
- ['2025-10-16 10:00:00', 160],
- ['2025-10-16 10:15:00', 160],
- ['2025-10-16 10:30:00', 130],
- ['2025-10-16 10:45:00', 120],
- ['2025-10-16 11:00:00', 140],
- ['2025-10-16 11:15:00', 80],
- ['2025-10-16 11:30:00', 70],
- ['2025-10-16 11:45:00', 90],
- ['2025-10-16 12:00:00', 60],
- ['2025-10-16 12:15:00', 60],
- ['2025-10-16 12:30:00', 60],
- ['2025-10-16 12:45:00', 60]
- ]
- },
- {
- type: 'line',
- showSymbol: false,
- // smooth: true,
- name: '谐波电压',
- data: [
- ['2025-10-16 07:00:00', 1],
- ['2025-10-16 07:15:00', 1],
- ['2025-10-16 07:30:00', 1],
- ['2025-10-16 07:45:00', 1],
- ['2025-10-16 08:00:00', 3],
- ['2025-10-16 08:15:00', 5],
- ['2025-10-16 08:30:00', 6],
- ['2025-10-16 08:45:00', 7],
- ['2025-10-16 09:00:00', 10],
- ['2025-10-16 09:15:00', 12],
- ['2025-10-16 09:30:00', 13],
- ['2025-10-16 09:45:00', 14],
- ['2025-10-16 10:00:00', 16],
- ['2025-10-16 10:15:00', 16],
- ['2025-10-16 10:30:00', 13],
- ['2025-10-16 10:45:00', 12],
- ['2025-10-16 11:00:00', 14],
- ['2025-10-16 11:15:00', 8],
- ['2025-10-16 11:30:00', 7],
- ['2025-10-16 11:45:00', 9],
- ['2025-10-16 12:00:00', 6],
- ['2025-10-16 12:15:00', 6],
- ['2025-10-16 12:30:00', 6],
- ['2025-10-16 12:45:00', 6]
- ]
- },
- {
- type: 'line',
- showSymbol: false,
- // smooth: true,
- name: '谐波电流',
- data: [
- ['2025-10-16 07:00:00', 19],
- ['2025-10-16 07:15:00', 19],
- ['2025-10-16 07:30:00', 19],
- ['2025-10-16 07:45:00', 19],
- ['2025-10-16 08:00:00', 39],
- ['2025-10-16 08:15:00', 59],
- ['2025-10-16 08:30:00', 69],
- ['2025-10-16 08:45:00', 79],
- ['2025-10-16 09:00:00', 109],
- ['2025-10-16 09:15:00', 129],
- ['2025-10-16 09:30:00', 139],
- ['2025-10-16 09:45:00', 149],
- ['2025-10-16 10:00:00', 169],
- ['2025-10-16 10:15:00', 169],
- ['2025-10-16 10:30:00', 139],
- ['2025-10-16 10:45:00', 129],
- ['2025-10-16 11:00:00', 149],
- ['2025-10-16 11:15:00', 89],
- ['2025-10-16 11:30:00', 79],
- ['2025-10-16 11:45:00', 99],
- ['2025-10-16 12:00:00', 69],
- ['2025-10-16 12:15:00', 69],
- ['2025-10-16 12:30:00', 69],
- ['2025-10-16 12:45:00', 69]
- ]
- },
- {
- type: 'line',
- showSymbol: false,
- // smooth: true,
- name: '电压偏差',
- data: [
- ['2025-10-16 07:00:00', 12],
- ['2025-10-16 07:15:00', 12],
- ['2025-10-16 07:30:00', 12],
- ['2025-10-16 07:45:00', 12],
- ['2025-10-16 08:00:00', 32],
- ['2025-10-16 08:15:00', 52],
- ['2025-10-16 08:30:00', 62],
- ['2025-10-16 08:45:00', 72],
- ['2025-10-16 09:00:00', 112],
- ['2025-10-16 09:15:00', 122],
- ['2025-10-16 09:30:00', 122],
- ['2025-10-16 09:45:00', 152],
- ['2025-10-16 10:00:00', 122],
- ['2025-10-16 10:15:00', 112],
- ['2025-10-16 10:30:00', 132],
- ['2025-10-16 10:45:00', 122],
- ['2025-10-16 11:00:00', 142],
- ['2025-10-16 11:15:00', 82],
- ['2025-10-16 11:30:00', 72],
- ['2025-10-16 11:45:00', 92],
- ['2025-10-16 12:00:00', 62],
- ['2025-10-16 12:15:00', 62],
- ['2025-10-16 12:30:00', 62],
- ['2025-10-16 12:45:00', 62]
- ]
- },
- {
- type: 'line',
- showSymbol: false,
- // smooth: true,
- name: '三相不平衡',
- data: [
- ['2025-10-16 07:00:00', 10],
- ['2025-10-16 07:15:00', 10],
- ['2025-10-16 07:30:00', 10],
- ['2025-10-16 07:45:00', 10],
- ['2025-10-16 08:00:00', 30],
- ['2025-10-16 08:15:00', 50],
- ['2025-10-16 08:30:00', 60],
- ['2025-10-16 08:45:00', 70],
- ['2025-10-16 09:00:00', 100],
- ['2025-10-16 09:15:00', 120],
- ['2025-10-16 09:30:00', 130],
- ['2025-10-16 09:45:00', 140],
- ['2025-10-16 10:00:00', 160],
- ['2025-10-16 10:15:00', 160],
- ['2025-10-16 10:30:00', 130],
- ['2025-10-16 10:45:00', 120],
- ['2025-10-16 11:00:00', 140],
- ['2025-10-16 11:15:00', 80],
- ['2025-10-16 11:30:00', 70],
- ['2025-10-16 11:45:00', 90],
- ['2025-10-16 12:00:00', 60],
- ['2025-10-16 12:15:00', 60],
- ['2025-10-16 12:30:00', 60],
- ['2025-10-16 12:45:00', 60]
- ]
- }
- ]
- }
-})
const tableStore: any = new TableStore({
- url: '/user-boot/dept/deptTree',
+ url: '/harmonic-boot/limitRateDetailD/limitTimeProbabilityData',
method: 'POST',
showPage: false,
column: [],
beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0]
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
+ if (!tableStore.table.params.lineId && options.value?.length > 0) {
+ tableStore.table.params.lineId = options.value[0].lineId
+ }
},
loadCallback: () => {
- tableStore.table.data = []
+ // 处理返回的数据，将其转换为图表所需格式
+ 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',
+ 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()
}
})
-const tableRef = ref()
-tableStore.table.params.searchValue = '1'
-provide('tableRef', tableRef)
-
provide('tableStore', tableStore)
onMounted(() => {
diff --git a/src/views/pqs/cockpit/homePage/index.vue b/src/views/pqs/cockpit/homePage/index.vue
index 4005a66..095d255 100644
--- a/src/views/pqs/cockpit/homePage/index.vue
+++ b/src/views/pqs/cockpit/homePage/index.vue
@@ -71,6 +71,7 @@ import { queryActivatePage, queryByPagePath } from '@/api/system-boot/csstatisti
import RoutingConfig from '@/views/pqs/cockpit/homePage/components/routingConfig.vue'
import { useRouter, useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
+import {cslineList} from '@/api/harmonic-boot/cockpit/cockpit'
const { push } = useRouter()
const datePickerRef = ref()
const router = useRouter()
@@ -246,10 +247,17 @@ const handleDatePickerChange = (value: any) => {
}
}
+// 监测点列表
+const initCSlineList = async () => {
+ const res = await cslineList({})
+ window.localStorage.setItem('lineIdList', JSON.stringify(res.data))
+}
+
// 生命周期钩子
onMounted(() => {
// initRowHeight()
fetchLayoutData()
+ initCSlineList()
// 添加窗口大小变化监听器
window.addEventListener('resize', handleResize)