fks-xuxinyue
4 months ago
13 changed files with 724 additions and 133 deletions
@ -0,0 +1,87 @@ |
|||||
|
<template> |
||||
|
<div class="detailContant"> |
||||
|
<div class="ns-form-title"> |
||||
|
<div class="title"> |
||||
|
<span>统计数据</span> |
||||
|
</div> |
||||
|
<div class="operation"> |
||||
|
<a-button type="primary" @click="changeParentData">返回</a-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="contant"> |
||||
|
<div class="chartsPart"> |
||||
|
</div> |
||||
|
<div class="tablePart"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { defineEmits } from 'vue'; |
||||
|
// 点击返回 |
||||
|
const emit = defineEmits(['change-data']); |
||||
|
const changeParentData = () => { |
||||
|
emit('change-data', true); |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.detailContant { |
||||
|
height: 100%; |
||||
|
padding: 12px; |
||||
|
} |
||||
|
.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: 4%; |
||||
|
} |
||||
|
} |
||||
|
.contant { |
||||
|
width: 100%; |
||||
|
height: calc(100% - 5vh); |
||||
|
.chartsPart { |
||||
|
width: 100%; |
||||
|
height: 40%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.tablePart { |
||||
|
height: calc(60% - 20px); |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,358 @@ |
|||||
|
<template> |
||||
|
<div class="totalContant" v-if="electricTotal"> |
||||
|
<div class="ns-form-title"> |
||||
|
<div class="title"> |
||||
|
<span>统计数据</span> |
||||
|
<a-button style="margin-left: 5%" type="primary" @click="addNode">新增节点</a-button> |
||||
|
<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="ballChart"></div> |
||||
|
<div class="pillarChart" ref="pillarChartRef"></div> |
||||
|
</div> |
||||
|
<div class="tablePart"> |
||||
|
<a-table :columns="columns" :data-source="data" bordered :pagination="false"> |
||||
|
<template #bodyCell="{ column, text, record }"> |
||||
|
<template v-if="column.key === 'action'"> |
||||
|
<span> |
||||
|
<a @click="detailData(record)">详情</a> |
||||
|
</span> |
||||
|
</template> |
||||
|
</template> |
||||
|
</a-table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="totalContant" v-else> |
||||
|
<categoryDeatil @change-data="updateData"/> |
||||
|
</div> |
||||
|
<!-- 新增节点 --> |
||||
|
<a-drawer :visible="visible" :width="500" @close="onClose" :footer-style="{ textAlign: 'right' }"> |
||||
|
<p>Some contents...</p> |
||||
|
<p>Some contents...</p> |
||||
|
<p>Some contents...</p> |
||||
|
<template #footer> |
||||
|
<a-button style="margin-right: 8px" @click="onClose">取消</a-button> |
||||
|
<a-button type="primary" @click="onSubmit">确定</a-button> |
||||
|
</template> |
||||
|
</a-drawer> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { ref } from 'vue'; |
||||
|
import type { Dayjs } from 'dayjs'; |
||||
|
import * as echarts from 'echarts'; |
||||
|
import categoryDeatil from './categoryDeatil.vue'; |
||||
|
defineOptions({ |
||||
|
energyType: 'all', // 与页面路由name一致缓存才可生效 |
||||
|
}); |
||||
|
const value5 = ref<Dayjs>(); |
||||
|
const electricTotal = ref(true); |
||||
|
// 年/月切换 |
||||
|
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; |
||||
|
}; |
||||
|
// echarts图 |
||||
|
const pillarChartRef = ref(null); |
||||
|
let chartInstance: echarts.ECharts | null = null; |
||||
|
const drawPillarChart = () => { |
||||
|
chartInstance = echarts.init(pillarChartRef.value); |
||||
|
const option = { |
||||
|
backgroundColor: 'transparent', |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'shadow', |
||||
|
label: { |
||||
|
show: true, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '4%', |
||||
|
top: '18%', |
||||
|
right: '5%', |
||||
|
bottom: '10%', |
||||
|
}, |
||||
|
legend: { |
||||
|
data: ['昨日总人数', '今日实时人数', '昨日使用率'], |
||||
|
top: '0', |
||||
|
left: '0', |
||||
|
textStyle: { |
||||
|
color: '#666', |
||||
|
fontSize: 12, |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
data: ['2020', '2021', '2022', '2023', '2024'], |
||||
|
axisLine: { |
||||
|
show: true, //隐藏X轴轴线 |
||||
|
lineStyle: { |
||||
|
color: '#d9d9d9', |
||||
|
width: 1, |
||||
|
}, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: true, //隐藏X轴刻度 |
||||
|
alignWithLabel: true, |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
color: '#d9d9d9', //X轴文字颜色 |
||||
|
fontSize: 12, |
||||
|
}, |
||||
|
interval: 0, |
||||
|
}, |
||||
|
}, |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
width: 1, |
||||
|
color: '#d9d9d9', |
||||
|
}, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
color: '#d9d9d9', |
||||
|
fontSize: 12, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '昨日总人数', |
||||
|
type: 'bar', |
||||
|
barWidth: 18, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: '#6395f9', |
||||
|
}, |
||||
|
}, |
||||
|
data: [24, 45, 43, 35, 76], |
||||
|
}, |
||||
|
{ |
||||
|
name: '今日实时人数', |
||||
|
type: 'bar', |
||||
|
barWidth: 18, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: '#62daab', |
||||
|
}, |
||||
|
}, |
||||
|
data: [133, 23, 114, 67, 89], |
||||
|
}, |
||||
|
{ |
||||
|
name: '昨日使用率', |
||||
|
type: 'line', |
||||
|
smooth: true, // 开启平滑曲线 |
||||
|
symbol: 'none', //标记的图形为实心圆 |
||||
|
lineStyle: { |
||||
|
color: '#f4664a', |
||||
|
width: 2, |
||||
|
}, |
||||
|
data: [4.2, 3.5, 2.9, 7.8, 2], |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
chartInstance = echarts.init(pillarChartRef.value); |
||||
|
chartInstance.setOption(option); |
||||
|
}; |
||||
|
setTimeout(() => { |
||||
|
drawPillarChart(); |
||||
|
}, 500); |
||||
|
// 新增节点 |
||||
|
const visible = ref(false); |
||||
|
const addNode = () => { |
||||
|
visible.value = true; |
||||
|
}; |
||||
|
const onClose = () => { |
||||
|
visible.value = false; |
||||
|
}; |
||||
|
// 表格 |
||||
|
const columns = ref([ |
||||
|
{ |
||||
|
title: '序号', |
||||
|
customRender: (text: any) => { |
||||
|
return text.index + 1; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
title: '分项名称', |
||||
|
dataIndex: 'name', |
||||
|
}, |
||||
|
{ |
||||
|
title: '年份', |
||||
|
dataIndex: 'name', |
||||
|
}, |
||||
|
{ |
||||
|
title: '实际用量', |
||||
|
dataIndex: 'money', |
||||
|
}, |
||||
|
{ |
||||
|
title: '预算量', |
||||
|
dataIndex: 'address', |
||||
|
}, |
||||
|
{ |
||||
|
title: '基准值', |
||||
|
dataIndex: 'address', |
||||
|
}, |
||||
|
{ |
||||
|
title: '节能量', |
||||
|
dataIndex: 'address', |
||||
|
}, |
||||
|
{ |
||||
|
title: '预算达成率', |
||||
|
dataIndex: 'address', |
||||
|
}, |
||||
|
{ |
||||
|
title: '操作', |
||||
|
key: 'action', |
||||
|
}, |
||||
|
]); |
||||
|
|
||||
|
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', |
||||
|
}, |
||||
|
]; |
||||
|
const detailData = () => { |
||||
|
electricTotal.value = false; |
||||
|
}; |
||||
|
// 子页面点击返回 |
||||
|
const updateData = (type) => { |
||||
|
electricTotal.value = type; |
||||
|
}; |
||||
|
</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: 40%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
.ballChart { |
||||
|
width: 25%; |
||||
|
border: 1px solid red; |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
.pillarChart { |
||||
|
width: calc(75% - 12px); |
||||
|
} |
||||
|
} |
||||
|
.tablePart { |
||||
|
height: calc(60% - 20px); |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue