fks-yangshouda
5 months ago
8 changed files with 362 additions and 169 deletions
@ -0,0 +1,155 @@ |
|||||
|
<template> |
||||
|
<a-row type="flex" style="height: 92%"> |
||||
|
<a-col :span="8"> |
||||
|
<a-radio-group |
||||
|
v-model:value="mode" |
||||
|
@change="changeMode" |
||||
|
style="padding-bottom: 10px; width: 40%; height: 4%; padding-left: 30px; padding-top: 10px"> |
||||
|
<a-radio-button value="1" style="width: 50%; text-align: center"> 同比 </a-radio-button> |
||||
|
<a-radio-button value="2" style="width: 50%; text-align: center"> 环比 </a-radio-button> |
||||
|
</a-radio-group> |
||||
|
<div ref="analysisGraphchart" style="width: 100%; height: 95%"></div> |
||||
|
</a-col> |
||||
|
<a-col :span="16" /> |
||||
|
</a-row> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { defineComponent, onMounted, ref, inject, watch } from 'vue'; |
||||
|
import * as echarts from 'echarts'; |
||||
|
|
||||
|
export default defineComponent({ |
||||
|
name: 'AnalysisGraph', |
||||
|
setup() { |
||||
|
const mode = ref<String>('1'); |
||||
|
let data = ref<any[]>([]); |
||||
|
interface PageData { |
||||
|
// 图表 表格数据 |
||||
|
graphTableList: any[]; |
||||
|
// 图表 表格表头 |
||||
|
graphTableColumns: any[]; |
||||
|
// 图表 图表数据 |
||||
|
graphGraphList: any[]; |
||||
|
// 分析 表格数据 |
||||
|
analysisTableList: any[]; |
||||
|
// 分析 图表数据 |
||||
|
analysisGraphList: any[]; |
||||
|
} |
||||
|
const pageData = inject<PageData>('pageData'); |
||||
|
|
||||
|
if (!pageData) { |
||||
|
throw new Error('pageData is not provided'); |
||||
|
} |
||||
|
|
||||
|
// 监听 pageData 的变化 |
||||
|
watch( |
||||
|
() => pageData as PageData, |
||||
|
(_newValue, _oldValue) => { |
||||
|
// 执行你的逻辑代码 |
||||
|
draw(); |
||||
|
}, |
||||
|
{ deep: true }, |
||||
|
); |
||||
|
const changeMode = () => {}; |
||||
|
const analysisGraphchart = ref(null); |
||||
|
|
||||
|
let chartInstance: echarts.ECharts | null = null; |
||||
|
|
||||
|
const draw = () => { |
||||
|
data.value = pageData.analysisGraphList; |
||||
|
if (data.value && data.value.length > 0) { |
||||
|
if (chartInstance) { |
||||
|
chartInstance.dispose(); |
||||
|
} |
||||
|
chartInstance = echarts.init(analysisGraphchart.value); |
||||
|
|
||||
|
var seriesdata = []; |
||||
|
var dateX = []; |
||||
|
// var legendList: string | any[] = []; |
||||
|
for (let i = 0; i < data.value.length; i++) { |
||||
|
dateX.push(data.value[i].name); |
||||
|
|
||||
|
seriesdata.push({ value: data.value[i].value, label: data.value[i].labelRight }); |
||||
|
} |
||||
|
|
||||
|
var seriesList = [ |
||||
|
{ |
||||
|
name: data.value[0].energyType, |
||||
|
data: seriesdata, |
||||
|
type: 'bar', |
||||
|
label: { |
||||
|
show: true, |
||||
|
formatter: '{b}', |
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const option = { |
||||
|
// tooltip: { |
||||
|
// trigger: 'axis', |
||||
|
// formatter: (params: any) => { |
||||
|
// const date = params[0].name; |
||||
|
// const values = params |
||||
|
// .map((param: any) => { |
||||
|
// const unit = data.value.find((d) => d.name === date)?.unit || ''; |
||||
|
// return `<tr> |
||||
|
// <td>${param.marker}${param.seriesName}</td> |
||||
|
// <td style="text-align: right;">${param.value} ${unit}</td> |
||||
|
// </tr>`; |
||||
|
// }) |
||||
|
// .join(''); |
||||
|
// return `<div>${date}</div><table style="width: 100%;">${values}</table>`; |
||||
|
// }, |
||||
|
// }, |
||||
|
yAxis: { |
||||
|
type: 'category', |
||||
|
axisLine: { show: false }, |
||||
|
axisLabel: { show: false }, |
||||
|
axisTick: { show: false }, |
||||
|
splitLine: { show: false }, |
||||
|
data: dateX, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'value', |
||||
|
position: 'top', |
||||
|
splitLine: { |
||||
|
lineStyle: { |
||||
|
type: 'dashed', |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: seriesList, |
||||
|
}; |
||||
|
|
||||
|
chartInstance = echarts.init(analysisGraphchart.value); |
||||
|
chartInstance.setOption(option); |
||||
|
} |
||||
|
}; |
||||
|
onMounted(() => { |
||||
|
draw(); |
||||
|
}); |
||||
|
|
||||
|
// 下载图表 |
||||
|
const downloadChart = () => { |
||||
|
if (chartInstance) { |
||||
|
const base64 = chartInstance.getDataURL({ |
||||
|
type: 'png', |
||||
|
backgroundColor: '#fff', |
||||
|
}); |
||||
|
const link = document.createElement('a'); |
||||
|
link.href = base64; |
||||
|
link.download = 'chart.png'; |
||||
|
link.click(); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
return { |
||||
|
analysisGraphchart, |
||||
|
downloadChart, |
||||
|
mode, |
||||
|
changeMode, |
||||
|
}; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
|
<style lang="less" scoped></style> |
||||
@ -0,0 +1,103 @@ |
|||||
|
<template> |
||||
|
<a-table :columns="columns" :data-source="data" bordered /> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { defineComponent, ref, inject, watch, onMounted } from 'vue'; |
||||
|
|
||||
|
export default defineComponent({ |
||||
|
name: 'AnalysisTable', |
||||
|
setup() { |
||||
|
const columns = [ |
||||
|
{ |
||||
|
title: '设备/节点', |
||||
|
dataIndex: 'key', |
||||
|
}, |
||||
|
{ |
||||
|
title: '统计值', |
||||
|
dataIndex: 'name', |
||||
|
}, |
||||
|
{ |
||||
|
title: '同比', |
||||
|
children: [ |
||||
|
{ |
||||
|
title: '△差值', |
||||
|
dataIndex: 'position', |
||||
|
}, |
||||
|
{ |
||||
|
title: '增长率', |
||||
|
dataIndex: 'unit', |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
title: '环比', |
||||
|
children: [ |
||||
|
{ |
||||
|
title: '△差值', |
||||
|
dataIndex: 'position', |
||||
|
}, |
||||
|
{ |
||||
|
title: '增长率', |
||||
|
dataIndex: 'unit', |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
title: '纵向对比', |
||||
|
children: [ |
||||
|
{ |
||||
|
title: '△差值', |
||||
|
dataIndex: 'position', |
||||
|
}, |
||||
|
{ |
||||
|
title: '增长率', |
||||
|
dataIndex: 'unit', |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
title: '操作', |
||||
|
dataIndex: 'date', |
||||
|
}, |
||||
|
]; |
||||
|
let data = ref<any[]>([]); |
||||
|
|
||||
|
interface PageData { |
||||
|
// 图表 表格数据 |
||||
|
graphTableList: any[]; |
||||
|
// 图表 表格表头 |
||||
|
graphTableColumns: any[]; |
||||
|
// 图表 图表数据 |
||||
|
graphGraphList: any[]; |
||||
|
// 分析 表格数据 |
||||
|
analysisTableList: any[]; |
||||
|
// 分析 图表数据 |
||||
|
analysisGraphList: any[]; |
||||
|
} |
||||
|
const pageData = inject<PageData>('pageData'); |
||||
|
|
||||
|
if (!pageData) { |
||||
|
throw new Error('pageData is not provided'); |
||||
|
} |
||||
|
// 监听 pageData 的变化 |
||||
|
watch( |
||||
|
() => pageData as PageData, |
||||
|
(_newValue, _oldValue) => { |
||||
|
data.value = pageData.analysisTableList; |
||||
|
}, |
||||
|
{ deep: true }, |
||||
|
); |
||||
|
onMounted(() => { |
||||
|
data.value = pageData.analysisTableList; |
||||
|
}); |
||||
|
return { |
||||
|
data, |
||||
|
columns, |
||||
|
}; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped></style> |
||||
@ -1,166 +0,0 @@ |
|||||
<template> |
|
||||
<a-table :columns="columns" :data-source="data" bordered /> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import { defineComponent } from 'vue'; |
|
||||
import type { TableColumnType } from 'ant-design-vue'; |
|
||||
|
|
||||
const data = [ |
|
||||
{ |
|
||||
key: '1', |
|
||||
name: 'AC_002（暖通电表）', |
|
||||
position: 'A 相电压', |
|
||||
unit: 'V', |
|
||||
date: '2023-12-01', |
|
||||
'1:00': '3626', |
|
||||
}, |
|
||||
{ |
|
||||
key: '1', |
|
||||
name: 'AC_002（暖通电表）', |
|
||||
position: 'A 相电压', |
|
||||
unit: 'V', |
|
||||
date: '2023-12-01', |
|
||||
'1:00': '3626', |
|
||||
}, |
|
||||
{ |
|
||||
key: '2', |
|
||||
name: 'AC_003（照明电表）', |
|
||||
position: 'A 相电压', |
|
||||
unit: 'V', |
|
||||
date: '2023-12-01', |
|
||||
'1:00': '3626', |
|
||||
}, |
|
||||
{ |
|
||||
key: '2', |
|
||||
name: 'AC_003（照明电表）', |
|
||||
position: 'A 相电压', |
|
||||
unit: 'V', |
|
||||
date: '2023-12-01', |
|
||||
'1:00': '3626', |
|
||||
}, |
|
||||
{ |
|
||||
key: '3', |
|
||||
name: 'AC_004（给排水电表）', |
|
||||
position: 'A 相电压', |
|
||||
unit: 'V', |
|
||||
date: '2023-12-01', |
|
||||
'1:00': '3626', |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
export default defineComponent({ |
|
||||
name: 'EnvironmentTable', |
|
||||
setup() { |
|
||||
const getRowSpan = (dataIndex: string, record, data, dependents: string[] = []) => { |
|
||||
let rowSpan = 1; |
|
||||
for (let i = data.indexOf(record) + 1; i < data.length; i++) { |
|
||||
let shouldMerge = true; |
|
||||
for (const dependent of dependents) { |
|
||||
if (data[i][dependent] !== record[dependent]) { |
|
||||
shouldMerge = false; |
|
||||
break; |
|
||||
} |
|
||||
} |
|
||||
if (shouldMerge && data[i][dataIndex] === record[dataIndex]) { |
|
||||
rowSpan++; |
|
||||
} else { |
|
||||
break; |
|
||||
} |
|
||||
} |
|
||||
return rowSpan; |
|
||||
}; |
|
||||
|
|
||||
const columns: TableColumnType[] = [ |
|
||||
{ |
|
||||
title: '序号', |
|
||||
dataIndex: 'key', |
|
||||
customCell: (record, rowIndex) => { |
|
||||
const rowSpan = getRowSpan('name', record, data); |
|
||||
if (rowIndex != 0 && data[rowIndex - 1].key == record.key) { |
|
||||
return { |
|
||||
rowSpan: 0, |
|
||||
colSpan: 0, |
|
||||
}; |
|
||||
} |
|
||||
return { |
|
||||
rowSpan: rowSpan, |
|
||||
}; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
title: '设备名称', |
|
||||
dataIndex: 'name', |
|
||||
customCell: (record, rowIndex) => { |
|
||||
const rowSpan = getRowSpan('name', record, data); |
|
||||
if (rowIndex != 0 && data[rowIndex - 1].name == record.name) { |
|
||||
return { |
|
||||
rowSpan: 0, |
|
||||
colSpan: 0, |
|
||||
}; |
|
||||
} |
|
||||
return { |
|
||||
rowSpan: rowSpan, |
|
||||
}; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
title: '设备点位', |
|
||||
dataIndex: 'position', |
|
||||
customCell: (record, rowIndex) => { |
|
||||
const rowSpan = getRowSpan('position', record, data, ['name']); |
|
||||
if ( |
|
||||
rowIndex != 0 && |
|
||||
data[rowIndex - 1].name == record.name && |
|
||||
data[rowIndex - 1].position == record.position |
|
||||
) { |
|
||||
return { |
|
||||
rowSpan: 0, |
|
||||
colSpan: 0, |
|
||||
}; |
|
||||
} |
|
||||
return { |
|
||||
rowSpan: rowSpan, |
|
||||
}; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
title: '计量单位', |
|
||||
dataIndex: 'unit', |
|
||||
customCell: (record, rowIndex) => { |
|
||||
const rowSpan = getRowSpan('unit', record, data, ['name', 'position']); |
|
||||
if ( |
|
||||
rowIndex != 0 && |
|
||||
data[rowIndex - 1].name == record.name && |
|
||||
data[rowIndex - 1].position == record.position && |
|
||||
data[rowIndex - 1].unit == record.unit |
|
||||
) { |
|
||||
return { |
|
||||
rowSpan: 0, |
|
||||
colSpan: 0, |
|
||||
}; |
|
||||
} |
|
||||
return { |
|
||||
rowSpan: rowSpan, |
|
||||
}; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
title: '日期', |
|
||||
dataIndex: 'date', |
|
||||
}, |
|
||||
{ |
|
||||
title: '1:00', |
|
||||
dataIndex: '1:00', |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
return { |
|
||||
data, |
|
||||
columns, |
|
||||
}; |
|
||||
}, |
|
||||
}); |
|
||||
</script> |
|
||||
|
|
||||
<style lang="less" scoped></style> |
|
||||
Loading…
Reference in new issue