fix: 修改大屏不能显示bug、修改大屏字体、替换系统logo
Some checks are pending
Gitea Actions Demo / Explore-Gitea-Actions (push) Waiting to run
Some checks are pending
Gitea Actions Demo / Explore-Gitea-Actions (push) Waiting to run
This commit is contained in:
BIN
apps/web-antd/src/assets/logoDark.png
Normal file
BIN
apps/web-antd/src/assets/logoDark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
BIN
apps/web-antd/src/assets/logoLight.png
Normal file
BIN
apps/web-antd/src/assets/logoLight.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
@@ -1,5 +1,10 @@
|
||||
import { defineOverridesPreferences } from '@vben/preferences';
|
||||
import logo from '../src/assets/logo.png'
|
||||
import logoDark from '../src/assets/logoDark.png'
|
||||
import logoLight from '../src/assets/logoLight.png'
|
||||
import { preferences, usePreferences } from '@vben/preferences';
|
||||
const { isDark } = usePreferences();
|
||||
|
||||
/**
|
||||
* @description 项目配置文件
|
||||
* 只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置
|
||||
@@ -64,6 +69,6 @@ export const overridesPreferences = defineOverridesPreferences({
|
||||
*/
|
||||
logo: {
|
||||
enable: true,
|
||||
source: logo,
|
||||
source: isDark ? logoDark : logoLight,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -2,9 +2,9 @@ import type { FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
import { getDictOptions } from '#/utils/dict';
|
||||
import { renderDict } from '#/utils/render';
|
||||
import {h} from "vue";
|
||||
import {Rate} from "ant-design-vue";
|
||||
import {rentalOrderList} from "#/api/property/rentalOrder";
|
||||
import { h } from 'vue';
|
||||
import { Rate } from 'ant-design-vue';
|
||||
import { rentalOrderList } from '#/api/property/rentalOrder';
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
@@ -32,12 +32,12 @@ export const columns: VxeGridProps['columns'] = [
|
||||
return (rowIndex + 1).toString();
|
||||
},
|
||||
},
|
||||
minWidth: '120'
|
||||
minWidth: '120',
|
||||
},
|
||||
{
|
||||
title: '养护名称',
|
||||
field: 'maintainName',
|
||||
minWidth: '120'
|
||||
minWidth: '120',
|
||||
},
|
||||
// {
|
||||
// title: '服务地点',
|
||||
@@ -52,7 +52,7 @@ export const columns: VxeGridProps['columns'] = [
|
||||
return renderDict(row.serveType, 'pro_service_type');
|
||||
},
|
||||
},
|
||||
minWidth: '120'
|
||||
minWidth: '120',
|
||||
},
|
||||
{
|
||||
title: '养护周期类型',
|
||||
@@ -62,27 +62,27 @@ export const columns: VxeGridProps['columns'] = [
|
||||
return renderDict(row.periodType, 'wy_time_unit');
|
||||
},
|
||||
},
|
||||
minWidth: '120'
|
||||
minWidth: '120',
|
||||
},
|
||||
{
|
||||
title: '养护周期频次',
|
||||
field: 'periodFrequency',
|
||||
minWidth: '120'
|
||||
minWidth: '120',
|
||||
},
|
||||
{
|
||||
title: '关联订单',
|
||||
field: 'orderId',
|
||||
minWidth: '120'
|
||||
minWidth: '120',
|
||||
},
|
||||
{
|
||||
title: '计划执行时间',
|
||||
field: 'startTime',
|
||||
minWidth: '120'
|
||||
minWidth: '120',
|
||||
},
|
||||
{
|
||||
title: '计划完成时间',
|
||||
field: 'endTime',
|
||||
minWidth: '120'
|
||||
minWidth: '120',
|
||||
},
|
||||
{
|
||||
title: '巡检结果',
|
||||
@@ -92,12 +92,12 @@ export const columns: VxeGridProps['columns'] = [
|
||||
return renderDict(row.inspectResult, 'pro_inspection_results');
|
||||
},
|
||||
},
|
||||
minWidth: '120'
|
||||
minWidth: '120',
|
||||
},
|
||||
{
|
||||
title: '处理措施',
|
||||
field: 'measure',
|
||||
minWidth: '120'
|
||||
minWidth: '120',
|
||||
},
|
||||
{
|
||||
title: '客户评分',
|
||||
@@ -110,12 +110,12 @@ export const columns: VxeGridProps['columns'] = [
|
||||
});
|
||||
},
|
||||
},
|
||||
minWidth: '150'
|
||||
minWidth: '150',
|
||||
},
|
||||
{
|
||||
title: '客户反馈',
|
||||
field: 'customerAdvice',
|
||||
minWidth: '120'
|
||||
minWidth: '120',
|
||||
},
|
||||
{
|
||||
title: '处理状态',
|
||||
@@ -125,7 +125,7 @@ export const columns: VxeGridProps['columns'] = [
|
||||
return renderDict(row.state, 'pro_processing_status');
|
||||
},
|
||||
},
|
||||
minWidth: '120'
|
||||
minWidth: '120',
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
@@ -151,7 +151,7 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
fieldName: 'maintainName',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
labelWidth:100
|
||||
labelWidth: 100,
|
||||
},
|
||||
{
|
||||
label: '服务地点',
|
||||
@@ -159,7 +159,7 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
component: 'TreeSelect',
|
||||
defaultValue: undefined,
|
||||
rules: 'required',
|
||||
labelWidth:100
|
||||
labelWidth: 100,
|
||||
},
|
||||
{
|
||||
label: '服务类型',
|
||||
@@ -169,7 +169,7 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
options: getDictOptions('pro_service_type'),
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
labelWidth:100
|
||||
labelWidth: 100,
|
||||
},
|
||||
{
|
||||
label: '养护周期类型',
|
||||
@@ -180,14 +180,14 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
options: getDictOptions('wy_time_unit'),
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
labelWidth:100
|
||||
labelWidth: 100,
|
||||
},
|
||||
{
|
||||
label: '养护周期频次',
|
||||
fieldName: 'periodFrequency',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
labelWidth:100
|
||||
labelWidth: 100,
|
||||
},
|
||||
{
|
||||
label: '关联订单',
|
||||
@@ -200,7 +200,7 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
valueField: 'id',
|
||||
},
|
||||
rules: 'required',
|
||||
labelWidth:100
|
||||
labelWidth: 100,
|
||||
},
|
||||
{
|
||||
label: '计划执行时间',
|
||||
@@ -212,7 +212,7 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
},
|
||||
rules: 'required',
|
||||
labelWidth:100
|
||||
labelWidth: 100,
|
||||
},
|
||||
{
|
||||
label: '计划完成时间',
|
||||
@@ -224,7 +224,7 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
},
|
||||
rules: 'required',
|
||||
labelWidth:100
|
||||
labelWidth: 100,
|
||||
},
|
||||
{
|
||||
label: '巡检结果',
|
||||
@@ -234,14 +234,14 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
options: getDictOptions('pro_inspection_results'),
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
labelWidth:100
|
||||
labelWidth: 100,
|
||||
},
|
||||
{
|
||||
label: '处理措施',
|
||||
fieldName: 'measure',
|
||||
component: 'Textarea',
|
||||
rules: 'required',
|
||||
labelWidth:100
|
||||
labelWidth: 100,
|
||||
},
|
||||
{
|
||||
label: '客户评分',
|
||||
@@ -251,16 +251,16 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
allowHalf: false,
|
||||
count: 5,
|
||||
tooltips: ['1星', '2星', '3星', '4星', '5星'],
|
||||
defaultValue: 0
|
||||
defaultValue: 0,
|
||||
},
|
||||
rules: 'required',
|
||||
labelWidth:100
|
||||
labelWidth: 100,
|
||||
},
|
||||
{
|
||||
label: '客户反馈',
|
||||
fieldName: 'customerAdvice',
|
||||
component: 'Textarea',
|
||||
labelWidth:100
|
||||
labelWidth: 100,
|
||||
},
|
||||
{
|
||||
label: '处理状态',
|
||||
@@ -270,6 +270,6 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
options: getDictOptions('pro_processing_status'),
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
labelWidth:100
|
||||
labelWidth: 100,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -42,7 +42,11 @@ const selectedRoom = ref<string>('');
|
||||
const selectedDate = ref<string>('');
|
||||
|
||||
// 一周的日期
|
||||
const weekDates = ref<string[]>([]);
|
||||
interface WeekDate {
|
||||
date: string;
|
||||
weekDay: string;
|
||||
}
|
||||
const weekDates = ref<WeekDate[]>([]);
|
||||
|
||||
// 预约数据
|
||||
const bookings = ref<any[]>([]);
|
||||
@@ -54,16 +58,23 @@ const loading = ref(false);
|
||||
// 时间段只显示"上午" "下午"
|
||||
const timeSlots = ['上午', '下午'];
|
||||
|
||||
function getWeekDay(dateStr: string): string {
|
||||
const weekMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
||||
const day = dayjs(dateStr).day();
|
||||
return weekMap[dayjs(dateStr).day()]!;
|
||||
}
|
||||
// 生成一周日期
|
||||
function generateWeekDates(): void {
|
||||
const today = dayjs();
|
||||
// 获取本周的周一
|
||||
const startOfWeek = today.startOf('week');
|
||||
const dates = Array.from({ length: 7 }, (_, i) => {
|
||||
return startOfWeek.add(i, 'day').format('YYYY-MM-DD');
|
||||
const dates: WeekDate[] = Array.from({ length: 7 }, (_, i) => {
|
||||
const date = startOfWeek.add(i, 'day').format('YYYY-MM-DD');
|
||||
return {
|
||||
date,
|
||||
weekDay: getWeekDay(date)
|
||||
};
|
||||
});
|
||||
weekDates.value = dates;
|
||||
// 默认选中今天
|
||||
selectedDate.value = today.format('YYYY-MM-DD');
|
||||
}
|
||||
|
||||
@@ -107,7 +118,7 @@ async function fetchBookings(): Promise<void> {
|
||||
const booking = bookings.value.find(
|
||||
(b) => b.name === room.name && b.slots === slot,
|
||||
);
|
||||
table[slot][room.name] = booking || null;
|
||||
table[slot]![room.name] = booking || null;
|
||||
});
|
||||
});
|
||||
bookingTable.value = table;
|
||||
@@ -135,14 +146,14 @@ async function fetchBookings(): Promise<void> {
|
||||
tbConferenceId: item.meetId,
|
||||
}));
|
||||
const table: Record<string, Record<string, any>> = { 上午: {}, 下午: {} };
|
||||
weekDates.value.forEach((date) => {
|
||||
weekDates.value.forEach((item) => {
|
||||
['上午', '下午'].forEach((slot) => {
|
||||
const booking = bookings.value.find(
|
||||
(b) =>
|
||||
dayjs(b.scheduledStarttime).format('YYYY-MM-DD') === date &&
|
||||
dayjs(b.scheduledStarttime).format('YYYY-MM-DD') === item.date &&
|
||||
b.slots === slot,
|
||||
);
|
||||
table[slot][date] = booking || null;
|
||||
table[slot]![item.date] = booking || null;
|
||||
});
|
||||
});
|
||||
bookingTable.value = table;
|
||||
@@ -271,10 +282,10 @@ const columns = computed<TableColumnType<TableRecord>[]>(() => {
|
||||
key: room.name,
|
||||
width: 200,
|
||||
}))
|
||||
: weekDates.value.map((date) => ({
|
||||
title: dayjs(date).format('YYYY-MM-DD'),
|
||||
dataIndex: date,
|
||||
key: date,
|
||||
: weekDates.value.map((item) => ({
|
||||
title: item.date,
|
||||
dataIndex: item.date,
|
||||
key: item.date,
|
||||
width: 200,
|
||||
}));
|
||||
return [...baseColumns, ...dynamicColumns];
|
||||
@@ -284,10 +295,12 @@ const tableData = computed<TableRecord[]>(() => {
|
||||
const slots = ['上午', '下午'];
|
||||
return slots.map((slot) => {
|
||||
const row: any = { slot };
|
||||
const cols =
|
||||
viewMode.value === 'date'
|
||||
? getFullRoomList().map((room) => room.name)
|
||||
: weekDates.value;
|
||||
let cols: string[] = [];
|
||||
if (viewMode.value === 'date') {
|
||||
cols = getFullRoomList().map((room) => room.name);
|
||||
} else {
|
||||
cols = weekDates.value.map(item => item.date);
|
||||
}
|
||||
cols.forEach((col) => {
|
||||
row[col] = bookingTable.value[slot]?.[col] || null;
|
||||
});
|
||||
@@ -328,12 +341,12 @@ onMounted(() => {
|
||||
</div>
|
||||
<div v-if="viewMode === 'date'" class="date-buttons">
|
||||
<Button
|
||||
v-for="date in weekDates"
|
||||
:key="date"
|
||||
:type="date === selectedDate ? 'primary' : 'default'"
|
||||
@click="handleDateChange(date)"
|
||||
v-for="item in weekDates"
|
||||
:key="item.date"
|
||||
:type="item.date === selectedDate ? 'primary' : 'default'"
|
||||
@click="handleDateChange(item.date)"
|
||||
>
|
||||
{{ dayjs(date).format('YYYY-MM-DD') }}
|
||||
{{ item.date }} ({{ item.weekDay }})
|
||||
</Button>
|
||||
</div>
|
||||
<Table
|
||||
@@ -347,7 +360,7 @@ onMounted(() => {
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex !== 'slot'">
|
||||
<div v-if="record[column.dataIndex]" :style="getRandomBgColor()">
|
||||
<div v-if="typeof column.dataIndex === 'string' && record[column.dataIndex]" :style="getRandomBgColor()">
|
||||
<div>预约人：{{ record[column.dataIndex].personName }}</div>
|
||||
<div>单位：{{ record[column.dataIndex].unitName }}</div>
|
||||
</div>
|
||||
|
||||
@@ -914,6 +914,12 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@font-face {
|
||||
font-family: 'ShiShangZhongHeiJianTi';
|
||||
src: url('../../../assets/fonts/时尚中黑简体.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
.mian{
|
||||
height: 100vh;
|
||||
background: url("../../../assets/digitalIntelligence/bg.png");
|
||||
|
||||
@@ -11,10 +11,11 @@
|
||||
<div>晴</div>
|
||||
<div>40℃</div>
|
||||
<div class="logout" @click="logout">
|
||||
<img src="../../../assets/return.png" style="width: 1.5rem; height: 1.5rem;">
|
||||
<div>
|
||||
退出
|
||||
</div>
|
||||
<img
|
||||
src="../../../assets/return.png"
|
||||
style="width: 1.5rem; height: 1.5rem"
|
||||
/>
|
||||
<div>退出</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -58,7 +59,11 @@
|
||||
</div>
|
||||
<div class="first-total-unit">kwh</div>
|
||||
</div>
|
||||
<div ref="barChart" class="bar-chart" style="width:100%;height:80%;"></div>
|
||||
<div
|
||||
ref="barChart"
|
||||
class="bar-chart"
|
||||
style="width: 100%; height: 100%"
|
||||
></div>
|
||||
</div>
|
||||
<div class="second">
|
||||
<div ref="powerChart" class="power-chart"></div>
|
||||
@@ -128,7 +133,11 @@
|
||||
<div class="device-cards">
|
||||
<div class="device-card1">
|
||||
<div>
|
||||
<img src="../../../assets/energyConsumptionAnalysis/devices-number-icon.png" style="width: 1.75rem;height: 1.75rem;" alt="">
|
||||
<img
|
||||
src="../../../assets/energyConsumptionAnalysis/devices-number-icon.png"
|
||||
style="width: 1.75rem; height: 1.75rem"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="device-card-text-box">
|
||||
<div class="device-card-text">设备总数</div>
|
||||
@@ -137,7 +146,11 @@
|
||||
</div>
|
||||
<div class="device-card2">
|
||||
<div>
|
||||
<img src="../../../assets/energyConsumptionAnalysis/devices-online-icon.png" style="width: 1.75rem;height: 1.75rem;" alt="">
|
||||
<img
|
||||
src="../../../assets/energyConsumptionAnalysis/devices-online-icon.png"
|
||||
style="width: 1.75rem; height: 1.75rem"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="device-card-text">设备在线数</div>
|
||||
@@ -146,7 +159,11 @@
|
||||
</div>
|
||||
<div class="device-card3">
|
||||
<div>
|
||||
<img src="../../../assets/energyConsumptionAnalysis/devices-offline-icon.png" style="width: 1.75rem;height: 1.75rem;" alt="">
|
||||
<img
|
||||
src="../../../assets/energyConsumptionAnalysis/devices-offline-icon.png"
|
||||
style="width: 1.75rem; height: 1.75rem"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="device-card-text">设备离线数</div>
|
||||
@@ -163,140 +180,162 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
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'
|
||||
useFlexibleRem()
|
||||
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';
|
||||
useFlexibleRem();
|
||||
// 路由
|
||||
const router = useRouter()
|
||||
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>()
|
||||
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
|
||||
let timer: number | null = null;
|
||||
|
||||
// 星期几
|
||||
const weekDay = ref('')
|
||||
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
|
||||
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('/navigation');
|
||||
};
|
||||
|
||||
// 更新时间
|
||||
const updateTime = () => {
|
||||
const now = new Date()
|
||||
const time = now.toLocaleTimeString('zh-CN', { hour12: false })
|
||||
const date = now.getFullYear() + '.' +
|
||||
String(now.getMonth() + 1).padStart(2, '0') + '.' +
|
||||
String(now.getDate()).padStart(2, '0')
|
||||
const now = new Date();
|
||||
const time = now.toLocaleTimeString('zh-CN', { hour12: false });
|
||||
const date =
|
||||
now.getFullYear() +
|
||||
'.' +
|
||||
String(now.getMonth() + 1).padStart(2, '0') +
|
||||
'.' +
|
||||
String(now.getDate()).padStart(2, '0');
|
||||
|
||||
// 获取星期几
|
||||
const weekDays = ['日', '一', '二', '三', '四', '五', '六']
|
||||
weekDay.value = '星期' + weekDays[now.getDay()]
|
||||
const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
|
||||
weekDay.value = '星期' + weekDays[now.getDay()];
|
||||
|
||||
const timeElement = document.getElementById('time')
|
||||
const dateElement = document.getElementById('date')
|
||||
const timeElement = document.getElementById('time');
|
||||
const dateElement = document.getElementById('date');
|
||||
|
||||
if (timeElement) timeElement.innerText = time
|
||||
if (dateElement) dateElement.innerText = date
|
||||
}
|
||||
if (timeElement) timeElement.innerText = time;
|
||||
if (dateElement) dateElement.innerText = date;
|
||||
};
|
||||
|
||||
// 初始化柱状图
|
||||
const initBarChart = () => {
|
||||
if (!barChart.value) return
|
||||
if (!barChart.value) return;
|
||||
|
||||
const chart = echarts.init(barChart.value)
|
||||
const option = getThreeDBarOption({
|
||||
xData: ['A区', 'B区', 'C区', 'D区'],
|
||||
yData: [320, 452, 688, 400]
|
||||
})
|
||||
chart.setOption(option)
|
||||
barChartInstance = chart
|
||||
addChartToResizeManager(chart)
|
||||
}
|
||||
const myChart = echarts.init(barChart.value);
|
||||
myChart.setOption({
|
||||
tooltip: {},
|
||||
grid: { left: 40, right: 20, top: 40, bottom: 45 },
|
||||
xAxis: { data: ['A', 'B', 'C', 'D'] },
|
||||
yAxis: {},
|
||||
series: [
|
||||
{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
data: [5, 20, 36, 10, 10, 20],
|
||||
},
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化电力图表
|
||||
const initPowerChart = () => {
|
||||
if (!powerChart.value) return
|
||||
if (!powerChart.value) return;
|
||||
|
||||
const chart = echarts.init(powerChart.value)
|
||||
const chart = echarts.init(powerChart.value);
|
||||
const option = {
|
||||
tooltip: { trigger: 'axis' },
|
||||
grid: { left: 40, right: 20, top: 40, bottom: 30 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array.from({length: 19}, (_, i) => i + 6),
|
||||
data: Array.from({ length: 19 }, (_, i) => i + 6),
|
||||
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
||||
axisLabel: { color: '#fff' }
|
||||
axisLabel: { color: '#fff' },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '',
|
||||
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
||||
axisLabel: { color: '#fff' },
|
||||
splitLine: { lineStyle: { color: '#1e90ff22' } }
|
||||
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],
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
80, 120, 100, 130, 150, 180, 200, 220, 250, 285, 230, 200, 180, 150,
|
||||
120, 100, 80, 60, 40,
|
||||
],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 0,
|
||||
itemStyle: { color: '#3ec6ff' },
|
||||
lineStyle: { width: 1 },
|
||||
areaStyle: { color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1, // 上→下
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1, // 上→下
|
||||
[
|
||||
{ offset: 0, color: '#32B7E9' },
|
||||
{ offset: 1, color: 'rgba(50,183,233,0)' }
|
||||
]
|
||||
), }
|
||||
}]
|
||||
}
|
||||
chart.setOption(option)
|
||||
powerChartInstance = chart
|
||||
addChartToResizeManager(chart)
|
||||
}
|
||||
{ offset: 1, color: 'rgba(50,183,233,0)' },
|
||||
],
|
||||
),
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
chart.setOption(option);
|
||||
powerChartInstance = chart;
|
||||
addChartToResizeManager(chart);
|
||||
};
|
||||
|
||||
// 初始化环境图表
|
||||
const initEnvChart = () => {
|
||||
if (!envChart.value) return
|
||||
if (!envChart.value) return;
|
||||
|
||||
const chart = echarts.init(envChart.value)
|
||||
const chart = echarts.init(envChart.value);
|
||||
const option = {
|
||||
tooltip: { trigger: 'axis' },
|
||||
grid: { left: 40, right: 20, top: 10, bottom: 20 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array.from({length: 8}, (_, i) => (i+1)*3),
|
||||
data: Array.from({ length: 8 }, (_, i) => (i + 1) * 3),
|
||||
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
||||
axisLabel: { color: '#fff' }
|
||||
axisLabel: { color: '#fff' },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
||||
axisLabel: { color: '#fff' },
|
||||
splitLine: { lineStyle: { color: '#1e90ff22' } }
|
||||
splitLine: { lineStyle: { color: '#1e90ff22' } },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@@ -320,19 +359,19 @@ const initEnvChart = () => {
|
||||
areaStyle: { color: 'rgba(255,179,0,0.15)' },
|
||||
symbol: 'circle',
|
||||
symbolSize: 0,
|
||||
}
|
||||
]
|
||||
}
|
||||
chart.setOption(option)
|
||||
envChartInstance = chart
|
||||
addChartToResizeManager(chart)
|
||||
}
|
||||
},
|
||||
],
|
||||
};
|
||||
chart.setOption(option);
|
||||
envChartInstance = chart;
|
||||
addChartToResizeManager(chart);
|
||||
};
|
||||
|
||||
// 初始化水表图表
|
||||
const initWaterChart = () => {
|
||||
if (!waterChart.value) return
|
||||
if (!waterChart.value) return;
|
||||
|
||||
const chart = echarts.init(waterChart.value)
|
||||
const chart = echarts.init(waterChart.value);
|
||||
const option = {
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: {
|
||||
@@ -340,38 +379,46 @@ const initWaterChart = () => {
|
||||
textStyle: { color: '#fff' },
|
||||
right: 20,
|
||||
top: 10,
|
||||
bottom: 10
|
||||
bottom: 10,
|
||||
},
|
||||
grid: { left: 40, right: 20, top: 40, bottom: 30 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array.from({length: 19}, (_, i) => i + 6),
|
||||
data: Array.from({ length: 19 }, (_, i) => i + 6),
|
||||
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
||||
axisLabel: { color: '#fff' }
|
||||
axisLabel: { color: '#fff' },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
||||
axisLabel: { color: '#fff' },
|
||||
splitLine: { lineStyle: { color: '#1e90ff22' } }
|
||||
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],
|
||||
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, // 上→下
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1, // 上→下
|
||||
[
|
||||
{ offset: 0, color: '#32B7E9' },
|
||||
{ offset: 1, color: 'rgba(50,183,233,0)' }
|
||||
]
|
||||
), }
|
||||
{ offset: 1, color: 'rgba(50,183,233,0)' },
|
||||
],
|
||||
),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '平均',
|
||||
@@ -380,33 +427,33 @@ const initWaterChart = () => {
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
itemStyle: { color: '#ff6b00' },
|
||||
lineStyle: { width: 1, type: 'solid', color: '#ff6b00' }
|
||||
}
|
||||
]
|
||||
}
|
||||
chart.setOption(option)
|
||||
waterChartInstance = chart
|
||||
addChartToResizeManager(chart)
|
||||
}
|
||||
lineStyle: { width: 1, type: 'solid', color: '#ff6b00' },
|
||||
},
|
||||
],
|
||||
};
|
||||
chart.setOption(option);
|
||||
waterChartInstance = chart;
|
||||
addChartToResizeManager(chart);
|
||||
};
|
||||
|
||||
// 初始化设备图表
|
||||
const initDeviceChart = () => {
|
||||
if (!deviceChart.value) return
|
||||
if (!deviceChart.value) return;
|
||||
|
||||
const chart = echarts.init(deviceChart.value)
|
||||
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 }
|
||||
splitLine: { show: false },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['门禁', '监控', '水表'],
|
||||
axisLine: { lineStyle: { color: '#8697BA' } },
|
||||
axisLabel: { color: '#A1B2C2' }
|
||||
axisLabel: { color: '#A1B2C2' },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@@ -415,49 +462,58 @@ const initDeviceChart = () => {
|
||||
data: [650, 120, 40],
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
color: function(params: any) {
|
||||
color: function (params: any) {
|
||||
const colors = [
|
||||
new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1, // 上→下
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1, // 上→下
|
||||
[
|
||||
{ offset: 0, color: '#2986B1' },
|
||||
{ offset: 1, color: '#6941FF' }
|
||||
]
|
||||
{ offset: 1, color: '#6941FF' },
|
||||
],
|
||||
),
|
||||
new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1, // 上→下
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1, // 上→下
|
||||
[
|
||||
{ offset: 0, color: '#33FF99' },
|
||||
{ offset: 1, color: '#00908E' }
|
||||
]
|
||||
{ offset: 1, color: '#00908E' },
|
||||
],
|
||||
),
|
||||
new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1, // 上→下
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1, // 上→下
|
||||
[
|
||||
{ offset: 0, color: '#01B4FF' },
|
||||
{ offset: 1, color: '#0336FF' }
|
||||
]
|
||||
{ offset: 1, color: '#0336FF' },
|
||||
],
|
||||
),
|
||||
];
|
||||
return colors[params.dataIndex]
|
||||
}
|
||||
return colors[params.dataIndex];
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
chart.setOption(option)
|
||||
deviceChartInstance = chart
|
||||
addChartToResizeManager(chart)
|
||||
}
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
chart.setOption(option);
|
||||
deviceChartInstance = chart;
|
||||
addChartToResizeManager(chart);
|
||||
};
|
||||
|
||||
// 初始化3D饼图
|
||||
const initPie3DChart = () => {
|
||||
if (!pie3dChart.value) return
|
||||
if (!pie3dChart.value) return;
|
||||
|
||||
pie3dChartInstance = renderPie3DChart(pie3dChart.value, {
|
||||
data: [
|
||||
@@ -469,63 +525,69 @@ const initPie3DChart = () => {
|
||||
hoverHeightScale: 2,
|
||||
selectOffset: 0.1,
|
||||
distance: 220,
|
||||
boxHeight: 5
|
||||
})
|
||||
boxHeight: 5,
|
||||
});
|
||||
if (pie3dChartInstance) {
|
||||
addChartToResizeManager(pie3dChartInstance)
|
||||
addChartToResizeManager(pie3dChartInstance);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 组件挂载时初始化
|
||||
onMounted(() => {
|
||||
updateTime()
|
||||
timer = setInterval(updateTime, 1000)
|
||||
initBarChart()
|
||||
initPowerChart()
|
||||
initEnvChart()
|
||||
initWaterChart()
|
||||
initDeviceChart()
|
||||
initPie3DChart()
|
||||
})
|
||||
updateTime();
|
||||
timer = setInterval(updateTime, 1000);
|
||||
initBarChart();
|
||||
initPowerChart();
|
||||
initEnvChart();
|
||||
initWaterChart();
|
||||
initDeviceChart();
|
||||
initPie3DChart();
|
||||
});
|
||||
|
||||
// 组件卸载时清理
|
||||
onBeforeUnmount(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer)
|
||||
clearInterval(timer);
|
||||
}
|
||||
|
||||
// 从管理器中移除图表
|
||||
if (barChartInstance) {
|
||||
removeChartFromResizeManager(barChartInstance)
|
||||
barChartInstance.dispose()
|
||||
removeChartFromResizeManager(barChartInstance);
|
||||
barChartInstance.dispose();
|
||||
}
|
||||
if (powerChartInstance) {
|
||||
removeChartFromResizeManager(powerChartInstance)
|
||||
powerChartInstance.dispose()
|
||||
removeChartFromResizeManager(powerChartInstance);
|
||||
powerChartInstance.dispose();
|
||||
}
|
||||
if (envChartInstance) {
|
||||
removeChartFromResizeManager(envChartInstance)
|
||||
envChartInstance.dispose()
|
||||
removeChartFromResizeManager(envChartInstance);
|
||||
envChartInstance.dispose();
|
||||
}
|
||||
if (waterChartInstance) {
|
||||
removeChartFromResizeManager(waterChartInstance)
|
||||
waterChartInstance.dispose()
|
||||
removeChartFromResizeManager(waterChartInstance);
|
||||
waterChartInstance.dispose();
|
||||
}
|
||||
if (deviceChartInstance) {
|
||||
removeChartFromResizeManager(deviceChartInstance)
|
||||
deviceChartInstance.dispose()
|
||||
removeChartFromResizeManager(deviceChartInstance);
|
||||
deviceChartInstance.dispose();
|
||||
}
|
||||
if (pie3dChartInstance) {
|
||||
removeChartFromResizeManager(pie3dChartInstance)
|
||||
pie3dChartInstance.dispose()
|
||||
removeChartFromResizeManager(pie3dChartInstance);
|
||||
pie3dChartInstance.dispose();
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mian{
|
||||
@font-face {
|
||||
font-family: 'ShiShangZhongHeiJianTi';
|
||||
src: url('../../../assets/fonts/时尚中黑简体.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
.mian {
|
||||
height: 100vh;
|
||||
background: url("../../../assets/energyConsumptionAnalysis/bg.png");
|
||||
background: url('../../../assets/energyConsumptionAnalysis/bg.png');
|
||||
background-size: 100% 100%;
|
||||
background-color: #081b3a;
|
||||
display: flex;
|
||||
@@ -536,48 +598,50 @@ onBeforeUnmount(() => {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
.left {
|
||||
display: flex;
|
||||
width: 14.3125rem;
|
||||
.left-first{
|
||||
.left-first {
|
||||
padding-left: 2.3125rem;
|
||||
padding-right: 3.5rem;
|
||||
font-size: 1.875rem;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
}
|
||||
.left-second{
|
||||
.left-second {
|
||||
width: 6.5rem;
|
||||
font-family: ShiShangZhongHeiJianTi;
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.center{
|
||||
.center {
|
||||
font-size: 1.9rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.1em;
|
||||
text-shadow: 0 0 10px #1e90ff, 0 0 20px #1e90ff;
|
||||
text-shadow:
|
||||
0 0 10px #1e90ff,
|
||||
0 0 20px #1e90ff;
|
||||
}
|
||||
.right{
|
||||
.right {
|
||||
width: 17.3125rem;
|
||||
display: flex;
|
||||
font-family: ShiShangZhongHeiJianTi;
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
color: #FFFFFF;
|
||||
gap: .75rem;
|
||||
.logout{
|
||||
color: #ffffff;
|
||||
gap: 0.75rem;
|
||||
.logout {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
gap: .2rem;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header{
|
||||
.header {
|
||||
/* margin-top: 1.125rem; */
|
||||
margin-left: 4.625rem;
|
||||
margin-right: 4.25rem;
|
||||
@@ -590,7 +654,9 @@ onBeforeUnmount(() => {
|
||||
justify-content: center;
|
||||
padding: 0 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0 10px #0ff2, 0 0 20px #0ff2 inset;
|
||||
box-shadow:
|
||||
0 0 10px #0ff2,
|
||||
0 0 20px #0ff2 inset;
|
||||
}
|
||||
.header-label {
|
||||
color: #fff;
|
||||
@@ -603,12 +669,21 @@ onBeforeUnmount(() => {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
margin: 0 0.2rem;
|
||||
font-family: ShiShangZhongHeiJianTi;
|
||||
}
|
||||
|
||||
.header-value.orange { color: #ffb300; }
|
||||
.header-value.green { color: #00ffb0; }
|
||||
.header-value.blue { color: #3ec6ff; }
|
||||
.header-value.purple { color: #b388ff; }
|
||||
.header-value.orange {
|
||||
color: #ffb300;
|
||||
}
|
||||
.header-value.green {
|
||||
color: #00ffb0;
|
||||
}
|
||||
.header-value.blue {
|
||||
color: #3ec6ff;
|
||||
}
|
||||
.header-value.purple {
|
||||
color: #b388ff;
|
||||
}
|
||||
|
||||
.header-unit {
|
||||
color: #fff;
|
||||
@@ -616,52 +691,52 @@ onBeforeUnmount(() => {
|
||||
margin-left: 0.2rem;
|
||||
}
|
||||
}
|
||||
.header div{
|
||||
.header div {
|
||||
width: 20.125rem;
|
||||
}
|
||||
.content{
|
||||
flex:1;
|
||||
.content {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 2.25rem 2.25rem 2.25rem;
|
||||
.content-left{
|
||||
.content-left {
|
||||
width: 32.6875rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.first{
|
||||
.first {
|
||||
height: 13.9rem;
|
||||
.first-total{
|
||||
.first-total {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 1rem 1rem 0 0;
|
||||
font-size: 1.12rem;
|
||||
color: #89EAFF;
|
||||
.first-total-title{
|
||||
color: #89eaff;
|
||||
.first-total-title {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 1.12rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
.first-total-value{
|
||||
.first-total-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.first-total-value-number{
|
||||
.first-total-value-number {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
font-size: 1.3rem;
|
||||
color: #89EAFF;
|
||||
line-height: 1rem;
|
||||
padding: .3rem;
|
||||
margin: 0 .1rem;
|
||||
border: .02rem solid rgba(99,145,180,0.59);
|
||||
font-weight: bold;
|
||||
font-size: 1.3rem;
|
||||
color: #89eaff;
|
||||
line-height: 1rem;
|
||||
padding: 0.3rem;
|
||||
margin: 0 0.1rem;
|
||||
border: 0.02rem solid rgba(99, 145, 180, 0.59);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.second{
|
||||
.second {
|
||||
height: 12.5rem;
|
||||
/* margin-top:2.25rem;
|
||||
margin-bottom: 2rem; */
|
||||
@@ -670,7 +745,7 @@ margin: 0 .1rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
}
|
||||
.third{
|
||||
.third {
|
||||
height: 16rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -690,18 +765,18 @@ margin: 0 .1rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
.env-card-content{
|
||||
.env-card-content {
|
||||
.env-title {
|
||||
font-size: .9rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 400;
|
||||
color: #4CE2D1;
|
||||
color: #4ce2d1;
|
||||
}
|
||||
.env-value {
|
||||
font-size: .8rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
font-family: ShiShangZhongHeiJianTi;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -711,79 +786,79 @@ margin: 0 .1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-center{
|
||||
.content-center {
|
||||
width: 47.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.content-center-first{
|
||||
.content-center-first {
|
||||
height: 31.9rem;
|
||||
.first-item{
|
||||
.first-item {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: url("../../../assets/energyConsumptionAnalysis/center-bg.png");
|
||||
background: url('../../../assets/energyConsumptionAnalysis/center-bg.png');
|
||||
background-size: 95% 95%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
.content-center-second{
|
||||
.content-center-second {
|
||||
height: 12.5rem;
|
||||
.second-item{
|
||||
.second-item {
|
||||
margin-top: 6rem;
|
||||
margin-left: 3.68rem;
|
||||
margin-bottom: 6.5rem;
|
||||
margin-right: 4.9rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.second-item-text{
|
||||
.second-item-text {
|
||||
width: 5.37rem;
|
||||
font-family: ShiShangZhongHeiJianTi;
|
||||
font-weight: 400;
|
||||
font-size: 1.37rem;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-right{
|
||||
.content-right {
|
||||
width: 32.68rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.first{
|
||||
.first {
|
||||
height: 14.9rem;
|
||||
.first-total{
|
||||
.first-total {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 1rem 1rem 0 0;
|
||||
font-size: 1.12rem;
|
||||
color: #89EAFF;
|
||||
.first-total-title{
|
||||
color: #89eaff;
|
||||
.first-total-title {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 1.12rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
.first-total-value{
|
||||
.first-total-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.first-total-value-number{
|
||||
.first-total-value-number {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
font-size: 1.3rem;
|
||||
color: #89EAFF;
|
||||
color: #89eaff;
|
||||
line-height: 1rem;
|
||||
padding: .3rem;
|
||||
margin: 0 .1rem;
|
||||
border: .02rem solid rgba(99,145,180,0.59);
|
||||
padding: 0.3rem;
|
||||
margin: 0 0.1rem;
|
||||
border: 0.02rem solid rgba(99, 145, 180, 0.59);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.second{
|
||||
.second {
|
||||
height: 12.5rem;
|
||||
/* margin-top:2.25rem;
|
||||
margin-bottom: 2rem; */
|
||||
@@ -792,7 +867,7 @@ margin: 0 .1rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
}
|
||||
.third{
|
||||
.third {
|
||||
height: 14rem;
|
||||
.device-cards {
|
||||
display: flex;
|
||||
@@ -801,57 +876,57 @@ margin: 0 .1rem;
|
||||
margin-right: 1.06rem;
|
||||
/* margin-bottom: 0.5rem; */
|
||||
margin-left: 1.31rem;
|
||||
.device-card1{
|
||||
.device-card1 {
|
||||
height: 3.2rem;
|
||||
width: 7.21rem;
|
||||
background: url("../../../assets/energyConsumptionAnalysis/devices-number.png");
|
||||
background: url('../../../assets/energyConsumptionAnalysis/devices-number.png');
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.device-card1-value{
|
||||
.device-card1-value {
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
color: #02B3F4;
|
||||
color: #02b3f4;
|
||||
}
|
||||
}
|
||||
.device-card2{
|
||||
.device-card2 {
|
||||
height: 3.2rem;
|
||||
width: 7.21rem;
|
||||
background: url("../../../assets/energyConsumptionAnalysis/devices-online.png");
|
||||
background: url('../../../assets/energyConsumptionAnalysis/devices-online.png');
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.device-card2-value{
|
||||
.device-card2-value {
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
color: #1DE39D;
|
||||
color: #1de39d;
|
||||
}
|
||||
}
|
||||
.device-card3{
|
||||
.device-card3 {
|
||||
height: 3.2rem;
|
||||
width: 7.21rem;
|
||||
background: url("../../../assets/energyConsumptionAnalysis/devices-offline.png");
|
||||
background: url('../../../assets/energyConsumptionAnalysis/devices-offline.png');
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.device-card3-value{
|
||||
.device-card3-value {
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
color: #F19315;
|
||||
color: #f19315;
|
||||
}
|
||||
}
|
||||
.device-card-text{
|
||||
.device-card-text {
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
color: #A1B2C2;
|
||||
color: #a1b2c2;
|
||||
line-height: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -843,6 +843,12 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@font-face {
|
||||
font-family: 'ShiShangZhongHeiJianTi';
|
||||
src: url('../../../assets/fonts/时尚中黑简体.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
.mian{
|
||||
height: 100vh;
|
||||
background: url("../../../assets/monitor/bg.png");
|
||||
|
||||
@@ -88,6 +88,12 @@ const goToHome = () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@font-face {
|
||||
font-family: 'ShiShangZhongHeiJianTi';
|
||||
src: url('../../../assets/fonts/时尚中黑简体.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
.navigation-bg {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
|
||||
@@ -11,10 +11,11 @@
|
||||
<div>晴</div>
|
||||
<div>40℃</div>
|
||||
<div class="logout" @click="logout">
|
||||
<img src="../../../assets/return.png" style="width: 1.5rem; height: 1.5rem;">
|
||||
<div>
|
||||
退出
|
||||
</div>
|
||||
<img
|
||||
src="../../../assets/return.png"
|
||||
style="width: 1.5rem; height: 1.5rem"
|
||||
/>
|
||||
<div>退出</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -49,7 +50,11 @@
|
||||
<div class="content">
|
||||
<div class="content-left">
|
||||
<div class="first">
|
||||
<div ref="barChart" class="bar-chart" style="width:100%;height:100%;"></div>
|
||||
<div
|
||||
ref="barChart"
|
||||
class="bar-chart"
|
||||
style="width: 100%; height: 100%"
|
||||
></div>
|
||||
</div>
|
||||
<div class="second">
|
||||
<div ref="powerChart" class="power-chart"></div>
|
||||
@@ -106,71 +111,78 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
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'
|
||||
useFlexibleRem()
|
||||
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';
|
||||
useFlexibleRem();
|
||||
// 路由
|
||||
const router = useRouter()
|
||||
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>()
|
||||
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
|
||||
let timer: number | null = null;
|
||||
|
||||
// 星期几
|
||||
const weekDay = ref('')
|
||||
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
|
||||
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('/navigation');
|
||||
};
|
||||
|
||||
// 更新时间
|
||||
const updateTime = () => {
|
||||
const now = new Date()
|
||||
const time = now.toLocaleTimeString('zh-CN', { hour12: false })
|
||||
const date = now.getFullYear() + '.' +
|
||||
String(now.getMonth() + 1).padStart(2, '0') + '.' +
|
||||
String(now.getDate()).padStart(2, '0')
|
||||
const now = new Date();
|
||||
const time = now.toLocaleTimeString('zh-CN', { hour12: false });
|
||||
const date =
|
||||
now.getFullYear() +
|
||||
'.' +
|
||||
String(now.getMonth() + 1).padStart(2, '0') +
|
||||
'.' +
|
||||
String(now.getDate()).padStart(2, '0');
|
||||
|
||||
// 获取星期几
|
||||
const weekDays = ['日', '一', '二', '三', '四', '五', '六']
|
||||
weekDay.value = '星期' + weekDays[now.getDay()]
|
||||
const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
|
||||
weekDay.value = '星期' + weekDays[now.getDay()];
|
||||
|
||||
const timeElement = document.getElementById('time')
|
||||
const dateElement = document.getElementById('date')
|
||||
const timeElement = document.getElementById('time');
|
||||
const dateElement = document.getElementById('date');
|
||||
|
||||
if (timeElement) timeElement.innerText = time
|
||||
if (dateElement) dateElement.innerText = date
|
||||
}
|
||||
if (timeElement) timeElement.innerText = time;
|
||||
if (dateElement) dateElement.innerText = date;
|
||||
};
|
||||
|
||||
// 初始化柱状图
|
||||
const initBarChart = () => {
|
||||
if (!barChart.value) return
|
||||
if (!barChart.value) return;
|
||||
|
||||
const myChart = echarts.init(barChart.value);
|
||||
myChart.setOption({
|
||||
tooltip: {},
|
||||
grid: { left: 40, right: 20, top: 50, bottom: 25 },
|
||||
xAxis: { data: ['A', 'B', 'C', 'D'] },
|
||||
yAxis: {},
|
||||
series: [
|
||||
@@ -181,70 +193,80 @@ const initBarChart = () => {
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化电力图表
|
||||
const initPowerChart = () => {
|
||||
if (!powerChart.value) return
|
||||
if (!powerChart.value) return;
|
||||
|
||||
const chart = echarts.init(powerChart.value)
|
||||
const chart = echarts.init(powerChart.value);
|
||||
const option = {
|
||||
tooltip: { trigger: 'axis' },
|
||||
grid: { left: 40, right: 20, top: 32, bottom: 20 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array.from({length: 19}, (_, i) => i + 6),
|
||||
data: Array.from({ length: 19 }, (_, i) => i + 6),
|
||||
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
||||
axisLabel: { color: '#fff' }
|
||||
axisLabel: { color: '#fff' },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '',
|
||||
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
||||
axisLabel: { color: '#fff' },
|
||||
splitLine: { lineStyle: { color: '#1e90ff22' } }
|
||||
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],
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
80, 120, 100, 130, 150, 180, 200, 220, 250, 285, 230, 200, 180, 150,
|
||||
120, 100, 80, 60, 40,
|
||||
],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 0,
|
||||
itemStyle: { color: '#3ec6ff' },
|
||||
lineStyle: { width: 1 },
|
||||
areaStyle: { color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1, // 上→下
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1, // 上→下
|
||||
[
|
||||
{ offset: 0, color: '#32B7E9' },
|
||||
{ offset: 1, color: 'rgba(50,183,233,0)' }
|
||||
]
|
||||
), }
|
||||
}]
|
||||
}
|
||||
chart.setOption(option)
|
||||
powerChartInstance = chart
|
||||
addChartToResizeManager(chart)
|
||||
}
|
||||
{ offset: 1, color: 'rgba(50,183,233,0)' },
|
||||
],
|
||||
),
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
chart.setOption(option);
|
||||
powerChartInstance = chart;
|
||||
addChartToResizeManager(chart);
|
||||
};
|
||||
|
||||
// 初始化环境图表
|
||||
const initEnvChart = () => {
|
||||
if (!envChart.value) return
|
||||
if (!envChart.value) return;
|
||||
|
||||
const chart = echarts.init(envChart.value)
|
||||
const chart = echarts.init(envChart.value);
|
||||
const option = {
|
||||
tooltip: { trigger: 'axis' },
|
||||
grid: { left: 40, right: 20, top: 40, bottom: 30 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array.from({length: 8}, (_, i) => (i+1)*3),
|
||||
data: Array.from({ length: 8 }, (_, i) => (i + 1) * 3),
|
||||
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
||||
axisLabel: { color: '#fff' }
|
||||
axisLabel: { color: '#fff' },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
||||
axisLabel: { color: '#fff' },
|
||||
splitLine: { lineStyle: { color: '#1e90ff22' } }
|
||||
splitLine: { lineStyle: { color: '#1e90ff22' } },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@@ -268,57 +290,65 @@ const initEnvChart = () => {
|
||||
areaStyle: { color: 'rgba(255,179,0,0.15)' },
|
||||
symbol: 'circle',
|
||||
symbolSize: 0,
|
||||
}
|
||||
]
|
||||
}
|
||||
chart.setOption(option)
|
||||
envChartInstance = chart
|
||||
addChartToResizeManager(chart)
|
||||
}
|
||||
},
|
||||
],
|
||||
};
|
||||
chart.setOption(option);
|
||||
envChartInstance = chart;
|
||||
addChartToResizeManager(chart);
|
||||
};
|
||||
|
||||
// 初始化水表图表
|
||||
const initWaterChart = () => {
|
||||
if (!waterChart.value) return
|
||||
if (!waterChart.value) return;
|
||||
|
||||
const chart = echarts.init(waterChart.value)
|
||||
const chart = echarts.init(waterChart.value);
|
||||
const option = {
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: {
|
||||
data: ['今日', '平均'],
|
||||
textStyle: { color: '#fff' },
|
||||
right: 20,
|
||||
top: 10
|
||||
top: 10,
|
||||
},
|
||||
grid: { left: 40, right: 20, top: 40, bottom: 30 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array.from({length: 19}, (_, i) => i + 6),
|
||||
data: Array.from({ length: 19 }, (_, i) => i + 6),
|
||||
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
||||
axisLabel: { color: '#fff' }
|
||||
axisLabel: { color: '#fff' },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
||||
axisLabel: { color: '#fff' },
|
||||
splitLine: { lineStyle: { color: '#1e90ff22' } }
|
||||
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],
|
||||
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, // 上→下
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1, // 上→下
|
||||
[
|
||||
{ offset: 0, color: '#32B7E9' },
|
||||
{ offset: 1, color: 'rgba(50,183,233,0)' }
|
||||
]
|
||||
), }
|
||||
{ offset: 1, color: 'rgba(50,183,233,0)' },
|
||||
],
|
||||
),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '平均',
|
||||
@@ -327,33 +357,33 @@ const initWaterChart = () => {
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
itemStyle: { color: '#ff6b00' },
|
||||
lineStyle: { width: 1, type: 'solid', color: '#ff6b00' }
|
||||
}
|
||||
]
|
||||
}
|
||||
chart.setOption(option)
|
||||
waterChartInstance = chart
|
||||
addChartToResizeManager(chart)
|
||||
}
|
||||
lineStyle: { width: 1, type: 'solid', color: '#ff6b00' },
|
||||
},
|
||||
],
|
||||
};
|
||||
chart.setOption(option);
|
||||
waterChartInstance = chart;
|
||||
addChartToResizeManager(chart);
|
||||
};
|
||||
|
||||
// 初始化设备图表
|
||||
const initDeviceChart = () => {
|
||||
if (!deviceChart.value) return
|
||||
if (!deviceChart.value) return;
|
||||
|
||||
const chart = echarts.init(deviceChart.value)
|
||||
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 }
|
||||
splitLine: { show: false },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['门禁', '监控', '水表'],
|
||||
axisLine: { lineStyle: { color: '#8697BA' } },
|
||||
axisLabel: { color: '#A1B2C2' }
|
||||
axisLabel: { color: '#A1B2C2' },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@@ -362,49 +392,58 @@ const initDeviceChart = () => {
|
||||
data: [650, 120, 40],
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
color: function(params: any) {
|
||||
color: function (params: any) {
|
||||
const colors = [
|
||||
new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1, // 上→下
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1, // 上→下
|
||||
[
|
||||
{ offset: 0, color: '#2986B1' },
|
||||
{ offset: 1, color: '#6941FF' }
|
||||
]
|
||||
{ offset: 1, color: '#6941FF' },
|
||||
],
|
||||
),
|
||||
new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1, // 上→下
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1, // 上→下
|
||||
[
|
||||
{ offset: 0, color: '#33FF99' },
|
||||
{ offset: 1, color: '#00908E' }
|
||||
]
|
||||
{ offset: 1, color: '#00908E' },
|
||||
],
|
||||
),
|
||||
new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1, // 上→下
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1, // 上→下
|
||||
[
|
||||
{ offset: 0, color: '#01B4FF' },
|
||||
{ offset: 1, color: '#0336FF' }
|
||||
]
|
||||
{ offset: 1, color: '#0336FF' },
|
||||
],
|
||||
),
|
||||
];
|
||||
return colors[params.dataIndex]
|
||||
}
|
||||
return colors[params.dataIndex];
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
chart.setOption(option)
|
||||
deviceChartInstance = chart
|
||||
addChartToResizeManager(chart)
|
||||
}
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
chart.setOption(option);
|
||||
deviceChartInstance = chart;
|
||||
addChartToResizeManager(chart);
|
||||
};
|
||||
|
||||
// 初始化3D饼图
|
||||
const initPie3DChart = () => {
|
||||
if (!pie3dChart.value) return
|
||||
if (!pie3dChart.value) return;
|
||||
|
||||
pie3dChartInstance = renderPie3DChart(pie3dChart.value, {
|
||||
data: [
|
||||
@@ -416,63 +455,69 @@ const initPie3DChart = () => {
|
||||
hoverHeightScale: 2,
|
||||
selectOffset: 0.1,
|
||||
distance: 220,
|
||||
boxHeight: 5
|
||||
})
|
||||
boxHeight: 5,
|
||||
});
|
||||
if (pie3dChartInstance) {
|
||||
addChartToResizeManager(pie3dChartInstance)
|
||||
addChartToResizeManager(pie3dChartInstance);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 组件挂载时初始化
|
||||
onMounted(() => {
|
||||
updateTime()
|
||||
timer = setInterval(updateTime, 1000)
|
||||
initBarChart()
|
||||
initPowerChart()
|
||||
initEnvChart()
|
||||
initWaterChart()
|
||||
initDeviceChart()
|
||||
initPie3DChart()
|
||||
})
|
||||
updateTime();
|
||||
timer = setInterval(updateTime, 1000);
|
||||
initBarChart();
|
||||
initPowerChart();
|
||||
initEnvChart();
|
||||
initWaterChart();
|
||||
initDeviceChart();
|
||||
initPie3DChart();
|
||||
});
|
||||
|
||||
// 组件卸载时清理
|
||||
onBeforeUnmount(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer)
|
||||
clearInterval(timer);
|
||||
}
|
||||
|
||||
// 从管理器中移除图表
|
||||
if (barChartInstance) {
|
||||
removeChartFromResizeManager(barChartInstance)
|
||||
barChartInstance.dispose()
|
||||
removeChartFromResizeManager(barChartInstance);
|
||||
barChartInstance.dispose();
|
||||
}
|
||||
if (powerChartInstance) {
|
||||
removeChartFromResizeManager(powerChartInstance)
|
||||
powerChartInstance.dispose()
|
||||
removeChartFromResizeManager(powerChartInstance);
|
||||
powerChartInstance.dispose();
|
||||
}
|
||||
if (envChartInstance) {
|
||||
removeChartFromResizeManager(envChartInstance)
|
||||
envChartInstance.dispose()
|
||||
removeChartFromResizeManager(envChartInstance);
|
||||
envChartInstance.dispose();
|
||||
}
|
||||
if (waterChartInstance) {
|
||||
removeChartFromResizeManager(waterChartInstance)
|
||||
waterChartInstance.dispose()
|
||||
removeChartFromResizeManager(waterChartInstance);
|
||||
waterChartInstance.dispose();
|
||||
}
|
||||
if (deviceChartInstance) {
|
||||
removeChartFromResizeManager(deviceChartInstance)
|
||||
deviceChartInstance.dispose()
|
||||
removeChartFromResizeManager(deviceChartInstance);
|
||||
deviceChartInstance.dispose();
|
||||
}
|
||||
if (pie3dChartInstance) {
|
||||
removeChartFromResizeManager(pie3dChartInstance)
|
||||
pie3dChartInstance.dispose()
|
||||
removeChartFromResizeManager(pie3dChartInstance);
|
||||
pie3dChartInstance.dispose();
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mian{
|
||||
@font-face {
|
||||
font-family: 'ShiShangZhongHeiJianTi';
|
||||
src: url('../../../assets/fonts/时尚中黑简体.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
.mian {
|
||||
height: 100vh;
|
||||
background: url("../../../assets/property/bg.png");
|
||||
background: url('../../../assets/property/bg.png');
|
||||
background-size: 100% 100%;
|
||||
background-color: #081b3a;
|
||||
display: flex;
|
||||
@@ -483,48 +528,50 @@ onBeforeUnmount(() => {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
.left {
|
||||
display: flex;
|
||||
width: 14.3125rem;
|
||||
.left-first{
|
||||
.left-first {
|
||||
padding-left: 2.3125rem;
|
||||
padding-right: 3.5rem;
|
||||
font-size: 1.875rem;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
}
|
||||
.left-second{
|
||||
.left-second {
|
||||
width: 6.5rem;
|
||||
font-family: ShiShangZhongHeiJianTi;
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.center{
|
||||
.center {
|
||||
font-size: 1.9rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.1em;
|
||||
text-shadow: 0 0 10px #1e90ff, 0 0 20px #1e90ff;
|
||||
text-shadow:
|
||||
0 0 10px #1e90ff,
|
||||
0 0 20px #1e90ff;
|
||||
}
|
||||
.right{
|
||||
.right {
|
||||
width: 17.3125rem;
|
||||
display: flex;
|
||||
font-family: ShiShangZhongHeiJianTi;
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
color: #FFFFFF;
|
||||
gap: .75rem;
|
||||
.logout{
|
||||
color: #ffffff;
|
||||
gap: 0.75rem;
|
||||
.logout {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
gap: .2rem;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header{
|
||||
.header {
|
||||
margin-top: 1.125rem;
|
||||
margin-left: 4.625rem;
|
||||
margin-right: 4.25rem;
|
||||
@@ -537,7 +584,9 @@ onBeforeUnmount(() => {
|
||||
justify-content: center;
|
||||
padding: 0 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0 10px #0ff2, 0 0 20px #0ff2 inset;
|
||||
box-shadow:
|
||||
0 0 10px #0ff2,
|
||||
0 0 20px #0ff2 inset;
|
||||
}
|
||||
.header-label {
|
||||
color: #fff;
|
||||
@@ -550,12 +599,21 @@ onBeforeUnmount(() => {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
margin: 0 0.2rem;
|
||||
font-family: ShiShangZhongHeiJianTi;
|
||||
}
|
||||
|
||||
.header-value.orange { color: #ffb300; }
|
||||
.header-value.green { color: #00ffb0; }
|
||||
.header-value.blue { color: #3ec6ff; }
|
||||
.header-value.purple { color: #b388ff; }
|
||||
.header-value.orange {
|
||||
color: #ffb300;
|
||||
}
|
||||
.header-value.green {
|
||||
color: #00ffb0;
|
||||
}
|
||||
.header-value.blue {
|
||||
color: #3ec6ff;
|
||||
}
|
||||
.header-value.purple {
|
||||
color: #b388ff;
|
||||
}
|
||||
|
||||
.header-unit {
|
||||
color: #fff;
|
||||
@@ -563,22 +621,22 @@ onBeforeUnmount(() => {
|
||||
margin-left: 0.2rem;
|
||||
}
|
||||
}
|
||||
.header div{
|
||||
.header div {
|
||||
width: 20.125rem;
|
||||
}
|
||||
.contents{
|
||||
.contents {
|
||||
flex: 1;
|
||||
.content{
|
||||
.content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 2.25rem 2.25rem 2.25rem;
|
||||
.content-left{
|
||||
.content-left {
|
||||
width: 32.6875rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.first{
|
||||
.first {
|
||||
height: 16.81rem;
|
||||
.pie3d-title {
|
||||
color: #fff;
|
||||
@@ -606,11 +664,10 @@ onBeforeUnmount(() => {
|
||||
min-height: unset;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.bar-chart{
|
||||
|
||||
.bar-chart {
|
||||
}
|
||||
}
|
||||
.second{
|
||||
.second {
|
||||
height: 12rem;
|
||||
/* margin-top:2.25rem; */
|
||||
/* margin-bottom: 2rem; */
|
||||
@@ -619,40 +676,40 @@ onBeforeUnmount(() => {
|
||||
/* margin-top: 0.2rem; */
|
||||
}
|
||||
}
|
||||
.third{
|
||||
.third {
|
||||
height: 12.12rem;
|
||||
.env-chart {
|
||||
height: 12rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-center{
|
||||
.content-center {
|
||||
width: 47.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.content-center-first{
|
||||
.content-center-first {
|
||||
height: 30.9rem;
|
||||
.first-item{
|
||||
.first-item {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: url("../../../assets/property/center-bg.png");
|
||||
background: url('../../../assets/property/center-bg.png');
|
||||
background-size: 95% 95%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
.content-center-second{
|
||||
.content-center-second {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 12.5rem;
|
||||
.second-item{
|
||||
.second-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.second-item-box1{
|
||||
.second-item-box1 {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
display: flex;
|
||||
@@ -661,11 +718,11 @@ onBeforeUnmount(() => {
|
||||
font-family: ShiShangZhongHeiJianTi;
|
||||
font-weight: 400;
|
||||
font-size: 1.37rem;
|
||||
color: #FFFFFF;
|
||||
background: url("../../../assets/property/personnel-duty-circle1.png");
|
||||
color: #ffffff;
|
||||
background: url('../../../assets/property/personnel-duty-circle1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.second-item-box2{
|
||||
.second-item-box2 {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
display: flex;
|
||||
@@ -674,11 +731,11 @@ onBeforeUnmount(() => {
|
||||
font-family: ShiShangZhongHeiJianTi;
|
||||
font-weight: 400;
|
||||
font-size: 1.37rem;
|
||||
color: #FFFFFF;
|
||||
background: url("../../../assets/property/personnel-duty-circle2.png");
|
||||
color: #ffffff;
|
||||
background: url('../../../assets/property/personnel-duty-circle2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.second-item-box3{
|
||||
.second-item-box3 {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
display: flex;
|
||||
@@ -687,11 +744,11 @@ onBeforeUnmount(() => {
|
||||
font-family: ShiShangZhongHeiJianTi;
|
||||
font-weight: 400;
|
||||
font-size: 1.37rem;
|
||||
color: #FFFFFF;
|
||||
background: url("../../../assets/property/personnel-duty-circle3.png");
|
||||
color: #ffffff;
|
||||
background: url('../../../assets/property/personnel-duty-circle3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.second-item-box4{
|
||||
.second-item-box4 {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
display: flex;
|
||||
@@ -700,11 +757,11 @@ onBeforeUnmount(() => {
|
||||
font-family: ShiShangZhongHeiJianTi;
|
||||
font-weight: 400;
|
||||
font-size: 1.37rem;
|
||||
color: #FFFFFF;
|
||||
background: url("../../../assets/property/personnel-duty-circle1.png");
|
||||
color: #ffffff;
|
||||
background: url('../../../assets/property/personnel-duty-circle1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.second-item-box5{
|
||||
.second-item-box5 {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
display: flex;
|
||||
@@ -713,68 +770,65 @@ onBeforeUnmount(() => {
|
||||
font-family: ShiShangZhongHeiJianTi;
|
||||
font-weight: 400;
|
||||
font-size: 1.37rem;
|
||||
color: #FFFFFF;
|
||||
background: url("../../../assets/property/personnel-duty-circle4.png");
|
||||
color: #ffffff;
|
||||
background: url('../../../assets/property/personnel-duty-circle4.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-right{
|
||||
.content-right {
|
||||
width: 32.68rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.first{
|
||||
.first {
|
||||
height: 16.81rem;
|
||||
.water-chart {
|
||||
height: 100%;
|
||||
/* margin-top: 0.2rem; */
|
||||
}
|
||||
}
|
||||
.second{
|
||||
.second {
|
||||
height: 11rem;
|
||||
margin-top:2rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
.second-box{
|
||||
.second-box {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.box-content{
|
||||
.box-content {
|
||||
height: 8rem;
|
||||
width: 8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.box-content-label{
|
||||
.box-content-label {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: .8rem;
|
||||
color: #C4D6FF;
|
||||
font-size: 0.8rem;
|
||||
color: #c4d6ff;
|
||||
line-height: 2rem;
|
||||
}
|
||||
.box-content-num{
|
||||
.box-content-num {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
background: url("../../../assets/property/customer-circle.png");
|
||||
background: url('../../../assets/property/customer-circle.png');
|
||||
background-size: 100% 100%;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 1.2rem;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.third{
|
||||
.third {
|
||||
height: 13.12rem;
|
||||
.device-chart {
|
||||
height: 10rem;
|
||||
@@ -782,7 +836,7 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pie3d-title {
|
||||
color: #fff;
|
||||
|
||||
@@ -731,6 +731,12 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@font-face {
|
||||
font-family: 'ShiShangZhongHeiJianTi';
|
||||
src: url('../../../assets/fonts/时尚中黑简体.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
.mian{
|
||||
height: 100vh;
|
||||
background: url("../../../assets/security/bg.png");
|
||||
@@ -811,6 +817,7 @@ onBeforeUnmount(() => {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
margin: 0 0.2rem;
|
||||
font-family: ShiShangZhongHeiJianTi;
|
||||
}
|
||||
|
||||
.header-value.orange { color: #ffb300; }
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { VbenAvatar } from '../avatar';
|
||||
import { usePreferences } from '../../../../../../../packages/preferences/src/index';
|
||||
const { isDark } = usePreferences();
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
@@ -51,23 +53,39 @@ withDefaults(defineProps<Props>(), {
|
||||
<a
|
||||
:class="$attrs.class"
|
||||
:href="href"
|
||||
class="flex h-full items-center gap-2 overflow-hidden px-3 text-lg leading-normal transition-all duration-500"
|
||||
class="flex items-center gap-2 overflow-hidden text-lg leading-normal transition-all duration-500"
|
||||
>
|
||||
<VbenAvatar
|
||||
<div style="margin-top: 20px">
|
||||
<img
|
||||
src="../../../../../../../apps/web-antd/src/assets/logoLight.png"
|
||||
alt=""
|
||||
v-if="isDark"
|
||||
width="170"
|
||||
height="49"
|
||||
/>
|
||||
<img
|
||||
src="../../../../../../../apps/web-antd/src/assets/logoDark.png"
|
||||
alt=""
|
||||
v-if="!isDark"
|
||||
width="170"
|
||||
height="49"
|
||||
/>
|
||||
</div>
|
||||
<!-- <VbenAvatar
|
||||
v-if="src"
|
||||
:alt="text"
|
||||
:src="src"
|
||||
:size="logoSize"
|
||||
:fit="fit"
|
||||
class="relative rounded-none bg-transparent"
|
||||
/>
|
||||
<template v-if="!collapsed">
|
||||
/> -->
|
||||
<!-- <template v-if="!collapsed">
|
||||
<slot name="text">
|
||||
<span class="text-foreground truncate text-nowrap font-semibold">
|
||||
{{ text }}
|
||||
</span>
|
||||
</slot>
|
||||
</template>
|
||||
</template> -->
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -111,7 +111,6 @@ const handleAccountLogin = async () => {
|
||||
|
||||
<template>
|
||||
<div class="login-bg">
|
||||
|
||||
<div class="login-bg_1">
|
||||
<div class="login-wapter">
|
||||
<div class="login-wapter1">欢迎登录</div>
|
||||
|
||||
Reference in New Issue
Block a user