feat: 优化大屏
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -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 {
|
||||
|
@@ -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;
|
||||
|
@@ -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> -->
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
|
Reference in New Issue
Block a user