fks-xuxinyue
3 months ago
4 changed files with 408 additions and 66 deletions
@ -0,0 +1,283 @@ |
|||
<template> |
|||
<div class="totalContant"> |
|||
<div class="ns-form-title"> |
|||
<div class="title"> |
|||
<span>查询</span> |
|||
<a-date-picker v-if="selectedTime" style="margin-left: 5%" :value="value5" picker="year" /> |
|||
<a-date-picker v-else style="margin-left: 5%" :value="value5" picker="month" /> |
|||
</div> |
|||
<div class="operation"> |
|||
<div class="month" :style="monthStyles" @click="changeToMonth"><span>月</span></div> |
|||
<div class="year" :style="yearStyles" @click="changeToYear"><span>年</span></div> |
|||
</div> |
|||
</div> |
|||
<div class="contant"> |
|||
<div class="chartsPart"> |
|||
<div class="electricityConsumption" ref="ydlChart"></div> |
|||
</div> |
|||
<div class="tablePart"> |
|||
<a-table :columns="columns" :data-source="data" bordered :pagination="false"> </a-table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref } from 'vue'; |
|||
import type { Dayjs } from 'dayjs'; |
|||
import * as echarts from 'echarts'; |
|||
defineOptions({ |
|||
energyType: 'all', // 与页面路由name一致缓存才可生效 |
|||
}); |
|||
const value5 = ref<Dayjs>(); |
|||
// 年/月切换 |
|||
const monthStyles = ref('background: #f2f2f2'); |
|||
const yearStyles = ref('background: #2778ff'); |
|||
const selectedTime = ref(true); |
|||
const changeToMonth = () => { |
|||
monthStyles.value = 'background: #2778ff'; |
|||
yearStyles.value = 'background: #f2f2f2'; |
|||
columns.value[2].title = '月份'; |
|||
columns.value[2].dataIndex = 'month'; |
|||
selectedTime.value = false; |
|||
}; |
|||
const changeToYear = () => { |
|||
monthStyles.value = 'background: #f2f2f2'; |
|||
yearStyles.value = 'background: #2778ff'; |
|||
columns.value[2].title = '年份'; |
|||
columns.value[2].dataIndex = 'year'; |
|||
selectedTime.value = true; |
|||
}; |
|||
// 用电量 |
|||
const ydlChart = ref(null); |
|||
let chartInstance: echarts.ECharts | null = null; |
|||
const drawEcharts = () => { |
|||
chartInstance = echarts.init(ydlChart.value); |
|||
const handred = 100; |
|||
let point = 66; |
|||
const option = { |
|||
backgroundColor: 'transparent', |
|||
title: [ |
|||
{ |
|||
text: point + '%', |
|||
x: 'center', |
|||
y: '35%', |
|||
textStyle: { |
|||
fontSize: 14, |
|||
fontWeight: 'normal', |
|||
fontStyle: 'normal', |
|||
}, |
|||
}, |
|||
{ |
|||
text: '用电量预算达成率', |
|||
x: 'center', |
|||
y: '85%', |
|||
textStyle: { |
|||
fontSize: 14, |
|||
fontWeight: 'normal', |
|||
fontStyle: 'normal', |
|||
}, |
|||
}, |
|||
], |
|||
tooltip: { |
|||
formatter: function (params) { |
|||
return params.name + '：' + params.percent + ' %'; |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: 'circle', |
|||
type: 'pie', |
|||
clockWise: true, |
|||
radius: ['40%', '50%'], |
|||
center: ['50%', '40%'], |
|||
itemStyle: { |
|||
normal: { |
|||
label: { |
|||
show: false, |
|||
}, |
|||
labelLine: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
}, |
|||
hoverAnimation: false, |
|||
data: [ |
|||
{ |
|||
value: point, |
|||
name: '占比', |
|||
itemStyle: { |
|||
normal: { |
|||
color: '#4FADFD', |
|||
label: { |
|||
show: false, |
|||
}, |
|||
labelLine: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
{ |
|||
name: '剩余', |
|||
value: handred - point, |
|||
itemStyle: { |
|||
normal: { |
|||
color: '#E1E8EE', |
|||
}, |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}; |
|||
chartInstance = echarts.init(ydlChart.value); |
|||
chartInstance.setOption(option); |
|||
}; |
|||
|
|||
setTimeout(() => { |
|||
drawEcharts(); |
|||
}, 500); |
|||
// 表格 |
|||
const columns = ref([ |
|||
{ |
|||
title: '序号', |
|||
customRender: (text: any) => { |
|||
return text.index + 1; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '名称', |
|||
dataIndex: 'name', |
|||
}, |
|||
{ |
|||
title: '年份', |
|||
dataIndex: 'name', |
|||
}, |
|||
{ |
|||
title: '计量单位', |
|||
dataIndex: 'name', |
|||
}, |
|||
{ |
|||
title: '总实际用量', |
|||
dataIndex: 'money', |
|||
}, |
|||
{ |
|||
title: '总预算量', |
|||
dataIndex: 'address', |
|||
}, |
|||
{ |
|||
title: '基准值', |
|||
dataIndex: 'address', |
|||
}, |
|||
{ |
|||
title: '节能量', |
|||
dataIndex: 'address', |
|||
}, |
|||
{ |
|||
title: '预算达成率', |
|||
dataIndex: 'address', |
|||
}, |
|||
]); |
|||
|
|||
const data = [ |
|||
{ |
|||
key: '1', |
|||
name: 'John Brown', |
|||
money: '￥300,000.00', |
|||
address: 'New York No. 1 Lake Park', |
|||
}, |
|||
{ |
|||
key: '2', |
|||
name: 'Jim Green', |
|||
money: '￥1,256,000.00', |
|||
address: 'London No. 1 Lake Park', |
|||
}, |
|||
{ |
|||
key: '3', |
|||
name: 'Joe Black', |
|||
money: '￥120,000.00', |
|||
address: 'Sidney No. 1 Lake Park', |
|||
}, |
|||
]; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.totalContant { |
|||
height: 100%; |
|||
padding: 12px; |
|||
} |
|||
:deep(.ant-tabs-content) { |
|||
padding: 16px; |
|||
} |
|||
.ns-form-title { |
|||
font-weight: bold; |
|||
user-select: text; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 5vh; |
|||
|
|||
.title { |
|||
text-align: left; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
font-weight: bold; |
|||
user-select: text; |
|||
position: relative; |
|||
padding-left: 9px; |
|||
width: 50%; |
|||
} |
|||
.title::before { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
height: 13px; |
|||
width: 3px; |
|||
border-radius: 1px; |
|||
background-color: #2778ff; |
|||
} |
|||
.operation { |
|||
display: flex; |
|||
margin-right: 10px; |
|||
font-weight: 400; |
|||
height: 70%; |
|||
cursor: pointer; |
|||
width: 10%; |
|||
} |
|||
.month { |
|||
width: 70px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
// background: #f2f2f2; |
|||
} |
|||
.year { |
|||
width: 70px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
// background: #2778ff; |
|||
} |
|||
} |
|||
.contant { |
|||
width: 100%; |
|||
height: calc(100% - 5vh); |
|||
.chartsPart { |
|||
width: 100%; |
|||
height: 35%; |
|||
.electricityConsumption { |
|||
width: 19%; |
|||
height: 100%; |
|||
background: rgba(39, 120, 255, 0.05); |
|||
} |
|||
} |
|||
.tablePart { |
|||
height: calc(65% - 20px); |
|||
margin-top: 20px; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue