添加网关子页面
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字段
|
sql需要扩大logvalue字段
|
||||||
ALTER TABLE iot_device_log MODIFY COLUMN log_value VARCHAR(1024);
|
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>
|
</voicecard-component>
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</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-tabs>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
||||||
@ -167,12 +173,13 @@ import { serviceInvoke, serviceInvokeReply } from '@/api/iot/runstatus';
|
|||||||
import { getOrderControl } from '@/api/iot/control';
|
import { getOrderControl } from '@/api/iot/control';
|
||||||
import DisplayComponent from './display.vue';
|
import DisplayComponent from './display.vue';
|
||||||
import VoicecardComponent from './voicecard.vue';
|
import VoicecardComponent from './voicecard.vue';
|
||||||
|
import gatewaySet from './gateway-set.vue';
|
||||||
export default {
|
export default {
|
||||||
name: 'gateway',
|
name: 'gateway',
|
||||||
components: {
|
components: {
|
||||||
DisplayComponent,
|
DisplayComponent,
|
||||||
VoicecardComponent
|
VoicecardComponent,
|
||||||
|
gatewaySet
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
device: {
|
device: {
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="license-wrap">
|
<div class="license-wrap">
|
||||||
<div class="logo-wrap">
|
<!-- <div class="logo-wrap">
|
||||||
<img class="icon" src="@/assets/images/logo-no-word-blue.png" />
|
<img class="icon" src="@/assets/images/logo-no-word-blue.png" />
|
||||||
<span class="text">蜂信物联</span>
|
<span class="text"></span>
|
||||||
</div>
|
</div> -->
|
||||||
<pre class="introduce-text">FastBee物联网平台授权认证</pre>
|
<pre class="introduce-text">物联网平台授权认证</pre>
|
||||||
<div class="img-wrap">
|
<div class="img-wrap">
|
||||||
<img style="width: 100%; height: 100%" src="@/assets/images/cover.png" />
|
<img style="width: 100%; height: 100%" src="@/assets/images/cover.png" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user