样式优化

src/views/homePage/components/tableMain.vue

@@ -22,7 +22,7 @@
         </el-form>
       </div>
       <div class="zzMsg">
-        <p class="total">
+        <p class="total" v-if="showDiv">
           <span
             >已选中：<el-tag type="primary">{{
               multipleSelection.length
@@ -41,17 +41,60 @@
             >离线：<el-tag type="danger">{{ offlineNum }}</el-tag></span
           >
           <span
-            >未上传图片：<el-tag type="danger">{{ noPicNum }}</el-tag></span
+            >未传图：<el-tag type="danger">{{ noPicNum }}</el-tag></span
           >
           <span
-            >磁盘异常数量：<el-tag type="danger">{{ freeNum }}</el-tag></span
+            >磁盘异常：<el-tag type="danger">{{ freeNum }}</el-tag></span
           >
           <span
             >装置总数：<el-tag type="info">{{ tableData.length }}</el-tag></span
           >
         </p>
-
-        <el-tooltip class="item" effect="dark" content="导出" placement="top">
+        <p class="total" v-else>
+          <el-popover
+            placement="top"
+            trigger="click"
+            popper-class="totalPopover"
+          >
+            <span
+              >已选中：<el-tag type="primary">{{
+                multipleSelection.length
+              }}</el-tag></span
+            >
+            <span
+              >运维：<el-tag type="primary">{{ ywNumber }}</el-tag></span
+            >
+            <span
+              >快心跳：<el-tag type="primary">{{ kxtNumber }}</el-tag></span
+            >
+            <span
+              >在线：<el-tag type="success">{{ onlineNum }}</el-tag></span
+            >
+            <span
+              >离线：<el-tag type="danger">{{ offlineNum }}</el-tag></span
+            >
+            <span
+              >未传图：<el-tag type="danger">{{ noPicNum }}</el-tag></span
+            >
+            <span
+              >磁盘异常：<el-tag type="danger">{{ freeNum }}</el-tag></span
+            >
+            <span
+              >装置总数：<el-tag type="info">{{
+                tableData.length
+              }}</el-tag></span
+            >
+            <el-button type="primary" slot="reference">数据统计</el-button>
+          </el-popover>
+        </p>
+        <el-dropdown @command="handleCommand">
+          <el-button type="primary" icon="el-icon-more" circle></el-button>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="a">导出</el-dropdown-item>
+            <el-dropdown-item command="b">扩展列</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+        <!-- <el-tooltip class="item" effect="dark" content="导出" placement="top">
           <el-button
             type="primary"
             icon="el-icon-tickets"
@@ -66,7 +109,7 @@
             icon="el-icon-s-operation"
             @click="drawer = true"
           ></el-button>
-        </el-tooltip>
+        </el-tooltip> -->
       </div>
     </div>
     <u-table
@@ -1208,6 +1251,7 @@ export default {
     "noPicNum",
     "freeNum",
     "tableLoaidng",
+    "showDiv",
   ],
   components: {
     rowMsgDialog,
@@ -1956,8 +2000,15 @@ export default {
     handleExport() {
       this.$parent.exportTable();
     },
-    //导出表格
-
+    //更多功能
+    handleCommand(command) {
+      if (command == "a") {
+        this.handleExport();
+      }
+      if (command == "b") {
+        this.drawer = true;
+      }
+    },
     // 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
     getRowKey(row) {
       return row.id;
@@ -2831,6 +2882,8 @@ export default {
           color: #333;
         }
       }
+      .totalPopover {
+      }
       .drawBox {
         //margin-left: auto;
       }
@@ -3225,4 +3278,10 @@ export default {
     font-style: normal;
   }
 }
+.totalPopover {
+  display: flex;
+  span {
+    margin-right: 4px;
+  }
+}
 </style>

src/views/homePage/index.vue

@@ -220,6 +220,36 @@
         ></el-button>
       </el-tooltip>
     </div>
+    <div class="searchSimple" v-if="!showDiv">
+      <el-form :inline="true" :model="formdata" class="demo-form-inline">
+        <el-form-item label="活动" class="activitybox">
+          <el-select
+            @keyup.enter.native="onSubmit()"
+            v-model="formdata.activityId"
+            filterable
+            @change="changeActive"
+          >
+            <el-option
+              v-for="item in activityOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="装置编号" class="cmdibox">
+          <el-input
+            @keyup.enter.native="onSubmit()"
+            v-model="formdata.cmdid"
+            placeholder="请输入装置编号"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item class="btngrop">
+          <el-button type="primary" @click="onSubmit">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
     <div
       class="tableBox"
       :style="{ height: showDiv ? 'calc(100% - 82px)' : 'calc(100% - 2px)' }"
@@ -232,6 +262,7 @@
         :noPicNum="noPicNum"
         :freeNum="freeNum"
         :tableLoaidng="tableLoaidng"
+        :showDiv="showDiv"
       ></tableMain>
     </div>
   </div>
@@ -785,6 +816,28 @@ export default {
       }
     }
   }
+  .searchSimple {
+    position: absolute;
+    top: 12px;
+    left: 435px;
+    z-index: 2;
+    .el-form-item {
+      margin-bottom: 0px;
+    }
+    .el-select {
+      width: 160px;
+      .el-input {
+        width: 160px;
+      }
+    }
+    .el-input {
+      width: 180px;
+      .el-input__inner {
+        padding-left: 8px;
+        padding-right: 15px;
+      }
+    }
+  }
   .tableBox {
     //height: calc(100% - 102px);
   }