1378 lines
35 KiB
Vue
1378 lines
35 KiB
Vue
<template>
|
|
<div class="mian">
|
|
<div class="title">
|
|
<div class="left">
|
|
<div class="left-first" id="time">--:--:--</div>
|
|
<div class="left-second" id="date">----</div>
|
|
</div>
|
|
<div class="center">南川区综合服务中心数智管理平台监控大屏</div>
|
|
<div class="right">
|
|
<div>{{ weekDay }}</div>
|
|
<div>晴</div>
|
|
<div>40℃</div>
|
|
<div class="logout" @click="logout">
|
|
<img
|
|
src="../../../assets/return.png"
|
|
style="width: 1.5rem; height: 1.5rem"
|
|
/>
|
|
<div>退出</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="contents">
|
|
<div class="content">
|
|
<div class="content-left">
|
|
<div class="first">
|
|
<div class="first-total">
|
|
<div class="first-total-title">在线数量</div>
|
|
<div class="first-total-value">
|
|
<div class="first-total-value-number">4</div>
|
|
<div class="first-total-value-number">7</div>
|
|
<div class="first-total-value-number">3</div>
|
|
</div>
|
|
<div class="first-total-unit">个</div>
|
|
</div>
|
|
<div class="first-content">
|
|
<div class="alarm-table-container">
|
|
<table class="alarm-table">
|
|
<thead>
|
|
<tr>
|
|
<th>监控编号</th>
|
|
<th>监控位置</th>
|
|
<th>监控范围</th>
|
|
<th>监控情况</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>0625142512</td>
|
|
<td>东区大门</td>
|
|
<td>右侧</td>
|
|
<td class="status-done">正常</td>
|
|
</tr>
|
|
<tr>
|
|
<td>0625342512</td>
|
|
<td>东区大门</td>
|
|
<td>左侧</td>
|
|
<td class="status-done">正常</td>
|
|
</tr>
|
|
<tr>
|
|
<td>0625142513</td>
|
|
<td>东区大门</td>
|
|
<td>正前方</td>
|
|
<td class="status-done">正常</td>
|
|
</tr>
|
|
<tr>
|
|
<td>0625142912</td>
|
|
<td>东区大门</td>
|
|
<td>马路</td>
|
|
<td class="status-undone">异常</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="second">
|
|
<div
|
|
class="water-factory-mix-chart"
|
|
ref="waterFactoryMixChart"
|
|
></div>
|
|
</div>
|
|
<div class="third">
|
|
<div class="third-content">
|
|
<div ref="powerChart" class="power-chart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-center">
|
|
<Map />
|
|
</div>
|
|
|
|
<div class="content-right">
|
|
<div class="first">
|
|
<div class="bg2">
|
|
<div class="bg1">
|
|
<div class="content1">
|
|
<div class="content1-box">
|
|
<div class="box-title">已处理</div>
|
|
<div class="box-number" style="color: #29ecb5">8</div>
|
|
<div class="box-variation" style="color: #df7110">19.1</div>
|
|
</div>
|
|
<div class="content1-box">
|
|
<div class="box-title">未处理</div>
|
|
<div class="box-number" style="color: #df7110">12</div>
|
|
<div class="box-variation" style="color: #29ecb5">19.1</div>
|
|
</div>
|
|
</div>
|
|
<div class="content2">
|
|
<div class="content2-box">
|
|
<div class="box-title">今日报警</div>
|
|
<div class="box-number" style="color: #00a8ff">12</div>
|
|
<div class="box-variation" style="color: #29ecb5">19.1</div>
|
|
</div>
|
|
<div class="content2-box">
|
|
<div class="box-title">完成率</div>
|
|
<div class="box-number" style="color: #00a8ff">66%</div>
|
|
<div class="box-variation" style="color: #29ecb5">19.1</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="second">
|
|
<div class="alarm-table-container">
|
|
<table class="alarm-table">
|
|
<thead>
|
|
<tr>
|
|
<th>报警时间</th>
|
|
<th>报警位置</th>
|
|
<th>报警内容</th>
|
|
<th>处理情况</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>06-25 14:25:12</td>
|
|
<td>东区大门</td>
|
|
<td>门禁异常</td>
|
|
<td class="status-done">已处理</td>
|
|
</tr>
|
|
<tr>
|
|
<td>06-25 14:25:12</td>
|
|
<td>东区大门</td>
|
|
<td>门禁异常</td>
|
|
<td class="status-done">已处理</td>
|
|
</tr>
|
|
<tr>
|
|
<td>06-25 14:25:12</td>
|
|
<td>东区大门</td>
|
|
<td>门禁异常</td>
|
|
<td class="status-done">已处理</td>
|
|
</tr>
|
|
<tr>
|
|
<td>06-25 14:25:12</td>
|
|
<td>东区大门</td>
|
|
<td>门禁异常</td>
|
|
<td class="status-undone">未处理</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="third">
|
|
<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=""
|
|
/>
|
|
</div>
|
|
<div class="device-card-text-box">
|
|
<div class="device-card-text">设备总数</div>
|
|
<div class="device-card1-value">650</div>
|
|
</div>
|
|
</div>
|
|
<div class="device-card2">
|
|
<div>
|
|
<img
|
|
src="../../../assets/energyConsumptionAnalysis/devices-online-icon.png"
|
|
style="width: 1.75rem; height: 1.75rem"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div class="device-card-text">设备在线数</div>
|
|
<div class="device-card2-value">632</div>
|
|
</div>
|
|
</div>
|
|
<div class="device-card3">
|
|
<div>
|
|
<img
|
|
src="../../../assets/energyConsumptionAnalysis/devices-offline-icon.png"
|
|
style="width: 1.75rem; height: 1.75rem"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div class="device-card-text">设备离线数</div>
|
|
<div class="device-card3-value">18</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="os-distribution-chart" ref="osDistributionChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import * as echarts from 'echarts';
|
|
import 'echarts-gl';
|
|
import { getThreeDBarOption } from '#/utils/threeDBarOption';
|
|
import { renderPie3DChart } from '#/utils/pie3d';
|
|
import {
|
|
addChartToResizeManager,
|
|
removeChartFromResizeManager,
|
|
} from '#/utils/echartsResize';
|
|
import { useFlexibleRem } from '#/utils/useFlexibleRem';
|
|
import Map from '#/views/screen//monitor/map/Map.vue';
|
|
|
|
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>();
|
|
const waterFactoryMixChart = ref<HTMLElement>();
|
|
const osDistributionChart = 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;
|
|
let waterFactoryMixChartInstance: echarts.ECharts | null = null;
|
|
let osDistributionChartInstance: echarts.ECharts | null = null;
|
|
|
|
// 退出方法
|
|
const logout = () => {
|
|
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 weekDays = ['日', '一', '二', '三', '四', '五', '六'];
|
|
weekDay.value = '星期' + weekDays[now.getDay()];
|
|
|
|
const timeElement = document.getElementById('time');
|
|
const dateElement = document.getElementById('date');
|
|
|
|
if (timeElement) timeElement.innerText = time;
|
|
if (dateElement) dateElement.innerText = date;
|
|
};
|
|
|
|
// 初始化柱状图
|
|
const initBarChart = () => {
|
|
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 initPowerChart = () => {
|
|
if (!powerChart.value) return;
|
|
|
|
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),
|
|
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
|
axisLabel: { color: '#fff' },
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '',
|
|
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,
|
|
],
|
|
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)' },
|
|
],
|
|
),
|
|
},
|
|
},
|
|
],
|
|
};
|
|
chart.setOption(option);
|
|
powerChartInstance = chart;
|
|
addChartToResizeManager(chart);
|
|
};
|
|
|
|
// 初始化环境图表
|
|
const initEnvChart = () => {
|
|
if (!envChart.value) return;
|
|
|
|
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),
|
|
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
|
axisLabel: { color: '#fff' },
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
|
axisLabel: { color: '#fff' },
|
|
splitLine: { lineStyle: { color: '#1e90ff22' } },
|
|
},
|
|
series: [
|
|
{
|
|
name: '今年',
|
|
data: [100, 200, 150, 300, 250, 200, 100, 80],
|
|
type: 'line',
|
|
smooth: true,
|
|
itemStyle: { color: '#b388ff' },
|
|
lineStyle: { width: 3 },
|
|
areaStyle: { color: 'rgba(179,136,255,0.2)' },
|
|
symbol: 'circle',
|
|
symbolSize: 0,
|
|
},
|
|
{
|
|
name: '去年',
|
|
data: [80, 120, 100, 180, 150, 120, 60, 40],
|
|
type: 'line',
|
|
smooth: true,
|
|
itemStyle: { color: '#ffb300' },
|
|
lineStyle: { width: 3 },
|
|
areaStyle: { color: 'rgba(255,179,0,0.15)' },
|
|
symbol: 'circle',
|
|
symbolSize: 0,
|
|
},
|
|
],
|
|
};
|
|
chart.setOption(option);
|
|
envChartInstance = chart;
|
|
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 initWaterFactoryMixChart = () => {
|
|
if (!waterFactoryMixChart.value) return;
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
},
|
|
legend: {
|
|
data: ['人脸库', '车牌库', '新增'],
|
|
top: '7%',
|
|
right: '10%',
|
|
textStyle: {
|
|
color: '#fff',
|
|
},
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#3F93A3',
|
|
width: 3,
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 'auto',
|
|
textStyle: {
|
|
color: '#01747B',
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
data: ['2017', '2018', '2019', '2020'],
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '数量/个',
|
|
nameTextStyle: {
|
|
color: '#01747B',
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#01747B',
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 'auto',
|
|
textStyle: {
|
|
color: '#01747B',
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#01747B',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '比例/%',
|
|
nameTextStyle: {
|
|
color: '#01747B',
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#01747B',
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 'auto',
|
|
textStyle: {
|
|
color: '#01747B',
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#01747B',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: '人脸库',
|
|
type: 'bar',
|
|
barWidth: 20,
|
|
stack: 'ele',
|
|
itemStyle: {
|
|
color: '#01A4FF',
|
|
},
|
|
data: [120, 132, 101, 134],
|
|
},
|
|
{
|
|
name: '车牌库',
|
|
type: 'bar',
|
|
barWidth: 20,
|
|
stack: 'ele',
|
|
itemStyle: {
|
|
color: '#54E6CB',
|
|
},
|
|
data: [220, 182, 191, 234],
|
|
},
|
|
{
|
|
name: '新增',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
stack: 'percent',
|
|
itemStyle: {
|
|
color: '#EC731F',
|
|
},
|
|
data: [60, 72, 71, 74],
|
|
},
|
|
],
|
|
};
|
|
waterFactoryMixChartInstance = echarts.init(waterFactoryMixChart.value);
|
|
waterFactoryMixChartInstance.setOption(option);
|
|
};
|
|
|
|
// 初始化操作系统分布图
|
|
const initOsDistributionChart = () => {
|
|
if (!osDistributionChart.value) return;
|
|
const option = {
|
|
legend: {
|
|
orient: 'horizontal',
|
|
bottom: 0,
|
|
left: 'center',
|
|
itemWidth: 18,
|
|
itemHeight: 14,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 10,
|
|
},
|
|
data: ['Linux 7.x', 'Linux 6.6.x', 'Windows7', 'Windows10'],
|
|
},
|
|
dataset: {
|
|
source: [
|
|
['product', 'nums'],
|
|
['Linux 7.x', 100],
|
|
['Linux 6.6.x', 200],
|
|
['Windows7', 120],
|
|
['Windows10', 240],
|
|
],
|
|
},
|
|
grid: {
|
|
left: '35%',
|
|
top: 10,
|
|
right: '15%',
|
|
bottom: 10,
|
|
containLabel: true,
|
|
},
|
|
xAxis: [{ show: false }, { show: false }],
|
|
yAxis: {
|
|
type: 'category',
|
|
// inverse: true, // 注释掉这行
|
|
show: false,
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
fontSize: 10,
|
|
formatter: function (params: any) {
|
|
return `${params.value} (${params.percent}%)`;
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
center: ['20%', '50%'],
|
|
radius: ['60%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
color: function (params: any) {
|
|
const colorList = [
|
|
'#3ec6ff', // Linux 7.x
|
|
'#00ffb0', // Linux 6.6.x
|
|
'#b388ff', // Windows7
|
|
'#ffb300', // Windows10
|
|
];
|
|
return colorList[params.dataIndex];
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
encode: {
|
|
itemName: 'product',
|
|
value: 'nums',
|
|
},
|
|
},
|
|
{
|
|
type: 'bar',
|
|
barWidth: 10,
|
|
itemStyle: {
|
|
color: function (params: any) {
|
|
const colorList = [
|
|
'#3ec6ff', // Linux 7.x
|
|
'#00ffb0', // Linux 6.6.x
|
|
'#b388ff', // Windows7
|
|
'#ffb300', // Windows10
|
|
];
|
|
return colorList[params.dataIndex];
|
|
},
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'right',
|
|
color: '#fff',
|
|
fontSize: 10,
|
|
fontWeight: 'bold',
|
|
},
|
|
encode: {
|
|
x: 'nums',
|
|
y: 'product',
|
|
},
|
|
},
|
|
],
|
|
};
|
|
osDistributionChartInstance = echarts.init(osDistributionChart.value);
|
|
osDistributionChartInstance.setOption(option);
|
|
};
|
|
|
|
// 组件挂载时初始化
|
|
onMounted(() => {
|
|
updateTime();
|
|
timer = setInterval(updateTime, 1000);
|
|
initBarChart();
|
|
initPowerChart();
|
|
initEnvChart();
|
|
initWaterChart();
|
|
initDeviceChart();
|
|
initPie3DChart();
|
|
initWaterFactoryMixChart();
|
|
initOsDistributionChart();
|
|
});
|
|
|
|
// 组件卸载时清理
|
|
onBeforeUnmount(() => {
|
|
if (timer) {
|
|
clearInterval(timer);
|
|
}
|
|
|
|
// 从管理器中移除图表
|
|
if (barChartInstance) {
|
|
removeChartFromResizeManager(barChartInstance);
|
|
barChartInstance.dispose();
|
|
}
|
|
if (powerChartInstance) {
|
|
removeChartFromResizeManager(powerChartInstance);
|
|
powerChartInstance.dispose();
|
|
}
|
|
if (envChartInstance) {
|
|
removeChartFromResizeManager(envChartInstance);
|
|
envChartInstance.dispose();
|
|
}
|
|
if (waterChartInstance) {
|
|
removeChartFromResizeManager(waterChartInstance);
|
|
waterChartInstance.dispose();
|
|
}
|
|
if (deviceChartInstance) {
|
|
removeChartFromResizeManager(deviceChartInstance);
|
|
deviceChartInstance.dispose();
|
|
}
|
|
if (pie3dChartInstance) {
|
|
removeChartFromResizeManager(pie3dChartInstance);
|
|
pie3dChartInstance.dispose();
|
|
}
|
|
if (waterFactoryMixChartInstance) {
|
|
waterFactoryMixChartInstance.dispose();
|
|
}
|
|
if (osDistributionChartInstance) {
|
|
osDistributionChartInstance.dispose();
|
|
}
|
|
});
|
|
</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');
|
|
background-size: 100% 100%;
|
|
background-color: #081b3a;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.title {
|
|
height: 5.375rem;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.left {
|
|
display: flex;
|
|
width: 18.3125rem;
|
|
|
|
.left-first {
|
|
padding-left: 2.3125rem;
|
|
font-size: 1.875rem;
|
|
width: 10.5rem;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.left-second {
|
|
width: 6.5rem;
|
|
font-family: ShiShangZhongHeiJianTi;
|
|
font-weight: 400;
|
|
font-size: 1.25rem;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.right {
|
|
width: 17.3125rem;
|
|
display: flex;
|
|
font-family: ShiShangZhongHeiJianTi;
|
|
font-weight: 400;
|
|
font-size: 1.25rem;
|
|
color: #ffffff;
|
|
gap: 0.75rem;
|
|
|
|
.logout {
|
|
display: flex;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
gap: 0.2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.contents {
|
|
flex: 1;
|
|
|
|
.content {
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 2rem 2.25rem 1.93rem 2.25rem;
|
|
|
|
.content-left {
|
|
width: 32.6875rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.first {
|
|
height: 14.5rem;
|
|
|
|
.first-total {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 2rem 1rem 0 0;
|
|
font-size: 1.12rem;
|
|
color: #89eaff;
|
|
|
|
.first-total-title {
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
font-size: 1.12rem;
|
|
line-height: 1rem;
|
|
}
|
|
|
|
.first-total-value {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.first-total-value-number {
|
|
font-family: Microsoft YaHei;
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
|
|
.first-content {
|
|
.alarm-table-container {
|
|
border-radius: 0.5rem;
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.alarm-table-title {
|
|
color: #fff;
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
margin-bottom: 0.5rem;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.alarm-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
color: #8697ba;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.alarm-table thead th {
|
|
padding: 0.8rem 0.2rem;
|
|
color: #3ec6ff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.alarm-table thead {
|
|
border: 0.1rem solid #1ec7f8;
|
|
}
|
|
|
|
.alarm-table tbody td {
|
|
text-align: center;
|
|
padding: 0.3rem 0.2rem;
|
|
}
|
|
|
|
.status-done {
|
|
color: #3ec6ff;
|
|
}
|
|
|
|
.status-undone {
|
|
color: #ffb300;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.second {
|
|
height: 13.5rem;
|
|
|
|
.water-factory-mix-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.third {
|
|
height: 15rem;
|
|
|
|
.third-content {
|
|
height: 100%;
|
|
|
|
.power-chart {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-center {
|
|
width: 47.5rem;
|
|
display: flex;
|
|
align-items: end;
|
|
|
|
.content-box {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.box {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
|
|
.box div {
|
|
width: 23rem;
|
|
height: 15rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-right {
|
|
width: 32.68rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.first {
|
|
height: 16rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.bg2 {
|
|
background: url('../../../assets/monitor/device-alerts-bg3.png');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.bg1 {
|
|
background: url('../../../assets/monitor/device-alerts-bg1.png');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
height: 12rem;
|
|
width: 100%;
|
|
padding-top: 4rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.content1 {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 4rem;
|
|
font-family: Adobe Heiti Std;
|
|
font-weight: normal;
|
|
|
|
.content1-box {
|
|
width: 8rem;
|
|
height: 2rem;
|
|
padding: 0.5rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
background: url('../../../assets/monitor/device-alerts-button1.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
|
|
.box-title {
|
|
font-size: 1rem;
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.box-number {
|
|
font-size: 1.3rem;
|
|
color: #29ecb5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.box-variation {
|
|
font-size: 0.7rem;
|
|
color: #df7110;
|
|
display: flex;
|
|
align-items: end;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content2 {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 2rem;
|
|
font-family: Adobe Heiti Std;
|
|
font-weight: normal;
|
|
|
|
.content2-box {
|
|
width: 9rem;
|
|
height: 2rem;
|
|
padding: 0.5rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
background: url('../../../assets/monitor/device-alerts-button1.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
|
|
.box-title {
|
|
font-size: 1rem;
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.box-number {
|
|
font-size: 1.3rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.box-variation {
|
|
font-size: 0.7rem;
|
|
display: flex;
|
|
align-items: end;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.second {
|
|
height: 13.5rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: end;
|
|
|
|
.alarm-table-container {
|
|
border-radius: 0.5rem;
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.alarm-table-title {
|
|
color: #fff;
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
margin-bottom: 0.5rem;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.alarm-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
color: #8697ba;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.alarm-table thead th {
|
|
padding: 0.8rem 0.2rem;
|
|
color: #3ec6ff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.alarm-table thead {
|
|
border: 0.1rem solid #1ec7f8;
|
|
}
|
|
|
|
.alarm-table tbody td {
|
|
text-align: center;
|
|
padding: 0.3rem 0.2rem;
|
|
}
|
|
|
|
.status-done {
|
|
color: #3ec6ff;
|
|
}
|
|
|
|
.status-undone {
|
|
color: #ffb300;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.third {
|
|
height: 14.8rem;
|
|
|
|
.device-cards {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 2rem;
|
|
margin-right: 1.06rem;
|
|
/* margin-bottom: 0.5rem; */
|
|
margin-left: 1.31rem;
|
|
|
|
.device-card1 {
|
|
height: 3.2rem;
|
|
width: 7.21rem;
|
|
background: url('../../../assets/energyConsumptionAnalysis/devices-number.png');
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.device-card1-value {
|
|
font-family: Arial;
|
|
font-weight: bold;
|
|
font-size: 1.25rem;
|
|
color: #02b3f4;
|
|
}
|
|
}
|
|
|
|
.device-card2 {
|
|
height: 3.2rem;
|
|
width: 7.21rem;
|
|
background: url('../../../assets/energyConsumptionAnalysis/devices-online.png');
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.device-card2-value {
|
|
font-family: Arial;
|
|
font-weight: bold;
|
|
font-size: 1.25rem;
|
|
color: #1de39d;
|
|
}
|
|
}
|
|
|
|
.device-card3 {
|
|
height: 3.2rem;
|
|
width: 7.21rem;
|
|
background: url('../../../assets/energyConsumptionAnalysis/devices-offline.png');
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.device-card3-value {
|
|
font-family: Arial;
|
|
font-weight: bold;
|
|
font-size: 1.25rem;
|
|
color: #f19315;
|
|
}
|
|
}
|
|
|
|
.device-card-text {
|
|
font-family: Microsoft YaHei UI;
|
|
font-weight: 400;
|
|
font-size: 0.75rem;
|
|
color: #a1b2c2;
|
|
line-height: 0.75rem;
|
|
}
|
|
}
|
|
|
|
.os-distribution-chart {
|
|
width: 100%;
|
|
height: 10rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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>
|