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-09 17:50:56 +08:00
parent 17f2f2aeff
commit ef72d3a38e
13 changed files with 335 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -53,7 +53,7 @@
<div
ref="barChart"
class="bar-chart"
style="width: 100%; height: 100%"
style="width: 100%; height:242px"
></div>
</div>
<div class="second">
@@ -72,14 +72,11 @@
<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 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>
@@ -99,32 +96,51 @@
</div>
<div class="content-right">
<div class="first">
<div ref="waterChart" class="water-chart"></div>
<!-- <div ref="waterChart" class="water-chart"></div>-->
<!-- <div ref="pie3dChart" class="pie3d-chart"></div> -->
<div class="mt-8" style="position: relative">
<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.Group>
<DatePicker
v-model:value="selectedDate"
picker="month"
placeholder="请选择月份"
style="width: 130px;height: 25px;background-color: transparent;"
@change="handleDateChange"
class="white-text-datepicker"
/>
</div>
<div v-if="timeUnit == 1">
<AnalyticsTrends
ref="analyticsTrendsRef"
:selected-date="selectedDate"
/>
</div>
</div>
</div>
<div class="second">
<div class="second-box">
<div class="box-content">
<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-num">862</div>
</div>
<div class="box-content">
<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 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>
</div>
<!-- <div ref="waterChart" class="water-chart"></div> -->
</div>
<div class="third">
<div ref="deviceChart" class="device-chart"></div>
<!-- <div ref="deviceChart" class="device-chart"></div>-->
<div class="third-item">
<div class="third-title">会议室总数</div>
<div class="third-num">557</div>
</div>
<div class="third-item">
<div class="third-title">当日预约会议室总数</div>
<div class="third-num">669</div>
</div>
</div>
</div>
</div>
@@ -133,17 +149,77 @@
</template>
<script setup lang="ts">
import {getStatistics,getworkOrder} from '#/api/analytics';
import AnalyticsTrends from './analytics-trends.vue';
import { Radio } from 'ant-design-vue';
//预警类型
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
// }
])
async function getWarning() {
warning.value = await getStatistics();
}
//tab选择
const timeUnit = ref(1);
// 月份选择
const selectedDate = ref<any>(null);
const paramDate = ref(null);
const analyticsTrendsRef = ref<InstanceType<typeof AnalyticsTrends> | null>(
null,
);
const handleDateChange = (date: any) => {
paramDate.value = date.format('YYYY-MM');
// 调用子组件的方法
if (
analyticsTrendsRef.value &&
analyticsTrendsRef.value.getMeterRecordTrend
) {
analyticsTrendsRef.value.getMeterRecordTrend(paramDate);
}
};
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
import * as echarts from 'echarts';
import 'echarts-gl';
import { getThreeDBarOption } from '#/utils/threeDBarOption';
import { renderPie3DChart } from '#/utils/pie3d';
import {
addChartToResizeManager,
removeChartFromResizeManager,
} from '#/utils/echartsResize';
import { useFlexibleRem } from '#/utils/useFlexibleRem';
import {DatePicker} from "ant-design-vue";
useFlexibleRem();
// 路由
const router = useRouter();
@@ -197,33 +273,35 @@ const updateTime = () => {
if (dateElement) dateElement.innerText = date;
};
// 初始化柱状图
const initBarChart = () => {
if (!barChart.value) return;
// 初始化柱状图
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 statuses = ['已派单', '处理中', '已完成', '创建工单'];
const seriesData = statuses.map(status => {
return {
name: status,
type: 'bar',
emphasis: { focus: 'series' },
data: workOrder.map(item => item.statusCounts[status])
};
});
myChart.setOption({
tooltip: {},
legend: {
data: statuses, // 图例数据，与series中的name对应
top: 10, // 位置控制
textStyle: {
color: '#fff'
}
},
grid: { left: 40, right: 20, top: 50, bottom: 25 },
xAxis: { data: ['A', 'B', 'C', 'D'] },
yAxis: {},
series: [
{
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],
},
],
xAxis: { data: title ,axisLabel: { color: '#fff' },},
yAxis: {axisLabel: { color: '#fff' },},
series:seriesData,
});
};
@@ -506,6 +584,8 @@ const changeToPersonnelDuty=()=>{
// 组件挂载时初始化
onMounted(() => {
getWarning()
updateTime();
timer = setInterval(updateTime, 1000);
initBarChart();
@@ -551,6 +631,15 @@ onBeforeUnmount(() => {
</script>
<style scoped>
.white-text-datepicker :deep(.ant-picker-input > input::placeholder) {
color: #fff !important;
}
.white-text-datepicker :deep(.ant-picker-input > input) {
color: white !important;
}
.white-text-datepicker :deep(.ant-picker-suffix > .anticon) {
color: white !important;
}
@font-face {
font-family: 'ShiShangZhongHeiJianTi';
src: url('../../../assets/fonts/时尚中黑简体.ttf') format('truetype');
@@ -707,6 +796,7 @@ onBeforeUnmount(() => {
margin: 0 auto;
}
.bar-chart {
margin-top: 35px;
}
}
.second {
@@ -835,6 +925,7 @@ onBeforeUnmount(() => {
justify-content: space-between;
.first {
height: 16.81rem;
//background-color: red;
.water-chart {
height: 100%;
/* margin-top: 0.2rem; */
@@ -845,13 +936,14 @@ onBeforeUnmount(() => {
margin-top: 2rem;
margin-bottom: 2rem;
.second-box {
margin-top: 2rem;
margin-left: 0.5rem;
margin-top: 3.5rem;
display: flex;
justify-content: space-around;
align-items: center;
.box-content {
height: 8rem;
width: 8rem;
height: 7rem;
width: 7rem;
display: flex;
flex-direction: column;
justify-content: center;
@@ -880,7 +972,38 @@ onBeforeUnmount(() => {
}
}
.third {
padding: 5rem;
height: 13.12rem;
display: flex;
justify-content: space-around;
align-items: center;
.third-item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.third-title{
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 0.8rem;
color: #c4d6ff;
line-height: 2rem;
}
.third-num{
display: flex;
justify-content: center;
align-items: center;
width: 6rem;
height: 4rem;
background: url('../../../assets/monitor/device-alerts-bg2.png');
background-size: 100% 100%;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 1.2rem;
color: #ffffff;
}
}
.device-chart {
height: 10rem;
margin-top: 2rem;