1
This commit is contained in:
xiaozhou
2
components.d.ts
vendored
2
components.d.ts
vendored
@ -15,11 +15,13 @@ declare module 'vue' {
|
||||
VanCheckbox: typeof import('vant/es')['Checkbox']
|
||||
VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup']
|
||||
VanIcon: typeof import('vant/es')['Icon']
|
||||
VanLoading: typeof import('vant/es')['Loading']
|
||||
VanNavBar: typeof import('vant/es')['NavBar']
|
||||
VanPopup: typeof import('vant/es')['Popup']
|
||||
VanTab: typeof import('vant/es')['Tab']
|
||||
VanTabbar: typeof import('vant/es')['Tabbar']
|
||||
VanTabbarItem: typeof import('vant/es')['TabbarItem']
|
||||
VanTabs: typeof import('vant/es')['Tabs']
|
||||
VanTag: typeof import('vant/es')['Tag']
|
||||
}
|
||||
}
|
||||
|
||||
BIN
public/assets/img.jpg
Normal file
BIN
public/assets/img.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
@ -1,5 +1,8 @@
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
|
||||
import AlarmLevel from "@/views/alarm/alarmLevel.vue";
|
||||
import AlarmList from "@/views/alarm/alarmList.vue";
|
||||
import AlarmDetail from "@/views/alarm/alarmDetail.vue";
|
||||
("@/views/alarm/alarmLevel.vue");
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
@ -20,6 +23,16 @@ const router = createRouter({
|
||||
path: "/management",
|
||||
component: () => import("@/views/management.vue"),
|
||||
},
|
||||
{
|
||||
path: "/alarmLevel",
|
||||
name: "AlarmLevel",
|
||||
component: AlarmLevel,
|
||||
},
|
||||
{
|
||||
path: "/alarmList",
|
||||
name: "AlarmList",
|
||||
component: AlarmList,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -49,6 +62,11 @@ const router = createRouter({
|
||||
path: "/ktxx/:title",
|
||||
component: () => import("@/views/ktxx.vue"),
|
||||
},
|
||||
{
|
||||
name: "AlarmDetail",
|
||||
path: "/alarmDetail",
|
||||
component: AlarmDetail,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
@ -1,2 +1,286 @@
|
||||
<template>实时警报</template>
|
||||
<script setup></script>
|
||||
<template>
|
||||
<div class="real-time-report">
|
||||
<!-- 顶部标题栏 -->
|
||||
<header class="header">
|
||||
<h1>实时警报</h1>
|
||||
</header>
|
||||
|
||||
<div class="vant-buttons-top">
|
||||
<van-button type="primary" @click="handleSourceDistribution" round
|
||||
>来源分布</van-button
|
||||
>
|
||||
<van-button type="success" @click="handleAlarmLevel" round
|
||||
>告警级别统计</van-button
|
||||
>
|
||||
<van-button type="warning" @click="handleAlarmList" round
|
||||
>告警列表</van-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 数据概览卡片 -->
|
||||
<div class="summary-card">
|
||||
<div class="summary-item">
|
||||
<div class="summary-label">告警总数</div>
|
||||
<div class="summary-value">{{ alarmTotal }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图表容器 -->
|
||||
<div class="chart-wrapper">
|
||||
<!-- 环形图区域（已修改中间内容） -->
|
||||
<div class="chart-card">
|
||||
<div class="chart-title">分布图</div>
|
||||
<div class="chart-container" ref="pieChartRef"></div>
|
||||
</div>
|
||||
|
||||
<!-- 柱状图 -->
|
||||
<div class="chart-card">
|
||||
<div class="chart-title">分类对比</div>
|
||||
<div class="chart-container" ref="barChartRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 图表引用
|
||||
const pieChartRef = ref(null);
|
||||
const barChartRef = ref(null);
|
||||
|
||||
// 状态数据
|
||||
const alarmTotal = ref(100);
|
||||
const pieChart = ref(null);
|
||||
const barChart = ref(null);
|
||||
|
||||
// 模拟真实数据
|
||||
const ringChartData = [
|
||||
{ name: "华三网", value: 20 },
|
||||
{ name: "阿里云", value: 30 },
|
||||
{ name: "S600", value: 25 },
|
||||
{ name: "动环", value: 25 },
|
||||
];
|
||||
const barChartData = {
|
||||
xAxis: ["S6000", "动环", "阿里云", "华三网"],
|
||||
series: [25, 30, 25, 20],
|
||||
};
|
||||
|
||||
// 初始化图表
|
||||
const initCharts = () => {
|
||||
// 环形图配置
|
||||
if (pieChartRef.value) {
|
||||
pieChart.value = echarts.init(pieChartRef.value);
|
||||
pieChart.value.setOption({
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
bottom: 0,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "数据分布",
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 8,
|
||||
borderColor: "#fff",
|
||||
borderWidth: 2,
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: ringChartData,
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
// 柱状图配置
|
||||
if (barChartRef.value) {
|
||||
barChart.value = echarts.init(barChartRef.value);
|
||||
barChart.value.setOption({
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: barChartData.xAxis,
|
||||
axisLabel: {
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "数量",
|
||||
type: "bar",
|
||||
data: barChartData.series,
|
||||
itemStyle: {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 按钮点击事件（无修改）
|
||||
const handleSourceDistribution = () => {
|
||||
router.push("/alarm");
|
||||
};
|
||||
const handleAlarmLevel = () => {
|
||||
router.push({ name: "AlarmLevel" });
|
||||
};
|
||||
const handleAlarmList = () => {
|
||||
router.push({ name: "AlarmList" });
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initCharts();
|
||||
|
||||
// 窗口大小监听（保留原功能）
|
||||
const handleResize = () => {
|
||||
if (pieChart.value) pieChart.value.resize();
|
||||
if (barChart.value) barChart.value.resize();
|
||||
};
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
if (pieChart.value) pieChart.value.dispose();
|
||||
if (barChart.value) barChart.value.dispose();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.real-time-report {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f7fa;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
background-color: #35495e;
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.vant-buttons-top {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.van-button--round {
|
||||
--van-button-border-radius: 20px;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
padding: 15px 10px;
|
||||
background-color: white;
|
||||
margin: 0 15px 15px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 5px;
|
||||
border-left: 3px solid #35495e;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
}
|
||||
@media (max-width: 320px) {
|
||||
.chart-container {
|
||||
height: 180px;
|
||||
}
|
||||
.summary-value {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 414px) {
|
||||
.chart-container {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
430
src/views/alarm/alarmDetail.vue
Normal file
430
src/views/alarm/alarmDetail.vue
Normal file
@ -0,0 +1,430 @@
|
||||
<template>
|
||||
<div class="alarm-detail-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="detail-header">
|
||||
<div class="back-btn" @click="goBack">
|
||||
<van-icon name="arrow-left" size="22" color="#fff" />
|
||||
</div>
|
||||
<h2 class="header-title">告警详情</h2>
|
||||
<div class="header-placeholder"></div>
|
||||
</header>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<van-loading
|
||||
v-if="isLoading"
|
||||
type="spinner"
|
||||
color="#1890ff"
|
||||
class="loading"
|
||||
/>
|
||||
|
||||
<!-- 核心内容区 -->
|
||||
<div class="detail-container" v-else>
|
||||
<!-- 告警标题卡片 -->
|
||||
<div class="alarm-title-card">
|
||||
<h3 class="alarm-name">{{ detailData.name }}</h3>
|
||||
<div class="alarm-level">
|
||||
<van-tag :type="getTagType(detailData.levels[0])" size="small">
|
||||
{{ detailData.levels[0] }}
|
||||
</van-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详情信息区 -->
|
||||
<div class="info-section">
|
||||
<!-- 基础信息 -->
|
||||
<div class="info-card">
|
||||
<h4 class="card-title">基础信息</h4>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="item-label">告警时间</span>
|
||||
<span class="item-value">{{ detailData.alarmTime }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="item-label">告警来源</span>
|
||||
<span class="item-value">{{ detailData.source }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="item-label">告警类型</span>
|
||||
<span class="item-value">{{ detailData.type }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="item-label">告警分类</span>
|
||||
<span class="item-value">{{ detailData.category }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="item-label">OID</span>
|
||||
<span class="item-value">{{ detailData.oid }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="item-label">告警状态</span>
|
||||
<span
|
||||
class="item-value status-{{ detailData.status ? 'resolved' : 'pending' }}"
|
||||
>
|
||||
{{ detailData.status || "未处理" }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 告警原因 -->
|
||||
<div class="info-card">
|
||||
<h4 class="card-title">告警原因</h4>
|
||||
<div class="reason-content">
|
||||
{{ detailData.reason }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 可能原因 -->
|
||||
<div class="info-card">
|
||||
<h4 class="card-title">可能原因</h4>
|
||||
<ul class="reason-list">
|
||||
<li
|
||||
v-for="(reason, index) in detailData.possibleReasons"
|
||||
:key="index"
|
||||
>
|
||||
<span class="reason-index">{{ index + 1 }}</span>
|
||||
<span class="reason-text">{{ reason }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 修复建议 -->
|
||||
<div class="info-card">
|
||||
<h4 class="card-title">修复建议</h4>
|
||||
<ul class="suggestion-list">
|
||||
<li
|
||||
v-for="(suggestion, index) in detailData.repairSuggestions"
|
||||
:key="index"
|
||||
>
|
||||
<span class="suggestion-icon">
|
||||
<van-icon name="check-circle" color="#1890ff" size="16" />
|
||||
</span>
|
||||
<span class="suggestion-text">{{ suggestion }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 考核部门 -->
|
||||
<div class="info-card">
|
||||
<h4 class="card-title">考核部门</h4>
|
||||
<div class="dept-content">
|
||||
{{ detailData.department || "暂无指定部门" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区 -->
|
||||
<div class="action-buttons">
|
||||
<van-button type="primary" round @click="handleResolve">
|
||||
标记已处理
|
||||
</van-button>
|
||||
<van-button type="warning" round @click="handleIgnore">
|
||||
忽略告警
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const detailData = ref({
|
||||
name: "ASW-201-DE.AM798",
|
||||
oid: "1.3.6.1.4.1.2550.6.1.2.6.6.9",
|
||||
alarmTime: "2022-08-31 19:01:03",
|
||||
type: "阿里云",
|
||||
category: "网站性能告警",
|
||||
reason: "性能数据处于任务告警阈值区域，超过预设阈值 15%",
|
||||
suggestion: "调整告警阈值参数；网络流量过大，请检查网络配置",
|
||||
source: "本系统",
|
||||
levels: ["重要"],
|
||||
possibleReasons: [
|
||||
"阈值设置不合理（当前阈值低于业务峰值）",
|
||||
"网络流量过大（峰值达 1.2Gbps）",
|
||||
"服务器资源不足（CPU 使用率 85%）",
|
||||
],
|
||||
repairSuggestions: [
|
||||
"调整告警阈值至业务峰值 120%",
|
||||
"扩容网络带宽至 2Gbps",
|
||||
"增加服务器节点分担负载",
|
||||
],
|
||||
department: "运维部",
|
||||
status: "未处理",
|
||||
});
|
||||
const isLoading = ref(true);
|
||||
|
||||
// 加载数据
|
||||
onMounted(() => {
|
||||
const itemStr = route.params.item;
|
||||
if (itemStr) {
|
||||
detailData.value = JSON.parse(itemStr);
|
||||
}
|
||||
// 模拟接口加载延迟
|
||||
setTimeout(() => {
|
||||
isLoading.value = false;
|
||||
}, 600);
|
||||
});
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
// 标记已处理
|
||||
const handleResolve = () => {
|
||||
detailData.value.status = "已处理";
|
||||
// 实际项目中可调用接口更新状态
|
||||
vanToast.success("已标记为已处理");
|
||||
};
|
||||
|
||||
// 忽略告警
|
||||
const handleIgnore = () => {
|
||||
// 实际项目中可调用接口忽略告警
|
||||
vanToast.success("已忽略此告警");
|
||||
router.back();
|
||||
};
|
||||
|
||||
// 根据级别获取 Tag 类型
|
||||
const getTagType = (level) => {
|
||||
switch (level) {
|
||||
case "紧急":
|
||||
return "danger";
|
||||
case "重要":
|
||||
return "warning";
|
||||
case "次要":
|
||||
return "info";
|
||||
case "通知":
|
||||
return "success";
|
||||
default:
|
||||
return "default";
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 全局样式 */
|
||||
.alarm-detail-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f7fa;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
/* 顶部导航 */
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #2f4050;
|
||||
padding: 14px 20px;
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.back-btn {
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.back-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.header-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
.header-placeholder {
|
||||
width: 22px; /* 与返回键宽度一致，保持标题居中 */
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* 核心内容容器 */
|
||||
.detail-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 告警标题卡片 */
|
||||
.alarm-title-card {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.alarm-name {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
.alarm-level {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* 信息区通用样式 */
|
||||
.info-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.info-card {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
.info-card:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0 0 16px;
|
||||
padding-left: 8px;
|
||||
border-left: 3px solid #1890ff;
|
||||
}
|
||||
|
||||
/* 基础信息网格 */
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.item-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.item-value {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
.status-resolved {
|
||||
color: #52c41a;
|
||||
}
|
||||
.status-pending {
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
/* 告警原因 */
|
||||
.reason-content {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 可能原因列表 */
|
||||
.reason-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.reason-list li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.reason-index {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
font-size: 12px;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.reason-text {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 修复建议列表 */
|
||||
.suggestion-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.suggestion-list li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.suggestion-icon {
|
||||
margin-right: 10px;
|
||||
margin-top: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.suggestion-text {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 考核部门 */
|
||||
.dept-content {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 操作按钮区 */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.action-buttons .van-button {
|
||||
min-width: 140px;
|
||||
height: 44px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 768px) {
|
||||
.info-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
.alarm-title-card {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.alarm-level {
|
||||
margin-left: 0;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
366
src/views/alarm/alarmLevel.vue
Normal file
366
src/views/alarm/alarmLevel.vue
Normal file
@ -0,0 +1,366 @@
|
||||
<template>
|
||||
<div class="alarm-level-stat-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="stat-header">
|
||||
<div class="header-inner">
|
||||
<h1 class="page-title">实时警报</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 功能按钮区 -->
|
||||
<div class="vant-buttons-top">
|
||||
<van-button type="primary" @click="handleSourceDistribution" round
|
||||
>来源分布</van-button
|
||||
>
|
||||
<van-button type="success" @click="handleAlarmLevel" round
|
||||
>告警级别统计</van-button
|
||||
>
|
||||
<van-button type="warning" @click="handleAlarmList" round
|
||||
>告警列表</van-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 核心内容区 -->
|
||||
<div class="content-container">
|
||||
<!-- 标签栏 -->
|
||||
<van-tabs
|
||||
v-model:active="activeTab"
|
||||
@change="handleTabChange"
|
||||
class="tabs-wrapper"
|
||||
color="#1890ff"
|
||||
title-active-color="#1890ff"
|
||||
title-inactive-color="#666"
|
||||
>
|
||||
<!-- 告警级别统计标签 -->
|
||||
<van-tab title="告警级别统计">
|
||||
<div class="tab-panel">
|
||||
<!-- 统计图表卡片 -->
|
||||
<div class="chart-card">
|
||||
<h3 class="card-title">告警级别分布</h3>
|
||||
<div class="chart-container" ref="chartRef"></div>
|
||||
</div>
|
||||
|
||||
<!-- 统计表格卡片 -->
|
||||
<div class="table-card">
|
||||
<h3 class="card-title">告警级别明细</h3>
|
||||
<div class="table-container">
|
||||
<table class="alarm-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>告警级别</th>
|
||||
<th>已处理</th>
|
||||
<th>未处理</th>
|
||||
<th>总数</th>
|
||||
<th>处理率</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(item, index) in alarmStats"
|
||||
:key="index"
|
||||
:class="`level-${item.levelEn}`"
|
||||
>
|
||||
<td class="level-name">
|
||||
<span class="level-dot"></span>
|
||||
{{ item.level }}
|
||||
</td>
|
||||
<td>{{ item.processed }}</td>
|
||||
<td>{{ item.unprocessed }}</td>
|
||||
<td>{{ item.total }}</td>
|
||||
<td>
|
||||
<div class="progress-bar">
|
||||
<div
|
||||
class="progress-fill"
|
||||
:style="{ width: item.rate + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
<span class="rate-text">{{ item.rate }}%</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick, onUnmounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const router = useRouter();
|
||||
const chartRef = ref(null);
|
||||
let chartInstance = null;
|
||||
|
||||
// 告警统计数据
|
||||
const alarmStats = ref([
|
||||
{
|
||||
level: "紧急",
|
||||
levelEn: "emergency",
|
||||
processed: 4,
|
||||
unprocessed: 3,
|
||||
total: 7,
|
||||
rate: 57,
|
||||
},
|
||||
{
|
||||
level: "重要",
|
||||
levelEn: "important",
|
||||
processed: 3,
|
||||
unprocessed: 2,
|
||||
total: 5,
|
||||
rate: 60,
|
||||
},
|
||||
{
|
||||
level: "次要",
|
||||
levelEn: "secondary",
|
||||
processed: 2,
|
||||
unprocessed: 3,
|
||||
total: 5,
|
||||
rate: 40,
|
||||
},
|
||||
{
|
||||
level: "通知",
|
||||
levelEn: "notice",
|
||||
processed: 0,
|
||||
unprocessed: 7,
|
||||
total: 7,
|
||||
rate: 0,
|
||||
},
|
||||
]);
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
nextTick(() => {
|
||||
if (!chartRef.value) return;
|
||||
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
const option = {
|
||||
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
|
||||
legend: {
|
||||
data: ["已处理", "未处理"],
|
||||
bottom: 0,
|
||||
textStyle: { fontSize: 12 },
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
top: "10%",
|
||||
bottom: "15%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: alarmStats.value.map((item) => item.level),
|
||||
axisLabel: { fontSize: 12 },
|
||||
},
|
||||
yAxis: { type: "value", axisLabel: { fontSize: 12 } },
|
||||
series: [
|
||||
{
|
||||
name: "已处理",
|
||||
type: "bar",
|
||||
data: alarmStats.value.map((item) => item.processed),
|
||||
itemStyle: { color: "green" },
|
||||
barWidth: "30%",
|
||||
},
|
||||
{
|
||||
name: "未处理",
|
||||
type: "bar",
|
||||
data: alarmStats.value.map((item) => item.unprocessed),
|
||||
itemStyle: { color: "red" },
|
||||
barWidth: "30%",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
chartInstance.setOption(option);
|
||||
window.addEventListener("resize", () => chartInstance.resize());
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => initChart());
|
||||
onUnmounted(() => {
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
window.removeEventListener("resize", () => chartInstance.resize());
|
||||
}
|
||||
});
|
||||
|
||||
const handleSourceDistribution = () => router.push("/alarm");
|
||||
const handleAlarmLevel = () => router.push({ name: "AlarmLevel" });
|
||||
const handleAlarmList = () => router.push({ name: "AlarmList" });
|
||||
|
||||
// 标签切换逻辑
|
||||
const handleTabChange = (index) => {
|
||||
activeTab.value = index;
|
||||
console.log("切换到标签：", index);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.alarm-level-stat-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f7fa;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.stat-header {
|
||||
background-color: #2f4050;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.header-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.page-title {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.vant-buttons-top {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding: 12px 15px;
|
||||
}
|
||||
.van-button--round {
|
||||
--van-button-border-radius: 20px;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px 30px;
|
||||
}
|
||||
|
||||
.tabs-wrapper {
|
||||
--van-tabs-nav-background: transparent;
|
||||
--van-tabs-line-height: 36px;
|
||||
--van-tabs-font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.van-tabs-nav {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
.table-card {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.alarm-table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
text-align: center;
|
||||
min-width: 500px;
|
||||
}
|
||||
.alarm-table th {
|
||||
background-color: #f8f9fa;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
padding: 12px 8px;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.alarm-table td {
|
||||
padding: 16px 8px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.alarm-table tr:not(:last-child) td {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.level-emergency {
|
||||
background-color: #ff4d4f;
|
||||
}
|
||||
.level-important {
|
||||
background-color: #ff9933;
|
||||
}
|
||||
.level-secondary {
|
||||
background-color: #ffd700;
|
||||
color: #333;
|
||||
}
|
||||
.level-notice {
|
||||
background-color: #66ccff;
|
||||
}
|
||||
.level-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.level-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.level-secondary .level-dot {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 80px;
|
||||
height: 8px;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
.rate-text {
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header-inner {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
.chart-container {
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
279
src/views/alarm/alarmList.vue
Normal file
279
src/views/alarm/alarmList.vue
Normal file
@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<div class="alarm-list-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="header">
|
||||
<div class="header-inner">
|
||||
<h1 class="page-title">实时警报</h1>
|
||||
</div>
|
||||
</header>
|
||||
<div class="vant-buttons-top">
|
||||
<van-button type="primary" @click="handleSourceDistribution" round
|
||||
>来源分布</van-button
|
||||
>
|
||||
<van-button type="success" @click="handleAlarmLevel" round
|
||||
>告警级别统计</van-button
|
||||
>
|
||||
<van-button type="warning" @click="handleAlarmList" round
|
||||
>告警列表</van-button
|
||||
>
|
||||
</div>
|
||||
<!-- 告警列表 -->
|
||||
<div
|
||||
class="alarm-item"
|
||||
v-for="(item, idx) in alarmList"
|
||||
:key="idx"
|
||||
@click="goToDetail(item)"
|
||||
>
|
||||
<div class="alarm-header">
|
||||
<h3 class="alarm-name">{{ item.name }}</h3>
|
||||
<div class="level-tags">
|
||||
<van-tag
|
||||
size="small"
|
||||
v-for="(tag, tIndex) in item.levels"
|
||||
:key="tIndex"
|
||||
:type="getTagType(tag)"
|
||||
>
|
||||
{{ tag }}
|
||||
</van-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alarm-meta">
|
||||
<p><span>OID:</span> {{ item.oid }}</p>
|
||||
<p><span>告警时间:</span> {{ item.alarmTime }}</p>
|
||||
<p><span>类型:</span> {{ item.type }}</p>
|
||||
<p><span>分类:</span> {{ item.category }}</p>
|
||||
</div>
|
||||
<div class="alarm-desc">
|
||||
<p><span>告警原因:</span> {{ item.reason }}</p>
|
||||
<p><span>修复建议:</span> {{ item.suggestion }}</p>
|
||||
<p class="source"><span>来源:</span> {{ item.source }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const activeTab = ref(0);
|
||||
const alarmList = ref([
|
||||
{
|
||||
name: "ASW-201-DE.AM798",
|
||||
oid: "1.3.6.1.4.1.2550.6.1.2.6.6.9",
|
||||
alarmTime: "2022-08-31 19:01:03",
|
||||
type: "阿里云",
|
||||
category: "网站性能告警",
|
||||
reason: "性能数据恢复正常",
|
||||
suggestion: "无需修复",
|
||||
source: "本系统",
|
||||
levels: ["重要", "紧急"],
|
||||
},
|
||||
{
|
||||
name: "ASW-201-DE.AM797",
|
||||
oid: "1.3.6.1.4.1.2550.6.1.2.6.6.9",
|
||||
alarmTime: "2022-08-31 19:01:03",
|
||||
type: "阿里云",
|
||||
category: "网站性能告警",
|
||||
reason: "性能数据恢复正常",
|
||||
suggestion: "无需修复",
|
||||
source: "本系统",
|
||||
levels: ["次要", "警告"],
|
||||
},
|
||||
{
|
||||
name: "ASW-201-DE.AM796",
|
||||
oid: "1.3.6.1.4.1.2550.6.1.2.6.6.9",
|
||||
alarmTime: "2022-08-31 19:01:03",
|
||||
type: "阿里云",
|
||||
category: "网站性能告警",
|
||||
reason: "性能数据恢复正常",
|
||||
suggestion: "无需修复",
|
||||
source: "本系统",
|
||||
levels: ["通知"],
|
||||
},
|
||||
]);
|
||||
|
||||
// 模拟多标签
|
||||
const tabs = computed(() => [
|
||||
{ title: "来源分布", content: "来源分布内容" },
|
||||
{ title: "告警级别统计", content: "告警级别统计内容" },
|
||||
{ title: "告警列表", content: "告警列表内容" },
|
||||
]);
|
||||
|
||||
// 按钮跳转逻辑
|
||||
const handleSourceDistribution = () => router.push("/alarm");
|
||||
const handleAlarmLevel = () => router.push({ name: "AlarmLevel" });
|
||||
const handleAlarmList = () => router.push({ name: "AlarmList" });
|
||||
|
||||
// 标签切换
|
||||
const handleTabChange = (index) => console.log("切换到标签：", index);
|
||||
|
||||
// 跳转详情
|
||||
const goToDetail = (item) => {
|
||||
router.push({
|
||||
name: "AlarmDetail",
|
||||
params: { item: JSON.stringify(item) },
|
||||
});
|
||||
};
|
||||
|
||||
// Tag 类型映射
|
||||
const getTagType = (tag) => {
|
||||
switch (tag) {
|
||||
case "紧急":
|
||||
return "danger";
|
||||
case "重要":
|
||||
return "warning";
|
||||
case "次要":
|
||||
return "info";
|
||||
case "警告":
|
||||
return "primary";
|
||||
case "通知":
|
||||
return "success";
|
||||
default:
|
||||
return "default";
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 全局布局 */
|
||||
.alarm-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
|
||||
Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* 顶部导航 */
|
||||
.header {
|
||||
background: #2f4050;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.header-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.page-title {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.vant-buttons-top {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.van-button--round {
|
||||
--van-button-border-radius: 20px;
|
||||
}
|
||||
|
||||
/* Tabs 容器 */
|
||||
.tabs-wrapper {
|
||||
--van-tabs-line-height: 36px;
|
||||
--van-tabs-font-size: 16px;
|
||||
max-width: 1200px;
|
||||
margin: 20px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.van-tabs-nav {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.van-tab {
|
||||
color: #333;
|
||||
}
|
||||
.van-tab--active {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
/* 内容区 */
|
||||
.tab-content {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* 告警项卡片 */
|
||||
.alarm-item {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.alarm-item:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 告警项头部 */
|
||||
.alarm-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.alarm-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
.level-tags {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* 元信息区 */
|
||||
.alarm-meta {
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.alarm-meta span {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 描述区 */
|
||||
.alarm-desc {
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.alarm-desc span {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 768px) {
|
||||
.header-inner {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,2 +1,205 @@
|
||||
<template>home</template>
|
||||
<script setup></script>
|
||||
<template>
|
||||
<div class="image-selector-container">
|
||||
<!-- 图片展示区域 - 占满整个页面 -->
|
||||
<div class="image-display">
|
||||
<transition name="fade">
|
||||
<img
|
||||
src="/assets/img.jpg"
|
||||
class="selected-image"
|
||||
key="selected-image"
|
||||
alt="选中的图片"
|
||||
/>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onUnmounted } from "vue";
|
||||
|
||||
// 图片列表和状态管理
|
||||
const images = ref([1, 2, 3, 4, 5]); // 模拟图片列表
|
||||
const selectedIndex = ref(0);
|
||||
const isOpen = ref(false);
|
||||
|
||||
// 选择图片
|
||||
const selectImage = (index) => {
|
||||
selectedIndex.value = index;
|
||||
isOpen.value = false;
|
||||
// 实际项目中这里会更新图片源
|
||||
};
|
||||
|
||||
// 点击外部关闭下拉框
|
||||
const handleClickOutside = (event) => {
|
||||
const selectorContainer = document.querySelector(".selector-container");
|
||||
if (selectorContainer && !selectorContainer.contains(event.target)) {
|
||||
isOpen.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 监听点击事件，实现点击外部关闭下拉框
|
||||
document.addEventListener("click", handleClickOutside);
|
||||
|
||||
// 组件卸载时移除事件监听
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener("click", handleClickOutside);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 基础样式重置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
.image-selector-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden; /* 防止页面滚动 */
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
/* 图片展示区域 - 占满整个页面 */
|
||||
.image-display {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.selected-image {
|
||||
height: calc(100vh - 50px - 10px);
|
||||
display: block;
|
||||
object-fit: cover; /* 保持比例并覆盖整个区域 */
|
||||
}
|
||||
|
||||
/* 选择器容器 - 固定在底部 */
|
||||
.selector-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20px;
|
||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.select-button {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.2s ease;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.select-button:hover,
|
||||
.select-button:focus {
|
||||
background-color: #ffffff;
|
||||
outline: none;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.icon {
|
||||
transition: transform 0.2s ease;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.icon.rotate {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.dropdown-list {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
margin: 0 0 8px;
|
||||
padding: 8px 0;
|
||||
list-style: none;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
|
||||
z-index: 10;
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 12px 16px;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.dropdown-item:hover,
|
||||
.dropdown-item:focus {
|
||||
background-color: #f5f9ff;
|
||||
color: #007bff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dropdown-item.selected {
|
||||
background-color: #e6f0ff;
|
||||
color: #007bff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-up-enter-active,
|
||||
.slide-up-leave-active {
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.slide-up-enter-from {
|
||||
transform: translateY(8px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-up-leave-to {
|
||||
transform: translateY(-8px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 768px) {
|
||||
.selector-container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.select-button {
|
||||
padding: 12px 14px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 11px 14px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user