Compare commits
10 Commits
dev-dataSc
...
268645ed62
| Author | SHA1 | Date | |
|---|---|---|---|
|
268645ed62 | ||
|
|
fc2c0d341f | ||
| 0c3a841936 | |||
|
|
2f7436398e | ||
|
|
4bca8652d6 | ||
|
|
685a02ac01 | ||
| 8215478113 | |||
|
|
2595f2b8ee | ||
|
|
c2171db699 | ||
| 852ae25cc6 |
3
src/assets/svgs/trend.svg
Normal file
3
src/assets/svgs/trend.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg class="trend-icon" viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor">
|
||||
<path d="M868 545.5L536.1 163a31.96 31.96 0 0 0-48.3 0L156 545.5a7.97 7.97 0 0 0 6 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 369 B |
@@ -88,7 +88,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
|
||||
icon: 'ep:home-filled',
|
||||
noCache: false,
|
||||
hidden: true,
|
||||
affix: true
|
||||
affix: false
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -100,7 +100,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
|
||||
icon: 'ep:home-filled',
|
||||
hidden: true,
|
||||
noCache: false,
|
||||
affix: true
|
||||
affix: false
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -399,6 +399,17 @@ const remainingRouter: AppRouteRecordRaw[] = [
|
||||
catalogue: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/screen/powerMonitoring',
|
||||
component: () => import('@/views/screen/powerMonitoring.vue'),
|
||||
name: 'powerMonitoring',
|
||||
meta: {
|
||||
hidden: true,
|
||||
title: '动环监控大屏',
|
||||
noTagsView: true,
|
||||
catalogue: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/screen/main',
|
||||
component: () => import('@/views/screen/mainScreen.vue'),
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<span>···</span>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="header-title">集团视角数据看板</h1>
|
||||
<!-- <h1 class="header-title">集团视角数据看板</h1> -->
|
||||
<div class="header-right">
|
||||
<div class="date-range-wrapper">
|
||||
<el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
@@ -261,7 +261,7 @@ const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
// 区域选择相关
|
||||
const currentView = ref('总部')
|
||||
const currentView = ref('集团')
|
||||
const regionSelectorVisible = ref(false)
|
||||
const selectedRegion = ref('')
|
||||
const regionOption = ref<RegionItem[]>([])
|
||||
@@ -569,7 +569,7 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
|
||||
},
|
||||
legend: {
|
||||
data: ['一般隐患', '重大隐患'],
|
||||
top: 10,
|
||||
top: 0,
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
@@ -578,7 +578,7 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '25%',
|
||||
top: '12%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
@@ -1431,15 +1431,15 @@ onMounted(async () => {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
background: #f3f4f6;
|
||||
background: #409eff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
user-select: none;
|
||||
|
||||
font-weight: 600;
|
||||
span {
|
||||
margin-left: 8px;
|
||||
font-size: 18px;
|
||||
@@ -1614,8 +1614,8 @@ onMounted(async () => {
|
||||
|
||||
.donut-chart-wrapper,
|
||||
.donut-chart-wrapper-small {
|
||||
height: 280px;
|
||||
min-height: 280px;
|
||||
height: 200px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.line-chart-wrapper,
|
||||
@@ -1627,9 +1627,13 @@ onMounted(async () => {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bar-chart-wrapper {
|
||||
height: 215px;
|
||||
}
|
||||
|
||||
.progress-chart-wrapper {
|
||||
height: 280px;
|
||||
min-height: 280px;
|
||||
height: 200px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.high-risk-top {
|
||||
@@ -1714,7 +1718,7 @@ onMounted(async () => {
|
||||
.operation-distribution,
|
||||
.park-operation-distribution,
|
||||
.regional-progress {
|
||||
margin-top: 10px;
|
||||
margin-top: 8px;
|
||||
|
||||
.distribution-title {
|
||||
font-size: 14px;
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<span>···</span>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="header-title">区域视角数据看板</h1>
|
||||
<!-- <h1 class="header-title">区域视角数据看板</h1> -->
|
||||
<div class="header-right">
|
||||
<div class="date-range-wrapper">
|
||||
<el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
@@ -1500,8 +1500,8 @@ onMounted(() => {
|
||||
|
||||
.donut-chart-wrapper,
|
||||
.donut-chart-wrapper-small {
|
||||
height: 280px;
|
||||
min-height: 280px;
|
||||
height: 200px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.line-chart-wrapper,
|
||||
@@ -1513,9 +1513,13 @@ onMounted(() => {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bar-chart-wrapper {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.progress-chart-wrapper {
|
||||
height: 280px;
|
||||
min-height: 280px;
|
||||
height: 200px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.region-distribution,
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
</el-icon>
|
||||
<div class="park-name">{{ selectedPark }}</div>
|
||||
</div>
|
||||
<h1 class="header-title">园区视角数据看板</h1>
|
||||
<!-- <h1 class="header-title">园区视角数据看板</h1> -->
|
||||
<div class="header-right">
|
||||
<div class="date-range-wrapper">
|
||||
<el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
@@ -1321,7 +1321,7 @@ onMounted(() => {
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
@@ -1406,8 +1406,8 @@ onMounted(() => {
|
||||
|
||||
.donut-chart-wrapper,
|
||||
.donut-chart-wrapper-small {
|
||||
height: 280px;
|
||||
min-height: 280px;
|
||||
height: 200px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.line-chart-wrapper,
|
||||
@@ -1419,9 +1419,13 @@ onMounted(() => {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bar-chart-wrapper {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.progress-chart-wrapper {
|
||||
height: 280px;
|
||||
min-height: 280px;
|
||||
height: 200px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.region-distribution,
|
||||
|
||||
@@ -41,20 +41,20 @@
|
||||
<Icon icon="ep:close" />
|
||||
不通过
|
||||
</el-button>
|
||||
<!--
|
||||
<el-button type="primary" @click="openTaskUpdateAssigneeForm(item.id)">
|
||||
<Icon icon="ep:edit" />
|
||||
转办
|
||||
|
||||
<el-button type="primary" @click="handleCC(item)">
|
||||
<Icon icon="ep:position" />
|
||||
抄送
|
||||
</el-button>
|
||||
<el-button type="primary" @click="handleDelegate(item)">
|
||||
<!-- <el-button type="primary" @click="handleDelegate(item)">
|
||||
<Icon icon="ep:position" />
|
||||
委派
|
||||
</el-button>
|
||||
<el-button type="primary" @click="handleSign(item)">
|
||||
<Icon icon="ep:plus" />
|
||||
加签
|
||||
</el-button>
|
||||
-->
|
||||
</el-button> -->
|
||||
|
||||
<el-button type="warning" @click="handleBack(item)">
|
||||
<Icon icon="ep:back" />
|
||||
回退
|
||||
@@ -104,6 +104,7 @@
|
||||
<TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
|
||||
<!-- 加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
|
||||
<TaskAddSignDialogForm ref="taskAddSignDialogForm" @success="getDetail" />
|
||||
<TaskCCDialogForm ref="taskCCDialogForm" />
|
||||
</ContentWrap>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
@@ -121,6 +122,7 @@ import { registerComponent } from '@/utils/routerHelper'
|
||||
import { isEmpty } from '@/utils/is'
|
||||
import router from '@/router/index'
|
||||
import { $Print } from '@smallwei/avue'
|
||||
import TaskCCDialogForm from '../../processInstance/detail/TaskCCDialogForm.vue'
|
||||
|
||||
defineOptions({ name: 'BpmProcessInstanceDetail' })
|
||||
|
||||
@@ -175,6 +177,12 @@ const handleAudit = async (task, pass) => {
|
||||
getDetail()
|
||||
}
|
||||
|
||||
const taskCCDialogForm = ref()
|
||||
/** 处理抄送按钮 */
|
||||
const handleCC = (row) => {
|
||||
taskCCDialogForm.value.open(row)
|
||||
}
|
||||
|
||||
|
||||
|
||||
const printPage = async () => {
|
||||
|
||||
862
src/views/screen/powerMonitoring.vue
Normal file
862
src/views/screen/powerMonitoring.vue
Normal file
@@ -0,0 +1,862 @@
|
||||
<template>
|
||||
<div class="big-screen-container">
|
||||
<!-- 标题栏 -->
|
||||
<div class="screen-header">
|
||||
<h1 class="screen-title">动环监控大屏</h1>
|
||||
<div class="screen-datetime">{{ currentDateTime }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<div class="screen-content">
|
||||
<!-- 第一行：统计卡片 -->
|
||||
<div class="stats-row">
|
||||
<!-- 总设备数卡片 -->
|
||||
<div class="stat-card">
|
||||
<div class="card-title">总设备数</div>
|
||||
<div class="card-value">{{ totalDevices.toLocaleString() }}</div>
|
||||
<div class="card-trend growth">
|
||||
<svg class="trend-icon" viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor">
|
||||
<path d="M868 545.5L536.1 163a31.96 31.96 0 0 0-48.3 0L156 545.5a7.97 7.97 0 0 0 6 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z" />
|
||||
</svg>
|
||||
<span>较上月增长 {{ totalDevicesGrowth }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 在线设备数卡片 -->
|
||||
<div class="stat-card">
|
||||
<div class="card-title">在线设备数</div>
|
||||
<div class="card-value">{{ onlineDevices.toLocaleString() }}</div>
|
||||
<div class="card-trend online-rate">
|
||||
<span>在线率 {{ onlineRate }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二行：图表 -->
|
||||
<div class="charts-row">
|
||||
<!-- 告警趋势折线图 -->
|
||||
<div class="chart-card">
|
||||
<div class="chart-title">当月告警趋势</div>
|
||||
<div ref="alarmTrendChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- 设备类型分布饼图 -->
|
||||
<div class="chart-card">
|
||||
<div class="chart-title">告警设备类型分布</div>
|
||||
<div ref="deviceTypePieChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第三行：园区信息列表 -->
|
||||
<div class="table-row">
|
||||
<div class="table-card">
|
||||
<div class="table-title">园区信息列表</div>
|
||||
<el-table
|
||||
:data="parkList"
|
||||
:style="{ width: '100%' }"
|
||||
class="park-table"
|
||||
height="calc(100% - 50px)"
|
||||
:header-cell-style="{
|
||||
background: '#1a3a52',
|
||||
color: '#ffffff',
|
||||
borderBottom: '1px solid rgba(78, 155, 248, 0.15)',
|
||||
fontWeight: '500',
|
||||
padding: '12px 8px'
|
||||
}"
|
||||
:row-style="getRowStyle"
|
||||
:cell-style="{
|
||||
borderBottom: '1px solid rgba(78, 155, 248, 0.08)',
|
||||
color: '#ffffff',
|
||||
padding: '12px 8px'
|
||||
}"
|
||||
>
|
||||
<el-table-column prop="parkName" label="园区名称" min-width="200" align="left" />
|
||||
<el-table-column prop="totalDevices" label="设备总数" min-width="120" align="center">
|
||||
<template #default="{ row }">
|
||||
<span class="device-count">{{ row.totalDevices }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="upsStatus" label="UPS" min-width="140" align="center">
|
||||
<template #default="{ row }">
|
||||
<span :class="['status-text', row.upsStatus === '正常' ? 'status-normal' : 'status-alarm']">
|
||||
{{ row.upsStatus }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="airConditionStatus" label="精密空调" min-width="140" align="center">
|
||||
<template #default="{ row }">
|
||||
<span :class="['status-text', row.airConditionStatus === '正常' ? 'status-normal' : 'status-alarm']">
|
||||
{{ row.airConditionStatus }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="temperatureStatus" label="温湿度" min-width="140" align="center">
|
||||
<template #default="{ row }">
|
||||
<span :class="['status-text', row.temperatureStatus === '正常' ? 'status-normal' : 'status-alarm']">
|
||||
{{ row.temperatureStatus }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="otherStatus" label="其他" min-width="140" align="center">
|
||||
<template #default="{ row }">
|
||||
<span :class="['status-text', row.otherStatus === '正常' ? 'status-normal' : 'status-alarm']">
|
||||
{{ row.otherStatus }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="详情" min-width="180" align="center">
|
||||
<template #default="{ row }">
|
||||
<a
|
||||
:class="['detail-link', row.hasAlarm ? 'detail-alarm' : 'detail-normal']"
|
||||
@click="handleViewDetail(row)"
|
||||
>
|
||||
<span v-if="row.hasAlarm" class="alarm-badge">异常</span>
|
||||
<span v-else class="normal-badge">正常</span>
|
||||
查看详情
|
||||
</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import type { EChartsOption } from 'echarts';
|
||||
|
||||
// 定义园区信息类型
|
||||
interface ParkInfo {
|
||||
key: string;
|
||||
parkName: string;
|
||||
totalDevices: number;
|
||||
upsStatus: string;
|
||||
airConditionStatus: string;
|
||||
temperatureStatus: string | number;
|
||||
otherStatus: string;
|
||||
hasAlarm: boolean;
|
||||
}
|
||||
|
||||
// 当前日期时间
|
||||
const currentDateTime = ref('');
|
||||
|
||||
// 统计数据
|
||||
const totalDevices = ref(1286);
|
||||
const totalDevicesGrowth = ref(5.2);
|
||||
const onlineDevices = ref(1254);
|
||||
const onlineRate = ref(97.5);
|
||||
|
||||
// 图表引用
|
||||
const alarmTrendChartRef = ref<HTMLDivElement>();
|
||||
const deviceTypePieChartRef = ref<HTMLDivElement>();
|
||||
|
||||
// 图表实例
|
||||
let alarmTrendChart: echarts.ECharts | null = null;
|
||||
let deviceTypePieChart: echarts.ECharts | null = null;
|
||||
|
||||
// 告警趋势数据
|
||||
const alarmTrendData = ref({
|
||||
dates: ['5日', '10日', '15日', '20日', '25日', '30日'],
|
||||
values: [8, 4, 20, 16, 21, 9]
|
||||
});
|
||||
|
||||
// 设备类型分布数据
|
||||
const deviceTypeData = ref([
|
||||
{ name: 'UPS', value: 35 },
|
||||
{ name: '精密空调', value: 25 },
|
||||
{ name: '温湿度检测', value: 20 },
|
||||
{ name: '其他', value: 20 }
|
||||
]);
|
||||
|
||||
// 园区信息列表数据
|
||||
const parkList = ref<ParkInfo[]>([
|
||||
{
|
||||
key: '1',
|
||||
parkName: '雄安总部',
|
||||
totalDevices: 156,
|
||||
upsStatus: '3个告警',
|
||||
airConditionStatus: '正常',
|
||||
temperatureStatus: '正常',
|
||||
otherStatus: '正常',
|
||||
hasAlarm: true
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
parkName: '恒毅大厦',
|
||||
totalDevices: 98,
|
||||
upsStatus: '正常',
|
||||
airConditionStatus: '正常',
|
||||
temperatureStatus: '正常',
|
||||
otherStatus: '正常',
|
||||
hasAlarm: false
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
parkName: '丰台创新中心',
|
||||
totalDevices: 124,
|
||||
upsStatus: '正常',
|
||||
airConditionStatus: '正常',
|
||||
temperatureStatus: '正常',
|
||||
otherStatus: '正常',
|
||||
hasAlarm: false
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
parkName: '重庆产业大厦',
|
||||
totalDevices: 92,
|
||||
upsStatus: '正常',
|
||||
airConditionStatus: '2个告警',
|
||||
temperatureStatus: '正常',
|
||||
otherStatus: '正常',
|
||||
hasAlarm: true
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
parkName: '海南园区',
|
||||
totalDevices: 78,
|
||||
upsStatus: '正常',
|
||||
airConditionStatus: '正常',
|
||||
temperatureStatus: '正常',
|
||||
otherStatus: '正常',
|
||||
hasAlarm: false
|
||||
},
|
||||
{
|
||||
key: '6',
|
||||
parkName: '崇左地面站',
|
||||
totalDevices: 64,
|
||||
upsStatus: '正常',
|
||||
airConditionStatus: '正常',
|
||||
temperatureStatus: '正常',
|
||||
otherStatus: '正常',
|
||||
hasAlarm: false
|
||||
},
|
||||
{
|
||||
key: '7',
|
||||
parkName: '铜川地面站',
|
||||
totalDevices: 58,
|
||||
upsStatus: '正常',
|
||||
airConditionStatus: '正常',
|
||||
temperatureStatus: '正常',
|
||||
otherStatus: '正常',
|
||||
hasAlarm: false
|
||||
},
|
||||
{
|
||||
key: '8',
|
||||
parkName: '佳木斯地面站',
|
||||
totalDevices: 72,
|
||||
upsStatus: '正常',
|
||||
airConditionStatus: '正常',
|
||||
temperatureStatus: '正常',
|
||||
otherStatus: '正常',
|
||||
hasAlarm: false
|
||||
},
|
||||
{
|
||||
key: '9',
|
||||
parkName: '库尔勒地面站',
|
||||
totalDevices: 68,
|
||||
upsStatus: '正常',
|
||||
airConditionStatus: '正常',
|
||||
temperatureStatus: '正常',
|
||||
otherStatus: '正常',
|
||||
hasAlarm: false
|
||||
},
|
||||
{
|
||||
key: '10',
|
||||
parkName: '澄迈地面站',
|
||||
totalDevices: 56,
|
||||
upsStatus: '正常',
|
||||
airConditionStatus: '正常',
|
||||
temperatureStatus: '正常',
|
||||
otherStatus: '正常',
|
||||
hasAlarm: false
|
||||
},
|
||||
{
|
||||
key: '11',
|
||||
parkName: '文昌地面站',
|
||||
totalDevices: 60,
|
||||
upsStatus: '正常',
|
||||
airConditionStatus: '正常',
|
||||
temperatureStatus: '正常',
|
||||
otherStatus: '正常',
|
||||
hasAlarm: false
|
||||
}
|
||||
]);
|
||||
|
||||
// 更新日期时间
|
||||
const updateDateTime = () => {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(now.getDate()).padStart(2, '0');
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(now.getSeconds()).padStart(2, '0');
|
||||
currentDateTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
};
|
||||
|
||||
// 初始化告警趋势图表
|
||||
const initAlarmTrendChart = () => {
|
||||
if (!alarmTrendChartRef.value) return;
|
||||
|
||||
alarmTrendChart = echarts.init(alarmTrendChartRef.value);
|
||||
|
||||
const option: EChartsOption = {
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '8%',
|
||||
right: '5%',
|
||||
bottom: '12%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: alarmTrendData.value.dates,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#3a5165'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#8b9bb3',
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1e3a52',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 25,
|
||||
interval: 5,
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#8b9bb3',
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#1e3a52',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: alarmTrendData.value.values,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: '#4e9bf8',
|
||||
width: 2
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#4e9bf8',
|
||||
borderWidth: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(78, 155, 248, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(78, 155, 248, 0.05)' }
|
||||
]
|
||||
}
|
||||
},
|
||||
markPoint: {
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#ff5555',
|
||||
borderWidth: 2,
|
||||
borderColor: '#ff5555'
|
||||
},
|
||||
data: [
|
||||
{ name: '峰值1', coord: [2, 20] }, // 15日的告警峰值
|
||||
{ name: '峰值2', coord: [4, 21] } // 25日的告警峰值
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
alarmTrendChart.setOption(option);
|
||||
};
|
||||
|
||||
// 初始化设备类型分布饼图
|
||||
const initDeviceTypePieChart = () => {
|
||||
if (!deviceTypePieChartRef.value) return;
|
||||
|
||||
deviceTypePieChart = echarts.init(deviceTypePieChartRef.value);
|
||||
|
||||
const total = deviceTypeData.value.reduce((sum, item) => sum + item.value, 0);
|
||||
|
||||
const option: EChartsOption = {
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: '10%',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 13
|
||||
},
|
||||
formatter: (name: string) => {
|
||||
const item = deviceTypeData.value.find(d => d.name === name);
|
||||
return `${name} (${item?.value || 0})`;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['45%', '70%'],
|
||||
center: ['35%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: () => {
|
||||
return `{value|${total}}\n{label|告警}`;
|
||||
},
|
||||
rich: {
|
||||
value: {
|
||||
color: '#ffffff',
|
||||
fontSize: 28,
|
||||
fontWeight: 'bold',
|
||||
lineHeight: 40
|
||||
},
|
||||
label: {
|
||||
color: '#8b9bb3',
|
||||
fontSize: 14,
|
||||
lineHeight: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: deviceTypeData.value.map((item, index) => {
|
||||
const colors = ['#4e9bf8', '#52c41a', '#fa8c16', '#8c8c8c'];
|
||||
return {
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
itemStyle: {
|
||||
color: colors[index]
|
||||
}
|
||||
};
|
||||
})
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
deviceTypePieChart.setOption(option);
|
||||
};
|
||||
|
||||
// 获取行样式（条纹效果）
|
||||
const getRowStyle = ({ rowIndex }: { rowIndex: number }) => {
|
||||
if (rowIndex % 2 === 0) {
|
||||
return {
|
||||
background: 'rgba(78, 155, 248, 0.03)',
|
||||
color: '#ffffff'
|
||||
};
|
||||
}
|
||||
return {
|
||||
background: 'transparent',
|
||||
color: '#ffffff'
|
||||
};
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
const handleViewDetail = (record: ParkInfo) => {
|
||||
console.log('查看园区详情:', record);
|
||||
// TODO: 实现详情页面跳转或弹窗
|
||||
};
|
||||
|
||||
// 定时器
|
||||
let dateTimeTimer: number | null = null;
|
||||
|
||||
// 组件挂载
|
||||
onMounted(() => {
|
||||
// 更新日期时间
|
||||
updateDateTime();
|
||||
dateTimeTimer = window.setInterval(updateDateTime, 1000);
|
||||
|
||||
// 初始化图表
|
||||
setTimeout(() => {
|
||||
initAlarmTrendChart();
|
||||
initDeviceTypePieChart();
|
||||
}, 100);
|
||||
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
// 组件卸载
|
||||
onBeforeUnmount(() => {
|
||||
if (dateTimeTimer) {
|
||||
clearInterval(dateTimeTimer);
|
||||
}
|
||||
if (alarmTrendChart) {
|
||||
alarmTrendChart.dispose();
|
||||
}
|
||||
if (deviceTypePieChart) {
|
||||
deviceTypePieChart.dispose();
|
||||
}
|
||||
window.removeEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
// 处理窗口大小变化
|
||||
const handleResize = () => {
|
||||
alarmTrendChart?.resize();
|
||||
deviceTypePieChart?.resize();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.big-screen-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #0a1929 0%, #0d1e2f 100%);
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// 标题栏
|
||||
.screen-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 10px;
|
||||
|
||||
.screen-title {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.screen-datetime {
|
||||
font-size: 18px;
|
||||
color: #8b9bb3;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
}
|
||||
|
||||
// 主要内容区域
|
||||
.screen-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
// 统计卡片行
|
||||
.stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: linear-gradient(135deg, #1a2940 0%, #0f1e2d 100%);
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(78, 155, 248, 0.1);
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
color: #8b9bb3;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
margin-bottom: 12px;
|
||||
font-family: 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.card-trend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
|
||||
&.growth {
|
||||
color: #52c41a;
|
||||
|
||||
.trend-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.online-rate {
|
||||
color: #13c2c2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 图表行
|
||||
.charts-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
background: linear-gradient(135deg, #1a2940 0%, #0f1e2d 100%);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(78, 155, 248, 0.1);
|
||||
height: 350px;
|
||||
|
||||
.chart-title {
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
// 表格行
|
||||
.table-row {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
background: linear-gradient(135deg, #1a2940 0%, #0f1e2d 100%);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(78, 155, 248, 0.1);
|
||||
height: 450px;
|
||||
|
||||
.table-title {
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.park-table) {
|
||||
background: transparent !important;
|
||||
|
||||
// 表格主体背景
|
||||
.el-table__inner-wrapper {
|
||||
background: transparent !important;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__body-wrapper {
|
||||
background: transparent !important;
|
||||
|
||||
// 滚动条样式
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(78, 155, 248, 0.3) transparent;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(78, 155, 248, 0.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__header-wrapper,
|
||||
.el-table__footer-wrapper {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
// 表格行悬浮效果
|
||||
.el-table__row {
|
||||
&:hover > td {
|
||||
background: rgba(78, 155, 248, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 空数据样式
|
||||
.el-table__empty-block {
|
||||
background: transparent !important;
|
||||
|
||||
.el-table__empty-text {
|
||||
color: #8b9bb3;
|
||||
}
|
||||
}
|
||||
|
||||
.device-count {
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
|
||||
&.status-normal {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&.status-alarm {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-link {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
color: #4e9bf8;
|
||||
|
||||
.alarm-badge,
|
||||
.normal-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.alarm-badge {
|
||||
background: #ff4d4f;
|
||||
}
|
||||
|
||||
.normal-badge {
|
||||
background: #52c41a;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式布局
|
||||
@media screen and (max-width: 1600px) {
|
||||
.screen-header {
|
||||
.screen-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.screen-datetime {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 25px;
|
||||
|
||||
.card-value {
|
||||
font-size: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
.screen-header {
|
||||
.screen-title {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.screen-datetime {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 20px;
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
.card-trend {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
height: 300px;
|
||||
padding: 15px;
|
||||
|
||||
.chart-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-card {
|
||||
height: 380px;
|
||||
padding: 15px;
|
||||
|
||||
.table-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 仅在非常小的屏幕（小于1024px）才改为单列
|
||||
@media screen and (max-width: 1024px) {
|
||||
.stats-row,
|
||||
.charts-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
height: 360px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -32,7 +32,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
|
||||
// 本地跨域代理. 目前注释的原因：暂时没有用途，server 端已经支持跨域
|
||||
proxy: {
|
||||
['/admin-api']: {
|
||||
target: 'http://10.28.117.100:48080',
|
||||
target: 'http://10.28.117.48:48080',
|
||||
ws: false,
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(new RegExp(`^/admin-api`), ''),
|
||||
|
||||
Reference in New Issue
Block a user