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

环境：vue+webpack+cornerstone

ide：vs code

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

代码：

主体：printPage.vue

   <div class="div middle">
      <div class="header">
        <div class="box_f">
          <div class="title">窗格设置</div>
          <div class="box_f_s" @click="selectWindow(1)"></div>
          <div class="box_f_s" @click="selectWindow(2)">
            <div style="width:100%;height:49px;border-bottom:2px solid #9d9e9f"></div>
          </div>
          <div class="box_f_s" @click="selectWindow(3)">
            <div style="width:50%;height:100px;border-right:2px solid #9d9e9f"></div>
          </div>
          <div class="box_f_s" style="position:relative" @click="selectWindow(4)">
            <div style="border-bottom:2px solid #9d9e9f">
              <div style="width:50%;height:50px;border-right:2px solid #9d9e9f;"></div>
            </div>
            <div class="bottom" style="height:48px;border-right:2px solid #9d9e9f;"></div>
          </div>
        </div>
        <div class="box_f">
          <div class="title">拼图设置</div>
          <div class="box_f_s" @click="selectJigsaw(1)"></div>
          <div class="box_f_s" @click="selectJigsaw(2)">
            <div style="width:100%;height:49px;border-bottom:2px solid #9d9e9f"></div>
          </div>
          <div class="box_f_s" @click="selectJigsaw(3)">
            <div style="width:50%;height:100px;border-right:2px solid #9d9e9f"></div>
          </div>
          <div class="box_f_s" style="position:relative" @click="selectJigsaw(4)">
            <div style="border-bottom:2px solid #9d9e9f">
              <div style="width:50%;height:50px;border-right:2px solid #9d9e9f;"></div>
            </div>
            <div class="bottom" style="height:48px;border-right:2px solid #9d9e9f;"></div>
          </div>
        </div>
      </div>
      <div class="blackBox">
         <preview-dicom ref="xxoo" v-show="xxooshow"></preview-dicom>
         <windowindex2 ref="window2"  v-show="showWindowIndex2"  @windowIndex="windowIndex"  @jigclick="jigclick"/>  <!-- 上下格式 -->
         <windowindex3 ref="window3" v-show="showWindowIndex3" @windowIndex="windowIndex" @jigclick="jigclick"/>  <!-- 上下格式 -->
         <windowindex4 ref="window4"  v-show="showWindowIndex4" @windowIndex="windowIndex" @jigclick="jigclick"/>  <!-- 上下格式 -->
      </div>
      <div class="blackSmallBox">
        <div class="son" v-for="(item,key) in dicomList" :key="key" @click="imgClcik(item.url)">
          <preview-dicom :imageId="item.url"></preview-dicom>
        </div>
        <!-- <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div> -->
      </div>
    </div>

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

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(this.windowClickIndex && this.xxxxChange === 'big'){
        if(this.windowindex == 2){
           if(this.windowClickIndex == 1){
            this.$refs.window2.$refs.p1.loadAndViewImage(url);
          }else if(this.windowClickIndex == 2){
            this.$refs.window2.$refs.p2.loadAndViewImage(url);
          }
        }
        if(this.windowindex == 3){
           if(this.windowClickIndex == 1){
            this.$refs.window3.$refs.p1.loadAndViewImage(url);
          }else if(this.windowClickIndex == 2){
            this.$refs.window3.$refs.p2.loadAndViewImage(url);
          }
        }
        if(this.windowindex == 4){
           if(this.windowClickIndex == 1){
            this.$refs.window4.$refs.p1.loadAndViewImage(url);
          }else if(this.windowClickIndex == 2){
            this.$refs.window4.$refs.p2.loadAndViewImage(url);
          }else if(this.windowClickIndex == 3){
            this.$refs.window4.$refs.p3.loadAndViewImage(url);
          }else{
            this.$refs.window4.$refs.p4.loadAndViewImage(url);
          }
        }
      }else{
        console.log('左侧当前选中的是哪个窗格+++', this.windowindex);
        console.log('左侧内部当前选中的是哪个窗格+++', this.windowClickIndex);
        console.log('右侧当前选中的是哪个窗格+++', this.jigsawindex);
        console.log('内部当前选中的是哪个窗格+++', this.jigclickIndex);
         if(this.windowindex == 2) {  // 横格
           if(this.windowClickIndex === 1){ // 第一个windowindexson
             if(this.jigsawindex === 2){   // 第一个jigsawindex
               if( this.jigclickIndex === 1){
                 this.$refs.window2.$refs.jig1_2.$refs.p1.loadAndViewImage(url);
               }else if( this.jigclickIndex === 2){
                 this.$refs.window2.$refs.jig1_2.$refs.p2.loadAndViewImage(url);
               }
             }
             // 第二个窗口
            if(this.jigsawindex === 3){  // 第二个jigsawindex
               if( this.jigclickIndex === 1){
                 this.$refs.window2.$refs.jig1_3.$refs.p1.loadAndViewImage(url);
               }
              if( this.jigclickIndex === 2){
                 this.$refs.window2.$refs.jig1_3.$refs.p2.loadAndViewImage(url);
               }
             }
            if(this.jigsawindex === 4){  // 第三个jigsawindex
              if( this.jigclickIndex === 1){
                this.$refs.window2.$refs.jig1_4.$refs.p1.loadAndViewImage(url);
              }else if( this.jigclickIndex === 2){
                this.$refs.window2.$refs.jig1_4.$refs.p2.loadAndViewImage(url);
              }else if(this.jigclickIndex === 3){
                this.$refs.window2.$refs.jig1_4.$refs.p3.loadAndViewImage(url);
              }else if(this.jigclickIndex === 4){
                this.$refs.window2.$refs.jig1_4.$refs.p4.loadAndViewImage(url);
              }
            }
           }else if(this.windowClickIndex === 2){
             if(this.jigsawindex === 2){   // 第一个jigsawindex
               if( this.jigclickIndex === 1){
                 this.$refs.window2.$refs.jig2_2.$refs.p1.loadAndViewImage(url);
               }else if( this.jigclickIndex === 2){
                 this.$refs.window2.$refs.jig2_2.$refs.p2.loadAndViewImage(url);
               }
             }
             // 第二个窗口
            if(this.jigsawindex === 3){  // 第二个jigsawindex
               if( this.jigclickIndex === 1){
                 this.$refs.window2.$refs.jig2_3.$refs.p1.loadAndViewImage(url);
               }
              if( this.jigclickIndex === 2){
                 this.$refs.window2.$refs.jig2_3.$refs.p2.loadAndViewImage(url);
               }
             }
            if(this.jigsawindex === 4){  // 第三个jigsawindex
              if( this.jigclickIndex === 1){
                this.$refs.window2.$refs.jig2_4.$refs.p1.loadAndViewImage(url);
              }else if( this.jigclickIndex === 2){
                this.$refs.window2.$refs.jig2_4.$refs.p2.loadAndViewImage(url);
              }else if(this.jigclickIndex === 3){
                this.$refs.window2.$refs.jig2_4.$refs.p3.loadAndViewImage(url);
              }else if(this.jigclickIndex === 4){
                this.$refs.window2.$refs.jig2_4.$refs.p4.loadAndViewImage(url);
              }
            }
           }
          }else if(this.windowindex == 3){ // 竖格
            if(this.windowClickIndex === 1){ // 第一个windowindexson
             if(this.jigsawindex === 2){   // 第一个jigsawindex
               if( this.jigclickIndex === 1){
                 this.$refs.window3.$refs.jig1_2.$refs.p1.loadAndViewImage(url);
               }else if( this.jigclickIndex === 2){
                 this.$refs.window3.$refs.jig1_2.$refs.p2.loadAndViewImage(url);
               }
             }
             // 第二个窗口
            if(this.jigsawindex === 3){  // 第二个jigsawindex
               if( this.jigclickIndex === 1){
                 this.$refs.window3.$refs.jig1_3.$refs.p1.loadAndViewImage(url);
               }
              if( this.jigclickIndex === 2){
                 this.$refs.window3.$refs.jig1_3.$refs.p2.loadAndViewImage(url);
               }
             }
            if(this.jigsawindex === 4){  // 第三个jigsawindex
              if( this.jigclickIndex === 1){
                this.$refs.window3.$refs.jig1_4.$refs.p1.loadAndViewImage(url);
              }else if( this.jigclickIndex === 2){
                this.$refs.window3.$refs.jig1_4.$refs.p2.loadAndViewImage(url);
              }else if(this.jigclickIndex === 3){
                this.$refs.window3.$refs.jig1_4.$refs.p3.loadAndViewImage(url);
              }else if(this.jigclickIndex === 4){
                this.$refs.window3.$refs.jig1_4.$refs.p4.loadAndViewImage(url);
              }
            }
           }else if(this.windowClickIndex === 2){
             if(this.jigsawindex === 2){   // 第一个jigsawindex
               if( this.jigclickIndex === 1){
                 this.$refs.window3.$refs.jig2_2.$refs.p1.loadAndViewImage(url);
               }else if( this.jigclickIndex === 2){
                 this.$refs.window3.$refs.jig2_2.$refs.p2.loadAndViewImage(url);
               }
             }
             // 第二个窗口
            if(this.jigsawindex === 3){  // 第二个jigsawindex
               if( this.jigclickIndex === 1){
                 this.$refs.window3.$refs.jig2_3.$refs.p1.loadAndViewImage(url);
               }
              if( this.jigclickIndex === 2){
                 this.$refs.window3.$refs.jig2_3.$refs.p2.loadAndViewImage(url);
               }
             }
            if(this.jigsawindex === 4){  // 第三个jigsawindex
              if( this.jigclickIndex === 1){
                this.$refs.window3.$refs.jig2_4.$refs.p1.loadAndViewImage(url);
              }else if( this.jigclickIndex === 2){
                this.$refs.window3.$refs.jig2_4.$refs.p2.loadAndViewImage(url);
              }else if(this.jigclickIndex === 3){
                this.$refs.window3.$refs.jig2_4.$refs.p3.loadAndViewImage(url);
              }else if(this.jigclickIndex === 4){
                this.$refs.window3.$refs.jig2_4.$refs.p4.loadAndViewImage(url);
              }
            }
           }
          }else if(this.windowindex == 4){  // 田字格
            if(this.windowClickIndex === 1){ // 第一个windowindexson
             if(this.jigsawindex === 2){   // 第一个jigsawindex
               if( this.jigclickIndex === 1){
                 this.$refs.window4.$refs.jig1_2.$refs.p1.loadAndViewImage(url);
               }else if( this.jigclickIndex === 2){
                 this.$refs.window4.$refs.jig1_2.$refs.p2.loadAndViewImage(url);
               }
             }
             // 第二个窗口
            if(this.jigsawindex === 3){  // 第二个jigsawindex
               if( this.jigclickIndex === 1){
                 this.$refs.window4.$refs.jig1_3.$refs.p1.loadAndViewImage(url);
               }
              if( this.jigclickIndex === 2){
                 this.$refs.window4.$refs.jig1_3.$refs.p2.loadAndViewImage(url);
               }
             }
            if(this.jigsawindex === 4){  // 第三个jigsawindex
              if( this.jigclickIndex === 1){
                this.$refs.window4.$refs.jig1_4.$refs.p1.loadAndViewImage(url);
              }else if( this.jigclickIndex === 2){
                this.$refs.window4.$refs.jig1_4.$refs.p2.loadAndViewImage(url);
              }else if(this.jigclickIndex === 3){
                this.$refs.window4.$refs.jig1_4.$refs.p3.loadAndViewImage(url);
              }else if(this.jigclickIndex === 4){
                this.$refs.window4.$refs.jig1_4.$refs.p4.loadAndViewImage(url);
              }
            }
           }else if(this.windowClickIndex === 2){
             if(this.jigsawindex === 2){   // 第一个jigsawindex
               if( this.jigclickIndex === 1){
                 this.$refs.window4.$refs.jig2_2.$refs.p1.loadAndViewImage(url);
               }else if( this.jigclickIndex === 2){
                 this.$refs.window4.$refs.jig2_2.$refs.p2.loadAndViewImage(url);
               }
             }
             // 第二个窗口
            if(this.jigsawindex === 3){  // 第二个jigsawindex
               if( this.jigclickIndex === 1){
                 this.$refs.window4.$refs.jig2_3.$refs.p1.loadAndViewImage(url);
               }
              if( this.jigclickIndex === 2){
                 this.$refs.window4.$refs.jig2_3.$refs.p2.loadAndViewImage(url);
               }
             }
            if(this.jigsawindex === 4){  // 第三个jigsawindex
              if( this.jigclickIndex === 1){
                this.$refs.window4.$refs.jig2_4.$refs.p1.loadAndViewImage(url);
              }else if( this.jigclickIndex === 2){
                this.$refs.window4.$refs.jig2_4.$refs.p2.loadAndViewImage(url);
              }else if(this.jigclickIndex === 3){
                this.$refs.window4.$refs.jig2_4.$refs.p3.loadAndViewImage(url);
              }else if(this.jigclickIndex === 4){
                this.$refs.window4.$refs.jig2_4.$refs.p4.loadAndViewImage(url);
              }
            }
           }else if(this.windowClickIndex === 3){
             if(this.jigsawindex === 2){   // 第一个jigsawindex
               if( this.jigclickIndex === 1){
                 this.$refs.window4.$refs.jig2_2.$refs.p1.loadAndViewImage(url);
               }else if( this.jigclickIndex === 2){
                 this.$refs.window4.$refs.jig2_2.$refs.p2.loadAndViewImage(url);
               }
             }
             // 第二个窗口
            if(this.jigsawindex === 3){  // 第二个jigsawindex
               if( this.jigclickIndex === 1){
                 this.$refs.window4.$refs.jig3_3.$refs.p1.loadAndViewImage(url);
               }
              if( this.jigclickIndex === 2){
                 this.$refs.window4.$refs.jig3_3.$refs.p2.loadAndViewImage(url);
               }
             }
            if(this.jigsawindex === 4){  // 第三个jigsawindex
              if( this.jigclickIndex === 1){
                this.$refs.window4.$refs.jig3_4.$refs.p1.loadAndViewImage(url);
              }else if( this.jigclickIndex === 2){
                this.$refs.window4.$refs.jig3_4.$refs.p2.loadAndViewImage(url);
              }else if(this.jigclickIndex === 3){
                this.$refs.window4.$refs.jig3_4.$refs.p3.loadAndViewImage(url);
              }else if(this.jigclickIndex === 4){
                this.$refs.window4.$refs.jig3_4.$refs.p4.loadAndViewImage(url);
              }
            }
           }else if(this.windowClickIndex === 4){
             if(this.jigsawindex === 2){   // 第一个jigsawindex
               if( this.jigclickIndex === 1){
                 this.$refs.window4.$refs.jig4_2.$refs.p1.loadAndViewImage(url);
               }else if( this.jigclickIndex === 2){
                 this.$refs.window4.$refs.jig4_2.$refs.p2.loadAndViewImage(url);
               }
             }
             // 第二个窗口
            if(this.jigsawindex === 3){  // 第二个jigsawindex
               if( this.jigclickIndex === 1){
                 this.$refs.window4.$refs.jig4_3.$refs.p1.loadAndViewImage(url);
               }
              if( this.jigclickIndex === 2){
                 this.$refs.window4.$refs.jig4_3.$refs.p2.loadAndViewImage(url);
               }
             }
            if(this.jigsawindex === 4){  // 第三个jigsawindex
              if( this.jigclickIndex === 1){
                this.$refs.window4.$refs.jig4_4.$refs.p1.loadAndViewImage(url);
              }else if( this.jigclickIndex === 2){
                this.$refs.window4.$refs.jig4_4.$refs.p2.loadAndViewImage(url);
              }else if(this.jigclickIndex === 3){
                this.$refs.window4.$refs.jig4_4.$refs.p3.loadAndViewImage(url);
              }else if(this.jigclickIndex === 4){
                this.$refs.window4.$refs.jig4_4.$refs.p4.loadAndViewImage(url);
              }
            }
           }
          } 
        }
    },
    jigclick(val){
      this.jigclickIndex = val;
      console.log(this.jigclickIndex);
    }

.middle{
    width:60%;
    height:400px;
    // background-color:white;
    .header{
      height:160px;
      .box_f{
        width:45%;
        height:140px;
        border:1px solid #9d9e9f;
        margin-top:10px;
        margin-left:3%;
        display:inline-block;
        color:#606266
        .title{
          width:30%;
          height:20px;
          line-height:20px;
          margin:-10px auto;
          background-color:#d4d4d4;
          text-align:center;
        }
        .box_f_s{
          width:20%;
          height:100px;
          border:2px solid #9d9e9f;
          display:inline-block;
          margin-top:16px;
          margin-left:3%;
          .bottom{
            width:50%;
          }
        }
      }
    }
    .blackBox{
      width:93%;
      height:600px;
      background-color:black;
      margin:0 auto;
    }
    .blackSmallBox{
      width:93%;
      height:140px;
      margin: 20px auto;
      white-space:nowrap;
      // min-width:1000px;
      overflow-x:auto;
      overflow-y:hidden;
      .son{
        width:16%;
        height:140px;
        background-color:black;
        margin-right:0.2%;
        display:inline-block;
      }
    }
  }

组件windowindex2.vue

<template>
  <div>
    <div id="windowindex2son1"  @click="showSon(1)" :class="active1">
      <preview-dicom ref="p1" v-show="p1show"></preview-dicom>
      <jigsawindex2 ref="jig1_2" v-show="showjigsawindex1_2"  @clickjig="clickjig1_2"/>
      <jigsawindex3 ref="jig1_3"  v-show="showjigsawindex1_3" @clickjig="clickjig1_3"/>
      <jigsawindex4 ref="jig1_4"  v-show="showjigsawindex1_4" @clickjig="clickjig1_4" />
    </div>
    <div id="windowindex2son2" @click="showSon(2)" :class="active2">
       <preview-dicom ref="p2" v-show="p2show"></preview-dicom>
      <jigsawindex2 ref="jig2_2"  v-show="showjigsawindex2_2" @clickjig="clickjig2_2"/>
      <jigsawindex3 ref="jig2_3" v-show="showjigsawindex2_3" @clickjig="clickjig2_3"/>
      <jigsawindex4 ref="jig2_4"  v-show="showjigsawindex2_4" @clickjig="clickjig2_4"/>
    </div>
  </div>
</template>

<script>
import jigsawindex2 from './../jigsaw/jigsawindex2.vue';
import jigsawindex3 from '../jigsaw/jigsawindex3.vue';
import jigsawindex4 from '../jigsaw/jigsawindex4.vue';
import previewDicom from 'Components/previewDicom';
  export default {
    components:{
      jigsawindex2,
      jigsawindex3,
      jigsawindex4,
      previewDicom
    },
    data() {
      return {
        ip: this.CONSTANT.CONSTANT.WEB_URL,
        showjigsawindex1_2: false,
        showjigsawindex1_3: false,
        showjigsawindex1_4: false,
        showjigsawindex2_2: false,
        showjigsawindex2_3: false,
        showjigsawindex2_4: false,
        xname: '',
        xclass: '',
        active1:[],
        active2:[],
        imgurl:'',
        p1show: true,
        p2show: true
        // url1_3: "http://127.0.0.1/testDICOM/CTStudy/1.5191KB.DCM"
      }
    },
    watch:{
      xname: function(){
        eval('this.'+ this.xname+'()');
      },
      xclass: function(){
        eval('this.'+ this.xclass+'()');
      },
    },
    created: function () {
    },
    methods: {
      showSon(index){
        console.log(index)
        this.$emit('windowIndex', index)
      },
      changejigsawindex1_1(){
        this.showjigsawindex1_3 = false;
        this.showjigsawindex1_4 = false;
        this.showjigsawindex1_2 = false;
      },
      changejigsawindex1_2(){
        this.showjigsawindex1_3 = false;
        this.showjigsawindex1_4 = false;
        this.showjigsawindex1_2 = true;
      },
      changejigsawindex1_3(){
        this.showjigsawindex1_4 = false;
        this.showjigsawindex1_2 = false;
        this.showjigsawindex1_3 = true;
        
      },
      changejigsawindex1_4(){
        this.showjigsawindex1_3 = false;
        this.showjigsawindex1_2 = false;
        this.showjigsawindex1_4 = true;
      },
      changejigsawindex2_1(){
        this.showjigsawindex2_3 = false;
        this.showjigsawindex2_4 = false;
        this.showjigsawindex2_2 = false;
      },
      changejigsawindex2_2(){
        this.showjigsawindex2_4 = false;
        this.showjigsawindex2_3 = false;
        this.showjigsawindex2_2 = true;
      },
      changejigsawindex2_3(){
        this.showjigsawindex2_2 = false;
        this.showjigsawindex2_4 = false;
        this.showjigsawindex2_3 = true;
      },
      changejigsawindex2_4(){
        this.showjigsawindex2_2 = false;
        this.showjigsawindex2_3 = false;
        this.showjigsawindex2_4 = true; 
      },
      // changeClass2_1(){
      //   console.log('class+++',1);
      //   this.active2 = [];
      //   this.active1.push('active');
      //   this.$refs.jig1_2.xclass = 'jigclass0';
      // },
      // changeClass2_2(){
      //   console.log('class+++',2);
      //   this.active1 = [];
      //   this.active2.push('active');
      //   this.$refs.jig1_2.xclass = 'jigclass0';
      // },
      clickjig1_2(val){
        console.log('[*] 内部点击', val);
        this.active1 = [];
        this.active2 = [];
        // this.$refs.jig2_2.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig1_2.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clickjig1_3(val){
        console.log('[*] 1-3内部点击', val);
        this.active1 = [];
        this.active2 = [];
        // this.$refs.jig2_3.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig1_3.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clickjig1_4(val){
        console.log('[*] 1-3内部点击', val);
        this.active1 = [];
        this.active2 = [];
        // this.$refs.jig2_4.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig1_4.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clickjig2_2(val){
        console.log('[*] 内部点击', val);
        this.active1 = [];
        this.active2 = [];
        // this.$refs.jig1_2.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig2_2.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clickjig2_3(val){
        console.log('[*] 内部点击', val);
        this.active1 = [];
        this.active2 = [];
        // this.$refs.jig1_3.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig2_3.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clickjig2_4(val){
        console.log('[*] 1-3内部点击', val);
        this.active1 = [];
        this.active2 = [];
        // this.$refs.jig1_4.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig2_4.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clearAll(){
        this.$refs.jig1_2.xclass = 'jigclass0';
        this.$refs.jig1_3.xclass = 'jigclass0';
        this.$refs.jig1_4.xclass = 'jigclass0';
        this.$refs.jig2_2.xclass = 'jigclass0';
        this.$refs.jig2_3.xclass = 'jigclass0';
        this.$refs.jig2_4.xclass = 'jigclass0';
      }
    }
  }
</script>

<style scoped lang="stylus">
  #windowindex2son1{
    width:100%;
    height:298px;
    border-bottom:2px solid white;
  }
  #windowindex2son2{
    width:100%;
    height:300px;
  }
  .active{
    background-color:#C0C0C0;
  }
</style>

组件windowindex3.vue

<template>
  <div style="width:100%; height:100%;">
    <div id="windowindex3son1" @click="showSon(1)">
      <preview-dicom ref="p1" v-show="p1show"></preview-dicom>
      <jigsawindex2 ref="jig1_2" v-show="showjigsawindex1_2"  @clickjig="clickjig1_2"/>
      <jigsawindex3 ref="jig1_3"  v-show="showjigsawindex1_3" @clickjig="clickjig1_3"/>
      <jigsawindex4 ref="jig1_4"  v-show="showjigsawindex1_4" @clickjig="clickjig1_4" />
    </div>
    <div id="windowindex3son2" @click="showSon(2)">
      <preview-dicom ref="p2" v-show="p2show"></preview-dicom>
      <jigsawindex2 ref="jig2_2"  v-show="showjigsawindex2_2" @clickjig="clickjig2_2"/>
      <jigsawindex3 ref="jig2_3" v-show="showjigsawindex2_3" @clickjig="clickjig2_3"/>
      <jigsawindex4 ref="jig2_4"  v-show="showjigsawindex2_4" @clickjig="clickjig2_4"/>
    </div>
  </div>
</template>

<script>
import jigsawindex2 from './../jigsaw/jigsawindex2.vue';
import jigsawindex3 from '../jigsaw/jigsawindex3.vue';
import jigsawindex4 from '../jigsaw/jigsawindex4.vue';
import previewDicom from 'Components/previewDicom';
  export default {
    components:{
      jigsawindex2,
      jigsawindex3,
      jigsawindex4,
      previewDicom
    },
    data() {
      return {
        ip: this.CONSTANT.CONSTANT.WEB_URL,
        showjigsawindex1_2: false,
        showjigsawindex1_3: false,
        showjigsawindex1_4: false,
        showjigsawindex2_2: false,
        showjigsawindex2_3: false,
        showjigsawindex2_4: false,
        xname: '',
        p1show: true,
        p2show: true
      }
    },
    watch:{
      xname: function(){
        eval('this.'+ this.xname+'()');
      }
    },
    created: function () {
    
    },
    mounted: function () {

    },
    methods: {
      showSon(index){
        console.log(index)
        this.$emit('windowIndex', index)
      },
      changejigsawindex1_1(){
        this.showjigsawindex1_3 = false;
        this.showjigsawindex1_4 = false;
        this.showjigsawindex1_2 = false;
      },
      changejigsawindex1_2(){
        this.showjigsawindex1_3 = false;
        this.showjigsawindex1_4 = false;
        this.showjigsawindex1_2 = true;
      },
      changejigsawindex1_3(){
        this.showjigsawindex1_4 = false;
        this.showjigsawindex1_2 = false;
        this.showjigsawindex1_3 = true;
        
      },
      changejigsawindex1_4(){
        this.showjigsawindex1_3 = false;
        this.showjigsawindex1_2 = false;
        this.showjigsawindex1_4 = true;
      },
      changejigsawindex2_1(){
        this.showjigsawindex2_3 = false;
        this.showjigsawindex2_4 = false;
        this.showjigsawindex2_2 = false;
      },
      changejigsawindex2_2(){
        this.showjigsawindex2_4 = false;
        this.showjigsawindex2_3 = false;
        this.showjigsawindex2_2 = true;
      },
      changejigsawindex2_3(){
        this.showjigsawindex2_2 = false;
        this.showjigsawindex2_2 = false;
        this.showjigsawindex2_3 = true;
      },
      changejigsawindex2_4(){
        this.showjigsawindex2_2 = false;
        this.showjigsawindex2_3 = false;
        this.showjigsawindex2_4 = true;
      },
      clickjig1_2(val){
        console.log('[*] 内部点击', val);
        this.active1 = [];
        this.active2 = [];
        // this.$refs.jig2_2.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig1_2.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clickjig1_3(val){
        console.log('[*] 1-3内部点击', val);
        this.active1 = [];
        this.active2 = [];
        // this.$refs.jig2_3.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig1_3.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clickjig1_4(val){
        console.log('[*] 1-3内部点击', val);
        this.active1 = [];
        this.active2 = [];
        // this.$refs.jig2_4.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig1_4.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clickjig2_2(val){
        console.log('[*] 内部点击', val);
        this.active1 = [];
        this.active2 = [];
        // this.$refs.jig1_2.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig2_2.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clickjig2_3(val){
        console.log('[*] 内部点击', val);
        this.active1 = [];
        this.active2 = [];
        // this.$refs.jig1_3.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig2_3.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clickjig2_4(val){
        console.log('[*] 1-3内部点击', val);
        this.active1 = [];
        this.active2 = [];
        // this.$refs.jig1_4.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig2_4.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clearAll(){
        this.$refs.jig1_2.xclass = 'jigclass0';
        this.$refs.jig1_3.xclass = 'jigclass0';
        this.$refs.jig1_4.xclass = 'jigclass0';
        this.$refs.jig2_2.xclass = 'jigclass0';
        this.$refs.jig2_3.xclass = 'jigclass0';
        this.$refs.jig2_4.xclass = 'jigclass0';
      }
    }
  }
</script>

<style scoped lang="stylus">
  #windowindex3son1{
    width:50%;
    height:600px;
    border-right:2px solid white;
    float:left;
  }
  #windowindex3son2{
    width:49%;
    height:600px;
    display:inline-block;
  }
</style>

组件windowindex4.vue

<template>
  <div >
    <div id="windowindex41">
      <div id="windowindex4son1"  @click="showSon(1)">
        <preview-dicom ref="p1" v-show="p1show"></preview-dicom>
         <jigsawindex2 ref="jig1_2" v-show="showjigsawindex1_2"  @clickjig="clickjig1_2"/>
        <jigsawindex3 ref="jig1_3"  v-show="showjigsawindex1_3" @clickjig="clickjig1_3"/>
        <jigsawindex4 ref="jig1_4"  v-show="showjigsawindex1_4" @clickjig="clickjig1_4" />
      </div>
      <div id="windowindex4son2"  @click="showSon(2)">
        <preview-dicom ref="p2" v-show="p2show"></preview-dicom>
         <jigsawindex2 ref="jig2_2"  v-show="showjigsawindex2_2" @clickjig="clickjig2_2"/>
        <jigsawindex3 ref="jig2_3" v-show="showjigsawindex2_3" @clickjig="clickjig2_3"/>
        <jigsawindex4 ref="jig2_4"  v-show="showjigsawindex2_4" @clickjig="clickjig2_4"/>
      </div>
    </div>
     <div id="windowindex4son3"  @click="showSon(3)">
       <preview-dicom ref="p3" v-show="p3show"></preview-dicom>
        <jigsawindex2 ref="jig3_2"  v-show="showjigsawindex3_2" @clickjig="clickjig3_2"/>
        <jigsawindex3 ref="jig3_3"  v-show="showjigsawindex3_3" @clickjig="clickjig3_3"/>
        <jigsawindex4 ref="jig3_4"  v-show="showjigsawindex3_4" @clickjig="clickjig3_4" />
    </div>
     <div id="windowindex4son4"  @click="showSon(4)">
       <preview-dicom ref="p4" v-show="p4show"></preview-dicom>
        <jigsawindex2 ref="jig4_2"  v-show="showjigsawindex4_2" @clickjig="clickjig4_2"/>
        <jigsawindex3 ref="jig4_3"  v-show="showjigsawindex4_3"  @clickjig="clickjig4_3"/>
        <jigsawindex4 ref="jig4_4"  v-show="showjigsawindex4_4"  @clickjig="clickjig4_4"/>
    </div>
  </div>
</template>

<script>
import jigsawindex2 from './../jigsaw/jigsawindex2.vue';
import jigsawindex3 from '../jigsaw/jigsawindex3.vue';
import jigsawindex4 from '../jigsaw/jigsawindex4.vue';
import previewDicom from 'Components/previewDicom';
  export default {
    components:{
      jigsawindex2,
      jigsawindex3,
      jigsawindex4,
      previewDicom
    },
    data() {
      return {
        ip: this.CONSTANT.CONSTANT.WEB_URL,
        showjigsawindex1_2: false,
        showjigsawindex1_3: false,
        showjigsawindex1_4: false,
        showjigsawindex2_2: false,
        showjigsawindex2_3: false,
        showjigsawindex2_4: false,
        showjigsawindex3_2: false,
        showjigsawindex3_3: false,
        showjigsawindex3_4: false,
        showjigsawindex4_2: false,
        showjigsawindex4_3: false,
        showjigsawindex4_4: false,
        xname: '',
        p1show: true,
        p2show: true,
        p3show: true,
        p4show: true,
      }
    },
    watch:{
      xname: function(){
        eval('this.'+ this.xname+'()');
      }
    },
    created: function () {
    
    },
    mounted: function () {

    },
    methods: {
      showSon(index){
        console.log(index)
        this.$emit('windowIndex', index)
      },
      changejigsawindex1_1(){
        this.showjigsawindex1_3 = false;
        this.showjigsawindex1_4 = false;
        this.showjigsawindex1_2 = false;
      },
      changejigsawindex1_2(){
        this.showjigsawindex1_3 = false;
        this.showjigsawindex1_4 = false;
        this.showjigsawindex1_2 = true;
      },
      changejigsawindex1_3(){
        this.showjigsawindex1_4 = false;
        this.showjigsawindex1_2 = false;
        this.showjigsawindex1_3 = true;
        
      },
      changejigsawindex1_4(){
        this.showjigsawindex1_3 = false;
        this.showjigsawindex1_2 = false;
        this.showjigsawindex1_4 = true;
      },
      changejigsawindex2_1(){
        this.showjigsawindex2_3 = false;
        this.showjigsawindex2_4 = false;
        this.showjigsawindex2_2 = false;
      },
      changejigsawindex2_2(){
        this.showjigsawindex2_4 = false;
        this.showjigsawindex2_3 = false;
        this.showjigsawindex2_2 = true;
      },
      changejigsawindex2_3(){
        this.showjigsawindex2_2 = false;
        this.showjigsawindex2_2 = false;
        this.showjigsawindex2_3 = true;
      },
      changejigsawindex2_4(){
        this.showjigsawindex2_2 = false;
        this.showjigsawindex2_3 = false;
        this.showjigsawindex2_4 = true;
      },
      changejigsawindex3_1(){
        this.showjigsawindex3_3 = false;
        this.showjigsawindex3_4 = false;
        this.showjigsawindex3_2 = false;
      },
      changejigsawindex3_2(){
        this.showjigsawindex3_4 = false;
        this.showjigsawindex3_3 = false;
        this.showjigsawindex3_2 = true;
      },
      changejigsawindex3_3(){
        this.showjigsawindex3_2 = false;
        this.showjigsawindex3_2 = false;
        this.showjigsawindex3_3 = true;
      },
      changejigsawindex3_4(){
        this.showjigsawindex3_2 = false;
        this.showjigsawindex3_3 = false;
        this.showjigsawindex3_4 = true;
      },
      changejigsawindex4_1(){
        this.showjigsawindex4_3 = false;
        this.showjigsawindex4_4 = false;
        this.showjigsawindex4_2 = false;
      },
      changejigsawindex4_2(){
        this.showjigsawindex4_4 = false;
        this.showjigsawindex4_3 = false;
        this.showjigsawindex4_2 = true;
      },
      changejigsawindex4_3(){
        this.showjigsawindex4_2 = false;
        this.showjigsawindex4_4 = false;
        this.showjigsawindex4_3 = true;
      },
      changejigsawindex4_4(){
        this.showjigsawindex4_2 = false;
        this.showjigsawindex4_3 = false;
        this.showjigsawindex4_4 = true;
      },
      clickjig1_2(val){
        console.log('[*] 内部点击', val);
        // this.$refs.jig2_2.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig1_2.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clickjig1_3(val){
        console.log('[*] 1-3内部点击', val);
        // this.$refs.jig2_3.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig1_3.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clickjig1_4(val){
        console.log('[*] 1-3内部点击', val);
        // this.$refs.jig2_4.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig1_4.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clickjig2_2(val){
        console.log('[*] 内部点击', val);
        // this.$refs.jig1_2.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig2_2.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clickjig2_3(val){
        console.log('[*] 内部点击', val);
        // this.$refs.jig1_3.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig2_3.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clickjig2_4(val){
        console.log('[*] 1-3内部点击', val);
        // this.$refs.jig1_4.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig2_4.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clearAll(){
        this.$refs.jig1_2.xclass = 'jigclass0';
        this.$refs.jig1_3.xclass = 'jigclass0';
        this.$refs.jig1_4.xclass = 'jigclass0';
        this.$refs.jig2_2.xclass = 'jigclass0';
        this.$refs.jig2_3.xclass = 'jigclass0';
        this.$refs.jig2_4.xclass = 'jigclass0';
        this.$refs.jig3_2.xclass = 'jigclass0';
        this.$refs.jig3_3.xclass = 'jigclass0';
        this.$refs.jig3_4.xclass = 'jigclass0';
        this.$refs.jig4_2.xclass = 'jigclass0';
        this.$refs.jig4_3.xclass = 'jigclass0';
        this.$refs.jig4_4.xclass = 'jigclass0';
      },
      clickjig3_2(val){
        console.log('[*] 内部点击', val);
        // this.$refs.jig1_2.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig3_2.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clickjig3_3(val){
        console.log('[*] 内部点击', val);
        // this.$refs.jig1_3.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig3_3.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clickjig3_4(val){
        console.log('[*] 1-3内部点击', val);

        // this.$refs.jig1_4.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig3_4.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clickjig4_2(val){
        console.log('[*] 内部点击', val);
        // this.$refs.jig1_2.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig4_2.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clickjig4_3(val){
        console.log('[*] 内部点击', val);
        // this.$refs.jig1_3.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig4_3.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
      clickjig4_4(val){
        console.log('[*] 1-3内部点击', val);
        // this.$refs.jig1_4.xclass = 'jigclass0';
        this.clearAll();
        this.$refs.jig4_4.xclass = 'jigclass'+val;
        this.$emit('jigclick', val);
      },
    }
  }
</script>

<style scoped lang="stylus">
  #windowindex41{
    height:298px;
    border-bottom:2px solid white;
  }
  #windowindex4son1{
    width:calc(50% - 2px);
    width:-moz-calc(50% - 2px);
    width:-webkit-calc(50% - 2px); 
    width:-o-calc(50% - 2px);
    width:-ms-calc(50% - 2px);
    height:298px;
    border-right:2px solid white;
    display:inline-block;
  }
  #windowindex4son2{
    width:49%;
    height:298px;
    display:inline-block;
  }
  #windowindex4son3{
    width:calc(50% - 2px);
    width:-moz-calc(50% - 2px);
    width:-webkit-calc(50% - 2px); 
    width:-o-calc(50% - 2px);
    width:-ms-calc(50% - 2px);
    height:300px;
    border-right:2px solid white;
    display:inline-block;
  }
  #windowindex4son4{
    width:49%;
    height:300px;
    display:inline-block;
  }
</style>

拼图组件jigsawindex2.vue

<template>
  <div style="height:100%;">
    <div id="windowindex2son1" @click="clickjig(1)" :class="active1">
      <preview-dicom ref="p1" ></preview-dicom>
    </div>
    <div id="windowindex2son2"  @click="clickjig(2)" :class="active2">
      <preview-dicom ref="p2" ></preview-dicom>
    </div>
  </div>
</template>

<script>
import previewDicom from 'Components/previewDicom';
  export default {
    components:{
      previewDicom
    },
    data() {
      return {
        ip: this.CONSTANT.CONSTANT.WEB_URL,
        windowindex2son1:[],
        active1:[],
        active2:[],
        xclass: ''
      }
    },
    watch: {
      xclass: function(){
        eval('this.'+ this.xclass+'()');
      },
    },

    created: function () {
    
    },
    mounted: function () {

    },
    methods: {
      clickjig(index){
        console.log(index);
        this.$emit('clickjig', index);
      },
      jigclass0(){
        this.active2=[];
        this.active1=[];
      },
      jigclass1(){
        this.active2=[];
        this.active1.push('active');
      },
      jigclass2(){
        this.active1=[];
        this.active2.push('active');
      }
    }
  }
</script>

<style scoped lang="stylus">
  #windowindex2son1{
    width:100%;
    height:calc(50% - 2px);
    height:-moz-calc(50% - 2px);
    height:-webkit-calc(50% - 2px); 
    height:-o-calc(50% - 2px);
    height:-ms-calc(50% - 2px);
    border-bottom:2px solid white;
  }
  #windowindex2son2{
    width:100%;
    width:100%;
    height:calc(50%);
    height:-moz-calc(50% );
    height:-webkit-calc(50%); 
    height:-o-calc(50%);
    height:-ms-calc(50%);
  }
  .active{
    background-color:#C0C0C0;
  }
</style>

拼图组件jigsawindex3.vue

<template>
  <div style="height:100%;">
    <div id="windowindex3son1" @click="clickjig(1)" :class="active1">
      <preview-dicom ref="p1" ></preview-dicom>
    </div>
    <div id="windowindex3son2" @click="clickjig(2)" :class="active2">
      <preview-dicom ref="p2" ></preview-dicom>
    </div>
  </div>
</template>

<script>
import previewDicom from 'Components/previewDicom';
  export default {
    components:{
      previewDicom
    },
    data() {
      return {
        ip: this.CONSTANT.CONSTANT.WEB_URL,
        active1:[],
        active2:[],
        xclass: ''
      }
    },
    watch: {
      xclass: function(){
        eval('this.'+ this.xclass+'()');
      },
    },
    created: function () {
    
    },
    mounted: function () {

    },
    methods: {
      clickjig(index){
        console.log(index);
        this.$emit('clickjig', index);
      },
      jigclass0(){
        this.active2=[];
        this.active1=[];
      },
      jigclass1(){
        this.active2=[];
        this.active1.push('active');
      },
      jigclass2(){
        this.active1=[];
        this.active2.push('active');
      }
    }
  }
</script>

<style scoped lang="stylus">
  #windowindex3son1{
    width:50%;
    height:100%;
    border-right:2px solid white;
    display:inline-block;
  }
  #windowindex3son2{
    width:48%;
    height:100%;
    display:inline-block;
  }
  .active{
    background-color:#C0C0C0;
  }
</style>

拼图组件jigsawindex4.vue

<template>
  <div style="height:100%;width:100%;">
    <div id="windowindex41">
      <div id="windowindex4son1" @click="clickjig(1)" :class="active1">
       <preview-dicom ref="p1" ></preview-dicom>
      </div>
      <div id="windowindex4son2" @click="clickjig(2)" :class="active2">
      <preview-dicom ref="p2" ></preview-dicom>
      </div>
    </div>
     <div id="windowindex4son3" @click="clickjig(3)" :class="active3">
      <preview-dicom ref="p3" ></preview-dicom>
    </div>
     <div id="windowindex4son4" @click="clickjig(4)" :class="active4">
      <preview-dicom ref="p4" ></preview-dicom>
    </div>
  </div>
</template>

<script>
import previewDicom from 'Components/previewDicom';
  export default {
    components:{
      previewDicom
    },
    data() {
      return {
        ip: this.CONSTANT.CONSTANT.WEB_URL,
        active1:[],
        active2:[],
        active3:[],
        active4:[],
        xclass: ''
      }
    },
    watch: {
      xclass: function(){
        eval('this.'+ this.xclass+'()');
      },
    },
    created: function () {
    
    },
    mounted: function () {

    },
    methods: {
      clickjig(index){
        console.log(index);
        this.$emit('clickjig', index);
      },
      jigclass0(){
        this.active2=[];
        this.active1=[];
        this.active3=[];
        this.active4=[];
      },
      jigclass1(){
        // this.active2=[];
        this.jigclass0()
        this.active1.push('active');
      },
      jigclass2(){
        // this.active1=[];
         this.jigclass0()
        this.active2.push('active');
      },
      jigclass3(){
        // this.active1=[];
         this.jigclass0()
        this.active3.push('active');
      },
      jigclass4(){
        // this.active1=[];
         this.jigclass0()
        this.active4.push('active');
      }
    }
  }
</script>

<style scoped lang="stylus">
  #windowindex41{
    width:100%;
    height:calc(50% - 2px);
    height:-moz-calc(50% - 2px);
    height:-webkit-calc(50% - 2px); 
    height:-o-calc(50% - 2px);
    height:-ms-calc(50% - 2px);
    border-bottom:2px solid white;
  }
  #windowindex4son1{
    width:calc(50% - 2px);
    width:-moz-calc(50% - 2px);
    width:-webkit-calc(50% - 2px); 
    width:-o-calc(50% - 2px);
    width:-ms-calc(50% - 2px);
    height:100%;
    border-right:2px solid white;
    float:left;
  }
  #windowindex4son2{
    width:48%;
    height:100%;
    display:inline-block;
    float:left;
  }
  #windowindex4son3{
    width:calc(50% - 2px);
    width:-moz-calc(50% - 2px);
    width:-webkit-calc(50% - 2px); 
    width:-o-calc(50% - 2px);
    width:-ms-calc(50% - 2px);
    height:50%;
    border-right:2px solid white;
    display:inline-block;
    float:left;
  }
  #windowindex4son4{
    width:48%;
    height:50%;
    display:inline-block;
    float:left;
  }
  .active{
    background-color:#C0C0C0;
  }
</style>

上述就是基本代码，还是比较简单。

部分完成截图：16个格子

posted on 2018-08-28 13:41 不爱贞子爱爽子阅读(372) 评论(0) 收藏举报

ど う も あ り が と う ! !

どうもありがとう ! !