修改

src/views/guestmng/comps/function_list.vue

@@ -2,8 +2,18 @@
   <!-- 宫格功能 -->
   <div class="page animate__animated animate__faster animate__fadeInDown">
     <div class="list">
-      <div @click="select(item,index)" class="item" :style="'background: url('+item.icon+')  no-repeat  center/cover;'"
-        v-for="(item,index) in list" :key="index">
+      <div class="item" :style="'background: url('+item.bg+')  no-repeat  center/cover;'" v-for="(item,index) in list"
+        :key="index">
+        <div class="top">
+          <img :src="item.icon">
+          <div class="data">
+            <label>{{item.name}}</label>
+            <label><count-to :startVal='0' :endVal='item.num' :duration='2000'></count-to></label>
+          </div>
+        </div>
+        <div class="bottom">
+          <el-button size="mini" icon="el-icon-plus" :style="'color:'+item.color" round>增加</el-button>
+        </div>
       </div>
     </div>
   </div>
@@ -11,30 +21,47 @@
 </template>
 
 <script>
-  export default {
+ import countTo from 'vue-count-to'
+ export default {
+   components: {
+     countTo
+   },
     data() {
       return {
         activedIndex: 0,
-        list:[
-          {
-            icon:'/img/test/czry.png'
+        list: [{
+            name: '常驻人员',
+            num: 12344,
+            bg: '/img/face/cz_bg.png',
+            icon: '/img/face/cz.png',
+            color: '#A055ED'
           },
           {
-            icon:'/img/test/jrfk.png'
+            name: '今日访客',
+            num: 12344,
+            bg: '/img/face/jr_bg.png',
+            icon: '/img/face/jr.png',
+            color: '#ED866D'
           },
           {
-            icon:'/img/test/fwry.png'
+            name: '服务人员',
+            num: 12344,
+            bg: '/img/face/fw_bg.png',
+            icon: '/img/face/fw.png',
+            color: '#4F74DB'
           },
           {
-            icon:'/img/test/twzc.png'
+            name: '体温异常',
+            num: 12344,
+            bg: '/img/face/tw_bg.png',
+            icon: '/img/face/tw.png',
+            color: '#5dd2d3'
           }
         ]
       };
     },
     methods: {
-      select(item,index){
-        this.$animateCss(id,'animate__pulse')
-      }
+
     }
   };
 </script>
@@ -60,21 +87,44 @@
     .item {
       width: 18.8rem;
       height: 9rem;
+      box-sizing: border-box;
+      padding: 1.25rem;
       display: flex;
-      justify-content: center;
-      align-items: center;
+      justify-content: space-between;
       flex-direction: column;
-      text-align: center;
 
-      img {
-        width: 3.2rem;
-        height: 3.2rem;
+      .top {
+        display: flex;
+
+        img {
+          width: 3.2rem;
+          height: 3.2rem;
+          border-radius: 50%;
+        }
+
+        .data {
+          margin-left: 0.625rem;
+          display: flex;
+          justify-content: center;
+          align-items: flex-start;
+          flex-direction: column;
+          color: #FFFFFF;
+
+          label:first-child {
+            font-size: 1rem;
+            font-weight: 800;
+          }
+
+          label:last-child {
+            font-size: 0.96rem;
+            margin-top: 0.35rem;
+          }
+        }
       }
 
-      label {
-        margin-top: 0.625rem;
-        color: #333333;
-        font-size: 0.75rem;
+      .bottom {
+        display: flex;
+        justify-content: flex-end;
       }
     }
 

src/views/guestmng/comps/resident.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="page" style="box-sizing: border-box;">
+    <more title="常驻人员"></more>
+
+    <div class="card-box">
+      <div  class="changeIcon" style="left: 0px;z-index: 9999;">
+        <el-button size="medium" @click="change('Left')" icon="el-icon-arrow-left" circle></el-button>
+      </div>
+
+      <div class="changeIcon" style="right: 0px;z-index: 9999;">
+        <el-button size="medium"  @click="change('Right')" icon="el-icon-arrow-right" circle></el-button>
+      </div>
+
+      <div class="card-list animate__animated animate__faster animate__backInLeft" style="display: flex;justify-content: center;">
+        <div class="card" v-for="(item,index) in list" :key="index">
+          <div class="img">
+            <el-image style="width: 100%;height: 100%" :src="item.face" :preview-src-list="[item.face]"></el-image>
+          </div>
+          <div class="data">
+            <div class="left">
+              <div class="name">{{item.name}}</div>
+              <div class="temperature">
+                <div>{{item.data}} ℃</div>
+                <div v-if="item.data>37.6" class="center" style="margin-top: 0.125rem;"><i
+                    class="el-icon-warning dot"></i></div>
+              </div>
+            </div>
+            <div class="right">
+              <div style="display: flex;">
+                <div class="center">
+                  <div class="center icon" style="background-color: #3b8ff4;">入</div>
+                </div>
+                {{item.enterTime}}
+              </div>
+
+              <div style="display: flex;margin-top: 0.2rem;">
+                <div class="center">
+                  <div class="center icon" style="background-color: #ec7b5f;">出</div>
+                </div>
+                {{item.outerTime}}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import more from "@/components/more.vue"
+  export default {
+    components: {
+      more
+    },
+    data() {
+      return {
+        list: [{
+          face: '/img/test/face.png',
+          name: '黄**',
+          data: 38.2,
+          enterTime:'14:32',
+          outerTime:'15:27'
+        },
+        {
+          face: '/img/test/face.png',
+          name: '梁**',
+          data: 36.2,
+          enterTime:'11:24',
+          outerTime:'19:03'
+        },
+        {
+          face: '/img/test/face.png',
+          name: '张**',
+          data: 36.3,
+          enterTime:'08:05',
+          outerTime:'18:23'
+        },
+        {
+          face: '/img/test/face.png',
+          name: '方**',
+          data: 36.2,
+          enterTime:'09:00',
+          outerTime:'18:00'
+        },
+        {
+          face: '/img/test/face.png',
+          name: '阮**',
+          data: 36.2,
+          enterTime:'09:00',
+          outerTime:'18:00'
+        }]
+      };
+    },
+    methods:{
+      change(item){
+        console.log(item);
+        this.$animateCss('.card-list','animate__slideIn'+item)
+        this.list= this.randomArray(this.list)
+      },
+      randomArray(array) {
+      	return array.sort(() => Math.random() - 0.5)
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page {
+    margin-top: -1.25rem;
+    padding: 1.25rem;
+    background-color: #FFFFFF;
+  }
+
+  .center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+
+  .card-box {
+    position: relative;
+
+    .changeIcon {
+      position: absolute;
+      bottom: calc(50% - 15px);
+    }
+  }
+
+  .card {
+    background-color: #F5F5F5;
+    margin: 1.25rem 0.625rem 1.25rem 0.625rem;
+    display: flex;
+    flex-direction: column;
+    width: 12.5rem;
+    height: 16.5rem;
+
+    .img {
+      width: 100%;
+      height: 13rem;
+    }
+
+    .data {
+      padding: 0 0.625rem;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+
+      .left,
+      .right {
+        color: #999999;
+        font-size: 0.8rem;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .left {
+        .name {
+          font-size: 0.95rem;
+          font-weight: 800;
+          color: #333;
+        }
+
+        .temperature {
+          display: flex;
+          font-weight: 400;
+          margin-top: 0.2rem;
+
+          .dot {
+            margin-left: 0.375rem;
+            color: #E35E4B;
+          }
+        }
+      }
+
+      .right {
+
+        .icon {
+          width: 0.9rem;
+          height: 0.9rem;
+          border-radius: 50%;
+          color: #FFFFFF;
+          font-size: 0.5rem;
+          margin-right: 0.26rem;
+        }
+      }
+
+
+
+    }
+  }
+</style>

src/views/guestmng/comps/strange.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="page" style="box-sizing: border-box;">
+    <more title="陌生人员"></more>
+
+    <div class="card-box">
+      <div  class="changeIcon" style="left: 0px;z-index: 9999;">
+        <el-button size="medium" @click="change('Left')" icon="el-icon-arrow-left" circle></el-button>
+      </div>
+
+      <div class="changeIcon" style="right: 0px;z-index: 9999;">
+        <el-button size="medium"  @click="change('Right')" icon="el-icon-arrow-right" circle></el-button>
+      </div>
+
+      <div class="card-list strange animate__animated animate__faster animate__backInLeft" style="display: flex;justify-content: center;">
+        <div class="card" v-for="(item,index) in list" :key="index">
+          <div class="img">
+            <el-image style="width: 100%;height: 100%" :src="item.face" :preview-src-list="[item.face]"></el-image>
+          </div>
+          <div class="data">
+            <div class="left">
+              <div class="name">{{item.name}}</div>
+              <div class="temperature">
+                <div>{{item.data}} ℃</div>
+                <div v-if="item.data>37.6" class="center" style="margin-top: 0.125rem;"><i
+                    class="el-icon-warning dot"></i></div>
+              </div>
+            </div>
+            <div class="right">
+              <div style="display: flex;">
+                <div class="center">
+                  <div class="center icon" style="background-color: #3b8ff4;">入</div>
+                </div>
+                {{item.enterTime}}
+              </div>
+
+              <div style="display: flex;margin-top: 0.2rem;">
+                <div class="center">
+                  <div class="center icon" style="background-color: #ec7b5f;">出</div>
+                </div>
+                {{item.outerTime}}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import more from "@/components/more.vue"
+  export default {
+    components: {
+      more
+    },
+    data() {
+      return {
+        list: [{
+          face: '/img/test/face.png',
+          name: '黄**',
+          data: 38.2,
+          enterTime:'14:32',
+          outerTime:'15:27'
+        },
+        {
+          face: '/img/test/face.png',
+          name: '梁**',
+          data: 36.2,
+          enterTime:'11:24',
+          outerTime:'19:03'
+        },
+        {
+          face: '/img/test/face.png',
+          name: '张**',
+          data: 36.3,
+          enterTime:'08:05',
+          outerTime:'18:23'
+        },
+        {
+          face: '/img/test/face.png',
+          name: '方**',
+          data: 36.2,
+          enterTime:'09:00',
+          outerTime:'18:00'
+        },
+        {
+          face: '/img/test/face.png',
+          name: '阮**',
+          data: 36.2,
+          enterTime:'09:00',
+          outerTime:'18:00'
+        }]
+      };
+    },
+    methods:{
+      change(item){
+        console.log(item);
+        this.$animateCss('.strange','animate__slideIn'+item)
+        this.list= this.randomArray(this.list)
+      },
+      randomArray(array) {
+      	return array.sort(() => Math.random() - 0.5)
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page {
+    margin-top: -1.25rem;
+    padding: 1.25rem;
+    background-color: #FFFFFF;
+  }
+
+  .center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+
+  .card-box {
+    position: relative;
+
+    .changeIcon {
+      position: absolute;
+      bottom: calc(50% - 15px);
+    }
+  }
+
+  .card {
+    background-color: #F5F5F5;
+    margin: 1.25rem 0.625rem 1.25rem 0.625rem;
+    display: flex;
+    flex-direction: column;
+    width: 12.5rem;
+    height: 16.5rem;
+
+    .img {
+      width: 100%;
+      height: 13rem;
+    }
+
+    .data {
+      padding: 0 0.625rem;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+
+      .left,
+      .right {
+        color: #999999;
+        font-size: 0.8rem;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .left {
+        .name {
+          font-size: 0.95rem;
+          font-weight: 800;
+          color: #333;
+        }
+
+        .temperature {
+          display: flex;
+          font-weight: 400;
+          margin-top: 0.2rem;
+
+          .dot {
+            margin-left: 0.375rem;
+            color: #E35E4B;
+          }
+        }
+      }
+
+      .right {
+
+        .icon {
+          width: 0.9rem;
+          height: 0.9rem;
+          border-radius: 50%;
+          color: #FFFFFF;
+          font-size: 0.5rem;
+          margin-right: 0.26rem;
+        }
+      }
+
+
+
+    }
+  }
+</style>

src/views/guestmng/comps/today_visitor.vue

@@ -1,21 +1,21 @@
 <template>
   <div class="page animate__animated animate__faster animate__fadeInRight">
     <more title="今日访客"></more>
-    <div class="card" v-for="(item,index) in 10" :key="index">
+    <div class="card" v-for="(item,index) in list" :key="index">
       <div class="card-left">
         <div class="center">
-          <img src="/img/test/face.png">
+          <img :src="item.face">
         </div>
         <div class="data">
-          <div>张**</div>
-          <div>体温36.2℃</div>
+          <div>{{item.name}}</div>
+          <div>体温{{item.data}}℃</div>
         </div>
       </div>
       <div class="card-center">
-        23:00-12:00
+        {{item.enterTime}}-{{item.outerTime}}
       </div>
       <div class="card-right">
-        逗留:56:00
+        逗留:{{item.time}}
       </div>
     </div>
   </div>
@@ -29,8 +29,100 @@
     },
     data() {
       return {
-
+        timer:null,
+        list: [{
+            face: '/img/test/face.png',
+            name: '张**',
+            data: 36.2,
+            enterTime: '09:00',
+            outerTime: '12:00',
+            time: '3h'
+          },
+          {
+            face: '/img/test/face.png',
+            name: '黄**',
+            data: 36.3,
+            enterTime: '09:00',
+            outerTime: '12:00',
+            time: '3h'
+          },
+          {
+            face: '/img/test/face.png',
+            name: '梁**',
+            data: 36.4,
+            enterTime: '09:00',
+            outerTime: '12:00',
+            time: '3h'
+          },
+          {
+            face: '/img/test/face.png',
+            name: '李**',
+            data: 36.5,
+            enterTime: '09:00',
+            outerTime: '12:00',
+            time: '3h'
+          },
+          {
+            face: '/img/test/face.png',
+            name: '方**',
+            data: 36.8,
+            enterTime: '09:00',
+            outerTime: '12:00',
+            time: '3h'
+          },
+          {
+            face: '/img/test/face.png',
+            name: '张**',
+            data: 36.2,
+            enterTime: '09:00',
+            outerTime: '12:00',
+            time: '3h'
+          },
+          {
+            face: '/img/test/face.png',
+            name: '张**',
+            data: 36.2,
+            enterTime: '09:00',
+            outerTime: '12:00',
+            time: '3h'
+          },
+          {
+            face: '/img/test/face.png',
+            name: '张**',
+            data: 36.2,
+            enterTime: '09:00',
+            outerTime: '12:00',
+            time: '3h'
+          },
+          {
+            face: '/img/test/face.png',
+            name: '张**',
+            data: 36.2,
+            enterTime: '09:00',
+            outerTime: '12:00',
+            time: '3h'
+          },
+          {
+            face: '/img/test/face.png',
+            name: '张**',
+            data: 36.2,
+            enterTime: '09:00',
+            outerTime: '12:00',
+            time: '3h'
+          }
+        ]
       };
+    },
+    unmounted() {
+      clearInterval(this.timer)
+    },
+    mounted() {
+      this.timer = setInterval(() => {
+        let list = this.list;
+        list.push(list[0]);
+        list.splice(0, 1);
+        this.list = list;
+      }, 1500)
     }
   };
 </script>

src/views/guestmng/guestrecordmng.vue

@@ -5,6 +5,8 @@
       <el-col :span="18">
         <div style="box-sizing: border-box;margin: 0.625rem;margin-top: 0;">
           <functionList></functionList>
+          <resident></resident>
+          <strange></strange>
         </div>
       </el-col>
       <!-- 右容器 -->
@@ -16,10 +18,14 @@
 </template>
 
 <script>
+  import strange from "./comps/strange.vue"
+  import resident from "./comps/resident.vue"
   import functionList from "./comps/function_list.vue"
   import todayVisitor from "./comps/today_visitor.vue"
   export default {
     components: {
+      strange,
+      resident,
       functionList,
       todayVisitor
     },

src/views/parkingmng/comps/parking-statistics.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="page animate__animated animate__faster animate__fadeInRight">
+    <more title="泊车统计"></more>
+
+    <div class="full center" style="flex-direction: column;">
+      <dv-active-ring-chart :config="config" style="width:260px;height:260px" />
+
+      <div class="static">
+        <div class="data">
+          <div>总泊车位</div>
+          <div>290</div>
+        </div>
+        <div class="data">
+          <div>已泊车位</div>
+          <div>110</div>
+        </div>
+        <div class="data">
+          <div>剩余车位</div>
+          <div>180</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import more from "@/components/more.vue"
+  export default {
+    components: {
+      more
+    },
+    data() {
+      return {
+        config: {
+          data: [{
+            name: '剩余车位',
+            value: 180
+          }, {
+            name: '已泊车位',
+            value: 110
+          }],
+          digitalFlopStyle: {
+            fontSize: 16,
+            fill: '#333'
+          },
+          lineWidth: 30,
+          color: ['#4da9ff', '#ff7070']
+        }
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .full {
+    width: 100%;
+    height: 100%;
+  }
+
+  .center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .page {
+    background-color: #FFFFFF;
+    padding: 1.2rem;
+    box-sizing: border-box;
+  }
+
+  .static {
+    width: 45%;
+    font-size: 0.9rem;
+    margin-top: -1rem;
+
+    .data {
+      padding-bottom: 0.625rem;
+      display: flex;
+      justify-content: space-between;
+
+      div:last-child{
+        font-size: 1rem;
+        font-weight: 500;
+      }
+    }
+  }
+
+  /deep/ .dv-active-ring-chart .active-ring-info .active-ring-name {
+    width: 100px;
+    height: 30px;
+    color: #333;
+    text-align: center;
+    vertical-align: middle;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+</style>

src/views/parkingmng/comps/parking-usage.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="page animate__animated animate__faster animate__fadeInLeft">
+    <more title="车位使用情况" nomore></more>
+
+    <div class="btnList">
+      <div @click="activedIndex=index" v-for="(item,index) in parkList" :key="index" style="padding-right: 1.25rem;">
+        <el-button :type="activedIndex==index?'primary':''" size="medium">{{item.label}}</el-button>
+      </div>
+    </div>
+
+
+    <!-- A1停车场 -->
+    <div class="paking" style="display: flex;justify-content: space-between;" v-show="activedIndex==0"
+      :class="activedIndex==0?'animate__fadeInLeft':'animate__fadeOutLeft'">
+      <div
+        style="height: 100%;width: calc(70% - 30px);display: flex;flex-direction: column;justify-content: space-between;">
+
+        <div class="grid-content"
+          style="height:calc( 50% - 15px);display: flex;justify-content: center;align-items: center;">
+          <div style="margin: 0.5rem;" v-for="(item,index) in 39" :key="index">
+            <el-popover placement="bottom" title="" width="200" trigger="hover">
+              <div class="tips">
+                <div>
+                  <label>停车场：</label>
+                  A1停车场
+                </div>
+                <div>
+                  <label>车位号：</label>
+                  pc20211220{{index}}
+                </div>
+                <div>
+                  <label>车牌号：</label>
+                  <span v-if="pakingA_a.includes(index)">粤SB12345{{index}}</span>
+                  <span style="color: red;" v-else>车位为空</span>
+                </div>
+                <div>
+                  <label>车位类型：</label>
+                  固定停车位
+                </div>
+              </div>
+              <img slot="reference"
+                :src="pakingA_a.includes(index)?'/img/test/paking1.png':'/img/test/paking-empty.png'"
+                style="height: 70px;width: 40px;">
+            </el-popover>
+          </div>
+        </div>
+
+        <div class="grid-content"
+          style="height:calc( 50% - 15px);display: flex;justify-content: center;align-items: center;">
+          <div style="margin: 0.5rem;" v-for="(item,index) in 39" :key="index">
+            <el-popover placement="bottom" title="" width="200" trigger="hover">
+              <div class="tips">
+                <div>
+                  <label>停车场：</label>
+                  A1停车场
+                </div>
+                <div>
+                  <label>车位号：</label>
+                  pc20211220{{index}}
+                </div>
+                <div>
+                  <label>车牌号：</label>
+                  <span v-if="pakingA_b.includes(index)">粤SB12345{{index}}</span>
+                  <span style="color: red;" v-else>车位为空</span>
+                </div>
+                <div>
+                  <label>车位类型：</label>
+                  固定停车位
+                </div>
+              </div>
+              <img slot="reference"
+                :src="pakingA_b.includes(index)?'/img/test/paking1.png':'/img/test/paking-empty.png'"
+                style="height: 70px;width: 40px;">
+            </el-popover>
+          </div>
+        </div>
+
+      </div>
+      <div class="grid-content"
+        style="height: 100%;width: 30%;display: flex;justify-content: center;align-items: center;">
+        <div style="margin: 0.625rem;" v-for="(item,index) in 27" :key="index">
+          <el-popover placement="bottom" title="" width="200" trigger="hover">
+            <div class="tips">
+              <div>
+                <label>停车场：</label>
+                A1停车场
+              </div>
+              <div>
+                <label>车位号：</label>
+                pc20211220{{index}}
+              </div>
+              <div>
+                <label>车牌号：</label>
+                <span v-if="pakingA_c.includes(index)">粤SB12345{{index}}</span>
+                <span style="color: red;" v-else>车位为空</span>
+              </div>
+              <div>
+                <label>车位类型：</label>
+                固定停车位
+              </div>
+            </div>
+            <img slot="reference" :src="pakingA_c.includes(index)?'/img/test/paking2.png':'/img/test/paking2-empty.png'"
+              style="width: 70px;height: 40px;">
+          </el-popover>
+
+        </div>
+      </div>
+    </div>
+
+    <!-- A2停车场 -->
+    <div class="paking animate__animated animate__faster" v-show="activedIndex==1"
+      :class="activedIndex==1?'animate__fadeInLeft':'animate__fadeOutRight'"
+      style="height: 660px;display: flex;justify-content: space-between;flex-direction: column;">
+      <div v-for="(item,index) in 2" :key="index" class="grid-content"
+        style="display: flex;justify-content: center;align-items: center;width: 100%;height: calc(100%/2 - 15px);">
+        <div style="margin: 0.58rem;" v-for="(item,index) in 57" :key="index">
+          <el-popover placement="bottom" title="" width="200" trigger="hover">
+            <div class="tips">
+              <div>
+                <label>停车场：</label>
+                A2停车场
+              </div>
+              <div>
+                <label>车位号：</label>
+                pc20211220{{index}}
+              </div>
+              <div>
+                <label>车牌号：</label>
+                <span v-if="pakingB_a.includes(index)">粤SB12345{{index}}</span>
+                <span style="color: red;" v-else>车位为空</span>
+              </div>
+              <div>
+                <label>车位类型：</label>
+                固定停车位
+              </div>
+            </div>
+            <img slot="reference" :src="pakingB_a.includes(index)?'/img/test/paking1.png':'/img/test/paking-empty.png'"
+              style="height: 70px;width: 40px;">
+          </el-popover>
+        </div>
+      </div>
+    </div>
+
+    <!-- A3停车场 -->
+    <div class="paking animate__animated animate__faster" v-show="activedIndex==2"
+      :class="activedIndex==2?'animate__fadeInLeft':'animate__fadeOutRight'"
+      style="height: 660px;display: flex;justify-content: space-between;">
+
+      <div v-for="(item,index) in 3" :key="index" class="grid-content"
+        style="display: flex;justify-content: center;align-items: center;height: 100%;width: calc(100%/3 - 30px);">
+        <div style="margin: 0.4rem;" v-for="(item,index) in 32" :key="index">
+          <el-popover placement="bottom" title="" width="200" trigger="hover">
+            <div class="tips">
+              <div>
+                <label>停车场：</label>
+                A1停车场
+              </div>
+              <div>
+                <label>车位号：</label>
+                pc20211220{{index}}
+              </div>
+              <div>
+                <label>车牌号：</label>
+                <span v-if="pakingC_a.includes(index)">粤SB12345{{index}}</span>
+                <span style="color: red;" v-else>车位为空</span>
+              </div>
+              <div>
+                <label>车位类型：</label>
+                固定停车位
+              </div>
+            </div>
+            <img slot="reference" :src="pakingC_a.includes(index)?'/img/test/paking2.png':'/img/test/paking2-empty.png'"
+              style="width: 70px;height: 40px;">
+          </el-popover>
+
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+  import more from "@/components/more.vue"
+  export default {
+    components: {
+      more
+    },
+    data() {
+      return {
+        parkList: [{
+            label: 'A1停车场',
+            value: 1
+          },
+          {
+            label: 'A2停车场',
+            value: 2
+          },
+          {
+            label: 'A3停车场',
+            value: 3
+          }
+        ],
+        activedIndex: 0,
+        pakingA_a: [0, 1, 2, 3, 4, 5, 6, 7, 8, 12, 14, 15, 20, 24, 25, 26, 30, 31, 32, 34, 36],
+        pakingA_b: [0, 1, 2, 3, 5, 7, 9, 13, 14, 16, 20, 24, 25, 26, 27, 29, 30, 32, 33, 35, 38],
+        pakingA_c: [0, 1, 2, 3, 4, 8, 12, 14, 15, 20, 24, 25, 26],
+        pakingB_a: [0, 1, 2, 3, 4, 5, 6, 7, 8, 12, 14, 15, 20, 24, 25, 26, 30, 31, 32, 34, 36, 41, 42, 43, 45, 48, 49],
+        pakingC_a: [0, 1, 2, 3, 4, 5, 6, 7, 8, 12, 14, 15, 20, 24, 25, 26, 30, 31, 32, 34, 36, 41, 42, 43, 45, 48, 49],
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page {
+    background-color: #FFFFFF;
+    padding: 1.25rem;
+    box-sizing: border-box;
+  }
+
+  .tips {
+    padding: 10px;
+
+    div {
+      display: flex;
+      padding-top: 0.625rem;
+      font-size: 14px;
+    }
+
+    label {
+      width: 70px;
+    }
+  }
+
+  .btnList {
+    padding-top: 0.625rem;
+    display: flex;
+  }
+
+  .paking {
+    border-radius: 0.25rem;
+    box-sizing: border-box;
+    background-color: #052252;
+    margin-top: 1.25rem;
+    padding: 1.875rem;
+    width: 100%;
+    height: 660px;
+  }
+
+  .el-row {
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .el-col {
+    border-radius: 4px;
+  }
+
+
+  .grid-content {
+    box-sizing: border-box;
+    padding: 10px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    min-height: 13.75rem;
+    background-color: #f5f5f5;
+  }
+</style>

src/views/parkingmng/parkingvehiclemng.vue

@@ -1,575 +1,44 @@
 <template>
-  <basic-container>
-    <avue-crud :option="option"
-               :table-loading="loading"
-               :data="data"
-               :page="page"
-               :permission="permissionList"
-               :before-open="beforeOpen"
-               v-model="form"
-               ref="crud"
-               @row-update="rowUpdate"
-               @row-save="rowSave"
-               @row-del="rowDel"
-               @search-change="searchChange"
-               @search-reset="searchReset"
-               @selection-change="selectionChange"
-               @current-change="currentChange"
-               @size-change="sizeChange"
-               @refresh-change="refreshChange"
-               @on-load="onLoad">
-      <template slot="menuLeft">
-        <el-button type="danger"
-                   size="small"
-                   icon="el-icon-delete"
-                   plain
-                   v-if="permission.car_delete"
-                   @click="handleDelete">删 除
-        </el-button>
-        <cy-excel-import :flag="6" file-name="车辆信息导入模板" @success="onLoad(page)"></cy-excel-import>
-      </template>
-      <!--      <template slot="personId" slot-scope="scope">-->
-      <!--&lt;!&ndash;        <el-tag type="primary" @click="personClick(scope.row)">{{scope.row.$personId}}</el-tag>&ndash;&gt;-->
-      <!--        <el-tag type="primary">{{scope.row.$personId}}</el-tag>-->
-      <!--      </template>-->
-      <template slot="auditStatus" scope="{row}">
-        <el-tag v-if="row.auditStatus == 1" type="success">
-          审核通过
-        </el-tag>
-        <el-tag v-else-if="row.auditStatus == -1" type="info">
-          审核不通过
-        </el-tag>
-        <el-tag v-else type="danger">
-          待审核
-        </el-tag>
-      </template>
-    </avue-crud>
-    <el-dialog title="人员画像" :visible.sync="dialogOpen" :fullscreen="true" :modal-append-to-body="false" center>
-      <cy-person-file :personId="personId"></cy-person-file>
-    </el-dialog>
-  </basic-container>
+  <div class="page">
+    <el-row >
+      <!-- 左容器 -->
+      <el-col :span="18">
+        <div style="box-sizing: border-box;margin: 0.625rem;margin-top: 0;">
+          <parking-usage></parking-usage>
+        </div>
+      </el-col>
+      <!-- 右容器 -->
+      <el-col :span="6">
+        <parking-statistics></parking-statistics>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
-  import {getList, getDetail, add, update, remove} from "@/api/estate/car";
-  // import CyPersonFile from "../../components/file/cy-person-file";
-  import {mapGetters} from "vuex";
-  import {validateLicense, validatePhone} from "../../util/validator";
-  import {getList as getAgencyList} from "@/api/community/agency";
-  import {getList as getResidentialList} from "@/api/community/residential";
-  // import CyExcelImport from "../../components/excel/cy-excel-import";
-
+  import parkingStatistics from "./comps/parking-statistics.vue"
+  import parkingUsage from "./comps/parking-usage.vue"
   export default {
-    // components: {
-    //   CyExcelImport,
-    //   CyPersonFile
-    // },
+    components: {
+      parkingUsage,
+      parkingStatistics
+    },
     data() {
       return {
-        form: {},
-        query: {},
-        loading: true,
-        page: {
-          pageSize: 10,
-          currentPage: 1,
-          total: 0
-        },
-        selectionList: [],
-        dialogOpen: false,
-        personId: '',
-        option: {
-          height:'auto',
-          calcHeight: 30,
-          tip: false,
-          searchShow: true,
-          searchMenuSpan: 6,
-          border: true,
-          index: true,
-          viewBtn: true,
-          selection: true,
-          dialogClickModal: false,
-          column: [
-            {
-              label: "车牌号",
-              prop: "number",
-              width: 200,
-              rules: [{
-                required: true,
-                message: "请输入车牌号",
-              },{
-                validator: validateLicense,
-                trigger: "blur"
-              }]
-            }, {
-              label: "车辆类型",
-              prop: "type",
-              type: "select",
-              width: 150,
-              dicUrl: "/api/blade-system/dict-biz/dictionary?code=car-type",
-              props: {
-                label: "dictValue",
-                value: "dictKey",
-              },
-              dataType: "number",
-              rules: [{
-                required: true,
-                message: "请输入车辆类型",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "所属园区",
-              prop: "agencyName",
-              editDisplay: false,
-              addDisplay: false,
-            },
-            {
-              label: "所属园区",
-              prop: "agencyId",
-              search: true,
-              searchFilterable: true,
-              filterable: true,
-              cascaderItem: ['residentialId'],
-              type: "select",
-              // remote: true,
-              dicUrl: "/api/cyzh-community/agency/list?size=9999",
-              dicFormatter:(res)=>{
-                return res.data.records;//返回字典的层级结构
-              },
-              props: {
-                label: "name",
-                value: "id"
-              },
-              rules: [{
-                required: true,
-                message: "请选择所属园区",
-                trigger: "blur"
-              }],
-              hide: true,
-              viewDisplay: false,
-            },
-            {
-              label: "所属区域",
-              prop: "residentialName",
-              editDisplay: false,
-              addDisplay: false
-            },
-            {
-              label: "所属区域",
-              prop: "residentialId",
-              type: "select",
-              search: true,
-              // dataType:'string',
-              cascaderItem: ["parkingLotId"],
-              dicUrl: "/api/cyzh-community/residential/list?agencyId={{key}}",
-              dicFormatter:(res)=>{
-                return res.data.records;//返回字典的层级结构
-              },
-              // dicFlag: false,
-              filterable: true,
-              props: {
-                label: "name",
-                value: "id"
-              },
-              rules: [{
-                required: true,
-                message: "请选择所属区域",
-                trigger: "blur"
-              }],
-              hide: true,
-              viewDisplay: false,
-            },
-            {
-              label: "所属车场",
-              prop: "parkingLotId",
-              type: "select",
-              search: true,
-              // overHidden: true,
-              // remote: true,
-              dicUrl: "/api/cyzh-estate/parkinglot/list?size=500&residentialId={{key}}",
-              props: {
-                label: 'parkName',
-                value: 'id'
-              },
-              dicFormatter: (res) => {
-                return res.data.records;
-              },
 
-              rules: [{
-                require: true,
-                message: "请选择所属车场",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "车主姓名",
-              prop: "personName",
-              search: true,
-              width: 150,
-              searchSpan: 4,
-              rules: [{
-                required: true,
-                message: "请输入车主姓名",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "车主电话",
-              prop: "personPhone",
-              search: true,
-              width: 200,
-              searchSpan: 4,
-              rules: [{
-                required: false,
-                message: "请输入车主电话",
-              },{
-                validator: validatePhone,
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "车辆性质",
-              prop: "properties",
-              hide:true,
-              type: "select",
-              dicUrl: "/api/blade-system/dict-biz/dictionary?code=car_properties",
-              props: {
-                label: "dictValue",
-                value: "dictKey",
-              },
-              dataType: "number",
-              rules: [{
-                required: false,
-                message: "请选择车辆性质",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "车辆型号",
-              prop: "model",
-              hide: true,
-              rules: [{
-                required: false,
-                message: "请输入车辆型号",
-                trigger: "blur"
-              }]
-            },
-            // {
-            //   label: "燃油类别",
-            //   prop: "fuelCategory",
-            //   hide: true,
-            //   type: "select",
-            //   dicUrl: "/api/blade-system/dict-biz/dictionary?code=fuel-category",
-            //   props: {
-            //     label: "dictValue",
-            //     value: "dictKey",
-            //   },
-            //   rules: [{
-            //     required: false,
-            //     message: "请输入燃油类别",
-            //     trigger: "blur"
-            //   }]
-            // },
-            {
-              label: "车身颜色",
-              prop: "color",
-              hide: true,
-              rules: [{
-                required: false,
-                message: "请输入车身颜色",
-                trigger: "blur"
-              }]
-            },{
-              label: "占用车位",
-              prop: "parkinglot",
-              type: "select",
-              hide: true,
-              dicData:[
-                {
-                  label:'占用',
-                  value: 1
-                },{
-                  label:'空闲',
-                  value: 0
-                }
-              ],
-              rules: [{
-                required: false,
-                message: "请选择是否占用车位",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "审核状态",
-              prop: "auditStatus",
-              type: "select",
-              slot: true,
-              dicData:[
-                {
-                  label: "审核通过",
-                  value: 1
-                },
-                {
-                  label: "审核不通过",
-                  value: -1
-                },
-                {
-                  label: "待审核",
-                  value: 0
-                }
-              ],
-              rules: [{
-                required: true,
-                message: "请选择审核状态",
-                trigger: "blur"
-              }],
-              addDisplay: false
-            },
-            {
-              label: "车辆照片",
-              prop: "carImg",
-              listType: 'picture-img',
-              type: "upload",
-              hide: true,
-              propsHttp: {
-                res: "data",
-                url: "link"
-              },
-              //加水印
-              // canvasOption: {
-              //   text: 'bladex',
-              //   ratio: 0.1
-              // },
-              action: "/api/blade-resource/oss/endpoint/put-file",
-              tip: "只能上传jpg/png图片，且不超过500kb",
-              rules: [{
-                required: false,
-                message: "请上传车辆照片",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "行驶证正面照",
-              prop: "vehicleDrivingLicense1",
-              listType: 'picture-img',
-              type: "upload",
-              labelWidth: 100,
-              hide: true,
-              propsHttp: {
-                res: "data",
-                url: "link"
-              },
-              //加水印
-              // canvasOption: {
-              //   text: 'bladex',
-              //   ratio: 0.1
-              // },
-              action: "/api/blade-resource/oss/endpoint/put-file",
-              tip: "只能上传jpg/png图片，且不超过500kb",
-              rules: [{
-                required: false,
-                message: "请上传行驶证正面照",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "行驶证反面照",
-              prop: "vehicleDrivingLicense2",
-              listType: 'picture-img',
-              type: "upload",
-              labelWidth: 100,
-              hide: true,
-              propsHttp: {
-                res: "data",
-                url: "link"
-              },
-              //加水印
-              // canvasOption: {
-              //   text: 'bladex',
-              //   ratio: 0.1
-              // },
-              action: "/api/blade-resource/oss/endpoint/put-file",
-              tip: "只能上传jpg/png图片，且不超过500kb",
-              rules: [{
-                required: false,
-                message: "请上传行驶证反面照",
-                trigger: "blur"
-              }],
-            }
-          ]
-        },
-        data: []
       };
-    },
-    computed: {
-      ...mapGetters(["permission"]),
-      permissionList() {
-        return {
-          addBtn: this.vaildData(this.permission.car_add, false),
-          viewBtn: this.vaildData(this.permission.car_view, false),
-          delBtn: this.vaildData(this.permission.car_delete, false),
-          editBtn: this.vaildData(this.permission.car_edit, false)
-        };
-      },
-      ids() {
-        let ids = [];
-        this.selectionList.forEach(ele => {
-          ids.push(ele.id);
-        });
-        return ids.join(",");
-      }
-    },
-    watch: {
-      "form.agencyId"() {
-        getAgencyList(1, 10, {id: this.form.agencyId}).then(res => {
-          this.form.agencyName = res.data.data.records[0].name;
-        })
-      },
-      "form.residentialId"() {
-        getResidentialList(1, 10, {id: this.form.residentialId}).then(res => {
-          this.form.residentialName = res.data.data.records[0].name;
-          console.log(JSON.stringify(this.form))
-        })
-      },
-      "form.parkingLotId"() {
-          console.log(JSON.stringify(this.form))
-      }
-    },
-    mounted() {
-      let tenantType = localStorage.getItem("tenantType");
-      const agencyColumn = this.findObject(this.option.column, "agencyId");
-      const residentialColumn = this.findObject(this.option.column, "residentialId");
-      const agencyNameColumn = this.findObject(this.option.column, "agencyName");
-      const residentialNameColumn = this.findObject(this.option.column, "residentialName");
-      if (tenantType == 1) { //园区
-        agencyColumn.label = "所属园区";
-        residentialColumn.label = "所属区域";
-        agencyNameColumn.label = "所属园区";
-        residentialNameColumn.label = "所属区域";
-      } else { //园区
-        agencyColumn.label = "所属园区";
-        residentialColumn.label = "所属区域";
-        agencyNameColumn.label = "所属园区";
-        residentialNameColumn.label = "所属区域";
-      }
-    },
-    methods: {
-      personClick(row) {
-        this.personId = row.personId;
-        // this.dialogOpen = true;
-      },
-      rowSave(row, done, loading) {
-        add(row).then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-          done();
-        }, error => {
-          loading();
-          window.console.log(error);
-        });
-      },
-      rowUpdate(row, index, done, loading) {
-        update(row).then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-          done();
-        }, error => {
-          loading();
-          console.log(error);
-        });
-      },
-      rowDel(row) {
-        this.$confirm("确定将选择数据删除?", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        })
-          .then(() => {
-            return remove(row.id);
-          })
-          .then(() => {
-            this.onLoad(this.page);
-            this.$message({
-              type: "success",
-              message: "操作成功!"
-            });
-          });
-      },
-      handleDelete() {
-        if (this.selectionList.length === 0) {
-          this.$message.warning("请选择至少一条数据");
-          return;
-        }
-        this.$confirm("确定将选择数据删除?", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        })
-          .then(() => {
-            return remove(this.ids);
-          })
-          .then(() => {
-            this.onLoad(this.page);
-            this.$message({
-              type: "success",
-              message: "操作成功!"
-            });
-            this.$refs.crud.toggleSelection();
-          });
-      },
-      beforeOpen(done, type) {
-        if (["edit", "view"].includes(type)) {
-          getDetail(this.form.id).then(res => {
-            this.form = res.data.data;
-          });
-        }
-        done();
-      },
-      searchReset() {
-        this.query = {};
-        this.onLoad(this.page);
-      },
-      searchChange(params, done) {
-        this.query = params;
-        this.page.currentPage = 1;
-        this.onLoad(this.page, params);
-        done();
-      },
-      selectionChange(list) {
-        this.selectionList = list;
-      },
-      selectionClear() {
-        this.selectionList = [];
-        this.$refs.crud.toggleSelection();
-      },
-      currentChange(currentPage){
-        this.page.currentPage = currentPage;
-      },
-      sizeChange(pageSize){
-        this.page.pageSize = pageSize;
-      },
-      refreshChange() {
-        this.onLoad(this.page, this.query);
-      },
-      onLoad(page, params = {}) {
-        this.loading = true;
-        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
-          const data = res.data.data;
-          this.page.total = data.total;
-          this.data = data.records;
-          this.loading = false;
-          this.selectionClear();
-        });
-      }
     }
   };
 </script>
 
-<style>
+<style lang="scss">
+  .page {
+    background-color: #F5F5F5;
+    height: 100%;
+    margin-bottom: 1.9rem;
+  }
+
+  .avue-main {
+    background-color: #F5F5F5 !important;
+  }
 </style>

src/views/parkingmng/parkingvehiclemng1.vue

@@ -0,0 +1,575 @@
+<template>
+  <basic-container>
+    <avue-crud :option="option"
+               :table-loading="loading"
+               :data="data"
+               :page="page"
+               :permission="permissionList"
+               :before-open="beforeOpen"
+               v-model="form"
+               ref="crud"
+               @row-update="rowUpdate"
+               @row-save="rowSave"
+               @row-del="rowDel"
+               @search-change="searchChange"
+               @search-reset="searchReset"
+               @selection-change="selectionChange"
+               @current-change="currentChange"
+               @size-change="sizeChange"
+               @refresh-change="refreshChange"
+               @on-load="onLoad">
+      <template slot="menuLeft">
+        <el-button type="danger"
+                   size="small"
+                   icon="el-icon-delete"
+                   plain
+                   v-if="permission.car_delete"
+                   @click="handleDelete">删 除
+        </el-button>
+        <cy-excel-import :flag="6" file-name="车辆信息导入模板" @success="onLoad(page)"></cy-excel-import>
+      </template>
+      <!--      <template slot="personId" slot-scope="scope">-->
+      <!--&lt;!&ndash;        <el-tag type="primary" @click="personClick(scope.row)">{{scope.row.$personId}}</el-tag>&ndash;&gt;-->
+      <!--        <el-tag type="primary">{{scope.row.$personId}}</el-tag>-->
+      <!--      </template>-->
+      <template slot="auditStatus" scope="{row}">
+        <el-tag v-if="row.auditStatus == 1" type="success">
+          审核通过
+        </el-tag>
+        <el-tag v-else-if="row.auditStatus == -1" type="info">
+          审核不通过
+        </el-tag>
+        <el-tag v-else type="danger">
+          待审核
+        </el-tag>
+      </template>
+    </avue-crud>
+    <el-dialog title="人员画像" :visible.sync="dialogOpen" :fullscreen="true" :modal-append-to-body="false" center>
+      <cy-person-file :personId="personId"></cy-person-file>
+    </el-dialog>
+  </basic-container>
+</template>
+
+<script>
+  import {getList, getDetail, add, update, remove} from "@/api/estate/car";
+  // import CyPersonFile from "../../components/file/cy-person-file";
+  import {mapGetters} from "vuex";
+  import {validateLicense, validatePhone} from "../../util/validator";
+  import {getList as getAgencyList} from "@/api/community/agency";
+  import {getList as getResidentialList} from "@/api/community/residential";
+  // import CyExcelImport from "../../components/excel/cy-excel-import";
+
+  export default {
+    // components: {
+    //   CyExcelImport,
+    //   CyPersonFile
+    // },
+    data() {
+      return {
+        form: {},
+        query: {},
+        loading: true,
+        page: {
+          pageSize: 10,
+          currentPage: 1,
+          total: 0
+        },
+        selectionList: [],
+        dialogOpen: false,
+        personId: '',
+        option: {
+          height:'auto',
+          calcHeight: 30,
+          tip: false,
+          searchShow: true,
+          searchMenuSpan: 6,
+          border: true,
+          index: true,
+          viewBtn: true,
+          selection: true,
+          dialogClickModal: false,
+          column: [
+            {
+              label: "车牌号",
+              prop: "number",
+              width: 200,
+              rules: [{
+                required: true,
+                message: "请输入车牌号",
+              },{
+                validator: validateLicense,
+                trigger: "blur"
+              }]
+            }, {
+              label: "车辆类型",
+              prop: "type",
+              type: "select",
+              width: 150,
+              dicUrl: "/api/blade-system/dict-biz/dictionary?code=car-type",
+              props: {
+                label: "dictValue",
+                value: "dictKey",
+              },
+              dataType: "number",
+              rules: [{
+                required: true,
+                message: "请输入车辆类型",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "所属园区",
+              prop: "agencyName",
+              editDisplay: false,
+              addDisplay: false,
+            },
+            {
+              label: "所属园区",
+              prop: "agencyId",
+              search: true,
+              searchFilterable: true,
+              filterable: true,
+              cascaderItem: ['residentialId'],
+              type: "select",
+              // remote: true,
+              dicUrl: "/api/cyzh-community/agency/list?size=9999",
+              dicFormatter:(res)=>{
+                return res.data.records;//返回字典的层级结构
+              },
+              props: {
+                label: "name",
+                value: "id"
+              },
+              rules: [{
+                required: true,
+                message: "请选择所属园区",
+                trigger: "blur"
+              }],
+              hide: true,
+              viewDisplay: false,
+            },
+            {
+              label: "所属区域",
+              prop: "residentialName",
+              editDisplay: false,
+              addDisplay: false
+            },
+            {
+              label: "所属区域",
+              prop: "residentialId",
+              type: "select",
+              search: true,
+              // dataType:'string',
+              cascaderItem: ["parkingLotId"],
+              dicUrl: "/api/cyzh-community/residential/list?agencyId={{key}}",
+              dicFormatter:(res)=>{
+                return res.data.records;//返回字典的层级结构
+              },
+              // dicFlag: false,
+              filterable: true,
+              props: {
+                label: "name",
+                value: "id"
+              },
+              rules: [{
+                required: true,
+                message: "请选择所属区域",
+                trigger: "blur"
+              }],
+              hide: true,
+              viewDisplay: false,
+            },
+            {
+              label: "所属车场",
+              prop: "parkingLotId",
+              type: "select",
+              search: true,
+              // overHidden: true,
+              // remote: true,
+              dicUrl: "/api/cyzh-estate/parkinglot/list?size=500&residentialId={{key}}",
+              props: {
+                label: 'parkName',
+                value: 'id'
+              },
+              dicFormatter: (res) => {
+                return res.data.records;
+              },
+
+              rules: [{
+                require: true,
+                message: "请选择所属车场",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "车主姓名",
+              prop: "personName",
+              search: true,
+              width: 150,
+              searchSpan: 4,
+              rules: [{
+                required: true,
+                message: "请输入车主姓名",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "车主电话",
+              prop: "personPhone",
+              search: true,
+              width: 200,
+              searchSpan: 4,
+              rules: [{
+                required: false,
+                message: "请输入车主电话",
+              },{
+                validator: validatePhone,
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "车辆性质",
+              prop: "properties",
+              hide:true,
+              type: "select",
+              dicUrl: "/api/blade-system/dict-biz/dictionary?code=car_properties",
+              props: {
+                label: "dictValue",
+                value: "dictKey",
+              },
+              dataType: "number",
+              rules: [{
+                required: false,
+                message: "请选择车辆性质",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "车辆型号",
+              prop: "model",
+              hide: true,
+              rules: [{
+                required: false,
+                message: "请输入车辆型号",
+                trigger: "blur"
+              }]
+            },
+            // {
+            //   label: "燃油类别",
+            //   prop: "fuelCategory",
+            //   hide: true,
+            //   type: "select",
+            //   dicUrl: "/api/blade-system/dict-biz/dictionary?code=fuel-category",
+            //   props: {
+            //     label: "dictValue",
+            //     value: "dictKey",
+            //   },
+            //   rules: [{
+            //     required: false,
+            //     message: "请输入燃油类别",
+            //     trigger: "blur"
+            //   }]
+            // },
+            {
+              label: "车身颜色",
+              prop: "color",
+              hide: true,
+              rules: [{
+                required: false,
+                message: "请输入车身颜色",
+                trigger: "blur"
+              }]
+            },{
+              label: "占用车位",
+              prop: "parkinglot",
+              type: "select",
+              hide: true,
+              dicData:[
+                {
+                  label:'占用',
+                  value: 1
+                },{
+                  label:'空闲',
+                  value: 0
+                }
+              ],
+              rules: [{
+                required: false,
+                message: "请选择是否占用车位",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "审核状态",
+              prop: "auditStatus",
+              type: "select",
+              slot: true,
+              dicData:[
+                {
+                  label: "审核通过",
+                  value: 1
+                },
+                {
+                  label: "审核不通过",
+                  value: -1
+                },
+                {
+                  label: "待审核",
+                  value: 0
+                }
+              ],
+              rules: [{
+                required: true,
+                message: "请选择审核状态",
+                trigger: "blur"
+              }],
+              addDisplay: false
+            },
+            {
+              label: "车辆照片",
+              prop: "carImg",
+              listType: 'picture-img',
+              type: "upload",
+              hide: true,
+              propsHttp: {
+                res: "data",
+                url: "link"
+              },
+              //加水印
+              // canvasOption: {
+              //   text: 'bladex',
+              //   ratio: 0.1
+              // },
+              action: "/api/blade-resource/oss/endpoint/put-file",
+              tip: "只能上传jpg/png图片，且不超过500kb",
+              rules: [{
+                required: false,
+                message: "请上传车辆照片",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "行驶证正面照",
+              prop: "vehicleDrivingLicense1",
+              listType: 'picture-img',
+              type: "upload",
+              labelWidth: 100,
+              hide: true,
+              propsHttp: {
+                res: "data",
+                url: "link"
+              },
+              //加水印
+              // canvasOption: {
+              //   text: 'bladex',
+              //   ratio: 0.1
+              // },
+              action: "/api/blade-resource/oss/endpoint/put-file",
+              tip: "只能上传jpg/png图片，且不超过500kb",
+              rules: [{
+                required: false,
+                message: "请上传行驶证正面照",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "行驶证反面照",
+              prop: "vehicleDrivingLicense2",
+              listType: 'picture-img',
+              type: "upload",
+              labelWidth: 100,
+              hide: true,
+              propsHttp: {
+                res: "data",
+                url: "link"
+              },
+              //加水印
+              // canvasOption: {
+              //   text: 'bladex',
+              //   ratio: 0.1
+              // },
+              action: "/api/blade-resource/oss/endpoint/put-file",
+              tip: "只能上传jpg/png图片，且不超过500kb",
+              rules: [{
+                required: false,
+                message: "请上传行驶证反面照",
+                trigger: "blur"
+              }],
+            }
+          ]
+        },
+        data: []
+      };
+    },
+    computed: {
+      ...mapGetters(["permission"]),
+      permissionList() {
+        return {
+          addBtn: this.vaildData(this.permission.car_add, false),
+          viewBtn: this.vaildData(this.permission.car_view, false),
+          delBtn: this.vaildData(this.permission.car_delete, false),
+          editBtn: this.vaildData(this.permission.car_edit, false)
+        };
+      },
+      ids() {
+        let ids = [];
+        this.selectionList.forEach(ele => {
+          ids.push(ele.id);
+        });
+        return ids.join(",");
+      }
+    },
+    watch: {
+      "form.agencyId"() {
+        getAgencyList(1, 10, {id: this.form.agencyId}).then(res => {
+          this.form.agencyName = res.data.data.records[0].name;
+        })
+      },
+      "form.residentialId"() {
+        getResidentialList(1, 10, {id: this.form.residentialId}).then(res => {
+          this.form.residentialName = res.data.data.records[0].name;
+          console.log(JSON.stringify(this.form))
+        })
+      },
+      "form.parkingLotId"() {
+          console.log(JSON.stringify(this.form))
+      }
+    },
+    mounted() {
+      let tenantType = localStorage.getItem("tenantType");
+      const agencyColumn = this.findObject(this.option.column, "agencyId");
+      const residentialColumn = this.findObject(this.option.column, "residentialId");
+      const agencyNameColumn = this.findObject(this.option.column, "agencyName");
+      const residentialNameColumn = this.findObject(this.option.column, "residentialName");
+      if (tenantType == 1) { //园区
+        agencyColumn.label = "所属园区";
+        residentialColumn.label = "所属区域";
+        agencyNameColumn.label = "所属园区";
+        residentialNameColumn.label = "所属区域";
+      } else { //园区
+        agencyColumn.label = "所属园区";
+        residentialColumn.label = "所属区域";
+        agencyNameColumn.label = "所属园区";
+        residentialNameColumn.label = "所属区域";
+      }
+    },
+    methods: {
+      personClick(row) {
+        this.personId = row.personId;
+        // this.dialogOpen = true;
+      },
+      rowSave(row, done, loading) {
+        add(row).then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          done();
+        }, error => {
+          loading();
+          window.console.log(error);
+        });
+      },
+      rowUpdate(row, index, done, loading) {
+        update(row).then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          done();
+        }, error => {
+          loading();
+          console.log(error);
+        });
+      },
+      rowDel(row) {
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return remove(row.id);
+          })
+          .then(() => {
+            this.onLoad(this.page);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+          });
+      },
+      handleDelete() {
+        if (this.selectionList.length === 0) {
+          this.$message.warning("请选择至少一条数据");
+          return;
+        }
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return remove(this.ids);
+          })
+          .then(() => {
+            this.onLoad(this.page);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+            this.$refs.crud.toggleSelection();
+          });
+      },
+      beforeOpen(done, type) {
+        if (["edit", "view"].includes(type)) {
+          getDetail(this.form.id).then(res => {
+            this.form = res.data.data;
+          });
+        }
+        done();
+      },
+      searchReset() {
+        this.query = {};
+        this.onLoad(this.page);
+      },
+      searchChange(params, done) {
+        this.query = params;
+        this.page.currentPage = 1;
+        this.onLoad(this.page, params);
+        done();
+      },
+      selectionChange(list) {
+        this.selectionList = list;
+      },
+      selectionClear() {
+        this.selectionList = [];
+        this.$refs.crud.toggleSelection();
+      },
+      currentChange(currentPage){
+        this.page.currentPage = currentPage;
+      },
+      sizeChange(pageSize){
+        this.page.pageSize = pageSize;
+      },
+      refreshChange() {
+        this.onLoad(this.page, this.query);
+      },
+      onLoad(page, params = {}) {
+        this.loading = true;
+        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+          const data = res.data.data;
+          this.page.total = data.total;
+          this.data = data.records;
+          this.loading = false;
+          this.selectionClear();
+        });
+      }
+    }
+  };
+</script>
+
+<style>
+</style>