irc_web/src/views/trials/trials-panel/reading/none-dicoms/index.vue

<template>
  <div v-loading="loading" class="reading-viewer-container">
    <!-- 访视阅片 -->
    <visit-review v-if="taskInfo && taskInfo.ReadingCategory === 1" />
    <!-- 全局阅片 -->
    <global-review v-else-if="taskInfo && taskInfo.ReadingCategory === 2" :trial-id="trialId"
      :subject-id="taskInfo.SubjectId" :visit-task-id="taskInfo.VisitTaskId"
      :reading-category="taskInfo.ReadingCategory" :subject-code="taskInfo.SubjectCode"
      :task-blind-name="taskInfo.TaskBlindName" :is-reading-show-subject-info="taskInfo.IsReadingShowSubjectInfo"
      :is-reading-show-previous-results="taskInfo.IsReadingShowPreviousResults"
      :is-exists-clinical-data="taskInfo.IsExistsClinicalData"
      :imageToolType="2"
    />
    <!-- 裁判阅片 -->
    <ad-review v-else-if="taskInfo && taskInfo.ReadingCategory === 4" :trial-id="trialId"
      :subject-id="taskInfo.SubjectId" :visit-task-id="taskInfo.VisitTaskId"
      :reading-category="taskInfo.ReadingCategory" :subject-code="taskInfo.SubjectCode"
      :task-blind-name="taskInfo.TaskBlindName" :is-reading-show-subject-info="taskInfo.IsReadingShowSubjectInfo"
      :is-reading-show-previous-results="taskInfo.IsReadingShowPreviousResults"
      :is-exists-clinical-data="taskInfo.IsExistsClinicalData"
      :imageToolType="2"
    />
    <!-- 肿瘤学阅片 -->
    <!-- <oncology-review v-else-if="taskInfo && taskInfo.ReadingCategory=== 5" /> -->
    <el-dialog :visible.sync="clinicalDataVisible"
      :custom-class="isClinicalDataFullscreen ? 'full-dialog-container' : 'dialog-container'" :show-close="false"
      :close-on-click-modal="false" :fullscreen="isClinicalDataFullscreen">
      <span slot="title" class="dialog-footer">
        <!-- 当前阅片任务存在临床数据，请查看。若已查看，请点击“确认” -->
        <span v-if="!closeCDVisible">{{ $t('trials:reading:dagTitle:msg1') }}</span>
        <div style="position: absolute;right: 20px;top: 10px;">
          <svg-icon :icon-class="isClinicalDataFullscreen ? 'exit-fullscreen' : 'fullscreen'"
            style="cursor: pointer;font-size: 20px;" @click="isClinicalDataFullscreen = !isClinicalDataFullscreen" />
          <svg-icon v-if="closeCDVisible" icon-class="dClose" style="cursor: pointer;font-size: 25px;margin-left: 10px;"
            @click="clinicalDataVisible = false" />
        </div>
      </span>
      <div style="height: 100%;margin:0;display: flex;flex-direction: column;">
        <clinical-data v-if="clinicalDataVisible" style="flex: 1" :trial-id="trialId" :subject-id="taskInfo.SubjectId"
          :visit-task-id="cdVisitTaskId" :is-reading-show-subject-info="taskInfo.IsReadingShowSubjectInfo" />
        <div v-if="!closeCDVisible" style="text-align:right">
          <el-button type="primary" @click="handleConfirmCD">{{ $t('trials:reading:button:confirm') }}</el-button>
        </div>
      </div>

    </el-dialog>
  </div>
</template>
<script>
import { getNextTask, readClinicalData } from '@/api/trials'
import store from '@/store'
import { changeURLStatic } from '@/utils/history.js'
import VisitReview from '@/views/trials/trials-panel/reading/visit-review'
import GlobalReview from '@/views/trials/trials-panel/reading/global-review'
import AdReview from '@/views/trials/trials-panel/reading/ad-review'
// import OncologyReview from '@/views/trials/trials-panel/reading/oncology-review'
import ClinicalData from '@/views/trials/trials-panel/reading/clinical-data'
export default {
  name: 'ReadingViewer',
  components: {
    VisitReview,
    GlobalReview,
    AdReview,
    // OncologyReview
    ClinicalData
  },
  data() {
    return {
      taskInfo: null,
      trialId: '',
      loading: false,
      clinicalDataVisible: false,
      isClinicalDataFullscreen: false,
      closeCDVisible: false,
      cdVisitTaskId: ''
    }
  },
  mounted() {
    this.trialId = this.$route.query.trialId
    if (this.$router.currentRoute.query.TokenKey) {
      store.dispatch('user/setToken', this.$router.currentRoute.query.TokenKey)
      changeURLStatic('TokenKey', '')
    }
    this.getTaskInfo()
  },
  methods: {
    async getTaskInfo() {
      this.loading = true
      try {
        const params = {
          subjectId: this.$route.query.subjectId,
          trialId: this.$route.query.trialId,
          subjectCode: this.$route.query.subjectCode,
          visitTaskId: this.$route.query.visitTaskId,
          trialReadingCriterionId: this.$route.query.TrialReadingCriterionId
        }
        const res = await getNextTask(params)
        this.taskInfo = res.Result
        localStorage.setItem('taskInfo', JSON.stringify(res.Result))
        sessionStorage.setItem('taskInfo', JSON.stringify(res.Result))
        localStorage.setItem('digitPlaces', JSON.stringify(res.Result.DigitPlaces))
        localStorage.setItem('subjectCode', res.Result.SubjectCode)
        this.loading = false
        this.$nextTick(() => {
          if (this.taskInfo.IsExistsClinicalData && this.taskInfo.IsNeedReadClinicalData && !this.taskInfo.IsReadClinicalData) {
            this.isClinicalDataFullscreen = false
            this.clinicalDataVisible = true
            this.cdVisitTaskId = this.taskInfo.VisitTaskId
          }
        })
      } catch (e) {
        console.log(e)
        store.dispatch('reading/setCurrentReadingTaskState', 2)
        this.loading = false
      }
    },
    async handleConfirmCD() {
      this.loading = true
      var visitTaskId = this.taskInfo.VisitTaskId
      try {
        await readClinicalData({ visitTaskId })
        this.loading = false
        this.clinicalDataVisible = false
        // this.closeCDVisible = true
      } catch (e) {
        this.loading = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.reading-viewer-container {
  width: 100%;
  height: 100%;

  ::v-deep .dialog-container {
    margin-top: 50px !important;
    width: 75%;
    height: 80%;
  }

  ::v-deep .el-dialog__body {
    padding: 10px;
    height: calc(100% - 70px);
  }

  .el-dialog__header {
    position: relative;
  }

  .full-dialog-container {
    ::v-deep .is-fullscreen .el-dialog__body {
      height: calc(100% - 70px);
    }
  }
}
</style>