vue+窗格切换+田字+dicom显示_03

环境：vue+webpack+cornerstone

ide：vs code

需求：窗格设置+拼图设置

代码：

主体：printPage.vue

   

      

        

          
窗格设置
          

          

            

          
          

            

          
          

            

              

            
            

          
        
        

          
拼图设置
          

          

            

          
          

            

          
          

            

              

            
            

          
        
      
      

         
           
           
           
      
      

        
for="(item,key) in dicomList" :key="key" @click="imgClcik(item.url)">
          
        
        
      
    

组件引入及部分变量，多余的忽略

import windowindex2 from './../components/window/windowindex2.vue';  // 窗格1
import windowindex3 from './../components/window/windowindex3.vue';  // 窗格2
import windowindex4 from './../components/window/windowindex4.vue';  // 窗格3
import {formatDate} from "../common/js/date";
import page from './../components/table/Pagination.vue';
import previewDicom from 'Components/previewDicom'  // dicom文件组件
export default {
  components: {
    windowindex2,
    windowindex3,
    windowindex4,
    page,
    previewDicom
  },
  data() {
    return {
      ip:this.CONSTANT.CONSTANT.WEB_URL,
      patientList:[
      ],
      searchForm:{
        patientId: '',
        name: '',
        arrivedDatetime: '',
        printStatus: '',
        total:0,
        currentPage:0
      },
      PrintDialogVisible:false,
      printForm: {
        name: ''
      },
      patientForm:{
        cname:'',  //相机名称
      },
      showWindowIndex2: false,
      showWindowIndex3: false,
      showWindowIndex4: false,
      windowindex:'', // 左侧选择的窗口
      windowClickIndex: '',  // 左侧内部选择的窗口
      jigsawindex: '',  // 右侧选择的窗口
      sizeList:[   //尺寸列表
        {
          name: '8INX10IN',
        },
        {
          name: '10INX12IN',
        },
        {
          name: '10INX14IN',
        },
        {
          name: '11INX14IN',
        },
        {
          name: '14INX14IN',
        },
        {
          name: '14INX17IN',
        },
        {
          name: '24CMX24CM',
        },
        {
          name: '24CMX30CM',
        },
      ],
      cameraList: [],
      printStatusList: [],
      row:{},  //当前行的数据
      currentIndex: '', // 判断当前选择的li
      active:['active'],
      dicomList:[
        {
          url:'http://127.0.0.1/testDICOM/CTStudy/3.719KB.DCM',
        },
        {
          url:'http://127.0.0.1/testDICOM/CTStudy/3.719KB.DCM',
        },
        {
          url:'http://127.0.0.1/testDICOM/CTStudy/test.dcm',
        },
        {
          url:'http://127.0.0.1/testDICOM/CTStudy/1.5191KB.DCM',
        },
        {
          url:'http://127.0.0.1/testDICOM/CTStudy/1.5191KB.DCM',
        },
        {
          url:'http://127.0.0.1/testDICOM/CTStudy/1.5191KB.DCM',
        }
      ],
      saveurl: '',
      jigclickIndex:'',  // 右侧窗口内部点击的div
      xxooshow: true,    // 最大的div显示
      xxxxChange: 'big'  // big 默认右边栏第一个    small 表示显示右边栏其它的三个  

部分使用到的函数

 selectWindow(index) {
      console.log('[*] window is -------', index)
      this.windowindex = index;
      this.xxxxChange = 'big';
      if(index === 2) {
        this.xxooshow = false;
        this.showWindowIndex3 = false;
        this.showWindowIndex4 = false;
        this.showWindowIndex2 = true;
      } else if(index === 3){
        this.xxooshow = false;
        this.showWindowIndex2 = false;
        this.showWindowIndex4 = false;
        this.showWindowIndex3 = true;
      } else if(index === 4) {
        this.xxooshow = false;
        this.showWindowIndex2 = false;
        this.showWindowIndex3 = false;
        this.showWindowIndex4 = true;
      } else {
        this.xxooshow = true;
        this.showWindowIndex2 = false;
        this.showWindowIndex3 = false;
        this.showWindowIndex4 = false;
      }
    },
selectJigsaw(index) {
      console.log('[*] jigsaw is -------', index)
      // 清除所有父窗口
      if(index === 1){
        this.xxxxChange = 'big';
        // 可以显示
        if(this.windowindex === 2){
          if(this.windowClickIndex === 1 ){
            this.$refs.window2.p1show = true;
            this.$refs.window2.xname = 'changejigsawindex'+ this.windowClickIndex +'_1';
          }else if(this.windowClickIndex === 2 ){
            this.$refs.window2.p2show = true;
            this.$refs.window2.xname = 'changejigsawindex'+ this.windowClickIndex +'_1';
          } 
        }else if(this.windowindex === 3){
          if(this.windowClickIndex === 1 ){
            this.$refs.window3.p1show = true;
            this.$refs.window3.xname = 'changejigsawindex'+ this.windowClickIndex +'_1';
          }else if(this.windowClickIndex === 2 ){
            this.$refs.window3.p2show = true;
            this.$refs.window3.xname = 'changejigsawindex'+ this.windowClickIndex +'_1';
          }
        }else if(this.windowindex === 4){
          if(this.windowClickIndex === 1 ){
            this.$refs.window4.p1show = true;
            this.$refs.window4.xname = 'changejigsawindex'+ this.windowClickIndex +'_1';
          }else if(this.windowClickIndex === 2 ){
            this.$refs.window4.p2show = true;
            this.$refs.window4.xname = 'changejigsawindex'+ this.windowClickIndex +'_1';
          }else if(this.windowClickIndex === 3){
            this.$refs.window4.p3show = true;
            this.$refs.window4xname = 'changejigsawindex'+ this.windowClickIndex +'_1';
          }else if(this.windowClickIndex === 4){
            this.$refs.window4.p4show = true;
            this.$refs.window4.xname = 'changejigsawindex'+ this.windowClickIndex +'_1';
          }
        }
      }else{
        this.xxxxChange = 'small';
      if(this.windowindex === 2){
        if(this.windowClickIndex === 1 ){
          this.$refs.window2.p1show = false;
        }else if(this.windowClickIndex === 2 ){
          this.$refs.window2.p2show = false;
        } 
      }else if(this.windowindex === 3){
        if(this.windowClickIndex === 1 ){
          this.$refs.window3.p1show = false;
        }else if(this.windowClickIndex === 2 ){
          this.$refs.window3.p2show = false;
        }
      }else if(this.windowindex === 4){
        if(this.windowClickIndex === 1 ){
          this.$refs.window4.p1show = false;
        }else if(this.windowClickIndex === 2 ){
          this.$refs.window4.p2show = false;
        }else if(this.windowClickIndex === 3){
          this.$refs.window4.p3show = false;
        }else if(this.windowClickIndex === 4){
          this.$refs.window4.p4show = false;
        }
      }
      this.jigsawindex = index;
      if(this.windowClickIndex === ''){
         return false
      }else{
        // this.xname = 'showjigsawindex'+ this.windowClickIndex +'_' + this.jigsawindex;
        if(this.windowindex ===2){
          this.$refs.window2.xname = 'changejigsawindex'+ this.windowClickIndex +'_' + this.jigsawindex;
        }else if(this.windowindex === 3){
          this.$refs.window3.xname = 'changejigsawindex'+ this.windowClickIndex +'_' + this.jigsawindex;
        } else if(this.windowindex ===4){
          this.$refs.window4.xname = 'changejigsawindex'+ this.windowClickIndex +'_' + this.jigsawindex;
        }
      }
      }
    },
    windowIndex(index){
      console.log('[*] windowclcik is -------', index)
      //点击之后给个选中状态
      //  if(this.windowindex ===2){
    
      //     this.$refs.window2.xname = 'changeClass'+ this.windowindex +'_' + index;
      //   }else if(this.windowindex === 3){
    
      //     this.$refs.window3.xname = 'changejigsawindex'+ this.windowClickIndex +'_' + this.jigsawindex;
      //   } else if(this.windowindex ===4){
    
      //     this.$refs.window4.xname = 'changejigsawindex'+ this.windowClickIndex +'_' + this.jigsawindex;
      //   }
      this.windowClickIndex = index;
    },
imgClcik(url){
      console.log('[*] 当前点击的图片+++++', url);
      // this.$refs.window2.imgurl  = url;
      var url = `wadouri:`+url;
      console.log('[*] 当前点击的窗口', this.windowClickIndex);
      if(this.windowindex == 1 || this.windowindex ==''){
          this.$refs.xxoo.loadAndViewImage(url);
      }
      // 没有小窗口时    xxxxxx
      console.log('[*] 这里应该是没有小窗口的时候-----',this.xxxxChange);
      if(