lis8.0-vue3/src/views/liswork/components/resultGraph/index.vue

<template>
  <div class="result_box">
    <div v-for="item in resultImgs" class="img_box">
      <el-image class="img_item" class-prefix="el-image" :src="item.picbase64" :max-scale="7" :min-scale="0.2"
        :preview-src-list="resultImgs.map((v: any) => { return v.picbase64 })" show-progress :initial-index="4" />
      <div class="bz_text">{{ item.bz }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, toRefs, onMounted, computed } from 'vue'
import { resultgraph } from "@/api/liswork/work/LisWork";


const props = defineProps({
  // 主键
  queryParams: {
    type: Object,
    default: {}
  },


})

// 解构 props
const { queryParams } = toRefs(props);

const resultImgs: any = ref([])

const getResultGraph = () => {
  resultgraph(queryParams.value).then((res: any) => {
    if (res.code == 0) {
      resultImgs.value = res.data?.map((item: any) => {
        return {
          ...item,
          picbase64: "data:image/png;base64," + item.picbase64,
        }
      })
    }
  })
};

watch(() => props.queryParams, (newValue) => {
  getResultGraph()
}, {
  immediate: true,
  deep: true
})
</script>

<style scoped lang="scss">
.result_box {
  height: 82vh;
  overflow-y: auto;
  background-color: #fffbf0;
  padding: 5px;

  .img_box {
    display: flex;
    margin-bottom: 10px;

    .img_item {
      width: 200px;
      height: 150px;
    }

    .bz_text {
      margin-left: 20px;
      color: #0000ff;
      font-weight: 600;
    }
  }

}
</style>