remark:'commit'
This commit is contained in:
fks-xuxinyue
@@ -14,6 +14,10 @@
|
||||
<div class="contant">
|
||||
<div class="chartsPart">
|
||||
<div class="electricityConsumption" ref="ydlChart"></div>
|
||||
<div class="electricityConsumption" ref="ydlChart"></div>
|
||||
<div class="electricityConsumption" ref="ydlChart"></div>
|
||||
<div class="electricityConsumption" ref="ydlChart"></div>
|
||||
<div class="electricityConsumption" ref="ydlChart"></div>
|
||||
</div>
|
||||
<div class="tablePart">
|
||||
<a-table :columns="columns" :data-source="data" bordered :pagination="false"> </a-table>
|
||||
@@ -269,6 +273,8 @@
|
||||
.chartsPart {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.electricityConsumption {
|
||||
width: 19%;
|
||||
height: 100%;
|
||||
|
||||
@@ -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>
|
||||
@@ -3,7 +3,9 @@
|
||||
<a-tab-pane key="1" tab="全部">
|
||||
<all />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="用电量" force-render> </a-tab-pane>
|
||||
<a-tab-pane key="2" tab="用电量" force-render>
|
||||
<category />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="用水量"> </a-tab-pane>
|
||||
<a-tab-pane key="4" tab="供水量"> </a-tab-pane>
|
||||
<a-tab-pane key="5" tab="碳排"> </a-tab-pane>
|
||||
@@ -13,6 +15,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import all from './all/index.vue';
|
||||
import category from './category/index.vue';
|
||||
defineOptions({
|
||||
name: 'carbonPlanning', // 与页面路由name一致缓存才可生效
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user