Merge branch 'master' of http://47.109.37.87:3000/by2025/admin-vben5
This commit is contained in:
@@ -37,6 +37,10 @@ export function getAccessControl() {
|
||||
export function getCamera() {
|
||||
return requestClient.get<any>('/sis/deviceManage/online');
|
||||
}
|
||||
// 访客
|
||||
export function getVisitorCount() {
|
||||
return requestClient.get<any>('/property/screen/todayVisitorCount');
|
||||
}
|
||||
//车流
|
||||
export async function queryTwentyfourRunningDatasByPlNos() {
|
||||
let params = {
|
||||
|
||||
@@ -60,6 +60,14 @@ export interface HouseChargeVO {
|
||||
chargeStatus: string;
|
||||
|
||||
personId: string;
|
||||
/**
|
||||
* 单位
|
||||
*/
|
||||
residentUnitText: string;
|
||||
/**
|
||||
* 单位面积
|
||||
*/
|
||||
area: number;
|
||||
}
|
||||
|
||||
export interface HouseChargeForm extends BaseEntity {
|
||||
|
||||
@@ -36,6 +36,7 @@ export interface Resident_unitVO {
|
||||
*/
|
||||
location: string;
|
||||
locations: string[];
|
||||
locationDetail: string;
|
||||
|
||||
/**
|
||||
* 入驻时间
|
||||
|
||||
BIN
apps/web-antd/src/assets/property/bg.jpg
Normal file
BIN
apps/web-antd/src/assets/property/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 438 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 436 KiB |
@@ -35,8 +35,8 @@ export const querySchema: FormSchemaGetter = () => [
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{type: 'checkbox', width: 60},
|
||||
{
|
||||
title: '房屋',
|
||||
field: 'roomName',
|
||||
title: '单位',
|
||||
field: 'residentUnitText',
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
@@ -104,12 +104,33 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '房屋',
|
||||
fieldName: 'roomId',
|
||||
component: 'TreeSelect',
|
||||
label: '单位',
|
||||
fieldName: 'residentUnitId',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
formItemClass: 'col-span-2',
|
||||
},
|
||||
{
|
||||
label: '入驻房间',
|
||||
fieldName: 'roomInfo',
|
||||
component: 'Input',
|
||||
dependencies: {
|
||||
show: (fromValue) => fromValue.residentUnitId,
|
||||
triggerFields: ['residentUnitId'],
|
||||
},
|
||||
formItemClass: 'col-span-2',
|
||||
},
|
||||
{
|
||||
label: '单位面积',
|
||||
fieldName: 'area',
|
||||
component: 'Input',
|
||||
dependencies: {
|
||||
show: (fromValue) => fromValue.residentUnitId,
|
||||
triggerFields: ['residentUnitId'],
|
||||
},
|
||||
formItemClass: 'col-span-2',
|
||||
},
|
||||
{
|
||||
label: '业主',
|
||||
|
||||
@@ -59,11 +59,11 @@ async function handleOpenChange(open: boolean) {
|
||||
<DescriptionsItem label="计费时间">
|
||||
{{ houseChargeDetail.startTime + ' 至 ' + houseChargeDetail.endTime }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="房间">
|
||||
{{ room?.roomNumber }}
|
||||
<DescriptionsItem label="单位">
|
||||
{{ houseChargeDetail?.residentUnitText }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="房间面积">
|
||||
{{ `建筑面积：${room?.area} 套内面积：${room?.insideInArea}` }}
|
||||
<DescriptionsItem label="单位面积">
|
||||
{{ `${houseChargeDetail?.area} （㎡）` }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="单价">
|
||||
{{ costItem?.unitPrice }}
|
||||
|
||||
@@ -121,11 +121,11 @@ async function handleClosed() {
|
||||
<DescriptionsItem label="计费起始">
|
||||
{{ record.startTime }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="房间">
|
||||
{{ room?.roomNumber }}
|
||||
<DescriptionsItem label="单位">
|
||||
{{ record.residentUnitText }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="面积(㎡)">
|
||||
{{ `${room?.area} （套内面积：${room?.insideInArea}）` }}
|
||||
<DescriptionsItem label="单位面积">
|
||||
{{ `${record.area} （㎡）` }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="单价">
|
||||
{{ costItem?.unitPrice }}
|
||||
|
||||
@@ -20,6 +20,7 @@ import type { CostItemSettingVO } from '#/api/property/costManagement/costItemSe
|
||||
import { getDictOptions } from '#/utils/dict';
|
||||
import { personList } from '#/api/property/resident/person';
|
||||
import { renderDictValue } from '#/utils/render';
|
||||
import {resident_unitInfo, resident_unitList} from "#/api/property/resident/unit";
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
@@ -32,7 +33,7 @@ const title = computed(() => {
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
formItemClass: 'col-span-2',
|
||||
formItemClass: 'col-span-1',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 80,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
@@ -54,7 +55,7 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
// 在这里更改宽度
|
||||
class: 'w-[550px]',
|
||||
class: 'w-[70%]',
|
||||
fullscreenButton: false,
|
||||
onBeforeClose,
|
||||
onClosed: handleClosed,
|
||||
@@ -64,10 +65,10 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
await initRoomOptions();
|
||||
await queryCostItemOptions();
|
||||
await queryCostItemOptions(null);
|
||||
await initCostTypeOptions();
|
||||
await queryPersonData();
|
||||
await queryUnitData();
|
||||
const { id } = modalApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
|
||||
@@ -111,46 +112,10 @@ async function handleClosed() {
|
||||
resetInitialized();
|
||||
}
|
||||
|
||||
/**
|
||||
* 房间数据
|
||||
*/
|
||||
async function initRoomOptions() {
|
||||
const roomList = await communityTree(4);
|
||||
const splitStr = '/';
|
||||
handleNode(roomList, 'label', splitStr, function (node: any) {
|
||||
if (node.level != 4) {
|
||||
node.disabled = true;
|
||||
}
|
||||
});
|
||||
formApi.updateSchema([
|
||||
{
|
||||
componentProps: () => ({
|
||||
class: 'w-full',
|
||||
fieldNames: {
|
||||
key: 'id',
|
||||
label: 'label',
|
||||
value: 'code',
|
||||
children: 'children',
|
||||
},
|
||||
placeholder: '请选择房间',
|
||||
showSearch: true,
|
||||
treeData: roomList,
|
||||
treeDefaultExpandAll: true,
|
||||
treeLine: { showLeafIcon: false },
|
||||
// 筛选的字段
|
||||
treeNodeFilterProp: 'label',
|
||||
// 选中后显示在输入框的值
|
||||
treeNodeLabelProp: 'fullName',
|
||||
}),
|
||||
fieldName: 'roomId',
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询费用项设置
|
||||
*/
|
||||
async function queryCostItemOptions(costType: string) {
|
||||
async function queryCostItemOptions(costType: string|null) {
|
||||
let params = {
|
||||
pageSize: 1000,
|
||||
pageNum: 1,
|
||||
@@ -233,10 +198,57 @@ async function queryPersonData() {
|
||||
},
|
||||
]);
|
||||
}
|
||||
//查询入驻单位数据
|
||||
async function queryUnitData() {
|
||||
let params = {
|
||||
pageSize: 1000,
|
||||
pageNum: 1,
|
||||
};
|
||||
const res = await resident_unitList(params);
|
||||
const options = res.rows.map((unit) => ({
|
||||
label:unit.name,
|
||||
value: unit.id,
|
||||
}));
|
||||
formApi.updateSchema([
|
||||
{
|
||||
componentProps: () => ({
|
||||
options: options,
|
||||
showSearch: true,
|
||||
optionFilterProp: 'label',
|
||||
optionLabelProp: 'label',
|
||||
onChange: async (value: string) => {
|
||||
if (value) {
|
||||
await queryRoomByUnit(value);
|
||||
}
|
||||
},
|
||||
}),
|
||||
fieldName: 'residentUnitId',
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
async function queryRoomByUnit(unitId: string) {
|
||||
let unitInfo = await resident_unitInfo(unitId);
|
||||
if(unitInfo&&unitInfo.locationDetail){
|
||||
await formApi.setFieldValue('roomInfo', unitInfo.locationDetail);
|
||||
await formApi.setFieldValue('area', unitInfo.area);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :title="title">
|
||||
<BasicForm />
|
||||
<BasicForm>
|
||||
<template #roomInfo="slotProps">
|
||||
<div>
|
||||
{{slotProps.field.value}}
|
||||
</div>
|
||||
</template>
|
||||
<template #area="slotProps">
|
||||
<div>
|
||||
{{slotProps.field.value}}（㎡）
|
||||
</div>
|
||||
</template>
|
||||
</BasicForm>
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
@@ -6,7 +6,6 @@ import {cloneDeep} from '@vben/utils';
|
||||
|
||||
import {useVbenForm} from '#/adapter/form';
|
||||
import {
|
||||
houseChargeAdd,
|
||||
houseChargeInfo,
|
||||
houseChargeUpdate
|
||||
} from '#/api/property/costManagement/houseCharge';
|
||||
@@ -123,11 +122,11 @@ async function handleClosed() {
|
||||
<DescriptionsItem label="计费起始">
|
||||
{{ record.startTime }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="房间">
|
||||
{{ room?.roomNumber }}
|
||||
<DescriptionsItem label="单位">
|
||||
{{ record.residentUnitText }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="面积(㎡)">
|
||||
{{ `${room?.area} （套内面积：${room?.insideInArea}）` }}
|
||||
<DescriptionsItem label="单位面积">
|
||||
{{ `${record.area} （㎡）` }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="单价">
|
||||
{{ costItem?.unitPrice }}
|
||||
|
||||
@@ -5,11 +5,11 @@ import { getDictOptions } from '#/utils/dict';
|
||||
import { renderDict } from '#/utils/render';
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'roomNumber',
|
||||
label: '房屋',
|
||||
},
|
||||
// {
|
||||
// component: 'Input',
|
||||
// fieldName: 'roomNumber',
|
||||
// label: '房屋',
|
||||
// },
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
|
||||
@@ -17,6 +17,7 @@ const getDaysInMonth = (date: any) => {
|
||||
const daysInMonth = new Date(year, month, 0).getDate();
|
||||
return Array.from({ length: daysInMonth }, (_, i) => i + 1);
|
||||
};
|
||||
const emit = defineEmits(['getPowerDate']);
|
||||
const getMeterRecordTrend = async (selectedDate: any) => {
|
||||
const res = await meterRecordTrend({
|
||||
day: dayjs().format('YYYY-MM-DD'),
|
||||
@@ -26,7 +27,7 @@ const getMeterRecordTrend = async (selectedDate: any) => {
|
||||
meterId: null,
|
||||
floorId: null,
|
||||
});
|
||||
|
||||
emit('getPowerDate',res);
|
||||
// 处理返回的数据
|
||||
const chartData = res.day.nowMonth.data || [];
|
||||
|
||||
@@ -45,11 +46,11 @@ const getMeterRecordTrend = async (selectedDate: any) => {
|
||||
});
|
||||
renderEcharts({
|
||||
grid: {
|
||||
bottom: 125,
|
||||
bottom: 20,
|
||||
containLabel: true,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
top: '2%',
|
||||
top: '5%',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@@ -133,6 +134,6 @@ defineExpose({
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<EchartsUI ref="chartRef" />
|
||||
<EchartsUI ref="chartRef" height="190px"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="left-first" id="time">--:--:--</div>
|
||||
<div class="left-second" id="date">----</div>
|
||||
</div>
|
||||
<div class="center">南川区综合服务中心数智管理平台物业大屏</div>
|
||||
<div class="center">南川区综合服务中心数智管理平台物业驾驶舱</div>
|
||||
<div class="right">
|
||||
<div>{{ weekDay }}</div>
|
||||
<div>晴</div>
|
||||
@@ -22,13 +22,13 @@
|
||||
<div class="header">
|
||||
<div class="header-item">
|
||||
<span class="header-label">今年用电量</span>
|
||||
<span class="header-value orange">180</span>
|
||||
<span class="header-unit">亿kwh</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">1.8</span>
|
||||
<span class="header-unit">亿kwh</span>
|
||||
<span class="header-value green">{{powerMonth}}</span>
|
||||
<span class="header-unit">KW·h</span>
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<span class="header-label">今年用水总量</span>
|
||||
@@ -42,7 +42,7 @@
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<span class="header-label">设备总数</span>
|
||||
<span class="header-value green">500</span>
|
||||
<span class="header-value green">{{total}}</span>
|
||||
<span class="header-unit">台</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -53,14 +53,15 @@
|
||||
<div
|
||||
ref="barChart"
|
||||
class="bar-chart"
|
||||
style="width: 100%; height:242px"
|
||||
style="width: 100%; height:242px;"
|
||||
@click="goWorkOrder"
|
||||
></div>
|
||||
</div>
|
||||
<div class="second">
|
||||
<div ref="powerChart" class="power-chart"></div>
|
||||
<div ref="powerChart" class="power-chart" @click="goVisitor"></div>
|
||||
</div>
|
||||
<div class="third">
|
||||
<div ref="envChart" class="env-chart"></div>
|
||||
<div ref="envChart" class="env-chart" @click="goCar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-center">
|
||||
@@ -70,6 +71,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-center-second">
|
||||
<div style="position: relative;left: 2%;padding-top: 10%">
|
||||
<div class="offline">离线</div>
|
||||
<div class="online">在线</div>
|
||||
</div>
|
||||
<div>
|
||||
<EchartsUI
|
||||
ref="water"
|
||||
@@ -98,34 +103,10 @@
|
||||
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">
|
||||
<div class="first">
|
||||
<!-- <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"
|
||||
@@ -146,21 +127,21 @@
|
||||
<AnalyticsTrends
|
||||
ref="analyticsTrendsRef"
|
||||
:selected-date="selectedDate"
|
||||
@getPowerDate="fetchPowerDate"
|
||||
@click="goPower"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="second">
|
||||
<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-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 class="third" @click="goReservationRecords">
|
||||
<div class="third-item">
|
||||
<div class="third-title">会议室总数</div>
|
||||
<div class="third-num">{{todayMeetCount?.meetCount}}</div>
|
||||
@@ -177,8 +158,9 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {getStatistics,getworkOrder,getTodayMeetCount,getHydropower,getAccessControl,getCamera,queryTwentyfourRunningDatasByPlNos} 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";
|
||||
|
||||
@@ -213,9 +195,11 @@ const handleTodayMeetCount = async () => {
|
||||
};
|
||||
// 水
|
||||
const water = ref();
|
||||
const waterTotal = ref();
|
||||
const { renderEcharts: renderWater } = useEcharts(water);
|
||||
async function fetchWater() {
|
||||
const data = await getHydropower()
|
||||
waterTotal.value = data.water.off + data.water.on;
|
||||
const waterData = [
|
||||
{ name: '离线', value: data.water.off },
|
||||
{ name: '在线', value: data.water.on }
|
||||
@@ -245,13 +229,17 @@ async function fetchWater() {
|
||||
borderWidth: 1
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: `${waterTotal.value}`,
|
||||
fontSize: 14,
|
||||
color: '#fff',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 10,
|
||||
fontSize: 14,
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
@@ -264,9 +252,11 @@ async function fetchWater() {
|
||||
}
|
||||
// 电
|
||||
const electricity = ref();
|
||||
const electricityTotal = ref();
|
||||
const { renderEcharts: renderElectricity } = useEcharts(electricity);
|
||||
async function fetchElectricity() {
|
||||
const data = await getHydropower()
|
||||
electricityTotal.value = data.power.off + data.power.on;
|
||||
const electricityData = [
|
||||
{ name: '离线', value: data.power.off },
|
||||
{ name: '在线', value: data.power.on }
|
||||
@@ -296,13 +286,17 @@ async function fetchElectricity() {
|
||||
borderWidth: 1
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: `${electricityTotal.value}`,
|
||||
fontSize: 14,
|
||||
color: '#fff',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 10,
|
||||
fontSize: 14,
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
@@ -315,9 +309,11 @@ async function fetchElectricity() {
|
||||
}
|
||||
// 门禁
|
||||
const accessControl = ref();
|
||||
const accessControlTotal = ref();
|
||||
const { renderEcharts: renderAccessControl } = useEcharts(accessControl);
|
||||
async function fetchAccessControl() {
|
||||
const data = await getAccessControl()
|
||||
accessControlTotal.value = data.off + data.on;
|
||||
const accessControlData = [
|
||||
{ name: '离线', value: data.off },
|
||||
{ name: '在线', value: data.on }
|
||||
@@ -347,13 +343,17 @@ async function fetchAccessControl() {
|
||||
borderWidth: 1
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: `${accessControlTotal.value}`,
|
||||
fontSize: 14,
|
||||
color: '#fff',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 10,
|
||||
fontSize: 14,
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
@@ -366,9 +366,11 @@ async function fetchAccessControl() {
|
||||
}
|
||||
// 摄像头
|
||||
const camera = ref();
|
||||
const cameraTotal = ref();
|
||||
const { renderEcharts: renderCamera } = useEcharts(camera);
|
||||
async function fetchCamera() {
|
||||
const data = await getCamera()
|
||||
cameraTotal.value = data.off + data.on;
|
||||
const cameraData = [
|
||||
{ name: '离线', value: data.off },
|
||||
{ name: '在线', value: data.on }
|
||||
@@ -398,13 +400,17 @@ async function fetchCamera() {
|
||||
borderWidth: 1
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: `${cameraTotal.value}`,
|
||||
fontSize: 14,
|
||||
color: '#fff',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 10,
|
||||
fontSize: 14,
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
@@ -415,54 +421,66 @@ async function fetchCamera() {
|
||||
]
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
const total = computed(() => {
|
||||
return Number(waterTotal.value) + Number(electricityTotal.value) + Number(cameraTotal.value) + Number(accessControlTotal.value);
|
||||
});
|
||||
//顶部 电
|
||||
const powerMonth = ref();
|
||||
const powerYear = ref();
|
||||
function fetchPowerDate(data) {
|
||||
powerMonth.value = data.day.nowMonth.total;
|
||||
powerYear.value = data.month.nowYear.total;
|
||||
}
|
||||
|
||||
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import * as echarts from 'echarts';
|
||||
import 'echarts-gl';
|
||||
import { renderPie3DChart } from '#/utils/pie3d';
|
||||
import {
|
||||
addChartToResizeManager,
|
||||
removeChartFromResizeManager,
|
||||
} from '#/utils/echartsResize';
|
||||
import { useFlexibleRem } from '#/utils/useFlexibleRem';
|
||||
import {DatePicker} from "ant-design-vue";
|
||||
import {getCamera} from "#/api/analytics";
|
||||
useFlexibleRem();
|
||||
// 路由
|
||||
const router = useRouter();
|
||||
|
||||
// 图表实例
|
||||
const barChart = ref<HTMLElement>();
|
||||
const powerChart = ref<HTMLElement>();
|
||||
const envChart = ref<HTMLElement>();
|
||||
const waterChart = ref<HTMLElement>();
|
||||
const deviceChart = ref<HTMLElement>();
|
||||
const pie3dChart = ref<HTMLElement>();
|
||||
|
||||
// 定时器
|
||||
let timer: number | null = null;
|
||||
|
||||
// 星期几
|
||||
const weekDay = ref('');
|
||||
|
||||
// 图表实例
|
||||
let barChartInstance: echarts.ECharts | null = null;
|
||||
let powerChartInstance: echarts.ECharts | null = null;
|
||||
let envChartInstance: echarts.ECharts | null = null;
|
||||
let waterChartInstance: echarts.ECharts | null = null;
|
||||
let deviceChartInstance: echarts.ECharts | null = null;
|
||||
let pie3dChartInstance: any = null;
|
||||
|
||||
// 退出方法
|
||||
const logout = () => {
|
||||
router.push('/navigation');
|
||||
router.push('/analytics');
|
||||
};
|
||||
const goWorkOrder = () => {
|
||||
router.push('/property/business/workOrders');
|
||||
};
|
||||
const goVisitor = () => {
|
||||
router.push('/property/visitorManagement/visitorInvitation');
|
||||
};
|
||||
const goPower = () => {
|
||||
router.push('/energy/electricEnergy/elctricitySituation');
|
||||
};
|
||||
const goCar = () => {
|
||||
router.push('/sis/passRecord/carPassRecordManagement');
|
||||
};
|
||||
const goReservationRecords = () => {
|
||||
router.push('/property/roomBooking/conferenceReservationRecords');
|
||||
};
|
||||
const goWarningProcessing = () => {
|
||||
router.push('/sis/videoWarning/videoWarningProcessing');
|
||||
};
|
||||
|
||||
// 更新时间
|
||||
const updateTime = () => {
|
||||
const now = new Date();
|
||||
@@ -485,8 +503,7 @@ const updateTime = () => {
|
||||
if (dateElement) dateElement.innerText = date;
|
||||
};
|
||||
|
||||
|
||||
// 初始化柱状图
|
||||
//工单
|
||||
const initBarChart = async () => {
|
||||
if (!barChart.value) return;
|
||||
const myChart = echarts.init(barChart.value);
|
||||
@@ -504,8 +521,8 @@ const initBarChart = async () => {
|
||||
myChart.setOption({
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: statuses, // 图例数据，与series中的name对应
|
||||
top: 10, // 位置控制
|
||||
data: statuses,
|
||||
top: 10,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
@@ -517,57 +534,65 @@ const initBarChart = async () => {
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化预约情况图表
|
||||
const initPowerChart = () => {
|
||||
// 访客
|
||||
const initPowerChart = async () => {
|
||||
if (!powerChart.value) return;
|
||||
const chart = echarts.init(powerChart.value);
|
||||
const res = await getVisitorCount()
|
||||
const visitorData = [];
|
||||
const invitationData = [];
|
||||
res.forEach(item => {
|
||||
const { type, todayCounts } = item;
|
||||
Object.entries(todayCounts).forEach(([date, count]) => {
|
||||
const dataItem = { date, value: count };
|
||||
if (type === "访客") {
|
||||
visitorData.push(dataItem);
|
||||
} 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 option = {
|
||||
tooltip: { trigger: 'axis' },
|
||||
grid: { left: 40, right: 50, top: 62, bottom: 20 },
|
||||
grid: { left: 40, right: 20, top: 50, bottom: 20 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array.from({ length: 19 }, (_, i) => i + 6),
|
||||
data: dates,
|
||||
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
||||
axisLabel: { color: '#fff' },
|
||||
name: '小时',
|
||||
nameTextStyle: { color: '#fff' },
|
||||
nameLocation: 'end',
|
||||
nameGap: 5,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '次',
|
||||
nameTextStyle: { color: '#fff' },
|
||||
nameLocation: 'end',
|
||||
nameGap: 10,
|
||||
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
||||
axisLabel: { color: '#fff' },
|
||||
splitLine: { lineStyle: { color: '#1e90ff22' } },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
80, 120, 100, 130, 150, 180, 200, 220, 250, 285, 230, 200, 180, 150,
|
||||
120, 100, 80, 60, 40,
|
||||
],
|
||||
name: '访客',
|
||||
data: visitor,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
itemStyle: { color: '#b388ff' },
|
||||
lineStyle: { width: 3 },
|
||||
areaStyle: { color: 'rgba(179,136,255,0.2)' },
|
||||
symbol: 'circle',
|
||||
symbolSize: 0,
|
||||
},
|
||||
{
|
||||
name: '邀约',
|
||||
data: invitation,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
itemStyle: { color: '#ffb300' },
|
||||
lineStyle: { width: 3 },
|
||||
areaStyle: { color: 'rgba(255,179,0,0.15)' },
|
||||
symbol: 'circle',
|
||||
symbolSize: 0,
|
||||
itemStyle: { color: '#3ec6ff' },
|
||||
lineStyle: { width: 1 },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1, // 上→下
|
||||
[
|
||||
{ offset: 0, color: '#32B7E9' },
|
||||
{ offset: 1, color: 'rgba(50,183,233,0)' },
|
||||
],
|
||||
),
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -582,7 +607,6 @@ const initEnvChart = async () => {
|
||||
const data = await queryTwentyfourRunningDatasByPlNos()
|
||||
const inCounts = data.data.inCounts
|
||||
const staticTimeStrs = data.data.staticTimeStrs
|
||||
console.log(data)
|
||||
const chart = echarts.init(envChart.value);
|
||||
const option = {
|
||||
tooltip: { trigger: 'axis' },
|
||||
@@ -629,174 +653,6 @@ const initEnvChart = async () => {
|
||||
addChartToResizeManager(chart);
|
||||
};
|
||||
|
||||
// 初始化水表图表
|
||||
const initWaterChart = () => {
|
||||
if (!waterChart.value) return;
|
||||
|
||||
const chart = echarts.init(waterChart.value);
|
||||
const option = {
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: {
|
||||
data: ['今日', '平均'],
|
||||
textStyle: { color: '#fff' },
|
||||
right: 20,
|
||||
top: 10,
|
||||
},
|
||||
grid: { left: 40, right: 20, top: 40, bottom: 30 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array.from({ length: 19 }, (_, i) => i + 6),
|
||||
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
||||
axisLabel: { color: '#fff' },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
||||
axisLabel: { color: '#fff' },
|
||||
splitLine: { lineStyle: { color: '#1e90ff22' } },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '今日',
|
||||
data: [
|
||||
1.2, 2.1, 1.8, 2.5, 3.0, 3.8, 4.2, 4.5, 4.8, 4.8, 4.0, 3.2, 2.5, 2.0,
|
||||
1.5, 1.0, 0.8, 0.5, 0.2,
|
||||
],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 0,
|
||||
itemStyle: { color: '#3ec6ff' },
|
||||
lineStyle: { width: 1 },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1, // 上→下
|
||||
[
|
||||
{ offset: 0, color: '#32B7E9' },
|
||||
{ offset: 1, color: 'rgba(50,183,233,0)' },
|
||||
],
|
||||
),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '平均',
|
||||
data: Array(19).fill(2.5),
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
itemStyle: { color: '#ff6b00' },
|
||||
lineStyle: { width: 1, type: 'solid', color: '#ff6b00' },
|
||||
},
|
||||
],
|
||||
};
|
||||
chart.setOption(option);
|
||||
waterChartInstance = chart;
|
||||
addChartToResizeManager(chart);
|
||||
};
|
||||
|
||||
// 初始化设备图表
|
||||
const initDeviceChart = () => {
|
||||
if (!deviceChart.value) return;
|
||||
|
||||
const chart = echarts.init(deviceChart.value);
|
||||
const option = {
|
||||
grid: { left: 60, right: 40, top: 10, bottom: 30 },
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLine: { lineStyle: { color: '#8697BA' } },
|
||||
axisLabel: { color: '#fff' },
|
||||
splitLine: { show: false },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['门禁', '监控', '水表'],
|
||||
axisLine: { lineStyle: { color: '#8697BA' } },
|
||||
axisLabel: { color: '#A1B2C2' },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '设备数',
|
||||
type: 'bar',
|
||||
data: [650, 120, 40],
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
const colors = [
|
||||
new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1, // 上→下
|
||||
[
|
||||
{ offset: 0, color: '#2986B1' },
|
||||
{ offset: 1, color: '#6941FF' },
|
||||
],
|
||||
),
|
||||
new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1, // 上→下
|
||||
[
|
||||
{ offset: 0, color: '#33FF99' },
|
||||
{ offset: 1, color: '#00908E' },
|
||||
],
|
||||
),
|
||||
new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1, // 上→下
|
||||
[
|
||||
{ offset: 0, color: '#01B4FF' },
|
||||
{ offset: 1, color: '#0336FF' },
|
||||
],
|
||||
),
|
||||
];
|
||||
return colors[params.dataIndex];
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
chart.setOption(option);
|
||||
deviceChartInstance = chart;
|
||||
addChartToResizeManager(chart);
|
||||
};
|
||||
|
||||
// 初始化3D饼图
|
||||
const initPie3DChart = () => {
|
||||
if (!pie3dChart.value) return;
|
||||
|
||||
pie3dChartInstance = renderPie3DChart(pie3dChart.value, {
|
||||
data: [
|
||||
{ name: 'A区域', value: 20, itemStyle: { color: '#3ffbff' } },
|
||||
{ name: 'D区域', value: 20, itemStyle: { color: '#b388ff' } },
|
||||
{ name: 'C区域', value: 45, itemStyle: { color: '#ff9900' } },
|
||||
{ name: 'B区域', value: 15, itemStyle: { color: '#3f6bff' } },
|
||||
],
|
||||
hoverHeightScale: 2,
|
||||
selectOffset: 0.1,
|
||||
distance: 220,
|
||||
boxHeight: 5,
|
||||
});
|
||||
if (pie3dChartInstance) {
|
||||
addChartToResizeManager(pie3dChartInstance);
|
||||
}
|
||||
};
|
||||
|
||||
// const changeToPersonnelDuty=()=>{
|
||||
// router.push('/property/attendanceManagement/workforceManagement')
|
||||
// }
|
||||
|
||||
// 组件挂载时初始化
|
||||
onMounted(() => {
|
||||
getWarning()
|
||||
@@ -811,9 +667,6 @@ onMounted(() => {
|
||||
initBarChart();
|
||||
initPowerChart();
|
||||
initEnvChart();
|
||||
initWaterChart();
|
||||
initDeviceChart();
|
||||
initPie3DChart();
|
||||
});
|
||||
|
||||
// 组件卸载时清理
|
||||
@@ -821,12 +674,7 @@ onBeforeUnmount(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
|
||||
// 从管理器中移除图表
|
||||
if (barChartInstance) {
|
||||
removeChartFromResizeManager(barChartInstance);
|
||||
barChartInstance.dispose();
|
||||
}
|
||||
if (powerChartInstance) {
|
||||
removeChartFromResizeManager(powerChartInstance);
|
||||
powerChartInstance.dispose();
|
||||
@@ -835,18 +683,6 @@ onBeforeUnmount(() => {
|
||||
removeChartFromResizeManager(envChartInstance);
|
||||
envChartInstance.dispose();
|
||||
}
|
||||
if (waterChartInstance) {
|
||||
removeChartFromResizeManager(waterChartInstance);
|
||||
waterChartInstance.dispose();
|
||||
}
|
||||
if (deviceChartInstance) {
|
||||
removeChartFromResizeManager(deviceChartInstance);
|
||||
deviceChartInstance.dispose();
|
||||
}
|
||||
if (pie3dChartInstance) {
|
||||
removeChartFromResizeManager(pie3dChartInstance);
|
||||
pie3dChartInstance.dispose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -868,7 +704,7 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
.mian {
|
||||
height: 100vh;
|
||||
background: url('../../../assets/property/bg1.png');
|
||||
background: url('../../../assets/property/bg.png');
|
||||
background-size: 100% 100%;
|
||||
background-color: #081b3a;
|
||||
display: flex;
|
||||
@@ -945,14 +781,12 @@ onBeforeUnmount(() => {
|
||||
margin-right: 0.5rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.header-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
margin: 0 0.2rem;
|
||||
font-family: ShiShangZhongHeiJianTi;
|
||||
}
|
||||
|
||||
.header-value.orange {
|
||||
color: #ffb300;
|
||||
}
|
||||
@@ -965,7 +799,6 @@ onBeforeUnmount(() => {
|
||||
.header-value.purple {
|
||||
color: #b388ff;
|
||||
}
|
||||
|
||||
.header-unit {
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
@@ -989,43 +822,14 @@ onBeforeUnmount(() => {
|
||||
justify-content: space-between;
|
||||
.first {
|
||||
height: 16.81rem;
|
||||
.pie3d-title {
|
||||
color: #fff;
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.pie3d-water {
|
||||
color: #fff;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.pie3d-water-num {
|
||||
font-size: 1.3rem;
|
||||
color: #3ec6ff;
|
||||
background: #0a1e3a;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0 0.2rem;
|
||||
margin: 0 0.2rem;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.pie3d-chart {
|
||||
width: 100%;
|
||||
height: 176px;
|
||||
min-height: unset;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.bar-chart {
|
||||
margin-top: 35px;
|
||||
}
|
||||
}
|
||||
.second {
|
||||
height: 12rem;
|
||||
/* margin-top:2.25rem; */
|
||||
/* margin-bottom: 2rem; */
|
||||
.power-chart {
|
||||
height: 100%;
|
||||
/* margin-top: 0.2rem; */
|
||||
}
|
||||
}
|
||||
.third {
|
||||
@@ -1055,6 +859,26 @@ onBeforeUnmount(() => {
|
||||
height: 12.5rem;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.offline,.online {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.offline::before,.online::before {
|
||||
content: "";
|
||||
width: 30px;
|
||||
height: 15px;
|
||||
border-radius: 3px;
|
||||
border: 1.5px solid #fff;
|
||||
}
|
||||
.offline::before{
|
||||
background-color: #5470C6;
|
||||
}
|
||||
.online::before {
|
||||
background-color: #9CDB7D;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-right {
|
||||
@@ -1064,11 +888,6 @@ onBeforeUnmount(() => {
|
||||
justify-content: space-between;
|
||||
.first {
|
||||
height: 16.81rem;
|
||||
//background-color: red;
|
||||
.water-chart {
|
||||
height: 100%;
|
||||
/* margin-top: 0.2rem; */
|
||||
}
|
||||
}
|
||||
.second {
|
||||
height: 11rem;
|
||||
@@ -1136,45 +955,14 @@ onBeforeUnmount(() => {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pie3d-title {
|
||||
color: #fff;
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.pie3d-water {
|
||||
color: #fff;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.pie3d-water-num {
|
||||
font-size: 1.3rem;
|
||||
color: #3ec6ff;
|
||||
background: #0a1e3a;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0 0.2rem;
|
||||
margin: 0 0.2rem;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.pie3d-chart {
|
||||
width: 100%;
|
||||
height: 176px;
|
||||
min-height: unset;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user