feat: 优化大屏

This commit is contained in:
fyy
2025-08-05 17:07:10 +08:00
parent c847bd29e1
commit 2beb771185
24 changed files with 1671 additions and 1481 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -549,7 +549,6 @@ onBeforeUnmount(() => {
if (timer) {
clearInterval(timer);
}
// 从管理器中移除图表
if (barChartInstance) {
removeChartFromResizeManager(barChartInstance);
@@ -600,11 +599,11 @@ onBeforeUnmount(() => {
justify-content: space-between;
.left {
display: flex;
width: 14.3125rem;
width: 18.3125rem;
.left-first {
padding-left: 2.3125rem;
padding-right: 3.5rem;
font-size: 1.875rem;
width: 10.5rem;
color: #ffffff;
}
.left-second {

View File

@@ -862,24 +862,23 @@ onBeforeUnmount(() => {
align-items: center;
display: flex;
justify-content: space-between;
.left{
display: flex;
width: 20.3125rem;
.left-first{
padding-left: 2.3125rem;
padding-right: 3.5rem;
font-size: 1.875rem;
color: #FFFFFF;
}
.left-second{
width: 6.5rem;
font-family: ShiShangZhongHeiJianTi;
font-weight: 400;
font-size: 1.25rem;
color: #FFFFFF;
display: flex;
}
.left {
display: flex;
width: 18.3125rem;
.left-first {
padding-left: 2.3125rem;
font-size: 1.875rem;
width: 10.5rem;
color: #ffffff;
}
.left-second {
width: 6.5rem;
font-family: ShiShangZhongHeiJianTi;
font-weight: 400;
font-size: 1.25rem;
color: #ffffff;
}
}
.center{
font-size: 1.9rem;
color: #fff;

View File

@@ -35,7 +35,7 @@
</div>
<div class="navigation-body-right">
<div @click="goToMonitor()">监控大屏</div>
<div @click="goToDigitalIntelligence()">务中心</div>
<div @click="goToDigitalIntelligence()">综合服务中心</div>
<div @click="goToHome()">后台管理</div>
<!-- <div>能源管理</div>
<div>能耗分析</div> -->

View File

@@ -70,12 +70,30 @@
</div>
</div>
<div class="content-center-second">
<div class="second-item">
<div class="second-item-box1">645</div>
<div class="second-item-box2">729</div>
<div class="second-item-box3">648</div>
<div class="second-item-box4">786</div>
<div class="second-item-box5">645</div>
<div class="second-item" @click="changeToPersonnelDuty">
<div>
<div class="second-item-box1">
645
</div>
<div class="second-item-box-label">采购部</div>
</div>
<div>
<div class="second-item-box2">729
</div>
<div class="second-item-box-label">研发部</div>
</div>
<div>
<div class="second-item-box3">648</div>
<div class="second-item-box-label">安保部</div>
</div>
<div>
<div class="second-item-box4">786</div>
<div class="second-item-box-label">人事部</div>
</div>
<div>
<div class="second-item-box5">645</div>
<div class="second-item-box-label">财务部</div>
</div>
</div>
</div>
</div>
@@ -87,15 +105,19 @@
<div class="second">
<div class="second-box">
<div class="box-content">
<div class="box-content-label">服务数量</div>
<div class="box-content-label">维修</div>
<div class="box-content-num">132</div>
</div>
<div class="box-content">
<div class="box-content-label">服务数量</div>
<div class="box-content-label">保洁</div>
<div class="box-content-num">862</div>
</div>
<div class="box-content">
<div class="box-content-label">服务数量</div>
<div class="box-content-label">客服服务</div>
<div class="box-content-num">272</div>
</div>
<div class="box-content">
<div class="box-content-label">安保</div>
<div class="box-content-num">272</div>
</div>
</div>
@@ -187,31 +209,47 @@ const initBarChart = () => {
yAxis: {},
series: [
{
name: '量',
name: '量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
},
{
name: '已处理',
type: 'bar',
data: [2, 10, 16, 3, 6, 8],
},
{
name: '待处理',
type: 'bar',
data: [3, 10, 20, 7, 4, 12],
},
],
});
};
// 初始化电力图表
// 初始化预约情况图表
const initPowerChart = () => {
if (!powerChart.value) return;
const chart = echarts.init(powerChart.value);
const option = {
tooltip: { trigger: 'axis' },
grid: { left: 40, right: 20, top: 32, bottom: 20 },
grid: { left: 40, right: 50, top: 62, bottom: 20 },
xAxis: {
type: 'category',
data: Array.from({ length: 19 }, (_, i) => i + 6),
axisLine: { lineStyle: { color: '#3ec6ff' } },
axisLabel: { color: '#fff' },
name: '小时',
nameTextStyle: { color: '#fff' },
nameLocation: 'end',
nameGap: 5,
},
yAxis: {
type: 'value',
name: '',
name: '',
nameTextStyle: { color: '#fff' },
nameLocation: 'end',
nameGap: 10,
axisLine: { lineStyle: { color: '#3ec6ff' } },
axisLabel: { color: '#fff' },
splitLine: { lineStyle: { color: '#1e90ff22' } },
@@ -462,6 +500,10 @@ const initPie3DChart = () => {
}
};
const changeToPersonnelDuty=()=>{
router.push('/property/attendanceManagement/workforceManagement')
}
// 组件挂载时初始化
onMounted(() => {
updateTime();
@@ -530,11 +572,11 @@ onBeforeUnmount(() => {
justify-content: space-between;
.left {
display: flex;
width: 14.3125rem;
width: 18.3125rem;
.left-first {
padding-left: 2.3125rem;
padding-right: 3.5rem;
font-size: 1.875rem;
width: 10.5rem;
color: #ffffff;
}
.left-second {
@@ -709,6 +751,7 @@ onBeforeUnmount(() => {
display: flex;
justify-content: space-around;
align-items: center;
cursor: pointer;
.second-item-box1 {
width: 7rem;
height: 7rem;
@@ -722,6 +765,14 @@ onBeforeUnmount(() => {
background: url('../../../assets/property/personnel-duty-circle1.png');
background-size: 100% 100%;
}
.second-item-box-label{
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: 1rem;
color: #ffffff;
}
.second-item-box2 {
width: 7rem;
height: 7rem;

View File

@@ -750,23 +750,23 @@ onBeforeUnmount(() => {
align-items: center;
display: flex;
justify-content: space-between;
.left{
display: flex;
width: 14.3125rem;
.left-first{
padding-left: 2.3125rem;
padding-right: 3.5rem;
font-size: 1.875rem;
color: #FFFFFF;
}
.left-second{
width: 6.5rem;
font-family: ShiShangZhongHeiJianTi;
font-weight: 400;
font-size: 1.25rem;
color: #FFFFFF;
}
.left {
display: flex;
width: 18.3125rem;
.left-first {
padding-left: 2.3125rem;
font-size: 1.875rem;
width: 10.5rem;
color: #ffffff;
}
.left-second {
width: 6.5rem;
font-family: ShiShangZhongHeiJianTi;
font-weight: 400;
font-size: 1.25rem;
color: #ffffff;
}
}
.center{
font-size: 1.9rem;
color: #fff;