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

fix: 大屏自适应

Browse Source
This commit is contained in:
fyy
2025-09-15 11:13:58 +08:00
parent 5f927bf330
commit e752c0a254
1 changed files with 141 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,12 +22,12 @@
<div class="header">
<div class="header-item">
<span class="header-label">今年用电量</span>
<span class="header-value orange">{{powerYear}}</span>
<span class="header-value orange">{{ powerYear }}</span>
<span class="header-unit">KW·h</span>
</div>
<div class="header-item">
<span class="header-label">本月用电总量</span>
<span class="header-value green">{{powerMonth}}</span>
<span class="header-value green">{{ powerMonth }}</span>
<span class="header-unit">KW·h</span>
</div>
<div class="header-item">
@@ -42,7 +42,7 @@
</div>
<div class="header-item">
<span class="header-label">设备总数</span>
<span class="header-value green">{{total}}</span>
<span class="header-value green">{{ total }}</span>
<span class="header-unit">台</span>
</div>
</div>
@@ -53,7 +53,7 @@
<div
ref="barChart"
class="bar-chart"
style="width: 100%; height:242px;"
style="width: 100%; height: 15.12rem"
@click="goWorkOrder"
></div>
</div>
@@ -71,54 +71,44 @@
</div>
</div>
<div class="content-center-second">
<div style="position: relative;left: 2%;padding-top: 10%">
<div style="position: relative; left: 2%; padding-top: 10%">
<div class="offline">离线</div>
<div class="online">在线</div>
</div>
<div>
<EchartsUI
ref="water"
height="100%"
width="150px"
/>
<EchartsUI ref="water" height="100%" width="8.875rem" />
</div>
<div>
<EchartsUI
ref="electricity"
height="100%"
width="150px"
/>
<EchartsUI ref="electricity" height="100%" width="8.875rem" />
</div>
<div>
<EchartsUI
ref="accessControl"
height="100%"
width="150px"
/>
<EchartsUI ref="accessControl" height="100%" width="8.875rem" />
</div>
<div>
<EchartsUI
ref="camera"
height="100%"
width="150px"
/>
<EchartsUI ref="camera" height="100%" width="8.875rem" />
</div>
</div>
</div>
<div class="content-right">
<div class="first">
<div class="mt-8" style="position: relative">
<div
class="flex items-center justify-between p-5"
>
<div class="flex items-center justify-between p-5">
<Radio.Group v-model:value="timeUnit" size="small">
<Radio.Button value="1" style="background-color: transparent;color: #fff">电量</Radio.Button>
<Radio.Button
value="1"
style="background-color: transparent; color: #fff"
>电量</Radio.Button
>
</Radio.Group>
<DatePicker
v-model:value="selectedDate"
picker="month"
placeholder="请选择月份"
style="width: 130px;height: 25px;background-color: transparent;"
style="
width: 8.125rem;
height: 1.56rem;
background-color: transparent;
"
@change="handleDateChange"
class="white-text-datepicker"
/>
@@ -135,20 +125,24 @@
</div>
<div class="second" @click="goWarningProcessing">
<div class="second-box">
<div class="box-content" v-for="(item,index) in warning" :key="index">
<div
class="box-content"
v-for="(item, index) in warning"
:key="index"
>
<div class="box-content-label">{{ item.typeName }}</div>
<div class="box-content-num">{{item.total}}</div>
<div class="box-content-num">{{ item.total }}</div>
</div>
</div>
</div>
<div class="third" @click="goReservationRecords">
<div class="third-item">
<div class="third-title">会议室总数</div>
<div class="third-num">{{todayMeetCount?.meetCount}}</div>
<div class="third-num">{{ todayMeetCount?.meetCount }}</div>
</div>
<div class="third-item">
<div class="third-title">当日预约会议室总数</div>
<div class="third-num">{{todayMeetCount?.timeQuantity}}</div>
<div class="third-num">{{ todayMeetCount?.timeQuantity }}</div>
</div>
</div>
</div>
@@ -158,14 +152,23 @@
</template>
<script setup lang="ts">
import {getStatistics,getworkOrder,getTodayMeetCount,getHydropower,getAccessControl,getCamera,queryTwentyfourRunningDatasByPlNos,getVisitorCount} from '#/api/analytics';
import {
getStatistics,
getworkOrder,
getTodayMeetCount,
getHydropower,
getAccessControl,
getCamera,
queryTwentyfourRunningDatasByPlNos,
getVisitorCount,
} from '#/api/analytics';
import AnalyticsTrends from './analytics-trends.vue';
import { computed } from 'vue';
import { Radio } from 'ant-design-vue';
import {EchartsUI, useEcharts} from "@vben/plugins/echarts";
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
//预警类型
const warning = ref([])
const warning = ref([]);
async function getWarning() {
warning.value = await getStatistics();
}
@@ -198,11 +201,11 @@ const water = ref();
const waterTotal = ref();
const { renderEcharts: renderWater } = useEcharts(water);
async function fetchWater() {
const data = await getHydropower()
const data = await getHydropower();
waterTotal.value = data.water.off + data.water.on;
const waterData = [
{ name: '离线', value: data.water.off },
{ name: '在线', value: data.water.on }
{ name: '在线', value: data.water.on },
];
renderWater({
title: {
@@ -213,10 +216,10 @@ async function fetchWater() {
textStyle: {
color: '#fff',
fontSize: 16,
}
},
},
tooltip: {
trigger: 'item'
trigger: 'item',
},
series: [
{
@@ -226,7 +229,7 @@ async function fetchWater() {
itemStyle: {
borderRadius: 5,
borderColor: '#fff',
borderWidth: 1
borderWidth: 1,
},
label: {
show: true,
@@ -234,32 +237,32 @@ async function fetchWater() {
formatter: `${waterTotal.value}`,
fontSize: 14,
color: '#fff',
fontWeight: 'bold'
fontWeight: 'bold',
},
emphasis: {
label: {
show: true,
fontSize: 14,
}
},
},
labelLine: {
show: false
show: false,
},
data:waterData
}
]
})
data: waterData,
},
],
});
}
// 电
const electricity = ref();
const electricityTotal = ref();
const { renderEcharts: renderElectricity } = useEcharts(electricity);
async function fetchElectricity() {
const data = await getHydropower()
const data = await getHydropower();
electricityTotal.value = data.power.off + data.power.on;
const electricityData = [
{ name: '离线', value: data.power.off },
{ name: '在线', value: data.power.on }
{ name: '在线', value: data.power.on },
];
renderElectricity({
title: {
@@ -270,10 +273,10 @@ async function fetchElectricity() {
textStyle: {
color: '#fff',
fontSize: 16,
}
},
},
tooltip: {
trigger: 'item'
trigger: 'item',
},
series: [
{
@@ -283,7 +286,7 @@ async function fetchElectricity() {
itemStyle: {
borderRadius: 5,
borderColor: '#fff',
borderWidth: 1
borderWidth: 1,
},
label: {
show: true,
@@ -291,32 +294,32 @@ async function fetchElectricity() {
formatter: `${electricityTotal.value}`,
fontSize: 14,
color: '#fff',
fontWeight: 'bold'
fontWeight: 'bold',
},
emphasis: {
label: {
show: true,
fontSize: 14,
}
},
},
labelLine: {
show: false
show: false,
},
data:electricityData
}
]
})
data: electricityData,
},
],
});
}
// 门禁
const accessControl = ref();
const accessControlTotal = ref();
const { renderEcharts: renderAccessControl } = useEcharts(accessControl);
async function fetchAccessControl() {
const data = await getAccessControl()
const data = await getAccessControl();
accessControlTotal.value = data.off + data.on;
const accessControlData = [
{ name: '离线', value: data.off },
{ name: '在线', value: data.on }
{ name: '在线', value: data.on },
];
renderAccessControl({
title: {
@@ -327,10 +330,10 @@ async function fetchAccessControl() {
textStyle: {
color: '#fff',
fontSize: 16,
}
},
},
tooltip: {
trigger: 'item'
trigger: 'item',
},
series: [
{
@@ -340,7 +343,7 @@ async function fetchAccessControl() {
itemStyle: {
borderRadius: 5,
borderColor: '#fff',
borderWidth: 1
borderWidth: 1,
},
label: {
show: true,
@@ -348,32 +351,32 @@ async function fetchAccessControl() {
formatter: `${accessControlTotal.value}`,
fontSize: 14,
color: '#fff',
fontWeight: 'bold'
fontWeight: 'bold',
},
emphasis: {
label: {
show: true,
fontSize: 14,
}
},
},
labelLine: {
show: false
show: false,
},
data:accessControlData
}
]
})
data: accessControlData,
},
],
});
}
// 摄像头
const camera = ref();
const cameraTotal = ref();
const { renderEcharts: renderCamera } = useEcharts(camera);
async function fetchCamera() {
const data = await getCamera()
const data = await getCamera();
cameraTotal.value = data.off + data.on;
const cameraData = [
{ name: '离线', value: data.off },
{ name: '在线', value: data.on }
{ name: '在线', value: data.on },
];
renderCamera({
title: {
@@ -384,10 +387,10 @@ async function fetchCamera() {
textStyle: {
color: '#fff',
fontSize: 16,
}
},
},
tooltip: {
trigger: 'item'
trigger: 'item',
},
series: [
{
@@ -397,7 +400,7 @@ async function fetchCamera() {
itemStyle: {
borderRadius: 5,
borderColor: '#fff',
borderWidth: 1
borderWidth: 1,
},
label: {
show: true,
@@ -405,24 +408,29 @@ async function fetchCamera() {
formatter: `${cameraTotal.value}`,
fontSize: 14,
color: '#fff',
fontWeight: 'bold'
fontWeight: 'bold',
},
emphasis: {
label: {
show: true,
fontSize: 14,
}
},
},
labelLine: {
show: false
show: false,
},
data:cameraData
}
]
})
data: cameraData,
},
],
});
}
const total = computed(() => {
return Number(waterTotal.value) + Number(electricityTotal.value) + Number(cameraTotal.value) + Number(accessControlTotal.value);
return (
Number(waterTotal.value) +
Number(electricityTotal.value) +
Number(cameraTotal.value) +
Number(accessControlTotal.value)
);
});
//顶部 电
const powerMonth = ref();
@@ -432,7 +440,6 @@ function fetchPowerDate(data) {
powerYear.value = data.month.nowYear.total;
}
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
import * as echarts from 'echarts';
@@ -442,7 +449,7 @@ import {
removeChartFromResizeManager,
} from '#/utils/echartsResize';
import { useFlexibleRem } from '#/utils/useFlexibleRem';
import {DatePicker} from "ant-design-vue";
import { DatePicker } from 'ant-design-vue';
useFlexibleRem();
// 路由
const router = useRouter();
@@ -508,14 +515,16 @@ const initBarChart = async () => {
if (!barChart.value) return;
const myChart = echarts.init(barChart.value);
const workOrder = await getworkOrder();
const title = workOrder.map((item) => {return item.type})
const title = workOrder.map((item) => {
return item.type;
});
const statuses = ['已派单', '处理中', '已完成', '创建工单'];
const seriesData = statuses.map(status => {
const seriesData = statuses.map((status) => {
return {
name: status,
type: 'bar',
emphasis: { focus: 'series' },
data: workOrder.map(item => item.statusCounts[status])
data: workOrder.map((item) => item.statusCounts[status]),
};
});
myChart.setOption({
@@ -524,13 +533,13 @@ const initBarChart = async () => {
data: statuses,
top: 10,
textStyle: {
color: '#fff'
}
color: '#fff',
},
},
grid: { left: 40, right: 20, top: 50, bottom: 25 },
xAxis: { data: title ,axisLabel: { color: '#fff' },},
yAxis: {axisLabel: { color: '#fff' },},
series:seriesData,
xAxis: { data: title, axisLabel: { color: '#fff' } },
yAxis: { axisLabel: { color: '#fff' } },
series: seriesData,
});
};
@@ -538,24 +547,24 @@ const initBarChart = async () => {
const initPowerChart = async () => {
if (!powerChart.value) return;
const chart = echarts.init(powerChart.value);
const res = await getVisitorCount()
const res = await getVisitorCount();
const visitorData = [];
const invitationData = [];
res.forEach(item => {
res.forEach((item) => {
const { type, todayCounts } = item;
Object.entries(todayCounts).forEach(([date, count]) => {
const dataItem = { date, value: count };
if (type === "访客") {
if (type === '访客') {
visitorData.push(dataItem);
} else if (type === "邀约") {
} else if (type === '邀约') {
invitationData.push(dataItem);
}
});
});
const dates = visitorData.map(item => item.date);
const visitor = visitorData.map(item => item.value);
const invitation = invitationData.map(item => item.value);
console.log(dates,1,visitor,2,invitation)
const dates = visitorData.map((item) => item.date);
const visitor = visitorData.map((item) => item.value);
const invitation = invitationData.map((item) => item.value);
console.log(dates, 1, visitor, 2, invitation);
const option = {
tooltip: { trigger: 'axis' },
grid: { left: 40, right: 20, top: 50, bottom: 20 },
@@ -604,9 +613,9 @@ const initPowerChart = async () => {
// 人流车流
const initEnvChart = async () => {
if (!envChart.value) return;
const data = await queryTwentyfourRunningDatasByPlNos()
const inCounts = data.data.inCounts
const staticTimeStrs = data.data.staticTimeStrs
const data = await queryTwentyfourRunningDatasByPlNos();
const inCounts = data.data.inCounts;
const staticTimeStrs = data.data.staticTimeStrs;
const chart = echarts.init(envChart.value);
const option = {
tooltip: { trigger: 'axis' },
@@ -655,12 +664,12 @@ const initEnvChart = async () => {
// 组件挂载时初始化
onMounted(() => {
getWarning()
handleTodayMeetCount()
fetchWater()
fetchElectricity()
fetchAccessControl()
fetchCamera()
getWarning();
handleTodayMeetCount();
fetchWater();
fetchElectricity();
fetchAccessControl();
fetchCamera();
updateTime();
timer = setInterval(updateTime, 1000);
@@ -758,7 +767,7 @@ onBeforeUnmount(() => {
}
}
.header {
margin-top: 2.125rem;
margin-top: 1.125rem;
margin-left: 4.625rem;
margin-right: 4.25rem;
height: 6rem;
@@ -822,7 +831,7 @@ onBeforeUnmount(() => {
.first {
height: 16.81rem;
.bar-chart {
margin-top: 35px;
margin-top: 2.187rem;
}
}
.second {
@@ -858,25 +867,27 @@ onBeforeUnmount(() => {
height: 12.5rem;
display: flex;
justify-content: space-around;
.offline,.online {
.offline,
.online {
display: flex;
align-items: center;
gap: 8px;
gap: 0.5rem;
color: #fff;
font-size: 14px;
font-size: 0.875rem;
}
.offline::before,.online::before {
content: "";
width: 30px;
height: 15px;
border-radius: 3px;
border: 1.5px solid #fff;
.offline::before,
.online::before {
content: '';
width: 1.875rem;
height: 0.94rem;
border-radius: 0.18rem;
border: 0.1rem solid #fff;
}
.offline::before{
background-color: #5470C6;
.offline::before {
background-color: #5470c6;
}
.online::before {
background-color: #9CDB7D;
background-color: #9cdb7d;
}
}
}
@@ -934,19 +945,19 @@ onBeforeUnmount(() => {
display: flex;
justify-content: space-around;
align-items: center;
.third-item{
.third-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.third-title{
.third-title {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 0.8rem;
color: #c4d6ff;
line-height: 2rem;
}
.third-num{
.third-num {
display: flex;
justify-content: center;
align-items: center;