sl-sfy-safety/src/views/page-config/PageCameraList.vue

<template>
  <div class="scene-layout">
    <header class="scene-layout__header">
      <div class="header__btn" @click="router.back">
        <img :src="rollback" />
        <span>返回</span>
      </div>
    </header>
    <main class="scene-layout__main">
      <section v-if="length > 0" class="main__layout">
        <el-card
          v-for="company in companyList"
          :key="company.id"
          shadow="hover"
          class="layout-cards"
        >
          <div class="layout-card" @click="handleClickCompany(company.id, company.name)">
            <div v-if="company.layout">
              <MapContainerSmall
                ref="mapContainerRef"
                :bg-image-url="(company.layout as any).bgInfo.img"
                :show-shops="(company.layout as any).shopList"
                class="content-pic"
              />
            </div>

            <div v-else>
              <img :src="noLayout" />
              <span>请添加场景布局</span>
            </div>
          </div>
          <template #footer>
            <span class="footer--default">{{ company.name }}</span>
            <div class="icons">
              <el-image
                v-if="company.layout"
                :src="preview"
                :preview-src-list="[company.layout]"
                hide-on-click-modal
                fit="cover"
              />

              <img :src="edit" @click="handleClickCompany(company.id, company.name)" />
            </div>
          </template>
        </el-card>
      </section>
      <section class="main__empty" v-else>
        <img :src="empty" />
        <span>
          目前无内容，
          <router-link to="/scene/workshop">请先添加公司</router-link>
        </span>
      </section>
    </main>
  </div>
</template>

<script lang="ts" setup>
  import rollback from '@/assets/rollback.png';
  import empty from '@/assets/images/table/table-empty.png';
  import noLayout from '@/assets/images/page-config/no-layout.png';
  import preview from '@/assets/images/table/table-preview.png';
  import edit from '@/assets/images/table/table-edit.png';
  import router from '@/router';
  import { CompanyInfoList } from '@/types/scene-layout/type';
  import { ViewType } from '@/types/page-config/type';
  import {
    getCompanyListApi,
    getPcCompanyLayoutListApi,
    getMobileCompanyLayoutList,
  } from '@/api/scene/scene';
  import { computed, onMounted, ref } from 'vue';
  import MapContainerSmall from '@/views/page-config/component/mapContainer/MapContainerSmall.vue';
  const companyList = ref<CompanyInfoList[]>([]);
  const length = computed(() => {
    return companyList.value.length;
  });

  const viewType = ref<number>();

  const handleClickCompany = (companyId, companyName) => {
    router.push({
      path: '/layout/scene-config',
      query: { companyId, companyName, viewType: viewType.value },
    });
  };

  onMounted(async () => {
    viewType.value = Number(router.currentRoute.value.query.viewType);
    companyList.value = await getCompanyListApi();
    const companyIDList = companyList.value.map((x) => x.id);

    const platformApiMap = {
      [ViewType.companyHomepage_PC]: getPcCompanyLayoutListApi,
      [ViewType.companyHomepage_phone]: getMobileCompanyLayoutList,
    };

    platformApiMap[viewType.value]({ companyIds: companyIDList }).then((res) => {
      res.map((companyWithLayout) => {
        companyList.value.find((company) => company.id === companyWithLayout.id)!.layout =
          JSON.parse(companyWithLayout.layout);
      });
    });
  });
</script>

<style lang="scss" scoped>
  .footer--default {
    opacity: 0.45;
  }

  .scene-layout {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - 64px);

    &__header {
      display: flex;
      align-items: center;
      width: inherit;
      height: 54px;
      padding-left: 23px;
      background: #ffffff;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12);

      .header__btn {
        display: flex;
        gap: 10px;
        cursor: pointer;
      }

      img {
        width: 14px;
        height: 14px;
      }

      span {
        line-height: 14px;

        &:hover {
          text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.12);
        }
      }
    }

    &__main {
      margin-top: 12px;
      width: inherit;
      height: calc(100vh - 64px - 54px - 12px);
      background: #ffffff;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12);
      border-radius: 6px;
    }

    .main__layout {
      display: flex;
      gap: 25px;
      flex-wrap: wrap;
      align-content: flex-start;
      width: inherit;
      height: inherit;
      padding: 22px 24px 22px 24px;
    }

    .layout-cards {
      width: 216px;
      height: 190px;

      .layout-card div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
      }
    }

    :deep(.el-card__body) {
      width: inherit;
      height: 145px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0;
      background: #f5f5f5;
      cursor: pointer;
    }

    :deep(.el-card__footer) {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: inherit;
      height: 45px;
      padding: 0 12px 0 12px;

      .icons {
        display: flex;
        gap: 10px;

        img,
        el-image {
          cursor: pointer;
          opacity: 0.4;
          transition: opacity 0.5s ease-in-out;

          &:hover {
            opacity: 1;
          }
        }
      }
    }

    .main__empty {
      display: flex;
      flex-direction: column;
      gap: 2px;
      justify-content: center;
      align-items: center;
      width: inherit;
      height: inherit;
    }
  }
</style>