添加网关子页面
This commit is contained in:
1
parent
a3a25ae99f
commit
6a5855ec74
18
README.md
18
README.md
@ -44,3 +44,21 @@ npm run build:prod
|
||||
|
||||
sql需要扩大logvalue字段
|
||||
ALTER TABLE iot_device_log MODIFY COLUMN log_value VARCHAR(1024);
|
||||
|
||||
|
||||
|
||||
|
||||
微信开放平台网站应用
|
||||
appid wxb4e2ada50247623b
|
||||
appsecret a1f800c5448205f05d8b5d532f470e61
|
||||
|
||||
|
||||
微信小程序的appid
|
||||
wx735fe3b42677d2ac
|
||||
以及apps 230503dacfb055fa54c40e2eb628108d
|
||||
|
||||
|
||||
|
||||
慧行智控的appid
|
||||
wx71a45919045c7e19
|
||||
8ae12637c2a8988f1b7b473fa52eed27
|
||||
237
src/views/iot/device/gateway-set.vue
Normal file
237
src/views/iot/device/gateway-set.vue
Normal file
@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div class="gateway-setting">
|
||||
<!-- 设备模式和OTA升级部分（保留） -->
|
||||
<el-row :gutter="20" class="mode-section">
|
||||
<!-- 设备模式 -->
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-card class="mode-card" shadow="hover">
|
||||
<div class="mode-header">
|
||||
<i class="el-icon-menu"></i>
|
||||
<span class="mode-title">设备模式</span>
|
||||
</div>
|
||||
<div class="mode-content">
|
||||
<span class="title" :style="{ color: statusColor.background }">{{ title }}</span>
|
||||
<el-button type="text" @click="printThingsModels" style="margin-left: 10px">
|
||||
<i class="el-icon-printer"></i> 打印物模型
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- 设备升级 -->
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-card class="mode-card" shadow="hover">
|
||||
<div class="mode-header">
|
||||
<svg-icon icon-class="ota" />
|
||||
<span class="mode-title">OTA升级</span>
|
||||
</div>
|
||||
<div class="mode-content">
|
||||
<el-button type="primary" size="mini" :plain="true" @click="viewVersion()">
|
||||
查看固件版本
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 模组概况（与设备模式卡片风格统一） -->
|
||||
<el-row :gutter="20" class="mode-section">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-card class="mode-card" shadow="hover">
|
||||
<div class="mode-header">
|
||||
<i class="el-icon-s-platform"></i>
|
||||
<span class="mode-title">模组概况</span>
|
||||
</div>
|
||||
<div class="mode-content">
|
||||
<el-descriptions :column="2" border size="medium" class="overview-desc">
|
||||
<el-descriptions-item label="固件版本">
|
||||
<span class="desc-value">{{ moduleInfo.firmwareVersion }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="MAC地址">
|
||||
<span class="desc-value">{{ moduleInfo.mac }}</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 网关参数设置表单 -->
|
||||
<el-card class="setting-card" shadow="hover" style="margin-top: 24px;">
|
||||
<div slot="header" class="setting-header">
|
||||
<span class="setting-title">网关参数设置</span>
|
||||
</div>
|
||||
<el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
|
||||
<el-form-item label="网络ID" prop="networkId">
|
||||
<el-input v-model="form.networkId" placeholder="请输入网络ID" />
|
||||
</el-form-item>
|
||||
<el-form-item label="无线频段" prop="band">
|
||||
<el-select v-model="form.band" placeholder="请选择无线频段">
|
||||
<el-option label="2.4GHz" value="2.4G" />
|
||||
<el-option label="5GHz" value="5G" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="信道" prop="channel">
|
||||
<el-select v-model="form.channel" placeholder="请选择信道">
|
||||
<el-option v-for="ch in channelOptions" :key="ch" :label="ch" :value="ch" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="速率" prop="rate">
|
||||
<el-select v-model="form.rate" placeholder="请选择速率">
|
||||
<el-option v-for="rate in rateOptions" :key="rate" :label="rate" :value="rate" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="功率" prop="power">
|
||||
<el-select v-model="form.power" placeholder="请选择功率">
|
||||
<el-option v-for="p in powerOptions" :key="p" :label="p" :value="p" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备地址" prop="deviceAddr">
|
||||
<el-input v-model="form.deviceAddr" placeholder="请输入设备地址" />
|
||||
</el-form-item>
|
||||
<el-form-item label="事件开关" prop="eventSwitch">
|
||||
<el-switch v-model="form.eventSwitch" active-text="开启" inactive-text="关闭" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">保存设置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'gateway-setting',
|
||||
data() {
|
||||
return {
|
||||
moduleInfo: {
|
||||
firmwareVersion: '1.0.0',
|
||||
mac: '00:11:22:33:44:55',
|
||||
},
|
||||
form: {
|
||||
networkId: '',
|
||||
band: '',
|
||||
channel: '',
|
||||
rate: '',
|
||||
power: '',
|
||||
deviceAddr: '',
|
||||
eventSwitch: false,
|
||||
},
|
||||
channelOptions: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13'],
|
||||
rateOptions: ['1Mbps', '2Mbps', '5.5Mbps', '11Mbps', '54Mbps', '150Mbps', '300Mbps'],
|
||||
powerOptions: ['10dBm', '13dBm', '15dBm', '17dBm', '20dBm'],
|
||||
rules: {
|
||||
networkId: [{ required: true, message: '请输入网络ID', trigger: 'blur' }],
|
||||
band: [{ required: true, message: '请选择无线频段', trigger: 'change' }],
|
||||
channel: [{ required: true, message: '请选择信道', trigger: 'change' }],
|
||||
rate: [{ required: true, message: '请选择速率', trigger: 'change' }],
|
||||
power: [{ required: true, message: '请选择功率', trigger: 'change' }],
|
||||
deviceAddr: [{ required: true, message: '请输入设备地址', trigger: 'blur' }],
|
||||
},
|
||||
// 以下为保留设备模式和OTA升级部分的相关变量
|
||||
title: '设备控制',
|
||||
statusColor: {
|
||||
background: '#67C23A',
|
||||
color: '#fff',
|
||||
maxWidth: '200px',
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
this.$refs.formRef.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$message.success('设置已保存');
|
||||
// TODO: 调用接口保存设置
|
||||
}
|
||||
});
|
||||
},
|
||||
printThingsModels() {
|
||||
this.$message.info('打印物模型功能保留');
|
||||
},
|
||||
viewVersion() {
|
||||
this.$message.info('查看固件版本功能保留');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gateway-setting {
|
||||
padding: 20px;
|
||||
|
||||
.mode-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.mode-card {
|
||||
margin-bottom: 20px;
|
||||
transition: all 0.3s;
|
||||
padding: 20px;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.mode-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
|
||||
i,
|
||||
.svg-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 8px;
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.mode-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.mode-content {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.overview-desc {
|
||||
margin: 0 auto;
|
||||
display: inline-block;
|
||||
|
||||
.el-descriptions__label {
|
||||
font-weight: bold;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.desc-value {
|
||||
font-size: 16px;
|
||||
color: #222;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting-card {
|
||||
.setting-header {
|
||||
.setting-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form {
|
||||
margin-top: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -88,6 +88,12 @@
|
||||
</voicecard-component>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="网关设置" name="gatewaySet">
|
||||
<div class="tab-content">
|
||||
<gatewaySet :device="device" ref="gatewaySet" v-if="activeTab === 'gatewaySet'">
|
||||
</gatewaySet>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
|
||||
@ -167,12 +173,13 @@ import { serviceInvoke, serviceInvokeReply } from '@/api/iot/runstatus';
|
||||
import { getOrderControl } from '@/api/iot/control';
|
||||
import DisplayComponent from './display.vue';
|
||||
import VoicecardComponent from './voicecard.vue';
|
||||
|
||||
import gatewaySet from './gateway-set.vue';
|
||||
export default {
|
||||
name: 'gateway',
|
||||
components: {
|
||||
DisplayComponent,
|
||||
VoicecardComponent
|
||||
VoicecardComponent,
|
||||
gatewaySet
|
||||
},
|
||||
props: {
|
||||
device: {
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="license-wrap">
|
||||
<div class="logo-wrap">
|
||||
<!-- <div class="logo-wrap">
|
||||
<img class="icon" src="@/assets/images/logo-no-word-blue.png" />
|
||||
<span class="text">蜂信物联</span>
|
||||
</div>
|
||||
<pre class="introduce-text">FastBee物联网平台授权认证</pre>
|
||||
<span class="text"></span>
|
||||
</div> -->
|
||||
<pre class="introduce-text">物联网平台授权认证</pre>
|
||||
<div class="img-wrap">
|
||||
<img style="width: 100%; height: 100%" src="@/assets/images/cover.png" />
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user