style：设备管理模块-页面数据统计显示优化，操作按钮增加文字提示

smsb-plus-ui/src/views/smsb/device/index.vue

@@ -3,37 +3,69 @@
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
       :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover" :style="{ height: '70px' }">
-          <el-row :gutter="20" align="middle">
-            <!-- 设备数量 -->
-            <el-col :span="6" style="display: flex; justify-content: center; align-items: center">
-              <el-statistic :value="totalNum">
+        <el-card shadow="hover" class="statistic-card">
+          <el-row :gutter="20" justify="space-between">
+            <!-- 设备总数 -->
+            <el-col :span="6">
+              <el-statistic :value="totalNum" class="statistic-item">
                 <template #title>
-                  <div style="display: inline-flex; align-items: center">设备总数</div>
+                  <div class="statistic-title">
+                    <el-icon><Monitor /></el-icon>
+                    <span>设备总数</span>
+                  </div>
+                </template>
+                <template #prefix>
+                  <div class="statistic-icon total-icon">
+                    <el-icon><Collection /></el-icon>
+                  </div>
                 </template>
               </el-statistic>
             </el-col>
             <!-- 在线设备 -->
-            <el-col :span="6" style="display: flex; justify-content: center; align-items: center">
-              <el-statistic :value="onlineNum">
+            <el-col :span="6">
+              <el-statistic :value="onlineNum" class="statistic-item">
                 <template #title>
-                  <div style="display: inline-flex; align-items: center">在线设备</div>
+                  <div class="statistic-title">
+                    <el-icon><SuccessFilled /></el-icon>
+                    <span>在线设备</span>
+                  </div>
+                </template>
+                <template #prefix>
+                  <div class="statistic-icon online-icon">
+                    <el-icon><Link /></el-icon>
+                  </div>
                 </template>
               </el-statistic>
             </el-col>
             <!-- 离线设备 -->
-            <el-col :span="6" style="display: flex; justify-content: center; align-items: center">
-              <el-statistic :value="offlineNum">
+            <el-col :span="6">
+              <el-statistic :value="offlineNum" class="statistic-item">
                 <template #title>
-                  <div style="display: inline-flex; align-items: center">离线设备</div>
+                  <div class="statistic-title">
+                    <el-icon><CircleCloseFilled /></el-icon>
+                    <span>离线设备</span>
+                  </div>
+                </template>
+                <template #prefix>
+                  <div class="statistic-icon offline-icon">
+                    <el-icon><Connection /></el-icon>
+                  </div>
                 </template>
               </el-statistic>
             </el-col>
-            <!-- 未接入设备 -->
-            <el-col :span="6" style="display: flex; justify-content: center; align-items: center">
-              <el-statistic :value="initNum">
+            <!-- 待接入设备 -->
+            <el-col :span="6">
+              <el-statistic :value="initNum" class="statistic-item">
                 <template #title>
-                  <div style="display: inline-flex; align-items: center">待接入</div>
+                  <div class="statistic-title">
+                    <el-icon><Warning /></el-icon>
+                    <span>待接入</span>
+                  </div>
+                </template>
+                <template #prefix>
+                  <div class="statistic-icon pending-icon">
+                    <el-icon><Loading /></el-icon>
+                  </div>
                 </template>
               </el-statistic>
             </el-col>
@@ -71,9 +103,6 @@
                   </el-button>
                   <el-button type="success" plain icon="VideoPlay" :disabled="single" @click="startMonitor()">回调视频
                   </el-button>
-                  <el-button v-hasPermi="['smsb:device:remove']" type="danger" plain icon="Delete" :disabled="multiple"
-                             @click="handleDelete()">删除
-                  </el-button>
                   <el-button v-hasPermi="['smsb:device:query']" type="info" plain icon="Position" :disabled="single"
                              @click="handleInfo()">
                     详情
@@ -95,16 +124,11 @@
               <div @click="handleInfo(scope.row)" class="two-line" style="text-decoration: underline;color: #1890FF;">{{ scope.row.name }}</div>
             </template>
           </el-table-column>
-<!--
-          <el-table-column label="设备名称" align="left" prop="name" width="300" :show-overflow-tooltip="true" />
--->
           <el-table-column label="设备型号" align="left" prop="deviceModel" width="120" :show-overflow-tooltip="true" />
           <el-table-column label="设备SN" align="left" prop="serialNumber" width="220" :show-overflow-tooltip="true" />
           <el-table-column label="设备MAC" align="left" prop="mac" width="180" />
           <el-table-column label="设备标识" align="left" prop="identifier" width="220" :show-overflow-tooltip="true" />
           <el-table-column label="分辨率" align="left" prop="resolution" width="100" />
-<!--          <el-table-column label="开机时间" align="left" prop="openTime" width="80" />
-          <el-table-column label="关机时间" align="left" prop="closeTime" width="80" />-->
           <el-table-column label="在线状态" align="center" prop="onlineStatus" width="80">
             <template #default="scope">
               <dict-tag :options="sys_device_online" :value="scope.row.onlineStatus" />
@@ -127,15 +151,15 @@
             </template>
           </el-table-column>
           <el-table-column label="备注" align="left" prop="remark" width="200" :show-overflow-tooltip="true" />
-          <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="100">
+          <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="150">
             <template #default="scope">
               <el-tooltip content="修改" placement="top">
                 <el-button v-hasPermi="['smsb:device:edit']" link type="primary" icon="Edit"
-                  @click="handleUpdate(scope.row)"></el-button>
+                  @click="handleUpdate(scope.row)">修改</el-button>
               </el-tooltip>
               <el-tooltip content="删除" placement="top">
                 <el-button v-hasPermi="['smsb:device:remove']" link type="primary" icon="Delete"
-                  @click="handleDelete(scope.row)"></el-button>
+                  @click="handleDelete(scope.row)">删除</el-button>
               </el-tooltip>
             </template>
           </el-table-column>
@@ -846,7 +870,7 @@ const handleAdd = () => {
   form.value.isAlien = 0;
   form.value.isWatch = 0;
   dialog.visible = true;
-  dialog.title = '添加设备';
+  dialog.title = '添加';
 };
 
 /** 修改按钮操作 */
@@ -856,7 +880,7 @@ const handleUpdate = async (row?: DeviceVO) => {
   const res = await getDevice(_id);
   Object.assign(form.value, res.data);
   dialog.visible = true;
-  dialog.title = '修改设备';
+  dialog.title = '修改';
 };
 
 /** 提交按钮 */
@@ -1074,5 +1098,100 @@ onMounted(() => {
   background-color: rgba(0, 0, 0, 0.3);
   border-radius: 4px;
 }
+.statistic-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+  border: 1px solid #ebeef5;
+  padding: 15px 0;
+  height: 120px;
+}
 
+.statistic-item {
+  text-align: center;
+  padding: 10px 0;
+}
+
+.statistic-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #606266;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.statistic-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 10px;
+  color: white;
+  font-size: 18px;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
+}
+
+.total-icon {
+  background: linear-gradient(135deg, #409eff, #2282ff);
+}
+
+.online-icon {
+  background: linear-gradient(135deg, #67c23a, #48ab1f);
+}
+
+.offline-icon {
+  background: linear-gradient(135deg, #f56c6c, #d43d3d);
+}
+
+.pending-icon {
+  background: linear-gradient(135deg, #e6a23c, #d48c1f);
+}
+
+:deep(.statistic-item .el-statistic__content) {
+  font-size: 24px;
+  font-weight: 700;
+  color: #303133;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  :deep(.el-col) {
+    flex: 0 0 50%;
+    max-width: 50%;
+    margin-bottom: 10px;
+  }
+
+  :deep(.el-row) {
+    flex-wrap: wrap;
+  }
+
+  .statistic-card {
+    padding: 10px 0;
+  }
+}
+
+@media (max-width: 768px) {
+  :deep(.el-col) {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+
+  .statistic-title {
+    font-size: 13px;
+  }
+
+  .statistic-icon {
+    width: 36px;
+    height: 36px;
+    font-size: 16px;
+  }
+
+  :deep(.statistic-item .el-statistic__content) {
+    font-size: 20px;
+  }
+}
 </style>

smsb-plus-ui/src/views/smsb/deviceAuth/index.vue

@@ -47,13 +47,9 @@
           <el-table-column label="鉴权时间" align="center" prop="createTime" width="160" />
           <el-table-column label="操作" align="center" fixed="right" width="80" class-name="small-padding fixed-width">
             <template #default="scope">
-<!--              <el-tooltip content="修改" placement="top">
-                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
-                  v-hasPermi="['device:deviceAuth:edit']"></el-button>
-              </el-tooltip>-->
               <el-tooltip content="删除" placement="top">
                 <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
-                  v-hasPermi="['device:deviceAuth:remove']"></el-button>
+                  v-hasPermi="['device:deviceAuth:remove']">删除</el-button>
               </el-tooltip>
             </template>
           </el-table-column>

smsb-plus-ui/src/views/smsb/deviceLogin/index.vue

@@ -71,7 +71,7 @@
                         </el-tooltip>-->
               <el-tooltip content="删除" placement="top">
                 <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
-                  v-hasPermi="['device:login:remove']"></el-button>
+                  v-hasPermi="['device:login:remove']">删除</el-button>
               </el-tooltip>
             </template>
           </el-table-column>

smsb-plus-ui/src/views/smsb/httpHeart/index.vue

@@ -24,44 +24,22 @@
     </transition>
 
     <el-card shadow="never">
-      <!--      <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['device:deviceHeartRecord:add']">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['device:deviceHeartRecord:edit']">修改</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['device:deviceHeartRecord:remove']">删除</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['device:deviceHeartRecord:export']">导出</el-button>
-          </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
-      </template>-->
       <div class="table-content">
         <el-table v-loading="loading" :data="deviceHeartRecordList" @selection-change="handleSelectionChange">
-          <!--        <el-table-column type="selection" width="55" align="center" />-->
           <el-table-column label="" align="left"  width="10"  />
           <el-table-column label="ID" align="left" prop="id" v-if="true" width="180" :show-overflow-tooltip="true" />
           <el-table-column label="设备标识" align="left" prop="identifier" width="250" :show-overflow-tooltip="true" />
           <el-table-column label="设备IP" align="left" prop="clientIp" width="160" :show-overflow-tooltip="true" />
-          <!--        <el-table-column label="心跳类型 1-http 2-Netty" align="center" prop="heartType" />-->
-          <el-table-column label="心跳间隔" align="center" prop="timeInterval" width="100" />
+          <el-table-column label="心跳间隔" align="center" prop="timeInterval" width="120" :show-overflow-tooltip="true"/>
           <el-table-column label="心跳时间" align="left" prop="createTime" width="180" />
           <el-table-column label="设备名称" align="left" prop="deviceName" width="300" :show-overflow-tooltip="true" />
           <el-table-column label="设备SN" align="left" prop="serialNumber" :show-overflow-tooltip="true" />
           <el-table-column label="设备MAC" align="left" prop="mac" :show-overflow-tooltip="true" />
           <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="80">
             <template #default="scope">
-              <!--            <el-tooltip content="修改" placement="top">
-              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['device:deviceHeartRecord:edit']"></el-button>
-            </el-tooltip>-->
               <el-tooltip content="删除" placement="top">
                 <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
-                  v-hasPermi="['device:heart:remove']"></el-button>
+                  v-hasPermi="['device:heart:remove']">删除</el-button>
               </el-tooltip>
             </template>
           </el-table-column>

smsb-plus-ui/src/views/smsb/itemPlayLine/index.vue

@@ -39,7 +39,7 @@
           </el-table-column>
           <el-table-column label="操作" width="150" align="center" class-name="small-padding fixed-width">
             <template #default="scope">
-              <el-tooltip content="开始抓取" placement="top">
+              <el-tooltip content="排期预览" placement="top">
                 <el-button link type="primary" icon="View" @click="handlePlayLine(scope.row)"
                            v-hasPermi="['device:log:add']">排期预览
                 </el-button>

smsb-plus-ui/src/views/smsb/manufacturer/index.vue

@@ -20,12 +20,6 @@
               <el-button v-hasPermi="['smsb:deviceManufacturer:add']" type="primary" plain icon="Plus"
                 @click="handleAdd"> 新增
               </el-button>
-              <el-button v-hasPermi="['smsb:deviceManufacturer:edit']" type="success" plain icon="Edit"
-                :disabled="single" @click="handleUpdate()">修改
-              </el-button>
-              <el-button v-hasPermi="['smsb:deviceManufacturer:remove']" type="danger" plain icon="Delete"
-                :disabled="multiple" @click="handleDelete()">删除
-              </el-button>
             </el-form-item>
           </el-form>
         </el-card>
@@ -33,26 +27,10 @@
     </transition>
 
     <el-card shadow="never">
-      <!--      <template #header>
-              <el-row :gutter="10" class="mb8">
-                <el-col :span="1.5">
-
-                </el-col>
-                <el-col :span="1.5">
-
-                </el-col>
-                <el-col :span="1.5">
-
-                </el-col>
-                <el-col :span="1.5">
-                  <el-button v-hasPermi="['smsb:deviceManufacturer:export']" type="warning" plain icon="Download" @click="handleExport">导出 </el-button>
-                </el-col>
-                <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
-              </el-row>
-            </template>-->
       <div class="table-content">
         <el-table v-loading="loading" :data="deviceManufacturerList" @selection-change="handleSelectionChange">
-          <el-table-column type="selection" width="55" align="center" />
+<!--          <el-table-column type="selection" width="55" align="center" />-->
+          <el-table-column label="" prop="" width="10" />
           <el-table-column v-if="true" label="主键ID" align="left" prop="id" width="200" />
           <el-table-column label="厂商标识" align="left" prop="manufacturerKey" width="180" />
           <el-table-column label="厂商名称" align="left" prop="manufacturerName" />
@@ -68,15 +46,15 @@
             </template>
           </el-table-column>
           <el-table-column label="备注" align="left" prop="remark" />
-          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
             <template #default="scope">
               <el-tooltip content="修改" placement="top">
                 <el-button v-hasPermi="['smsb:deviceManufacturer:edit']" link type="primary" icon="Edit"
-                  @click="handleUpdate(scope.row)"></el-button>
+                  @click="handleUpdate(scope.row)">修改</el-button>
               </el-tooltip>
               <el-tooltip content="删除" placement="top">
                 <el-button v-hasPermi="['smsb:deviceManufacturer:remove']" link type="primary" icon="Delete"
-                  @click="handleDelete(scope.row)"></el-button>
+                  @click="handleDelete(scope.row)">删除</el-button>
               </el-tooltip>
             </template>
           </el-table-column>
@@ -241,7 +219,7 @@ const handleSelectionChange = (selection: DeviceManufacturerVO[]) => {
 const handleAdd = () => {
   reset();
   dialog.visible = true;
-  dialog.title = '添加厂商管理';
+  dialog.title = '添加';
 };
 
 /** 修改按钮操作 */
@@ -251,7 +229,7 @@ const handleUpdate = async (row?: DeviceManufacturerVO) => {
   const res = await getDeviceManufacturer(_id);
   Object.assign(form.value, res.data);
   dialog.visible = true;
-  dialog.title = '修改厂商管理';
+  dialog.title = '修改';
 };
 
 /** 提交按钮 */

smsb-plus-ui/src/views/smsb/nettyHeart/index.vue

@@ -24,33 +24,12 @@
     </transition>
 
     <el-card shadow="never">
-      <!--      <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['device:deviceHeartRecord:add']">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['device:deviceHeartRecord:edit']">修改</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['device:deviceHeartRecord:remove']">删除</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['device:deviceHeartRecord:export']">导出</el-button>
-          </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
-      </template>-->
       <div class="table-content">
         <el-table v-loading="loading" :data="deviceHeartRecordList" @selection-change="handleSelectionChange">
           <!--        <el-table-column type="selection" width="55" align="center" />-->
           <el-table-column label="" align="left"  width="10"  />
           <el-table-column label="ID" align="left" prop="id" v-if="true" width="180" :show-overflow-tooltip="true" />
           <el-table-column label="设备标识" align="left" prop="identifier" width="250" :show-overflow-tooltip="true" />
-<!--
-          <el-table-column label="设备IP" align="left" prop="clientIp" width="160" :show-overflow-tooltip="true" />
--->
-          <!--        <el-table-column label="心跳类型 1-http 2-Netty" align="center" prop="heartType" />-->
           <el-table-column label="心跳间隔" align="center" prop="timeInterval" width="100" />
           <el-table-column label="心跳时间" align="left" prop="createTime" width="200" />
           <el-table-column label="设备名称" align="left" prop="deviceName" width="350" :show-overflow-tooltip="true" />
@@ -58,12 +37,9 @@
           <el-table-column label="设备MAC" align="left" prop="mac" :show-overflow-tooltip="true" />
           <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="80">
             <template #default="scope">
-              <!--            <el-tooltip content="修改" placement="top">
-              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['device:deviceHeartRecord:edit']"></el-button>
-            </el-tooltip>-->
               <el-tooltip content="删除" placement="top">
                 <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
-                           v-hasPermi="['device:heart:remove']"></el-button>
+                           v-hasPermi="['device:heart:remove']">删除</el-button>
               </el-tooltip>
             </template>
           </el-table-column>