fks-yangshouda
2 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