YZProjectCloud/yanzhu-bigscreen/src/views/check/projectCheckedDetailDialog.vue

<template>
  <MyDialog
    v-if="show"
    v-model="show"
    :width="dlgWidth"
    :key="dpi"
    :height="dlgHeight"
    class="project-checked-detail-dialog"
  >
    <template slot="title">举牌验收详情</template>
    <div class="detail-content scroll">
      <div class="data-row">
        <div class="data-label">验收时间:</div>
        <div class="data-content">{{ row.checkingDate }}</div>
      </div>
      <div class="data-row">
        <div class="data-label">验收结果:</div>
        <div class="data-content">
          <span :class="'check-state check-state-' + row.checkResultColor">{{
            row.checkResultName
          }}</span>
        </div>
      </div>

      <div class="data-row">
        <div class="data-label">验收图片:</div>
        <div class="data-content data-images">
          <div class="data-img" v-for="(it, index) in row.images" :key="index">
            <el-image :src="it" :preview-src-list="row.images" fit="cover" />
          </div>
        </div>
      </div>

      <div class="data-row">
        <div class="data-label">工序部位:</div>
        <div class="data-content">{{ row.workingPosition }}</div>
      </div>
      <div class="data-row">
        <div class="data-label">验收描述:</div>
        <div class="data-content">{{ row.intro }}</div>
      </div>
      <div class="data-row">
        <div class="data-label">班组长:</div>
        <div class="data-content">
          {{ row.groupDeptUserName }}({{ row.groupDeptUser }})
        </div>
      </div>
      <div class="data-row">
        <div class="data-label">技术员:</div>
        <div class="data-content">
          {{ row.technicianUserName }}({{ row.technicianUserName }})
        </div>
      </div>

      <div class="data-row">
        <div class="data-label">监理专员:</div>
        <div class="data-content">
          {{ row.superviseUserName }}({{ row.superviseUserName }})
        </div>
      </div>

      <div class="data-row">
        <div class="data-label">三方验收照:</div>
        <div class="data-content check-images">
          <div
            class="data-img"
            v-for="(it, index) in row.checkImages"
            :key="index"
          >
            <el-image
              :src="it"
              :preview-src-list="row.checkImages"
              fit="cover"
            />
          </div>
        </div>
      </div>
    </div>
  </MyDialog>
</template>

<script>
export default {
  data() {
    return {
      dpi: "",
      loading: false,
      show: false,
      dlgWidth: "960px",
      dlgHeight: "650px",
      row: null,
    };
  },

  methods: {
    showDialog(data) {
      this.dpi = this.$dpi();
      window.addEventListener("resize", () => {
        if (this.dpi != this.$dpi()) {
          this.dpi = this.$dpi();
          this.resize();
        }
      });
      this.row = data;
      this.show = true;
      this.resize();
    },
    resize() {
      let is1K = this.$dpi() == "1K";
      let is2K = this.$dpi() == "2K";
      this.dlgWidth = is1K ? "960px" : is2K ? "1200px" : "1600px";
      this.dlgHeight = is1K ? "650px" : is2K ? "800px" : "960px";
    },
  },
};
</script>

<style lang="less">
.project-checked-detail-dialog {
  .popup-project-introduction-min {
    .detail-content {
      height: 500px;
      overflow-y: auto;

      .data-row {
        display: flex;
        color: #3da2ff;
        line-height: 30px;

        .data-label {
          min-width: 120px;
          text-align: right;
          color: #32e1e4;
          padding-right: 10px;
        }

        .data-images,
        .check-images {
          width: 100%;

          .data-img {
            margin-right: 1%;
            width: 32%;
            display: inline-block;
          }
        }

        .check-state {
          display: inline-block;
          line-height: 20px;
          padding: 2px 4px;
          border-radius: 4px;

          &.check-state-1 {
            color: #09f509;
            background: #01b24954;
          }

          &.check-state-2 {
            color: #192c64;
            background: #6abee9;
          }
        }
      }
    }

    @media (min-width: 1921px) and (max-width: 2560px) {
      .detail-content {
        height: 720px;
        .data-row {
          line-height: 36px;
          font-size: 16px;
          .data-label {
            min-width: 140px;
          }
          .check-state {
            line-height: 30px;
            padding: 0px 10px;
            border-radius: 6px;
          }
        }
      }
    }

    @media (min-width: 2561px) {
      .detail-content {
        height: 870px;
        .data-row {
          line-height: 60px;
          font-size: 24px;
          .data-label {
            min-width: 160px;
          }
          .check-state {
            line-height: 60px;
            padding: 0px 10px;
            border-radius: 10px;
          }
        }
      }
    }
  }
}
</style>