xiaozhiyong/safePower
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
xiaozhiyong
2026-06-12 14:01:37 +08:00
parent 47b6351492
commit 57375c9136
9 changed files with 54 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@@ -3,9 +3,9 @@ VITE_CLI_PORT = 8080
VITE_SERVER_PORT = 8888
VITE_BASE_API = /api
VITE_FILE_API = /api
# VITE_BASE_PATH = http://192.168.1.9:8888
VITE_BASE_PATH = http://192.168.1.9:8888
# VITE_BASE_PATH = http://192.168.110.98:8888
VITE_BASE_PATH = https://www.xingoil.com/api
# VITE_BASE_PATH = https://www.xingoil.com/api
VITE_POSITION = open
VITE_EDITOR = code
// VITE_EDITOR = webstorm 如果使用webstorm开发且要使用dom定位到代码行功能 请先自定添加 webstorm到环境变量 再将VITE_EDITOR值修改为webstorm

7
index.html
View File

@@ -4,17 +4,12 @@
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta
content="Gin,Vue,Admin.Gin-Vue-Admin,GVA,gin-vue-admin,后台管理框架,vue后台管理框架,gin-vue-admin文档,gin-vue-admin首页,gin-vue-admin"
name="keywords"
/>
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/gva-loading-boot.css" />
<title></title>
<style>
.transition-colors {
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}

6
public/gva-loading-boot.css
View File

@@ -60,13 +60,13 @@
min-width: 148px;
padding: 24px 28px 20px;
margin-top: 0;
border: 1px solid rgba(0, 212, 255, 0.22);
/* border: 1px solid rgba(0, 212, 255, 0.22); */
border-radius: 18px;
background: linear-gradient(145deg, rgba(10, 28, 54, 0.96), rgba(4, 14, 30, 0.92));
box-shadow:
/* box-shadow:
0 22px 48px rgba(0, 0, 0, 0.34),
0 0 28px rgba(0, 212, 255, 0.1),
inset 0 0 28px rgba(0, 212, 255, 0.05);
inset 0 0 28px rgba(0, 212, 255, 0.05); */
}
.gva-loading-ring {

27
src/style/element_visiable.scss
View File

@@ -92,7 +92,11 @@ body:not(.login-light-mode) {
.el-button {
min-height: 32px;
border-radius: 999px;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease,
background 0.22s ease;
&:not(.is-disabled):hover {
transform: translateY(-1px);
@@ -103,7 +107,9 @@ body:not(.login-light-mode) {
color: #031424;
border: 0;
background: linear-gradient(135deg, #67e8f9 0%, var(--tech-primary) 46%, #2563eb 100%);
box-shadow: 0 0 20px var(--tech-primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.34);
box-shadow:
0 0 20px var(--tech-primary-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
.el-button:not(.el-button--primary):not(.is-link) {
@@ -132,7 +138,10 @@ body:not(.login-light-mode) {
border-radius: 10px;
background: rgba(2, 8, 23, 0.62);
box-shadow: inset 0 0 14px rgba(0, 212, 255, 0.06);
transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
transition:
border-color 0.22s ease,
box-shadow 0.22s ease,
background 0.22s ease;
}
.el-input__wrapper.is-focus,
@@ -140,7 +149,9 @@ body:not(.login-light-mode) {
.el-textarea__inner:focus {
border-color: rgba(0, 212, 255, 0.72);
background: rgba(2, 8, 23, 0.78);
box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.28), 0 0 18px rgba(0, 212, 255, 0.18);
box-shadow:
0 0 0 1px rgba(0, 212, 255, 0.28),
0 0 18px rgba(0, 212, 255, 0.18);
}
.el-input__inner,
@@ -243,7 +254,9 @@ body:not(.login-light-mode) {
.el-picker__popper {
border-color: rgba(0, 212, 255, 0.22) !important;
background: rgba(5, 16, 32, 0.96) !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42), 0 0 22px rgba(0, 212, 255, 0.12) !important;
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.42),
0 0 22px rgba(0, 212, 255, 0.12) !important;
.el-dropdown-menu,
.el-select-dropdown,
@@ -337,7 +350,9 @@ body:not(.login-light-mode) {
.gva-tech-aside > .el-scrollbar .el-menu > .gva-tech-menu-item.is-active {
color: #ffffff !important;
background: linear-gradient(90deg, rgba(0, 212, 255, 0.24), rgba(59, 130, 246, 0.13)) !important;
box-shadow: inset 3px 0 0 var(--tech-primary), 0 0 18px rgba(0, 212, 255, 0.16);
box-shadow:
inset 3px 0 0 var(--tech-primary),
0 0 18px rgba(0, 212, 255, 0.16);
}
/* 二级菜单 */

7
src/style/table-tech.scss
View File

@@ -53,7 +53,10 @@
color: var(--tech-text) !important;
border-bottom: 1px solid rgba(0, 212, 255, 0.08) !important;
background: rgba(2, 8, 23, 0.22) !important;
transition: background-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
transition:
background-color 0.22s ease,
box-shadow 0.22s ease,
color 0.22s ease;
.cell {
padding: 0 14px;
@@ -72,7 +75,7 @@
.el-table__row:hover > td.el-table__cell {
color: #f4fbff !important;
background: rgba(0, 212, 255, 0.08) !important;
box-shadow: inset 3px 0 0 rgba(0, 212, 255, 0.55);
// box-shadow: inset 3px 0 0 rgba(0, 212, 255, 0.55);
}
&.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {

173
src/view/masterStation/equipment/components/detail/components/alarm/index.vue
View File

@@ -1,173 +0,0 @@
<template>
<div class="detail-content">
<div class="detail-card">
<h3>报警记录</h3>
<el-table :data="tableData" style="width: 100%" stripe>
<el-table-column prop="CreatedAt" label="报警时间" width="180" />
<el-table-column prop="type" label="报警类型" width="120">
<template #default="{ row }">
<el-tag :type="typeMap.find((item) => item.value == row.warnType)?.type || 'info'">{{
typeMap.find((item) => item.value == row.warnType)?.label || row.warnType
}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="level" label="报警等级" width="100">
<template #default="{ row }">
<el-tag :type="levelMap.find((item) => item.value == row.alarmLevel)?.type || 'info'" effect="dark">{{
levelMap.find((item) => item.value == row.alarmLevel)?.label || row.alarmLevel
}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="originalContent" label="报警描述">
<template #default="{ row }">
{{ row.remark || '-' }}
</template>
</el-table-column>
<!-- <el-table-column prop="status" label="处理状态" width="100">
<template #default="{ row }">
<el-tag :type="row.status === '已处理' ? 'success' : 'danger'">{{ row.status }}</el-tag>
</template>
</el-table-column> -->
</el-table>
<div class="gva-pagination">
<el-pagination
:current-page="page"
:page-size="pageSize"
:page-sizes="[10, 30, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import * as serve from '@/api/equipment/alarmRecord'
const props = defineProps({
device: {
type: Object,
default: () => null
}
})
// 报警数据
const tableData = ref([])
// 分页相关
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
// 当前页变化
const handleCurrentChange = (val) => {
page.value = val
getTableData()
}
// 每页大小变化
const handleSizeChange = (val) => {
pageSize.value = val
page.value = 1
getTableData()
}
// 查询报警记录
const getTableData = async () => {
const deviceId = props.device?.ID
if (deviceId) {
try {
const table = await serve.getAlarmRecordListByPage({
page: page.value,
pageSize: pageSize.value,
deviceId,
sortBy: 'CreatedAt',
desc: true
})
if (table.code === 0) {
tableData.value = table.data.list || []
// total.value = table.data.total || 0
return
}
} catch (e) {
console.error('获取报警记录失败', e)
}
} else {
console.warn('[Alarm] device 为空或没有 ID 字段')
}
}
// 监听 device 变化，device 更新时重新请求
watch(
() => props.device,
(newDevice) => {
if (newDevice) {
getTableData()
}
},
{ deep: true, immediate: false }
)
const typeMap = [
{
value: '45',
type: 'danger',
label: '设备事件'
},
{
value: '4f',
type: 'danger',
label: '操作事件'
}
]
const levelMap = [
{
value: '0',
type: 'primary',
label: '记录'
},
{
value: '1',
type: 'warning',
label: '提醒'
},
{
value: '2',
type: 'danger',
label: '警告'
}
]
</script>
<style lang="scss" scoped>
.detail-content {
display: flex;
flex-direction: column;
gap: 20px;
}
.detail-card {
background: var(--tech-panel-soft);
border-radius: 12px;
padding: 24px;
border: 1px solid var(--tech-border);
h3 {
font-size: 16px;
font-weight: 600;
color: var(--tech-text-strong);
margin: 0 0 16px 0;
padding-bottom: 12px;
border-bottom: 1px solid rgba(0, 212, 255, 0.18);
}
}
.empty-alarm {
padding: 40px 0;
display: flex;
justify-content: center;
}
</style>

50
src/view/masterStation/equipment/components/detail/components/info/index.vue
View File

@@ -1,52 +1,10 @@
<template>
<div class="detail-content">
<!-- <div class="cards">
<div class="detail-card">
<h3>基本信息</h3>
<div class="detail-row">
<span class="detail-label">设备号：</span>
<span class="detail-value">{{ device?.gatewayId || '未设置' }}</span>
</div>
<div class="detail-row">
<span class="detail-label">经度：</span>
<span class="detail-value">{{ device?.gatewayLong || '未设置' }}</span>
</div>
<div class="detail-row">
<span class="detail-label">纬度：</span>
<span class="detail-value">{{ device?.gatewayLat || '未设置' }}</span>
</div>
<div class="detail-row">
<span class="detail-label">imei：</span>
<span class="detail-value">{{ device?.imei || '未设置' }}</span>
</div>
</div>
<div class="detail-card">
<h3>状态信息</h3>
<div class="detail-row">
<span class="detail-label">网络状态：</span>
<span class="detail-value">
<el-tag :type="device?.netStatus == 1 ? 'primary' : 'info'">
{{ device?.netStatus == 1 ? '在线' : '离线' }}
</el-tag>
</span>
</div>
</div>
<div class="detail-card">
<h3>其他信息</h3>
<div class="detail-row">
<span class="detail-label">安装时间：</span>
<span class="detail-value">{{ device?.createTime || '未设置' }}</span>
</div>
</div>
</div> -->
<div class="info-box">
<p class="title">基础信息</p>
<div class="details">
<el-image src="https://v5.snd02.com/upload/icon/UN2.png" class="device-image" />
<div>
<div class="item">
<p>
<span>设备号：</span>
<span>{{ device?.gatewayId || '未设置' }}</span>
@@ -244,7 +202,9 @@
border: 1px solid rgba(0, 212, 255, 0.22);
border-radius: 16px;
background: linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.74));
box-shadow: inset 0 0 22px rgba(0, 212, 255, 0.06), 0 12px 28px rgba(0, 0, 0, 0.22);
box-shadow:
inset 0 0 22px rgba(0, 212, 255, 0.06),
0 12px 28px rgba(0, 0, 0, 0.22);
.title {
font-size: 17px;
@@ -276,7 +236,7 @@
padding-left: 25px;
// flex-direction: column;
gap: 40px;
> div {
> .item {
display: flex;
flex-direction: column;
width: 30%;

18
src/view/masterStation/equipment/components/detail/components/trend/index.vue
View File

@@ -530,7 +530,9 @@
border: 1px solid rgba(0, 212, 255, 0.22);
border-radius: 16px;
background: linear-gradient(135deg, rgba(9, 24, 48, 0.88), rgba(5, 16, 32, 0.74));
box-shadow: inset 0 0 22px rgba(0, 212, 255, 0.06), 0 12px 28px rgba(0, 0, 0, 0.22);
box-shadow:
inset 0 0 22px rgba(0, 212, 255, 0.06),
0 12px 28px rgba(0, 0, 0, 0.22);
}
.left {
@@ -613,12 +615,17 @@
.ouliy {
padding: 7px 8px;
border-radius: 10px;
transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
transition:
background 0.22s ease,
color 0.22s ease,
box-shadow 0.22s ease;
&.active {
color: var(--tech-text-strong);
background: rgba(0, 212, 255, 0.18);
box-shadow: inset 3px 0 0 var(--tech-primary), 0 0 14px rgba(0, 212, 255, 0.14);
box-shadow:
inset 3px 0 0 var(--tech-primary),
0 0 14px rgba(0, 212, 255, 0.14);
}
&:hover {
color: var(--tech-text-strong);
@@ -768,7 +775,10 @@
.chart-card {
padding: 16px;
margin-bottom: 16px;
transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
transition:
transform 0.24s ease,
border-color 0.24s ease,
box-shadow 0.24s ease;
&:hover {
border-color: rgba(0, 212, 255, 0.5);

6
src/view/masterStation/equipment/components/detail/index.vue
View File

@@ -19,7 +19,6 @@
<DeviceLine v-if="activeMenu === 'line'" :device="device" />
<DeviceTrend v-if="activeMenu === 'trend'" :device="device" />
<DeviceConfig v-if="activeMenu === 'config'" :device="device" />
<!-- <DeviceAlarm v-show="activeMenu === 'alarm'" :device="device" /> -->
</div>
</template>
@@ -29,7 +28,6 @@
import DeviceLine from './components/line/index.vue'
import DeviceTrend from './components/trend/index.vue'
import DeviceConfig from './components/config/index.vue'
import DeviceAlarm from './components/alarm/index.vue'
defineProps({
device: {
@@ -64,7 +62,9 @@
background:
linear-gradient(90deg, rgba(8, 27, 54, 0.9), rgba(4, 15, 32, 0.76)),
radial-gradient(circle at 20% 20%, rgba(0, 212, 255, 0.16), transparent 36%);
box-shadow: var(--tech-shadow), inset 0 0 26px rgba(0, 212, 255, 0.08);
box-shadow:
var(--tech-shadow),
inset 0 0 26px rgba(0, 212, 255, 0.08);
&::before {
position: absolute;