taskId:280,remark:'commit'
This commit is contained in:
fks-xuxinyue
@@ -5,25 +5,262 @@
|
||||
<span>统计数据</span>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<a-button type="primary" @click="changeParentData">返回</a-button>
|
||||
<a-button type="primary" @click="changeParentData">返回</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contant">
|
||||
<div class="chartsPart">
|
||||
</div>
|
||||
<div class="tablePart">
|
||||
</div>
|
||||
<a-card class="chartsPart">
|
||||
<div class="chart" ref="chartRef"></div>
|
||||
<div class="contrast">
|
||||
<div class="model">
|
||||
<div class="quantity"><span>12,500.00</span>kwh</div>
|
||||
<div class="quantityTitle">2023年实际用量</div>
|
||||
</div>
|
||||
<div class="model"></div>
|
||||
<div class="model"></div>
|
||||
<div class="model"></div>
|
||||
<div class="model"></div>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card class="tablePart" :bordered="false">
|
||||
<div class="button" style="margin-bottom: 12px">
|
||||
<a-button type="primary" :disabled="selectedRowKeys.length === 0">批量设置</a-button>
|
||||
<a-button type="primary" style="margin-left: 6px">基准值设置</a-button>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="data"
|
||||
rowKey="id"
|
||||
bordered
|
||||
:rowSelection="{
|
||||
selectedRowKeys: selectedRowKeys,
|
||||
onChange: onSelectionChange,
|
||||
}"
|
||||
:pagination="false">
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<span>
|
||||
<a @click="editData(record)">修改</a>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineEmits } from 'vue';
|
||||
import { ref, defineEmits } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
// 点击返回
|
||||
const emit = defineEmits(['change-data']);
|
||||
const changeParentData = () => {
|
||||
emit('change-data', true);
|
||||
};
|
||||
// 表格
|
||||
const selectedRowKeys = ref([]);
|
||||
const onSelectionChange = (selectedKeys, selectedRows) => {
|
||||
selectedRowKeys.value = selectedKeys;
|
||||
};
|
||||
const columns = ref([
|
||||
{
|
||||
title: '序号',
|
||||
customRender: (text: any) => {
|
||||
return text.index + 1;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '2023年实际用量',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '2024年实际用量',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '基准值',
|
||||
dataIndex: 'money',
|
||||
},
|
||||
{
|
||||
title: '是否按去年折算',
|
||||
dataIndex: 'address',
|
||||
},
|
||||
{
|
||||
title: '计算方式',
|
||||
dataIndex: 'address',
|
||||
},
|
||||
{
|
||||
title: '折算率',
|
||||
dataIndex: 'address',
|
||||
},
|
||||
{
|
||||
title: '2024年预算',
|
||||
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',
|
||||
},
|
||||
];
|
||||
// echarts图
|
||||
const chartRef = ref(null);
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
const chart = () => {
|
||||
chartInstance = echarts.init(chartRef.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,
|
||||
},
|
||||
itemWidth: 20, // 图例标记的宽度
|
||||
itemHeight: 10, // 图例标记的高度
|
||||
},
|
||||
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],
|
||||
},
|
||||
{
|
||||
name: '今日使用率',
|
||||
type: 'line',
|
||||
smooth: true, // 开启平滑曲线
|
||||
symbol: 'none', //标记的图形为实心圆
|
||||
lineStyle: {
|
||||
color: '#f4664a',
|
||||
width: 2,
|
||||
},
|
||||
data: [4, 6, 9, 8, 5],
|
||||
},
|
||||
],
|
||||
};
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
setTimeout(() => {
|
||||
chart();
|
||||
}, 500);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -75,13 +312,56 @@
|
||||
height: calc(100% - 5vh);
|
||||
.chartsPart {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
height: 60%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
}
|
||||
.contrast {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.model {
|
||||
width: 16%;
|
||||
height: 90%;
|
||||
background: #f7f9ff;
|
||||
padding: 12px;
|
||||
.quantity {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
line-height: 17px;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
> span {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
line-height: 37px;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
.quantityTitle {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.96px;
|
||||
line-height: 21px;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.tablePart {
|
||||
height: calc(60% - 20px);
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
:deep(.ant-card-body) {
|
||||
padding: unset;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
</div>
|
||||
<div class="contant">
|
||||
<div class="chartsPart">
|
||||
<div class="ballChart"></div>
|
||||
<div class="ballChart" ref="ballChartRef"></div>
|
||||
<div class="pillarChart" ref="pillarChartRef"></div>
|
||||
</div>
|
||||
<div class="tablePart">
|
||||
@@ -31,7 +31,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="totalContant" v-else>
|
||||
<categoryDeatil @change-data="updateData"/>
|
||||
<categoryDeatil @change-data="updateData" />
|
||||
</div>
|
||||
<!-- 新增节点 -->
|
||||
<a-drawer :visible="visible" :width="500" @close="onClose" :footer-style="{ textAlign: 'right' }">
|
||||
@@ -50,6 +50,7 @@
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import * as echarts from 'echarts';
|
||||
import categoryDeatil from './categoryDeatil.vue';
|
||||
import 'echarts-liquidfill';
|
||||
defineOptions({
|
||||
energyType: 'all', // 与页面路由name一致缓存才可生效
|
||||
});
|
||||
@@ -190,8 +191,25 @@
|
||||
chartInstance = echarts.init(pillarChartRef.value);
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
const ballChartRef = ref(null);
|
||||
let ballChartInstance: echarts.ECharts | null = null;
|
||||
const drawSQ = () => {
|
||||
ballChartInstance = echarts.init(ballChartRef.value);
|
||||
const option = {
|
||||
series: [
|
||||
{
|
||||
type: 'liquidFill',
|
||||
data: [0.6, 0.5, 0.4, 0.3],
|
||||
radius: '80%',
|
||||
},
|
||||
],
|
||||
};
|
||||
ballChartInstance = echarts.init(ballChartRef.value);
|
||||
ballChartInstance.setOption(option);
|
||||
};
|
||||
setTimeout(() => {
|
||||
drawPillarChart();
|
||||
drawSQ();
|
||||
}, 500);
|
||||
// 新增节点
|
||||
const visible = ref(false);
|
||||
|
||||
Reference in New Issue
Block a user