🌷 UI(iot): 优化页面样式为卡片背景布局，调整设备详情样式和布局

src/assets/styles/index.scss

@@ -151,6 +151,11 @@ aside {
   background-color: #fff;
   border-radius: 8px;
   border: 1px solid #e6ebf5;
+  .card-footer{
+    .el-button + .el-button{
+      margin-left: 0;
+    }
+  }
 }
 //项目卡片
 .main-project-card{
@@ -161,11 +166,52 @@ aside {
   border: 1px solid #e6ebf5;
 }
 //设备详情卡片
-.main-device-card{
+.main-device-select-card{
   padding: 20px !important;
-  background-color: #fff;
+  background-color: #fff !important;
   border-radius: 8px;
   border: 1px solid #e6ebf5;
+  margin-bottom: 20px;
+}
+.main-device-card{
+  padding: 20px !important;
+  background-color: #fff !important;
+  border-radius: 8px;
+  border: 1px solid #e6ebf5;
+}
+
+.info-tabs-circuit.main-device-card,.info-tabs.main-device-card{
+  background: #121315;
+  .device-detail-tabs{
+    >.el-tabs__header{
+      >.el-tabs__nav-wrap{
+        >.el-tabs__nav-scroll{
+          height: 50px;
+          >.el-tabs__nav{
+            >.el-tabs__item{
+              height: 32px;
+              line-height: 32px;
+              color: #888a8e;
+              background: #fff;
+              user-select: none;
+              padding: 0 20px !important;
+              border-radius: 4px;
+              &.is-active{
+                background: #1890FF !important;
+                border-bottom-color: #1890FF!important;
+                color: #fff;
+              }
+            }
+            >.el-tabs__active-bar{
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
+
 }
 
 

src/views/iot/contacts/index.vue

@@ -1,17 +1,18 @@
 <template>
   <div class="app-container">
     <el-form
-      :model="queryParams"
+      v-show="showSearch"
       ref="queryForm"
       :inline="true"
-      v-show="showSearch"
+      :model="queryParams"
+      class="main-search-card"
       label-width="68px"
     >
       <el-form-item label="手机号码" prop="phone">
         <el-input
           v-model="queryParams.phone"
-          placeholder="请输入手机号码"
           clearable
+          placeholder="请输入手机号码"
           size="small"
           @keyup.enter.native="handleQuery"
         />
@@ -19,102 +20,102 @@
       <el-form-item label="微信昵称" prop="mpNickName">
         <el-input
           v-model="queryParams.mpNickName"
-          placeholder="请输入微信昵称"
           clearable
+          placeholder="请输入微信昵称"
           size="small"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
-
+    <div class="main-content-card">
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
           v-hasPermi="['iot:contacts:add']"
+          icon="el-icon-plus"
+          plain
+          size="mini"
+          type="primary"
+          @click="handleAdd"
         >新增</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
           v-hasPermi="['iot:contacts:export']"
+          icon="el-icon-download"
+          plain
+          size="mini"
+          type="warning"
+          @click="handleExport"
         >导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="contactsList">
-      <el-table-column type="index" label="序号" align="center" :index="indexFormatter" width="80px"></el-table-column>
+      <el-table-column :index="indexFormatter" align="center" label="序号" type="index" width="80px"></el-table-column>
-      <el-table-column label="姓名" align="left" prop="name" />
+      <el-table-column align="left" label="姓名" prop="name" />
-      <el-table-column label="手机号码" align="left" prop="phone" />
+      <el-table-column align="left" label="手机号码" prop="phone" />
-      <el-table-column label="微信昵称" align="left" prop="mpNickName" />
+      <el-table-column align="left" label="微信昵称" prop="mpNickName" />
-      <el-table-column label="头像" align="center" width="50px" prop="mpAvatar">
+      <el-table-column align="center" label="头像" prop="mpAvatar" width="50px">
         <template slot-scope="scope">
           <div class="demo-image__preview">
             <el-image
               v-if="scope.row.mpAvatar"
-              style="width: 35px; height: 35px"
-              :src="getIotFileUrl(scope.row.mpAvatar)"
               :preview-src-list="[getIotFileUrl(scope.row.mpAvatar)]"
+              :src="getIotFileUrl(scope.row.mpAvatar)"
+              style="width: 35px; height: 35px"
             ></el-image>
             <span v-else>暂无</span>
           </div>
         </template>
       </el-table-column>
       <el-table-column
-        label="状态"
-        align="center"
-        width="120px"
-        prop="status"
         :formatter="statusFormatter"
+        align="center"
+        label="状态"
+        prop="status"
+        width="120px"
       />
       <el-table-column
-        label="操作"
         align="center"
-        width="300px"
         class-name="small-padding fixed-width"
+        label="操作"
+        width="300px"
       >
         <template slot-scope="scope">
           <el-button
+            v-hasPermi="['iot:contacts:edit']"
+            icon="el-icon-edit"
             size="mini"
             type="text"
-            icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['iot:contacts:edit']"
           >修改</el-button>
 
           <el-button
+            v-hasPermi="['iot:contacts:edit']"
+            icon="el-icon-connection"
             size="mini"
             type="text"
-            icon="el-icon-connection"
             @click="handelBinding(scope.row)"
-            v-hasPermi="['iot:contacts:edit']"
           >绑定微信</el-button>
           <el-button
+            v-hasPermi="['iot:contacts:edit']"
+            icon="el-icon-c-scale-to-original"
             size="mini"
             type="text"
-            icon="el-icon-c-scale-to-original"
             @click="handleUbind(scope.row)"
-            v-hasPermi="['iot:contacts:edit']"
           >解绑微信</el-button>
           <el-button
+            v-hasPermi="['iot:contacts:remove']"
+            icon="el-icon-delete"
             size="mini"
             type="text"
-            icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['iot:contacts:remove']"
           >删除</el-button>
         </template>
       </el-table-column>
@@ -122,15 +123,15 @@
 
     <pagination
       v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
+      :page.sync="queryParams.pageNum"
+      :total="total"
       @pagination="getList"
     />
-
+    </div>
     <!-- 添加或修改联系人对话框 -->
-    <dialog-template :title="title" @close="open = false" :visible="open" width="500px">
+    <dialog-template :title="title" :visible="open" width="500px" @close="open = false">
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px" slot="dialog-center">
+      <el-form ref="form" slot="dialog-center" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="姓名:" prop="name">
           <el-input v-model="form.name" placeholder="请输入姓名" />
         </el-form-item>
@@ -140,14 +141,14 @@
         <el-form-item label="状态:" >
           <el-switch
             v-model="form.status"
-            active-value='0'
-            inactive-value='1'
             active-color="#13ce66"
-            inactive-color="#ff4949">
+            active-value='0'
+            inactive-color="#ff4949"
+            inactive-value='1'>
           </el-switch>
         </el-form-item>
         <el-form-item label="描述:" >
-          <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入描述" />
+          <el-input v-model="form.remark" :rows="2" placeholder="请输入描述" type="textarea" />
         </el-form-item>
         <!-- <el-form-item label="邮箱地址:" prop="email">
           <el-input v-model="form.email" placeholder="请输入邮箱地址" />
@@ -160,20 +161,20 @@
     </dialog-template>
 
     <!-- 添加或修改联系人对话框 -->
-    <dialog-template :close-on-click-modal="false"  @close="qrCodeDialogOpen = false"  title="授权扫二维码" :visible="qrCodeDialogOpen" width="650px">
+    <dialog-template :close-on-click-modal="false"  :visible="qrCodeDialogOpen"  title="授权扫二维码" width="650px" @close="qrCodeDialogOpen = false">
-      <div class="qrcode-wrap" v-if="qrCodeDialogOpen" slot="dialog-center">
+      <div v-if="qrCodeDialogOpen" slot="dialog-center" class="qrcode-wrap">
         <div class="qr-wrap">
           <img :src="gzhqr"/>
           <span>第一步：扫码关注公众号。</span>
         </div>
-        <el-button type="text" style="font-size: 20px;" icon="el-icon-d-arrow-right"></el-button>
+        <el-button icon="el-icon-d-arrow-right" style="font-size: 20px;" type="text"></el-button>
         <div class="qr-wrap">
           <div id="qrcode"></div>
           <span style="margin-top: 10px;">第二步：扫码绑定微信。</span>
         </div>
       </div>
       <div slot="dialog-footer" class="dialog-footer">
-        <el-button size="mini" type="primary" style="margin-right: 10px;" @click="qrCodeSubmit">确 定</el-button>
+        <el-button size="mini" style="margin-right: 10px;" type="primary" @click="qrCodeSubmit">确 定</el-button>
       </div>
     </dialog-template>
   </div>

src/views/iot/device/index.vue

@@ -548,19 +548,19 @@
         </dialog-template>
       </div>
     </div>
-    <div
+<!--    <div-->
-      v-show="componectVal !== ''"
+<!--      v-show="componectVal !== ''"-->
-      :class="
+<!--      :class="-->
-        componectVal === 'GatewayDetail'
+<!--        componectVal === 'GatewayDetail'-->
-          ? 'to-home-wrap2 gateway-wrap'
+<!--          ? 'to-home-wrap2 gateway-wrap'-->
-          : 'to-home-wrap2 '
+<!--          : 'to-home-wrap2 '-->
-      "
+<!--      "-->
-      @click="toTableClick"
+<!--      @click="toTableClick"-->
-    >
+<!--    >-->
-      <el-button circle icon="el-icon-d-arrow-left" title="返回列表"
+<!--      <el-button circle icon="el-icon-d-arrow-left" title="返回列表"-->
-        >返回列表</el-button
+<!--        >返回列表</el-button-->
-      >
+<!--      >-->
-    </div>
+<!--    </div>-->
     <el-dialog :visible.sync="imgModelShow" title="设备二维码" width="400px">
       <img ref="qrCode" height="100%" width="100%" />
     </el-dialog>

src/views/iot/device/profile/details.vue

@@ -1,6 +1,18 @@
 <template>
   <div class="iot-project-details-warp">
-    <div class="info-tabs">
+    <div class="iot-project-details-warp-info main-device-select-card">
+      <div class="device-info-left">
+        <span>设备名称：{{infoData.deviceName}}</span>
+        <span>设备key：{{infoData.deviceKey}}</span>
+        <span>所属型号：{{infoData.modelName}}</span>
+      </div>
+      <div class="link-to-list">
+        <el-button icon="el-icon-d-arrow-left" size="small" style="margin-left: 10px;" title="返回列表" type="primary" @click="toTableClick"
+        >返回列表</el-button
+        >
+      </div>
+    </div>
+    <div class="info-tabs main-device-card">
       <div v-show="breadcrumbList.length > 1" class="breadcrumb-wrap">
         <el-breadcrumb separator-class="el-icon-arrow-right">
           <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
@@ -8,10 +20,11 @@
           </el-breadcrumb-item>
         </el-breadcrumb>
       </div>
+
       <el-tabs
         v-model="activeName"
         :class="breadcrumbList.length > 1 ? 'children-wrap' : ''"
-        type="border-card"
+        class="device-detail-tabs"
       >
         <el-tab-pane label="运行状态" name="runingState">
           <div class="tabs-body protocol-wrap">
@@ -113,6 +126,10 @@ export default {
     this.deviceInfo();
   },
   methods: {
+    // 跳转详情页
+    toTableClick() {
+      this.$emit('toTableClick')
+    },
     // 点击查看设备详情
     deviceClick(row, index) {
       if (row.deviceId === this.deviceId) {
@@ -177,6 +194,19 @@ export default {
       color: #1890ff;
     }
   }
+
+  .iot-project-details-warp-info{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .device-info-left{
+      span{
+        margin-right: 20px;
+        font-size: 14px;
+      }
+    }
+  }
+
   .product-release-dialog {
     .title-i {
       font-size: 20px;
@@ -306,8 +336,8 @@ export default {
     position: relative;
     box-sizing: border-box;
     .el-tabs__content {
-      height: calc(100vh - 191px);
+      //height: calc(100vh - 191px);
-      overflow: auto;
+      //overflow: auto;
     }
     .el-tabs__header {
       background-color: #fff;
@@ -321,10 +351,6 @@ export default {
       }
     }
     .el-tabs__nav-scroll {
-      height: 65px;
-      padding-top: 25px;
-      padding-left: 15px;
-      background: #e4eaf3;
     }
     .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
       background: #fff;
@@ -927,4 +953,5 @@ export default {
   border-radius: 10px;
   background: #ffffff;
 }
+
 </style>

src/views/iot/trigger/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="trigger-list">
     <div>
-      <el-form :model="queryParams" ref="queryForm" :inline="true">
+      <el-form ref="queryForm" :inline="true" :model="queryParams" class="main-search-card">
         <el-form-item label="关键字" prop="searchValue">
           <el-input
             v-model="queryParams.searchValue"
-            placeholder="关键字"
             clearable
+            placeholder="关键字"
             size="small"
             style="width: 240px"
             @keyup.enter.native="handleQuery"
@@ -14,69 +14,70 @@
         </el-form-item>
 
         <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
           <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         </el-form-item>
       </el-form>
+      <div class="main-content-card">
       <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
           <el-button
-            type="primary"
+            v-hasPermi="['iot:trigger:add']"
             icon="el-icon-plus"
             size="mini"
+            type="primary"
             @click="handleAdd"
-            v-hasPermi="['iot:trigger:add']"
           >新增</el-button>
         </el-col>
       </el-row>
 
       <el-table
         v-loading="listLoading"
+        :data="tableList"
         :default-sort="{prop: 'createTime', order: 'descending'}"
         @sort-change="sortChange"
-        :data="tableList"
       >
         <el-table-column
-          type="index"
-          label="序号"
-          align="center"
           :index="indexFormatter"
+          align="center"
+          label="序号"
+          type="index"
           width="80px"
         ></el-table-column>
         <el-table-column
+          align="left"
           label="触发器名称"
+          prop="triggerName"
           sortable="custom"
           width="250"
-          align="left"
-          prop="triggerName"
         />
-        <el-table-column label="推送内容" align="left" :aria-hidden="true" prop="templateContent" />
+        <el-table-column :aria-hidden="true" align="left" label="推送内容" prop="templateContent" />
-        <el-table-column label="状态" align="center" width="80">
+        <el-table-column align="center" label="状态" width="80">
           <template slot-scope="scope">
             <el-tag v-if="scope.row.status === '0'">启用</el-tag>
-            <el-tag type="danger" v-else>禁用</el-tag>
+            <el-tag v-else type="danger">禁用</el-tag>
           </template>
         </el-table-column>
         <el-table-column
-          label="创建时间"
-          sortable="custom"
           align="center"
+          label="创建时间"
           prop="createTime"
+          sortable="custom"
           width="160"
         ></el-table-column>
         <el-table-column
-          label="操作"
-          width="200"
           align="center"
           class-name="small-padding fixed-width"
+          label="操作"
+          width="200"
         >
           <template slot-scope="scope">
             <el-button
+              v-hasPermi="['iot:trigger:add']"
+              icon="el-icon-document-add"
               size="mini"
               type="text"
-              icon="el-icon-document-add"
               @click="handleCopperIn(scope.row, 'copper')"
-              v-hasPermi="['iot:trigger:add']"
             >复制新增</el-button>
 
             <!-- <el-button
@@ -88,60 +89,61 @@
             >查看</el-button>-->
 
             <el-button
+              v-hasPermi="['iot:trigger:edit']"
+              icon="el-icon-edit"
               size="mini"
               type="text"
-              icon="el-icon-edit"
               @click="handleCopperIn(scope.row, 'update')"
-              v-hasPermi="['iot:trigger:edit']"
             >编辑</el-button>
 
             <el-button
+              v-hasPermi="['iot:trigger:remove']"
+              icon="el-icon-delete"
               size="mini"
               type="text"
-              icon="el-icon-delete"
               @click="handleDeletes(scope.row)"
-              v-hasPermi="['iot:trigger:remove']"
             >删除</el-button>
           </template>
         </el-table-column>
       </el-table>
       <pagination
         v-show="total>0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
         :limit.sync="queryParams.pageSize"
+        :page.sync="queryParams.pageNum"
+        :total="total"
         @pagination="getList"
       />
     </div>
+    </div>
 
     <div class="trigger-dialog">
       <el-dialog
-        :close-on-press-escape="false"
         :close-on-click-modal="false"
-        title="触发器详情"
+        :close-on-press-escape="false"
-        width="40%"
         :visible.sync="triggerDetailsDialog"
-        @close="triggerDetailsDialog = false"
+        title="触发器详情"
         top="5vh"
+        width="40%"
+        @close="triggerDetailsDialog = false"
       >
         <!-- <triggerDetails slot="dialog-center" v-if="triggerDetailsDialog === true" :triggerId="tempModel.triggerId"></triggerDetails> -->
       </el-dialog>
 
       <!-- 新增触发器dialog -->
       <el-dialog
-        class="trigger-d-dialog"
         :close-on-click-modal="false"
+        :visible.sync="outerVisible"
+        append-to-body
+        class="trigger-d-dialog"
         title="新增触发器"
         width="900px"
-        :visible.sync="outerVisible"
         @close="outerVisible = false"
-        append-to-body
       >
         <component
-          v-if="outerVisible"
           :is="componectVal"
-          :type="childOpt.type"
+          v-if="outerVisible"
           :triggerId="childOpt.triggerId"
+          :type="childOpt.type"
           @recover="dialogRecover"
         ></component>
       </el-dialog>

src/views/iot/video/gbsScreen/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div
     class="gbs-screen-view"
-    style="background: #f4f4f4; height: calc(100vh - 85px); padding: 10px"
+    style="background: #f4f4f4; height: calc(100vh - 85px); padding: 10px;"
   >
     <el-row :gutter="20">
-      <el-col :span="5"  style="overflow: hidden">
+      <el-col :span="5"  style="overflow: hidden;border-radius: 8px;">
-        <div>
+        <div style="overflow: hidden;border-radius: 8px 8px 0 0;">
           <span
             style="
               display: block;
@@ -90,7 +90,7 @@
             </div>
           </el-tree>
         </div>
-        <div class="video-right">
+        <div class="video-right"  style="overflow: hidden;border-radius: 0 0 8px 8px;">
           <cloud-control
             :disabledState="false"
             width="200px"

src/views/profile/DeviceDetailsView/deviceLog.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="iot-child-device">
     <el-form
-      :model="queryParams"
+      v-show="showSearch"
       ref="queryForm"
       :inline="true"
-      v-show="showSearch"
+      :model="queryParams"
       label-width="68px"
     >
       <el-form-item label="方向" prop="direction">
-        <el-select v-model="queryParams.direction" @change="handleQuery">
+        <el-select v-model="queryParams.direction" size="small" @change="handleQuery">
           <el-option v-for="item in direction" :key="item.value" :label="item.label" :value="item.value"/>
         </el-select>
       </el-form-item>
@@ -23,17 +23,17 @@
       <!--      </el-form-item>-->
       <el-form-item label="时间">
         <el-date-picker
-          @change="pickerChange"
-          size="small"
           v-model="pickerValue"
-          type="datetimerange"
-          range-separator="至"
-          start-placeholder="开始日期"
           end-placeholder="结束日期"
+          range-separator="至"
+          size="small"
+          start-placeholder="开始日期"
+          type="datetimerange"
+          @change="pickerChange"
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
@@ -47,23 +47,23 @@
       :data="deviceLogList"
       :default-sort="{ prop: 'timestamp', order: 'descending' }"
       @sort-change="sortChange">
-      <el-table-column type="index" label="序号" align="center" :index="indexFormatter" width="80px"/>
+      <el-table-column :index="indexFormatter" align="center" label="序号" type="index" width="80px"/>
-      <el-table-column label="设备名称" align="left" width="200px" prop="deviceName"/>
+      <el-table-column align="left" label="设备名称" prop="deviceName" width="200px"/>
-      <el-table-column label="用户账号" align="left" width="200px" prop="userName"/>
+      <el-table-column align="left" label="用户账号" prop="userName" width="200px"/>
-      <el-table-column label="报文" align="left" prop="logData">
+      <el-table-column align="left" label="报文" prop="logData">
         <template v-slot="scope">
           <span class="column-part-hide">{{ scope.row.logData }}</span>
           <span class="copy-link" @click="copyOnClick(scope.row.logData)">复制</span>
         </template>
       </el-table-column>
-      <el-table-column label="创建时间" align="center" width="160px" prop="timestamp" sortable="custom" :formatter="dateFormat"/>
+      <el-table-column :formatter="dateFormat" align="center" label="创建时间" prop="timestamp" sortable="custom" width="160px"/>
     </el-table>
 
     <pagination
       v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
+      :page.sync="queryParams.pageNum"
+      :total="total"
       @pagination="getDeviceLogList"
     />
 

src/views/profile/DeviceDetailsView/deviceSelectNav.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="device-select-nav">
+  <div class="device-select-nav main-device-select-card">
     <div v-if="childDeviceList.length > 0" class="layout-select-wrap">
       <!-- <div
         class="but"
@@ -162,7 +162,8 @@
         :body-style="{
           padding: '0px',
           width: '220px',
-          boxShadow: '0 1px 5px 0 #2530341a'
+          boxShadow: '0 1px 5px 0 #2530341a',
+          cursor: 'pointer'
         }"
         :style="
           deviceInfo.deviceId === checkobxDeviceId
@@ -241,7 +242,7 @@
       <el-card
         v-for="item in childDeviceList"
         :key="item.deviceId"
-        :body-style="{ padding: '0px', width: '220px' }"
+        :body-style="{ padding: '0px', width: '220px', cursor: 'pointer' }"
         :style="
           item.deviceId === checkobxDeviceId
             ? 'border: 1px solid #1890ff; margin: 5px; width: 220px; flex-shrink: 0; boxShadow: 0 1px 5px 0 #2530341a;'
@@ -880,7 +881,7 @@ export default {
   .layout-device-list {
     width: 100%;
     display: flex;
-    height: 90px;
+    //height: 90px;
     overflow: auto;
   }
 

src/views/profile/DeviceDetailsView/index.vue

@@ -8,14 +8,13 @@
       @changeEvent="viewDeviceChange($event)"
       @wsRealTImeMsg="wsRealTImeMsg($event)"
     ></device-select>
-    <div class="main-device-card">
     <div :class="infoData.deviceType === 'GATEWAY_CONTROLLER' ? 'link-to-list is-widening': 'link-to-list'">
-        <el-button circle icon="el-icon-d-arrow-left" style="margin-left: 10px;" title="返回列表" @click="toTableClick"
+      <el-button icon="el-icon-d-arrow-left" size="small" style="margin-left: 10px;" title="返回列表" type="primary" @click="toTableClick"
         >返回列表</el-button
       >
-        <el-button v-if="infoData.deviceType === 'GATEWAY_CONTROLLER'" circle title="批量升级" @click="batchUpgradeOpen">批量升级</el-button>
+      <el-button v-if="infoData.deviceType === 'GATEWAY_CONTROLLER'" size="small" title="批量升级" type="primary" @click="batchUpgradeOpen">批量升级</el-button>
     </div>
-      <div class="info-tabs-circuit">
+    <div class="info-tabs-circuit main-device-card">
       <div v-show="breadcrumbList.length > 1" class="breadcrumb-wrap">
         <el-breadcrumb separator-class="el-icon-arrow-right">
           <el-breadcrumb-item
@@ -37,8 +36,10 @@
       <el-tabs
         v-model="activeName"
         :class="breadcrumbList.length > 1 ? 'children-wrap' : ''"
+        class="device-detail-tabs"
       >
-          <el-tab-pane label="运行状态" name="runingState">
+        <el-tab-pane name="runingState">
+          <span slot="label">运行状态</span>
           <div class="tabs-body protocol-wrap">
             <state-management
               v-if="devudeRunState"
@@ -122,7 +123,6 @@
         </el-tab-pane>
       </el-tabs>
     </div>
-    </div>
     <div style="height: 0;">
         <!-- 添加或修改建筑类型对话框 -->
         <dialog-template
@@ -293,6 +293,7 @@ export default {
 </script>
 <style lang="scss">
 .iot-circuit-breaker-details-warp {
+  position: relative;
   .breadcrumb-wrap {
     position: absolute;
     top: 15px;
@@ -434,31 +435,22 @@ export default {
   }
 
   .link-to-list {
+    position: absolute;
+    top: 20px;
+    right: 20px;
     display: flex;
-    color: #656363;
+    justify-content: flex-end;
-    font-size: 20px;
-    height: 0;
-    background: #e4eaf3;
-    display: flex;
-    position: relative;
-    top: 10px;
     z-index: 100;
-    width: 120px;
-    left: calc(100% - 120px);
-    cursor: default;
-    justify-content: flex-start;
-    flex-wrap: nowrap;
-    flex-direction: row-reverse;
     .el-button--medium.is-circle {
-      width: 25px;
+      //width: 25px;
-      height: 20px;
+      //height: 20px;
-      padding: 0;
+      padding: 10px;
       background: #0d8afd;
       color: #fff;
       font-size: 16px;
       border-radius: 5px;
-      height: 30px;
+      //height: 30px;
-      width: 100%;
+      //width: 100%;
       font-size: 14px;
     }
   }
@@ -468,16 +460,16 @@ export default {
   }
 
   .is-widening {
-    width: 220px;
+    //width: 220px;
-    left: calc(100% - 220px);
+    //left: calc(100% - 220px);
   }
 
   .info-tabs-circuit {
     position: relative;
     box-sizing: border-box;
     .el-tabs__content {
-      height: calc(100vh - 340px);
+      //height: calc(100vh - 340px);
-      overflow: auto;
+      //overflow: auto;
     }
     .el-tabs__header {
       background-color: #fff;
@@ -491,9 +483,9 @@ export default {
       }
     }
     .el-tabs__nav-scroll {
-      height: 65px;
+      //height: 65px;
-      padding-top: 25px;
+      //padding-top: 25px;
-      padding-left: 5px;
+      //padding-left: 5px;
       // background: #e4eaf3;
     }
     .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {

src/views/profile/DeviceDetailsView/modelOat.vue

@@ -1,17 +1,17 @@
 <template>
-  <div class="app-container">
+  <div class="app-container" style="padding: 0 10px 10px 10px">
     <el-form
-      :model="queryParams"
+      v-show="showSearch"
       ref="queryForm"
       :inline="true"
-      v-show="showSearch"
+      :model="queryParams"
       label-width="68px"
     >
       <el-form-item label="固件版本" prop="otaVersion">
         <el-input
           v-model="queryParams.otaVersion"
-          placeholder="请输入固件版本"
           clearable
+          placeholder="请输入固件版本"
           size="small"
           @keyup.enter.native="handleQuery"
         />
@@ -19,9 +19,9 @@
 
       <el-form-item>
         <el-button
-          type="primary"
           icon="el-icon-search"
           size="mini"
+          type="primary"
           @click="handleQuery"
           >搜索</el-button
         >
@@ -39,26 +39,26 @@
       @selection-change="handleSelectionChange"
     >
       <el-table-column
-        type="index"
-        label="序号"
-        align="center"
         :index="indexFormatter"
+        align="center"
+        label="序号"
+        type="index"
         width="80px"
       ></el-table-column>
-      <el-table-column label="型号" align="laft" width="200" prop="modelName" />
+      <el-table-column align="laft" label="型号" prop="modelName" width="200" />
       <el-table-column
+        align="center"
         label="固件版本"
-        align="center"
-        width="160"
         prop="otaVersion"
+        width="160"
       />
       <el-table-column
-        label="固件大小"
         align="center"
-        width="160"
+        label="固件大小"
         prop="otaSize"
+        width="160"
       />
-      <el-table-column label="升级地址" align="left" prop="otaUrl">
+      <el-table-column align="left" label="升级地址" prop="otaUrl">
         <template slot-scope="scope">
           <span
             style="
@@ -84,7 +84,7 @@
           > -->
         </template>
       </el-table-column>
-      <el-table-column label="文件地址" align="left" prop="txtUrl">
+      <el-table-column align="left" label="文件地址" prop="txtUrl">
         <template slot-scope="scope">
           <span
             style="
@@ -111,31 +111,31 @@
         </template>
       </el-table-column>
       <el-table-column
-        label="升级信息"
         align="left"
+        label="升级信息"
         prop="otaInfo"
       ></el-table-column>
       <el-table-column
-        label=" 创建时间"
         align="center"
+        label=" 创建时间"
         prop="createTime"
         sortable="custom"
         width="150px"
       />
       <el-table-column
-        label="操作"
+        v-if="!isTenant"
-        width="150"
         align="center"
         class-name="small-padding fixed-width"
-        v-if="!isTenant"
+        label="操作"
+        width="150"
       >
         <template slot-scope="scope">
           <el-button
+            v-show="deviceInfo['otaVersion'] !== scope.row.otaVersion"
+            icon="el-icon-edit"
             size="mini"
             type="text"
-            icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-show="deviceInfo['otaVersion'] !== scope.row.otaVersion"
             >升级固件</el-button
           >
         </template>
@@ -144,9 +144,9 @@
 
     <pagination
       v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
+      :page.sync="queryParams.pageNum"
+      :total="total"
       @pagination="getList"
     />
   </div>

src/views/profile/DeviceRunStarts/index.vue

@@ -304,7 +304,7 @@ export default {
   display: flex;
   flex-wrap: wrap;
   overflow: auto;
-  padding: 10px;
+  //padding: 10px;
   .el-button--medium {
     position: absolute;
     right: 30px;
@@ -316,6 +316,9 @@ export default {
     flex-wrap: wrap;
     cursor: default;
     padding: 10px;
+    &:first-child{
+      padding-top: 0;
+    }
     .cmd-title-wrap {
       width: 100%;
       display: flex;

src/views/profile/autocontrol/job/index.vue

@@ -1,17 +1,18 @@
 <template>
   <div class="app-container autocontol-job-wrap">
     <el-form
-      :model="queryParams"
+      v-show="showSearch"
       ref="queryForm"
       :inline="true"
-      v-show="showSearch"
+      :model="queryParams"
+      class="main-search-card"
       label-width="68px"
     >
       <el-form-item label="任务名称" prop="jobName">
         <el-input
           v-model="queryParams.jobName"
-          placeholder="请输入任务名称"
           clearable
+          placeholder="请输入任务名称"
           size="small"
           @keyup.enter.native="handleQuery"
         />
@@ -27,7 +28,7 @@
         </el-select>
       </el-form-item>-->
       <el-form-item label="任务状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable size="small">
+        <el-select v-model="queryParams.status" clearable placeholder="请选择任务状态" size="small">
           <el-option
             v-for="dict in statusOptions"
             :key="dict.dictValue"
@@ -37,40 +38,40 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
-
+    <div class="main-content-card">
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
           v-hasPermi="['device:job:add']"
+          icon="el-icon-plus"
+          plain
+          size="mini"
+          type="primary"
+          @click="handleAdd"
         >新增</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
           v-hasPermi="['device:job:export']"
+          icon="el-icon-download"
+          plain
+          size="mini"
+          type="warning"
+          @click="handleExport"
         >导出</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-          type="info"
-          plain
-          icon="el-icon-s-operation"
-          size="mini"
-          @click="handleJobLog"
           v-hasPermi="['device:job:query']"
+          icon="el-icon-s-operation"
+          plain
+          size="mini"
+          type="info"
+          @click="handleJobLog"
         >日志</el-button>
         <!-- <el-button size="mini" type="primary" @click="open1 = true">测试</el-button> -->
       </el-col>
@@ -78,21 +79,21 @@
     </el-row>
 
     <el-table v-loading="loading" :data="jobList">
-      <el-table-column type="index" label="序号" align="center" :index="indexFormatter" width="80px"></el-table-column>
+      <el-table-column :index="indexFormatter" align="center" label="序号" type="index" width="80px"></el-table-column>
-      <el-table-column label="任务名称" align="center" prop="jobName" :show-overflow-tooltip="true" />
+      <el-table-column :show-overflow-tooltip="true" align="center" label="任务名称" prop="jobName" />
       <!-- <el-table-column
         label="任务组名"
         align="center"
         prop="jobGroup"
         :formatter="jobGroupFormat"
       />-->
-      <el-table-column label="状态" align="center">
+      <el-table-column align="center" label="状态">
         <template slot-scope="scope">
           <el-switch
             v-model="scope.row.status"
+            v-hasPermi="['device:job:changeStatus']"
             active-value="0"
             inactive-value="1"
-            v-hasPermi="['device:job:changeStatus']"
             @change="handleStatusChange(scope.row)"
           ></el-switch>
           <span v-if="scope.row.status === '0'" style="margin-left: 5px;">正常</span>
@@ -100,18 +101,18 @@
         </template>
       </el-table-column>
       <el-table-column
-        label="操作"
-        width="250px"
         align="center"
         class-name="small-padding fixed-width"
+        label="操作"
+        width="250px"
       >
         <template slot-scope="scope">
           <el-button
+            v-hasPermi="['device:job:changeStatus']"
+            icon="el-icon-caret-right"
             size="mini"
             type="text"
-            icon="el-icon-caret-right"
             @click="handleRun(scope.row)"
-            v-hasPermi="['device:job:changeStatus']"
           >执行一次</el-button>
           <!-- <el-button
             size="mini"
@@ -120,16 +121,16 @@
             v-hasPermi="['device:job:edit']"
           >修改</el-button>-->
           <el-button
+            v-hasPermi="['device:job:edit']"
             size="mini"
             type="text"
             @click="handleDetails(scope.row)"
-            v-hasPermi="['device:job:edit']"
           >详情</el-button>
           <el-button
+            v-hasPermi="['device:job:remove']"
             size="mini"
             type="text"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['device:job:remove']"
           >删除</el-button>
         </template>
       </el-table-column>
@@ -137,26 +138,26 @@
 
     <pagination
       v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
+      :page.sync="queryParams.pageNum"
+      :total="total"
       @pagination="getList"
     />
-
+    </div>
     <!-- 添加或修改定时任务对话框 -->
     <el-dialog
-      class="eldialog-wrap"
       :close-on-click-modal="false"
       :title="title"
       :visible.sync="open"
-      @close="detailsShow = false"
+      class="eldialog-wrap"
       width="880px"
+      @close="detailsShow = false"
     >
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-row>
           <el-col :span="24">
             <el-form-item label="任务名称:" prop="jobName">
-              <el-input :disabled="detailsShow" v-model="form.jobName" placeholder="请输入任务名称" />
+              <el-input v-model="form.jobName" :disabled="detailsShow" placeholder="请输入任务名称" />
             </el-form-item>
           </el-col>
           <!-- <el-col :span="24">
@@ -167,42 +168,42 @@
           <el-col :span="24">
             <div>
               <easy-cron
-                :hideSecond="false"
-                :disabled="detailsShow"
-                style="width: 100%;"
                 v-model="form.cronExpression"
+                :disabled="detailsShow"
                 :exeStartTime="exeStartTime"
+                :hideSecond="false"
+                style="width: 100%;"
               ></easy-cron>
             </div>
           </el-col>
           <el-col :span="24">
             <div style="margin-top: 20px;">
               <el-button
-                size="mini"
                 v-show="detailsShow === false"
+                size="mini"
                 type="primary"
                 @click="addDeviceInfo"
               >添加设备</el-button>
               <device-param-wrap
-                ref="paramsWrap"
-                :disabled="detailsShow"
                 v-for="(item,index) in relationList"
-                :tempIndex="item.guid"
-                :deleteButtonD="relationList.length < 2"
                 :key="item.guid"
+                ref="paramsWrap"
                 :appInfo="appInfo"
+                :deleteButtonD="relationList.length < 2"
+                :disabled="detailsShow"
                 :paramsDevcie="item"
+                :style="item.isSubmit === false ? 'border: 1px solid #ff4949;' : ''"
+                :tempIndex="item.guid"
                 @delInfo="delInfo"
                 @resultEvent="resultEvent"
-                :style="item.isSubmit === false ? 'border: 1px solid #ff4949;' : ''"
               >{{item.isSubmit}}</device-param-wrap>
             </div>
           </el-col>
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button size="mini" type="primary" v-show="detailsShow" @click="detailsShow = false">编辑</el-button>
+        <el-button v-show="detailsShow" size="mini" type="primary" @click="detailsShow = false">编辑</el-button>
-        <el-button size="mini" type="primary" v-show="detailsShow === false" @click="submitForm">确 定</el-button>
+        <el-button v-show="detailsShow === false" size="mini" type="primary" @click="submitForm">确 定</el-button>
         <el-button size="mini" @click="cancel">取 消</el-button>
       </div>
     </el-dialog>

src/views/profile/autocontrol/jobLog/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" class="main-search-card" label-width="68px">
       <el-form-item label="任务名称" prop="jobName">
         <el-input
           v-model="queryParams.jobName"
-          placeholder="请输入任务名称"
           clearable
+          placeholder="请输入任务名称"
           size="small"
           style="width: 240px"
           @keyup.enter.native="handleQuery"
@@ -14,8 +14,8 @@
       <el-form-item label="任务组名" prop="jobGroup">
         <el-select
           v-model="queryParams.jobGroup"
-          placeholder="请任务组名"
           clearable
+          placeholder="请任务组名"
           size="small"
           style="width: 240px"
         >
@@ -30,8 +30,8 @@
       <el-form-item label="执行状态" prop="status">
         <el-select
           v-model="queryParams.status"
-          placeholder="请选择执行状态"
           clearable
+          placeholder="请选择执行状态"
           size="small"
           style="width: 240px"
         >
@@ -46,76 +46,76 @@
       <el-form-item label="执行时间">
         <el-date-picker
           v-model="dateRange"
-          size="small"
-          style="width: 240px"
-          value-format="yyyy-MM-dd"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
           end-placeholder="结束日期"
+          range-separator="-"
+          size="small"
+          start-placeholder="开始日期"
+          style="width: 240px"
+          type="daterange"
+          value-format="yyyy-MM-dd"
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
-
+    <div class="main-content-card">
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
           v-hasPermi="['monitor:job:remove']"
+          :disabled="multiple"
+          icon="el-icon-delete"
+          plain
+          size="mini"
+          type="danger"
+          @click="handleDelete"
         >删除</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          @click="handleClean"
           v-hasPermi="['monitor:job:remove']"
+          icon="el-icon-delete"
+          plain
+          size="mini"
+          type="danger"
+          @click="handleClean"
         >清空</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
           v-hasPermi="['monitor:job:export']"
+          icon="el-icon-download"
+          plain
+          size="mini"
+          type="warning"
+          @click="handleExport"
         >导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="jobLogList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column align="center" type="selection" width="55" />
-      <el-table-column label="任务名称" align="left" prop="jobName" :show-overflow-tooltip="true" />
+      <el-table-column :show-overflow-tooltip="true" align="left" label="任务名称" prop="jobName" />
-      <el-table-column label="任务组名" align="center" prop="jobGroup" width="160" :formatter="jobGroupFormat" :show-overflow-tooltip="true" />
+      <el-table-column :formatter="jobGroupFormat" :show-overflow-tooltip="true" align="center" label="任务组名" prop="jobGroup" width="160" />
-      <el-table-column label="调用目标字符串" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
+      <el-table-column :show-overflow-tooltip="true" align="center" label="调用目标字符串" prop="invokeTarget" />
-      <el-table-column label="日志信息" align="center" prop="jobMessage" :show-overflow-tooltip="true" />
+      <el-table-column :show-overflow-tooltip="true" align="center" label="日志信息" prop="jobMessage" />
-      <el-table-column label="执行状态" align="center" prop="status" width="160" :formatter="statusFormat" />
+      <el-table-column :formatter="statusFormat" align="center" label="执行状态" prop="status" width="160" />
-      <el-table-column label="执行时间" align="center" prop="createTime" width="160">
+      <el-table-column align="center" label="执行时间" prop="createTime" width="160">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作"  width="150" align="center" class-name="small-padding fixed-width">
+      <el-table-column align="center"  class-name="small-padding fixed-width" label="操作" width="150">
         <template slot-scope="scope">
           <el-button
+            v-hasPermi="['monitor:job:query']"
+            icon="el-icon-view"
             size="mini"
             type="text"
-            icon="el-icon-view"
             @click="handleView(scope.row)"
-            v-hasPermi="['monitor:job:query']"
           >详细</el-button>
         </template>
       </el-table-column>
@@ -123,14 +123,14 @@
 
     <pagination
       v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
+      :page.sync="queryParams.pageNum"
+      :total="total"
       @pagination="getList"
     />
-
+    </div>
     <!-- 调度日志详细 -->
-    <el-dialog title="调度日志详细" :visible.sync="open" width="700px" append-to-body :close-on-click-modal="false">
+    <el-dialog :close-on-click-modal="false" :visible.sync="open" append-to-body title="调度日志详细" width="700px">
       <el-form ref="form" :model="form" label-width="100px" size="mini">
         <el-row>
           <el-col :span="12">
@@ -154,7 +154,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="异常信息：" v-if="form.status == 1">{{ form.exceptionInfo }}</el-form-item>
+            <el-form-item v-if="form.status == 1" label="异常信息：">{{ form.exceptionInfo }}</el-form-item>
           </el-col>
         </el-row>
       </el-form>

src/views/tenant/device/index.vue

@@ -333,19 +333,19 @@
       </div>
     </div>
 
-    <div
+<!--    <div-->
-      v-show="componectVal !== ''"
+<!--      v-show="componectVal !== ''"-->
-      :class="
+<!--      :class="-->
-        componectVal === 'GatewayDetail'
+<!--        componectVal === 'GatewayDetail'-->
-          ? 'to-home-wrap2 gateway-wrap'
+<!--          ? 'to-home-wrap2 gateway-wrap'-->
-          : 'to-home-wrap2 '
+<!--          : 'to-home-wrap2 '-->
-      "
+<!--      "-->
-      @click="toTableClick"
+<!--      @click="toTableClick"-->
-    >
+<!--    >-->
-      <el-button circle icon="el-icon-d-arrow-left" title="返回列表"
+<!--      <el-button circle icon="el-icon-d-arrow-left" title="返回列表"-->
-        >返回列表</el-button
+<!--        >返回列表</el-button-->
-      >
+<!--      >-->
-    </div>
+<!--    </div>-->
     <el-dialog :visible.sync="imgModelShow" title="设备二维码" width="400px">
       <img ref="qrCode" height="100%" width="100%" />
     </el-dialog>

src/views/tenant/device/profile/details.vue

@@ -1,6 +1,18 @@
 <template>
   <div class="iot-project-details-warp">
-    <div class="info-tabs">
+    <div class="iot-project-details-warp-info main-device-select-card">
+      <div class="device-info-left">
+        <span>设备名称：{{infoData.deviceName}}</span>
+        <span>设备key：{{infoData.deviceKey}}</span>
+        <span>所属型号：{{infoData.modelName}}</span>
+      </div>
+      <div class="link-to-list">
+        <el-button icon="el-icon-d-arrow-left" size="small" style="margin-left: 10px;" title="返回列表" type="primary" @click="toTableClick"
+        >返回列表</el-button
+        >
+      </div>
+    </div>
+    <div class="info-tabs main-device-card">
       <div v-show="breadcrumbList.length > 1" class="breadcrumb-wrap">
         <el-breadcrumb separator-class="el-icon-arrow-right">
           <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
@@ -11,7 +23,7 @@
       <el-tabs
         v-model="activeName"
         :class="breadcrumbList.length > 1 ? 'children-wrap' : ''"
-        type="border-card"
+        class="device-detail-tabs"
       >
         <el-tab-pane label="运行状态" name="runingState">
           <div class="tabs-body protocol-wrap">
@@ -100,6 +112,10 @@ export default {
     this.deviceInfo();
   },
   methods: {
+    // 跳转详情页
+    toTableClick() {
+      this.$emit('toTableClick')
+    },
     // 点击查看设备详情
     deviceClick(row, index) {
       if (row.deviceId === this.deviceId) {
@@ -164,6 +180,18 @@ export default {
       color: #1890ff;
     }
   }
+  .iot-project-details-warp-info{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .device-info-left{
+      span{
+        margin-right: 20px;
+        font-size: 14px;
+      }
+    }
+  }
+
   .product-release-dialog {
     .title-i {
       font-size: 20px;
@@ -293,8 +321,8 @@ export default {
     position: relative;
     box-sizing: border-box;
     .el-tabs__content {
-      height: calc(100vh - 191px);
+      //height: calc(100vh - 191px);
-      overflow: auto;
+      //overflow: auto;
     }
     .el-tabs__header {
       background-color: #fff;
@@ -308,10 +336,6 @@ export default {
       }
     }
     .el-tabs__nav-scroll {
-      height: 65px;
-      padding-top: 25px;
-      padding-left: 15px;
-      background: #e4eaf3;
     }
     .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
       background: #fff;

src/views/tenant/project/index.vue

@@ -140,10 +140,6 @@
               </div>
               <div class="card-footer">
                 <el-button icon="el-icon-search" type="text" @click="handleDetails(item)">查看详情</el-button>
-                <el-divider direction="vertical"></el-divider>
-                <el-button v-hasPermi="['iot:project:edit']" icon="el-icon-edit" type="text" @click="handleUpdate(item)">修改</el-button>
-                <el-button v-hasPermi="['iot:project:remove']" type="text"><el-divider direction="vertical"></el-divider></el-button>
-                <el-button v-hasPermi="['iot:project:remove']" icon="el-icon-delete" type="text" @click="handleDelete(item)">删除</el-button>
               </div>
             </div>
           </el-col>