by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat

Browse Source
This commit is contained in:
FLL
2025-09-10 15:26:48 +08:00
parent 24ef7391a7
commit d4845ca2ff
10 changed files with 293 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

412
apps/web-antd/src/views/screen/property/index.vue
View File

@@ -70,28 +70,56 @@
</div>
</div>
<div class="content-center-second">
<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>
<EchartsUI
ref="water"
height="100%"
width="150px"
/>
</div>
<div>
<EchartsUI
ref="electricity"
height="100%"
width="150px"
/>
</div>
<div>
<EchartsUI
ref="accessControl"
height="100%"
width="150px"
/>
</div>
<div>
<EchartsUI
ref="camera"
height="100%"
width="150px"
/>
</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>
<div class="content-right">
@@ -135,11 +163,11 @@
<!-- <div ref="deviceChart" class="device-chart"></div>-->
<div class="third-item">
<div class="third-title">会议室总数</div>
<div class="third-num">557</div>
<div class="third-num">{{todayMeetCount?.meetCount}}</div>
</div>
<div class="third-item">
<div class="third-title">当日预约会议室总数</div>
<div class="third-num">669</div>
<div class="third-num">{{todayMeetCount?.timeQuantity}}</div>
</div>
</div>
</div>
@@ -149,38 +177,13 @@
</template>
<script setup lang="ts">
import {getStatistics,getworkOrder,getTodayMeetCount} from '#/api/analytics';
import {getStatistics,getworkOrder,getTodayMeetCount,getHydropower,getAccessControl,getCamera} from '#/api/analytics';
import AnalyticsTrends from './analytics-trends.vue';
import { Radio } from 'ant-design-vue';
import {EchartsUI, useEcharts} from "@vben/plugins/echarts";
//预警类型
const warning = ref([
// {
// "typeCode": 1025,
// "typeName": "车辆违停占用报警",
// "total": 121
// },
// {
// "typeCode": 1008,
// "typeName": "周界闯入",
// "total": 64306
// },
// {
// "typeCode": 1026,
// "typeName": "黑名单人员",
// "total": 25
// },
// {
// "typeCode": 1007,
// "typeName": "人员聚集",
// "total": 250
// },
// {
// "typeCode": 1028,
// "typeName": "非法停车",
// "total": 628
// }
])
const warning = ref([])
async function getWarning() {
warning.value = await getStatistics();
}
@@ -207,10 +210,212 @@ const handleDateChange = (date: any) => {
const todayMeetCount = ref();
const handleTodayMeetCount = async () => {
todayMeetCount.value = await getTodayMeetCount();
console.log(todayMeetCount)
};
// 水
const water = ref();
const { renderEcharts: renderWater } = useEcharts(water);
async function fetchWater() {
const data = await getHydropower()
const waterData = [
{ name: '离线', value: data.water.off },
{ name: '在线', value: data.water.on }
];
renderWater({
title: {
text: '水',
left: 'center',
top: 'bottom',
padding: [0, 0, 15, 0],
textStyle: {
color: '#fff',
fontSize: 16,
}
},
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 5,
borderColor: '#fff',
borderWidth: 1
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 10,
}
},
labelLine: {
show: false
},
data:waterData
}
]
})
}
// 电
const electricity = ref();
const { renderEcharts: renderElectricity } = useEcharts(electricity);
async function fetchElectricity() {
const data = await getHydropower()
const electricityData = [
{ name: '离线', value: data.power.off },
{ name: '在线', value: data.power.on }
];
renderElectricity({
title: {
text: '电',
left: 'center',
top: 'bottom',
padding: [0, 0, 15, 0],
textStyle: {
color: '#fff',
fontSize: 16,
}
},
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 5,
borderColor: '#fff',
borderWidth: 1
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 10,
}
},
labelLine: {
show: false
},
data:electricityData
}
]
})
}
// 门禁
const accessControl = ref();
const { renderEcharts: renderAccessControl } = useEcharts(accessControl);
async function fetchAccessControl() {
const data = await getAccessControl()
const accessControlData = [
{ name: '离线', value: data.off },
{ name: '在线', value: data.on }
];
renderAccessControl({
title: {
text: '门禁',
left: 'center',
top: 'bottom',
padding: [0, 0, 15, 0],
textStyle: {
color: '#fff',
fontSize: 16,
}
},
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 5,
borderColor: '#fff',
borderWidth: 1
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 10,
}
},
labelLine: {
show: false
},
data:accessControlData
}
]
})
}
// 摄像头
const camera = ref();
const { renderEcharts: renderCamera } = useEcharts(camera);
async function fetchCamera() {
const data = await getCamera()
console.log(data,111)
const cameraData = [
{ name: '离线', value: data.off },
{ name: '在线', value: data.on }
];
renderCamera({
title: {
text: '摄像头',
left: 'center',
top: 'bottom',
padding: [0, 0, 15, 0],
textStyle: {
color: '#fff',
fontSize: 16,
}
},
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 5,
borderColor: '#fff',
borderWidth: 1
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 10,
}
},
labelLine: {
show: false
},
data:cameraData
}
]
})
}
@@ -227,7 +432,7 @@ import {
} from '#/utils/echartsResize';
import { useFlexibleRem } from '#/utils/useFlexibleRem';
import {DatePicker} from "ant-design-vue";
import {getTodayMeetCount} from "#/api/analytics";
import {getCamera} from "#/api/analytics";
useFlexibleRem();
// 路由
const router = useRouter();
@@ -586,14 +791,18 @@ const initPie3DChart = () => {
}
};
const changeToPersonnelDuty=()=>{
router.push('/property/attendanceManagement/workforceManagement')
}
// const changeToPersonnelDuty=()=>{
// router.push('/property/attendanceManagement/workforceManagement')
// }
// 组件挂载时初始化
onMounted(() => {
getWarning()
handleTodayMeetCount()
fetchWater()
fetchElectricity()
fetchAccessControl()
fetchCamera()
updateTime();
timer = setInterval(updateTime, 1000);
@@ -657,7 +866,7 @@ onBeforeUnmount(() => {
}
.mian {
height: 100vh;
background: url('../../../assets/property/bg.png');
background: url('../../../assets/property/bg1.png');
background-size: 100% 100%;
background-color: #081b3a;
display: flex;
@@ -841,90 +1050,9 @@ onBeforeUnmount(() => {
}
}
.content-center-second {
display: flex;
justify-content: center;
align-items: center;
height: 12.5rem;
.second-item {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
cursor: pointer;
.second-item-box1 {
width: 7rem;
height: 7rem;
display: flex;
justify-content: center;
align-items: center;
font-family: ShiShangZhongHeiJianTi;
font-weight: 400;
font-size: 1.37rem;
color: #ffffff;
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;
display: flex;
justify-content: center;
align-items: center;
font-family: ShiShangZhongHeiJianTi;
font-weight: 400;
font-size: 1.37rem;
color: #ffffff;
background: url('../../../assets/property/personnel-duty-circle2.png');
background-size: 100% 100%;
}
.second-item-box3 {
width: 7rem;
height: 7rem;
display: flex;
justify-content: center;
align-items: center;
font-family: ShiShangZhongHeiJianTi;
font-weight: 400;
font-size: 1.37rem;
color: #ffffff;
background: url('../../../assets/property/personnel-duty-circle3.png');
background-size: 100% 100%;
}
.second-item-box4 {
width: 7rem;
height: 7rem;
display: flex;
justify-content: center;
align-items: center;
font-family: ShiShangZhongHeiJianTi;
font-weight: 400;
font-size: 1.37rem;
color: #ffffff;
background: url('../../../assets/property/personnel-duty-circle1.png');
background-size: 100% 100%;
}
.second-item-box5 {
width: 7rem;
height: 7rem;
display: flex;
justify-content: center;
align-items: center;
font-family: ShiShangZhongHeiJianTi;
font-weight: 400;
font-size: 1.37rem;
color: #ffffff;
background: url('../../../assets/property/personnel-duty-circle4.png');
background-size: 100% 100%;
}
}
display: flex;
justify-content: space-around;
}
}
.content-right {