This commit is contained in:
tcy
2025-09-19 10:20:18 +08:00
committed by re-JZzzz
44 changed files with 3949 additions and 91 deletions

View File

@ -18,8 +18,12 @@
<div class="metric-value">{{ props.dashboardData.todayAlarmTotal }}</div>
<div class="metric-label">今日报警总数</div>
<div class="metric-change">较上周 <span :class="props.dashboardData.updates.todayAlarmTotal.type">
{{ props.dashboardData.updates.todayAlarmTotal.type === 'up' ? '↑' : '↓' }}{{ props.dashboardData.updates.todayAlarmTotal.value }}
</span></div>
<img v-if="props.dashboardData.updates.todayAlarmTotal.type === 'up'" src="/src/assets/demo/up.png"
class="trend-icon" alt="上升">
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
props.dashboardData.updates.todayAlarmTotal.value }}
</span>
</div>
</div>
</el-col>
@ -29,8 +33,11 @@
<div class="metric-value">{{ props.dashboardData.unhandledAlarms }}</div>
<div class="metric-label">未处理报警</div>
<div class="metric-change">较上周 <span :class="props.dashboardData.updates.unhandledAlarms.type">
{{ props.dashboardData.updates.unhandledAlarms.type === 'up' ? '↑' : '↓' }}{{ props.dashboardData.updates.unhandledAlarms.value }}
</span></div>
<img v-if="props.dashboardData.updates.unhandledAlarms.type === 'up'" src="/src/assets/demo/up.png"
class="trend-icon" alt="上升">
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
props.dashboardData.updates.unhandledAlarms.value }}
</span></div>
</div>
</el-col>
@ -40,8 +47,11 @@
<div class="metric-value">{{ props.dashboardData.handledAlarms }}</div>
<div class="metric-label">已处理报警</div>
<div class="metric-change">较上周 <span :class="props.dashboardData.updates.handledAlarms.type">
{{ props.dashboardData.updates.handledAlarms.type === 'up' ? '↑' : '↓' }}{{ props.dashboardData.updates.handledAlarms.value }}
</span></div>
<img v-if="props.dashboardData.updates.handledAlarms.type === 'up'" src="/src/assets/demo/up.png"
class="trend-icon" alt="上升">
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
props.dashboardData.updates.handledAlarms.value }}
</span></div>
</div>
</el-col>
@ -50,9 +60,15 @@
<div class="metric-card">
<div class="metric-value">{{ props.dashboardData.avgProcessTime }}</div>
<div class="metric-label">平均处理时长</div>
<div class="metric-change">较上周 <span :class="props.dashboardData.updates.avgProcessTime.type">
{{ props.dashboardData.updates.avgProcessTime.type === 'up' ? '↑' : '↓' }}{{ props.dashboardData.updates.avgProcessTime.value }}
</span></div>
<div class="metric-change">
较上周
<span :class="props.dashboardData.updates.avgProcessTime.type">
<img v-if="props.dashboardData.updates.avgProcessTime.type === 'up'" src="/src/assets/demo/up.png"
class="trend-icon" alt="上升">
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
props.dashboardData.updates.avgProcessTime.value }}
</span>
</div>
</div>
</el-col>
</el-row>
@ -67,7 +83,7 @@
<el-option label="近90天" value="90days" />
</el-select>
</div>
<el-col :span="24">
<div class="trend-section">
<el-row :gutter="20">
@ -76,11 +92,17 @@
<div class="chart-container">
<div class="chart-left-right-layout">
<div class="chart-info-container">
<div class="chart-title">报警数量() </div>
<div class="chart-title">报警数量() </div>
<div class="chart-total">{{ props.chartData.totals.alarmCount }}</div>
<div class="chart-value">较昨日 <span :class="props.chartData.dailyChanges.alarmCount.type">
{{ props.chartData.dailyChanges.alarmCount.type === 'up' ? '↑' : '↓' }}{{ props.chartData.dailyChanges.alarmCount.value }}
</span></div>
<div class="chart-value">
<span>较昨日</span>
<img v-if="props.chartData.dailyChanges.processEfficiency.type === 'up'"
src="/src/assets/demo/up.png" class="trend-icon" alt="上升">
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">
<span :class="props.chartData.dailyChanges.processEfficiency.type">
{{ props.chartData.dailyChanges.processEfficiency.value }}
</span>
</div>
</div>
<div ref="alarmCountRef" class="chart-content"></div>
</div>
@ -93,9 +115,15 @@
<div class="chart-info-container">
<div class="chart-title">报警处理效率(%)</div>
<div class="chart-total">{{ props.chartData.totals.processEfficiency }}</div>
<div class="chart-value">较昨日 <span :class="props.chartData.dailyChanges.processEfficiency.type">
{{ props.chartData.dailyChanges.processEfficiency.type === 'up' ? '↑' : '↓' }}{{ props.chartData.dailyChanges.processEfficiency.value }}
</span></div>
<div class="chart-value">
<span>较昨日</span>
<img v-if="props.chartData.dailyChanges.processEfficiency.type === 'up'"
src="/src/assets/demo/up.png" class="trend-icon" alt="上升">
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">
<span :class="props.chartData.dailyChanges.processEfficiency.type">
{{ props.chartData.dailyChanges.processEfficiency.value }}
</span>
</div>
</div>
<div ref="processEfficiencyRef" class="chart-content"></div>
</div>
@ -141,7 +169,7 @@ const props = defineProps({
processEfficiency: '89%'
},
dailyChanges: {
alarmCount: { value: '0.9%', type: 'down' },
alarmCount: { value: '0.9%', type: 'up' },
processEfficiency: { value: '0.9%', type: 'down' }
}
})
@ -172,7 +200,7 @@ const initCharts = () => {
trigger: 'axis',
},
grid: {
left: '-45px',
left: '-38px',
right: '0%',
bottom: '0%',
top: '0%',
@ -248,7 +276,7 @@ const initCharts = () => {
trigger: 'axis',
},
grid: {
left: '-45px',
left: '-38px',
right: '0%',
bottom: '0%',
top: '0%',
@ -352,7 +380,7 @@ onUnmounted(() => {
width: 100%;
height: 100%;
background: #fff;
padding:0 20px;
padding: 0 20px;
box-sizing: border-box;
}
@ -411,11 +439,18 @@ onUnmounted(() => {
}
.up {
color: #ff4d4f;
color: #00B87A;
}
.down {
color: #52c41a;
color: #ff4d4f;
}
.trend-icon {
// width: 12px;
// height: 12px;
margin-right: 2px;
vertical-align: middle;
}
.trend-container {
@ -436,7 +471,7 @@ onUnmounted(() => {
}
.trend-header {
align-items: center;
}
@ -483,6 +518,24 @@ onUnmounted(() => {
font-size: 12px;
color: #999;
margin-bottom: 0;
display: flex;
align-items: center;
gap: 4px;
line-height: 1;
}
.chart-value span {
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.chart-value .trend-icon {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
margin: 0;
}
.chart-content {

View File

@ -68,9 +68,9 @@ const dashboardData = ref({
handledAlarms: 16,
avgProcessTime: '42分钟',
updates: {
todayAlarmTotal: { value: '4.2%', type: 'down' },
unhandledAlarms: { value: '5%', type: 'up' },
handledAlarms: { value: '8%', type: 'down' },
todayAlarmTotal: { value: '4.2%', type: 'up' },
unhandledAlarms: { value: '5%', type: 'down' },
handledAlarms: { value: '8%', type: 'up' },
avgProcessTime: { value: '10%', type: 'down' }
}
});
@ -84,7 +84,7 @@ const chartData = ref({
processEfficiency: '89%'
},
dailyChanges: {
alarmCount: { value: '0.9%', type: 'down' },
alarmCount: { value: '0.9%', type: 'up' },
processEfficiency: { value: '0.9%', type: 'down' }
}
});
@ -155,7 +155,7 @@ onMounted(() => {
</script>
<style scoped lang="scss">
.model {
padding: 0px 15px;
padding: 20px 15px;
background-color: rgba(242, 248, 252, 1);
}
</style>

View File

@ -6,14 +6,8 @@
<div class="card-title">总发电量</div>
<div class="card-value">{{ props.statusData.totalPower }}</div>
<div class="card-change positive">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18"
height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.15 5.77505L15.15 5.70006L15.15 5.62505L15.075 5.62505C15.075 5.62505 15 5.62505 14.925 5.55005L11.25 5.55005C10.875 5.55005 10.575 5.85005 10.575 6.22505C10.575 6.60006 10.875 6.90005 11.25 6.90005L13.125 6.90005L9.52501 10.5L7.72501 8.70005C7.35 8.32505 6.60001 8.32505 6.225 8.70005L3.075 11.85C2.85 12.075 2.85 12.525 3.075 12.75C3.22501 12.9001 3.37501 12.975 3.525 12.975C3.67501 12.975 3.82501 12.975 3.975 12.75L6.9 9.82505L8.7 11.625C9.07501 12.0001 9.825 12.0001 10.2 11.625L13.95 7.87505L13.95 9.75006C13.95 10.1251 14.25 10.4251 14.625 10.4251C15 10.4251 15.3 10.1251 15.3 9.75006L15.3 6.37506L15.3 6.15006L15.15 5.77505Z"
fill="#00B87A">
</path>
</svg>
{{ props.statusData.totalPowerChange }} 较上周
<img src="/src/assets/demo/up.png" alt="" class="change-icon">
<span>{{ props.statusData.totalPowerChange }} 较上周</span>
</div>
</div>
<div class="card-right">
@ -37,14 +31,8 @@
<div class="card-title">系统效率</div>
<div class="card-value">{{ props.statusData.efficiency }}</div>
<div class="card-change negative">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18"
height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.15 12.2252L15.15 12.3002L15.15 12.3752L15.075 12.3752C15.075 12.3752 15 12.3752 14.925 12.4502L11.25 12.4502C10.875 12.4502 10.575 12.1502 10.575 11.7752C10.575 11.4002 10.875 11.1002 11.25 11.1002L13.125 11.1002L9.52501 7.5002L7.72501 9.3002C7.35 9.67519 6.60001 9.67519 6.225 9.3002L3.075 6.1502C2.85 5.9252 2.85 5.4752 3.075 5.2502C3.22501 5.10019 3.37501 5.0252 3.525 5.0252C3.67501 5.0252 3.82501 5.0252 3.975 5.2502L6.9 8.1752L8.7 6.3752C9.07501 6.00019 9.825 6.00019 10.2 6.3752L13.95 10.1252L13.95 8.25019C13.95 7.87519 14.25 7.57519 14.625 7.57519C15 7.57519 15.3 7.87519 15.3 8.25019L15.3 11.6252L15.3 11.8502L15.15 12.2252Z"
fill="#E32727">
</path>
</svg>
{{ props.statusData.efficiencyChange }} 较上周
<img src="/src/assets/demo/down.png" alt="" class="change-icon">
<span>{{ props.statusData.efficiencyChange }} 较上周</span>
</div>
</div>
<div class="card-right">
@ -65,14 +53,8 @@
<div class="card-title">组件温度</div>
<div class="card-value">{{ props.statusData.temperature }}</div>
<div class="card-change positive">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18"
height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.15 5.77505L15.15 5.70006L15.15 5.62505L15.075 5.62505C15.075 5.62505 15 5.62505 14.925 5.55005L11.25 5.55005C10.875 5.55005 10.575 5.85005 10.575 6.22505C10.575 6.60006 10.875 6.90005 11.25 6.90005L13.125 6.90005L9.52501 10.5L7.72501 8.70005C7.35 8.32505 6.60001 8.32505 6.225 8.70005L3.075 11.85C2.85 12.075 2.85 12.525 3.075 12.75C3.22501 12.9001 3.37501 12.975 3.525 12.975C3.67501 12.975 3.82501 12.975 3.975 12.75L6.9 9.82505L8.7 11.625C9.07501 12.0001 9.825 12.0001 10.2 11.625L13.95 7.87505L13.95 9.75006C13.95 10.1251 14.25 10.4251 14.625 10.4251C15 10.4251 15.3 10.1251 15.3 9.75006L15.3 6.37506L15.3 6.15006L15.15 5.77505Z"
fill="#00B87A">
</path>
</svg>
{{ props.statusData.temperatureChange }} 较上周
<img src="/src/assets/demo/up.png" alt="" class="change-icon">
<span>{{ props.statusData.temperatureChange }} 较上周</span>
</div>
</div>
<div class="card-right">
@ -93,14 +75,8 @@
<div class="card-title">日照强度</div>
<div class="card-value">{{ props.statusData.sunlight }}</div>
<div class="card-change positive">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18"
height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.15 5.77505L15.15 5.70006L15.15 5.62505L15.075 5.62505C15.075 5.62505 15 5.62505 14.925 5.55005L11.25 5.55005C10.875 5.55005 10.575 5.85005 10.575 6.22505C10.575 6.60006 10.875 6.90005 11.25 6.90005L13.125 6.90005L9.52501 10.5L7.72501 8.70005C7.35 8.32505 6.60001 8.32505 6.225 8.70005L3.075 11.85C2.85 12.075 2.85 12.525 3.075 12.75C3.22501 12.9001 3.37501 12.975 3.525 12.975C3.67501 12.975 3.82501 12.975 3.975 12.75L6.9 9.82505L8.7 11.625C9.07501 12.0001 9.825 12.0001 10.2 11.625L13.95 7.87505L13.95 9.75006C13.95 10.1251 14.25 10.4251 14.625 10.4251C15 10.4251 15.3 10.1251 15.3 9.75006L15.3 6.37506L15.3 6.15006L15.15 5.77505Z"
fill="#00B87A">
</path>
</svg>
{{ props.statusData.sunlightChange }} 较上周
<img src="/src/assets/demo/up.png" alt="" class="change-icon">
<span>{{ props.statusData.sunlightChange }} 较上周</span>
</div>
</div>
<div class="card-right">
@ -206,7 +182,7 @@ const props = defineProps({
margin-top: 4px;
&.positive {
color: #67c23a;
color: #00B87A;
}
&.negative {
@ -216,7 +192,7 @@ const props = defineProps({
.change-icon {
font-size: 10px;
margin-right: 2px;
margin-right: 5px;
}
.card-icon {

View File

@ -142,7 +142,7 @@ onUnmounted(() => {
.chart-content {
width: 100%;
height: calc(100% - 80px);
min-height: 200px;
min-height: 220px;
}
@media (max-width: 768px) {

View File

@ -185,7 +185,7 @@ onUnmounted(() => {
.chart-content {
width: 100%;
height: calc(100% - 80px);
min-height: 200px;
min-height: 220px;
}
@media (max-width: 768px) {

View File

@ -104,7 +104,7 @@ const mockData = ref({
totalPower: '3,456.8KWh',
totalPowerChange: '8.2%',
efficiency: '18.7%',
efficiencyChange: '-0.3%',
efficiencyChange: '0.3%',
temperature: '42.3°C',
temperatureChange: '2.1°C',
sunlight: '865 W/m²',

View File

@ -8,7 +8,8 @@
</div>
<div class="power-amount">{{ value || '2,456.8' }} <span>{{ unit || 'KWh' }}</span></div>
<div class="power-growth">
<span class="growth-value">{{ growth || '+2.5%' }}</span>
<img :src="type === 'up' ? '/src/assets/demo/up.png' : '/src/assets/demo/down.png'" alt="">
<span :class="type === 'up' ? 'up' : 'down'">{{ growth+'%' || '2.5'+'%' }}</span>
<span class="growth-label">{{ growthLabel || '较昨日' }}</span>
</div>
</div>
@ -37,6 +38,14 @@ const props = defineProps({
type: String,
default: '平均效率'
},
type: {
type: String,
default: ''
},
type: {
type: String,
default: ''
},
value: {
type: String,
default: '2,456.8'
@ -247,11 +256,14 @@ onUnmounted(() => {
flex-shrink: 0;
}
.growth-value {
font-size: 14px;
color: #13C2C2;
.up{
font-size: 14px;
color:#00B87A;
}
.down{
font-size: 14px;
color:#ff4d4f;
}
.growth-label {
font-size: 12px;
color: #999;

View File

@ -43,25 +43,20 @@
</el-row>
<!-- 数据展示-->
<el-row :gutter="24">
<el-col :span="6">
<itembox title="总发电量" value="2,456.8" unit="KWh" growth="+2.5%" growthLabel="较昨日" color="#186DF5"
chartType="bar" power="" icon-src="/src/assets/demo/shandian.png"
:chartData="[30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]"></itembox>
</el-col>
<el-col :span="6">
<itembox title="平均效率" value="18.7" unit="%" growth="+2.5%" growthLabel="较昨日" color="#00B87A"
chartType="line" icon-src="/src/assets/demo/huojian.png"
:chartData="[30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]"></itembox>
</el-col>
<el-col :span="6">
<itembox title="设备温度" value="43.5" unit="℃" growth="+2.5%" growthLabel="较昨日" color="#FFC300"
chartType="line" icon-src="/src/assets/demo/wendu.png"
:chartData="[30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]"></itembox>
</el-col>
<el-col :span="6">
<itembox title="系统可用性" value="18.7" unit="%" growth="+2.5%" growthLabel="较昨日" color="#7948EA"
chartType="line" icon-src="/src/assets/demo/use.png"
:chartData="[30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]"></itembox>
<el-col :span="6" v-for="(item, index) in itemBoxData" :key="index">
<itembox
:title="item.title"
:value="item.value"
:unit="item.unit"
:growth="item.growth"
:growthLabel="item.growthLabel"
:color="item.color"
:chartType="item.chartType"
:power="item.power"
:icon-src="item.iconSrc"
:type="item.type"
:chartData="item.chartData">
</itembox>
</el-col>
</el-row>
<!-- 第一行图表 -->
@ -159,6 +154,62 @@ const fenxiLineData = ref({
}
});
// 创建itembox数据数组用于循环渲染
const itemBoxData = ref([
{
title: '总发电量',
value: '2,456.8',
unit: 'KWh',
growth: '2.5',
growthLabel: '较昨日',
color: '#186DF5',
chartType: 'bar',
power: '',
iconSrc: '/src/assets/demo/shandian.png',
type: 'up',
chartData: [30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]
},
{
title: '平均效率',
value: '18.7',
unit: '%',
growth: '2.5',
growthLabel: '较昨日',
color: '#00B87A',
chartType: 'line',
power: '',
iconSrc: '/src/assets/demo/huojian.png',
type: 'up',
chartData: [30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]
},
{
title: '设备温度',
value: '43.5',
unit: '℃',
growth: '2.5',
growthLabel: '较昨日',
color: '#FFC300',
chartType: 'line',
power: '',
iconSrc: '/src/assets/demo/wendu.png',
type: 'up',
chartData: [30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]
},
{
title: '系统可用性',
value: '18.7',
unit: '%',
growth: '2.5',
growthLabel: '较昨日',
color: '#7948EA',
chartType: 'line',
power: '',
iconSrc: '/src/assets/demo/use.png',
type: 'up',
chartData: [30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]
}
]);
const tableData = ref([
{ time: '00:00', irradiance: 0, powerGeneration: 0.0, efficiency: 24.5, moduleTemperature: 23.5, inverterTemperature: 21.2, status: '停机' },
{ time: '08:00', irradiance: 12.5, powerGeneration: 17.2, efficiency: 28.1, moduleTemperature: 26.3, inverterTemperature: 20.3, status: '正常' },