1.完成生产管理-电量分析静态界面
2.完成综合管理-人员排班管理交互 3.修改部分逻辑和样式
This commit is contained in:
re-JZzzz
@ -1,5 +1,17 @@
|
||||
<template>
|
||||
<div class="detaildata-container">
|
||||
<div class="title-container">
|
||||
<div class="title-left">
|
||||
<TitleComponent title="发电量同比分析" :font-level="2" />
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<el-input
|
||||
placeholder="请输入搜索内容"
|
||||
style="width: 200px;"
|
||||
prefix-icon="Search"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
@ -177,8 +189,24 @@ onMounted(() => {
|
||||
.detaildata-container {
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.title-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
<template>
|
||||
<div class="duibifenxi-bar-container">
|
||||
<div ref="chartRef" class="chart" style="width: 100%; height: 300px;"></div>
|
||||
<div class="title">
|
||||
<TitleComponent title="发电量同比分析" :font-level="2" />
|
||||
<el-select placeholder="请选择线路" style="width: 150px;">
|
||||
<el-option label="A线路" value="all"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div ref="chartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -32,17 +38,17 @@ const defaultCompareData: CompareData = {
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return
|
||||
|
||||
|
||||
chartInstance = echarts.init(chartRef.value)
|
||||
const data = props.compareData || defaultCompareData
|
||||
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: function(params: any) {
|
||||
formatter: function (params: any) {
|
||||
const current = params[0]
|
||||
const lastYear = params[1]
|
||||
let result = `${current.name}<br/>`
|
||||
@ -78,16 +84,12 @@ const initChart = () => {
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: 'kwh',
|
||||
nameTextStyle: {
|
||||
color: '#666',
|
||||
padding: [0, 0, 0, 40]
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666'
|
||||
color: '#666',
|
||||
formatter: '{value} Kwh',
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
@ -123,7 +125,7 @@ const initChart = () => {
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
chartInstance.setOption(option)
|
||||
}
|
||||
|
||||
@ -147,28 +149,35 @@ onUnmounted(() => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.duibifenxi-bar-container {
|
||||
padding: 16px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
// 响应式调整
|
||||
@media screen and (max-width: 768px) {
|
||||
.duibifenxi-bar-container {
|
||||
padding: 12px;
|
||||
padding: 5px;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 250px;
|
||||
|
||||
.chart-container {
|
||||
min-height: 230px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,43 +1,45 @@
|
||||
<template>
|
||||
<div class="tongbifenxi-line-container">
|
||||
<div id="tongbifenxiLineChart" class="chart-container"></div>
|
||||
<div class="title">
|
||||
<TitleComponent title="发电量同比分析" :font-level="2" />
|
||||
<el-select placeholder="请选择线路" style="width: 150px;">
|
||||
<el-option label="A线路" value="all"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div ref="chartDomRef" class="chart-container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onBeforeUnmount, ref } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import TitleComponent from '@/components/TitleComponent/index.vue';
|
||||
|
||||
const chartDomRef = ref<HTMLElement | null>(null);
|
||||
const chartInstance = ref<echarts.ECharts | null>(null);
|
||||
|
||||
const initChart = () => {
|
||||
const chartDom = document.getElementById('tongbifenxiLineChart');
|
||||
if (!chartDom) return;
|
||||
if (!chartDomRef.value) return;
|
||||
|
||||
chartInstance.value = echarts.init(chartDom);
|
||||
chartInstance.value = echarts.init(chartDomRef.value);
|
||||
|
||||
// 写死的数据
|
||||
const dates = ['1号', '2号', '3号', '4号', '5号', '6号', '7号'];
|
||||
const growthRates = ['1.50', '1.20', '0.50', '0.80', '0.90', '0.30', '-2.00'];
|
||||
const growthRates = [1.50, 1.20, 0.50, 0.80, 0.90, 0.30, -2.00];
|
||||
|
||||
const option: echarts.EChartsOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||||
borderColor: '#409eff',
|
||||
trigger: 'item',
|
||||
backgroundColor: '#67c23a',
|
||||
borderWidth: 0,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
},
|
||||
formatter: (params: any) => {
|
||||
const data = params[0];
|
||||
return `${data.name}:\n环比增长率: ${data.value}%`;
|
||||
return `${params.name}：\n环比增长率：${params.value}%`;
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
padding: [10, 15]
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
@ -51,7 +53,7 @@ const initChart = () => {
|
||||
boundaryGap: false,
|
||||
data: dates,
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
@ -90,7 +92,6 @@ const initChart = () => {
|
||||
{
|
||||
name: '环比增长率',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
@ -103,9 +104,6 @@ const initChart = () => {
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#67c23a',
|
||||
width: 3
|
||||
@ -117,6 +115,17 @@ const initChart = () => {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
itemStyle: {
|
||||
color: '#67c23a',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 3,
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(103, 194, 58, 0.5)'
|
||||
},
|
||||
|
||||
},
|
||||
data: growthRates,
|
||||
smooth: true
|
||||
}
|
||||
@ -149,8 +158,14 @@ onBeforeUnmount(() => {
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
|
||||
200
src/views/shengchanManage/powerfenxi/components/zonglan.vue
Normal file
200
src/views/shengchanManage/powerfenxi/components/zonglan.vue
Normal file
@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div class="zonglan-container">
|
||||
<!-- 循环生成统计卡片 -->
|
||||
<div v-for="card in statCards" :key="card.id" class="stat-card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">{{ card.title }}</span>
|
||||
<el-tooltip content="查看详情" placement="top">
|
||||
<el-icon>
|
||||
<Warning />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="stat-value">{{ card.value }}</div>
|
||||
<div class="stat-footer">
|
||||
<span class="trend-indicator up">
|
||||
<img src="/src/assets/demo/up.png" alt="up" class="trend-icon"> {{ card.trendChange }}
|
||||
</span>
|
||||
<el-select v-model="card.selectedTimeRange" placeholder="选择时间范围" style="width: 120px; font-size: 12px;">
|
||||
<el-option label="Today" value="today"></el-option>
|
||||
<el-option label="This Week" value="week"></el-option>
|
||||
<el-option label="This Month" value="month"></el-option>
|
||||
<el-option label="This Year" value="year"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
// 统计卡片数据
|
||||
interface StatCard {
|
||||
id: string;
|
||||
title: string;
|
||||
value: string;
|
||||
trendChange: string;
|
||||
selectedTimeRange: string;
|
||||
}
|
||||
|
||||
const statCards = ref<StatCard[]>([
|
||||
{
|
||||
id: 'power-total',
|
||||
title: '总发电量',
|
||||
value: '2,456.8',
|
||||
trendChange: '4.2%',
|
||||
selectedTimeRange: 'today'
|
||||
},
|
||||
{
|
||||
id: 'year-on-year',
|
||||
title: '同比增长率',
|
||||
value: '3.8%',
|
||||
trendChange: '0.5%',
|
||||
selectedTimeRange: 'today'
|
||||
},
|
||||
{
|
||||
id: 'month-on-month',
|
||||
title: '环比增长率',
|
||||
value: '2.1%',
|
||||
trendChange: '0.3%',
|
||||
selectedTimeRange: 'today'
|
||||
},
|
||||
{
|
||||
id: 'efficiency',
|
||||
title: '运行效率',
|
||||
value: '98.6%',
|
||||
trendChange: '1.2%',
|
||||
selectedTimeRange: 'today'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.zonglan-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
color: #c0c4cc;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.info-icon:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.2;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.stat-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.trend-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.trend-indicator.up {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.trend-indicator.down {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.trend-indicator i {
|
||||
margin-right: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.trend-icon {
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.time-range {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1200px) {
|
||||
.zonglan-container {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.zonglan-container {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user