traffic-laser/src/views/roads/index.vue

<template>
  <MainPanel>
    <template v-slot:header>
      现场图管理（{{sortPhotos.length}}）
    </template>

    <div class="photos-layout">
      <div class="photos">
        <div v-for="photo in sortPhotos" :key="photo.id" class="photo" @click="active = photo">
          <img :src="getStaticFile(photo.photoUrl)"  />
          <p>{{ photo.title || '默认标题' }}</p>
        </div>
      </div>
    </div>
  </MainPanel>

  <FillSlide :data="sortPhotos" v-model:active="active" @quit="active = null" v-if="active">
    <template v-slot:header>
      <div class="btns">
        <ui-button width="100px" @click="gotoDraw()">修改</ui-button>
      </div>
    </template>
    <template v-slot:foot>
      <div class="foot">
        <ui-icon type="close" @click="delPhoto" ctrl />
      </div>
    </template>
  </FillSlide>
</template>

<script setup lang="ts">
import MainPanel from '@/components/main-panel/index.vue'
import FillSlide from '@/components/fill-slide/index.vue'
import {roadPhotos, RoadPhoto} from '@/store/roadPhotos'
import {getStaticFile} from "@/dbo/main";
import UiIcon from "@/components/base/components/icon/index.vue";
import {router, writeRouteName} from '@/router'
import {computed, ref} from "vue";
import {Mode} from '@/views/graphic/menus'
import UiButton from "@/components/base/components/button/index.vue";

const sortPhotos = computed(() => roadPhotos.value.reverse())
const active = ref<RoadPhoto>()
const delPhoto = () => {
  const index = roadPhotos.value.indexOf(active.value)
  if (~index) {
    roadPhotos.value.splice(index, 1)
  }
}

const gotoDraw = () => {
  router.push({
    name: writeRouteName.graphic,
    params: {mode: Mode.Road, id: active.value.id, action: 'update'}
  })
}

</script>

<style scoped lang="scss">
.photos-layout {
  position: absolute;
  top: calc(var(--header-top) + var(--editor-head-height));
  left: 0;
  right: 0;
  bottom: 0;
}
.photos {
  display: grid;
  grid-gap: 10px;
  padding: 10px;
  //grid-template-rows: auto;
  grid-template-columns: repeat(5, 1fr);
}
.photo img {
  width: 100%;
}

.photo p {
  color: #000;
}


.btns {
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: center;
}

.foot {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  height: 100%;
}
</style>