code-image-backup-public/fastbee
1
0
Fork 0
mirror of https://gitee.com/beecue/fastbee.git synced 2026-05-07 00:04:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(首页): 样式优化

Browse Source
This commit is contained in:
Zhunianya
2026-03-27 16:39:44 +08:00
parent 44bd3b4fb8
commit d0fb156ad3
2 changed files with 223 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
vue/src/views/index.vue
View File

@@ -1,20 +1,18 @@
<template> <template>
<div style="padding: 10px; background-color: #f8f8f8"> <div class="dashboard-container">
<el-row :gutter="20" style="margin: 10px 0px 20px 0px"> <el-row :gutter="20" class="main-row">
<el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="14"> <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="14">
<div style="overflow: hidden; border: 1px solid #ccc"> <div ref="map" style="height: 650px; width: 100%"></div>
<div ref="map" style="height: 650px"></div>
</div>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10"> <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
<el-card shadow="none" style=""> <el-card shadow="hover" class="stat-card">
<h3 style="font-weight: bold"> <div class="card-header">
<i class="el-icon-s-data"></i> <i class="el-icon-s-data"></i>
{{ $t('home.equip') }} <span>{{ $t('home.equip') }}</span>
</h3> </div>
<el-row :gutter="40" class="panel-group"> <el-row :gutter="10" class="panel-group">
<el-col :span="12" class="card-panel-col"> <el-col :xs="12" :sm="12" :md="12" :lg="12" class="card-panel-col">
<div class="card-panel"> <div class="card-panel">
<div class="card-panel-icon-wrapper icon-blue"> <div class="card-panel-icon-wrapper icon-blue">
<svg-icon icon-class="device" class-name="card-panel-icon" /> <svg-icon icon-class="device" class-name="card-panel-icon" />
@@ -25,7 +23,7 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="12" class="card-panel-col"> <el-col :xs="12" :sm="12" :md="12" :lg="12" class="card-panel-col">
<div class="card-panel"> <div class="card-panel">
<div class="card-panel-icon-wrapper icon-red"> <div class="card-panel-icon-wrapper icon-red">
<svg-icon icon-class="monitor-a" class-name="card-panel-icon" /> <svg-icon icon-class="monitor-a" class-name="card-panel-icon" />
@@ -36,7 +34,7 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="12" class="card-panel-col"> <el-col :xs="12" :sm="12" :md="12" :lg="12" class="card-panel-col">
<div class="card-panel"> <div class="card-panel">
<div class="card-panel-icon-wrapper icon-blue"> <div class="card-panel-icon-wrapper icon-blue">
<svg-icon icon-class="model" class-name="card-panel-icon" /> <svg-icon icon-class="model" class-name="card-panel-icon" />
@@ -47,7 +45,7 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="12" class="card-panel-col"> <el-col :xs="12" :sm="12" :md="12" :lg="12" class="card-panel-col">
<div class="card-panel"> <div class="card-panel">
<div class="card-panel-icon-wrapper icon-red"> <div class="card-panel-icon-wrapper icon-red">
<svg-icon icon-class="alert" class-name="card-panel-icon" /> <svg-icon icon-class="alert" class-name="card-panel-icon" />
@@ -58,7 +56,7 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="12" class="card-panel-col"> <el-col :xs="12" :sm="12" :md="12" :lg="12" class="card-panel-col">
<div class="card-panel"> <div class="card-panel">
<div class="card-panel-icon-wrapper icon-blue"> <div class="card-panel-icon-wrapper icon-blue">
<svg-icon icon-class="log-a" class-name="card-panel-icon" /> <svg-icon icon-class="log-a" class-name="card-panel-icon" />
@@ -69,7 +67,7 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="12" class="card-panel-col"> <el-col :xs="12" :sm="12" :md="12" :lg="12" class="card-panel-col">
<div class="card-panel"> <div class="card-panel">
<div class="card-panel-icon-wrapper icon-red"> <div class="card-panel-icon-wrapper icon-red">
<svg-icon icon-class="event-a" class-name="card-panel-icon" /> <svg-icon icon-class="event-a" class-name="card-panel-icon" />
@@ -82,40 +80,42 @@
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-card>
<el-card shadow="none" style="margin-top: 22px; height: 302px"> <el-card shadow="hover" class="notice-card" style="height: 250px">
<h3 style="font-weight: bold; margin-bottom: 10px"> <div class="card-header">
<i class="el-icon-s-order"></i> <i class="el-icon-s-order"></i>
{{ $t('home.infoBoard') }} <span>{{ $t('home.infoBoard') }}</span>
</h3> </div>
<div style="cursor: pointer; display: table; width: 100%; line-height: 36px" @click="openDetail(item.noticeId)" v-for="item in noticeList" :key="item.noticeId"> <div class="notice-list">
<div style="display: table-cell; padding-right: 10px"> <div class="notice-item" @click="openDetail(item.noticeId)" v-for="item in noticeList" :key="item.noticeId">
<div class="notice-title">
<el-tag size="mini" effect="dark" type="warning" v-if="item.noticeType == 2">{{ $t('home.notice') }}</el-tag> <el-tag size="mini" effect="dark" type="warning" v-if="item.noticeType == 2">{{ $t('home.notice') }}</el-tag>
<el-tag size="mini" effect="dark" v-else>{{ $t('home.information') }}</el-tag> <el-tag size="mini" effect="dark" v-else>{{ $t('home.information') }}</el-tag>
{{ item.noticeTitle }} <span>{{ item.noticeTitle }}</span>
</div> </div>
<div style="display: table-cell; width: 90px; font-size: 14px"> <div class="notice-time">
<i class="el-icon-time"></i> <i class="el-icon-time"></i>
{{ parseTime(item.createTime, '{y}-{m}-{d}') }} {{ parseTime(item.createTime, '{y}-{m}-{d}') }}
</div> </div>
</div> </div>
</div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
<el-card shadow="none" style="margin: 10px 10px 20px 10px"> <el-card shadow="hover" class="server-card" v-if="isAdmin">
<el-row :gutter="120" v-if="isAdmin"> <el-row :gutter="120">
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8"> <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
<div style="padding: 20px"> <div class="pie-chart">
<div ref="pieCpu" style="height: 161px"></div> <div ref="pieCpu" style="height: 161px"></div>
</div> </div>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8"> <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
<div style="padding: 20px"> <div class="pie-chart">
<div ref="pieMemery" style="height: 161px"></div> <div ref="pieMemery" style="height: 161px"></div>
</div> </div>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8"> <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
<div style="padding: 20px"> <div class="pie-chart">
<div ref="pieDisk" style="height: 161px"></div> <div ref="pieDisk" style="height: 161px"></div>
</div> </div>
</el-col> </el-col>
@@ -123,7 +123,7 @@
</el-card> </el-card>
<!-- h5手机显示页面 --> <!-- h5手机显示页面 -->
<el-card shadow="hover" style="margin: 20px 10px 0px 10px" class="phone-card"> <el-card shadow="hover" style="margin: 20px 0px 0px" class="phone-card">
<el-row :gutter="40"> <el-row :gutter="40">
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" style="padding: 10px"> <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" style="padding: 10px">
<div style="padding: 30px; margin: 20px 0; font-size: 14px"> <div style="padding: 30px; margin: 20px 0; font-size: 14px">
@@ -842,6 +842,119 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.dashboard-container {
padding: 20px;
background-color: #f5f7fa;
min-height: calc(100vh - 84px);
.main-row {
margin-bottom: 0;
}
.map-card,
.stat-card,
.notice-card,
.server-card {
border-radius: 8px;
border: none;
height: 100%;
}
.stat-card {
margin-bottom: 20px;
.card-header {
font-size: 16px;
font-weight: 600;
color: #303133;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #ebeef5;
i {
margin-right: 8px;
color: #409eff;
}
}
}
.notice-card {
.card-header {
font-size: 16px;
font-weight: 600;
color: #303133;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #ebeef5;
i {
margin-right: 8px;
color: #409eff;
}
}
.notice-list {
.notice-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #f5f7fa;
cursor: pointer;
transition: all 0.3s;
&:last-child {
border-bottom: none;
}
&:hover {
background-color: #f5f7fa;
padding-left: 10px;
}
.notice-title {
display: flex;
align-items: center;
flex: 1;
.el-tag {
margin-right: 10px;
color: #fff !important;
&.el-tag--mini {
padding: 0 8px;
}
}
span {
color: #606266;
font-size: 14px;
}
}
.notice-time {
color: #909399;
font-size: 13px;
i {
margin-right: 5px;
}
}
}
}
}
.server-card {
margin-top: 20px;
border-radius: 8px;
border: none;
.pie-chart {
padding: 20px;
}
}
}
$shadow-color: rgba(0, 0, 0, 0.1); $shadow-color: rgba(0, 0, 0, 0.1);
//小程序，h5 //小程序，h5
@@ -948,21 +1061,25 @@ $shadow-color: rgba(0, 0, 0, 0.1);
.panel-group { .panel-group {
.card-panel-col { .card-panel-col {
margin-bottom: 10px; margin-bottom: 15px;
} }
.card-panel { .card-panel {
height: 68px; height: 80px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
color: #666; color: #666;
border: 1px solid #eee; border: none;
border-radius: 5px; border-radius: 8px;
//box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08); background-color: #f9fafc;
background-color: #fff; transition: all 0.3s;
&:hover { &:hover {
background-color: #f5f7fa;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
.card-panel-icon-wrapper { .card-panel-icon-wrapper {
color: #fff; color: #fff;
} }
@@ -1002,33 +1119,71 @@ $shadow-color: rgba(0, 0, 0, 0.1);
.card-panel-icon-wrapper { .card-panel-icon-wrapper {
float: left; float: left;
margin: 10px; margin: 12px;
padding: 10px; padding: 10px;
transition: all 0.38s ease-out; transition: all 0.38s ease-out;
border-radius: 6px; border-radius: 8px;
background-color: #fff;
} }
.card-panel-icon { .card-panel-icon {
float: left; float: left;
font-size: 30px; font-size: 28px;
} }
.card-panel-description { .card-panel-description {
float: right; float: right;
font-weight: bold; font-weight: bold;
margin: 15px; margin: 12px;
margin-left: 0px; margin-left: 0px;
.card-panel-text { .card-panel-text {
line-height: 14px; line-height: 14px;
color: rgba(0, 0, 0, 0.45); color: #909399;
font-size: 14px; font-size: 13px;
margin-bottom: 12px; margin-bottom: 10px;
text-align: right; text-align: right;
} }
.card-panel-num { .card-panel-num {
font-size: 18px; font-size: 24px;
font-weight: 600;
color: #303133;
}
}
}
}
// 响应式布局
@media screen and (max-width: 768px) {
.dashboard-container {
padding: 10px;
.map-card {
height: 400px;
}
.card-panel {
height: 70px;
.card-panel-num {
font-size: 20px !important;
}
}
}
}
@media screen and (max-width: 576px) {
.dashboard-container {
.map-card {
height: 300px;
}
.panel-group {
.card-panel-col {
:xs {
span: 24;
}
} }
} }
} }

17
vue/src/views/iot/product/index.vue
View File

@@ -51,7 +51,7 @@
<div class="info-row" style="width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"> <div class="info-row" style="width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
<span class="info-value" style="display: flex"> <span class="info-value" style="display: flex">
{{ $t('product.index.091251-18') }}： {{ $t('product.index.091251-18') }}：
<el-tooltip :content="item.networkMethod" placement="top"> <el-tooltip :content="getDictLabel(item.networkMethod)" placement="top">
<dict-tag :options="dict.type.iot_network_method" :value="item.networkMethod" size="mini" /> <dict-tag :options="dict.type.iot_network_method" :value="item.networkMethod" size="mini" />
</el-tooltip> </el-tooltip>
</span> </span>
@@ -286,6 +286,21 @@ export default {
}, },
}); });
}, },
getDictLabel(value) {
if (value === null || value === undefined || value === '') return '';
const dictList = (this.dict && this.dict.type && this.dict.type.iot_network_method) || [];
const values = Array.isArray(value) ? value : String(value).split(',').map((v) => v.trim()).filter(Boolean);
const labels = values
.map((val) => {
const dictItem = dictList.find((item) => String(item.value) === String(val));
return dictItem ? dictItem.label : val;
})
.filter(Boolean);
return labels.join('、');
},
/** 设备授权操作 */ /** 设备授权操作 */
handleDeviceAuthorize(row) { handleDeviceAuthorize(row) {
let productId = row.productId; let productId = row.productId;