控制台页面布局修改

ruoyi-ui/src/views/index.vue

 <template>
-  <div class="app-container home">
-    <h2>欢迎登录 信息录入系统</h2>
+  <div class="homepage-module">
+    <div class="searchTop">
+      <div class="title">控制台</div>
+      <div class="search">
+        <el-form :model="queryForm" ref="queryForm" size="small" :inline="true" label-width="auto">
+          <el-form-item prop="leaveTitle">
+            <el-input
+              v-model="queryForm.leaveTitle"
+              placeholder="请输入查询关键字"
+              clearable
+              @keyup.enter.native="handleQuery"
+            >
+              <div
+                slot="append"
+                @click="handleQuery"
+              >搜索
+              </div>
+            </el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <el-divider/>
+    <div class="homepage-content">
+      <div class="currentUnit">
+        当前单位:  <span class="name">河北省石家庄市高新区管委会</span>
+      </div>
+      <div class="tableList">
+        <div class="title">今日数据</div>
+        <el-table
+          border
+          v-loading="loading"
+          :data="todayData">
+          <el-table-column label="阳性人员数量" align="center"  prop="positiveNum" :show-overflow-tooltip="true"/>
+          <el-table-column label="混管异常数量" align="center"  prop="abnormalMixingNum" :show-overflow-tooltip="true"/>
+          <el-table-column label="混管异常涉及人数" align="center"  prop="abnormalMixingOfPipesNum" width="140" :show-overflow-tooltip="true"/>
+          <el-table-column label="阳性涉及小区数量" align="center"  prop="PositiveAreaNum" width="130" :show-overflow-tooltip="true"/>
+          <el-table-column label="涉及单元楼数量" align="center"  prop="unitBuildingInvolvedNum" :show-overflow-tooltip="true"/>
+          <el-table-column label="小区封控数量" align="center"  prop="cellBlockingControlNum" :show-overflow-tooltip="true"/>
+          <el-table-column label="单元封控数量" align="center"  prop="unitSealingControlNum" :show-overflow-tooltip="true"/>
+          <el-table-column label="解封单元数量" align="center"  prop="unpackingUnitNum" :show-overflow-tooltip="true"/>
+          <el-table-column label="转运至方舱数量" align="center"  prop="transferToShelterNum" :show-overflow-tooltip="true"/>
+          <el-table-column label="转运至隔离点数量" align="center"  prop="transferToIsolationPointNum" width="130" :show-overflow-tooltip="true"/>
+      </el-table>
+      </div>
+      <div class="tableList">
+        <div class="title">当前数据</div>
+        <el-table
+          border
+          v-loading="loading"
+          :data="currentData">
+          <el-table-column label="隔离点人数" align="center"  prop="isolationPointNum" :show-overflow-tooltip="true"/>
+          <el-table-column label="方舱人数" align="center"  prop="sheltersNum" :show-overflow-tooltip="true"/>
+          <el-table-column label="封控小区数量" align="center"  prop="BlockedControlCellNum" :show-overflow-tooltip="true"/>
+          <el-table-column label="封控单元数量" align="center"  prop="sealingControlUnitNum" :show-overflow-tooltip="true"/>
+          <el-table-column label="阳性人员数量" align="center"  prop="positivePersonnelNum" :show-overflow-tooltip="true"/>
+        </el-table>
+      </div>
+      <div class="tableList">
+        <div class="title">累计数据</div>
+        <el-table
+          border
+          v-loading="loading"
+          :data="CumulativeData">
+          <el-table-column label="累计阳性人员数量" align="center"  prop="CumulativePositivePerNum" :show-overflow-tooltip="true"/>
+          <el-table-column label="累计封控小区数量" align="center"  prop="CumulativeBlockedControlCellNum" :show-overflow-tooltip="true"/>
+          <el-table-column label="累计封控单元数量" align="center"  prop="CumulativeSealingControlUnitNum" :show-overflow-tooltip="true"/>
+          <el-table-column label="累计解封单元数量" align="center"  prop="CumulativeUnpackingUnitNum" :show-overflow-tooltip="true"/>
+        </el-table>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -9,77 +78,63 @@ export default {
   name: "Index",
   data() {
     return {
-      // 版本号
-      version: "3.8.4",
+      queryForm: {
+        leaveTitle: ''
+      },
+      todayData: [], // 今日数据
+      currentData: [], // 当前数据
+      CumulativeData: [], // 累计数据
     };
   },
+  created() {
+  },
+  mounted() {
+  },
   methods: {
-    goTarget(href) {
-      window.open(href, "_blank");
+    /** 查询*/
+    handleQuery() {
+
     },
   },
 };
 </script>
 
 <style scoped lang="scss">
-.home {
-  blockquote {
-    padding: 10px 20px;
-    margin: 0 0 20px;
-    font-size: 17.5px;
-    border-left: 5px solid #eee;
-  }
-  hr {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    border: 0;
-    border-top: 1px solid #eee;
-  }
-  .col-item {
-    margin-bottom: 20px;
-  }
-
-  ul {
-    padding: 0;
-    margin: 0;
-  }
-
-  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  color: #676a6c;
-  overflow-x: hidden;
-
-  ul {
-    list-style-type: none;
+.homepage-module{
+  ::v-deep.el-divider--horizontal{
+    height: 2px!important;
+    background-color: #64769D;
+    margin: 0!important;
   }
-
-  h4 {
-    margin-top: 0px;
-  }
-
-  h2 {
-    margin-top: 10px;
-    font-size: 26px;
-    font-weight: 100;
-  }
-
-  p {
-    margin-top: 10px;
-
-    b {
-      font-weight: 700;
+  .searchTop{
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    .title{
+      color: #64769D;
+      font-weight: bold;
+    }
+    .search{
+      ::v-deep .el-input-group__append, .el-input-group__prepend{
+        background-color: #64769D;
+        color: #FFFFFF;
+      }
     }
   }
-
-  .update-log {
-    ol {
-      display: block;
-      list-style-type: decimal;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
-      margin-inline-start: 0;
-      margin-inline-end: 0;
-      padding-inline-start: 40px;
+  .homepage-content{
+    .tableList{
+      padding: 20px;
+      .title{
+        color: #64769D;
+        padding-bottom: 20px;
+      }
+    }
+    .currentUnit{
+      padding: 20px;
+      font-weight: bold;
+      .name{
+        color: #64769D;
+      }
     }
   }
 }