1. 场景报告模块编写（暂存）

riku

2024-10-30 d4e7c11e06b643c9353444c839cec40c25945219

 src/views/fysp/check/components/ArbitraryPhoto.vue

@@ -1,49 +1,50 @@
<template>
  <div class="main">
    <div class="filters" v-if="false">
      <el-select
        v-for="(key_select, index_select) of filters.keys()"
        :placeholder="key_select.text"
    <el-row justify="end" class="btns" v-if="!readonly">
      <el-text size="small" type="info" class="m-r-8"
        >最多选择{{ maxSelect }}张图片</el-text
      >
        <el-option
          v-for="(key_option, index_option) in filters.get(key_select.key)"
          :key="key_option.key"
          :value="key_option.value"
          :label="key_option.label"
        >
        </el-option>
      </el-select>
    </div>
    <div class="btns" v-if="!readonly">
      <el-button size="small" type="primary" @click="sendSelectedImg(true)">确定</el-button>
      <el-button size="small" type="primary" @click="sendSelectedImg(false)">取消</el-button>
    </div>
      <el-button
        size="small"
        type="primary"
        @click="sendSelectedImg(true)"
        :disabled="selectedImgUrlList.length == 0"
        >确定</el-button
      >
      <el-button size="small" type="primary" @click="sendSelectedImg(false)"
        >取消</el-button
      >
    </el-row>

    <div class="center">
      <el-descriptions>
      <!-- <el-descriptions>
        <el-descriptions-item label="总数">
          <span>{{ this.imgUrlList.length }}</span>
        </el-descriptions-item>
      </el-descriptions>
      </el-descriptions> -->
      <el-tabs v-model="activeId" type="card">
        <el-tab-pane
          v-for="item in typeList"
          :label="item.businesstype"
          :key="item.businesstypeid"
          :label="
            item.businesstype + ' (' + typeImgMap.get(activeId).length + ')'
          "
          :name="item.businesstypeid"
        >
        </el-tab-pane>
      </el-tabs>
      <el-empty v-if="isEmpty" description="暂无记录" />
      <div class="imgs">
      <el-scrollbar class="imgs">
        <el-image
          v-for="(img, i) in typeImgMap.get(activeId)"
          :key="i"
          :class="[Boolean(img.isSelect) ? 'selected' : 'noActive', 'image']"
          fit="cover"
          :src="img.url"
          lazy
          @click="onSelect(img, i)"
        />
      </div>
      </el-scrollbar>
    </div>
  </div>
</template>
@@ -70,6 +71,11 @@
    defaultFile: {
      type: Array,
      default: () => []
    },
    // 图片可选数量，当传入数字时，代表图片数量
    maxSelect: {
      type: Number,
      default: 3
    }
  },
  data() {
@@ -95,10 +101,19 @@
        // { businesstypeid: 60, businesstype: '扩展类十' }
      ],
      typeImgMap: new Map(),
      imgUrlList: []
      imgUrlList: [],
      selectedImgUrlList: []
    };
  },
  watch: {
    subtask: {
      handler(nV, oV) {
        if (nV != oV && nV) {
          this.getAllImgList();
        }
      },
      immediate: true
    },
    defaultFile: {
      handler(newFileList, oldFileList) {
        if (this.isClose) {
@@ -128,12 +143,9 @@
    }
  },
  mounted() {
    if (this.defaultFile == undefined || this.defaultFile == null) {
      this.defaultFile = [];
    }
    if (this.subtask) {
      this.getAllImgList();
    }
    // if (this.subtask) {
    //   this.getAllImgList();
    // }
  },
  methods: {
    // 初始化刚开始选中的标签
@@ -142,11 +154,13 @@
        this.activeId = this.typeList[0].businesstypeid;
      }
    },
    async getAllImgList() {
    getAllImgList() {
      // for(var k of this.typeImgMap.keys()) {
      //     this.typeImgMap.set(k, [])
      // }
      await mediafileApi.getRoutineByStGuid(this.subtask.stGuid).then((res) => {
      this.typeImgMap.clear();
      this.typeList = [];
      mediafileApi.getRoutineByStGuid(this.subtask.stGuid).then((res) => {
        this.isEmpty = false;
        let data = res.data;
        if (data.length == 0) {
@@ -182,7 +196,6 @@
          this.imgUrlList.push(e);
          // TODO imgUrl全局配置
          e.url = $fysp.imgUrl + e.extension1 + e.guid + '.jpg';
          // e.url = "http://47.100.191.150:9005/images/" + e.extension1 + e.guid + '.jpg'
          e.isSelect = false;
        }
        this.initSelectedTab();
@@ -220,24 +233,35 @@
      });
    },
    onSelect(img, i) {
      // if (i == 2 && !this.isAll) {
      //   this.getAllImgList();
      //   this.isAll = true;
      // } else {
      //   if (this.readonly) {
      //     return;
      //   }
      //   img.isSelect = !Boolean(img.isSelect);
      // }

      if (this.readonly) {
        return;
      }
      img.isSelect = !Boolean(img.isSelect);
      const index = this.selectedImgUrlList.indexOf(img);
      if (index == -1) {
        if (this.maxSelect == 1) {
          img.isSelect = true;
          this.selectedImgUrlList.push(img);
          if (this.selectedImgUrlList.length > 1) {
            this.selectedImgUrlList.splice(0, 1).forEach((e) => {
              e.isSelect = false;
            });
          }
        } else if (this.maxSelect > 1) {
          if (this.selectedImgUrlList.length < this.maxSelect) {
            img.isSelect = true;
            this.selectedImgUrlList.push(img);
          }
        }
      } else {
        this.selectedImgUrlList.splice(index, 1);
        img.isSelect = false;
      }

      // img.isSelect = !img.isSelect;
    },
    sendSelectedImg(isOk) {
      let result = [];
      if (!Boolean(isOk)) {
      if (!isOk) {
        this.$emit('selectByAnyPhonoEvent', result);
      }
      for (const item of this.imgUrlList) {
@@ -283,7 +307,7 @@
} */

.imgs {
  height: 650px;
  height: 50vh;
  width: 90%;
  min-height: 100px !important;
  /* border-style:solid;
@@ -298,6 +322,7 @@
}

.image {
  margin: 5px;
  height: 210px;
  width: 200px;
  border-radius: 4px;
@@ -311,10 +336,10 @@
}

.selected {
  padding: 5px;
  margin: 3px;
  color: #4abe84;
  box-shadow: 0 2px 7px 0 rgba(85, 110, 97, 0.35);
  border: 1px solid rgba(74, 190, 132, 1);
  border: 2px solid rgba(74, 190, 132, 1);
}

.selected:before {
@@ -341,7 +366,7 @@
}

.noActive {
  padding: 5px;
  /* padding: 5px; */
}

.blurry {