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

<template>
  <div class="container">
    <div style="width: 100%">
      <div v-if="!infoHidden" class="header">
        <img :src="require('@/assets/img/back-l.png')" alt="" style="margin-right: 8px;cursor: pointer" @click="backList">
        <img :src="require('@/assets/img/boy.png')" alt="">
        <p class="head-t">
          <span class="head-r">{{ patientBaseData.patientName }}</span>
          <span class="head-r">{{ patientBaseData.patientSex }}</span>
          <span v-if="patientBaseData.patientAge" class="head-r">{{ patientBaseData.patientAge }}岁</span>
          <img v-if="patientBaseData.patientId" class="icon-a" :src="require('@/assets/img/pid.png')" alt="" style="margin-right: 6px;vertical-align: text-top">
          <span style="vertical-align: text-bottom">{{ patientBaseData.patientId }}</span>
        </p>
        <p class="head-b">
          <img v-if="patientBaseData.patientIdNumber" :src="require('@/assets/img/id.png')" alt="" style="margin-right: 6px;vertical-align: middle">
          <span class="mr16" style="vertical-align: middle">{{ maskId(patientBaseData.patientIdNumber) }}</span>
          <img v-if="patientBaseData.patientPhone" :src="require('@/assets/img/phone.png')" alt="" style="margin-right: 6px;vertical-align: middle">
          <span class="mr16" style="vertical-align: middle">{{ patientBaseData.patientPhone }}</span>
          <img v-if="patientBaseData.patientAddress" :src="require('@/assets/img/position.png')" alt="" style="margin-right: 6px;vertical-align: middle">
          <span style="vertical-align: middle">{{ patientBaseData.patientAddress }}</span>
        </p>
        <img :src="require('@/assets/img/pacs.png')" alt="" style="float: right;cursor: pointer" @click="handlePacs">
      </div>
      <div :class="infoHidden?'contentShow':'contentBox'">
        <div class="leftBox">
          <time-line
            ref="timeline"
            :time-axis-data="timeAxisData"
            @getTimeAxisData="getTimeAxisData"
            v-on="$listeners"
            @getTimeAxisNodeInfo="getTimeAxisNodeInfo"
          />
        </div>
        <div class="rightBox">
          <el-tabs type="border-card" :value="timeAxisType" style="height: 100%" @tab-click="tabClick">
            <el-tab-pane name="病史总览" label="病史总览" style="height: 100%">
              <overView v-if="timeAxisType==='病史总览'" :patient-id="patientId||routePatientId" />
            </el-tab-pane>
            <el-tab-pane name="门诊病历" label="门诊病历" style="height: 100%">
              <medicalRecord :is-dev="isDev" :type-name="timeAxisType" :patient-id="patientId || routePatientId" :is-search="isSearch || $route.query.isSearch" :only-read="readOnly" />
            </el-tab-pane>
            <el-tab-pane name="常规检查" label="常规检查" style="height: 100%">
              <routine v-if="timeAxisType==='常规检查'" :patient-id="patientId||routePatientId" :date="date" :only-read="readOnly" />
            </el-tab-pane>
            <el-tab-pane name="特殊检查" label="特殊检查" style="height: 100%">
              <special v-if="timeAxisType==='特殊检查'" :patient-id="patientId||routePatientId" :only-read="readOnly" />
            </el-tab-pane>
            <el-tab-pane name="视光档案" label="视光档案" style="height: 100%">
              <opticalFile v-if="timeAxisType==='视光档案'" :is-dev="isDev" :patient-id="patientId||routePatientId" :is-search="isSearch || $route.query.isSearch" :only-read="readOnly" />
            </el-tab-pane>
            <el-tab-pane name="诊断" label="诊断" style="height: 100%">
              <el-table
                v-if="timeAxisType==='诊断'"
                :data="timeAxisNodeInfo"
                style="width: 100%;height: 100%;overflow: auto"
              >
                <el-table-column
                  type="index"
                  width="50"
                />
                <el-table-column
                  prop="diagName"
                  label="诊断内容"
                />
                <el-table-column
                  label="主诊断"
                >
                  <template slot-scope="scope">
                    {{ scope.row.isMain === 'Y' ? '是' : '否' }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="diagIcd"
                  label="ICD编码"
                />
                <el-table-column
                  prop="memo"
                  label="备注"
                />
                <el-table-column
                  prop="doctorName"
                  label="医师"
                />
              </el-table>
            </el-tab-pane>
            <el-tab-pane name="手术" label="手术" style="height: 100%">
              <el-table
                v-if="timeAxisType==='手术'"
                :data="timeAxisNodeInfo"
                style="width: 100%;height: 100%;overflow: auto"
              >
                <el-table-column
                  type="index"
                  width="50"
                />
                <el-table-column
                  prop="bedNo"
                  label="床号"
                />
                <el-table-column
                  prop="deptName"
                  label="部门名"
                />
                <el-table-column
                  prop="wardName"
                  label="病区名"
                />
                <el-table-column
                  prop="mainDrName"
                  label="主刀医生姓名"
                />
                <el-table-column
                  prop="opName"
                  label="手术名称"
                />
                <el-table-column
                  prop="opPartName"
                  label="手术部位"
                />
                <el-table-column
                  prop="opTime"
                  label="手术时间"
                >
                  <template slot-scope="scope">
                    {{ scope.row.opTime ? scope.row.opTime.substring(0, 10) : '' }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="主手术"
                >
                  <template slot-scope="scope">
                    {{ scope.row.isMain === '1' ? '是' : '否' }}
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane name="医嘱" label="医嘱" style="height: 100%">
              <el-table
                v-if="timeAxisType==='医嘱'"
                :data="timeAxisNodeInfo"
                style="width: 100%;height: 100%;overflow: auto"
              >
                <el-table-column
                  type="index"
                  width="50"
                />
                <el-table-column
                  prop="medName"
                  label="商品名"
                />
                <el-table-column
                  prop="socName"
                  label="通用名"
                />
                <el-table-column
                  prop="numberUse"
                  label="数量"
                />
                <el-table-column
                  prop="yzTypeName"
                  label="类型"
                />
                <el-table-column
                  prop="doctorName"
                  label="医师"
                />
                <el-table-column
                  prop="itemType"
                  label="门诊/住院"
                />
              </el-table>
            </el-tab-pane>
            <el-tab-pane name="住院" label="住院" style="height: 100%">
              <el-table
                v-if="timeAxisType==='住院'"
                :data="timeAxisNodeInfo"
                style="width: 100%;height: 100%;overflow: auto"
              >
                <el-table-column
                  type="index"
                  width="50"
                />
                <el-table-column
                  prop="profName"
                  label="部门名称"
                />
                <el-table-column
                  prop="wardName"
                  label="病区名称"
                />
                <el-table-column
                  prop="diagName"
                  label="诊断名称"
                />
                <el-table-column
                  label="住院日期"
                >
                  <template slot-scope="scope">
                    {{ scope.row.inDate ? scope.row.inDate.substring(0, 10) : '' }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="出院日期"
                >
                  <template slot-scope="scope">
                    {{ scope.row.outDate ? scope.row.outDate.substring(0, 10) : '' }}
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane name="随访记录" label="随访记录" style="height: 100%">
              <followUpRecord v-if="timeAxisType==='随访记录'" :patient-id="patientId||routePatientId" :only-read="readOnly" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <shrink ref="shrinks" :arrow-type="1" @display="handleDisplay" @changeType="changeType" />
    <drawer ref="drawers" :info-hidden="infoHidden" :cur-type="dataType" :display.sync="display" width="650px" :mask="true" @display="closeDrawer">
      <!--    关键指标-->
      <key-indicators
        v-if="dataType === 1"
        id="drawerKey"
        ref="keyIndicatorRef"
        class="key-content"
        v-bind="$attrs"
        :patient-id="patientBaseData.patientId"
        :patient-id-number="patientBaseData.patientIdNumber"
      />
      <!--      数据集-->
      <dataInfo v-if="dataType === 2" :fore-list="foreList" :after-list="afterList" />
      <!--      病历收藏-->
      <collection v-if="dataType === 3" :patient-id="patientBaseData.patientId" :jz-number="jzNumber" :platform="isSearch || $route.query.isSearch" />
      <!--      常用业务-->
      <business v-if="dataType === 4" :patient-id="patientBaseData.patientId" :platform="isSearch || $route.query.isSearch" :patient-name="patientBaseData.patientName" />
      <!--      知识库-->
      <knowledge-base v-if="dataType === 5" />
    </drawer>
  </div>
</template>
<script>
import timeLine from './time-line.vue'
import shrink from '@/components/360View/shrink'
import drawer from '@/components/360View/drawer'
import dataInfo from './dataInfo' // 数据集
import collection from './collection' // 病历收藏
import business from './business' // 常用业务
import overView from '@/components/360View/overView' // 病史总览
import routine from '@/components/360View/routine' // 常规检查
import special from '@/components/360View/special' // 特殊检查
import followUpRecord from '@/components/360View/followUpRecord'
import keyIndicators from './key-indicators'
import imgRecord from './img-reccrd.vue'
import pacsList from '@/components/360View/pacs/patientList'
import medicalRecord from '@/components/360View/medicalRecord' // 门诊病历
import opticalFile from '@/components/360View/opticalFile' // 视光档案
import eventBus from '@/page-subspecialty/utils/eventBus'
import KnowledgeBase from '@/components/360View/knowledge/index.vue'
export default {
  components: { KnowledgeBase, timeLine, drawer, keyIndicators, shrink, business, collection, imgRecord, overView, medicalRecord, dataInfo, routine, special, followUpRecord, opticalFile, pacsList },
  mixins: [],
  props: {
    patientId: {
      type: String,
      default: ''
    },
    onlyRead: {
      type: Boolean,
      default: false
    },
    isSearch: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      display: false,
      sharkFlag: true,
      infoHidden: false,
      patientBaseData: {},
      timeAxisNodeInfo: [], // 点击左侧时间轴获取到的中间区域详细信息
      doctorId: '', //
      date: '', // 点击时间轴的时间
      source: '', // 数据集数据来源
      collectList: '', // 数据集数据
      drawerWidth: '',
      timeAxisData: [], // 左侧时间轴数据
      timeAxisAll: [], // 病史总览时间轴数据
      timeAxisType: '病史总览', // tab类型
      foreList: [], //
      afterList: [], //
      dataType: 1,
      kpilist: [], // kpi关键指标checkbox
      ShiLiAndYanYaData: {}, // 视力和眼压
      isActive: false, // 控制数据与报告tab展示
      type: '', // 筛查类型
      defaultProps: {
        children: 'children',
        label: 'tagName'
      },
      jsArr: [],
      dataForm: {},
      jzNumber: '',
      isDev: false
    }
  },
  computed: {
    readOnly() {
      if (this.$route.query.onlyRead) {
        return JSON.parse(this.$route.query.onlyRead)
      } else {
        return this.onlyRead
      }
    },
    routePatientId() {
      let pid = ''
      if (this.$route.query.patientId) {
        pid = this.$route.query.patientId.replace(/^0+/, '')
      }
      return pid
    }
  },
  watch: {
    display(val) {
      if (val) {
        this.$refs.drawers.$el.style.display = 'inline-block'
      }
    }
  },
  created() {
    this.isDev = window.SITE_CONFIG['apiURL'].includes('47')
    this.jzNumber = window.sessionStorage.getItem('jzNumber')
    this.infoHidden = this.$route.query.infoHidden && JSON.parse(this.$route.query.infoHidden)
  },
  mounted() {
    this.getPatientData()
    this.getTimeAxisData()
    this.computerData()
    if (this.isSearch === '3') {
      this.timeAxisType = '视光档案'
    } else {
      this.timeAxisType = '病史总览'
    }
    if (this.$route.query.patientId && !this.$route.query.doctorId) {
      this.timeAxisType = '门诊病历'
    }
  },
  methods: {
    // 切换病史总览时间轴
    tabClick(type) {
      this.timeAxisType = type.name
      if (this.timeAxisType === '病史总览' || this.timeAxisType === '门诊病历' || this.timeAxisType === '常规检查' || this.timeAxisType === '特殊检查' || this.timeAxisType === '视光档案' || this.timeAxisType === '随访记录') return
      this.searchAxisData()
    },
    selectType(type) {
      this.dataType = type
      this.display = true
    },
    maskId(idCard) {
      if (idCard) {
        const reg = /^(.{6})(?:\d+)(.{4})$/
        return idCard.replace(reg, '\$1******\$2')
      }
    },
    computerData() {
      // 监听点击添加数据集，获取数据
      eventBus.$off('sendForData')
      eventBus.$on('sendForData', data => {
        const arr = this.foreList.concat(data)
        this.foreList = this.unique(arr)
        this.openDataDrink()
      })
    },
    unique(list) {
      for (let i = 0; i < list.length - 1; i++) {
        for (let j = i + 1; j < list.length; j++) {
          if (list[i].id === list[j].id) {
            list.splice(i, 1)
            j--
          }
        }
      }
      return list
    },
    openDataDrink() {
      this.dataType = 2
      this.display = true
      this.$nextTick(() => {
        if (this.$refs.drawers && this.$refs.drawers.$el) {
          this.$refs.drawers.$el.style.display = 'inline-block'
        }
        if (this.$refs.shrinks && this.$refs.shrinks.$el) {
          this.$refs.shrinks.$el.style.zIndex = 999
          this.$refs.drawers.selectShrink()
        }
      })
    },
    closeDrawer(val) {
      this.display = val
    },
    changeType(val) {
      this.dataType = val
      this.display = true
    },
    handleDisplay(val) {
      this.dataType = 1
      if (val) {
        this.display = true
        this.$refs.drawers.$el.style.display = 'inline-block'
      } else {
        this.display = false
      }
    },
    backList() {
      if (this.$route.query.patientId && !this.$route.query.doctorId && !this.$route.query.isCollection) {
        this.$router.go(-1)
      } else if (this.$route.query.doctorId || this.$route.query.isCollection) {
        this.$router.push('/outpatientManagement-call')
      } else {
        this.$parent.detailViewVisible = false
        this.$parent.reFresh()
      }
    },
    // 360浏览器
    handlePacs() {
      // const baseUrl = 'http://z1.huimucloud.com:8085'
      const baseUrl = 'http://10.80.5.32:8026'
      // const baseUrl = 'http://192.168.0.85:8001'
      const href = `${baseUrl}/EXAMINE_Report/InterFace?PatID=${this.patientId}&DoctorID=${this.employeeId}&PatIdKey=&ExamNo=`
      window.open(href, '_blank')
      // const { href } = this.$router.resolve({
      //   name: 'pacsManage'
      // })
      // window.open(href, '_blank')
    },
    // 关闭360弹框
    closePacs() {
      this.isActive = false
    },
    // 关键指标组件是否显示
    shrinkClick() {
      this.drawer = !this.drawer
      this.display = true
    },
    // 根据id获取患者信息--中间上侧患者信息
    async getPatientData() {
      const { data: res } = await this.$http.get(
        '/patient/view/getPatientData',
        {
          params: {
            patientId: this.patientId || this.routePatientId
          }
        }
      )
      if (res.code === 0) {
        this.patientBaseData = res.data ? res.data : {}
      } else {
        this.$message.error(res.msg)
      }
    },
    // 获取时间轴数据--左侧时间轴
    async getTimeAxisData() {
      const { data: res } = await this.$http.get(
        '/patient/view/getTimeAxisData',
        {
          params: {
            patientId: this.patientId || this.routePatientId
          }
        }
      )
      if (res.code === 0) {
        if (res.data.length > 0) {
          this.timeAxisData = res.data.length > 0 ? res.data : []
          this.date = res.data[0].data ? res.data[0].data[0].date : ''
        }
        if (!res.data.length) {
          const year = this.$moment().format('YYYY')
          const date = this.$moment().format('YYYY-MM-DD')
          this.timeAxisData = [{ year: year, data: [{ date: date, itemList: [{ groupName: '门诊', opDate: date, year: year }] }] }]
        }
      } else {
        this.$message.error(res.msg)
      }
    },
    async searchAxisData() {
      const { data: res } = await this.$http.get('/patient/view/getTimeAxisNodeInfo', {
        params: {
          date: this.date,
          groupName: this.timeAxisType,
          patientId: this.patientId || this.routePatientId
        }
      })
      if (res.code === 0) {
        this.timeAxisNodeInfo = res.data || []
      } else {
        this.$message.error(res.msg)
      }
    },
    // 获取时间轴节点信息--点击左侧时间轴获取患者具体信息
    async getTimeAxisNodeInfo(item) {
      this.date = item.opDate
      if (item.groupName === '特检') {
        this.timeAxisType = '特殊检查'
      } else {
        this.timeAxisType = item.groupName
      }
      await this.searchAxisData()
    }
  }
}
</script>

<style lang="scss">
.container{
  .el-tabs__content {
    height: calc(100% - 38px);
  }
  .el-tabs--border-card {
    box-shadow: none;
  }
  .el-tabs--border-card>.el-tabs__header{
    background: #F0F2F5;
  }
  .el-dialog > .el-dialog__body {
    height: calc(100% - 48px);
  }
}
.detail-view{
  .el-dialog > .el-dialog__body {
    height: calc(100% - 50px);
  }
}
</style>
<style lang="scss" scoped>
.container{
  width: 100%;
  height: 100%;
  display: flex;
  background: #F0F2F5;

  .contentBox{
    display: flex;
    width: 100%;
    height: calc(100% - 100px);
  }
  .contentShow{
    display: flex;
    width: 100%;
    height: 100%;
  }
  .mr16{
    margin-right: 16px;
  }
  .header{
    width: 100%;
    height: 88px;
    padding: 8px;
    position: relative;
    margin-bottom: 16px;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 4px;
    .head-t{
      position: absolute;
      left: 155px;
      top: 20px;
    }
    .head-b{
      position: absolute;
      left: 155px;
      bottom: 20px;
      font-size: 14px;
    }
    .head-r{
      margin-right: 16px;
      font-weight: 500;
      font-size: 20px;
      color: rgba(0, 0, 0, 0.88);
    }
  }
  .key-indicators-shrink {
    width: 32px;
    margin-left: 8px;
    height: 100%;
    position: relative;
    background: linear-gradient(90deg, rgba(47, 130, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
    .icon-circle {
      border-radius: 50%;
      width: 24px;
      height: 24px;
      border: 2px solid rgba(30, 121, 255, 0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 18px;
      margin-left: 3px;
      cursor: pointer;
    }
    .el-icon-arrow-right,.el-icon-arrow-left {
      color: #fff;
      font-weight: 700;
    }
    img {
      width: 32px;
      height: 142px;
    }
    .dataBase{
      position: absolute;
      display: inline-block;
      color: #1C76FD;
      margin-left: 6px;
      writing-mode: vertical-rl;
      letter-spacing: 3px;
      cursor: pointer;
    }
    .fontColor{
      color: white !important;
    }
    .dataOne{
      top: 80px;
    }
    .dataTwo{
      top: 210px;
    }
    .dataThree{
      top: 328px;
    }
    .dataFour{
      top: 455px;
    }
    .imgCur{
      position: absolute;
      left: 0;
      top: 43px;
    }
    .imgOne{
      position: absolute;
      left: 0;
      top: 163px;
    }
    .imgTwo{
      position: absolute;
      left: 0;
      top: 287px;
    }
    .imgThree{
      position: absolute;
      left: 0;
      top: 411px;
    }
  }
  .leftBox{
    width: 168px;
    height: 100%;
    margin-right: 16px;
    background-color: white;
  }
  .rightBox{
    //width: 100%;
    flex: 1;
    width:0;
    height: 100%;
    background-color: #F0F2F5;
  }
}
</style>