yjxp-web/src/views/worker/rescueManagement/rescueGatherResultList.vue

<template>
    <div class="container">
        <div style="padding-top: 16px;display:flex;flex-direction: row;justify-content: space-between;">
            <div class="van-doc-block__title">{{get_task_title(type)}}</div>
        </div>

        <div
          v-for="(item, index) in resultData"
          :key="item.id"
          class="event-list-item"
        >
          <div class="item-content">
            <div class="item-data">
              <div class="item-left">
                <i class="icon4" />
                <div class="item-data-label">{{ get_point_label(index)}}：</div>
              </div>
              <div class="item-data-value">{{ item.point_name }}</div>
            </div>
            <div class="item-data">
              <div class="item-left">
                <i class="icon4" />
                <div class="item-data-label">采集结果：</div>
              </div>
              <div class="item-data-value">{{ item.result }}</div>
            </div>
            <div class="item-data">
              <div class="item-left">
                <i class="icon4" />
                <div class="item-data-label">备注信息：</div>
              </div>
              <div class="item-data-value">{{ item.remark }}</div>
            </div>
            <div class="item-data">
              <div class="item-left">
                <i class="icon4" />
                <div class="item-data-label">现场照片：</div>
              </div>
              <div class="item-data-image">
                <img
                    v-for="(file, index2) in item.fileList"
                    :key="file.id"
                    class="image"
                    :src="get_img_url(file.url)"
                  ></img>
              </div>
            </div>
          </div>
        </div>
    </div>
</template>


<script lang="ts" setup>
import {reactive, ref, toRefs, onMounted} from 'vue';
import {useRoute, useRouter} from "vue-router";
import {listTaskResult } from "@/api/rescueManagement";
import { showToast } from 'vant';

const route = useRoute();
const router = useRouter();
const id = ref('');
const type = ref('');
const resultData = ref([]);

// 采集业务选项
const businessOptions = [
  { text: "全部", value: "" },
  { text: "庇护场所采集任务", value: "0" },
  { text: "救援队伍采集任务", value: "1" },
  { text: "救援设备采集任务", value: "2" }
];

const data = reactive({
    queryParams: {
      page: 1,
      pageSize: 100
    }
});
const { queryParams } = toRefs(data);

const get_point_label = (index) => {
  return "采集点" + (index+1);
}

const get_task_title = (business: String) => {
    return businessOptions.find(item => item.value == business).text
}

const getList = () => {
    listTaskResult(id.value, queryParams.value)
      .then(res => {
        resultData.value = res.data || [];
    });
};

const baseUrl = import.meta.env.VITE_BASE_API;
const downLoadApi = import.meta.env.VITE_BASE_DOWNLOAD_API;

const get_img_url = (url) => {
  return baseUrl + downLoadApi + url;
}

onMounted(() => {
  id.value = route.query.id as string;
  type.value = route.query.type as string;
  getList();
})
</script>


<style lang="scss" scoped>
.van-doc-block__title {
  color: var(--van-doc-text-color-4);
  margin: 0px;
  padding: 0 6vmin;
  font-size: 4.6vmin;
  font-weight: 600;
  line-height: 6.0vmin;
}

.event-list-item {
    position: relative;
    margin: 16px 16px 0;
    background: #ffffff;
    border-radius: 4px;
    border: 0.5px solid #eaedf7;
    box-shadow: 0 0 4px 0 #4554661a;
    &:first-child {
      margin-top: 0px;
    }
    .item-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 46px;
      background-image: linear-gradient(180deg, #f3f7fd 0%, #ffffff 100%);
      padding: 0 12px;
      .item-title-text {
        font-size: 16px;
        color: #414f64;
        font-weight: 600;
      }
  
      .item-title-control {
        display: inline-flex;
        justify-content: center;
        align-items: center;
      }
      .van-button {
        width: 73px;
        height: 24px;
        padding: 0;
      }
    }
    .item-content {
      padding: 0 12px 12px;
    }
    .item-data {
      font-size: 14px;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: start;
      line-height: 26px;
      .item-left {
        display: flex;
        align-items: center;
        flex-shrink: 0;
      }
      .item-data-label {
        flex-shrink: 0;
        color: #414f64;
      }
  
      .item-data-value {
        color: #414f64;
      }

      .item-data-image {
        display:flex;
        flex-direction: row; 

        .image {
          height:var(--van-uploader-size);;
          width:var(--van-uploader-size);;
        }
      }
    }
  }
  .icon1 {
    width: 17px;
    height: 16px;
    background: url("@/assets/images/event/icon1.png") no-repeat;
    background-size: 100% 100%;
    margin-right: 7px;
  }
  .icon2 {
    width: 17px;
    height: 16px;
    background: url("@/assets/images/event/icon2.png") no-repeat;
    background-size: 100% 100%;
    margin-right: 7px;
  }
  .icon3 {
    width: 17px;
    height: 16px;
    background: url("@/assets/images/event/icon3.png") no-repeat;
    background-size: 100% 100%;
    margin-right: 7px;
  }
  .icon4 {
    width: 17px;
    height: 16px;
    background: url("@/assets/images/event/icon4.png") no-repeat;
    background-size: 100% 100%;
    margin-right: 7px;
  }
</style>