From fd3699a3ae43a199ea0e6f5eecda997d1b5cb475 Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Tue, 30 Jul 2024 17:41:38 +0800
Subject: [PATCH] =?UTF-8?q?=E7=95=8C=E9=9D=A2=EF=BC=8C=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LxHeader/index.vue          |   23 +-
 src/components/XyTable/index.vue           |   53 +-
 src/layout/components/AppMain.vue          |   53 +-
 src/layout/components/Navbar.vue           |    4 +-
 src/layout/index.vue                       |   20 +
 src/styles/index.scss                      |    2 +-
 src/utils/createDialog.js                  |    3 +-
 src/views/assets/detail.vue                |    2 +-
 src/views/assets/fileList.vue              |    3 +-
 src/views/assets/files.vue                 |   20 +-
 src/views/assets/house.vue                 |    1 -
 src/views/assets/land.vue                  |    1 -
 src/views/component/map.vue                |    3 +-
 src/views/component/table.vue              |    1 -
 src/views/dashboard/index.vue              | 1554 +++++++++++---------
 src/views/lease/let.vue                    |    1 -
 src/views/operate/file.vue                 |    1 -
 src/views/operate/menu.vue                 |    1 -
 src/views/safety/safetyPlan.vue            |    1 -
 src/views/statics/assets.vue               |    1 -
 src/views/statics/lease.vue                |    1 -
 src/views/statics/safetyYear.vue           |    1 -
 src/views/system/components/formEditor.vue |    2 +
 src/views/system/components/linkWith.vue   |    2 +-
 src/views/system/form.vue                  |    1 -
 src/views/system/password.vue              |  134 +-
 26 files changed, 1068 insertions(+), 821 deletions(-)

diff --git a/src/components/LxHeader/index.vue b/src/components/LxHeader/index.vue
index 1d43cfb..abb7327 100644
--- a/src/components/LxHeader/index.vue
+++ b/src/components/LxHeader/index.vue
@@ -10,7 +10,7 @@
       <template v-else>
         <i :class="icon" style="padding: 0 6px;"></i>
       </template>
-      <span>{{text}}</span>
+      <span style="margin-left: 5px;line-height: 2;font-size: 16px;">{{text}}</span>
     </div>
     <div class="content">
       <slot name="content"></slot>
@@ -37,20 +37,29 @@ export default {
   }
 };
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .v-header {
   display: flex;
-  border-bottom: 1px solid #dcdee2;
   flex-direction: column;
+  margin-top: 10px;
+  margin-bottom: 10px;
   .v-left-text {
-    margin-top: 3px;
-    padding-bottom: 6px;
-    // padding-top: 10px;
     font-weight: bold;
     font-size: 15px;
     color: #0077CC;
     white-space: nowrap;
-    border-bottom: 2px solid #0077CC;
+    padding: 0 20px 6px;
+    position: relative;
+    &::after {
+      content: "";
+      width: 100%;
+      height: 2px;
+      background: linear-gradient(to right, $primaryColor 30%, #ffffff33);
+
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+    }
     > span {
       position: relative;
 
diff --git a/src/components/XyTable/index.vue b/src/components/XyTable/index.vue
index f4e299c..8e0f755 100644
--- a/src/components/XyTable/index.vue
+++ b/src/components/XyTable/index.vue
@@ -218,14 +218,10 @@ export default {
     //方法
     initLoad() {
       if (this.height) return;
-      let clientHeight = document.documentElement.clientHeight;
+      let appMainHeight = document.querySelector('.app-main-scroll')?.getBoundingClientRect()?.height;
       let lxheader = document.querySelector(".v-header")?.getBoundingClientRect();
-      let lxHeader_height = lxheader.height + 25; //查询 头部
       let paginationHeight = 37; //分页的高度
-      let topHeight = 50; //页面 头部
-      this.tableHeight =
-        clientHeight - lxHeader_height - topHeight - paginationHeight - 20 - 25;
-      //console.log(this.tableHeight)
+      this.tableHeight = appMainHeight - paginationHeight - lxheader?.height - 20;
     },
     async getTableData(isRefresh = false) {
       if (isRefresh) {
@@ -485,7 +481,7 @@ export default {
     createPage() {
       if (this.isPage)
         return (
-          <div>
+          <div class="xy-table__page">
             <transition
               enter-active-class="slide-in-bottom"
               leave-to-class="slide-out-down"
@@ -503,7 +499,7 @@ export default {
                 size="small"
                 show-elevator={true}
                 show-sizer={this.showSizer}
-                class="xy-table__page"
+                class="xy-table__pagecpn"
                 on={{
                   ["on-page-size-change"]: (e) => {
                     if (this.action) {
@@ -526,23 +522,31 @@ export default {
 
             <el-popover
               placement="top-start"
-              width="200"
+              width="608"
               trigger="hover"
               scopedSlots={{
                 default: () => {
                   return (
-                    <el-checkbox-group v-model={this.checkTable}>
-                      {this.$props?.tableItem?.map((item, index) => {
-                        return item.type !== "expand" ? (
-                          <el-checkbox label={item.prop} key={item.prop}>
-                            {item.label}
-                          </el-checkbox>
-                        ) : (
-                          ""
-                        );
-                      })}
-                    </el-checkbox-group>
-                  );
+                    <el-transfer vModel={this.checkTable}
+                                 titles={['未显示字段','显示字段']}
+                                 data={this.$props?.tableItem}
+                                 props={{
+                                   props: { key: 'prop', label: 'label' }
+                                 }}></el-transfer>
+                  )
+                  // return (
+                  //   <el-checkbox-group v-model={this.checkTable}>
+                  //     {this.$props?.tableItem?.map((item, index) => {
+                  //       return item.type !== "expand" ? (
+                  //         <el-checkbox label={item.prop} key={item.prop}>
+                  //           {item.label}
+                  //         </el-checkbox>
+                  //       ) : (
+                  //         ""
+                  //       );
+                  //     })}
+                  //   </el-checkbox-group>
+                  // );
                 },
               }}
             >
@@ -1061,16 +1065,13 @@ export default {
   display: flex;
   justify-content: right;
   align-items: center;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
   background: rgba(140, 140, 140, 0.6);
 
   z-index: 10;
   padding: 6px 10px !important;
   position: relative;
-  top: 0;
-  left: 0;
-  right: 0;
 
   ::v-deep .ivu-page-item,
   .ivu-page-options {
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index bf274d4..c714ee3 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,11 +1,13 @@
 <template>
-  <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
-      <keep-alive :include="['tableList','mapList']">
-        <router-view :key="key" />
-      </keep-alive>
-    </transition>
-  </section>
+  <el-scrollbar wrap-class="app-main-scroll" class="main-scroll">
+    <section class="app-main">
+      <transition name="fade-transform" mode="out-in">
+        <keep-alive :include="['tableList','mapList']">
+          <router-view :key="key" />
+        </keep-alive>
+      </transition>
+    </section>
+  </el-scrollbar>
 </template>
 
 <script>
@@ -20,24 +22,41 @@ export default {
 </script>
 
 <style>
-.app-main-scroll {
-  width: calc(100% - 30px * 2);
-  height: calc(100vh - var(--navbar-height) - 20px - 20px);
-  margin-top: calc(var(--navbar-height) + 20px);
-  margin-left: 30px;
+.app-main-scroll::-webkit-scrollbar {
+  height: 0;
 }
 </style>
 <style scoped>
+.main-scroll {
+  height: calc(100vh - var(--navbar-height) - 20px - 46px);
+  border-radius: 6px;
+  width: calc(100% - 30px * 2);
+  margin: calc(var(--navbar-height) + 20px) auto 0;
+  position: relative;
+  z-index: 10;
+  padding-bottom: 0;
+  background: #fff;
+}
+@media screen and (min-width: 1680px) {
+  .main-scroll {
+    height: calc(100vh - var(--navbar-height) - 20px - 56px);
+  }
+}
 .app-main {
   /*50 = navbar  */
   border-radius: 6px;
-  max-height: calc(100vh - var(--navbar-height) - 20px - 20px);
-  width: calc(100% - 30px * 2);
+  max-height: calc(100vh - var(--navbar-height) - 20px - 46px);
+  width: 100%;
   z-index: 10;
-  margin: calc(var(--navbar-height) + 20px) auto 0;
+  //margin: calc(var(--navbar-height) + 20px) auto 0;
   position: relative;
-  overflow: scroll;
-  padding: 20px;
+  //overflow: scroll;
+  //padding: 20px;
+}
+@media screen and (min-width: 1680px) {
+  .app-main {
+    height: calc(100vh - var(--navbar-height) - 20px - 56px);
+  }
 }
 .fixed-header+.app-main {
 
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 0d74073..e7854f9 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -14,7 +14,7 @@
     <div class="right-menu">
       <el-dropdown class="avatar-container" trigger="click">
         <div class="avatar-wrapper">
-          <el-badge is-dot class="notice">
+          <el-badge is-dot class="notice" @click="$router.push('/info/password')">
             <i class="el-icon-bell"></i>
           </el-badge>
           <img src="../../assets/face.jpg" class="user-avatar">
@@ -109,7 +109,7 @@
       margin-left: 23px;
 
       & > img {
-        height: 32%;
+        height: 33%;
       }
     }
     .hamburger-container {
diff --git a/src/layout/index.vue b/src/layout/index.vue
index b6ffffb..2bbd43e 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -7,6 +7,10 @@
         <navbar />
       </div>
       <app-main />
+
+      <footer>
+        版权所有：无锡市交通产业集团有限公司
+      </footer>
     </div>
   </div>
 </template>
@@ -90,4 +94,20 @@ export default {
   .mobile .fixed-header {
     width: 100%;
   }
+  footer {
+    line-height: 14px;
+    font-size: 14px;
+    text-align: center;
+    margin-top: 16px;
+    color: #595959;
+  }
+  @media screen and (min-width: 1680px) {
+    footer {
+      line-height: 16px;
+      font-size: 16px;
+      text-align: center;
+      margin-top: 20px;
+      color: #595959;
+    }
+  }
 </style>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 9500738..ef15120 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -191,7 +191,7 @@ top: 41px !important;
 }
 
 .app-main{
-  background: #fff;
+  //background: #fff;
 }
 
 #nprogress .bar{
diff --git a/src/utils/createDialog.js b/src/utils/createDialog.js
index a3d5097..1fcc6a2 100644
--- a/src/utils/createDialog.js
+++ b/src/utils/createDialog.js
@@ -324,7 +324,8 @@ export class CreateDialog {
             : "编辑",
           visible: that.dialogVisible,
           width: this.options?.width ? this.options.width : "800px",
-          "close-on-click-modal": false
+          "close-on-click-modal": false,
+          "append-to-body": true
         },
         on: {
           "update:visible": (val) => {
diff --git a/src/views/assets/detail.vue b/src/views/assets/detail.vue
index 4cb56b6..71627f7 100644
--- a/src/views/assets/detail.vue
+++ b/src/views/assets/detail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="padding: 0 20px;">
     <el-page-header
       :content="$route.meta.title"
       style="
diff --git a/src/views/assets/fileList.vue b/src/views/assets/fileList.vue
index c11e4fb..f360b0b 100644
--- a/src/views/assets/fileList.vue
+++ b/src/views/assets/fileList.vue
@@ -6,7 +6,6 @@
         <LxHeader
           :icon="$route.meta.icon"
           :text="$route.meta.title"
-          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
         >
           <div slot="content"></div>
           <slot>
@@ -138,7 +137,7 @@ export default {
         {
           prop: "operate",
           label: "操作",
-          minWidth: 140,
+          minWidth: 160,
           align: "left",
           fixed: "right",
           customFn: row => {
diff --git a/src/views/assets/files.vue b/src/views/assets/files.vue
index 3f381ab..ad28b71 100644
--- a/src/views/assets/files.vue
+++ b/src/views/assets/files.vue
@@ -1,14 +1,15 @@
 <template>
   <div>
-    <Drawer
+    <el-drawer
       ref="dialog"
-      width="600px"
+      size="600px"
       placement="right"
-      v-model="isShow"
+      :append-to-body="true"
+      :visible.sync="isShow"
       title="附件"
       :footer-hide="true"
     >
-      <div style="display: flex;align-items: center;">
+      <div style="display: flex;align-items: center;padding-left: 20px;">
         <el-select size="small" collapse-tags style="width: 200px;" filterable allow-create clearable v-model="filterTag" placeholder="标签" multiple>
           <el-option v-for="item in ['工程类','资产类']" :value="item" :label="item">
           </el-option>
@@ -18,9 +19,9 @@
 
       <Table stripe style="margin-top: 20px;" size="small" :data="fileData" :columns="table">
       </Table>
-    </Drawer>
+    </el-drawer>
 
-    <Modal title="新增附件" width="580px" v-model="isShowModal" @on-ok="submit">
+    <el-dialog title="新增附件" width="580px" :modal-append-to-body="true" :append-to-body="true" :visible.sync="isShowModal">
             <el-form size="small" label-width="100px">
               <el-form-item label="年份选择">
                 <el-date-picker v-model="form.year" value-format="yyyy" style="width: 300px;" placeholder="年份选择" type="year"></el-date-picker>
@@ -61,7 +62,12 @@
                 </el-upload>
               </el-form-item>
             </el-form>
-    </Modal>
+
+      <div slot="footer">
+        <Button type="primary" ghost @click="hidden">取消</Button>
+        <Button type="primary" @click="submit">确认</Button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
diff --git a/src/views/assets/house.vue b/src/views/assets/house.vue
index db758e2..3b93d2b 100644
--- a/src/views/assets/house.vue
+++ b/src/views/assets/house.vue
@@ -6,7 +6,6 @@
         <LxHeader
           :icon="$route.meta.icon"
           :text="$route.meta.title"
-          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
         >
           <div slot="content"></div>
           <slot>
diff --git a/src/views/assets/land.vue b/src/views/assets/land.vue
index 8fb1ebd..fe7f35f 100644
--- a/src/views/assets/land.vue
+++ b/src/views/assets/land.vue
@@ -6,7 +6,6 @@
         <LxHeader
           :icon="$route.meta.icon"
           :text="$route.meta.title"
-          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
         >
           <div slot="content"></div>
           <slot>
diff --git a/src/views/component/map.vue b/src/views/component/map.vue
index 47a6f9f..a0d99c1 100644
--- a/src/views/component/map.vue
+++ b/src/views/component/map.vue
@@ -1080,10 +1080,9 @@ $staticsHeight: 60px;
 //}
 
 #map {
-  border-radius: 4px;
+  border-radius: 6px;
   filter: drop-shadow(2px 2px 5px #00000033);
 
-  margin-top: 20px;
 }
 
 .fade-enter-active {
diff --git a/src/views/component/table.vue b/src/views/component/table.vue
index 9af1e73..8bbe0f3 100644
--- a/src/views/component/table.vue
+++ b/src/views/component/table.vue
@@ -6,7 +6,6 @@
         <LxHeader
           :icon="$route.meta.icon"
           :text="$route.meta.title"
-          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
         >
           <div slot="content"></div>
           <slot>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 4dc4903..0264df4 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,580 +1,871 @@
 <template>
-  <div>
-    <Card>
-      <div>
-
-        <div class="contract">
-          <div class="contract__title">
-            <h3>待办通知</h3>
+  <div style="padding: 20px;">
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <Card style="margin-bottom: 20px" :padding="20">
+          <div class="card-title">
+            <div class="title-icon">
+              <i class="el-icon-s-claim"></i>
+            </div>
+            <p>待办通知</p>
+
+            <div
+              class="lease-status-switch"
+              :data-status="radio"
+            >
+              <div
+                v-for="(item, index) in status"
+                :data-status="index"
+                :class="{ 'active-switch': radio === index }"
+                @click="radioPick(index)"
+              >
+                <el-badge :value="statusTotal[index]" :max="99">
+                  {{ item }}
+                </el-badge>
+              </div>
+            </div>
 
+            <div class="lease-legend">
+              <div>土地</div>
+              <div>房产</div>
+            </div>
 
             <div class="more" @click="$router.push('/lease')">
-              更多
-              <i class="el-icon-d-arrow-right"></i>
+              <Icon type="md-add" />
             </div>
           </div>
-          <div class="type-bar">
-            <div class="type-bar__item" :class="{ 'type-bar__item--active': radio === 0  }" @click="radioPick(0)">合约中</div>
-            <div class="type-bar__item" :class="{ 'type-bar__item--active': radio === 1  }" @click="radioPick(1)">临期</div>
-            <div class="type-bar__item" :class="{ 'type-bar__item--active': radio === 2  }" @click="radioPick(2)">已过期</div>
-
-            <svg xmlns="http://www.w3.org/2000/svg" :style="{ 'left': 80 * radio + 'px'  }" viewBox="0 0 100 10" preserveAspectRatio="xMinYMin meet">
-              <path d="M 0 10,L 44 10,L 50 2,L56 10,L 100 10" stroke="#aaa" stroke-width="1" fill="#fff"></path>
-            </svg>
+
+          <div class="card-content">
+            <Table
+              :loading="leaseTableLoading"
+              size="small"
+              stripe
+              highlight-row
+              :height="400"
+              :data="leases"
+              :columns="leaseTable"
+            ></Table>
+            <Page
+              style="margin-top: 14px; display: flex; justify-content: flex-end"
+              size="small"
+              :total="leaseTotal"
+              show-elevator
+              show-total
+              :page-size="leaseSelect.page_size"
+            ></Page>
           </div>
-          <!--      <Tabs style="width: 24%;">-->
-          <!--        <TabPane label="合约中3"></TabPane>-->
-          <!--        <TabPane label="临期1"></TabPane>-->
-          <!--        <TabPane label="已过期2"></TabPane>-->
-          <!--      </Tabs>-->
-
-          <Table style="margin-top: 20px;" :loading="leaseTableLoading" size="small" stripe highlight-row :height="400" :data="leases" :columns="leaseTable"></Table>
-          <Page style="margin-top: 14px;display: flex;justify-content: flex-end;" size="small" :total="leaseTotal" show-elevator show-total :page-size="leaseSelect.page_size"></Page>
-          <!--        <xy-table :border="false" :is-page="false" :height="400" :table-item="table1" style="margin-top: 20px" size="mini" stripe ref="table1" :auths="[]" :action="index" :req-opt="select"></xy-table>-->
-        </div>
-
-        <Divider></Divider>
-
-        <el-row :gutter="80" type="flex">
-          <el-col :span="12">
-            <div class="contract__title">
-              <h3>系统通知</h3>
-
-              <div class="more" @click="$router.push('/notice')">
-                更多
-                <i class="el-icon-d-arrow-right"></i>
-              </div>
+        </Card>
+      </el-col>
+
+      <el-col :span="12">
+        <Card :padding="20">
+          <div class="card-title">
+            <div class="title-icon">
+              <Icon type="ios-text" />
             </div>
+            <p>系统通知</p>
 
-            <div class="list">
-              <div class="list-item" v-for="item in notices.slice((noticeSelect.page-1)*noticeSelect.page_size,(noticeSelect.page-1)*noticeSelect.page_size+noticeSelect.page_size)" @click="item.name ? ($refs['drawer'].setType(1),$refs['drawer'].setRow(item),$refs['drawer'].show()) : ($refs['drawer'].setType(3),$refs['drawer'].setRow(item),$refs['drawer'].show())">
-                <span>{{ item.name || item.dikuaimingcheng }}</span>
-                <span>{{ item.shijian || item.zulinkaishiqixian }}</span>
-              </div>
-
-              <Page class="list-page" :page-size="noticeSelect.page_size" :total="noticeTotal" size="small" @on-change="e => (noticeSelect.page = e)"/>
+            <div class="more" style="margin-left: auto;" @click="$router.push('/notice')">
+              <Icon type="md-add" />
             </div>
-            <!--          <xy-table :height="400" :table-item="table1" style="margin-top: 20px" size="mini" stripe ref="table1" :auths="[]" :action="index" :req-opt="select"></xy-table>-->
-          </el-col>
+          </div>
 
-          <el-col :span="12">
-            <div class="contract__title">
-              <h3>制度文档</h3>
+          <div class="card-content list">
+            <div
+              class="list-item"
+              v-for="item in notices.slice(
+                (noticeSelect.page - 1) * noticeSelect.page_size,
+                (noticeSelect.page - 1) * noticeSelect.page_size +
+                  noticeSelect.page_size
+              )"
+              @click="
+                item.name
+                  ? ($refs['drawer'].setType(1),
+                    $refs['drawer'].setRow(item),
+                    $refs['drawer'].show())
+                  : ($refs['drawer'].setType(3),
+                    $refs['drawer'].setRow(item),
+                    $refs['drawer'].show())
+              "
+            >
+              <span>{{ item.name || item.dikuaimingcheng }}</span>
+              <span>{{ item.shijian || item.zulinkaishiqixian }}</span>
+            </div>
 
-              <div class="more" @click="$router.push('/system/documents')">
-                更多
-                <i class="el-icon-d-arrow-right"></i>
-              </div>
+            <Page
+              class="list-page"
+              :page-size="noticeSelect.page_size"
+              :total="noticeTotal"
+              size="small"
+              @on-change="(e) => (noticeSelect.page = e)"
+            />
+          </div>
+        </Card>
+      </el-col>
+
+      <el-col :span="12">
+        <Card :padding="20">
+          <div class="card-title">
+            <div class="title-icon">
+              <Icon type="ios-paper" />
             </div>
+            <p>制度文档</p>
 
-            <div class="list">
-              <div class="list-item" v-for="item in systems" @click="$refs['drawer'].setType(2),$refs['drawer'].setRow(item),$refs['drawer'].show()">
-                <span>{{ item.name }}</span>
-                <span>{{ $moment(new Date(item.created_at)).format('YYYY-MM-DD') }}</span>
-              </div>
+            <div class="more" style="margin-left: auto;" @click="$router.push('/system/documents')">
+              <Icon type="md-add" />
+            </div>
+          </div>
 
-              <Page class="list-page" :page-size="systemSelect.page_size" :total="systemTotal" size="small" />
+          <div class="card-content list">
+            <div
+              class="list-item"
+              v-for="item in systems"
+              @click="
+                $refs['drawer'].setType(2),
+                  $refs['drawer'].setRow(item),
+                  $refs['drawer'].show()
+              "
+            >
+              <span>{{ item.name }}</span>
+              <span>{{
+                $moment(new Date(item.created_at)).format("YYYY-MM-DD")
+              }}</span>
             </div>
-<!--            <xy-table :height="400" :table-item="table2" style="margin-top: 20px" size="mini" stripe ref="table1" :auths="[]" :action="index" :req-opt="select1"></xy-table>-->
-          </el-col>
-        </el-row>
-<!--        <el-row :gutter="80" type="flex">-->
-<!--          <el-col :span="12">-->
-<!--            <div class="contract__title">-->
-<!--              <h3>安全检查</h3>-->
-
-<!--              <div class="more" @click="$router.push('/system/documents')">-->
-<!--                更多-->
-<!--                <i class="el-icon-d-arrow-right"></i>-->
-<!--              </div>-->
-<!--            </div>-->
-
-<!--            <div class="list">-->
-<!--              <div class="list-item" v-for="item in assetSafetyPlan" @click="$refs['drawer'].setType(4),$refs['drawer'].setRow(item),$refs['drawer'].show()">-->
-<!--                <span>{{ item.jihuamingcheng }}</span>-->
-<!--                <span>{{ $moment(new Date(item.jihuakaishishijian)).format('YYYY-MM-DD') }}</span>-->
-<!--              </div>-->
-
-<!--              <Page class="list-page" :page-size="systemSelect.page_size" :total="systemTotal" size="small" />-->
-<!--            </div>-->
-<!--          </el-col>-->
-<!--        </el-row>-->
-      </div>
-
-    </Card>
-
-      <drawer ref="drawer"></drawer>
+
+            <Page
+              class="list-page"
+              :page-size="systemSelect.page_size"
+              :total="systemTotal"
+              size="small"
+            />
+          </div>
+        </Card>
+      </el-col>
+    </el-row>
+
+    <drawer ref="drawer"></drawer>
   </div>
 </template>
 
 <script>
-  import echarts from "echarts";
-  import PanelGroup from './components/PanelGroup'
-  import drawer from "./components/drawer.vue"
-
-  import {
-    getChartsHome, getNotice
-  } from '@/api/dashboard';
-  import { index } from "@/api/system/baseForm"
-
-  export default {
-    components: {
-      PanelGroup,
-      drawer,
-    },
-    data() {
-      return {
-        col: '',
-        line: '',
-        business_data: [],
-        collect_data: [],
-        list: {
-          "business": {
-            "server_money_total": Math.round(Math.random()*100000+10000),
-            "nurse_money_total": Math.round(Math.random()*50000+5000),
-            "remain_money_total": Math.round(Math.random()*50000+5000)
-          },
-          "person_efficiency": {
-            "server_time_total": Math.round(Math.random()*50+20),
-            "expect": Math.round(Math.random()*25+10),
-            "act": Math.round(Math.random()*25+10)
-          },
-          "customer": {
-            "active": Math.round(Math.random()*50+30),
-            "add": Math.round(Math.random()*25+10),
-            "wash": Math.round(Math.random()*25+10)
-          },
-          "order": {
-            "server_total": Math.round(Math.random()*50+30),
-            "cycle_total": Math.round(Math.random()*25+10),
-            "unit_total": Math.round(Math.random()*25+10)
-          }},
-        customerArr: [],
-        orderArr: [],
-        chartData: {},
-
-        radio: 0,
-        config: {
-          time: 1,
-          unit: 'months'
+import echarts from "echarts";
+import PanelGroup from "./components/PanelGroup";
+import drawer from "./components/drawer.vue";
+
+import { getChartsHome, getNotice } from "@/api/dashboard";
+import { index } from "@/api/system/baseForm";
+
+export default {
+  components: {
+    PanelGroup,
+    drawer,
+  },
+  data() {
+    return {
+      statusTotal: [],
+      status: ["已过期", "临期"], //同步改scss变量
+      col: "",
+      line: "",
+      business_data: [],
+      collect_data: [],
+      list: {
+        business: {
+          server_money_total: Math.round(Math.random() * 100000 + 10000),
+          nurse_money_total: Math.round(Math.random() * 50000 + 5000),
+          remain_money_total: Math.round(Math.random() * 50000 + 5000),
         },
-        leaseTableLoading: false,
-        leaseSelect: {
-          table_name: 'leases',
-          filter: [
-            {
-              key: 'zulinjieshuqixian',
-              op: 'range',
-              value: `${this.$moment().format("YYYY-MM-DD")},2999-12-31`
-            },
-            {
-              key: 'zulinkaishiqixian',
-              op: 'range',
-              value: `${this.$moment(0).format("YYYY-MM-DD")},${this.$moment().format("YYYY-MM-DD")}`
-            }
-          ],
-          page: 1,
-          page_size: 10
+        person_efficiency: {
+          server_time_total: Math.round(Math.random() * 50 + 20),
+          expect: Math.round(Math.random() * 25 + 10),
+          act: Math.round(Math.random() * 25 + 10),
+        },
+        customer: {
+          active: Math.round(Math.random() * 50 + 30),
+          add: Math.round(Math.random() * 25 + 10),
+          wash: Math.round(Math.random() * 25 + 10),
         },
-        leases: [],
-        leaseTotal: 0,
-        leaseTable: [
+        order: {
+          server_total: Math.round(Math.random() * 50 + 30),
+          cycle_total: Math.round(Math.random() * 25 + 10),
+          unit_total: Math.round(Math.random() * 25 + 10),
+        },
+      },
+      customerArr: [],
+      orderArr: [],
+      chartData: {},
+
+      radio: 0,
+      config: {
+        time: 1,
+        unit: "months",
+      },
+      leaseTableLoading: false,
+      leaseSelect: {
+        table_name: "leases",
+        filter: [
           {
-            title: '序号',
-            fixed: 'left',
-            align: 'center',
-            width: 60,
-            render:(h, { row, column, index }) => {
-              return h('div',{
-                style: {
-                  height: '18px',
-                  width: '18px',
-                  'border-radius': '100%',
-                  color: '#fff',
-                  background: '#4986cc',
-                  'text-align': 'center',
-                  'font-size': '12px'
-                }
-              },index+1)
-            }
+            key: "zulinjieshuqixian",
+            op: "range",
+            value: `${this.$moment(0).format(
+              "YYYY-MM-DD"
+            )},${this.$moment().format("YYYY-MM-DD")}`,
           },
           {
-            title: '地块名称',
-            key: 'dikuaimingcheng',
-            width: 260,
-            fixed: 'left',
-            align: 'left',
-            render: (h, { row }) => {
-              let tags = [
-                ...row?.land?.map(i => h('Tag', {
-                  props: {
-                    color: "green"
-                  }
-                },i.name)),
-                ...row?.houses?.map(i => h('Tag', {
-                  props: {
-                    color: "blue"
-                  }
-                },i.name))
-              ]
-              return h('div',[
-                ...tags.slice(0, 3),
-                h('el-popover',{
-                  props: {
-                    title: "地块名称",
-                    width: 200,
-                    trigger: "hover"
-                  }
-                },[
-                  h('el-link',{
+            key: "zulinkaishiqixian",
+            op: "range",
+            value: ``,
+          },
+        ],
+        page: 1,
+        page_size: 10,
+      },
+      leases: [],
+      leaseTotal: 0,
+      leaseTable: [
+        {
+          title: "序号",
+          fixed: "left",
+          align: "center",
+          width: 60,
+          render: (h, { row, column, index }) => {
+            return h(
+              "div",
+              {
+                style: {
+                  height: "18px",
+                  width: "18px",
+                  "border-radius": "100%",
+                  color: "#fff",
+                  background: "#4986cc",
+                  "text-align": "center",
+                  "font-size": "12px",
+                },
+              },
+              index + 1
+            );
+          },
+        },
+        {
+          title: "地块名称",
+          key: "dikuaimingcheng",
+          width: 260,
+          fixed: "left",
+          align: "left",
+          render: (h, { row }) => {
+            let tags = [
+              ...row?.land?.map((i) =>
+                h(
+                  "Tag",
+                  {
+                    props: {
+                      type: "dot",
+                      color: "#3fa45a",
+                    },
                     style: {
-                      "word-break": "keep-all",
-                      display: tags.length > 3 ? "inline" : "none"
+                      background: "#e5f4ea !important",
                     },
+                  },
+                  i.name
+                )
+              ),
+              ...row?.houses?.map((i) =>
+                h(
+                  "Tag",
+                  {
                     props: {
-                      type: "primary",
+                      type: "dot",
+                      color: "#2254e4",
                     },
-                    slot: "reference"
-                  },"更多"),
-                  h('div',tags)
-                ]),
-              ])
-            }
-          },
-          {
-            title: '出租方',
-            key: 'chuzufang',
-            align: 'left',
-            width: 150
-          },
-          {
-            title: '承租方',
-            align: 'center',
-            key: 'chengzufang',
-            width: 150
-          },
-          {
-            title: '租赁期限',
-            width: 190,
-            align: 'center',
-            render:(h,{ row }) => {
-              return ('div',[
-                h('span',this.$moment(new Date(row.zulinkaishiqixian)).format('YYYY.MM.DD')),
-                h('span',' - '),
-                h('span',this.$moment(new Date(row.zulinjieshuqixian)).format('YYYY.MM.DD'))
-              ])
-            }
+                    style: {
+                      background: "#e8edfc !important",
+                    },
+                  },
+                  i.name
+                )
+              ),
+            ];
+            return h("div", [
+              ...tags.slice(0, 3),
+              h(
+                "el-popover",
+                {
+                  props: {
+                    title: "地块名称",
+                    width: 200,
+                    trigger: "hover",
+                  },
+                },
+                [
+                  h(
+                    "el-link",
+                    {
+                      style: {
+                        "word-break": "keep-all",
+                        display: tags.length > 3 ? "inline" : "none",
+                      },
+                      props: {
+                        type: "primary",
+                      },
+                      slot: "reference",
+                    },
+                    "更多"
+                  ),
+                  h("div", tags),
+                ]
+              ),
+            ]);
           },
-          {
-            title: '应收租金',
-            key: 'yingshouzujin',
-            align: 'right',
-            width: 120
+        },
+        {
+          title: "出租方",
+          key: "chuzufang",
+          align: "left",
+          width: 150,
+        },
+        {
+          title: "承租方",
+          align: "center",
+          key: "chengzufang",
+          width: 150,
+        },
+        {
+          title: "租赁期限",
+          width: 190,
+          align: "center",
+          render: (h, { row }) => {
+            return (
+              "div",
+              [
+                h(
+                  "span",
+                  this.$moment(new Date(row.zulinkaishiqixian)).format(
+                    "YYYY.MM.DD"
+                  )
+                ),
+                h("span", " - "),
+                h(
+                  "span",
+                  this.$moment(new Date(row.zulinjieshuqixian)).format(
+                    "YYYY.MM.DD"
+                  )
+                ),
+              ]
+            );
           },
-          {
-            title: '实收租金',
-            label: 'shishouzujin',
-            align: 'right',
-            width: 120
+        },
+        {
+          title: "应收租金",
+          key: "yingshouzujin",
+          align: "right",
+          width: 120,
+        },
+        {
+          title: "实收租金",
+          label: "shishouzujin",
+          align: "right",
+          width: 120,
+        },
+        {
+          title: "保证金",
+          key: "baozhengjin",
+          width: 120,
+          customFn: (row) => {
+            return (
+              <div
+                style={{
+                  "text-align": row.baozhengjin === "无" ? "center" : "right",
+                }}
+              >
+                {row.baozhengjin}
+              </div>
+            );
           },
+        },
+        {
+          title: "未到位原因",
+          key: "weidaoweiyuanyin",
+          minWidth: 140,
+        },
+      ],
+      systemSelect: {
+        table_name: "systems",
+        filter: [],
+        page: 1,
+        page_size: 10,
+      },
+      systems: [],
+      systemTotal: 0,
+      assetSafetyPlanSelect: {
+        table_name: "asset_safety_plans",
+        page: 1,
+        page_size: 10,
+        filter: [
           {
-            title: '保证金',
-            key: 'baozhengjin',
-            width: 120,
-            customFn:row => {
-              return (
-                <div style={{'text-align': row.baozhengjin === '无' ? 'center' : 'right' }}>{ row.baozhengjin }</div>
-              )
-            }
+            key: "jihuakaishishijian",
+            op: "range",
+            value: `${this.$moment().format("YYYY-MM-DD")},2999-01-01`,
           },
-          {
-            title: '未到位原因',
-            key: 'weidaoweiyuanyin',
-            minWidth: 140
-          }
         ],
-        systemSelect: {
-          table_name: 'systems',
-          filter: [
-          ],
-          page: 1,
-          page_size: 10
-        },
-        systems: [],
-        systemTotal: 0,
-        assetSafetyPlanSelect: {
-          table_name: 'asset_safety_plans',
-          page: 1,
-          page_size: 10,
-          filter: [
-            {
-              key: "jihuakaishishijian",
-              op: "range",
-              value: `${this.$moment().format("YYYY-MM-DD")},2999-01-01`
-            }
-          ]
-        },
-        assetSafetyPlanTotal: 0,
-        assetSafetyPlan: [],
-        noticeSelect: {
-          table_name: 'notices',
-          page: 1,
-          page_size: 10
-        },
-        noticeTotal: 0,
-        notices: [],
-      }
-    },
-    watch: {
-      chartData(val, newval) {
-        if (newval){
-          this.init();
-        }
+      },
+      assetSafetyPlanTotal: 0,
+      assetSafetyPlan: [],
+      noticeSelect: {
+        table_name: "notices",
+        page: 1,
+        page_size: 10,
+      },
+      noticeTotal: 0,
+      notices: [],
+    };
+  },
+  watch: {
+    chartData(val, newval) {
+      if (newval) {
+        this.init();
       }
     },
-    methods: {
-      index,
-      async loadData() {
-        await getChartsHome().then((res) => {
+  },
+  methods: {
+    index,
+    async loadData() {
+      await getChartsHome()
+        .then((res) => {
           console.log(res);
           this.list = res.list;
           this.chartData = res;
           let _business_data = [];
           let _collect_data = [];
-          res.business_data.map(item => {
-            _business_data.push(item.server_money_total)
-            _collect_data.push(item.collect_money)
-          })
+          res.business_data.map((item) => {
+            _business_data.push(item.server_money_total);
+            _collect_data.push(item.collect_money);
+          });
           this.business_data = _business_data;
           this.collect_data = _collect_data;
           let _customerArr = [];
           let _orderArr = [];
 
-          res.order_data.map(item => {
-            _customerArr.push(item.active_customer)
-            _orderArr.push(item.order_total)
-          })
+          res.order_data.map((item) => {
+            _customerArr.push(item.active_customer);
+            _orderArr.push(item.order_total);
+          });
           this.customerArr = _customerArr;
           this.orderArr = _orderArr;
-        }).catch()
-      },
-      init() {
-        this.col = echarts.init(document.getElementById('col-chart'))
-        this.col.setOption({
-          title: {
-            text: ''
+        })
+        .catch();
+    },
+    init() {
+      this.col = echarts.init(document.getElementById("col-chart"));
+      this.col.setOption({
+        title: {
+          text: "",
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
           },
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow'
+          position: "bottom",
+        },
+        legend: {},
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        yAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+        },
+        xAxis: {
+          type: "category",
+          data: ["第一周", "第二周", "第三周", "第四周"],
+        },
+        series: [
+          {
+            name: "服务金额",
+            type: "bar",
+            data: this.business_data,
+            itemStyle: {
+              normal: {
+                color: "rgb(42,182,252)",
+              },
             },
-            position: 'bottom'
-          },
-          legend: {},
-          grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
           },
-          yAxis: {
-            type: 'value',
-            boundaryGap: [0, 0.01]
-          },
-          xAxis: {
-            type: 'category',
-            data: ['第一周', '第二周', '第三周', '第四周']
-          },
-          series: [{
-              name: '服务金额',
-              type: 'bar',
-              data: this.business_data,
-              itemStyle: {
-                normal: {
-                  color: 'rgb(42,182,252)'
-                },
+          {
+            name: "收款",
+            type: "bar",
+            data: this.collect_data,
+            itemStyle: {
+              normal: {
+                color: "rgb(34,228,255)",
               },
             },
-            {
-              name: '收款',
-              type: 'bar',
-              data: this.collect_data,
-              itemStyle: {
-                normal: {
-                  color: 'rgb(34,228,255)'
-                },
-              },
-            }
-          ],
-          select1: {
-
-          }
-        })
-
-        this.line = echarts.init(document.getElementById('line-chart'))
-        this.line.setOption({
-          title: {
-            text: ''
-          },
-          tooltip: {
-            trigger: 'axis'
-          },
-          legend: {
-            data: ['活跃客户', '服务订单']
           },
-          grid: {
-            left: '3%',
-            right: '6%',
-            bottom: '3%',
-            containLabel: true
-          },
-          toolbox: {
+        ],
+        select1: {},
+      });
 
-          },
-          xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data: ['第一周', '第二周', '第三周', '第四周']
-          },
-          yAxis: {
-            type: 'value',
-          },
-          series: [{
-              name: '活跃客户',
-              type: 'line',
-              stack: 'Total',
-              data: this.customerArr,
-              itemStyle: {
-                normal: {
-                  color: 'rgb(42,182,252)'
-                },
+      this.line = echarts.init(document.getElementById("line-chart"));
+      this.line.setOption({
+        title: {
+          text: "",
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["活跃客户", "服务订单"],
+        },
+        grid: {
+          left: "3%",
+          right: "6%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        toolbox: {},
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["第一周", "第二周", "第三周", "第四周"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            name: "活跃客户",
+            type: "line",
+            stack: "Total",
+            data: this.customerArr,
+            itemStyle: {
+              normal: {
+                color: "rgb(42,182,252)",
               },
             },
-            {
-              name: '服务订单',
-              type: 'line',
-              stack: 'Total',
-              data: this.orderArr,
-              itemStyle: {
-                normal: {
-                  color: 'rgb(34,228,255)'
-                },
+          },
+          {
+            name: "服务订单",
+            type: "line",
+            stack: "Total",
+            data: this.orderArr,
+            itemStyle: {
+              normal: {
+                color: "rgb(34,228,255)",
               },
-            }
-          ]
-        })
-      },
+            },
+          },
+        ],
+      });
+    },
 
-      async radioPick (e) {
-        this.radio = e
-        if (e === 1) {
-          let date = this.$moment()
-          let preDate = date.add(this.config.time, this.config.unit).format("YYYY-MM-DD")
-          this.leaseSelect.filter[0].value = `${this.$moment().format("YYYY-MM-DD")},${preDate}`
-          this.leaseSelect.filter[1].value = ''
-        }
-        if (e === 2) {
-          this.leaseSelect.filter[0].value = `${this.$moment(0).format("YYYY-MM-DD")},${this.$moment().format("YYYY-MM-DD")}`
-          this.leaseSelect.filter[1].value = ''
-        }
-        if (e === 0) {
-          this.leaseSelect.filter[0].value = `${this.$moment().format("YYYY-MM-DD")},2999-12-31`
-          this.leaseSelect.filter[1].value = `${this.$moment(0).format("YYYY-MM-DD")},${this.$moment().format("YYYY-MM-DD")}`
-        }
+    async radioPick(e) {
+      if (this.radio === e) return;
+      this.radio = e;
+      if (this.status[e] === "临期") {
+        let date = this.$moment();
+        let preDate = date
+          .add(this.config.time, this.config.unit)
+          .format("YYYY-MM-DD");
+        this.leaseSelect.filter[0].value = `${this.$moment().format(
+          "YYYY-MM-DD"
+        )},${preDate}`;
+        this.leaseSelect.filter[1].value = "";
+      }
+      if (this.status[e] === "已过期") {
+        this.leaseSelect.filter[0].value = `${this.$moment(0).format(
+          "YYYY-MM-DD"
+        )},${this.$moment().format("YYYY-MM-DD")}`;
+        this.leaseSelect.filter[1].value = "";
+      }
+      if (this.status[e] === "合约中") {
+        this.leaseSelect.filter[0].value = `${this.$moment().format(
+          "YYYY-MM-DD"
+        )},2999-12-31`;
+        this.leaseSelect.filter[1].value = `${this.$moment(0).format(
+          "YYYY-MM-DD"
+        )},${this.$moment().format("YYYY-MM-DD")}`;
+      }
 
-        this.leaseSelect.page = 1;
-        await this.getLeases();
-      },
+      this.leaseSelect.page = 1;
+      await this.getLeases();
+    },
 
-      async getConfig () {
-        const res = await index({
-          table_name: 'warnings',
-          filter: [
-            {
-              key: 'flag',
-              op: 'eq',
-              value: 'contract'
-            }
-          ]
-        })
-        this.config.time = Number(res.data[0]?.time);
-        this.config.unit = res.data[0]?.unit;
-      },
+    async getConfig() {
+      const res = await index({
+        table_name: "warnings",
+        filter: [
+          {
+            key: "flag",
+            op: "eq",
+            value: "contract",
+          },
+        ],
+      });
+      this.config.time = Number(res.data[0]?.time);
+      this.config.unit = res.data[0]?.unit;
+    },
 
-      async getNotices () {
-        const res = await getNotice();
-        this.notices = res;
-        this.noticeTotal = res.length;
-      },
-      async getAssetSafetyPlan () {
-        this.assetSafetyPlanSelect.filter[0].value = `${this.$moment().format("YYYY-MM-DD")},${this.$moment().add(this.config.time, this.config.unit).format("YYYY-MM-DD")}`
-        const res = await index(this.assetSafetyPlanSelect,false);
-        this.assetSafetyPlan = res.data;
-        this.assetSafetyPlanTotal = res.total;
-      },
-      async getSystems () {
-        const res = await index(this.systemSelect,false);
-        this.systems = res.data;
-        this.systemTotal = res.total;
-      },
-      async getLeases () {
-        try {
-          this.leaseTableLoading = true;
-          const res = await index(this.leaseSelect,false);
-          this.leases = res.data;
-          this.leaseTotal = res.total;
-          this.leaseTableLoading = false;
-        }catch (e) {
-          this.leaseTableLoading = false;
-        }
-      }
+    async getNotices() {
+      const res = await getNotice();
+      this.notices = res;
+      this.noticeTotal = res.length;
     },
-    created() {
-      this.getNotices();
-      this.getSystems();
-      this.getConfig().then(_ => {
-        this.getLeases();
-        this.getAssetSafetyPlan();
-      })
-      //this.loadData();
+    async getAssetSafetyPlan() {
+      this.assetSafetyPlanSelect.filter[0].value = `${this.$moment().format(
+        "YYYY-MM-DD"
+      )},${this.$moment()
+        .add(this.config.time, this.config.unit)
+        .format("YYYY-MM-DD")}`;
+      const res = await index(this.assetSafetyPlanSelect, false);
+      this.assetSafetyPlan = res.data;
+      this.assetSafetyPlanTotal = res.total;
     },
-    mounted() {
-
-      //this.init()
-
-      window.onresize = () => {
-        this.col.resize()
-        this.line.resize()
+    async getSystems() {
+      const res = await index(this.systemSelect, false);
+      this.systems = res.data;
+      this.systemTotal = res.total;
+    },
+    async getLeases() {
+      try {
+        this.leaseTableLoading = true;
+        const res = await index(this.leaseSelect, false);
+        this.leases = res.data;
+        this.leaseTotal = res.total;
+        this.statusTotal[this.radio] = res.total;
+        this.leaseTableLoading = false;
+      } catch (e) {
+        this.leaseTableLoading = false;
       }
-
     },
-    destroyed() {
-      window.onresize = null
-    }
-  }
+  },
+  created() {
+    this.getNotices();
+    this.getSystems();
+    this.getConfig().then((_) => {
+      this.getLeases();
+      this.getAssetSafetyPlan();
+    });
+    //this.loadData();
+  },
+  mounted() {
+    //this.init()
+
+    window.onresize = () => {
+      this.col.resize();
+      this.line.resize();
+    };
+  },
+  destroyed() {
+    window.onresize = null;
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .app-main{
-    background-color: #fff !important;
+::v-deep .ivu-card-body {
+  overflow: hidden;
+  position: relative;
+
+  &::before {
+    content: "";
+    width: 30px;
+    height: 30px;
+    border-radius: 100%;
+    background: linear-gradient(to bottom,#ebeefa, #0000);
+
+    position: absolute;
+    top: -13px;
+    right: 28px;
+  }
+  &::after {
+    content: "";
+    width: 44px;
+    height: 44px;
+    border-radius: 100%;
+    background: linear-gradient(to bottom,#ebeefa, #0000);
+
+    position: absolute;
+    top: -16px;
+    right: -8px;
+  }
+}
+::v-deep .ivu-tag-dot {
+  padding: 0 8px;
+  height: 27px;
+  line-height: 27px;
+  border-radius: 5px;
+}
+::v-deep .ivu-tag-dot-inner {
+  width: 8px;
+  height: 8px;
+}
+.title-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  position: relative;
+
+  &::before {
+    content: "";
+    width: 26px;
+    height: 26px;
+    background: #2e51db;
+    border-radius: 100%;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  &::after {
+    content: "";
+    width: 26px;
+    height: 26px;
+    background-color: #9eb6fc;
+    opacity: 0.5;
+    border-radius: 100%;
+
+    position: absolute;
+    right: 0;
+    bottom: 0;
   }
-  .statistics {
-    display: flex;
 
-    margin-top: 20px;
+  & > i {
+    color: #fff;
+    z-index: 3;
+    position: relative;
+    font-size: 15px;
+  }
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+
+  & > p {
+    margin-left: 11px;
+    font-size: 20px;
+    letter-spacing: 1px;
+    color: #1c1a1d;
+    font-weight: bold;
+  }
+}
+.card-content {
+  margin-top: 30px;
+}
+.lease-status-switch {
+  display: flex;
+  align-items: center;
+  background: #f4f7f9;
+  border-radius: 15px;
+  position: relative;
+
+  margin-left: 6.1%;
+  &::before {
+    content: "";
+    height: 100%;
+    width: 50%;
+    border-radius: 15px;
+    transition: all 0.2s;
+    background: linear-gradient(114deg, #1f51e2 0%, #6f93fc 98%, #6f93fc 100%);
+    transform: translateX(0);
+
+    position: absolute;
+    top: 0;
+  }
 
-    &-title {
+  & > div {
+    cursor: pointer;
+    font-size: 17px;
+    letter-spacing: 1px;
+    text-align: center;
+    font-weight: bold;
+    width: 92px;
+    height: 30px;
+    color: #000;
+    transition: all 0.2s;
+    position: relative;
+  }
+  & > .active-switch {
+    color: #e8edfc;
+  }
 
-      padding-left: 6px;
+  @for $i from 1 through 2 {
+    &[data-status="#{$i}"] {
+      &::before {
+        transform: translateX(calc(#{$i} * 100%));
+      }
     }
+  }
+}
+.lease-legend {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+
+  & > div {
+    font-size: 15px;
+    color: #595959;
+    position: relative;
+
+    &::before {
+      content: "";
+      width: 8px;
+      height: 8px;
+      border-radius: 100%;
+      position: absolute;
+      left: -14px;
+      top: calc(50% - 4px);
+    }
+
+    & + div {
+      margin-left: 35px;
+    }
+  }
+  & > div:nth-child(1)::before {
+    background: #3fa45a;
+  }
+  & > div:nth-child(2)::before {
+    background: #2254e4;
+  }
+}
+.more {
+  cursor: pointer;
+  font-size: 17px;
+  color: #2052e3;
+  margin-left: 18px;
+}
+.statistics {
+  display: flex;
+
+  margin-top: 20px;
+
+  &-title {
+    padding-left: 6px;
+  }
+
+  &-content {
+    text-align: center;
+    font-size: 13px;
 
-    &-content {
-      text-align: center;
-      font-size: 13px;
+    &-top {
+      &__num {
+        font-weight: 600;
+      }
 
-      &-top {
+      &__name {
+        font-size: 10px;
+        color: rgb(140, 140, 140);
+      }
+    }
+
+    &-bottom {
+      display: flex;
+      justify-content: space-between;
 
+      &-left {
         &__num {
           font-weight: 600;
         }
@@ -585,202 +876,113 @@
         }
       }
 
-      &-bottom {
-        display: flex;
-        justify-content: space-between;
-
-        &-left {
-
-          &__num {
-            font-weight: 600;
-          }
-
-          &__name {
-            font-size: 10px;
-            color: rgb(140, 140, 140);
-          }
+      &-right {
+        &__num {
+          font-weight: 600;
         }
 
-        &-right {
-
-          &__num {
-            font-weight: 600;
-          }
-
-          &__name {
-            font-size: 10px;
-            color: rgb(140, 140, 140);
-          }
+        &__name {
+          font-size: 10px;
+          color: rgb(140, 140, 140);
         }
       }
     }
+  }
 
-    &>div {
-      flex: 1;
-      margin-right: 20px;
+  & > div {
+    flex: 1;
+    margin-right: 20px;
 
-      &:last-child {
-        margin-right: 0;
-      }
+    &:last-child {
+      margin-right: 0;
     }
   }
+}
 
-  .chart {
-    display: flex;
-
-    margin-top: 20px;
-
+.chart {
+  display: flex;
 
-    .chartItem {
+  margin-top: 20px;
 
-      width: 49%;
+  .chartItem {
+    width: 49%;
 
-      .chartItemTitle {
-        font-size: 16px;
-        margin-bottom: 20px;
-      }
-
-      #col-chart {
-        background: #fff;
-        border-radius: 10px;
-        flex: 1;
-        margin-right: 20px;
-        padding: 20px;
-        box-sizing: border-box;
-        min-height: 400px;
-        width: 100%;
-      }
-
-      #line-chart {
-        background: #fff;
-        border-radius: 10px;
-        flex: 1;
-        padding: 20px;
-        box-sizing: border-box;
-        min-height: 400px;
-      }
+    .chartItemTitle {
+      font-size: 16px;
+      margin-bottom: 20px;
     }
 
+    #col-chart {
+      background: #fff;
+      border-radius: 10px;
+      flex: 1;
+      margin-right: 20px;
+      padding: 20px;
+      box-sizing: border-box;
+      min-height: 400px;
+      width: 100%;
+    }
 
+    #line-chart {
+      background: #fff;
+      border-radius: 10px;
+      flex: 1;
+      padding: 20px;
+      box-sizing: border-box;
+      min-height: 400px;
+    }
   }
+}
+.list {
+  padding: 10px 10px 0 10px;
+  &-page {
+    display: flex;
+    justify-content: center;
 
-  .contract {
-
-    &__title {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-end;
-
-      & > h3 {
-        position: relative;
-
-        &::before {
-          content: '';
-          height: 14px;
-          width: 140px;
-          background: radial-gradient(12px 9px at 10px 40%,rgba(53, 122, 199, .6) 20%,#0000 70%) 0 0/12px 12px no-repeat,
-          radial-gradient(120px 9px at 10px 40%,rgba(53, 122, 199, .6) 20%,#0000 70%) 12px 0/130px 12px no-repeat;
-
-          position: absolute;
-          bottom: -3px;
-          left: -6px;
-        }
-      }
-
-      .more {
-        transition: all .2s;
-        cursor: pointer;
-        zoom: .9;
-
-        i {
-          zoom: .9;
-        }
+    margin-top: 30px;
+  }
+  &-item {
+    cursor: pointer;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+
+    padding: 10px 0 10px 16px;
+    position: relative;
+    & > span + span {
+      text-align: right;
+      color: #595959;
+      zoom: 0.9;
+      flex-basis: 90px;
+      flex-shrink: 0;
+    }
+    &::before {
+      content: "";
+      width: 7px;
+      height: 7px;
+      border-radius: 100%;
+      background: #8f8f8f;
+      transform: translateY(-50%);
+
+      position: absolute;
+      left: 0;
+      top: 20.5px;
+    }
+    &::after {
+      content: "";
+      height: 1px;
+      width: 105%;
+      background-color: #1c1a1d;
+      opacity: 0.102;
+
+      position: absolute;
+      bottom: -.5px;
+      left: -2.5%;
+    }
 
-        &:hover {
-          color: $primaryColor;
-        }
-      }
+    &:nth-last-child(2)::after {
+      display: none;
     }
   }
-
- .type-bar {
-   display: flex;
-
-   position: relative;
-   top: 4px;
-   &::before {
-     content: '';
-     height: .5px;
-     background: #aaa;
-
-     position: absolute;
-     bottom: 0;
-     left: 0;
-     right: 0;
-   }
-
-   &__item {
-     cursor: pointer;
-     text-align: center;
-     width: 80px;
-     line-height: 40px;
-     transition: all .2s;
-
-     &--active {
-       color: $primaryColor;
-       font-weight: 600;
-     }
-   }
-   & > svg {
-     width: 80px;
-     transition: all .2s;
-
-     position: absolute;
-     left: 0;
-     bottom: 0;
-   }
- }
-
- .list {
-
-   padding: 10px 10px 0 10px;
-   &-page {
-     display: flex;
-     justify-content: center;
-
-     margin-top: 30px;
-   }
-   &-item {
-     cursor: pointer;
-     display: flex;
-     align-items: flex-start;
-     justify-content: space-between;
-
-     padding-left: 16px;
-     position: relative;
-     & > span + span {
-       text-align: right;
-       color: #999;
-       zoom: .9;
-       flex-basis: 90px;
-       flex-shrink: 0;
-     }
-     &::before {
-       content: '';
-       width: 4px;
-       height: 4px;
-       border-radius: 100%;
-       background: $primaryColor;
-       transform: translateY(-50%);
-
-       position: absolute;
-       left: 0;
-       top: 50%
-     }
-   }
-   &-item + &-item {
-
-     margin-top: 10px;
-   }
- }
+}
 </style>
diff --git a/src/views/lease/let.vue b/src/views/lease/let.vue
index 53f7560..04d8ca8 100644
--- a/src/views/lease/let.vue
+++ b/src/views/lease/let.vue
@@ -6,7 +6,6 @@
         <LxHeader
           :icon="$route.meta.icon"
           :text="$route.meta.title"
-          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
         >
           <div slot="content"></div>
           <slot>
diff --git a/src/views/operate/file.vue b/src/views/operate/file.vue
index bd2cf73..77c837c 100644
--- a/src/views/operate/file.vue
+++ b/src/views/operate/file.vue
@@ -6,7 +6,6 @@
         <LxHeader
           :icon="$route.meta.icon"
           :text="$route.meta.title"
-          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
         >
           <div slot="content"></div>
           <slot>
diff --git a/src/views/operate/menu.vue b/src/views/operate/menu.vue
index d3bf0c3..cfed0e5 100644
--- a/src/views/operate/menu.vue
+++ b/src/views/operate/menu.vue
@@ -6,7 +6,6 @@
         <LxHeader
           :icon="$route.meta.icon"
           :text="$route.meta.title"
-          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
         >
           <div slot="content"></div>
           <slot>
diff --git a/src/views/safety/safetyPlan.vue b/src/views/safety/safetyPlan.vue
index e687c02..8c1c09e 100644
--- a/src/views/safety/safetyPlan.vue
+++ b/src/views/safety/safetyPlan.vue
@@ -6,7 +6,6 @@
         <LxHeader
           :icon="$route.meta.icon"
           :text="$route.meta.title"
-          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
         >
           <div slot="content"></div>
           <slot>
diff --git a/src/views/statics/assets.vue b/src/views/statics/assets.vue
index 5dad4c2..a429eef 100644
--- a/src/views/statics/assets.vue
+++ b/src/views/statics/assets.vue
@@ -6,7 +6,6 @@
         <LxHeader
           :icon="$route.meta.icon"
           :text="$route.meta.title"
-          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
         >
           <div slot="content"></div>
           <slot>
diff --git a/src/views/statics/lease.vue b/src/views/statics/lease.vue
index 51ca32a..b2fa715 100644
--- a/src/views/statics/lease.vue
+++ b/src/views/statics/lease.vue
@@ -6,7 +6,6 @@
         <LxHeader
           :icon="$route.meta.icon"
           :text="$route.meta.title"
-          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
         >
           <div slot="content"></div>
           <slot>
diff --git a/src/views/statics/safetyYear.vue b/src/views/statics/safetyYear.vue
index eb14b45..b5b1331 100644
--- a/src/views/statics/safetyYear.vue
+++ b/src/views/statics/safetyYear.vue
@@ -6,7 +6,6 @@
         <LxHeader
           :icon="$route.meta.icon"
           :text="$route.meta.title"
-          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
         >
           <div slot="content"></div>
           <slot>
diff --git a/src/views/system/components/formEditor.vue b/src/views/system/components/formEditor.vue
index 3333018..50e3610 100644
--- a/src/views/system/components/formEditor.vue
+++ b/src/views/system/components/formEditor.vue
@@ -2,6 +2,8 @@
   <div>
     <el-dialog
       title="提示"
+      :modal-append-to-body="true"
+      :append-to-body="true"
       :visible.sync="dialogVisible"
       :fullscreen="true"
       :before-close="handleClose"
diff --git a/src/views/system/components/linkWith.vue b/src/views/system/components/linkWith.vue
index 26be0e2..a8aa620 100644
--- a/src/views/system/components/linkWith.vue
+++ b/src/views/system/components/linkWith.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-dialog title="关联" :visible.sync="dialogVisible" width="66%">
+    <el-dialog title="关联" :modal-append-to-body="true" :append-to-body="true" :visible.sync="dialogVisible" width="66%">
       <template>
         <el-button size="small" type="primary" icon="el-icon-plus" @click="list.push({ link_table_name: '',local_key: '',foreign_key: '',link_relation: '' })"></el-button>
 
diff --git a/src/views/system/form.vue b/src/views/system/form.vue
index 6fa7b59..1a0a697 100644
--- a/src/views/system/form.vue
+++ b/src/views/system/form.vue
@@ -6,7 +6,6 @@
         <LxHeader
           icon="md-apps"
           text="自定义表单"
-          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
         >
           <div slot="content"></div>
           <slot>
diff --git a/src/views/system/password.vue b/src/views/system/password.vue
index 3b1e7b6..2285e1b 100644
--- a/src/views/system/password.vue
+++ b/src/views/system/password.vue
@@ -1,66 +1,66 @@
-<template>
-  <div class="" style="margin-top: 20px;">
-    <div v-if="user">
-      <el-row :gutter="20">
-
-        <el-col :span="6" :xs="24">
-          <user-card :user="user" />
-        </el-col>
-
-        <el-col :span="18" :xs="24">
-          <el-card>
-            <el-tabs v-model="activeTab">
-              <el-tab-pane label="操作日志" name="timeline">
-                <timeline />
-              </el-tab-pane>
-              <el-tab-pane label="信息修改" name="account">
-                <account />
-              </el-tab-pane>
-            </el-tabs>
-          </el-card>
-        </el-col>
-
-      </el-row>
-    </div>
-  </div>
-</template>
-
-<script>
-  import {
-    mapGetters
-  } from 'vuex'
-  import UserCard from './components/UserCard'
-  import Timeline from './components/Timeline'
-  import Account from './components/Account'
-
-  import {
-    getInfo
+<template>
+  <div class="" style="padding: 20px;">
+    <div v-if="user">
+      <el-row :gutter="20">
+
+        <el-col :span="6" :xs="24">
+          <user-card :user="user" />
+        </el-col>
+
+        <el-col :span="18" :xs="24">
+          <el-card>
+            <el-tabs v-model="activeTab">
+              <el-tab-pane label="操作日志" name="timeline">
+                <timeline />
+              </el-tab-pane>
+              <el-tab-pane label="信息修改" name="account">
+                <account />
+              </el-tab-pane>
+            </el-tabs>
+          </el-card>
+        </el-col>
+
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    mapGetters
+  } from 'vuex'
+  import UserCard from './components/UserCard'
+  import Timeline from './components/Timeline'
+  import Account from './components/Account'
+
+  import {
+    getInfo
   } from '../../api/user.js'
-
-  export default {
-    name: 'Profile',
-    components: {
-      UserCard,
-      Timeline,
-      Account
-    },
-    data() {
-      return {
-        user: {},
-        activeTab: 'timeline'
-      }
-    },
-    computed: {
-      ...mapGetters([
-        'name',
-        'avatar',
-        'roles'
-      ])
-    },
-    created() {
-      this.getUser()
-    },
-    methods: {
+
+  export default {
+    name: 'Profile',
+    components: {
+      UserCard,
+      Timeline,
+      Account
+    },
+    data() {
+      return {
+        user: {},
+        activeTab: 'timeline'
+      }
+    },
+    computed: {
+      ...mapGetters([
+        'name',
+        'avatar',
+        'roles'
+      ])
+    },
+    created() {
+      this.getUser()
+    },
+    methods: {
       getUser() {
 
         getInfo().then(res => {
@@ -70,9 +70,9 @@
             role: this.roles.join(' | '),
             avatar: this.avatar
           }
-        })
-
-      }
-    }
-  }
+        })
+
+      }
+    }
+  }
 </script>