mirror of
https://gitee.com/beecue/fastbee.git
synced 2025-12-18 00:45:55 +08:00
修改为响应式布局
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
<span slot="label"> * 基本信息</span>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-row :gutter="100">
|
||||
<el-col :span="7">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
|
||||
<el-form-item label="设备名称" prop="deviceName">
|
||||
<el-input v-model="form.deviceName" placeholder="请输入设备名称" />
|
||||
</el-form-item>
|
||||
@@ -39,10 +39,10 @@
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注信息" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" rows="4" />
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" rows="3" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
|
||||
<!--
|
||||
<el-form-item label="设备图片" prop="imageUrl">
|
||||
<el-image style="height:225px;border:1px solid #dee4ed;border-radius:5px;padding:5px;" :src="imageUrl" :preview-src-list="[imageUrl]" fit="cover"></el-image>
|
||||
@@ -80,7 +80,7 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="10">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
|
||||
<div style="border:1px solid #dfe4ed;border-radius:5px;padding:5px;text-align:center;line-height:400px;">
|
||||
<div id="map" style="height:435px;width:100%;">地图展示区域,新增后显示</div>
|
||||
</div>
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
<el-card style="padding-bottom:100px;">
|
||||
<el-row :gutter="30" v-loading="loading">
|
||||
<el-col :span="6" v-for="(item,index) in deviceList" :key="index" style="margin-bottom:30px;text-align:center;">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="6" v-for="(item,index) in deviceList" :key="index" style="margin-bottom:30px;text-align:center;">
|
||||
<el-card :body-style="{ padding: '20px'}" shadow="always">
|
||||
<el-row type="flex" :gutter="10" justify="space-between">
|
||||
<el-col :span="20" style="text-align:left;">
|
||||
|
||||
@@ -53,8 +53,8 @@ export default {
|
||||
connectTimeout: 60000
|
||||
}
|
||||
// 配置Mqtt地址
|
||||
// let url = "wss://iot.wumei.live/mqtt"
|
||||
let url = "ws://" + window.location.hostname + ":8083/mqtt";
|
||||
let url = "wss://iot.wumei.live/mqtt"
|
||||
// let url = "ws://" + window.location.hostname + ":8083/mqtt";
|
||||
console.log("mqtt地址:", url);
|
||||
this.client = mqtt.connect(url, options);
|
||||
this.client.on("connect", (e) => {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div style="padding-left:20px;">
|
||||
<el-row :gutter="80">
|
||||
<el-col :span="9">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
|
||||
<el-descriptions :column="1" border :title="title">
|
||||
<!-- 设备升级-->
|
||||
<el-descriptions-item :labelStyle="statusColor">
|
||||
@@ -155,9 +155,9 @@
|
||||
<mqtt-client ref="mqttClient" :publish="publish" :subscribes="subscribes" @callbackEvent="mqttCallback($event)" />
|
||||
</el-col>
|
||||
|
||||
<el-col :span="14" :offset="1">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="14">
|
||||
<el-row :gutter="20" style="background-color:#F5F7FA;padding:20px;padding-left:10px;">
|
||||
<el-col :span="8" v-for="(item,index) in deviceInfo.readOnlyList" :key="index" style="margin-bottom:20px;">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" v-for="(item,index) in deviceInfo.readOnlyList" :key="index" style="margin-bottom:20px;">
|
||||
<el-card shadow="hover" style="border-radius:30px;">
|
||||
<div ref="map" style="height:230px;width:180px;margin:0 auto;margin-top:-10px;"></div>
|
||||
</el-card>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
</el-card>
|
||||
<el-card style="padding-bottom:100px;">
|
||||
<el-row :gutter="30" v-loading="loading" >
|
||||
<el-col :span="6" v-for="(item,index) in productList" :key="index" style="margin-bottom:30px;text-align:center;">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" v-for="(item,index) in productList" :key="index" style="margin-bottom:30px;text-align:center;">
|
||||
<el-card :body-style="{ padding: '20px'}" shadow="always">
|
||||
<el-row type="flex" :gutter="10" justify="space-between">
|
||||
<el-col :span="20" style="text-align:left;">
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<span slot="label"> * 基本信息</span>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-row :gutter="100">
|
||||
<el-col :span="7">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
|
||||
<el-form-item label="产品名称" prop="productName">
|
||||
<el-input v-model="form.productName" placeholder="请输入产品名称" />
|
||||
</el-form-item>
|
||||
@@ -23,10 +23,10 @@
|
||||
<el-switch v-model="form.isAuthorize" @change="changeIsAuthorize(form.isAuthorize)" :active-value="1" :inactive-value="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注信息" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" rows="7" />
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" rows="3" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
|
||||
<el-form-item label="设备类型" prop="deviceType">
|
||||
<el-select v-model="form.deviceType" placeholder="请选择设备类型" disabled style="width:100%">
|
||||
<el-option v-for="dict in dict.type.iot_device_type" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
|
||||
@@ -56,7 +56,7 @@
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
|
||||
<el-form-item label="产品图片">
|
||||
<imageUpload ref="image-upload" :value="form.imgUrl" :limit="1" :fileSize="1" @input="getImagePath($event)"></imageUpload>
|
||||
</el-form-item>
|
||||
|
||||
Reference in New Issue
Block a user