From a0a398720958c661a994311ca0a07e0c0fa8f2a1 Mon Sep 17 00:00:00 2001
From: kerwincui <164770707@qq.com>
Date: Sat, 16 Apr 2022 16:42:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=BA=E5=93=8D=E5=BA=94?=
 =?UTF-8?q?=E5=BC=8F=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/src/views/index.vue                     | 124 ++++++++++----------
 vue/src/views/iot/device/device-edit.vue    |   8 +-
 vue/src/views/iot/device/index.vue          |   2 +-
 vue/src/views/iot/device/mqtt-client.vue    |   4 +-
 vue/src/views/iot/device/running-status.vue |   6 +-
 vue/src/views/iot/product/index.vue         |   2 +-
 vue/src/views/iot/product/product-edit.vue  |   8 +-
 7 files changed, 75 insertions(+), 79 deletions(-)

diff --git a/vue/src/views/index.vue b/vue/src/views/index.vue
index 326d50fb..e79babbe 100644
--- a/vue/src/views/index.vue
+++ b/vue/src/views/index.vue
@@ -1,13 +1,13 @@
 <template>
 <div class="app-container home">
-    <el-row :gutter="40">
-        <el-col :span="14">
+    <el-row :gutter="40" style="margin-bottom:80px;">
+        <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="14">
             <el-card style="margin:-10px;" shadow="hover" body-style="background-color:#F8F8F8;">
                 <div ref="map" style="height:650px;margin:-10px;margin-top:-5px;"></div>
             </el-card>
         </el-col>
 
-        <el-col :span="10">
+        <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
             <el-card style="margin:-10px;" shadow="hover">
                 <h3 style="font-weight:bold">Mqtt 统计指标</h3>
                 <el-row :gutter="40" class="panel-group">
@@ -97,54 +97,50 @@
         </el-col>
 
     </el-row>
-  <div v-if="isAdmin">
-    <el-row :gutter="40" style="margin-top:80px;">
-        <el-col :span="1">
-            <el-card style="margin:-10px;height:218px;margin-right:-31px;padding-top:35px;text-align:center;font-weight:bold;" shadow="none">
-                服<br />务<br />器<br />状<br />态
-            </el-card>
-        </el-col>
-        <el-col :span="5">
-            <el-card style="margin:-10px;height:218px;" shadow="hover">
-                <el-descriptions :column="1">
-                    <el-descriptions-item label="服务器名称"><strong>{{server.sys.computerName}}</strong></el-descriptions-item>
-                    <el-descriptions-item label="服务器IP"><strong>{{server.sys.computerIp}}</strong></el-descriptions-item>
-                    <el-descriptions-item label="操作系统"><strong>{{server.sys.osName}}</strong></el-descriptions-item>
-                    <el-descriptions-item label="系统架构"><strong>{{server.sys.osArch}}</strong></el-descriptions-item>
-                    <el-descriptions-item label="CPU核心"><strong>{{server.cpu.cpuNum}}核</strong></el-descriptions-item>
-                    <el-descriptions-item label="总内存"><strong>{{server.mem.total}}G</strong></el-descriptions-item>
-                </el-descriptions>
-            </el-card>
-        </el-col>
-        <el-col :span="4">
-            <el-card style="margin:-10px;" shadow="hover">
-                <div ref="pieCpu" style="height:200px;margin-bottom:-20px;"></div>
-            </el-card>
-        </el-col>
-        <el-col :span="4">
-            <el-card style="margin:-10px;" shadow="hover">
-                <div ref="pieMemery" style="height:200px;margin-bottom:-20px;"></div>
-            </el-card>
-        </el-col>
-        <el-col :span="4">
-            <el-card style="margin:-10px;" shadow="hover">
-                <div ref="pieDisk" style="height:200px;margin-bottom:-20px;"></div>
-            </el-card>
-        </el-col>
-        <el-col :span="6">
-            <el-card style="margin:-10px;height:218px;" shadow="hover">
-                <el-descriptions :column="1">
-                    <el-descriptions-item label="Java名称"><strong>{{server.jvm.name}}</strong></el-descriptions-item>
-                    <el-descriptions-item label="启动时间"><strong>{{ server.jvm.startTime }}</strong></el-descriptions-item>
-                    <el-descriptions-item label="Java版本"><strong>{{ server.jvm.version }}</strong></el-descriptions-item>
-                    <el-descriptions-item label="运行时长"><strong>{{ server.jvm.runTime }}</strong></el-descriptions-item>
-                    <el-descriptions-item label="占用内存"><strong>{{server.jvm.used}}M</strong></el-descriptions-item>
-                    <el-descriptions-item label="JVM总内存"><strong>{{server.jvm.total}}M</strong></el-descriptions-item>
-                </el-descriptions>
-            </el-card>
-        </el-col>
-    </el-row>
-   </div>
+    <div v-if="isAdmin">
+        <h2><i class="el-icon-s-data"> 服务器状态</i></h2>
+        <el-row :gutter="40">
+            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
+                <el-card style="margin:-10px;height:218px;margin-bottom:30px;" shadow="hover">
+                    <el-descriptions :column="1">
+                        <el-descriptions-item label="服务器名称"><strong>{{server.sys.computerName}}</strong></el-descriptions-item>
+                        <el-descriptions-item label="服务器IP"><strong>{{server.sys.computerIp}}</strong></el-descriptions-item>
+                        <el-descriptions-item label="操作系统"><strong>{{server.sys.osName}}</strong></el-descriptions-item>
+                        <el-descriptions-item label="系统架构"><strong>{{server.sys.osArch}}</strong></el-descriptions-item>
+                        <el-descriptions-item label="CPU核心"><strong>{{server.cpu.cpuNum}}核</strong></el-descriptions-item>
+                        <el-descriptions-item label="总内存"><strong>{{server.mem.total}}G</strong></el-descriptions-item>
+                    </el-descriptions>
+                </el-card>
+            </el-col>
+            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="4">
+                <el-card style="margin:-10px;height:218px;margin-bottom:30px;" shadow="hover">
+                    <div ref="pieCpu" style="height:200px;margin-bottom:-20px;"></div>
+                </el-card>
+            </el-col>
+            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="4">
+                <el-card style="margin:-10px;height:218px;margin-bottom:30px;" shadow="hover">
+                    <div ref="pieMemery" style="height:200px;margin-bottom:-20px;"></div>
+                </el-card>
+            </el-col>
+            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="4">
+                <el-card style="margin:-10px;height:218px;margin-bottom:30px;" shadow="hover">
+                    <div ref="pieDisk" style="height:200px;margin-bottom:-20px;"></div>
+                </el-card>
+            </el-col>
+            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
+                <el-card style="margin:-10px;height:218px;margin-bottom:30px;" shadow="hover">
+                    <el-descriptions :column="1">
+                        <el-descriptions-item label="Java名称"><strong>{{server.jvm.name}}</strong></el-descriptions-item>
+                        <el-descriptions-item label="启动时间"><strong>{{ server.jvm.startTime }}</strong></el-descriptions-item>
+                        <el-descriptions-item label="Java版本"><strong>{{ server.jvm.version }}</strong></el-descriptions-item>
+                        <el-descriptions-item label="运行时长"><strong>{{ server.jvm.runTime }}</strong></el-descriptions-item>
+                        <el-descriptions-item label="占用内存"><strong>{{server.jvm.used}}M</strong></el-descriptions-item>
+                        <el-descriptions-item label="JVM总内存"><strong>{{server.jvm.total}}M</strong></el-descriptions-item>
+                    </el-descriptions>
+                </el-card>
+            </el-col>
+        </el-row>
+    </div>
     <div style="margin:-21px;margin-top:100px;bottom:0;border:1px solid #ccc;padding:10px;margin-bottom:-21px;">
         <div>
             <el-link href="http://wumei.live" target="_blank" type="primary" style="margin-left:20px;">开源生活物联网平台 >></el-link>
@@ -186,14 +182,14 @@ export default {
     data() {
         return {
             // 控制是否显示服务器状态栏
-            isAdmin:true,
-            queryParams:{
-              userName: ''
+            isAdmin: true,
+            queryParams: {
+                userName: ''
             },
             // 设备列表
             deviceList: [],
             // 设备总数
-            deviceCount:0,
+            deviceCount: 0,
             // emqx状态数据
             stats: {},
             // emqx统计信息
@@ -233,19 +229,19 @@ export default {
         this.statisticMqtt();
     },
     methods: {
-        init(){
-          // 设置用户的角色 用以区分自己创建的设备
-          // 由于admin可以看所有数据所以判断
-          if (this.$store.state.user.roles.indexOf("admin") === -1){
-            this.isAdmin = false
-            this.queryParams.userName = this.$store.state.user.name
-          }
+        init() {
+            // 设置用户的角色 用以区分自己创建的设备
+            // 由于admin可以看所有数据所以判断
+            if (this.$store.state.user.roles.indexOf("admin") === -1) {
+                this.isAdmin = false
+                this.queryParams.userName = this.$store.state.user.name
+            }
         },
         /**查询所有设备 */
         getAllDevice() {
             listAllDeviceShort2(this.queryParams).then(response => {
                 this.deviceList = response.rows;
-                this.deviceCount=response.total;
+                this.deviceCount = response.total;
                 this.$nextTick(() => {
                     loadBMap().then(() => {
                         this.getmap();
@@ -306,7 +302,7 @@ export default {
             };
             option = {
                 title: {
-                    text: '设备分布和状态（数量 '+this.deviceCount+'）',
+                    text: '设备分布和状态（数量 ' + this.deviceCount + '）',
                     subtext: 'wumei-smart open source living iot platform',
                     sublink: 'https://iot.wumei.live',
                     target: "_blank",
diff --git a/vue/src/views/iot/device/device-edit.vue b/vue/src/views/iot/device/device-edit.vue
index 9d04693a..7789f086 100644
--- a/vue/src/views/iot/device/device-edit.vue
+++ b/vue/src/views/iot/device/device-edit.vue
@@ -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>
diff --git a/vue/src/views/iot/device/index.vue b/vue/src/views/iot/device/index.vue
index b26cb1b0..87c05686 100644
--- a/vue/src/views/iot/device/index.vue
+++ b/vue/src/views/iot/device/index.vue
@@ -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;">
diff --git a/vue/src/views/iot/device/mqtt-client.vue b/vue/src/views/iot/device/mqtt-client.vue
index 79ebc271..745e0e4a 100644
--- a/vue/src/views/iot/device/mqtt-client.vue
+++ b/vue/src/views/iot/device/mqtt-client.vue
@@ -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) => {
diff --git a/vue/src/views/iot/device/running-status.vue b/vue/src/views/iot/device/running-status.vue
index 14d857de..2bb9277e 100644
--- a/vue/src/views/iot/device/running-status.vue
+++ b/vue/src/views/iot/device/running-status.vue
@@ -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>
diff --git a/vue/src/views/iot/product/index.vue b/vue/src/views/iot/product/index.vue
index a37af3ae..121f8b99 100644
--- a/vue/src/views/iot/product/index.vue
+++ b/vue/src/views/iot/product/index.vue
@@ -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;">
diff --git a/vue/src/views/iot/product/product-edit.vue b/vue/src/views/iot/product/product-edit.vue
index a05e8a62..78fb9591 100644
--- a/vue/src/views/iot/product/product-edit.vue
+++ b/vue/src/views/iot/product/product-edit.vue
@@ -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>