cyzh-park/src/views/dashboard/parkingmng/comps/parking-usage.vue

<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 55" :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 30" :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>