Skip to content

J
JINRUN-DP
Commit e3a941ec authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

今日报警信息

parent 99130408
Hide whitespace changes
Inline Side-by-side
Showing with 201 additions and 83 deletions
src/components/MineMonitor/LeftRainfallTrend.vue
View file @ e3a941ec
......@@ -54,7 +54,7 @@ const initChart = () => {
axisLabel: { color: "#a0b3d6", interval: 2 },
},
yAxis: {
// name:'mm',
name:'mm',
// nameLocation:'end',
// nameGap: 10, // 单位与Y轴轴线的间距
// nameAlign:'left',
......@@ -62,10 +62,14 @@ const initChart = () => {
// offset: 200 // 向左移动10像素
// },
// nameTextStyle: { padding: [-30, 0, 0, 0] },
nameTextStyle: {
color: "white", //颜色
padding: [0, 30, 0, 0], //间距分别是 上 右 下 左
},
type: "value",
max: 300,
axisLine: { lineStyle: { color: "#4f6b95" } },
// axisLabel: { color: "#a0b3d6"},
axisLabel: { color: "white"},
splitLine: { lineStyle: { color: "rgba(79, 107, 149, 0.2)" } },
// // 添加警戒线标记
// axisTick: {
......@@ -137,7 +141,7 @@ onUnmounted(() => {
height: 3rem;
position: relative;
padding: 0.15rem;
padding-top: 0.45rem;
// padding-top: 0.45rem;
.card-title {
position: absolute;
......
src/components/MineMonitor/RightTodayAlarm.vue
View file @ e3a941ec
<template>
<n-card :bordered="false" class="today-alarm-card">
<div class="card-header">
<h2 class="card-title">今日报警信息</h2>
<div class="wrapper">
<h2 class="card-title">今日报警信息</h2>
<div class="alarm-tabs">
<div
v-for="(tab, index) in tabs"
:key="index"
class="tab-item"
:class="{ active: activeTab === index }"
@click="activeTab = index"
>
{{ tab.name }}({{ tab.count }})
</div>
</div>
<div class="alarm-tabs">
<n-tag type="error" ghost>SO5报警(0)</n-tag>
<n-tag type="warning" ghost>车辆报警(3)</n-tag>
<n-tag type="info" ghost>越界开采(4)</n-tag>
<n-tag type="primary" ghost>在线监测(4)</n-tag>
<!-- SOS报警表格 -->
<div v-show="activeTab === 0" class="table-container">
<n-data-table
:columns="sosColumns"
:data="sosData"
:bordered="false"
size="small"
/>
</div>
<div class="alarm-list">
<div class="item orange">
<div class="content">
<div class="device">边坡表面位移01</div>
<div class="level">橙色预警</div>
</div>
<div class="detail">
<div class="value">0.0047mm</div>
<div class="time">2025-01-10 14:21:31</div>
</div>
</div>
<div class="item blue">
<div class="content">
<div class="device">降雨量</div>
<div class="level">蓝色预警</div>
</div>
<div class="detail">
<div class="value">0.0047mm</div>
<div class="time">2025-01-10 14:21:31</div>
</div>
</div>
<div class="item yellow">
<div class="content">
<div class="device">边坡表面位移01</div>
<div class="level">黄色预警</div>
</div>
<div class="detail">
<div class="value">0.0047mm</div>
<div class="time">2025-01-10 14:21:31</div>
</div>
</div>
<!-- 车辆报警表格 -->
<div v-show="activeTab === 1" class="table-container">
<n-data-table
:columns="vehicleColumns"
:data="vehicleData"
:bordered="false"
size="small"
/>
</div>
</n-card>
<!-- 越界开采表格 -->
<div v-show="activeTab === 2" class="table-container">
<n-data-table
:columns="boundaryColumns"
:data="boundaryData"
:bordered="false"
size="small"
/>
</div>
<!-- 在线监测表格 -->
<div v-show="activeTab === 3" class="table-container">
<n-data-table
:columns="monitorColumns"
:data="monitorData"
:bordered="false"
size="small"
/>
</div>
</div>
</template>
<script setup lang="ts"></script>
<script setup lang="ts">
import { ref } from 'vue'
// 定义tabs
const tabs = ref([
{ name: 'SOS报警', count: 0 },
{ name: '车辆报警', count: 3 },
{ name: '越界开采', count: 4 },
{ name: '在线监测', count: 4 }
])
// 激活的tab索引
const activeTab = ref(0)
// SOS报警表格列
const sosColumns = ref([
{ title: '人员姓名', key: 'name' },
{ title: '定位卡号', key: 'cardNumber' },
{ title: '报警时间', key: 'alarmTime' }
])
// SOS报警表格数据
const sosData = ref([])
// 车辆报警表格列
const vehicleColumns = ref([
{ title: '车辆/司机名称', key: 'vehicleOrDriver' },
{ title: '车牌号', key: 'plateNumber' },
{ title: '报警类型', key: 'alarmType' },
{ title: '报警时间', key: 'alarmTime' }
])
// 车辆报警表格数据
const vehicleData = ref([
{ vehicleOrDriver: '货车01', plateNumber: '鲁C12345', alarmType: '超速', alarmTime: '2025-01-10 14:21:31' },
{ vehicleOrDriver: '货车02', plateNumber: '鲁C12346', alarmType: '偏离路线', alarmTime: '2025-01-10 13:15:22' },
{ vehicleOrDriver: '张三', plateNumber: '鲁C12347', alarmType: '疲劳驾驶', alarmTime: '2025-01-10 12:05:47' }
])
// 越界开采表格列
const boundaryColumns = ref([
{ title: '人员/车辆名称', key: 'personOrVehicle' },
{ title: '定位卡号/车牌号', key: 'cardOrPlate' },
{ title: '越界时间', key: 'boundaryTime' }
])
// 越界开采表格数据
const boundaryData = ref([
{ personOrVehicle: '李四', cardOrPlate: 'K00123', boundaryTime: '2025-01-10 14:21:31' },
{ personOrVehicle: '挖掘机01', cardOrPlate: '鲁C56789', boundaryTime: '2025-01-10 13:45:12' },
{ personOrVehicle: '王五', cardOrPlate: 'K00456', boundaryTime: '2025-01-10 12:30:55' },
{ personOrVehicle: '卡车02', cardOrPlate: '鲁C98765', boundaryTime: '2025-01-10 11:20:33' }
])
// 在线监测表格列
const monitorColumns = ref([
{ title: '设备名称', key: 'deviceName' },
{ title: '监测值', key: 'monitorValue' },
{ title: '报警级别', key: 'alarmLevel' },
{ title: '报警时间', key: 'alarmTime' }
])
// 在线监测表格数据
const monitorData = ref([
{ deviceName: '边坡表面位移01', monitorValue: '0.0047mm', alarmLevel: '橙色预警', alarmTime: '2025-01-10 14:21:31' },
{ deviceName: '降雨量', monitorValue: '50.2mm', alarmLevel: '蓝色预警', alarmTime: '2025-01-10 13:15:22' },
{ deviceName: '温度传感器01', monitorValue: '38.5℃', alarmLevel: '黄色预警', alarmTime: '2025-01-10 12:05:47' },
{ deviceName: '湿度传感器02', monitorValue: '85%RH', alarmLevel: '蓝色预警', alarmTime: '2025-01-10 11:30:15' }
])
</script>
<style scoped lang="scss">
.today-alarm-card {
.wrapper {
overflow: visible;
width: 4.6rem;
height: 3rem;
position: relative;
padding: 0.15rem;
background: var(--n-bg-color-secondary);
background-size: contain;
// padding-top: 0.45rem;
.card-header {
margin-bottom: 0.15rem;
.card-title {
font-size: 0.18rem;
font-weight: 600;
color: var(--n-text-color-primary);
}
.card-title {
position: absolute;
left: 0.25rem;
top: -0.15rem;
font-weight: 500;
font-size: 0.2rem;
color: #ffffff;
text-shadow: 0rem 0rem 0rem rgba(5, 38, 68, 0.5);
}
width: 100%;
margin-top: 0.3rem;
background-image: url("@/assets/jinrun/module-bg.png");
background-repeat: no-repeat;
.chart-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
}
.chart-container{
width: 100%;
height: 100%;
}
}
.alarm-tabs {
width: 4.4rem;
display: flex;
gap: 0.05rem;
margin-top: .18rem;
margin-bottom: 0.15rem;
flex-wrap: wrap;
color: #fff;
}
.alarm-list {
display: flex;
flex-direction: column;
gap: 0.1rem;
max-height: 1.2rem;
overflow-y: auto;
.item {
padding: 0.1rem;
background: rgba(10, 25, 71, 0.6);
border-radius: 0.05rem;
display: flex;
justify-content: space-between;
font-size: 0.14rem;
&.orange { border-left: 0.03rem solid #ff9f40; }
&.blue { border-left: 0.03rem solid #36a2eb; }
&.yellow { border-left: 0.03rem solid #facc15; }
.content {
.device { color: var(--n-text-color-primary); }
.level { font-size: 0.12rem; margin-top: 0.03rem; }
.tab-item {
padding: 0.05rem 0.1rem;
background: transparent; // 背景色透明
cursor: pointer;
position: relative;
font-weight: 400;
font-size: 0.16rem;
color: #88DBBD;
&.active {
color: var(--n-text-color-primary);
&::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 0.02rem;
background-color: #36a2eb;
}
}
}
.detail {
text-align: right;
font-size: 0.12rem;
color: var(--n-text-color-secondary);
.value { margin-bottom: 0.03rem; }
.table-container {
:deep(.n-data-table) {
background-color: transparent;
.n-data-table-th,
.n-data-table-td {
background-color: transparent !important;
color: var(--n-text-color-primary);
border: none;
}
.n-data-table-tr:hover .n-data-table-td {
background-color: rgba(50, 50, 50, 0.3) !important;
}
}
}
}
</style>
\ No newline at end of file
src/views/_builtin/cesiumDeom/index.vue
View file @ e3a941ec
......@@ -90,9 +90,9 @@
<div class="right-modules" v-show="isRightModulesVisible">
<RightAiWarning />
<RightEnvMonitor />
<!--
<RightTodayAlarm /> -->
<RightTodayAlarm />
</div>
</transition>
<!-- 非地图相关 结束 -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment