Compare commits
7 Commits
3231df14d9
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 9ddb412b7a | |||
| 1c9c5ab639 | |||
| d6675050e6 | |||
| ee50e38292 | |||
| 29752a70af | |||
| 1307e1bddf | |||
| 0ff3e4b1bc |
@ -6,8 +6,8 @@ VITE_APP_ENV = 'development'
|
||||
|
||||
# 开发环境
|
||||
# VITE_APP_BASE_API = 'http://139.224.253.23:8000'
|
||||
# VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
|
||||
VITE_APP_BASE_API = 'http://192.168.110.57:8000'
|
||||
VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
|
||||
# VITE_APP_BASE_API = 'http://192.168.110.57:8000'
|
||||
#代永飞接口
|
||||
# VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'
|
||||
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
VITE_APP_TITLE = 云平台管理系统
|
||||
|
||||
# 生产环境配置 晶全1
|
||||
VITE_APP_ENV = 'https://www.cnxhyc.com'
|
||||
VITE_APP_ENV = 'production'
|
||||
|
||||
# 生产环境配置 富源晟2
|
||||
# VITE_APP_ENV = 'https://fuyuanshen.com/backend-fys'
|
||||
|
||||
# 应用访问路径 晶全1
|
||||
VITE_APP_CONTEXT_PATH = '/'
|
||||
VITE_APP_CONTEXT_PATH = '/PC/'
|
||||
|
||||
# 高德地图Key
|
||||
VITE_AMAP_KEY='84a12a692ae378effdf741e16d584cd3'
|
||||
@ -25,6 +25,8 @@ VITE_APP_SNAILJOB_ADMIN = '/snail-job'
|
||||
# 生产环境 晶全3 代理访问
|
||||
VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
|
||||
|
||||
# VITE_APP_BASE_API = 'http://139.224.253.23:8000'
|
||||
|
||||
# 生产环境 富源晟3
|
||||
#VITE_APP_BASE_API = '/backend-fys'
|
||||
|
||||
|
||||
51
src/api/controlCenter/controlPanel/100J.ts
Normal file
51
src/api/controlCenter/controlPanel/100J.ts
Normal file
@ -0,0 +1,51 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
// 详情信息
|
||||
export const deviceDeatil = (id: string) => {
|
||||
return request({
|
||||
url: `/api/hby100j/device/${id}`,
|
||||
method: 'get',
|
||||
});
|
||||
};
|
||||
// 灯光模式
|
||||
function lightModeSettings (data: any) {
|
||||
return request({
|
||||
url: `/app/hby100j/device/lightAdjustment`,
|
||||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
};
|
||||
//频率调节
|
||||
function staticPowerSetting (data: any) {
|
||||
return request({
|
||||
url: `/app/hby100j/device/strobeFrequency`,
|
||||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
};
|
||||
// 修改音量
|
||||
function settingUpdateVolume (data: any) {
|
||||
return request({
|
||||
url: `/app/hby100j/device/updateVolume`,
|
||||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
};
|
||||
|
||||
// 强制报警
|
||||
function SosSetting (data: any) {
|
||||
return request({
|
||||
url: `/app/hby100j/device/forceAlarmActivation`,
|
||||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
export default {
|
||||
deviceDeatil,
|
||||
lightModeSettings:lightModeSettings,
|
||||
SosSetting:SosSetting,
|
||||
staticPowerSetting:staticPowerSetting,
|
||||
settingUpdateVolume:settingUpdateVolume
|
||||
};
|
||||
@ -36,14 +36,10 @@ export interface DeviceDetail {
|
||||
currentLightMode?: string;// 当前选中的灯光模式（如"strong"，对应强光）
|
||||
sendMsg: string;
|
||||
lightBrightness: string;
|
||||
personnelInfo: { // 人员信息（嵌套对象，根据接口调整）
|
||||
unitName: string; // 单位
|
||||
position: string; // 职位
|
||||
name: string; // 姓名
|
||||
code: string; // ID（身份证/工号）
|
||||
};
|
||||
strobeFrequency: string;
|
||||
volume: string;
|
||||
chargeState: string;
|
||||
alarmStatus:number
|
||||
alarmStatus: number
|
||||
}
|
||||
// 定义灯光模式的类型接口
|
||||
export interface LightMode {
|
||||
|
||||
@ -59,7 +59,7 @@ const props = defineProps({
|
||||
// 大小限制(MB)
|
||||
fileSize: propTypes.number.def(200),
|
||||
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
||||
fileType: propTypes.array.def(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf','apk','wgt']),
|
||||
fileType: propTypes.array.def(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf','apk','wgt','html','mp3','mp4']),
|
||||
// 是否显示提示
|
||||
isShowTip: propTypes.bool.def(true),
|
||||
// 禁用组件（仅查看文件）
|
||||
|
||||
@ -28,7 +28,6 @@ function copyTextToClipboard(input: string, { target = document.body } = {}) {
|
||||
element.value = input;
|
||||
// Prevent keyboard from showing on mobile
|
||||
element.setAttribute('readonly', '');
|
||||
|
||||
element.style.contain = 'strict';
|
||||
element.style.position = 'absolute';
|
||||
element.style.left = '-9999px';
|
||||
|
||||
886
src/views/controlCenter/100J/index.vue
Normal file
886
src/views/controlCenter/100J/index.vue
Normal file
@ -0,0 +1,886 @@
|
||||
<template>
|
||||
<div class="device-page p-2">
|
||||
<!-- 头部信息栏 -->
|
||||
<div class="header-bar">
|
||||
<div>设备名称：{{ deviceDetail.deviceName }}</div>
|
||||
<div>设备型号：{{ deviceDetail.deviceImei }}</div>
|
||||
<div class="device-status">设备状态：
|
||||
<span :class="{ online: deviceDetail.onlineStatus === 1, offline: deviceDetail?.onlineStatus === 0 }">
|
||||
{{ deviceDetail.onlineStatus === 1 ? '在线' : '离线' }}
|
||||
</span>
|
||||
</div>
|
||||
<div>电量：{{ deviceDetail.batteryPercentage || 0 }}%</div>
|
||||
<div>续航：{{ deviceDetail.batteryRemainingTime || "0" }} 分钟</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体内容区域 -->
|
||||
<div class="content-wrapper">
|
||||
<el-row :gutter="20" class="content-row" :class="deviceDetail.alarmStatus == 1 ? '' : 'displayNone'">
|
||||
<el-col :lg="24" :xs="24">
|
||||
<div class="staticRwo" :class="deviceDetail.alarmStatus == 1 ? '' : 'displayNone'"
|
||||
@click="showClose()">
|
||||
设备强制报警中!
|
||||
</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="light-mode">
|
||||
<!-- 使用v-for循环渲染灯光模式卡片 -->
|
||||
<div class="mode-card" :class="{ 'active': mode.active }"
|
||||
@click.stop="handleVoiceType(mode.id)" v-for="mode in sta_VoiceType" :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.switchStatusVioice" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :lg="8" :xs="24">
|
||||
<div class="brightness-alarm">
|
||||
<el-button type="danger" class="alarm-btn" @click="forceAlarm" :loading="forceAlarmLoading"
|
||||
v-if="deviceDetail.alarmStatus === 0 || deviceDetail.alarmStatus === null"
|
||||
:loading-text="forceAlarmLoading ? '报警中...' : '强制报警'"> {{
|
||||
forceAlarmLoading ? '报警中' : '强制报警' }}</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>经纬度 {{ deviceDetail && deviceDetail.longitude ?
|
||||
Number(deviceDetail.longitude).toFixed(4) : '无' }}
|
||||
{{ deviceDetail && deviceDetail.latitude ? Number(deviceDetail.latitude).toFixed(4)
|
||||
: '无' }} </span>
|
||||
</div>
|
||||
<div class="location-item">
|
||||
|
||||
<div>地址 <span class="lacatin_gps">{{ deviceDetail.address || "未获取到地址" }}</span></div>
|
||||
<el-button link type="primary" class="view-btn"
|
||||
@click="lookMap(deviceDetail)">查看</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="light-mode">
|
||||
<!-- 使用v-for循环渲染灯光模式卡片 -->
|
||||
<div class="mode-card" :class="{ 'active': mode.active }"
|
||||
@click.stop="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="content-card ">
|
||||
<div class="brightness-alarm">
|
||||
<div class="brightness-control">
|
||||
<span class="brightness-label">亮度</span>
|
||||
<el-input class="inputTFT" v-model="deviceDetail.lightBrightness" :min="10" :max="100"
|
||||
:step="1" size="small" />
|
||||
<span class="brightness-value">%</span>
|
||||
<el-button type="primary" class="save-btn" v-loading="lightModesLoading"
|
||||
@click="saveBtnlight">保存 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brightness-alarm">
|
||||
<div class="brightness-control">
|
||||
<span class="brightness-label">频率</span>
|
||||
<el-input class="inputTFT" v-model="deviceDetail.strobeFrequency" :min="0.5" :max="10"
|
||||
:step="1" size="small" />
|
||||
<span class="brightness-value">HZ</span>
|
||||
<el-button type="primary" class="save-btn" @click="saveBtnstrobe">保存 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brightness-alarm">
|
||||
<div class="brightness-control">
|
||||
<span class="brightness-label">音量</span>
|
||||
<el-input class="inputTFT" v-model="deviceDetail.volume" :min="10" :max="100" :step="1"
|
||||
size="small" />
|
||||
<span class="brightness-value">%</span>
|
||||
<el-button type="primary" class="save-btn" @click="saveBtnVolume">保存 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<!-- ===========充电提示框====== -->
|
||||
<el-dialog title="充电提示" v-model="centerDialogVisible" width="15%">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h3 style="color: rgba(224, 52, 52, 1)">设备电量低于20%</h3>
|
||||
</div>
|
||||
<div>请及时充电</div>
|
||||
<span slot="footer" class="dialog-footer" style="text-align: right;display: block;">
|
||||
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="DeviceControl" lang="ts">
|
||||
const route = useRoute();
|
||||
import { useMqtt } from '@/utils/mqtt';
|
||||
import api from '@/api/controlCenter/controlPanel/100J'
|
||||
import { DeviceDetail, LightMode } from '@/api/controlCenter/controlPanel/types';
|
||||
import {getDeviceStatus } from '@/utils/function';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const router = useRouter();
|
||||
// 导入图片资源（确保路径正确）
|
||||
import closeDefault from '@/assets/images/close.png';
|
||||
import closeActive from '@/assets/images/close_HL.png';
|
||||
import rb from '@/assets/images/rb.png';
|
||||
import rbAc from '@/assets/images/rbAc.png';
|
||||
import sg from '@/assets/images/sg.png';
|
||||
import sgAc from '@/assets/images/sgAc.png';
|
||||
const forceAlarmLoading = ref(false) //强制报警
|
||||
const lightModesLoading = ref(false)
|
||||
const centerDialogVisible = ref(false)
|
||||
const {
|
||||
connected,
|
||||
connect,
|
||||
subscribe,
|
||||
onConnect,
|
||||
onError,
|
||||
onMessage,
|
||||
disconnect
|
||||
} = useMqtt();
|
||||
// 报警模式
|
||||
const sta_VoiceType = ref([
|
||||
{
|
||||
id: 'fire',
|
||||
name: '消防',
|
||||
icon: sg, // 直接使用导入的变量
|
||||
activeIcon: sgAc,
|
||||
switchStatusVioice: true,
|
||||
active: true
|
||||
},
|
||||
{
|
||||
id: '0',
|
||||
name: '公安',
|
||||
icon: sg, // 直接使用导入的变量
|
||||
activeIcon: sgAc,
|
||||
active: false,
|
||||
switchStatusVioice: false,
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '交警',
|
||||
icon: sg, // 直接使用导入的变量
|
||||
activeIcon: sgAc,
|
||||
switchStatusVioice: false,
|
||||
active: false
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: '市政',
|
||||
icon: sg, // 直接使用导入的变量
|
||||
activeIcon: sgAc,
|
||||
switchStatusVioice: false,
|
||||
active: false
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '应急',
|
||||
icon: sg, // 直接使用导入的变量
|
||||
activeIcon: sgAc,
|
||||
switchStatusVioice: false,
|
||||
active: false
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: '医疗',
|
||||
icon: sg, // 直接使用导入的变量
|
||||
activeIcon: sgAc,
|
||||
switchStatusVioice: false,
|
||||
active: false
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: '铁道',
|
||||
icon: sg, // 直接使用导入的变量
|
||||
activeIcon: sgAc,
|
||||
switchStatusVioice: false,
|
||||
active: false
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'app语音',
|
||||
icon: sg, // 直接使用导入的变量
|
||||
activeIcon: sgAc,
|
||||
switchStatusVioice: false,
|
||||
active: false
|
||||
},
|
||||
{
|
||||
id: '-1',
|
||||
name: '关闭',
|
||||
icon: closeDefault, // 直接使用导入的变量
|
||||
activeIcon: closeActive,
|
||||
switchStatusVioice: false,
|
||||
active: false
|
||||
},
|
||||
])
|
||||
// 警示灯灯光模式数据（引用导入的图片）
|
||||
const lightModes = ref<LightMode[]>([
|
||||
{
|
||||
id: 'redBlueAlternate', // 红蓝交替
|
||||
name: '红蓝交替',
|
||||
icon: rb,
|
||||
activeIcon: rbAc,
|
||||
switchStatus: true,
|
||||
instructValue: '6',
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
id: 'redFlash', // 红闪
|
||||
name: '红闪',
|
||||
icon: rb,
|
||||
activeIcon: rbAc,
|
||||
switchStatus: false,
|
||||
instructValue: '0',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 'yellowFlash', // 黄闪
|
||||
name: '黄闪',
|
||||
icon: rb,
|
||||
activeIcon: rbAc,
|
||||
switchStatus: false,
|
||||
instructValue: '2',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
id: 'blueFlash', // 蓝闪
|
||||
name: '蓝闪',
|
||||
icon: rb,
|
||||
activeIcon: rbAc,
|
||||
switchStatus: false,
|
||||
instructValue: '1',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
id: 'redClockwise', // 红色顺时针
|
||||
name: '红色顺时针',
|
||||
icon: rb,
|
||||
activeIcon: rbAc,
|
||||
switchStatus: false,
|
||||
instructValue: '3',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
id: 'yellowClockwise', // 黄色顺时针
|
||||
name: '黄色顺时针',
|
||||
icon: rb,
|
||||
activeIcon: rbAc,
|
||||
switchStatus: false,
|
||||
instructValue: '4',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
id: 'redBlueClockwise', // 红蓝顺时针
|
||||
name: '红蓝顺时针',
|
||||
icon: rb,
|
||||
activeIcon: rbAc,
|
||||
switchStatus: false,
|
||||
instructValue: '5',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
id: 'close', // 关闭
|
||||
name: '关闭',
|
||||
icon: closeDefault,
|
||||
activeIcon: closeActive,
|
||||
switchStatus: false,
|
||||
instructValue: '-1',
|
||||
active: false
|
||||
},
|
||||
]);
|
||||
const deviceDetail = ref<DeviceDetail & { typeName: string }>({
|
||||
lightBrightness: '',
|
||||
deviceName: '',
|
||||
deviceImei: '',
|
||||
onlineStatus: 0,
|
||||
batteryPercentage: 0,
|
||||
batteryRemainingTime: '',
|
||||
longitude: '',
|
||||
latitude: '',
|
||||
address: '',
|
||||
sendMsg: '',
|
||||
chargeState: '0',
|
||||
typeName: '',
|
||||
alarmStatus: 0,
|
||||
strobeFrequency: '0.5',
|
||||
volume: '10'
|
||||
});
|
||||
const isUpdatingStatus = ref(false);
|
||||
// 报警模式// 2. 点击卡片事件
|
||||
const handleVoiceType = async (targetId: string) => {
|
||||
const deviceId = route.params.deviceId as string;
|
||||
if (!deviceId) return;
|
||||
const targetMode = sta_VoiceType.value.find(mode => mode.id === targetId);
|
||||
if (!targetMode) return;
|
||||
if (targetMode.active) return;
|
||||
sta_VoiceType.value.forEach(mode => {
|
||||
mode.active = mode.id === targetId;
|
||||
if (mode.active) {
|
||||
mode.switchStatusVioice = true;
|
||||
} else {
|
||||
mode.switchStatusVioice = false;
|
||||
}
|
||||
});
|
||||
// 2. 调用强制报警接口
|
||||
const params = {
|
||||
deviceIds: [deviceId],
|
||||
voiceStrobeAlarm: targetId === '-1' ? 0 : 1,
|
||||
mode: targetId == '-1' ? 0 : targetId
|
||||
};
|
||||
try {
|
||||
const res = await api.SosSetting(params);
|
||||
if (res.code == 200) {
|
||||
proxy?.$modal.msgSuccess(res.msg);
|
||||
}
|
||||
} catch (error) {
|
||||
await getList()
|
||||
}
|
||||
};
|
||||
// 警示灯模式
|
||||
const handleModeClick = async (modeId: string) => {
|
||||
if (isUpdatingStatus.value || isSyncingStatus.value) return;
|
||||
try {
|
||||
const deviceId = route.params.deviceId as string;
|
||||
if (!deviceId) return;
|
||||
const targetMode = lightModes.value.find(m => m.id === modeId);
|
||||
if (!targetMode || !targetMode.instructValue) return;
|
||||
isUpdatingStatus.value = true;
|
||||
const res = await api.lightModeSettings({
|
||||
deviceId,
|
||||
instructValue: targetMode.instructValue,
|
||||
deviceImei: deviceDetail.value.deviceImei,
|
||||
typeName: deviceDetail.value.typeName,
|
||||
});
|
||||
if (res.code === 200) {
|
||||
ElMessage.closeAll();
|
||||
proxy?.$modal.msgSuccess(res.msg);
|
||||
setActiveLightMode(modeId);
|
||||
} else {
|
||||
proxy?.$modal.msgError(res.msg);
|
||||
const prevActiveMode = lightModes.value.find(m => m.active);
|
||||
if (prevActiveMode) {
|
||||
setActiveLightMode(prevActiveMode.id);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
// 异常时恢复状态
|
||||
const prevActiveMode = lightModes.value.find(m => m.active);
|
||||
if (prevActiveMode) {
|
||||
setActiveLightMode(prevActiveMode.id);
|
||||
}
|
||||
} finally {
|
||||
isUpdatingStatus.value = false;
|
||||
}
|
||||
};
|
||||
const isSyncingStatus = ref(false);
|
||||
// 警示灯接口
|
||||
const setActiveLightMode = (targetModeId: string) => {
|
||||
isSyncingStatus.value = true;
|
||||
lightModes.value.forEach(mode => {
|
||||
const isActive = mode.id === targetModeId;
|
||||
mode.active = isActive;
|
||||
mode.switchStatus = isActive;
|
||||
});
|
||||
isSyncingStatus.value = false;
|
||||
};
|
||||
const getList = async () => {
|
||||
try {
|
||||
const deviceId = route.params.deviceId;
|
||||
if (!deviceId) return;
|
||||
const res = await api.deviceDeatil(deviceId as string);
|
||||
deviceDetail.value = res.data;
|
||||
|
||||
// ==========灯光模式逻辑==========
|
||||
let targetModeId = "redBlueAlternate";
|
||||
const mainLightMode = String(res.data.strobeMode);
|
||||
const matchedMode = lightModes.value.find(
|
||||
mode => mode.instructValue === mainLightMode
|
||||
);
|
||||
if (matchedMode) {
|
||||
targetModeId = matchedMode.id;
|
||||
}
|
||||
setActiveLightMode(targetModeId);
|
||||
// 报警模式
|
||||
const alarmMode = String(res.data.alarmMode); // 报警模式ID
|
||||
const voiceStrobeAlarm = String(res.data.voiceStrobeAlarm); // 报警开关状态：1开启，0关闭
|
||||
// 先重置所有报警模式的状态
|
||||
sta_VoiceType.value.forEach(mode => {
|
||||
mode.active = false;
|
||||
mode.switchStatusVioice = false;
|
||||
});
|
||||
if (voiceStrobeAlarm === '1') {
|
||||
const matchedVoiceMode = sta_VoiceType.value.find(
|
||||
mode => mode.id === alarmMode
|
||||
);
|
||||
if (matchedVoiceMode) {
|
||||
matchedVoiceMode.active = true;
|
||||
matchedVoiceMode.switchStatusVioice = true;
|
||||
} else {
|
||||
console.warn('未找到对应的报警模式:', alarmMode);
|
||||
}
|
||||
} else {
|
||||
const closeMode = sta_VoiceType.value.find(mode => mode.id === '-1');
|
||||
if (closeMode) {
|
||||
closeMode.active = true;
|
||||
closeMode.switchStatusVioice = true;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取设备详情失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 灯光亮度
|
||||
const saveBtnlight = () => {
|
||||
lightModesLoading.value = true
|
||||
let data = {
|
||||
deviceId: route.params.deviceId,
|
||||
brightness: deviceDetail.value.lightBrightness,
|
||||
}
|
||||
api.lightModeSettings(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
lightModesLoading.value = false
|
||||
proxy?.$modal.msgSuccess(res.msg);
|
||||
|
||||
} else {
|
||||
lightModesLoading.value = false
|
||||
proxy?.$modal.msgError(res.msg);
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
lightModesLoading.value = false
|
||||
});
|
||||
}
|
||||
// 爆闪频率
|
||||
const saveBtnstrobe = () => {
|
||||
let data = {
|
||||
deviceId: route.params.deviceId,
|
||||
frequency: deviceDetail.value.strobeFrequency,
|
||||
}
|
||||
api.staticPowerSetting(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
proxy?.$modal.msgSuccess(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
// 修改音量
|
||||
const saveBtnVolume = () => {
|
||||
let data = {
|
||||
deviceId: route.params.deviceId,
|
||||
volume: deviceDetail.value.volume,
|
||||
}
|
||||
api.settingUpdateVolume(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
proxy?.$modal.msgSuccess(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 解除报警
|
||||
const showClose = async () => {
|
||||
try {
|
||||
await proxy?.$modal.confirm('确定要对该设备解除报警？', '提示');
|
||||
// 2. 准备请求数据
|
||||
let data = {
|
||||
deviceIds: [route.params.deviceId],
|
||||
typeName: deviceDetail.value.typeName,
|
||||
deviceImeiList: [deviceDetail.value.deviceImei],
|
||||
instructValue: '0', //强制报警1，解除报警0
|
||||
}
|
||||
} catch (error: any) {
|
||||
}
|
||||
}
|
||||
|
||||
// 强制报警
|
||||
const forceAlarm = async () => {
|
||||
try {
|
||||
await proxy?.$modal.confirm('确定要对该设备开启强制报警？', '提示');
|
||||
forceAlarmLoading.value = true
|
||||
// 2. 准备请求数据
|
||||
let data = {
|
||||
deviceIds: [route.params.deviceId],
|
||||
typeName: deviceDetail.value.typeName,
|
||||
deviceImeiList: [deviceDetail.value.deviceImei],
|
||||
instructValue: '1', //强制报警1，解除报警0
|
||||
}
|
||||
|
||||
} catch (error: any) {
|
||||
// proxy?.$modal.msgWarning(error.msg)
|
||||
forceAlarmLoading.value = false;
|
||||
|
||||
} finally {
|
||||
forceAlarmLoading.value = false;
|
||||
}
|
||||
}
|
||||
const lookMap = (row: any) => {
|
||||
console.log(row, 'rowrowrowrowrworowrowrowrowrowrow');
|
||||
router.push({
|
||||
path: '/controlCenter/controlPanel',
|
||||
query: {
|
||||
view: 'map',
|
||||
deviceId: row.deviceId
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
await getList();
|
||||
});
|
||||
onUnmounted(() => {
|
||||
});
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.p-2 {
|
||||
background: rgba(247, 248, 252, 1);
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.offline {
|
||||
color: rgb(224, 52, 52);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: 289px;
|
||||
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: 107px;
|
||||
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;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.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: 100%;
|
||||
// height: 54px;
|
||||
padding: 10px 20px;
|
||||
margin-top: 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;
|
||||
margin: 20px 0px 30px 0;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.path-img {
|
||||
width: 52px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.staticRwo {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
|
||||
background: white;
|
||||
border: 1px solid #ebeef5;
|
||||
height: auto;
|
||||
line-height: 36px;
|
||||
box-sizing: border-box;
|
||||
text-indent: 15px;
|
||||
color: #ff0000;
|
||||
font-weight: bold;
|
||||
font-size: 17px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.displayNone {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
@ -37,7 +37,7 @@
|
||||
<el-collapse-item name="1">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryFormRef">
|
||||
<el-form-item label="设备类型" prop="deviceType">
|
||||
<el-select v-model="queryParams.deviceType" placeholder="设备类型" clearable>
|
||||
<el-select v-model="queryParams.deviceType" placeholder="设备类型" clearable filterable>
|
||||
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
|
||||
:value="item.deviceTypeId" />
|
||||
</el-select>
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
<el-collapse-item name="1">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryFormRef">
|
||||
<el-form-item label="设备类型" prop="deviceType">
|
||||
<el-select v-model="queryParams.deviceType" placeholder="设备类型">
|
||||
<el-select v-model="queryParams.deviceType" placeholder="设备类型" clearable filterable>
|
||||
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName" :value="item.deviceTypeId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@ -69,7 +69,7 @@
|
||||
:data="List"
|
||||
:height="Status.showSearch.length > 0 ? 'calc(100vh - 355px)' : 'calc(100vh - 255px)'"
|
||||
>
|
||||
<el-table-column type="selection" width="50" align="center" :selectable="isSelectable"/>
|
||||
<el-table-column type="selection" width="50" align="center" :selectable="isSelectable" />
|
||||
<el-table-column label="设备名称" align="center" prop="deviceName" />
|
||||
<el-table-column label="设备图片" align="center" prop="devicePic">
|
||||
<template #default="scope">
|
||||
@ -189,7 +189,7 @@
|
||||
<div class="Preview">
|
||||
<div class="imgContent" v-for="(item, index) in cEdit.fileParam">
|
||||
<img class="img" :src="item.src" />
|
||||
<div class="opt" @click.stop="DelImg(item,index,'fileParam')">
|
||||
<div class="opt" @click.stop="DelImg(item, index, 'fileParam')">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
@ -207,7 +207,14 @@
|
||||
<div class="title">操作说明</div>
|
||||
<div class="imgs">
|
||||
<div class="Preview">
|
||||
<img onerror="this.style.display='none'" v-for="(item, index) in cEdit.fileOprat" class="img" :src="item.src" />
|
||||
<div class="imgContent" v-for="(item, index) in cEdit.fileOprat">
|
||||
<img class="img" :src="item.src" />
|
||||
<div class="opt" @click.stop="DelImg(item, index, 'fileOprat')">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option center" @click.stop="showCheckFile('fileOprat')">添加</div>
|
||||
@ -231,8 +238,8 @@
|
||||
|
||||
<!-- 提示框 -->
|
||||
<el-dialog :width="300" :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" center>
|
||||
<span>
|
||||
{{ Status.confirm.text }}
|
||||
<span v-html="Status.confirm.text">
|
||||
|
||||
</span>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
@ -248,7 +255,7 @@
|
||||
import api from '@/api/debugCenter/debugCenter';
|
||||
import common from '@/utils/common';
|
||||
import apiTypeAll from '@/api/equipmentManagement/device/index';
|
||||
import uploadHelper from '@/api/debugCenter/deviceApi';
|
||||
import uploadHelper from '@/api/debugCenter/deviceApi';
|
||||
|
||||
var fileInput = document.getElementById('fileInput');
|
||||
var fileInputs = {
|
||||
@ -293,7 +300,7 @@ var cEdit = reactive({
|
||||
fileParam: [],
|
||||
fileOprat: [],
|
||||
Video: '',
|
||||
fileIds:[]
|
||||
fileIds: []
|
||||
});
|
||||
//页码控件数据
|
||||
var pagin = reactive({
|
||||
@ -340,8 +347,7 @@ function handleQuery() {
|
||||
const isSelectable = (row: any) => {
|
||||
// 仅当在线状态（onlineStatus == 1）时允许选中
|
||||
return row.onlineStatus === 1;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
function getList() {
|
||||
Status.loading = true;
|
||||
@ -425,6 +431,7 @@ function ShowMultiEdit(type: MideaType) {
|
||||
|
||||
setTimeout(dragImgAddEvt, 500);
|
||||
}
|
||||
|
||||
function ShowSingleEdit(item) {
|
||||
Status.ShowEditPop = true;
|
||||
//期待接口返回以下4个字段
|
||||
@ -454,7 +461,7 @@ function ShowSingleEdit(item) {
|
||||
return v.fileType == 1;
|
||||
})
|
||||
.map((v) => {
|
||||
return {id:v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
|
||||
return { id: v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
|
||||
});
|
||||
|
||||
cEdit.fileParam = arr
|
||||
@ -462,7 +469,7 @@ function ShowSingleEdit(item) {
|
||||
return v.fileType == 2;
|
||||
})
|
||||
.map((v) => {
|
||||
return {id:v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
|
||||
return { id: v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
|
||||
});
|
||||
|
||||
cEdit.fileBoot.src = '';
|
||||
@ -478,7 +485,7 @@ function CloseSingleEdit() {
|
||||
cEdit.fileBoot = { name: '', type: '', size: '', src: '', file: null };
|
||||
cEdit.fileOprat = [];
|
||||
cEdit.fileParam = [];
|
||||
cEdit.fileIds=[];
|
||||
cEdit.fileIds = [];
|
||||
}
|
||||
|
||||
//关闭上传框
|
||||
@ -591,7 +598,7 @@ function SaveItemData() {
|
||||
var formData = new FormData();
|
||||
formData.append('deviceId', cEdit.deviceId);
|
||||
formData.append('deviceImei', cEdit.deviceImei);
|
||||
formData.append("fileIds",cEdit.fileIds);
|
||||
formData.append('fileIds', cEdit.fileIds);
|
||||
|
||||
cEdit.fileParam.forEach((v) => {
|
||||
if (v.file) {
|
||||
@ -615,11 +622,20 @@ function SaveItemData() {
|
||||
if (res[0].status == 'fulfilled' && res[1].status == 'fulfilled') {
|
||||
if (res[0].value.code == 200 && res[1].value.code == 200) {
|
||||
CloseSingleEdit();
|
||||
alert('操作成功');
|
||||
alert('<span class="green">操作成功</span>');
|
||||
return;
|
||||
}
|
||||
}
|
||||
alert('全部失败或部分失败');
|
||||
if(res[0].status == 'fulfilled' && res[0].value.code == 200){
|
||||
alert('<span class="green">产品参数、操作说明、操作视频保存成功</span>，<span class="red">开机画面保存失败</span>');
|
||||
return;
|
||||
}
|
||||
|
||||
if(res[1].status == 'fulfilled' && res[1].value.code == 200){
|
||||
alert('<span class="red">产品参数、操作说明、操作视频保存失败</span>，<span class="green">开机画面保存成功</span>');
|
||||
return;
|
||||
}
|
||||
alert('<span class="red">操作失败</span>');
|
||||
})
|
||||
.finally(() => {
|
||||
Status.fullLoading = false;
|
||||
@ -822,17 +838,15 @@ var hideConfirm = function () {
|
||||
};
|
||||
|
||||
//删除某个图片
|
||||
function DelImg(item,index,type){
|
||||
|
||||
if(item.id){
|
||||
confirm('您确认删除吗?',()=>{
|
||||
cEdit.fileIds.push(item.id);
|
||||
cEdit[type].splice(index,1);
|
||||
|
||||
});
|
||||
}else{
|
||||
cEdit[type].splice(index,1);
|
||||
}
|
||||
function DelImg(item, index, type) {
|
||||
if (item.id) {
|
||||
confirm('您确认删除吗?', () => {
|
||||
cEdit.fileIds.push(item.id);
|
||||
cEdit[type].splice(index, 1);
|
||||
});
|
||||
} else {
|
||||
cEdit[type].splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@ -1079,8 +1093,8 @@ onMounted(() => {
|
||||
cursor: pointer;
|
||||
color: #bd2b2b;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
line-height: 90px;
|
||||
text-align: center;
|
||||
line-height: 90px;
|
||||
}
|
||||
.SingEditContent .item .imgContent:hover .opt {
|
||||
display: block !important;
|
||||
@ -1093,5 +1107,4 @@ onMounted(() => {
|
||||
.red {
|
||||
color: rgba(224, 52, 52, 1);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -34,19 +34,22 @@
|
||||
|
||||
<el-table v-loading="loading" border :data="deviceTypeList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="50" align="center" />
|
||||
<el-table-column prop="devicePic" label="设备图片">
|
||||
<template #default="scope">
|
||||
<el-popover placement="right" trigger="click">
|
||||
<template #reference>
|
||||
<img v-if="scope.row.devicePic" :src="scope.row.devicePic"
|
||||
style="width: 50px; height: 50px; 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;">
|
||||
</template>
|
||||
<img :src="scope.row.devicePic" style="max-width: 600px; max-height: 600px; object-fit: contain" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="devicePic" label="设备图片">
|
||||
<template #default="scope">
|
||||
<el-popover placement="right" trigger="click">
|
||||
<template #reference>
|
||||
<img
|
||||
v-if="scope.row.devicePic"
|
||||
:src="scope.row.devicePic"
|
||||
style="width: 50px; height: 50px; 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" />
|
||||
</template>
|
||||
<img :src="scope.row.devicePic" style="max-width: 600px; max-height: 600px; object-fit: contain" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="型号名称" align="center" prop="typeName" />
|
||||
<el-table-column label="类型code" align="center" prop="appModelDictionary">
|
||||
<template #default="scope">
|
||||
@ -85,6 +88,9 @@
|
||||
<el-tooltip v-if="scope.row.id !== 1" content="删除" placement="top">
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="更多" placement="top">
|
||||
<el-button link type="primary" icon="More" @click="ShowSingleEdit(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -173,6 +179,74 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="Status.ShowEditPop" title="编辑" :draggable="true" width="50%">
|
||||
<div class="SingEditContent" v-loading="Status.fullLoading">
|
||||
<div class="Param item">
|
||||
<div class="title">产品参数</div>
|
||||
<div class="imgs">
|
||||
<div class="Preview">
|
||||
<div class="imgContent" v-for="(item, index) in cEdit.fileParam">
|
||||
<img class="img" :src="item.src" />
|
||||
<div class="opt" @click.stop="DelImg(item, index, 'fileParam')">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option center" @click.stop="showCheckFile('fileParam')">添加</div>
|
||||
<div class="clear">
|
||||
<input type="file" accept="image/*" id="fileParam" class="displayNone" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="Oprat item">
|
||||
<div class="title">操作说明</div>
|
||||
<div class="imgs">
|
||||
<div class="Preview">
|
||||
<div class="imgContent" v-for="(item, index) in cEdit.fileOprat">
|
||||
<img class="img" :src="item.src" />
|
||||
<div class="opt" @click.stop="DelImg(item, index, 'fileOprat')">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option center" @click.stop="showCheckFile('fileOprat')">添加</div>
|
||||
<div class="clear">
|
||||
<input type="file" accept="image/*" id="fileOprat" class="displayNone" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="Video item">
|
||||
<div class="title">操作视频</div>
|
||||
<div class="img fleft" style="width: calc(100% - 80px)">
|
||||
<el-input v-model="cEdit.Video" placeholder="输入网址" />
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center" style="margin-top: 20px">
|
||||
<el-button type="primary" @click="SaveItemData"> 确定 </el-button>
|
||||
<el-button type="primary" plain @click="CloseSingleEdit"> 取消 </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 提示框 -->
|
||||
<el-dialog :width="300" :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" center>
|
||||
<span>
|
||||
{{ Status.confirm.text }}
|
||||
</span>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="Status.confirm.OkCallback"> 确定 </el-button>
|
||||
<el-button v-show="Status.confirm.showCancel" @click="Status.confirm.cancelCallback">取消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -181,6 +255,8 @@ import api from '@/api/equipmentManagement/deviceType/index';
|
||||
import { deviceTypeQuery } from '@/api/equipmentManagement/deviceType/types';
|
||||
import { getDicts } from '@/api/system/dict/data';
|
||||
import { to } from 'await-to-js';
|
||||
import debug from '@/api/debugCenter/debugCenter';
|
||||
import common from '@/utils/common';
|
||||
import { ComponentInternalInstance, getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue';
|
||||
import {
|
||||
ElDialog,
|
||||
@ -228,7 +304,37 @@ const loadingIng = ref(false);
|
||||
const appmodelDictionaryOptions = ref<any[]>([]);
|
||||
const pcmodelDictionaryOptions = ref<any[]>([]);
|
||||
var fileC = null;
|
||||
var uploadFile=false;
|
||||
var uploadFile = false;
|
||||
|
||||
const Status = reactive<any>({
|
||||
ShowEditPop: false,
|
||||
fullLoading: false,
|
||||
confirm: {
|
||||
//弹出框的配置
|
||||
Visible: false,
|
||||
title: '',
|
||||
text: '',
|
||||
cancelCallback: null,
|
||||
OkCallback: null,
|
||||
showCancel: true
|
||||
}
|
||||
});
|
||||
|
||||
var cEdit = reactive({
|
||||
deviceId: '',
|
||||
deviceImei: '',
|
||||
fileBoot: { name: '', type: '', size: '', src: '', file: null },
|
||||
fileParam: [],
|
||||
fileOprat: [],
|
||||
Video: '',
|
||||
fileIds: []
|
||||
});
|
||||
var fileInput = document.getElementById('fileInput');
|
||||
var fileInputs = {
|
||||
fileParam: null,
|
||||
fileOprat: null
|
||||
};
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
@ -385,22 +491,19 @@ const submitForm = () => {
|
||||
communicationMode: Number(form.value.communicationMode)
|
||||
};
|
||||
|
||||
let formData = new FormData();
|
||||
let keys = Object.keys(payload);
|
||||
|
||||
|
||||
let formData = new FormData();
|
||||
let keys=Object.keys(payload);
|
||||
|
||||
keys.forEach(key=>{
|
||||
if(key!=='devicePic'){
|
||||
if(payload[key]!==null && payload[key]!==undefined){
|
||||
formData.append(key,payload[key]);
|
||||
}
|
||||
|
||||
keys.forEach((key) => {
|
||||
if (key !== 'devicePic') {
|
||||
if (payload[key] !== null && payload[key] !== undefined) {
|
||||
formData.append(key, payload[key]);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if(uploadFile && fileC && fileC.files.length){
|
||||
formData.append('file',fileC.files[0]);
|
||||
if (uploadFile && fileC && fileC.files.length) {
|
||||
formData.append('file', fileC.files[0]);
|
||||
}
|
||||
|
||||
//如果要上传文件就用formData,不上传使用payload
|
||||
@ -421,7 +524,8 @@ function DropImg(item) {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
})
|
||||
.then(() => {
|
||||
form.value.devicePic = null;
|
||||
})
|
||||
.catch(() => {});
|
||||
@ -429,10 +533,9 @@ function DropImg(item) {
|
||||
|
||||
//选择图片
|
||||
function AddImg(item) {
|
||||
uploadFile=false;
|
||||
uploadFile = false;
|
||||
initControl();
|
||||
fileC.click();
|
||||
|
||||
}
|
||||
/**
|
||||
* 关闭用户弹窗
|
||||
@ -453,7 +556,7 @@ const resetForm = () => {
|
||||
|
||||
function initControl() {
|
||||
if (fileC) {
|
||||
fileC.value="";
|
||||
fileC.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
@ -462,11 +565,10 @@ function initControl() {
|
||||
if (this.files.length) {
|
||||
let file = this.files[0];
|
||||
if (file.type.indexOf('image/') === 0) {
|
||||
|
||||
let reader = new FileReader();
|
||||
|
||||
reader.onload = function (e) {
|
||||
uploadFile=true;
|
||||
uploadFile = true;
|
||||
form.value.devicePic = e.target.result;
|
||||
};
|
||||
|
||||
@ -484,6 +586,233 @@ function initControl() {
|
||||
});
|
||||
}
|
||||
|
||||
function ShowSingleEdit(item) {
|
||||
debugger;
|
||||
Status.ShowEditPop = true;
|
||||
//期待接口返回以下4个字段
|
||||
|
||||
cEdit.deviceId = item.deviceTypeId;
|
||||
|
||||
// cEdit.fileBoot.src=item.fileBoot;
|
||||
|
||||
// cEdit.fileOprat.src = item.fileOprat;
|
||||
// cEdit.fileParam.src =item.fileParam;
|
||||
|
||||
debug.getDeviceInfoById(item.deviceTypeId).then((res) => {
|
||||
if (res.code == 200) {
|
||||
let video = res.data.appOperationVideoVoList.find((v) => {
|
||||
return v.videoUrl;
|
||||
});
|
||||
|
||||
if (video) {
|
||||
cEdit.Video = video.videoUrl;
|
||||
}
|
||||
|
||||
let arr = res.data.appBusinessFileVoList;
|
||||
|
||||
cEdit.fileOprat = arr
|
||||
.filter((v) => {
|
||||
return v.fileType == 1;
|
||||
})
|
||||
.map((v) => {
|
||||
return { id: v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
|
||||
});
|
||||
|
||||
cEdit.fileParam = arr
|
||||
.filter((v) => {
|
||||
return v.fileType == 2;
|
||||
})
|
||||
.map((v) => {
|
||||
return { id: v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(addFileEvt, 500);
|
||||
}
|
||||
|
||||
function addFileEvt() {
|
||||
var checkImgOver = function (res, type) {
|
||||
cEdit[type].push(res);
|
||||
};
|
||||
if (!fileInputs.fileOprat || !fileInputs.fileParam) {
|
||||
fileInputs.fileOprat = document.getElementById('fileOprat');
|
||||
fileInputs.fileParam = document.getElementById('fileParam');
|
||||
|
||||
let keys = Object.keys(fileInputs);
|
||||
keys.forEach((k) => {
|
||||
fileInputs[k].addEventListener('change', () => {
|
||||
handleFiles(fileInputs[k].files).then((res) => {
|
||||
checkImgOver(res, k);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 处理选择的文件
|
||||
function handleFiles(files) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
if (files.length === 0) {
|
||||
reject();
|
||||
return;
|
||||
}
|
||||
|
||||
let file = files[0];
|
||||
if (file.size > 10485760) {
|
||||
alert('请选择10M以内的文件');
|
||||
reject();
|
||||
return;
|
||||
}
|
||||
if (file.type.indexOf('image/') == -1) {
|
||||
alert('只能选择图片文件');
|
||||
reject();
|
||||
return;
|
||||
}
|
||||
let json = { file: '', name: '', type: '', size: '', src: null };
|
||||
json.file = file;
|
||||
json.name = file.name;
|
||||
json.type = file.type.replace('image/', '');
|
||||
json.size = common.formatBytes(file.size);
|
||||
|
||||
const reader = new FileReader();
|
||||
|
||||
// 读取完成后设置图片源
|
||||
reader.onload = function (e) {
|
||||
json.src = e.target.result; // 结果是DataURL
|
||||
resolve(json);
|
||||
};
|
||||
reader.onerror = function (ex) {
|
||||
resolve(json);
|
||||
};
|
||||
|
||||
// 读取图片文件
|
||||
reader.readAsDataURL(file);
|
||||
} catch (ex) {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function DelImg(item, index, type) {
|
||||
|
||||
confirm('您确认删除吗?', () => {
|
||||
if (item.id) {
|
||||
cEdit.fileIds.push(item.id);
|
||||
cEdit[type].splice(index, 1);
|
||||
} else {
|
||||
cEdit[type].splice(index, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showCheckFile(type) {
|
||||
if (!type) {
|
||||
fileInput.click();
|
||||
} else {
|
||||
let dom = fileInputs[type];
|
||||
if (!dom) {
|
||||
dom = document.getElementById(type);
|
||||
}
|
||||
dom.click();
|
||||
}
|
||||
}
|
||||
|
||||
//保存单个设备的数据
|
||||
function SaveItemData() {
|
||||
// if (!cEdit.fileBoot.file && !cEdit.fileParam.length && !cEdit.fileOprat.length && !cEdit.Video) {
|
||||
// alert('开机画面、产品参数、操作说明、操作视频四个项至少填写一项。');
|
||||
// return;
|
||||
// }
|
||||
Status.fullLoading = true;
|
||||
var formData = new FormData();
|
||||
formData.append('deviceId', cEdit.deviceId);
|
||||
formData.append('deviceImei', cEdit.deviceImei);
|
||||
formData.append('fileIds', cEdit.fileIds);
|
||||
|
||||
cEdit.fileParam.forEach((v) => {
|
||||
if (v.file) {
|
||||
formData.append('parameterFiles', v.file); //产品参数
|
||||
}
|
||||
});
|
||||
|
||||
cEdit.fileOprat.forEach((v) => {
|
||||
if (v.file) {
|
||||
formData.append('explanationFiles', v.file); //操作说明
|
||||
}
|
||||
});
|
||||
|
||||
formData.append('videoUrl', cEdit.Video); //操作视频
|
||||
|
||||
let promise1 = debug.updateItem(formData);
|
||||
|
||||
Promise.allSettled([promise1])
|
||||
.then((res) => {
|
||||
if (res[0].status == 'fulfilled') {
|
||||
if (res[0].value.code == 200) {
|
||||
CloseSingleEdit();
|
||||
alert('操作成功');
|
||||
return;
|
||||
}
|
||||
}
|
||||
alert('全部失败或部分失败');
|
||||
})
|
||||
.finally(() => {
|
||||
Status.fullLoading = false;
|
||||
});
|
||||
}
|
||||
|
||||
function CloseSingleEdit() {
|
||||
Status.ShowEditPop = false;
|
||||
cEdit.Video = '';
|
||||
cEdit.fileBoot = { name: '', type: '', size: '', src: '', file: null };
|
||||
cEdit.fileOprat = [];
|
||||
cEdit.fileParam = [];
|
||||
cEdit.fileIds = [];
|
||||
}
|
||||
|
||||
window.confirm = function (text, OK, cancel, title) {
|
||||
let Cfg = {
|
||||
Visible: true,
|
||||
title: title ? title : '提示',
|
||||
text: text ? text : '此操作不可逆，您确定这样做吗？',
|
||||
OkCallback: () => {
|
||||
Status.confirm.Visible = false;
|
||||
if (OK) {
|
||||
OK();
|
||||
}
|
||||
},
|
||||
showCancel: true,
|
||||
cancelCallback: () => {
|
||||
Status.confirm.Visible = false;
|
||||
if (cancel) {
|
||||
cancel();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Status.confirm = Cfg;
|
||||
};
|
||||
|
||||
window.alert = function (text, OK, title) {
|
||||
let Cfg = {
|
||||
Visible: true,
|
||||
title: title ? title : '提示',
|
||||
text: text ? text : '不符合规则',
|
||||
OkCallback: () => {
|
||||
Status.confirm.Visible = false;
|
||||
if (OK) {
|
||||
OK();
|
||||
}
|
||||
},
|
||||
showCancel: false,
|
||||
cancelCallback: null
|
||||
};
|
||||
|
||||
Status.confirm = Cfg;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList(); // 初始化列表数据
|
||||
getDict();
|
||||
@ -504,7 +833,6 @@ onMounted(() => {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid rgb(220, 223, 230);
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.typeImgContent .img {
|
||||
@ -553,4 +881,256 @@ onMounted(() => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fleft {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fright {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.displayNone {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 84px);
|
||||
height: calc(100vh - 84px);
|
||||
background: rgba(247, 248, 252, 1);
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 20px;
|
||||
font-family: 'Microsoft YaHei';
|
||||
}
|
||||
|
||||
.topTool {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-content: center;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #e1e2e5f2;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.percent100 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
:deep .el-collapse-item__header {
|
||||
display: none !important;
|
||||
}
|
||||
:deep .el-collapse,
|
||||
:deep .el-collapse-item__wrap {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.MultiEditContent {
|
||||
height: 230px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border: 1px dashed rgba(56, 64, 79, 0.4);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#MultiEditContent.active {
|
||||
border-color: #3498db;
|
||||
background-color: #f0f7ff;
|
||||
}
|
||||
|
||||
.txt1 {
|
||||
color: rgba(56, 64, 79, 1);
|
||||
|
||||
font-family: Microsoft YaHei;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.txt2 {
|
||||
color: rgba(56, 64, 79, 0.6);
|
||||
|
||||
font-family: Microsoft YaHei;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
}
|
||||
.txt3 {
|
||||
color: rgba(2, 124, 251, 1);
|
||||
cursor: pointer;
|
||||
font-family: Microsoft YaHei;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SingEditContent .item {
|
||||
width: 100%;
|
||||
min-height: 90px;
|
||||
height: auto;
|
||||
border-bottom: 1px dashed #e7e7e7;
|
||||
|
||||
padding: 12px 0px;
|
||||
}
|
||||
|
||||
.Multi .item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding-top: 0px !important;
|
||||
}
|
||||
|
||||
.SingEditContent .item.Video {
|
||||
height: 32px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.SingEditContent .item .title {
|
||||
width: 80px;
|
||||
float: left;
|
||||
color: rgba(56, 64, 79, 1);
|
||||
|
||||
font-family: Microsoft YaHei;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SingEditContent .item .imgs {
|
||||
width: calc(100% - 110px);
|
||||
float: left;
|
||||
min-height: 90px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.SingEditContent .item .option {
|
||||
width: 30px;
|
||||
float: left;
|
||||
height: 100%;
|
||||
color: rgba(2, 124, 251, 1);
|
||||
cursor: pointer;
|
||||
font-family: Microsoft YaHei;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#dropArea.active {
|
||||
border-color: #3498db;
|
||||
background-color: #f0f7ff;
|
||||
}
|
||||
.imgPreview {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
padding-left: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.imgPreview .img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.imgPreview .txt {
|
||||
padding-left: 10px;
|
||||
width: calc(100% - 60px);
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.SingEditContent .Preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.SingEditContent .Preview .img {
|
||||
height: 90px;
|
||||
width: 160px;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d3d5d7;
|
||||
}
|
||||
|
||||
.SingEditContent .item .imgContent {
|
||||
height: 90px;
|
||||
width: 160px;
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.SingEditContent .item .imgContent .opt {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-color: #00000091;
|
||||
display: none;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 90px;
|
||||
width: 160px;
|
||||
cursor: pointer;
|
||||
color: #bd2b2b;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
line-height: 90px;
|
||||
}
|
||||
.SingEditContent .item .imgContent:hover .opt {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: rgba(0, 165, 82, 1);
|
||||
}
|
||||
|
||||
.red {
|
||||
color: rgba(224, 52, 52, 1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -226,8 +226,8 @@
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="设备类型" prop="deviceType">
|
||||
<el-select v-model="form.deviceType" placeholder="设备类型" @change="(id) => handleDeviceTypeChange(id)"
|
||||
>
|
||||
<el-select v-model="form.deviceType" placeholder="设备类型" @change="(id) => handleDeviceTypeChange(id)"
|
||||
clearable filterable>
|
||||
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
|
||||
:value="item.id" />
|
||||
</el-select>
|
||||
@ -248,7 +248,7 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="showImeiField">
|
||||
<el-row v-if="showImeiField">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="设备IMEI" prop="deviceImei" required>
|
||||
<el-input v-model="form.deviceImei" placeholder="请输入设备IMEI" />
|
||||
@ -622,6 +622,7 @@ const handleAdd = async () => {
|
||||
};
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: deviceForm) => {
|
||||
debugger;
|
||||
reset();
|
||||
dialog.visible = true;
|
||||
dialog.title = '修改设备';
|
||||
@ -663,29 +664,29 @@ const handleDeviceTypeChange = async (deviceTypeId: string | number) => {
|
||||
showImeiField.value = false;
|
||||
communicationModeInfo.value = null;
|
||||
// 编辑时如果有值，根据已有值确定显示哪个字段
|
||||
if (form.value.id) {
|
||||
console.log('zheshi me1 ');
|
||||
// 1. 先判断：Mac 和 Imei 都有值（新增的关键分支）
|
||||
const hasMac = typeof form.value.deviceMac === 'string' && form.value.deviceMac.trim() !== '';
|
||||
const hasImei = typeof form.value.deviceImei === 'string' && form.value.deviceImei.trim() !== '';
|
||||
if (hasMac && hasImei) {
|
||||
//两个都有值：显示两个字段 + 都加校验
|
||||
showMacField.value = true;
|
||||
showImeiField.value = true;
|
||||
console.log('两个字段都有值');
|
||||
} else if (hasMac) {
|
||||
showMacField.value = true;
|
||||
showImeiField.value = false;
|
||||
rules.value.deviceImei = [];
|
||||
console.log('只有 Mac 有值');
|
||||
} else if (hasImei) {
|
||||
showImeiField.value = true;
|
||||
showMacField.value = false;
|
||||
rules.value.deviceMac = [];
|
||||
console.log('只有 Imei 有值');
|
||||
}
|
||||
return;
|
||||
}
|
||||
// if (form.value.id) {
|
||||
// console.log('zheshi me1 ');
|
||||
// // 1. 先判断：Mac 和 Imei 都有值（新增的关键分支）
|
||||
// const hasMac = typeof form.value.deviceMac === 'string' && form.value.deviceMac.trim() !== '';
|
||||
// const hasImei = typeof form.value.deviceImei === 'string' && form.value.deviceImei.trim() !== '';
|
||||
// if (hasMac && hasImei) {
|
||||
// //两个都有值：显示两个字段 + 都加校验
|
||||
// showMacField.value = true;
|
||||
// showImeiField.value = true;
|
||||
// console.log('两个字段都有值');
|
||||
// } else if (hasMac) {
|
||||
// showMacField.value = true;
|
||||
// showImeiField.value = false;
|
||||
// rules.value.deviceImei = [];
|
||||
// console.log('只有 Mac 有值');
|
||||
// } else if (hasImei) {
|
||||
// showImeiField.value = true;
|
||||
// showMacField.value = false;
|
||||
// rules.value.deviceMac = [];
|
||||
// console.log('只有 Imei 有值');
|
||||
// }
|
||||
// return;
|
||||
// }
|
||||
if (isProcessing) return;
|
||||
isProcessing = true;
|
||||
// 新增或编辑时没有值，根据设备类型获取通讯方式
|
||||
|
||||
@ -141,6 +141,7 @@
|
||||
import request from '@/utils/request';
|
||||
import common from '@/utils/common';
|
||||
import api from '@/api/equipmentManagement/device/shareManage';
|
||||
import { dataURLtoImage } from 'image-conversion';
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
@ -211,18 +212,172 @@ var dic = reactive({
|
||||
});
|
||||
|
||||
|
||||
var power = computed(() => {
|
||||
let arr = [];
|
||||
let keys = Object.keys(dic);
|
||||
keys.forEach((key) => {
|
||||
arr.push({ label: dic[key], value: key });
|
||||
});
|
||||
return arr;
|
||||
});
|
||||
var power =ref([]);
|
||||
|
||||
function calcPower() {
|
||||
|
||||
|
||||
let array = [{
|
||||
value: "1",
|
||||
label: "灯光模式",
|
||||
checked: false,
|
||||
type: ['BJQ6170', 'HBY670','HBY102','BJQ6155','HBY650','BJQ7305','61XH55']
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "激光模式",
|
||||
checked: false,
|
||||
type: ['BJQ6170']
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
label: "开机画面",
|
||||
checked: false,
|
||||
type: ['HBY210', 'BJQ6170', 'HBY670','BJQ6155','HBY650','BJQ7305','61XH55']
|
||||
},
|
||||
{
|
||||
value: "4",
|
||||
label: "人员信息登记",
|
||||
checked: false,
|
||||
type: ['HBY210', 'BJQ6170', 'HBY670','BJQ6155','HBY650','BJQ7305','61XH55']
|
||||
},
|
||||
{
|
||||
value: "5",
|
||||
label: "发送信息",
|
||||
checked: false,
|
||||
type: ['HBY210', 'BJQ6170', 'HBY670']
|
||||
},
|
||||
{
|
||||
value: "6",
|
||||
label: "产品信息",
|
||||
checked: false,
|
||||
type: ['HBY210', 'BJQ6170', 'HBY670']
|
||||
}, {
|
||||
value: "41",
|
||||
label: "静电探测",
|
||||
checked: false,
|
||||
type: ['HBY670','HBY650']
|
||||
}, {
|
||||
value: "42",
|
||||
label: "SOS",
|
||||
checked: false,
|
||||
type: ['HBY670','BJQ4877']
|
||||
},
|
||||
{
|
||||
value: "43",
|
||||
label: "联机设备",
|
||||
checked: false,
|
||||
type: ['HBY210']
|
||||
},
|
||||
{
|
||||
value: "44",
|
||||
label: "报警声音",
|
||||
checked: false,
|
||||
type: ['HBY210']
|
||||
},
|
||||
{
|
||||
value: "45",
|
||||
label: "自动报警",
|
||||
checked: false,
|
||||
type: ['HBY210']
|
||||
},
|
||||
{
|
||||
value: "46",
|
||||
label: "手动报警",
|
||||
checked: false,
|
||||
type: ['HBY210','HBY102']
|
||||
},
|
||||
{
|
||||
value: "47",
|
||||
label: "报警时长",
|
||||
checked: false,
|
||||
type: ['HBY210']
|
||||
},
|
||||
{
|
||||
value: "48",
|
||||
label: "物体感应",
|
||||
checked: false,
|
||||
type: ['HBY102']
|
||||
},
|
||||
{
|
||||
value: "49",
|
||||
label: "联机模式",
|
||||
checked: false,
|
||||
type: ['HBY102']
|
||||
},
|
||||
|
||||
{
|
||||
value: "50",
|
||||
label: "报警模式",
|
||||
checked: false,
|
||||
type: ['HBY100','HBY100-J']
|
||||
},
|
||||
|
||||
{
|
||||
value: "51",
|
||||
label: "警示灯",
|
||||
checked: false,
|
||||
type: ['HBY100','HBY100-J']
|
||||
},
|
||||
|
||||
{
|
||||
value: "52",
|
||||
label: "语音管理",
|
||||
checked: false,
|
||||
type: ['HBY100','HBY100-J']
|
||||
},
|
||||
|
||||
{
|
||||
value: "53",
|
||||
label: "箭头模式",
|
||||
checked: false,
|
||||
type: ['BJQ4877']
|
||||
},
|
||||
{
|
||||
value: "54",
|
||||
label: "配组设置",
|
||||
checked: false,
|
||||
type: ['BJQ4877']
|
||||
},
|
||||
{
|
||||
value: "55",
|
||||
label: "修改信道",
|
||||
checked: false,
|
||||
type: ['BJQ4877']
|
||||
},
|
||||
{
|
||||
value: "56",
|
||||
label: "灯光类型设置",
|
||||
checked: false,
|
||||
type: ['HBY100-J']
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
let f=array.filter(v=>{
|
||||
if(v.type.indexOf(data.value.typeName)>-1){
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
})
|
||||
|
||||
power.value=f;
|
||||
|
||||
// let arr = [];
|
||||
// let keys = Object.keys(dic);
|
||||
|
||||
// keys.forEach((key) => {
|
||||
// arr.push({ label: dic[key], value: key });
|
||||
// });
|
||||
// return arr;
|
||||
};
|
||||
|
||||
|
||||
//打开编辑
|
||||
function ShowEdit() {
|
||||
Status.ShowEditPop = true;
|
||||
getUsrs();
|
||||
calcPower();
|
||||
}
|
||||
//关闭编辑
|
||||
function CloseEdit() {
|
||||
@ -276,6 +431,7 @@ function SaveFormData(type) {
|
||||
}
|
||||
|
||||
function getPower(item) {
|
||||
|
||||
let str = [];
|
||||
if (item && item.permission) {
|
||||
let arr = item.permission.split(',');
|
||||
|
||||
@ -4,25 +4,25 @@
|
||||
<div>
|
||||
<h2>数据总览</h2>
|
||||
<div class="data-item">
|
||||
<div class="data_bck">
|
||||
<div class="data_bck data">
|
||||
<div class="number">
|
||||
<span>{{ DataOverview.devicesNumber }}</span> 个
|
||||
</div>
|
||||
<div class="title_number">设备数量</div>
|
||||
</div>
|
||||
<div class="data_green">
|
||||
<div class="data_green data">
|
||||
<div class="number">
|
||||
<span>{{ DataOverview.equipmentOnline }}</span> 个
|
||||
</div>
|
||||
<div class="title_number">在线设备</div>
|
||||
</div>
|
||||
<div class="data_orgine">
|
||||
<div class="data_orgine data">
|
||||
<div class="number">
|
||||
<span>{{ DataOverview.binding }}</span> 个
|
||||
</div>
|
||||
<div class="title_number">已绑定设备</div>
|
||||
</div>
|
||||
<div class="data_red">
|
||||
<div class="data_red data">
|
||||
<div class="number">
|
||||
<span>{{ DataOverview.equipmentAbnormal }}</span> 个
|
||||
</div>
|
||||
@ -501,6 +501,10 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.data,.content-row,.region-chart-card{
|
||||
box-shadow: 0px 0px 12px 0px #3c3c3c2b;
|
||||
}
|
||||
.home {
|
||||
padding: 10px 20px 10px 20px;
|
||||
background-color: #f5f7fa;
|
||||
|
||||
@ -6,3 +6,4 @@ export default () => {
|
||||
autoInstall: true
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user