Merge branch 'main' of http://47.107.152.87:3000/liubiao/dyf-vue-ui
This commit is contained in:
liub
@ -5,8 +5,8 @@ VITE_APP_TITLE = 云平台管理系统
|
||||
VITE_APP_ENV = 'development'
|
||||
|
||||
# 开发环境
|
||||
VITE_APP_BASE_API = 'https://fuyuanshen.com/backend'
|
||||
#VITE_APP_BASE_API = 'http://192.168.2.23:8000'
|
||||
#VITE_APP_BASE_API = 'https://fuyuanshen.com/backend'
|
||||
VITE_APP_BASE_API = 'http://192.168.2.23:8000'
|
||||
|
||||
#代永飞接口
|
||||
#VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'
|
||||
|
||||
174
dyf-vue-ui/src/views/homeIndex/index.vue
Normal file
174
dyf-vue-ui/src/views/homeIndex/index.vue
Normal file
@ -0,0 +1,174 @@
|
||||
|
||||
<style scoped>
|
||||
.dashboard-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: radial-gradient( 0% 0% at 0% 0%, #091B2D 0%, #0C2644 100%), #267AD0;
|
||||
}
|
||||
|
||||
/* 全屏地图 - 背景图层 */
|
||||
.fullscreen-map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 顶部栏 */
|
||||
.top-bar {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
background-color: rgba(74, 85, 104, 0.9);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.top-bar h1 {
|
||||
font-size: 18px;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-info span {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 悬浮模块容器 */
|
||||
.floating-modules {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 60px); /* 减去顶部栏高度 */
|
||||
z-index: 5;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.left-modules,
|
||||
.right-modules {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.bottom-middle-module {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.module-card {
|
||||
background-color: rgba(107, 114, 128, 0.9);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.module-card:hover {
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.module-header {
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(90deg, #3b82f6, #60a5fa);
|
||||
}
|
||||
|
||||
.module-header::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
border-radius: 2px;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.module-content {
|
||||
padding: 14px;
|
||||
color: #e5e7eb;
|
||||
font-size: 13px;
|
||||
height: calc(100% - 36px);
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.overview-card .module-header::before { background-color: #3b82f6; }
|
||||
.alarm-card .module-header::before { background-color: #ef4444; }
|
||||
.realtime-card .module-header::before { background-color: #f97316; }
|
||||
.module-card:nth-child(2) .module-header::before { background-color: #8b5cf6; }
|
||||
.module-card:nth-child(3) .module-header::before { background-color: #06b6d4; }
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.left-modules,
|
||||
.right-modules {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.left-modules,
|
||||
.right-modules {
|
||||
width: 100%;
|
||||
}
|
||||
.bottom-middle-module {
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.left-modules,
|
||||
.right-modules {
|
||||
width: 100%;
|
||||
}
|
||||
.bottom-middle-module {
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.left-modules,
|
||||
.right-modules {
|
||||
width: 100%;
|
||||
}
|
||||
.bottom-middle-module {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
59
src/api/homeIndex/index.ts
Normal file
59
src/api/homeIndex/index.ts
Normal file
@ -0,0 +1,59 @@
|
||||
import request from '@/utils/request';
|
||||
// 获取设备总览 DataOverview
|
||||
export const getDeviceOverview = (params) => {
|
||||
return request({
|
||||
url: '/api/largeScreen/getDeviceOverview',
|
||||
method: 'get',
|
||||
params: params
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 报警事件，报警总数统计
|
||||
export const getAlarmStatistics = (params) => {
|
||||
return request({
|
||||
url: '/api/largeScreen/getAlarmStatistics',
|
||||
method: 'get',
|
||||
params: params
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 报警次数
|
||||
export const getMonthlyAlarmStatistics = (params) => {
|
||||
return request({
|
||||
url: '/api/largeScreen/getMonthlyAlarmStatistics',
|
||||
method: 'get',
|
||||
params: params
|
||||
});
|
||||
}
|
||||
|
||||
// 设备类别
|
||||
export const getDeviceCommunicationModeStatistics = (params = {}) => {
|
||||
return request({
|
||||
url: '/api/largeScreen/getDeviceCommunicationModeStatistics',
|
||||
method: 'get',
|
||||
params: params
|
||||
});
|
||||
}
|
||||
|
||||
// 设备使用频次
|
||||
export const getDeviceUsageFrequency = (params = {}) => {
|
||||
return request({
|
||||
url: '/api/largeScreen/getDeviceUsageFrequency',
|
||||
method: 'get',
|
||||
params: params
|
||||
});
|
||||
}
|
||||
|
||||
// 实时报警
|
||||
export const getRealtimeAlarm = (params = {}) => {
|
||||
return request({
|
||||
url: '/api/largeScreen/getRealtimeAlarm',
|
||||
method: 'get',
|
||||
params: params
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
0
src/api/homeIndex/types.ts
Normal file
0
src/api/homeIndex/types.ts
Normal file
BIN
src/assets/homeIndex/alarmIMG.png
Normal file
BIN
src/assets/homeIndex/alarmIMG.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/assets/homeIndex/btn.png
Normal file
BIN
src/assets/homeIndex/btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
src/assets/homeIndex/btn_cur.png
Normal file
BIN
src/assets/homeIndex/btn_cur.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
src/assets/homeIndex/card.png
Normal file
BIN
src/assets/homeIndex/card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
src/assets/homeIndex/deviceIMG.png
Normal file
BIN
src/assets/homeIndex/deviceIMG.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
src/assets/homeIndex/nav.png
Normal file
BIN
src/assets/homeIndex/nav.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
@ -39,6 +39,12 @@ export const constantRoutes: RouteRecordRaw[] = [
|
||||
component: () => import('@/views/error/401.vue'),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: "/homeIndex",
|
||||
name: "HomeIndex",
|
||||
component: () => import("@/views/homeIndex/index.vue"),
|
||||
meta: {title: '数据大屏', icon: 'dashboard', preload: true, keepAlive: true },
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: Layout,
|
||||
@ -48,10 +54,11 @@ export const constantRoutes: RouteRecordRaw[] = [
|
||||
path: '/index',
|
||||
component: () => import('@/views/index.vue'),
|
||||
name: 'Index',
|
||||
meta: { title: '首页', icon: 'dashboard', affix: true,keepAlive: false }
|
||||
meta: { title: '首页', icon: 'dashboard', affix: true, keepAlive: false }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/user',
|
||||
component: Layout,
|
||||
|
||||
@ -56,8 +56,8 @@
|
||||
</el-col>
|
||||
|
||||
<el-col :span="1.5">
|
||||
<el-button v-hasPermi="['equipment:devices:export']" type="warning" plain
|
||||
icon="Download" @click="handleExport">导出</el-button>
|
||||
<el-button v-hasPermi="['equipment:devices:export']" type="warning" plain icon="Download"
|
||||
@click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button v-hasPermi="['equipment:devices:remove']" type="danger" plain :disabled="multiple"
|
||||
@ -90,7 +90,7 @@
|
||||
<img v-if="scope.row.devicePic" :src="scope.row.devicePic"
|
||||
style="width: 40px; height: 40px; cursor: pointer; object-fit: contain"
|
||||
class="hover:opacity-80 transition-opacity" />
|
||||
<img v-else src="@/assets/index/IMG.png" alt="" style="width: 40px; height: 40px;">
|
||||
<img v-else src="@/assets/index/IMG.png" alt="" style="width: 40px; height: 40px;">
|
||||
</template>
|
||||
<img :src="scope.row.devicePic" style="max-width: 600px; max-height: 600px; object-fit: contain" />
|
||||
</el-popover>
|
||||
@ -517,7 +517,7 @@ const handleExport = () => {
|
||||
{
|
||||
...queryParams.value
|
||||
},
|
||||
`${new Date().getTime()}.xlsx`,
|
||||
`设备列表${new Date().getTime()}.xlsx`,
|
||||
'get'
|
||||
);
|
||||
};
|
||||
@ -913,12 +913,19 @@ const beforeImportUpload = (file: any) => {
|
||||
const head_upload = () => getBearerToken();
|
||||
const handleImportSuccess = (response: any) => {
|
||||
if (response.code == 200) {
|
||||
console.log('导入成功了么');
|
||||
importResult.value.isShow = true;
|
||||
|
||||
if (response.data) {
|
||||
importResult.value.succeed = response.data.successCount || 0;
|
||||
importResult.value.errorSun = response.data.failureCount || 0;
|
||||
console.log(response.data,'response.data');
|
||||
|
||||
importResult.value.succeed = response.data.successCount;
|
||||
importResult.value.errorSun = response.data.failureCount;
|
||||
importResult.value.total = importResult.value.succeed + importResult.value.errorSun;
|
||||
importResult.value.link = response.data.errorExcelUrl || '';
|
||||
importResult.value.link = response.data.errorExcelUrl;
|
||||
}
|
||||
if (importUpload.value) {
|
||||
importUpload.value.clearFiles();
|
||||
}
|
||||
getList(); // 初始化列表数据
|
||||
} else {
|
||||
|
||||
139
src/views/homeIndex/components/AlarmCount.vue
Normal file
139
src/views/homeIndex/components/AlarmCount.vue
Normal file
@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div class="vchartPage">
|
||||
<div ref="chartRef" class="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts'
|
||||
import { getMonthlyAlarmStatistics } from '@/api/homeIndex';
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
onMounted(() => {
|
||||
if (chartRef.value) {
|
||||
const myChart = echarts.init(chartRef.value);
|
||||
getMonthlyAlarmStatistics({}).then((res) => {
|
||||
const monthlyData = res.data.monthlyStatistics || {};
|
||||
// 提取1-12月数据并转为数字
|
||||
const alarmData = [
|
||||
monthlyData.m1,
|
||||
monthlyData.m2,
|
||||
monthlyData.m3,
|
||||
monthlyData.m4,
|
||||
monthlyData.m5,
|
||||
monthlyData.m6,
|
||||
monthlyData.m7,
|
||||
monthlyData.m8,
|
||||
monthlyData.m9,
|
||||
monthlyData.m10,
|
||||
monthlyData.m11,
|
||||
monthlyData.m12
|
||||
].map(Number);
|
||||
|
||||
const maxValue = Math.max(...alarmData);
|
||||
const maxIndex = alarmData.indexOf(maxValue);
|
||||
const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '10%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: months,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.2)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF',
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF',
|
||||
fontSize: 12,
|
||||
formatter: '{value}'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
boundaryGap: [0, '30%']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
data: alarmData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
emphasis: {
|
||||
showSymbol: true,
|
||||
symbolSize: 8
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#22E1DB',
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(34,225,219, 0.6)' },
|
||||
{ offset: 1, color: 'rgba(34,225,219, 0)' }
|
||||
])
|
||||
},
|
||||
itemStyle: {
|
||||
color: (params) => {
|
||||
if (params.dataIndex === maxIndex) {
|
||||
return '#fff'; // 最大值的点标为白色
|
||||
}
|
||||
return '#22E1DB';
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: (params) => params.dataIndex === maxIndex,
|
||||
position: 'top',
|
||||
color: '#22E1DB',
|
||||
formatter: '{c}', // 显示当前数据值
|
||||
fontSize: 12,
|
||||
}
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
}).catch(err => {
|
||||
});
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.vchartPage {
|
||||
margin-top: 7.4vh;
|
||||
}
|
||||
|
||||
.chartRef {
|
||||
width: 100%;
|
||||
height: 24vh;
|
||||
}
|
||||
</style>
|
||||
140
src/views/homeIndex/components/AlarmEvent.vue
Normal file
140
src/views/homeIndex/components/AlarmEvent.vue
Normal file
@ -0,0 +1,140 @@
|
||||
<template>
|
||||
|
||||
<!-- 图表容器，设置宽高 -->
|
||||
<div class="vchartPage">
|
||||
<div ref="chartRef" class="chartRef"></div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts'; // 引入 ECharts
|
||||
const chartRef = ref<HTMLDivElement | null>(null); // 图表容器的 ref
|
||||
const echartData = ref<any>({});
|
||||
const props = defineProps({
|
||||
alarmOverview: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
watch(() => props.alarmOverview, (newVal) => {
|
||||
echartData.value = newVal;
|
||||
console.log('newVal:', newVal);
|
||||
}, { immediate: true, deep: true });
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
if (chartRef.value) {
|
||||
const {
|
||||
forcedAlarms,
|
||||
intrusionImpactAlarms,
|
||||
autoAlarms,
|
||||
geoFenceAlarms
|
||||
} = echartData.value;
|
||||
// 初始化 ECharts 实例
|
||||
const myChart = echarts.init(chartRef.value);
|
||||
// 配置图表参数
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis', // 触发方式：坐标轴触发
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
containLabel: true, // 网格包含坐标轴标签
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['强制报警', '撞击闯入', '自动报警', '电子围栏告警'], // X 轴类目
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)', // X 轴线颜色
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF', // X 轴文字颜色
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#1e3a8a', // Y 轴线颜色
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF', // Y 轴标签文字颜色
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)', // Y 轴分割
|
||||
type: 'dashed', // 分割线为虚线
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '报警次数',
|
||||
type: 'bar',
|
||||
data: [forcedAlarms, intrusionImpactAlarms, autoAlarms, geoFenceAlarms],
|
||||
barWidth: '20px', // 柱子宽度
|
||||
// 为不同柱子设置渐变色
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
const colorList = [
|
||||
// 强制报警：蓝色渐变
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#0F3352' },
|
||||
{ offset: 1, color: '#00A8FF' },
|
||||
]),
|
||||
// 撞击闯入：黄色渐变
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#0F3352' },
|
||||
{ offset: 1, color: '#E4B90C' },
|
||||
]),
|
||||
// 自动报警：青蓝渐变
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#0F3352' },
|
||||
{ offset: 1, color: '#15DBCB' },
|
||||
]),
|
||||
// 电子围栏告警：红色渐变
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#0F3352' },
|
||||
{ offset: 1, color: '#F00C0C' },
|
||||
]),
|
||||
];
|
||||
return colorList[params.dataIndex];
|
||||
},
|
||||
borderRadius: 4
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 将配置项设置到图表实例
|
||||
myChart.setOption(option);
|
||||
|
||||
// 窗口resize时，图表自适应
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
}, 200)
|
||||
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.vchartPage {
|
||||
margin-top: 7.2vh;
|
||||
}
|
||||
|
||||
.chartRef {
|
||||
width: 100%;
|
||||
height: 23vh;
|
||||
}
|
||||
</style>
|
||||
81
src/views/homeIndex/components/AlarmOverview.vue
Normal file
81
src/views/homeIndex/components/AlarmOverview.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="alarmOvery">
|
||||
<div class="alarm">
|
||||
<div class="alarmIMG">
|
||||
<div class="alarmNum">{{ alarmOverview.activeAlarms || '0' }} <span>个</span></div>
|
||||
</div>
|
||||
<div class="alarmText">正在报警</div>
|
||||
</div>
|
||||
|
||||
<div class="alarm">
|
||||
<div class="alarmIMG">
|
||||
<div class="alarmNum">{{ alarmOverview.totalAlarms || '0' }} <span>个</span></div>
|
||||
</div>
|
||||
<div class="alarmText">报警总数</div>
|
||||
</div>
|
||||
<div class="alarm">
|
||||
<div class="alarmIMG">
|
||||
<div class="alarmNum">{{ alarmOverview.processedAlarms || '0' }} <span>个</span></div>
|
||||
</div>
|
||||
<div class="alarmText">已处理</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
alarmOverview: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.alarmOvery {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
margin-top: 7.5vh;
|
||||
text-align: center;
|
||||
font-size: 0.7vw;
|
||||
color: #DEEFFF;
|
||||
padding: 1.5vw;
|
||||
}
|
||||
|
||||
.alarmIMG {
|
||||
width: 12vh;
|
||||
height: 12vh;
|
||||
background: url(@/assets/homeIndex/alarmIMG.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.alarmText {
|
||||
padding-top: 1.5vh;
|
||||
}
|
||||
|
||||
.alarmNum {
|
||||
line-height: 12vh;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
background: radial-gradient(circle at center, #F63838 0%, #FFFFFF 49%);
|
||||
/* 兼容写法 */
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
font-size: 1.3vw;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.alarmNum span {
|
||||
font-size: 0.6vw;
|
||||
}
|
||||
</style>
|
||||
120
src/views/homeIndex/components/DeviceCategory.vue
Normal file
120
src/views/homeIndex/components/DeviceCategory.vue
Normal file
@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div class="vchartPage">
|
||||
<div ref="chartRef" class="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { getDeviceCommunicationModeStatistics } from '@/api/homeIndex/index';
|
||||
import * as echarts from 'echarts';
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
onMounted(() => {
|
||||
if (chartRef.value) {
|
||||
const myChart = echarts.init(chartRef.value);
|
||||
|
||||
getDeviceCommunicationModeStatistics().then((res) => {
|
||||
console.log(res, '接口数据');
|
||||
const dataList = res.data || [];
|
||||
// 1.（通信方式名称）
|
||||
const xAxisData = dataList.map(item => item.communicationModeName);
|
||||
// 2. 总数数据
|
||||
const totalData = dataList.map(item => item.totalDevices);
|
||||
// 3. 异常数数据
|
||||
const abnormalData = dataList.map(item => item.abnormalDevices);
|
||||
// 图表配置）
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' }
|
||||
},
|
||||
legend: {
|
||||
data: ['总数', '异常'],
|
||||
right: '20px',
|
||||
textStyle: { color: '#DEEFFF' },
|
||||
itemWidth: 12,
|
||||
itemHeight: 12
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisLine: {
|
||||
lineStyle: { color: 'rgba(255,255,255,0.1)' }
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: { show: false },
|
||||
axisLabel: { color: '#fff' },
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '总数',
|
||||
type: 'bar',
|
||||
data: totalData,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: 'rgba(0,166,255,1)' },
|
||||
{ offset: 1, color: 'rgba(0,125,221, 0.6)' }
|
||||
]
|
||||
),
|
||||
borderRadius: 4
|
||||
},
|
||||
barWidth: '20px'
|
||||
},
|
||||
{
|
||||
name: '异常',
|
||||
type: 'bar',
|
||||
data: abnormalData,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: 'rgba(232,69,37,1)' },
|
||||
{ offset: 1, color: 'rgba(240,12,12, 0.6)' }
|
||||
]
|
||||
),
|
||||
borderRadius: 4
|
||||
},
|
||||
barWidth: '20px'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
}).catch(err => {
|
||||
console.log('获取数据失败', err);
|
||||
});
|
||||
// 窗口 resize 时自适应
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.vchartPage {
|
||||
margin-top: 7.8vh;
|
||||
}
|
||||
|
||||
.chartRef {
|
||||
width: 100%;
|
||||
height: 22vh;
|
||||
}
|
||||
</style>
|
||||
81
src/views/homeIndex/components/DeviceOverview.vue
Normal file
81
src/views/homeIndex/components/DeviceOverview.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="deviceOvery">
|
||||
<div class="alarm">
|
||||
<div class="deviceIMG">
|
||||
<div class="deviceNum">{{DataOverview.totalDevices || '0'}} <span>个</span></div>
|
||||
</div>
|
||||
<div class="deviceText">设备总数</div>
|
||||
</div>
|
||||
|
||||
<div class="alarm">
|
||||
<div class="deviceIMG">
|
||||
<div class="deviceNum">{{DataOverview.onlineDevices || '0'}} <span>个</span></div>
|
||||
</div>
|
||||
<div class="deviceText">在线数量</div>
|
||||
</div>
|
||||
<div class="alarm">
|
||||
<div class="deviceIMG">
|
||||
<div class="deviceNum">{{DataOverview.deviceTypes || '0'}} <span>种</span></div>
|
||||
</div>
|
||||
<div class="deviceText">设备型号</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { getDeviceOverview } from '@/api/homeIndex'
|
||||
const DataOverview = ref<any>({})
|
||||
onMounted(() => {
|
||||
getDeviceOverview({}).then((res) => {
|
||||
if (res.code==200) {
|
||||
DataOverview.value = res.data
|
||||
}
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.deviceOvery {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
margin-top: 7.5vh;
|
||||
text-align: center;
|
||||
font-size:0.7vw;
|
||||
color: #DEEFFF;
|
||||
padding: 1.5vw;
|
||||
}
|
||||
|
||||
.deviceIMG {
|
||||
width: 12vh;
|
||||
height: 12vh;
|
||||
background: url(@/assets/homeIndex/deviceIMG.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
.deviceText{
|
||||
padding-top: 1.5vh;
|
||||
}
|
||||
|
||||
.deviceNum{
|
||||
line-height: 12vh;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
background: radial-gradient(circle at center, #00FCFF 0%, #FFFFFF 49%);
|
||||
/* 兼容写法 */
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
font-size: 1.3vw;
|
||||
font-weight: 600;
|
||||
}
|
||||
.deviceNum span{
|
||||
font-size: 0.6vw;
|
||||
}
|
||||
</style>
|
||||
158
src/views/homeIndex/components/DeviceUsage.vue
Normal file
158
src/views/homeIndex/components/DeviceUsage.vue
Normal file
@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="vchartPage">
|
||||
<div class="btn_mounth_box">
|
||||
<div class="btn_mounth" :class="{ cur: activeTab == 'month' }" @click="switchTab('month')">近一月</div>
|
||||
<div class="btn_mounth" :class="{ cur: activeTab === 'halfYear' }" @click="switchTab('halfYear')">近半年</div>
|
||||
</div>
|
||||
|
||||
<div ref="chartRef" class="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts';
|
||||
import { getDeviceUsageFrequency } from '@/api/homeIndex/index';
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
const activeTab = ref('month');
|
||||
let myChart: echarts.ECharts | null = null; // 保存图表实例
|
||||
|
||||
// 根据天数获取数据并更新图表
|
||||
const fetchDataAndUpdate = (days: number) => {
|
||||
getDeviceUsageFrequency({ days }).then((res) => {
|
||||
if (res.code === 200 && res.data && myChart) {
|
||||
// 处理接口返回的真实数据（转换为图表所需格式）
|
||||
const chartData = res.data.map(item => ({
|
||||
name: item.deviceName,
|
||||
value: item.frequency
|
||||
}));
|
||||
// 更新图表
|
||||
myChart.setOption({
|
||||
yAxis: {
|
||||
data: chartData.map(item => item.name)
|
||||
},
|
||||
series: [{
|
||||
data: chartData.map(item => item.value)
|
||||
}]
|
||||
});
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('获取数据失败', err);
|
||||
});
|
||||
};
|
||||
|
||||
// 切换标签逻辑
|
||||
const switchTab = (tab: string) => {
|
||||
activeTab.value = tab;
|
||||
// 根据标签切换天数（近半月=15天，近半年=180天，按实际需求调整）
|
||||
const days = tab === 'month' ? 30 : 180;
|
||||
fetchDataAndUpdate(days);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (chartRef.value) {
|
||||
// 初始化图表实例
|
||||
myChart = echarts.init(chartRef.value);
|
||||
|
||||
// 初始图表配置（空数据占位）
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' } // 柱状图建议使用阴影指示器
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '10%',
|
||||
bottom: '3%',
|
||||
top: '20%',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: [], // 初始空数据
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#1e3a8a',
|
||||
show: false
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLine: { show: false },
|
||||
axisLabel: { show: false },
|
||||
splitLine: { show: false }
|
||||
},
|
||||
series: [{
|
||||
name: '使用频次',
|
||||
type: 'bar',
|
||||
data: [], // 初始空数据
|
||||
barWidth: '14px',
|
||||
stack: 'total',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
valueAnimation: true,
|
||||
color: '#DEEFFF'
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 1, 0,
|
||||
[
|
||||
{ offset: 0, color: '#0768D4' },
|
||||
{ offset: 1, color: '#0EC4DF' }
|
||||
]
|
||||
),
|
||||
borderRadius: 4
|
||||
}
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
fetchDataAndUpdate(30);
|
||||
// 窗口resize自适应
|
||||
window.addEventListener('resize', () => {
|
||||
myChart?.resize();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.vchartPage {
|
||||
margin-top: 7.8vh;
|
||||
position: relative; // 新增：确保按钮定位正确
|
||||
}
|
||||
|
||||
.btn_mounth_box {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 1vh;
|
||||
top: 0vh;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.btn_mounth {
|
||||
width:4.5vw;
|
||||
height:4.5vh;
|
||||
background: url(@/assets/homeIndex/btn.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
line-height: 4.4vh;
|
||||
color: #fff;
|
||||
font-size: 0.8vw;
|
||||
cursor: pointer;
|
||||
margin-left: 0.5vw; // 新增：按钮间距
|
||||
}
|
||||
|
||||
.cur {
|
||||
background: url(@/assets/homeIndex/btn_cur.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.chartRef {
|
||||
width: 100%;
|
||||
height: 22vh;
|
||||
}
|
||||
</style>
|
||||
8
src/views/homeIndex/components/MapComponent.vue
Normal file
8
src/views/homeIndex/components/MapComponent.vue
Normal file
@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<div class="map-component">地图模块</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
110
src/views/homeIndex/components/RealTimeAlarm.vue
Normal file
110
src/views/homeIndex/components/RealTimeAlarm.vue
Normal file
@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="alarm-table-container">
|
||||
<div class="alarm-table-header">
|
||||
<div class="header-item">报警时间</div>
|
||||
<div class="header-item">设备类型</div>
|
||||
<div class="header-item">设备IMEI</div>
|
||||
<div class="header-item">报警事件</div>
|
||||
<div class="header-item">报警位置</div>
|
||||
</div>
|
||||
<div class="alarm-table-body" ref="tableBody"
|
||||
:style="{ animationDuration: `${alarmData.length * 2}s`, animationTimingFunction: 'linear' }">
|
||||
<div v-for="(item, index) in alarmData" :key="index" class="alarm-item">
|
||||
<div class="item-cell">{{ item.startTime }}</div>
|
||||
<div class="item-cell">{{ item.deviceTypeName }}</div>
|
||||
<div class="item-cell">{{ item.deviceImei }}</div>
|
||||
<div class="item-cell alarm-event">
|
||||
{{ {
|
||||
0: '强制报警',
|
||||
1: '撞击闯入',
|
||||
2: '自动报警',
|
||||
3: '电子围栏告警'
|
||||
}[item.deviceAction]}}
|
||||
|
||||
</div>
|
||||
<div class="item-cell">{{ item.location }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { getRealtimeAlarm } from '@/api/homeIndex/index';
|
||||
|
||||
// 模拟报警数据
|
||||
const alarmData = ref([
|
||||
]);
|
||||
const getRealtimeAlarmData = () => {
|
||||
getRealtimeAlarm().then((res) => {
|
||||
alarmData.value = res.data;
|
||||
});
|
||||
}
|
||||
|
||||
const tableBody = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
getRealtimeAlarmData()
|
||||
// 启动滚动动画
|
||||
if (tableBody.value) {
|
||||
tableBody.value.style.animationName = 'scroll';
|
||||
tableBody.value.style.animationIterationCount = 'infinite';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.alarm-table-container {
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-top: 4vh;
|
||||
padding: 1.5vw;
|
||||
}
|
||||
|
||||
.alarm-table-header {
|
||||
display: flex;
|
||||
color: #00C0FF;
|
||||
border-bottom: 1px dashed rgba(100, 150, 200, 0.3);
|
||||
font-size: 0.8vw;
|
||||
}
|
||||
|
||||
.header-item {
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.alarm-table-body {
|
||||
height: 18vh;
|
||||
/* 可根据需求调整高度 */
|
||||
overflow: auto;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.alarm-item {
|
||||
display: flex;
|
||||
border-bottom: 1px dashed rgba(100, 150, 200, 0.3);
|
||||
font-size: 0.6vw;
|
||||
align-items: center;
|
||||
padding: 0.5vw;
|
||||
}
|
||||
|
||||
.item-cell {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.alarm-event {
|
||||
color: #ff5252;
|
||||
/* 报警事件红色显示 */
|
||||
}
|
||||
|
||||
/* 滚动动画 */
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
245
src/views/homeIndex/index.vue
Normal file
245
src/views/homeIndex/index.vue
Normal file
@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<!-- 顶部固定区域 -->
|
||||
<div class="top-bar">
|
||||
<div class="header-info">
|
||||
<div>{{ currentTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 全屏地图区域（背景） -->
|
||||
<div class="fullscreen-map">
|
||||
<MapComponent></MapComponent>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮模块容器 -->
|
||||
<div class="floating-modules">
|
||||
<!-- 左侧模块组 -->
|
||||
<div class="left-modules">
|
||||
<div class="module-card overview-card">
|
||||
<div class="module-header">设备总览</div>
|
||||
<div class="module-content">
|
||||
<DeviceOverview />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="module-card">
|
||||
<div class="module-header">设备类别</div>
|
||||
<div class="module-content">
|
||||
<DeviceCategory />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="module-card">
|
||||
<div class="module-header">设备使用频次</div>
|
||||
<div class="module-content">
|
||||
<DeviceUsage />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧模块组 -->
|
||||
<div class="right-modules">
|
||||
<div class="module-card alarm-card">
|
||||
<div class="module-header">报警数据</div>
|
||||
<div class="module-content">
|
||||
<AlarmOverview :alarmOverview="alarmOverview" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="module-card">
|
||||
<div class="module-header">报警事件</div>
|
||||
<div class="module-content">
|
||||
<AlarmEvent :alarmOverview="alarmOverview" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="module-card">
|
||||
<div class="module-header">报警次数</div>
|
||||
<div class="module-content">
|
||||
<AlarmCount />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部中间模块 -->
|
||||
<div class="bottom-middle-module">
|
||||
<div class="module-card realtime-card">
|
||||
<div class="module-header realtime-header">实时报警信息</div>
|
||||
<div class="module-content">
|
||||
<RealTimeAlarm />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getAlarmStatistics } from '@/api/homeIndex'
|
||||
import DeviceOverview from './components/DeviceOverview.vue';
|
||||
import AlarmOverview from './components/AlarmOverview.vue';
|
||||
import DeviceCategory from './components/DeviceCategory.vue';
|
||||
import DeviceUsage from './components/DeviceUsage.vue';
|
||||
import AlarmEvent from './components/AlarmEvent.vue';
|
||||
import AlarmCount from './components/AlarmCount.vue';
|
||||
import RealTimeAlarm from './components/RealTimeAlarm.vue';
|
||||
import MapComponent from './components/MapComponent.vue';
|
||||
const alarmOverview = ref<any>({})
|
||||
// 实时时间实现
|
||||
const currentDate = ref(new Date());
|
||||
// 每秒更新时间
|
||||
const timer = setInterval(() => {
|
||||
currentDate.value = new Date();
|
||||
}, 1000);
|
||||
// 组件卸载时清除定时器
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer);
|
||||
});
|
||||
|
||||
// 格式化时间
|
||||
const currentTime = computed(() => {
|
||||
const now = currentDate.value;
|
||||
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
|
||||
});
|
||||
// 报警事件是同一个接口，在这里调用，两个子组件直接引入
|
||||
const getData = async () => {
|
||||
const res = await getAlarmStatistics({})
|
||||
if (res.code == 200) {
|
||||
alarmOverview.value = res.data
|
||||
}
|
||||
}
|
||||
getData()
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dashboard-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 顶部栏 */
|
||||
.top-bar {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
height: 13vh;
|
||||
background: url(@/assets/homeIndex/nav.png) no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
.header-info {
|
||||
position: absolute;
|
||||
right: 6vh;
|
||||
top: 3.8vh;
|
||||
color: #fff;
|
||||
font-size: 1.8vh;
|
||||
}
|
||||
|
||||
/* 全屏地图 */
|
||||
.fullscreen-map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(0% 0% at 0% 0%, #091B2D 0%, #0C2644 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 悬浮模块容器 */
|
||||
.floating-modules {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 5;
|
||||
padding: 1.5vw;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 左侧模块组 */
|
||||
.left-modules {
|
||||
position: absolute;
|
||||
top: 8vh;
|
||||
left: 0.5vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 27vw;
|
||||
height: calc(100vh - 9vh);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* 右侧模块组 */
|
||||
.right-modules {
|
||||
position: absolute;
|
||||
top: 8vh;
|
||||
right: 0.5vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 27vw;
|
||||
height: calc(100vh - 9vh);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* 底部中间模块 */
|
||||
.bottom-middle-module {
|
||||
position: absolute;
|
||||
bottom: 0.4vw;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 44vw;
|
||||
height: calc(39vh - 9vh);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* 模块卡片样式 */
|
||||
.module-card {
|
||||
background: url(@/assets/homeIndex/card.png) no-repeat;
|
||||
position: relative;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 模块标题 */
|
||||
.module-header {
|
||||
position: absolute;
|
||||
font-size: 1.6vh;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
left: 5vh;
|
||||
top: 3.2vh;
|
||||
|
||||
}
|
||||
|
||||
.realtime-header {
|
||||
left: 8vh;
|
||||
top: 3.4vh;
|
||||
}
|
||||
|
||||
/* 模块内容 */
|
||||
.module-content {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user