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

<template>
  <div class="container">
    <div style="flex: 1">
      <div 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">{{ 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="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="type" style="height: 100%">
            <el-tab-pane name="病史总览" label="病史总览" style="height: 100%">
              <overView />
            </el-tab-pane>
            <el-tab-pane name="门诊病历" label="门诊病历" style="height: 100%">
              <medicalRecord :patient-id="patientId" />
            </el-tab-pane>
            <el-tab-pane name="常规检查" label="常规检查" style="height: 100%">
              <routine />
            </el-tab-pane>
            <el-tab-pane name="特殊检查" label="特殊检查" style="height: 100%">
              <special />
            </el-tab-pane>
            <el-tab-pane name="诊断" label="诊断">
              <el-table
                :data="timeAxisNodeInfo"
                style="width: 100%"
              >
                <el-table-column
                  prop="diagName"
                  label="诊断内容"
                  align="center"
                />
                <el-table-column
                  label="主诊断"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.isMain === '1' ? '是' : '否' }}
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane name="手术" label="手术">
              <el-table
                :data="timeAxisNodeInfo"
                style="width: 100%"
              >
                <el-table-column
                  prop="bedNo"
                  label="床号"
                  align="center"
                />
                <el-table-column
                  prop="deptName"
                  label="部门名"
                  align="center"
                />
                <el-table-column
                  prop="wardName"
                  label="病区名"
                  align="center"
                />
                <el-table-column
                  prop="mainDrName"
                  label="主刀医生姓名"
                  align="center"
                />
                <el-table-column
                  prop="opName"
                  label="手术名称"
                  align="center"
                />
                <el-table-column
                  prop="opPartName"
                  label="手术部位"
                  align="center"
                />
                <el-table-column
                  prop="opTime"
                  label="手术时间"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.opTime ? scope.row.opTime.substring(0, 10) : '' }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="主手术"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.isMain === '1' ? '是' : '否' }}
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane name="用药" label="用药">
              <el-table
                :data="timeAxisNodeInfo"
                style="width: 100%"
              >
                <el-table-column
                  prop="medName"
                  label="商品名"
                  align="center"
                />
                <el-table-column
                  prop="socName"
                  label="通用名"
                  align="center"
                />
                <el-table-column
                  prop="site"
                  label="部位"
                  align="center"
                />
                <el-table-column
                  prop="itemType"
                  label="门诊/住院"
                  align="center"
                />
              </el-table>

            </el-tab-pane>
            <el-tab-pane name="住院" label="住院">
              <el-table
                :data="timeAxisNodeInfo"
                style="width: 100%"
              >
                <el-table-column
                  prop="deptName"
                  label="部门名称"
                  align="center"
                />
                <el-table-column
                  prop="wardName"
                  label="病区名称"
                  align="center"
                />
                <el-table-column
                  prop="diagName"
                  label="诊断名称"
                  align="center"
                />
                <el-table-column
                  label="住院日期"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.inDate ? scope.row.inDate.substring(0, 10) : '' }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="出院日期"
                  align="center"
                >
                  <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 :platform="platform" :patient-id="patientId" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <shrink ref="shrinks" :arrow-type="1" @display="handleDisplay" />
    <drawer ref="drawers" :display.sync="display" :width="drawerWidth" :mask="false">
      <!--    关键指标-->
      <key-indicators
        v-if="dataType === 1"
        id="drawerKey"
        ref="keyIndicatorRef"
        class="key-content"
        v-bind="$attrs"
        :patient-id="patientBaseData.patientId"
      />
      <!--      数据集-->
      <dataInfo v-if="dataType === 2" :source-data="source" :data-list="collectList" />
      <!--      病历收藏-->
      <collection v-if="dataType === 3" :platform="platform" :patient-id="patientId" />
      <!--      常用业务-->
      <business v-if="dataType === 4" />
    </drawer>
    <!-- 图像与报告 -->
    <keep-alive>
      <el-dialog title="" class="detail-view" :fullscreen="true" :visible.sync="isActive" append-to-body @close="backList">
        <imgRecord :patient-info="patientBaseData" />
      </el-dialog>
    </keep-alive>
  </div>
</template>
<script>
import timeLine from './time-line.vue'
import shrink from '@/components/360View/shrink'
import drawer from '@/components/360View/drawer'
import dataInfo from './info' // 数据集
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 medicalRecord from '@/components/360View/medicalRecord' // 门诊病历
import moment from 'moment' // 导入模块
const Base64 = require('js-base64').Base64
import eventBus from '@/page-subspecialty/utils/eventBus'
export default {
  components: { timeLine, drawer, keyIndicators, shrink, business, collection, imgRecord, overView, medicalRecord, dataInfo, routine, special, followUpRecord },
  directives: {
    move(el, bindings) {
      el.onmousedown = (e) => {
        // const init = e.clientX
        // const parent = document.getElementById('drawerKey')
        // const initWidth = parent.offsetWidth
        // document.onmousemove = function(e) {
        //   const end = e.clientX
        //   const newWidth = init - end + initWidth
        //   parent.style.width = newWidth + 'px'
        // }
        // document.onmouseup = function() {
        //   document.onmousemove = document.onmouseup = null
        // }
      }
    }
  },
  mixins: [],
  props: {
    patientIdNumber: {
      type: String,
      default: ''
    },
    patientId: {
      type: String,
      default: ''
    },
    isSearch: {
      type: String,
      default: ''
    },
    platform: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      display: false,
      sharkFlag: true,
      patientBaseData: {},
      timeAxisNodeInfo: [], // 点击左侧时间轴获取到的中间区域详细信息
      source: '', // 数据集数据来源
      collectList: [], // 数据集数据
      drawerWidth: '',
      timeAxisData: [], // 左侧时间轴数据
      dataType: 1,
      kpilist: [], // kpi关键指标checkbox
      ShiLiAndYanYaData: {}, // 视力和眼压
      isActive: false, // 控制数据与报告tab展示
      type: '', // 筛查类型
      defaultProps: {
        children: 'children',
        label: 'tagName'
      },
      jsArr: [],
      isVisit: '',
      crfVisible: false,
      dataForm: {}
    }
  },
  created() {
    // this.patientIdNumber = '330282200110051983'
    this.getPatientData()
    this.getTimeAxisData()
  },
  mounted() {
    // 监听点击添加数据集，获取数据
    eventBus.$on('sendData', data => {
      console.log(data)
      this.dataType = 2
      this.display = true
      this.source = 'fore'
      this.collectList = data
      this.$nextTick(() => {
        this.$refs.drawers.$el.style.display = 'inline-block'
        this.$refs.shrinks.$el.style.zIndex = 999
        this.$refs.drawers.selectShrink()
      })
    })
  },
  methods: {
    selectType(type) {
      console.log(type)
      this.dataType = type
      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
      }
    },
    changeWidth() {
      this.drawerWidth = (this.drawerWidth === '500px') ? '800px' : '500px'
    },
    backList() {
      this.$parent.detailViewVisible = false
    },
    // 360浏览器
    handlePacs() {
      this.isActive = true
    },
    // 关键指标组件是否显示
    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
            patientId: '797064'
            // patientIdNumber: '330282200110051983'
          }
        }
      )
      if (res.code === 0) {
        this.patientBaseData = res.data ? res.data : {}
      } else {
        this.$message.error(res.msg)
      }
    },
    // 获取时间轴数据--左侧时间轴
    async getTimeAxisData(typeScreenCheckArr) {
      // const type = ['诊断', '手术', '用药', '住院', '出院', '检查', '随访']
      const { data: res } = await this.$http.get(
        '/patient/view/getTimeAxisData',
        {
          params: {
            // patientId: this.patientId
            patientId: '797064'
            // type: typeScreenCheckArr !== undefined ? typeScreenCheckArr : type
          }
        }
      )
      if (res.code === 0) {
        if (res.data.length > 0) {
          this.timeAxisData = res.data.length > 0 ? res.data : []
          this.type = res.data[0].data[0].itemList[0].groupName
        }
        if (!res.data.length) {
          this.timeAxisNodeInfo = []
          this.type = ''
          this.isVisit = ''
        }
      } else {
        this.$message.error(res.msg)
      }
    },
    // 获取时间轴节点信息--点击左侧时间轴获取患者具体信息
    async getTimeAxisNodeInfo(item) {
      this.type = item.groupName
      this.isVisit = item.isVisit
      const { data: res } = await this.$http.get('/patient/view/getTimeAxisNodeInfo', {
        params: {
          // date: moment(item.date).format('YYYY-MM-DD'),
          date: item.opDate,
          groupName: item.groupName,
          patientId: '797064'
          // patientId: this.patientId
        }
      })
      if (res.code === 0) {
        this.timeAxisNodeInfo = res.data || []
      } else {
        this.$message.error(res.msg)
      }
    }
  }
}
</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);
  }
}
</style>
<style lang="scss" scoped>
.container{
  width: 100%;
  height: 100%;
  display: flex;
  background: #F0F2F5;

  .contentBox{
    display: flex;
    height: calc(100% - 100px);
  }
  .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%;
    height: 100%;
    background-color: #F0F2F5;
  }
}
</style>