逆变器综合监控
This commit is contained in:
@ -6,9 +6,9 @@ VITE_APP_ENV = 'development'
|
|||||||
|
|
||||||
# 开发环境
|
# 开发环境
|
||||||
# 李陈杰 209
|
# 李陈杰 209
|
||||||
VITE_APP_BASE_API = 'http://192.168.110.209:8899'
|
# VITE_APP_BASE_API = 'http://192.168.110.209:8899'
|
||||||
# 曾涛
|
# 曾涛
|
||||||
# VITE_APP_BASE_API = 'http://192.168.110.180:8899'
|
VITE_APP_BASE_API = 'http://192.168.110.180:8899'
|
||||||
# 罗成
|
# 罗成
|
||||||
# VITE_APP_BASE_API = 'http://192.168.110.213:8899'
|
# VITE_APP_BASE_API = 'http://192.168.110.213:8899'
|
||||||
# 朱银
|
# 朱银
|
||||||
|
|||||||
@ -31,6 +31,7 @@
|
|||||||
"await-to-js": "3.0.0",
|
"await-to-js": "3.0.0",
|
||||||
"axios": "1.7.8",
|
"axios": "1.7.8",
|
||||||
"crypto-js": "4.2.0",
|
"crypto-js": "4.2.0",
|
||||||
|
"date-fns": "^4.1.0",
|
||||||
"diagram-js": "12.3.0",
|
"diagram-js": "12.3.0",
|
||||||
"didi": "9.0.2",
|
"didi": "9.0.2",
|
||||||
"echarts": "5.5.0",
|
"echarts": "5.5.0",
|
||||||
|
|||||||
BIN
public/assets/demo/Sunny.png
Normal file
BIN
public/assets/demo/Sunny.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
public/assets/demo/back.png
Normal file
BIN
public/assets/demo/back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
public/assets/demo/back2.png
Normal file
BIN
public/assets/demo/back2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 419 KiB |
BIN
public/assets/demo/back3.png
Normal file
BIN
public/assets/demo/back3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 344 KiB |
BIN
public/assets/demo/back4.png
Normal file
BIN
public/assets/demo/back4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 428 KiB |
BIN
public/assets/demo/fengshu.png
Normal file
BIN
public/assets/demo/fengshu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
public/assets/demo/qiangdu.png
Normal file
BIN
public/assets/demo/qiangdu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
public/assets/demo/rain.png
Normal file
BIN
public/assets/demo/rain.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
public/assets/demo/riluo.png
Normal file
BIN
public/assets/demo/riluo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
public/assets/demo/shidu.png
Normal file
BIN
public/assets/demo/shidu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
public/assets/demo/yin.png
Normal file
BIN
public/assets/demo/yin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/demo/back.png
Normal file
BIN
src/assets/demo/back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
128
src/views/demo/components/1.html
Normal file
128
src/views/demo/components/1.html
Normal file
@ -0,0 +1,128 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<!-- 引入图标（这里用的是阿里图标库示例，实际可替换成自己的图标资源） -->
|
||||||
|
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4245527_xxxxxx.css">
|
||||||
|
<!-- <link rel="stylesheet" href="style.css"> -->
|
||||||
|
<style>
|
||||||
|
/* 初始化样式 */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #eef5ff;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 时间轴容器 */
|
||||||
|
.weather-timeline {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
overflow-x: auto;
|
||||||
|
/* 适配小屏幕横向滚动 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 每个时间项 */
|
||||||
|
.time-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 12px;
|
||||||
|
min-width: 80px;
|
||||||
|
/* 保证 item 最小宽度 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当前时间项特殊样式 */
|
||||||
|
.time-item.current {
|
||||||
|
background: #e3f0ff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
transform: scale(1.1);
|
||||||
|
/* 稍微放大突出 */
|
||||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 时间文本 */
|
||||||
|
.time {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 温度文本 */
|
||||||
|
.temp {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图标样式（基于阿里图标库，可替换成自己的图标字体或图片） */
|
||||||
|
.iconfont {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #f9b115;
|
||||||
|
/* 太阳/主色调 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-rain {
|
||||||
|
color: #9ec8f2;
|
||||||
|
/* 雨/蓝色系 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-cloud-moon {
|
||||||
|
color: #c9d6e5;
|
||||||
|
/* 多云 moon/浅灰蓝 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<title>天气时间轴</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="weather-timeline">
|
||||||
|
<div class="time-item">
|
||||||
|
<div class="time">16:00</div>
|
||||||
|
<div class="temp">30°C</div>
|
||||||
|
<i class="iconfont icon-sun"></i> <!-- 太阳图标 -->
|
||||||
|
</div>
|
||||||
|
<div class="time-item">
|
||||||
|
<div class="time">17:00</div>
|
||||||
|
<div class="temp">29°C</div>
|
||||||
|
<i class="iconfont icon-sun"></i>
|
||||||
|
</div>
|
||||||
|
<div class="time-item">
|
||||||
|
<div class="time">18:00</div>
|
||||||
|
<div class="temp">25°C</div>
|
||||||
|
<i class="iconfont icon-rain"></i> <!-- 小雨图标 -->
|
||||||
|
</div>
|
||||||
|
<div class="time-item current">
|
||||||
|
<div class="time">现在</div>
|
||||||
|
<div class="temp">25°C</div>
|
||||||
|
<i class="iconfont icon-rain"></i>
|
||||||
|
</div>
|
||||||
|
<div class="time-item">
|
||||||
|
<div class="time">20:00</div>
|
||||||
|
<div class="temp">25°C</div>
|
||||||
|
<i class="iconfont icon-cloud-moon"></i> <!-- 多云 moon 图标 -->
|
||||||
|
</div>
|
||||||
|
<div class="time-item">
|
||||||
|
<div class="time">21:00</div>
|
||||||
|
<div class="temp">20°C</div>
|
||||||
|
<i class="iconfont icon-cloud-moon"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
311
src/views/demo/components/ChartBox.vue
Normal file
311
src/views/demo/components/ChartBox.vue
Normal file
@ -0,0 +1,311 @@
|
|||||||
|
<template>
|
||||||
|
<div class="chart-container">
|
||||||
|
<!-- 图表标题和时间范围选择器 -->
|
||||||
|
<div class="chart-header">
|
||||||
|
<h2>功率与效率趋势</h2>
|
||||||
|
<div class="chart-actions">
|
||||||
|
<button @click="timeRange = 'day'" :class="{ active: timeRange === 'day' }">今日</button>
|
||||||
|
<button @click="timeRange = 'week'" :class="{ active: timeRange === 'week' }">本周</button>
|
||||||
|
<button @click="timeRange = 'month'" :class="{ active: timeRange === 'month' }">本月</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 图表内容区域 -->
|
||||||
|
<div ref="chartRef" class="chart-content"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, watch } from 'vue';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
// 图表DOM引用
|
||||||
|
const chartRef = ref(null);
|
||||||
|
// 时间范围状态
|
||||||
|
const timeRange = ref('day');
|
||||||
|
// 图表实例
|
||||||
|
let chartInstance = null;
|
||||||
|
|
||||||
|
// 定义颜色常量
|
||||||
|
const POWER_COLOR = 'rgba(42, 130, 228, 1)';
|
||||||
|
const EFFICIENCY_COLOR = 'rgba(67, 207, 124, 1)';
|
||||||
|
|
||||||
|
// 生成指定范围内的随机数（用于模拟数据）
|
||||||
|
const getRandomValue = (min, max) => {
|
||||||
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生成指定范围内的随机浮点数（用于效率数据）
|
||||||
|
const getRandomFloat = (min, max, decimalPlaces = 1) => {
|
||||||
|
const value = Math.random() * (max - min) + min;
|
||||||
|
return parseFloat(value.toFixed(decimalPlaces));
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取当前月份的天数
|
||||||
|
const getDaysInCurrentMonth = () => {
|
||||||
|
const now = new Date();
|
||||||
|
const year = now.getFullYear();
|
||||||
|
const month = now.getMonth() + 1; // 月份从0开始，所以+1
|
||||||
|
return new Date(year, month, 0).getDate();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 根据时间范围返回对应的数据
|
||||||
|
const getChartData = () => {
|
||||||
|
if (timeRange.value === 'day') {
|
||||||
|
return {
|
||||||
|
xAxis: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
|
||||||
|
powerData: [320, 380, 350, 420, 580, 630, 550, 480],
|
||||||
|
efficiencyData: [85.2, 86.5, 87.1, 88.3, 89.5, 89.2, 88.7, 88.1]
|
||||||
|
};
|
||||||
|
} else if (timeRange.value === 'week') {
|
||||||
|
return {
|
||||||
|
xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||||
|
powerData: [4200, 4800, 5100, 4900, 5300, 3800, 3200],
|
||||||
|
efficiencyData: [86.2, 87.5, 88.1, 87.8, 89.0, 88.5, 87.9]
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
// 本月数据 - 按天显示
|
||||||
|
const daysInMonth = getDaysInCurrentMonth();
|
||||||
|
const xAxis = [];
|
||||||
|
const powerData = [];
|
||||||
|
const efficiencyData = [];
|
||||||
|
|
||||||
|
// 生成每天的数据
|
||||||
|
for (let i = 1; i <= daysInMonth; i++) {
|
||||||
|
xAxis.push(`${i}日`);
|
||||||
|
// 生成合理范围内的功率数据（10000-25000之间）
|
||||||
|
powerData.push(getRandomValue(10000, 25000));
|
||||||
|
// 生成合理范围内的效率数据（85-90之间，保留1位小数）
|
||||||
|
efficiencyData.push(getRandomFloat(85, 90));
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
xAxis,
|
||||||
|
powerData,
|
||||||
|
efficiencyData
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化图表
|
||||||
|
const initChart = () => {
|
||||||
|
if (chartRef.value && !chartInstance) {
|
||||||
|
chartInstance = echarts.init(chartRef.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = getChartData();
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: { type: 'cross' }
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['总功率(kW)', '平均效率(%)'],
|
||||||
|
top: 0
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: data.xAxis,
|
||||||
|
// 当月天数较多时，优化X轴标签显示
|
||||||
|
axisLabel: {
|
||||||
|
interval: timeRange.value === 'month' ? 'auto' : 0,
|
||||||
|
rotate: timeRange.value === 'month' ? 45 : 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '总功率(kW)',
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '平均效率(%)',
|
||||||
|
min: 80,
|
||||||
|
max: 95,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}%'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '总功率(kW)',
|
||||||
|
type: 'line',
|
||||||
|
data: data.powerData,
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 3,
|
||||||
|
color: POWER_COLOR
|
||||||
|
},
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
itemStyle: {
|
||||||
|
color: POWER_COLOR
|
||||||
|
},
|
||||||
|
markPoint: {
|
||||||
|
data: [
|
||||||
|
{ type: 'max', name: '最大值' },
|
||||||
|
{ type: 'min', name: '最小值' }
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
color: POWER_COLOR
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '平均效率(%)',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 1,
|
||||||
|
data: data.efficiencyData,
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 3,
|
||||||
|
type: 'dashed',
|
||||||
|
color: EFFICIENCY_COLOR
|
||||||
|
},
|
||||||
|
symbol: 'diamond',
|
||||||
|
symbolSize: 8,
|
||||||
|
itemStyle: {
|
||||||
|
color: EFFICIENCY_COLOR
|
||||||
|
},
|
||||||
|
markPoint: {
|
||||||
|
data: [
|
||||||
|
{ type: 'max', name: '最大值' },
|
||||||
|
{ type: 'min', name: '最小值' }
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
color: EFFICIENCY_COLOR
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
chartInstance.setOption(option);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 响应窗口大小变化
|
||||||
|
const handleResize = () => {
|
||||||
|
if (chartInstance) {
|
||||||
|
chartInstance.resize();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生命周期钩子
|
||||||
|
onMounted(() => {
|
||||||
|
initChart();
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
|
||||||
|
// 清理函数
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('resize', handleResize);
|
||||||
|
if (chartInstance) {
|
||||||
|
chartInstance.dispose();
|
||||||
|
chartInstance = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// 监听时间范围变化，更新图表
|
||||||
|
watch(timeRange, () => {
|
||||||
|
initChart();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.chart-container {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||||
|
overflow: hidden;
|
||||||
|
height: 400px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 15px 20px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-header h2 {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-actions button {
|
||||||
|
background: none;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
padding: 5px 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-left: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 12px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-actions button.active {
|
||||||
|
background-color: #1890ff;
|
||||||
|
color: white;
|
||||||
|
border-color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-content {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 54px);
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.chart-container {
|
||||||
|
height: 350px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.chart-container {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-header {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-actions {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-actions button {
|
||||||
|
margin: 0;
|
||||||
|
flex: 1;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-actions button:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.model {
|
||||||
|
padding: 20px;
|
||||||
|
background-color: rgba(242, 248, 252, 1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
23
src/views/demo/components/TitleComponent.vue
Normal file
23
src/views/demo/components/TitleComponent.vue
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<template>
|
||||||
|
<div style="color: rgba(0, 30, 59, 1);;font-family: 'Alibaba-PuHuiTi-Bold';margin: 10px 0 0 0;"
|
||||||
|
:style="{ fontSize: fontLevelMap[props.fontLevel] }">
|
||||||
|
{{ props.title }}
|
||||||
|
</div>
|
||||||
|
<p style="color: rgba(154, 154, 154, 1);font-size: 14px;">
|
||||||
|
{{ props.subtitle }}
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
const props = defineProps({
|
||||||
|
title: String,
|
||||||
|
subtitle: String,
|
||||||
|
fontLevel: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const fontLevelMap = {
|
||||||
|
1: "24px",
|
||||||
|
2: "18px"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
222
src/views/demo/components/qixiang.vue
Normal file
222
src/views/demo/components/qixiang.vue
Normal file
@ -0,0 +1,222 @@
|
|||||||
|
<template>
|
||||||
|
<div class="cardItem">
|
||||||
|
<el-card>
|
||||||
|
<div class="tianqi"
|
||||||
|
style="display: flex;flex-direction: column;align-items: center;background-color: #FAFAFA;border-radius: 10px;padding-bottom: 40px;">
|
||||||
|
<div>
|
||||||
|
<img src="/assets/demo/Sunny.png" style="display: block; width: 100px;height: 100px;" alt="">
|
||||||
|
</div>
|
||||||
|
<div style="font-family: 'Alibaba-PuHuiTi-Bold';font-size: 24px;">
|
||||||
|
31℃
|
||||||
|
</div>
|
||||||
|
<div>晴朗</div>
|
||||||
|
<div style="color: rgba(154, 154, 154, 1);font-size: 14px;">
|
||||||
|
紫外线强度：<span>高</span>
|
||||||
|
</div>
|
||||||
|
<div class="tianqi2">
|
||||||
|
<div class="item">
|
||||||
|
<div>
|
||||||
|
<img src="/assets/demo/shidu.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="text">相对湿度： <span>45%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div>
|
||||||
|
<img src="/assets/demo/qiangdu.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="text">光照强度： <span>45%</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div>
|
||||||
|
<img src="/assets/demo/fengshu.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="text">风速： <span>2.3m/s</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div>
|
||||||
|
<img src="/assets/demo/riluo.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="text">日落时间： <span>19.45</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="weather-timeline">
|
||||||
|
<div class="time-box">
|
||||||
|
<div class="time-item">
|
||||||
|
<div class="time">16:00</div>
|
||||||
|
<div class="temp">30°C</div>
|
||||||
|
<div class="img-box">
|
||||||
|
<img src="/assets/demo/Sunny.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="time-item">
|
||||||
|
<div class="time">17:00</div>
|
||||||
|
<div class="temp">29°C</div>
|
||||||
|
<div class="img-box">
|
||||||
|
<img src="/assets/demo/Sunny.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="time-item">
|
||||||
|
<div class="child">
|
||||||
|
<div class="time">18:00</div>
|
||||||
|
<div class="temp">25°C</div>
|
||||||
|
<div class="img-box">
|
||||||
|
<img src="/assets/demo/rain.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="time-item show">
|
||||||
|
<div class="time">现在</div>
|
||||||
|
<div class="temp">25°C</div>
|
||||||
|
<div class="img-box">
|
||||||
|
<img src="/assets/demo/rain.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="time-item ">
|
||||||
|
<div class="time">20:00</div>
|
||||||
|
<div class="temp">25°C</div>
|
||||||
|
<div class="img-box">
|
||||||
|
<img src="/assets/demo/yin.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="time-item">
|
||||||
|
<div class="time">21:00</div>
|
||||||
|
<div class="temp">20°C</div>
|
||||||
|
<div class="img-box">
|
||||||
|
<img src="/assets/demo/yin.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.cardItem {
|
||||||
|
padding: -20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tianqi2 {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-top: 50px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40x;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
.text {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.weather-timeline {
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 15px 0;
|
||||||
|
|
||||||
|
.time {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-box {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
// img[src*='Sunny'] {
|
||||||
|
// width: 50px;
|
||||||
|
// height: 50px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// img[src*='rain'] {
|
||||||
|
// width: 60px;
|
||||||
|
// height: 60px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
padding: 15px;
|
||||||
|
background: linear-gradient(to right, #D6E2FF, #DEEBFF);
|
||||||
|
border-radius: 15px;
|
||||||
|
|
||||||
|
.time-box {
|
||||||
|
background: linear-gradient(to right, #447BFF, #67A3FD);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-item.show {
|
||||||
|
color: rgba(24, 109, 245, 1);
|
||||||
|
position: relative;
|
||||||
|
// z-index: 888;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.show::after {
|
||||||
|
// color: rgba(24, 109, 245, 1);
|
||||||
|
// position: relative;
|
||||||
|
// z-index: 888;
|
||||||
|
// background-color: #fff;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 25px;
|
||||||
|
// background-color: red;
|
||||||
|
background-color: #fff;
|
||||||
|
left: 0;
|
||||||
|
border-radius: 0 0 25px 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show::before {
|
||||||
|
// color: rgba(24, 109, 245, 1);
|
||||||
|
// position: relative;
|
||||||
|
// z-index: 888;
|
||||||
|
// background-color: #fff;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 25px;
|
||||||
|
// background-color: red;
|
||||||
|
background-color: #fff;
|
||||||
|
left: 0;
|
||||||
|
top: -25px;
|
||||||
|
border-radius: 25px 25px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .show::after {
|
||||||
|
// content: '';
|
||||||
|
// position: absolute;
|
||||||
|
// height: 155px;
|
||||||
|
// background-color: #fff;
|
||||||
|
// z-index: 999;
|
||||||
|
// width: 100%;
|
||||||
|
// top: -25px;
|
||||||
|
// left: 0;
|
||||||
|
// border-radius: 20px;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script setup>
|
||||||
|
</script>
|
||||||
207
src/views/demo/index.vue
Normal file
207
src/views/demo/index.vue
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user