forked from dyf/dyf-vue-ui
490 lines
15 KiB
Vue
490 lines
15 KiB
Vue
<template>
|
||
<div class="device-page p-2">
|
||
<!-- 头部信息栏 -->
|
||
<div class="header-bar">
|
||
<div>设备名称：6170零零一</div>
|
||
<div>设备型号：BJQ6170</div>
|
||
<div class="device-status">设备状态：<span class="online">在线</span></div>
|
||
<div>电量：80%</div>
|
||
<div>续航：1小时55分钟</div>
|
||
</div>
|
||
|
||
<!-- 主体内容区域 -->
|
||
<div class="content-wrapper">
|
||
<!-- 第一行：灯光模式 + 灯光亮度、强制报警、位置信息 -->
|
||
<el-row :gutter="20" class="content-row">
|
||
<el-col :lg="16" :xs="24">
|
||
<div class="content-card">
|
||
<h4 class="section-title">灯光模式</h4>
|
||
<div class="light-mode">
|
||
<!-- 使用v-for循环渲染灯光模式卡片 -->
|
||
<div class="mode-card" :class="{ 'active': mode.active }" @click="handleModeClick(mode.id)"
|
||
v-for="mode in lightModes" :key="mode.id">
|
||
<img :src="mode.active ? mode.activeIcon : mode.icon" :alt="mode.name"
|
||
class="mode-icon" />
|
||
<div class="mode-name">{{ mode.name }}</div>
|
||
<el-switch v-model="mode.switchStatus" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :lg="8" :xs="24">
|
||
<div class="brightness-alarm">
|
||
<div class="brightness-control">
|
||
<span class="brightness-label">灯光亮度</span>
|
||
<el-input class="inputTFT" v-model="brightness" :min="0" :max="100" :step="1"
|
||
size="small" />
|
||
<span class="brightness-value">%</span>
|
||
<el-button type="primary" class="save-btn">保存</el-button>
|
||
</div>
|
||
<el-button type="danger" class="alarm-btn">强制报警</el-button>
|
||
</div>
|
||
<div class="content-card_gps">
|
||
<h4 class="section-title">位置信息</h4>
|
||
<div class="location-info">
|
||
<div class="location-item">
|
||
<span class="location-icon"></span>
|
||
<span>经纬度 114°7'E 30°28'N</span>
|
||
</div>
|
||
<div class="location-item">
|
||
|
||
<div>地址 <span class="lacatin_gps">ksjkjwekrnjewrnjewrnjwerjweb</span></div>
|
||
<el-button link type="primary" class="view-btn">查看</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 第二行：人员信息登记 + 发送信息 -->
|
||
<el-row :gutter="20" class="content-row">
|
||
<el-col :lg="16" :xs="24">
|
||
<div class="content-card">
|
||
<h4 class="section-title">人员信息登记</h4>
|
||
<div class="form-grid">
|
||
<div class="form-item">
|
||
<span class="form-label">单位:</span>
|
||
<el-input placeholder="请输入设备名称" />
|
||
</div>
|
||
<div class="form-item">
|
||
<span class="form-label">职位:</span>
|
||
<el-input placeholder="请输入设备名称" />
|
||
</div>
|
||
<div class="form-item">
|
||
<span class="form-label">姓名</span>
|
||
<el-input value="王平安" />
|
||
</div>
|
||
<div class="form-item">
|
||
<span class="form-label">ID:</span>
|
||
<el-input placeholder="请输入设备名称" />
|
||
</div>
|
||
<el-button type="primary" class="register-btn">登记</el-button>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :lg="8" :xs="24">
|
||
<div class="content-card">
|
||
<h4 class="section-title">发送信息</h4>
|
||
<div class="message-content">
|
||
<el-input type="textarea" class="textareaTFT" :rows="4" value="现场危险，停止救援！紧急撤离至安全区域！"
|
||
resize="none" />
|
||
<el-button type="primary" class="send-btn">发送</el-button>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup name="DeviceControl" lang="ts">
|
||
import { ref } from 'vue';
|
||
|
||
const brightness = ref(50);
|
||
// 定义灯光模式的类型接口
|
||
interface LightMode {
|
||
id: string;
|
||
name: string;
|
||
icon: string;
|
||
activeIcon: string;
|
||
active: boolean;
|
||
switchStatus: boolean;
|
||
}
|
||
// 导入图片资源（确保路径正确）
|
||
import strongLightDefault from '@/assets/images/strong-light.png';
|
||
import strongLightActive from '@/assets/images/strong-light_HL.png';
|
||
import weakLightDefault from '@/assets/images/weak-light.png';
|
||
import weakLightActive from '@/assets/images/weak-light_HL.png';
|
||
import strobeLightDefault from '@/assets/images/strobe-light.png';
|
||
import strobeLightActive from '@/assets/images/strobe-light_HL.png';
|
||
import floodLightDefault from '@/assets/images/flood-light.png';
|
||
import floodLightActive from '@/assets/images/flood-light_HL.png';
|
||
import laserLightDefault from '@/assets/images/laser-light.png';
|
||
import laserLightActive from '@/assets/images/laser-light_HL.png';
|
||
|
||
// 灯光模式数据
|
||
// 灯光模式数据（引用导入的图片）
|
||
const lightModes = ref<LightMode[]>([
|
||
{
|
||
id: 'strong',
|
||
name: '强光',
|
||
icon: strongLightDefault, // 直接使用导入的变量
|
||
activeIcon: strongLightActive,
|
||
active: true,
|
||
switchStatus: true
|
||
},
|
||
{
|
||
id: 'weak',
|
||
name: '弱光',
|
||
icon: weakLightDefault,
|
||
activeIcon: weakLightActive,
|
||
active: false,
|
||
switchStatus: false
|
||
},
|
||
{
|
||
id: 'strobe',
|
||
name: '爆闪',
|
||
icon: strobeLightDefault,
|
||
activeIcon: strobeLightActive,
|
||
active: false,
|
||
switchStatus: false
|
||
},
|
||
{
|
||
id: 'flood',
|
||
name: '泛光',
|
||
icon: floodLightDefault,
|
||
activeIcon: floodLightActive,
|
||
active: false,
|
||
switchStatus: false
|
||
},
|
||
{
|
||
id: 'laser',
|
||
name: '激光',
|
||
icon: laserLightDefault,
|
||
activeIcon: laserLightActive,
|
||
active: false,
|
||
switchStatus: false
|
||
}
|
||
]);
|
||
// 当前选中的模式
|
||
const currentMode = computed(() => {
|
||
return lightModes.value.find(mode => mode.active);
|
||
});
|
||
// 处理模式点击事件
|
||
const handleModeClick = (modeId: string) => {
|
||
// 重置所有模式状态
|
||
lightModes.value.forEach(mode => {
|
||
const isTargetMode = mode.id === modeId;
|
||
mode.active = isTargetMode;
|
||
mode.switchStatus = isTargetMode;
|
||
});
|
||
|
||
// 可以在这里添加模式切换的业务逻辑
|
||
console.log(`切换到${lightModes.value.find(m => m.id === modeId)?.name}模式`);
|
||
};
|
||
|
||
// 监听开关状态变化
|
||
lightModes.value.forEach(mode => {
|
||
watch(() => mode.switchStatus, (newVal) => {
|
||
if (newVal) {
|
||
// 如果打开当前开关，关闭其他所有开关
|
||
handleModeClick(mode.id);
|
||
} else {
|
||
// 如果关闭当前开关
|
||
mode.active = false;
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.device-page {
|
||
.header-bar {
|
||
border-radius: 8px;
|
||
background: linear-gradient(135deg, #3400e7, #009bff);
|
||
color: white;
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-weight: 600;
|
||
|
||
.device-status {
|
||
.online {
|
||
color: #00ff00;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-wrapper {
|
||
.content-row {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.content-card {
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
|
||
background: white;
|
||
padding: 0px 20px 50px;
|
||
border: 1px solid #ebeef5;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.content-card_gps {
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
|
||
background: white;
|
||
padding: 0px 20px 50px;
|
||
border: 1px solid #ebeef5;
|
||
height: 78%;
|
||
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin-bottom: 20px;
|
||
color: #303133;
|
||
}
|
||
|
||
.light-mode {
|
||
display: flex;
|
||
|
||
justify-content: space-between;
|
||
}
|
||
.lacatin_gps {
|
||
height: 70px;
|
||
border-radius: 4px;
|
||
background: rgba(247, 248, 252, 1);
|
||
display: inline-block;
|
||
width: 400px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.mode-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 15px;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 8px;
|
||
width: 125px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
|
||
&.active {
|
||
border-color: #409eff;
|
||
background-color: rgba(64, 158, 255, 0.05);
|
||
}
|
||
|
||
.mode-icon {
|
||
width: 48px;
|
||
margin-bottom: 10px;
|
||
transition: all 0.3s ease;
|
||
object-fit: scale-down;
|
||
}
|
||
|
||
.mode-name {
|
||
font-size: 14px;
|
||
margin-bottom: 12px;
|
||
color: #606266;
|
||
}
|
||
|
||
.el-switch {
|
||
--el-switch-on-color: #409eff;
|
||
--el-switch-off-color: #dcdfe6;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.brightness-alarm {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
|
||
.brightness-control {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
border-radius: 39px;
|
||
box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
|
||
background: rgba(255, 255, 255, 1);
|
||
width: 70%;
|
||
height: 54px;
|
||
padding: 10px 20px;
|
||
|
||
.brightness-label {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
min-width: 70px;
|
||
}
|
||
|
||
.brightness-value {
|
||
font-size: 14px;
|
||
color: #409eff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.save-btn {
|
||
padding: 6px 20px;
|
||
border-radius: 29px;
|
||
background: rgba(2, 124, 251, 1);
|
||
border: none
|
||
}
|
||
|
||
.inputTFT {
|
||
width: 130px;
|
||
height: 40px;
|
||
}
|
||
}
|
||
|
||
.alarm-btn {
|
||
background-color: rgba(224, 52, 52, 1);
|
||
border-color: rgba(224, 52, 52, 1);
|
||
padding: 8px 20px;
|
||
border-radius: 27px;
|
||
}
|
||
}
|
||
|
||
.location-info {
|
||
.location-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
font-size: 14px;
|
||
color: #606266;
|
||
|
||
.location-icon {
|
||
margin-right: 8px;
|
||
font-weight: bold;
|
||
color: #409eff;
|
||
}
|
||
|
||
.view-btn {
|
||
margin: 0 8px;
|
||
padding: 0;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.form-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 15px;
|
||
margin-bottom: 15px;
|
||
text-align: right;
|
||
|
||
.form-item {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.form-label {
|
||
min-width: 35px;
|
||
font-size: 14px;
|
||
color: #606266;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.el-input {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.register-btn {
|
||
grid-column: 1 / 3;
|
||
justify-self: start;
|
||
padding: 6px 20px;
|
||
position: absolute;
|
||
right: 19px;
|
||
bottom: 30px;
|
||
border-radius: 29px;
|
||
background: rgba(2, 124, 251, 1);
|
||
border: none
|
||
}
|
||
}
|
||
|
||
.message-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
|
||
.el-textarea {
|
||
border: 1px solid rgba(29, 111, 255, 1);
|
||
border-radius: 4px;
|
||
background: rgba(247, 248, 252, 1);
|
||
border-radius: 6px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.el-textarea__inner {
|
||
background: rgba(247, 248, 252, 1);
|
||
}
|
||
|
||
.send-btn {
|
||
align-self: flex-end;
|
||
padding: 10px 20px;
|
||
border-radius: 29px;
|
||
background: rgba(2, 124, 251, 1);
|
||
border: none
|
||
}
|
||
}
|
||
|
||
.upload-area {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100px;
|
||
border: 1px dashed #dcdfe6;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.video-input {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
|
||
.el-input {
|
||
flex: 1;
|
||
}
|
||
|
||
.save-video-btn {
|
||
padding: 6px 12px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 响应式调整
|
||
@media (max-width: 768px) {
|
||
.header-bar {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
}
|
||
|
||
.form-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.form-grid .register-btn {
|
||
grid-column: 1;
|
||
}
|
||
|
||
.light-mode .mode-group {
|
||
gap: 10px;
|
||
}
|
||
|
||
.light-mode .mode-item {
|
||
width: 60px;
|
||
}
|
||
|
||
.light-mode .mode-icon {
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
}
|
||
}
|
||
</style> |