修改前端页面展示

device-manager-ui/admin/src/assets/mixins/table.js

@@ -167,6 +167,21 @@ export default {
       }
     },
 
+    formatterStatus(row, column, val) {
+      const content = formatter(this.tableData, column, val);
+      if (content) {
+        if (val == '0') {
+          return <el-tag  size='mini'>{content}</el-tag>
+        } else if (val == '1') {
+          return <el-tag type={'danger'} size='mini'>{content}</el-tag>
+        } else if (val == '2') {
+          return <el-tag type={'success'} size='mini'>{content}</el-tag>
+        }
+      } else {
+        return val
+      }
+    },
+
     formatterDictLink(row, column, val) {
       const content = formatter(this.tableData, column, val);
 

device-manager-ui/admin/src/components/Header.vue

@@ -66,7 +66,6 @@
 </template>
 
 <script>
-import { createSocket } from "@/assets/utils/websocket";
 export default {
   name: "Header",
   methods: {
@@ -204,7 +203,7 @@ export default {
     line-height: 50px;
     font-size: 14px;
     color: #eee;
-    background: #222333;
+    background: #1848c8;
     .layout-logo{
       width: 80px;
       height: 50px;
@@ -216,6 +215,7 @@ export default {
         vertical-align: middle;
       }
     }
+    
     .menu-list{
       li{
         a{
@@ -223,14 +223,18 @@ export default {
           padding: 0 12px;
           height: 100%;
           color: #eee;
-          overflow: hidden;
           &.router-link-active,
           &[active]{
-            background: #1890ff;
+            //background: #1890ff;
             color: #fff;
+            list-style-type:none;
+        border-bottom:3px solid #fff;
+        padding-bottom: 2px;
+
           }
         }
       }
+      
     }
     .layout-profile{
       padding-right: 30px;

device-manager-ui/admin/src/components/Table.vue

@@ -14,6 +14,7 @@
               v-if="isShowButton('notAdd')"
               type="primary"
               icon="el-icon-plus"
+              plain
               size="mini"
               @click="config.methods.add"
               title="新增"
@@ -22,12 +23,13 @@
             <el-button
               v-if="isShowBtn('import')"
               size="mini"
+              plain
               @click="config.methods.importView"
               class="el-icon-upload2"
               title="导入"
-            ></el-button>
+            >导入</el-button>
 
-            <el-button
+            <!-- <el-button
               v-if="isShowButton('notDel')"
               icon="el-icon-delete"
               type="danger"
@@ -35,11 +37,11 @@
               size="mini"
               @click="config.methods.del"
               title="批量删除"
-              >批量删除</el-button
-            >
-            <!-- <Confirm v-if='isShowButton("notDel")' @confirm='config.methods.del' message='确定要删除选中的多条记录吗？'>
-            <el-button icon="el-icon-delete" type="danger" size='mini'  title="删除"></el-button>
-          </Confirm> -->
+              >删除</el-button
+            > -->
+             <Confirm v-if='isShowButton("notDel")' @confirm='config.methods.del' message='确定要删除选中的多条记录吗？'>
+            <el-button icon="el-icon-delete" type="danger" size='mini' plain  title="删除">删除</el-button>
+          </Confirm>
             <el-button
               @click="item.method"
               size="mini"

device-manager-ui/admin/src/views/Home.vue

 <template>
-  <div class="page page-home" style="min-height: 100vh">
+  <div class="page page-home homeIndex" style="min-height: 100vh">
     <el-row :gutter="10">
       <el-row
         style="margin-left: 50px; margin-right: 50px"
@@ -7,143 +7,161 @@
         justify="end"
         :gutter="10"
       >
-        <el-button type="text"
+        <el-button type="text" size="mini"
           >数据更新:{{ formatterDate(statData.updateTime) }}</el-button
         >
-        <el-button icon="el-icon-refresh" type="text">手动刷新</el-button>
+        <el-button icon="el-icon-refresh" size="mini" type="text">手动刷新</el-button>
       </el-row>
 
       <el-card style="margin-left: 50px; margin-right: 50px; margin-top: 10px">
+        <el-row :gutter="20" style="height:80px;align-items: center;margin-top:10px" >
           <el-col :span="3">
+            <el-row type="flex" justify="center">
               <span style="font-size: 20px"
                 ><b>{{ statData.deviceTotalCount }}</b></span
+              ></el-row
             >
-          <el-row
-            ><span style="font-size: 14px"
-              >昨日 {{ statData.deviceAddCount }}</span
+            <el-row type="flex" justify="center">
+              <span style="font-size: 12px;"
+                ><span style="color:#6182f6">昨日 </span ><span v-bind:class="{success: statData.deviceAddCount>=0, warn: statData.deviceAddCount<0}">{{ statData.deviceAddCount>=0?'+'+statData.deviceAddCount:"-"+statData.deviceAddCount }}</span></span
               ></el-row
             >
-          <el-button icon="el-icon-mobile" type="text">设备总数</el-button>
-          <!-- <el-row  > <i size="mini" :class="'el-icon-mobile'"> </i><span style="font-size:14px">设备总数</span></el-row> -->
+            <el-row type="flex" justify="center">
+              <el-button icon="el-icon-mobile" size="mini" type="text"
+                >设备总数</el-button
+              >
+            </el-row>
           </el-col>
           <el-col :span="3">
-          <el-row
+            <el-row type="flex" justify="center"
               ><span style="font-size: 20px"
                 ><b>{{ statData.siteTotalCount }}</b></span
               ></el-row
             >
-          <el-row
-            ><span style="font-size: 14px"
-              >昨日 {{ statData.siteAddCount }}</span
+            <el-row type="flex" justify="center">
+              <span style="font-size: 12px;"
+                ><span style="color:#6182f6">昨日 </span ><span v-bind:class="{success: statData.siteAddCount>=0, warn: statData.siteAddCount<0}">{{ statData.siteAddCount>=0?'+'+statData.siteAddCount:"-"+statData.siteAddCount }}</span></span
               ></el-row
             >
-          <el-row>
-            <i size="mini" :class="'el-icon-mobile'"> </i
-            ><span style="font-size: 13px">监控站点数</span></el-row
+            <el-row type="flex" justify="center">
+              <el-button icon="el-icon-place" size="mini" type="text"
+                >监控站点数</el-button
               >
+            </el-row>
           </el-col>
           <el-col :span="3">
-          <el-row
+            <el-row type="flex" justify="center"
               ><span style="font-size: 20px"
                 ><b>{{ statData.deviceOnlineCount }}</b></span
               ></el-row
             >
-          <el-row
-            ><span style="font-size: 14px"
-              >昨日 {{ statData.deviceOnlineRatio }}</span
+
+           <el-row type="flex" justify="center">
+              <span style="font-size: 12px;"
+                ><span style="color:#6182f6">上线率 </span ><span v-bind:class="{success: statData.deviceOnlineRatio>=0}">{{ statData.deviceOnlineRatio* 100  }}%</span></span
               ></el-row
             >
-          <el-row>
-            <i size="mini" :class="'el-icon-mobile'"> </i
-            ><span style="font-size: 14px">在线设备</span></el-row
+            <el-row type="flex" justify="center">
+              <el-button icon="el-icon-data-line" size="mini" type="text"
+                >在线设备</el-button
               >
+            </el-row>
           </el-col>
           <el-col :span="3">
-          <el-row
+            <el-row type="flex" justify="center"
               ><span style="font-size: 20px"
                 ><b>{{ statData.deviceOfflineCount }}</b></span
               ></el-row
             >
-          <el-row
-            ><span style="font-size: 14px"
-              >在线率 {{ statData.deviceOfflineRatio * 100 }}%</span
+            <el-row type="flex" justify="center">
+              <span style="font-size: 12px;"
+                ><span style="color:#6182f6">离线率 </span ><span v-bind:class="{warn: statData.deviceOfflineRatio>=0}">{{ statData.deviceOfflineRatio* 100  }}%</span></span
               ></el-row
             >
-          <el-row>
-            <i size="mini" :class="'el-icon-mobile'"> </i
-            ><span style="font-size: 14px">离线设备</span></el-row
+            <el-row type="flex" justify="center">
+              <el-button icon="el-icon-data-board" size="mini" type="text"
+                >离线设备</el-button
               >
+            </el-row>
           </el-col>
           <el-col :span="3">
-          <el-row
+            <el-row type="flex" justify="center"
               ><span style="font-size: 20px"
                 ><b>{{ statData.deviceStopRatio }}</b></span
               ></el-row
             >
-          <el-row
-            ><span style="font-size: 14px"
-              >停用率 {{ statData.deviceStopRatio * 100 }}%</span
+             <el-row type="flex" justify="center">
+              <span style="font-size: 12px;"
+                ><span style="color:#6182f6">停用率 </span ><span v-bind:class="{warn: statData.deviceStopRatio>=0}">{{ statData.deviceStopRatio* 100  }}%</span></span
               ></el-row
             >
-          <el-row>
-            <i size="mini" :class="'el-icon-mobile'"> </i
-            ><span style="font-size: 14px">停用设备</span></el-row
+            <el-row type="flex" justify="center">
+              <el-button icon="el-icon-data-board" size="mini" type="text"
+                >停用设备</el-button
               >
+            </el-row>
           </el-col>
           <el-col :span="3">
-          <el-row
+            <el-row type="flex" justify="center"
               ><span style="font-size: 20px"
                 ><b>{{ statData.alarmTotalCount }}</b></span
               ></el-row
             >
-          <el-row
-            ><span style="font-size: 14px"
-              >昨日 {{ statData.alarmAddCount }}</span
+            <el-row type="flex" justify="center">
+              <span style="font-size: 12px;"
+                ><span style="color:#6182f6">昨日 </span ><span v-bind:class="{success: statData.alarmAddCount>=0, warn: statData.alarmAddCount<0}">{{ statData.alarmAddCount>=0?'+'+statData.alarmAddCount:"-"+statData.alarmAddCount }}</span></span
               ></el-row
             >
-          <el-row>
-            <i size="mini" :class="'el-icon-mobile'"> </i
-            ><span style="font-size: 14px">今日告警次数</span></el-row
+            <el-row type="flex" justify="center">
+              <el-button icon="el-icon-data-board" size="mini" type="text"
+                >今日告警次数</el-button
               >
+            </el-row>
           </el-col>
-        <el-col :span="3">
-          <el-row
+          <el-col :span="3" >
+             <el-row type="flex" justify="center"
               ><span style="font-size: 20px"
                 ><b>{{ statData.pushTotalCount }}</b></span
               ></el-row
             >
-          <el-row
-            ><span style="font-size: 14px"
-              >昨日 {{ statData.pushAddCount }}</span
+    
+          <el-row type="flex" justify="center">
+              <span style="font-size: 12px;"
+                ><span style="color:#6182f6">昨日 </span ><span v-bind:class="{success: statData.pushAddCount>=0, warn: statData.pushAddCount<0}">{{ statData.pushAddCount>=0?'+'+statData.pushAddCount:"-"+statData.pushAddCount }}</span></span
               ></el-row
             >
-          <el-row>
-            <i size="mini" :class="'el-icon-mobile'"> </i
-            ><span style="font-size: 14px">今日消息推送</span></el-row
+            
+           <el-row type="flex" justify="center">
+              <el-button icon="el-icon-data-board" size="mini" type="text"
+                >今日消息推送</el-button
               >
+            </el-row>
           </el-col>
-        <el-col :span="3">
-          <el-row
-            ><span style="font-size: 14px"
-              >今日下发命令 <b>{{ statData.uploadMessageTotalCount }}</b></span
+          <el-col :span="3" type="flex" style="height:100%" >
+             <el-row type="flex" style="margin-top:6px" justify="center" 
+              ><span style="font-size: 13px"
+                ><span style="color:#6182f6">今日下发命令 </span>
+                <b>{{ statData.uploadMessageTotalCount }}</b></span
               ></el-row
             >
-          <el-row
-            ><span style="font-size: 14px"
-              >今日下发命令
+             <el-row type="flex"  style="margin-top:6px" justify="center"
+              ><span style="font-size: 13px"
+                ><span style="color:#6182f6">今日下发命令 </span>
                 <b>{{ statData.downloadMessageTotalCount }}</b></span
               ></el-row
             >
-          <el-row>
-            <i size="mini" :class="'el-icon-mobile'"> </i
-            ><span style="font-size: 14px">数据获取</span></el-row
+            <el-row type="flex" justify="center">
+              <el-button icon="el-icon-data-board" size="mini" type="text"
+                >数据获取</el-button
               >
+            </el-row>
           </el-col>
+        </el-row>
       </el-card>
     </el-row>
 
     <el-row
-      style="margin-left: 35px; margin-right: 35px; margin-top: 10px"
+      style="margin-left: 35px; margin-right: 35px; margin-top: 15px"
       :gutter="20"
     >
       <el-col :span="12">
@@ -216,7 +234,7 @@ export default {
 
     this.findDevicePush(beforeday);
 
-    console.log("process",process.env)
+    console.log("process", process.env);
   },
   methods: {
     findDeviceTotalStat(beforeday) {
@@ -529,7 +547,6 @@ export default {
             showSymbol: false,
             areaStyle: {
               opacity: 0.8,
-              
             },
             emphasis: {
               focus: "series",
@@ -543,9 +560,7 @@ export default {
     },
 
     deviceAlarmEcharts() {
-      var chart = this.$echarts.init(
-        document.getElementById("deviceAlarm")
-      );
+      var chart = this.$echarts.init(document.getElementById("deviceAlarm"));
 
       let option = {
         title: {
@@ -601,28 +616,26 @@ export default {
               color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 {
                   offset: 0,
-            color: 'rgb(55, 162, 255)'
+                  color: "rgb(55, 162, 255)",
                 },
                 {
                   offset: 1,
-            color: 'rgb(116, 21, 219)'
-          }
+                  color: "rgb(116, 21, 219)",
+                },
               ]),
             },
             emphasis: {
               focus: "series",
             },
             data: this.deviceAlarmyData,
-          }
+          },
         ],
       };
       chart.setOption(option);
     },
 
     devicePushEcharts() {
-      var chart = this.$echarts.init(
-        document.getElementById("devicePush")
-      );
+      var chart = this.$echarts.init(document.getElementById("devicePush"));
 
       let option = {
         title: {
@@ -641,7 +654,6 @@ export default {
           data: ["告警次数"],
         },
 
-        
         xAxis: [
           {
             type: "category",
@@ -660,7 +672,7 @@ export default {
             smooth: true,
 
             data: this.devicePushyData,
-          }
+          },
         ],
       };
       chart.setOption(option);
@@ -696,3 +708,27 @@ export default {
 };
 </script>
 
+<style scoped>
+.success{
+  color:green
+}
+.warn{
+  color: rgb(215, 25, 25);
+}
+
+.homeIndex {
+   display: inline-block;
+   position: relative;
+}
+.homeIndex::before {
+   content: '';
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 35%;
+   background: #1848c8;
+}
+
+</style>
+

device-manager-ui/admin/src/views/device/list.vue

@@ -439,10 +439,10 @@ export default {
           {
             label: "状态 ",
             prop: "deviceStatus",
-            formatter: this.formatter,
+            formatter: this.formatterStatus,
           },
 
-          { label: "利旧设备", prop: "source", formatter: this.formatter },
+          { label: "利旧设备", prop: "source", formatter: this.formatterYES },
 
           {
             prop: "enabled",

device-manager-ui/admin/src/views/device/log/list.vue

@@ -50,9 +50,9 @@ export default {
         columns: [
           { label: "traceID", prop: "traceID",width:120 },
 
-          { label: "设备编号", prop: "deviceCode" },
+          { label: "设备编号", prop: "deviceCode",width:160 },
 
-          { label: "设备名称", prop: "deviceName" },
+          { label: "设备名称", prop: "deviceName",width:160 },
           { label: "内容", prop: "content" },
 
           { label: "业务标识", prop: "messageHead",width:80 },
@@ -63,7 +63,7 @@ export default {
             label: "创建时间",
             prop: "createTime",
             formatter: this.formatterDate,
-            width:120
+            width:160
           },
         //   {
         //     label: "操作",

device-manager-ui/admin/src/views/device/module/list.vue

@@ -41,6 +41,7 @@
                     ],
                     columns: [
                         {type: "selection", width: 60},
+                         {type: "index",label: "序号",width: 50},
 
                          {label: "模块名称", prop: "moduleName"},
 

device-manager-ui/admin/src/views/platform/list.vue

@@ -42,6 +42,8 @@
                     columns: [
                         {type: "selection", width: 60},
 
+                         {type: "index",label: "序号",width: 50},
+
                         {label: "平台名称，名称唯一", prop: "platformName"},
 
                         {label: "平台编码，编码唯一", prop: "platformSn"},

device-manager/src/main/resources/logback-spring.xml

@@ -43,7 +43,7 @@
         </rollingPolicy>
     </appender>
 
-    <root level="${logLevel}">
+    <root level="INFO">
         <appender-ref ref="console"/>
         <appender-ref ref="fileInfo"/>
         <appender-ref ref="fileError"/>
@@ -51,12 +51,13 @@
 
     <!--TRACE < DEBUG < INFO < WARN < ERROR < FATAL -->
 
-    <!--用来设置某一个包或者具体的某一个类的日志打印级别、以及指定<appender>。<logger>仅有一个name属性，一个可选的level和一个可选的additivity属性。-->
+    <!--用来设置某一个包或者具体的某一个类的日志打印级别、以及指定<appender>。
+    <logger>仅有一个name属性，一个可选的level和一个可选的additivity属性。-->
     <!-- name 用来指定受此loger约束的某一个包或者具体的某一个类-->
     <!-- level 用来设置打印级别，大小写无关：TRACE, DEBUG, INFO, WARN, ERROR, ALL 和 OFF，还有一个特俗值INHERITED或者同义词NULL，代表强制执行上级的级别。如果未设置此属性，那么当前logger将会继承上级的级别-->
     <!-- additivity 是否向上级logger传递打印信息。默认是true。false：表示只用当前logger的appender-ref。true：表示当前logger的appender-ref和rootLogger的appender-ref都有效。-->
 
-    <logger name="com.mortals" level="INFO" additivity="false">
+    <logger name="com.mortals" level="${logLevel}" additivity="false">
         <appender-ref ref="console"/>
         <appender-ref ref="fileInfo"/>
         <appender-ref ref="fileError"/>