环境: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="100%;height:49px;border-bottom:2px solid #9d9e9f"></div>
</div>
<div class="box_f_s" @click="selectWindow(3)">
<div style="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="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="100%;height:49px;border-bottom:2px solid #9d9e9f"></div>
</div>
<div class="box_f_s" @click="selectJigsaw(3)">
<div style="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="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{ 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{ 100%; height:298px; border-bottom:2px solid white; } #windowindex2son2{ 100%; height:300px; } .active{ background-color:#C0C0C0; } </style>
组件windowindex3.vue
<template> <div style="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{ 50%; height:600px; border-right:2px solid white; float:left; } #windowindex3son2{ 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{ calc(50% - 2px); -moz-calc(50% - 2px); -webkit-calc(50% - 2px); -o-calc(50% - 2px); -ms-calc(50% - 2px); height:298px; border-right:2px solid white; display:inline-block; } #windowindex4son2{ 49%; height:298px; display:inline-block; } #windowindex4son3{ calc(50% - 2px); -moz-calc(50% - 2px); -webkit-calc(50% - 2px); -o-calc(50% - 2px); -ms-calc(50% - 2px); height:300px; border-right:2px solid white; display:inline-block; } #windowindex4son4{ 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{ 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{ 100%; 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{ 50%; height:100%; border-right:2px solid white; display:inline-block; } #windowindex3son2{ 48%; height:100%; display:inline-block; } .active{ background-color:#C0C0C0; } </style>
拼图组件jigsawindex4.vue
<template> <div style="height:100%;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{ 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{ calc(50% - 2px); -moz-calc(50% - 2px); -webkit-calc(50% - 2px); -o-calc(50% - 2px); -ms-calc(50% - 2px); height:100%; border-right:2px solid white; float:left; } #windowindex4son2{ 48%; height:100%; display:inline-block; float:left; } #windowindex4son3{ calc(50% - 2px); -moz-calc(50% - 2px); -webkit-calc(50% - 2px); -o-calc(50% - 2px); -ms-calc(50% - 2px); height:50%; border-right:2px solid white; display:inline-block; float:left; } #windowindex4son4{ 48%; height:50%; display:inline-block; float:left; } .active{ background-color:#C0C0C0; } </style>
上述就是基本代码,还是比较简单。
部分完成截图:16个格子