xiangan_pc/src/components/360View/special/index.vue

<template>
  <div class="specialBox">
    <div class="examineBox">
      <i class="el-icon-refresh refresh" @click="getSpecialItem"></i>
      <el-table
        :data="tableData"
        v-loading="loading"
        @row-click="handleData"
        style="width: 100%;margin-top: 16px"
      >
        <el-table-column
          prop="examTime"
          label="时间"
          align="center"
          width="165"
        />
        <el-table-column
          prop="examineItem"
          label="检查项目"
          align="center"
          width="195"
        />
        <el-table-column
          prop="name"
          label="检查报告"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click.native.stop="handleRecord(scope.row)">
              当次报告
            </el-button>
            <el-button type="text" size="small" @click.native.stop="handleRecord(scope.row)">
              所有报告
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="examineData">
      <i class="el-icon-refresh refresh-r" @click="getItemData"></i>
      <div style="display: flex;justify-content: space-between">
        <span style="font-size: 16px;font-weight: 500;color: rgba(0, 0, 0, 0.88);margin-top: 4px">提取数据</span>
        <div v-if="!onlyRead" size="small" style="display:inline-block;margin-left:10px;width: 32px;height: 32px;line-height:32px;text-align:center;background-color: #1e79ff;border-radius: 4px;vertical-align: middle" @click="addDataList">
          <img :src="require('@/assets/img/data.png')" alt="" style="width: 17px;height: 16px;margin-bottom: 4px">
        </div>
      </div>
      <el-table
        class="tableBox"
        :data="extractData"
        v-loading="loadingFlag"
        style="width: 100%;margin-top: 16px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="date"
          label="名称"
          width="120"
        />
        <el-table-column
          prop="name"
          label="OD"
          width="120"
        />
        <el-table-column
          prop="name"
          label="OS"
          width="180"
        />
        <el-table-column
          prop="name"
          label="OU"
          width="120"
        />
      </el-table>
    </div>
    <!-- 图像与报告 -->
    <keep-alive>
      <el-dialog title="" class="detail-view" :fullscreen="true" :visible.sync="isActive" append-to-body @close="closePacs">
        <imgRecord :patient-info="patientBaseData" />
      </el-dialog>
    </keep-alive>
  </div>
</template>
<script>
import imgRecord from '@/components/360View/img-reccrd'
import eventBus from '@/page-subspecialty/utils/eventBus'
const Base64 = require('js-base64').Base64
export default {
  components: {
    imgRecord
  },
  mixins: [],
  props: {
    patientIdNumber: {
      type: String,
      default: ''
    },
    patientId: {
      type: String,
      default: ''
    },
    onlyRead: {
      type: Boolean,
      default: false
    }
  },
  inject: ['refresh'],
  data() {
    return {
      date: '',
      examNo: '',
      examineItem: '',
      multipleSelection: [],
      tableData: [],
      extractData: [],
      patientBaseData: {},
      loading: false,
      loadingFlag: false,
      isActive: false
    }
  },
  created() {

  },
  mounted() {
    this.getPatientData()
    this.getSpecialItem()
  },
  methods: {
    // 获取特殊检查项
    async getSpecialItem() {
      this.loading = true
      const { data: res } = await this.$http.get('/patient/view/getExamineItem', {
        params: {
          // patientId: '1693275'
          patientId: this.patientId
          // date: this.date
        }
      })
      if (res.code === 0) {
        this.loading = false
        this.tableData = res.data || []
        if (res.data.length) {
          this.examNo = res.data[0].examNo
          this.examineItem = res.data[0].examineItem
          this.getItemData()
        }
      } else {
        this.tableData = []
        this.$message.error(res.msg)
      }
    },
    async getItemData() {
      this.loadingFlag = true
      const { data: res } = await this.$http.get('/patient/view/getExtractData', {
        params: {
          examNo: this.examNo,
          examineItem: this.examineItem
        }
      })
      if (res.code === 0) {
        this.loadingFlag = false
        this.extractData = res.data || []
      } else {
        this.loadingFlag = false
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 根据id获取患者信息--中间上侧患者信息
    async getPatientData() {
      const { data: res } = await this.$http.get(
        '/patient/view/getPatientData',
        {
          params: {
            // patientId: this.patientId
            patientId: '797064'
          }
        }
      )
      if (res.code === 0) {
        this.patientBaseData = res.data ? res.data : {}
      } else {
        this.$message.error(res.msg)
      }
    },
    // 点击行展示提取数据
    handleData(item) {
      this.examNo = item.examNo
      this.examineItem = item.examineItem
      this.getItemData()
    },
    handleRecord(item) {
      const patientInfo = {
        examDate: item.examTime ? item.examTime.substring(0, 11) : '',
        itemCode: item.examineItem,
        examNo: item.examNo,
        patientId: this.patientId
      }
      const { href } = this.$router.resolve({
        name: 'pacs',
        query: {
          info: this.$Base64.encode(JSON.stringify(patientInfo))
        }
      })
      window.open(href, '_blank')
    },
    // 关闭360弹框
    closePacs() {
      this.isActive = false
    },
    // 添加数据集
    addDataList() {
      const data = this.multipleSelection
      eventBus.$emit('sendForData', data)
    }
  }
}
</script>
<style lang="scss" scoped>
.specialBox{
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  overflow-y: auto;
  .examineBox{
    height: 100%;
    overflow: auto;
    position: relative;

    .refresh{
      position: absolute;
      right: 18px;
      top: 35px;
      z-index: 999;
      cursor: pointer;
      color: #409EFF;
    }
  }
  .examineData{
    padding: 16px 0 0 16px;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    position: relative;

    .refresh-r{
      position: absolute;
      left: 90px;
      top: 25px;
      z-index: 999;
      cursor: pointer;
      color: #409EFF;
    }
  }
  .header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 49px;
    line-height: 49px;
    padding: 0px 16px;
    box-sizing: border-box;
    margin-bottom: 32px;
    border: 1px solid rgba(0, 0, 0, 0.06);
  }
  .content{
    width: 100%;
    //display: flex;
    //justify-content: space-between;
    box-sizing: border-box;

  }
  .lineBox{
    //width: 48%;
    width: 100%;
    height: 260px;
    padding: 16px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 32px;
  }
  .scroll-echearts {
    padding: 5px 0;
    flex: 1;
    margin-bottom: 16px;
    //background: #171515;
    border-radius: 4px;
  }
  .eyeBox{
    width: 480px;
    height: 180px;
    display: flex;
    margin-left: 32px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    .eye{
      width: 50%;
      display: flex;
      flex-direction: column;

      div{
        height: 45px;
        line-height: 45px;
        text-align: center;
      }
      .info{
        display: flex;
        justify-content: space-between;
        padding: 0 14px;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
      }
    }
    .el{
      background: rgba(0, 0, 0, 0.04);
    }
  }
  .mr30{
    margin-right: 30px;
  }
}
</style>
<style lang="scss">
.specialBox{
  .el-table th{
    background-color: #FAFAFA;
  }
}
</style>