622 lines
		
	
	
		
			23 KiB
		
	
	
	
		
			Plaintext
		
	
	
			
		
		
	
	
			622 lines
		
	
	
		
			23 KiB
		
	
	
	
		
			Plaintext
		
	
	
| <template>
 | |
|   <div class="viewerContainer">
 | |
|     <div class="viewerContentWrapper">
 | |
|       <div class="viewerLeftSidePanel">
 | |
|         <div id="listWrapper" class="sidePanelBody">
 | |
|           <div class="sidePanelThumbs">
 | |
|             <el-tabs v-model="activeName" type="border-card" @tab-click="handleTabClick">
 | |
|               <el-tab-pane label="当前检查" name="current-study">
 | |
|                 <div class="text-desc">
 | |
|                   {{ visitInfo }}
 | |
|                 </div>
 | |
|                 <div class="viewerSidethumbs ps" style="position: relative;">
 | |
|                   <div class="viewerSidethumbinner">
 | |
|                     <div
 | |
|                       v-for="(study, index) in studyList"
 | |
|                       :key="index"
 | |
|                     >
 | |
|                       <div class="text-desc">
 | |
|                         {{ study.StudyCode }}
 | |
|                       </div>
 | |
|                       <div v-show="study.Description" class="text-desc">
 | |
|                         {{ study.Description }}
 | |
|                       </div>
 | |
|                       <div v-show="study.SeriesCount" class="text-desc">
 | |
|                         {{ study.Modalities }} : {{ study.SeriesCount }} Series
 | |
|                       </div>
 | |
|                       <div
 | |
|                         v-for="(series, i) in study.SeriesList"
 | |
|                         :key="i"
 | |
|                         class="viewernavigatorwrapper"
 | |
|                         :class="{'viewerSideActive': i==0 && index === 0}"
 | |
|                         style="position: relative;"
 | |
|                         series-type="current"
 | |
|                         @click="showSeriesImage($event,index,i,series)"
 | |
|                       >
 | |
|                         <el-image
 | |
|                           class="image-preview"
 | |
|                           style="height:72px;width:72px;"
 | |
|                           :src="series.previewImageUrl"
 | |
|                           fit="fill"
 | |
|                         />
 | |
|                         <div class="viewernavitextwrapper">
 | |
|                           <div style="padding: 1px;">
 | |
|                             #{{ series.seriesNumber }}
 | |
|                           </div>
 | |
|                           <div v-show="series.InstanceCount" style="padding: 1px;">
 | |
|                             {{ series.modality }}: {{ series.instanceCount }} image
 | |
|                           </div>
 | |
|                           <div v-show=" series.sliceThickness" style="padding: 1px;">
 | |
|                             T: {{ series.sliceThickness }}
 | |
|                           </div>
 | |
|                           <div v-show="series.description" style="padding: 1x;">
 | |
|                             {{ series.description }}
 | |
|                           </div>
 | |
|                           <div style="padding: 1px;">
 | |
|                             {{ series.prefetchInstanceCount }}/{{ series.instanceCount }}
 | |
|                           </div>
 | |
| 
 | |
|                         </div>
 | |
|                         <div style="position: absolute;bottom: -10px;left: 0;width: 100%;">
 | |
|                           <el-progress v-if="series.prefetchInstanceCount>0 && series.prefetchInstanceCount<series.instanceCount" :percentage="Number(series.prefetchInstanceCount/series.instanceCount)*100" />
 | |
|                         </div>
 | |
| 
 | |
|                       </div>
 | |
|                     </div>
 | |
| 
 | |
|                   </div>
 | |
|                 </div>
 | |
|               </el-tab-pane>
 | |
|               <el-tab-pane label="关联检查" name="relation-study" class="pane-relation-wrapper">
 | |
|                 <div>
 | |
|                   <div v-for="(study, keyIndex) in relationStudyList" :key="keyIndex" style="margin-bottom: 5px;">
 | |
|                     <div :class="['text-desc', 'relationVisit', `relation-study-wrapper-${keyIndex}`]" @click="getRelationSeriesByStudy(study.StudyId,keyIndex)">
 | |
|                       <span v-show="study.VisitName">{{ study.VisitName }} </span>
 | |
|                       <span v-show="study.StudyCode"> : {{ study.StudyCode }}</span>
 | |
| 
 | |
|                       <div v-show="study.Modalities">
 | |
|                         {{ study.Modalities }} : {{ study.SeriesCount }} Series
 | |
|                       </div>
 | |
|                       <div v-show="study.Description">
 | |
|                         {{ study.Description }}
 | |
|                       </div>
 | |
|                     </div>
 | |
| 
 | |
|                     <div v-if="study.seriesList && study.showSeries" class="viewerSidethumbs ps" style="position: relative;">
 | |
|                       <div class="viewerSidethumbinner">
 | |
|                         <div
 | |
|                           v-for="(seriesItem, index) in study.seriesList"
 | |
|                           :key="index"
 | |
|                           class="viewernavigatorwrapper"
 | |
|                           style="position: relative;"
 | |
|                           series-type="relation"
 | |
|                           @click="showRelationSeriesImage($event,seriesItem,index)"
 | |
|                         >
 | |
|                           <el-image
 | |
|                             class="image-preview"
 | |
|                             style="height:72px;width:72px;"
 | |
|                             :src="seriesItem.previewImageUrl"
 | |
|                             fit="fill"
 | |
|                           />
 | |
|                           <div class="viewernavitextwrapper">
 | |
|                             <div v-if="seriesItem.keySeries" style="padding: 1px;color:red">
 | |
|                               Key Images
 | |
|                             </div>
 | |
|                             <div v-else style="padding: 1px;">
 | |
|                               #{{ seriesItem.seriesNumber }}
 | |
|                             </div>
 | |
|                             <div v-show=" seriesItem.instanceCount" style="padding: 1px;">
 | |
|                               {{ seriesItem.modality }}: {{ seriesItem.instanceCount }} image
 | |
|                             </div>
 | |
|                             <div v-show="seriesItem.sliceThickness" style="padding: 1px;">
 | |
|                               T: {{ seriesItem.sliceThickness }}
 | |
|                             </div>
 | |
|                             <div v-show="seriesItem.description" style="padding: 1x;">
 | |
|                               {{ seriesItem.description }}
 | |
|                             </div>
 | |
|                           </div>
 | |
|                           <!-- <div style="position: absolute;bottom: -10px;left: 0;width: 100%;">
 | |
|                             <el-progress v-if="seriesItem.prefetchInstanceCount>0 && seriesItem.prefetchInstanceCount<seriesItem.instanceCount" :percentage="Number(seriesItem.prefetchInstanceCount/seriesItem.instanceCount)*100" />
 | |
|                           </div> -->
 | |
|                         </div>
 | |
|                       </div>
 | |
|                     </div>
 | |
|                   </div>
 | |
|                 </div>
 | |
|               </el-tab-pane>
 | |
|             </el-tabs>
 | |
|           </div>
 | |
|         </div>
 | |
|       </div>
 | |
|       <div class="viewerContent">
 | |
|         <dicom-viewer id="dicomViewer" ref="dicomViewer" style="height:100%" />
 | |
|       </div>
 | |
|     </div>
 | |
|   </div>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| import * as dicomParser from 'dicom-parser'
 | |
| import * as cornerstone from 'cornerstone-core'
 | |
| import * as cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader'
 | |
| import dicomViewer from '@/components/Dicom/DicomViewer'
 | |
| import { getVisitStudyList, getAllRelationStudyList, getStudyInfo, getSeriesList } from '@/api/reading'
 | |
| import requestPoolManager from '@/utils/request-pool'
 | |
| import store from '@/store'
 | |
| import { changeURLStatic } from '@/utils/history.js'
 | |
| cornerstoneWADOImageLoader.external.dicomParser = dicomParser
 | |
| cornerstoneWADOImageLoader.external.cornerstone = cornerstone
 | |
| const maximumSizeInBytes = 1024 * 1024 * 1024 // 1 GB
 | |
| export default {
 | |
|   name: 'DicomsOfVisit',
 | |
|   components: {
 | |
|     'dicom-viewer': dicomViewer
 | |
|   },
 | |
|   data() {
 | |
|     return {
 | |
|       studyList: [],
 | |
|       visitInfo: '',
 | |
|       activeName: 'current-study',
 | |
|       relationStudyList: [],
 | |
|       cachedImages: [],
 | |
|       isReading: null,
 | |
|       isStartLoad: false,
 | |
|       firstInstanceId: ''
 | |
|     }
 | |
|   },
 | |
|   mounted() {
 | |
|     if (this.$router.currentRoute.query.TokenKey) {
 | |
|       store.dispatch('user/setToken', this.$router.currentRoute.query.TokenKey)
 | |
|       changeURLStatic('TokenKey', '')
 | |
|     }
 | |
| 
 | |
|     this.trialId = this.$router.currentRoute.query.trialId
 | |
|     this.subjectVisitId = this.$router.currentRoute.query.subjectVisitId
 | |
|     this.visitInfo = this.$router.currentRoute.query.visitInfo
 | |
|     this.isReading = this.$router.currentRoute.query.isReading ? this.$router.currentRoute.query.isReading * 1 : 0
 | |
|     cornerstone.events.addEventListener('cornerstoneimageloaded', this.cornerstoneImageLoaded)
 | |
|     this.getStudiesInfo()
 | |
|   },
 | |
|   beforeDestroy() {
 | |
|     requestPoolManager.stopTaskTimer()
 | |
|   },
 | |
|   methods: {
 | |
|     // 获取某个访视下所有的检查信息
 | |
|     getStudiesInfo() {
 | |
|       this.studyList = []
 | |
|       getVisitStudyList(this.trialId, this.subjectVisitId, this.isReading).then(res => {
 | |
|         res.Result.forEach((study) => {
 | |
|           const data = {}
 | |
|           data.StudyId = study.StudyId
 | |
|           data.StudyCode = study.StudyCode
 | |
|           data.Modalities = study.Modalities
 | |
|           data.SeriesCount = study.SeriesCount
 | |
|           data.InstanceCount = study.InstanceCount
 | |
|           data.InstanceCount = study.InstanceCount
 | |
|           data.PreviewImageCount = 0
 | |
|           var seriesList = []
 | |
|           study.SeriesList.forEach((series) => {
 | |
|             const imageIds = []
 | |
| 
 | |
|             // series.InstanceList.forEach((id) => {
 | |
|             //   imageIds.push(`wadouri:/api/instance/content/${id}`)
 | |
|             // })
 | |
|             series.InstanceList.forEach((id) => {
 | |
|               imageIds.push(`wadouri:http://123.56.94.154:7000/instance/content/${id}`)
 | |
|             })
 | |
|             seriesList.push({
 | |
|               imageIds: imageIds,
 | |
|               seriesId: series.Id,
 | |
|               seriesUid: series.SeriesInstanceUid,
 | |
|               seriesNumber: series.SeriesNumber,
 | |
|               sliceThickness: series.SliceThickness,
 | |
|               modality: series.Modality,
 | |
|               description: series.Description,
 | |
|               previewImageUrl: `/api/series/preview/${series.Id}`,
 | |
|               instanceCount: series.InstanceCount,
 | |
|               prefetchInstanceCount: 0,
 | |
|               loadStatus: false,
 | |
|               imageloadedArr: []
 | |
|             })
 | |
|           })
 | |
|           data.SeriesList = seriesList
 | |
|           this.studyList.push(data)
 | |
|         })
 | |
|         if (this.studyList.length > 0) {
 | |
|           this.$refs.dicomViewer.loadImageStack(this.studyList[0].SeriesList[0])
 | |
|           this.firstInstanceId = this.studyList[0].SeriesList[0].imageIds[0]
 | |
|         }
 | |
|       })
 | |
|     },
 | |
|     showSeriesImage(e, studyIndex, seriesIndex, series) {
 | |
|       const element = e.currentTarget
 | |
|       const elements = document.querySelectorAll('[series-type]')
 | |
|       Array.from(elements).forEach((e) => {
 | |
|         e.classList.remove('viewerSideActive')
 | |
|       })
 | |
|       element.classList.add('viewerSideActive')
 | |
|       this.currentSeriesIndex = seriesIndex
 | |
|       this.$refs.dicomViewer.loadImageStack(this.studyList[studyIndex].SeriesList[seriesIndex])
 | |
|       if (!series.loadStatus) {
 | |
|         series.isLoading = true
 | |
|         var p = new Date().getTime()
 | |
|         series.imageIds.map((imageId, i) => {
 | |
|           var priority = ''
 | |
|           if (i === 0) {
 | |
|             priority = new Date(new Date().setHours(23, 59, 59, 999)).getTime()
 | |
|           } else {
 | |
|             priority = p - 1
 | |
|           }
 | |
| 
 | |
|           this.load(imageId, series.seriesId, priority)
 | |
|         })
 | |
|       }
 | |
|     },
 | |
|     // 切换关联检查Tab时获取关联检查信息
 | |
|     handleTabClick(tab, event) {
 | |
|       if (tab.name === 'relation-study' && this.relationStudyList.length <= 0) {
 | |
|         const loading = this.$loading({
 | |
|           target: document.querySelector('.pane-relation-wrapper'),
 | |
|           fullscreen: false,
 | |
|           lock: true,
 | |
|           text: 'Loading',
 | |
|           background: 'rgb(49 49 49 / 50%)',
 | |
|           spinner: 'el-icon-loading'
 | |
|         })
 | |
|         getAllRelationStudyList(this.subjectVisitId).then(res => {
 | |
|           loading.close()
 | |
|           this.relationStudyList = res.Result
 | |
|         }).catch(() => { loading.close() })
 | |
|       }
 | |
|     },
 | |
|     // 根据关联检查获取序列信息
 | |
|     getRelationSeriesByStudy(studyId, index) {
 | |
|       if (this.relationStudyList[index].seriesCount) {
 | |
|         this.relationStudyList[index].showSeries = !this.relationStudyList[index].showSeries
 | |
|         this.$forceUpdate()
 | |
|       } else {
 | |
|         const scope = this
 | |
|         const loading = this.$loading({
 | |
|           target: document.querySelector(`.relation-study-wrapper-${index}`),
 | |
|           fullscreen: false,
 | |
|           lock: true,
 | |
|           text: 'Loading',
 | |
|           background: 'rgb(49 49 49 / 50%)',
 | |
|           spinner: 'el-icon-loading'
 | |
|         })
 | |
|         getStudyInfo(studyId).then(data => {
 | |
|           scope.relationStudyList[index].studyCode = data.Result.StudyCode
 | |
|           scope.relationStudyList[index].modality = data.Result.Modalities
 | |
|           scope.relationStudyList[index].seriesCount = data.Result.SeriesCount
 | |
|           getSeriesList(`/series/list/${studyId}`).then(data => {
 | |
|             loading.close()
 | |
|             if (data.Result != null && data.Result.length > 0) {
 | |
|               var seriesList = []
 | |
|               const res = data.Result
 | |
|               res.forEach(function(item) {
 | |
|                 const imageIds = []
 | |
|                 // item.InstanceList.forEach(function(id) {
 | |
|                 //   imageIds.push(`wadouri:/api/instance/content/${id}`)
 | |
|                 // })
 | |
|                 item.InstanceList.forEach((id) => {
 | |
|                   imageIds.push(`wadouri:http://123.56.94.154:7000/instance/content/${id}`)
 | |
|                 })
 | |
|                 seriesList.push({
 | |
|                   imageIds: imageIds,
 | |
|                   seriesId: item.Id,
 | |
|                   seriesUid: item.SeriesInstanceUid,
 | |
|                   seriesNumber: item.SeriesNumber,
 | |
|                   sliceThickness: item.SliceThickness,
 | |
|                   modality: item.Modality,
 | |
|                   description: item.Description,
 | |
|                   previewImageUrl: `/api/series/preview/${item.Id}`,
 | |
|                   instanceCount: item.InstanceCount,
 | |
|                   prefetchInstanceCount: 0,
 | |
|                   hasLabel: item.HasLabel,
 | |
|                   keySeries: item.KeySeries,
 | |
|                   loadStatus: false,
 | |
|                   imageloadedArr: []
 | |
|                 })
 | |
|               })
 | |
|               scope.relationStudyList[index].seriesCount = seriesList.length
 | |
|               scope.relationStudyList[index].seriesList = seriesList
 | |
|               scope.relationStudyList[index].showSeries = true
 | |
|               scope.$forceUpdate()
 | |
|             }
 | |
|           }).catch(() => { loading.close() })
 | |
|         }).catch(() => { loading.close() })
 | |
|       }
 | |
|     },
 | |
|     showRelationSeriesImage(e, series, index) {
 | |
|       this.currentRelationIndex = index
 | |
|       const element = e.currentTarget
 | |
|       const elements = document.querySelectorAll('[series-type]')
 | |
|       Array.from(elements).forEach((e) => {
 | |
|         e.classList.remove('viewerSideActive')
 | |
|       })
 | |
|       element.classList.add('viewerSideActive')
 | |
|       this.$refs.dicomViewer.loadImageStack(series)
 | |
|     },
 | |
|     loadAllImages() {
 | |
|       var priority = new Date().getTime()
 | |
|       this.studyList[0].SeriesList.forEach(series => {
 | |
|         series.imageIds.forEach(imageId => {
 | |
|           priority--
 | |
|           this.load(imageId, series.seriesId, priority)
 | |
|         })
 | |
|       })
 | |
|     },
 | |
|     load(imageId, seriesId, priority = 999) {
 | |
|       return new Promise((resolve, reject) => {
 | |
|         requestPoolManager.loadAndCacheImagePlus(imageId, seriesId, priority).then(res => {
 | |
|           if (!res) return
 | |
|           this.imageLoaded(imageId, res.data.string('x0020000e'))
 | |
|           resolve(res)
 | |
|         }).catch(e => {
 | |
|           reject(e)
 | |
|         })
 | |
|       })
 | |
|     },
 | |
|     // load(imageId, priority = 999) {
 | |
|     //   return new Promise((resolve, reject) => {
 | |
|     //     const imageTask = this.buildImageRequestTask(imageId, { priority })
 | |
|     //     requestPoolManager.addTaskIntoPool(imageTask).then((res) => {
 | |
|     //       resolve(res)
 | |
|     //     }).catch(e => {
 | |
|     //       reject(e)
 | |
|     //       console.log(e)
 | |
|     //     })
 | |
|     //   })
 | |
|     // },
 | |
|     buildImageRequestTask(imageId, config = {}) {
 | |
|       return {
 | |
|         key: imageId,
 | |
|         ...config,
 | |
|         execute: () => {
 | |
|           return cornerstone.loadAndCacheImage(imageId)
 | |
|         }
 | |
|       }
 | |
|     },
 | |
|     datasetsCacheChanged(e) {
 | |
|       const cacheInfo = e.detail.cacheInfo
 | |
|       const cacheSizeInBytes = cacheInfo.cacheSizeInBytes
 | |
|       if (cacheSizeInBytes >= maximumSizeInBytes) {
 | |
|         // 清理缓存的影像
 | |
|       }
 | |
|     },
 | |
|     imageLoaded(imageId, seriesUid) {
 | |
|       var studyIndex = -1
 | |
|       var seriesIndex = -1
 | |
|       for (let i = 0; i < this.studyList.length; ++i) {
 | |
|         for (let j = 0; j < this.studyList[i].SeriesList.length; ++j) {
 | |
|           if (this.studyList[i].SeriesList[j].seriesUid === seriesUid) {
 | |
|             studyIndex = i
 | |
|             seriesIndex = j
 | |
|             break
 | |
|           }
 | |
|         }
 | |
|         if (studyIndex > 0) break
 | |
|       }
 | |
|       if (seriesIndex < 0) return
 | |
| 
 | |
|       const imageIdIndex = this.studyList[studyIndex].SeriesList[seriesIndex].imageIds.indexOf(imageId)
 | |
|       if (imageIdIndex < 0) return
 | |
|       if (this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.indexOf(imageId) < 0) {
 | |
|         ++this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount
 | |
|         this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.push(imageId)
 | |
| 
 | |
|         if (this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount >= this.studyList[studyIndex].SeriesList[seriesIndex].instanceCount) {
 | |
|           this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount = this.studyList[studyIndex].SeriesList[seriesIndex].instanceCount
 | |
|           // 设置当前序列状态为已下载完成
 | |
|           this.studyList[studyIndex].SeriesList[seriesIndex].loadStatus = true
 | |
|         }
 | |
|       }
 | |
|     },
 | |
|     // instance下载成功回调
 | |
|     cornerstoneImageLoaded(e) {
 | |
|       if (this.firstInstanceId === e.detail.image.imageId && !this.isStartLoad) {
 | |
|         // 初始化图像加载完成时,自动下载
 | |
|         this.loadAllImages()
 | |
|         this.isStartLoad = true
 | |
|         requestPoolManager.executeTask()
 | |
|       }
 | |
|       const uri = e.detail.image.sharedCacheKey
 | |
|       const index = this.cachedImages.findIndex(item => item.uri === uri)
 | |
|       if (index === -1) {
 | |
|         this.cachedImages.push({ uri: uri, timestamp: new Date().getTime() })
 | |
|       } else {
 | |
|         this.cachedImages[index].timestamp = new Date().getTime()
 | |
|       }
 | |
|       var imageId = e.detail.image.imageId
 | |
|       var seriesUid = e.detail.image.data.string('x0020000e')
 | |
|       var studyIndex = -1
 | |
|       var seriesIndex = -1
 | |
|       for (let i = 0; i < this.studyList.length; ++i) {
 | |
|         for (let j = 0; j < this.studyList[i].SeriesList.length; ++j) {
 | |
|           if (this.studyList[i].SeriesList[j].seriesUid === seriesUid) {
 | |
|             studyIndex = i
 | |
|             seriesIndex = j
 | |
|             break
 | |
|           }
 | |
|         }
 | |
|         if (studyIndex > 0) break
 | |
|       }
 | |
|       if (seriesIndex < 0) return
 | |
| 
 | |
|       const imageIdIndex = this.studyList[studyIndex].SeriesList[seriesIndex].imageIds.indexOf(imageId)
 | |
|       if (imageIdIndex < 0) return
 | |
|       if (this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.indexOf(imageId) < 0) {
 | |
|         ++this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount
 | |
|         this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.push(imageId)
 | |
| 
 | |
|         if (this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount >= this.studyList[studyIndex].SeriesList[seriesIndex].instanceCount) {
 | |
|           this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount = this.studyList[studyIndex].SeriesList[seriesIndex].instanceCount
 | |
|           // 设置当前序列状态为已下载完成
 | |
|           this.studyList[studyIndex].SeriesList[seriesIndex].loadStatus = true
 | |
|         }
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| }
 | |
| </script>
 | |
| 
 | |
| <style >
 | |
| .viewerContainer .el-tabs--border-card{
 | |
|   background:none;
 | |
|   border: none;
 | |
| }
 | |
| .viewerContainer .el-tabs__item{
 | |
|   height: 35px;
 | |
|   line-height: 35px;
 | |
| }
 | |
| .viewerContainer .el-tabs--border-card>.el-tabs__content{
 | |
|   padding: 5px 0px 0px 0px;
 | |
| }
 | |
| .viewerContainer ::-webkit-scrollbar {
 | |
|     width: 7px;
 | |
|     height: 7px;
 | |
| }
 | |
| .viewerContainer ::-webkit-scrollbar-thumb {
 | |
|     border-radius: 10px;
 | |
|     background: #d0d0d0;
 | |
| }
 | |
| .viewerContainer .relationVisit{
 | |
|   line-height: 20px;
 | |
|   cursor: pointer;
 | |
| }
 | |
|   .viewerContainer{
 | |
|     display: block;
 | |
|     height: 100%;
 | |
|     margin-left: auto;
 | |
|     margin-right: auto;
 | |
|     background-color: #444;
 | |
|     overflow: hidden;
 | |
|   }
 | |
| .viewerContainer  .viewerBanner {
 | |
|     background: linear-gradient(0,#444,#222);
 | |
|     min-height: 28px;
 | |
|     font-size: 16px;
 | |
|     margin: 0;
 | |
|     height: 30px;
 | |
|     padding-top: 0;
 | |
|     padding-left: 5px;
 | |
|     padding-right: 5px;
 | |
|     font-weight: bold;
 | |
| }
 | |
| .viewerContainer .viewerContentWrapper {
 | |
|   display: flex;
 | |
|   flex-direction: row;
 | |
|     width: 100%;
 | |
|     padding: 5px;
 | |
|     /* height: 95%; */
 | |
|     height: 99%;
 | |
|     overflow: hidden;
 | |
|     text-overflow: clip;
 | |
|     white-space: nowrap;
 | |
| }
 | |
| .viewerContainer .viewerContentWrapper>div {
 | |
|     display: inline-block;
 | |
|     white-space: normal;
 | |
| }
 | |
| .viewerContainer .viewerLeftSidePanel {
 | |
|     width: 215px;
 | |
|     background-color: #323232;
 | |
|     box-sizing: border-box;
 | |
|     margin: 0;
 | |
|     padding: 0;
 | |
|     margin-right: 2px;
 | |
|     color: #D0D0D0;
 | |
|     overflow-y: auto;
 | |
| }
 | |
| .viewerContainer .viewerContentWrapper>div>.sidePanelBody {
 | |
|     background: rgba(50,50,50,1);
 | |
|     word-break: break-all;
 | |
|     display: table;
 | |
|     width: 100%;
 | |
|     border: 1px solid #3e3f3a;
 | |
| }
 | |
| .viewerContainer .viewerContentWrapper>div>div.sidePanelBody>div {
 | |
|     width: 100%;
 | |
|     height: 100%;
 | |
| }
 | |
| .viewerContainer .text-desc{
 | |
|   font-weight: bold;
 | |
|   font-size: 13px;
 | |
|   text-align: center;
 | |
|   background: rgb(88 84 83);
 | |
|   color: #d0d0d0;
 | |
|   padding: 2px;
 | |
| }
 | |
| .viewerContainer .ps {
 | |
|     overflow: hidden !important;
 | |
|     overflow-anchor: none;
 | |
|     -ms-overflow-style: none;
 | |
|     touch-action: auto;
 | |
|     -ms-touch-action: auto;
 | |
| }
 | |
| .viewerContainer .viewerLeftSidePanel .viewernavigatorwrapper {
 | |
|     display: flex;
 | |
|     width: 210px;
 | |
|     height: 84px;
 | |
|     padding: 1px 2px 1px 8px;
 | |
|     margin: 6px 0 6px 1px;
 | |
|     border-radius: 2px;
 | |
|     border: 1px solid #404040;
 | |
| }
 | |
| .viewerContainer .viewernavigatorwrapper .el-progress__text{
 | |
|   display: none;
 | |
| }
 | |
| .viewerContainer .viewernavigatorwrapper .el-progress-bar{
 | |
|   padding-right:0px;
 | |
| }
 | |
| .viewerContainer .ui-draggable-handle {
 | |
|     -ms-touch-action: none;
 | |
|     touch-action: none;
 | |
| }
 | |
| .viewerContainer .viewerLeftSidePanel .image-preview {
 | |
|     border: 2px solid #252525;
 | |
|     cursor: pointer;
 | |
| }
 | |
| .viewerContainer .viewerLeftSidePanel .viewernavitextwrapper {
 | |
|     /* width: 120px;
 | |
|     height: 80px; */
 | |
|     flex:1;
 | |
|     padding: 3px 1px 3px 4px;
 | |
|     vertical-align: top;
 | |
|     font-size: 12px;
 | |
| }
 | |
| .viewerContainer .viewerLeftSidePanel .viewerlabelwrapper {
 | |
|     width: 20px;
 | |
| 
 | |
|     font-size: 12px;
 | |
| }
 | |
| .viewerContainer .viewerSideActive {
 | |
|     background: #16477b;
 | |
|     background: #16477b80;
 | |
|     border: 1px solid #23527b;
 | |
| }
 | |
| .viewerContainer .viewerContent {
 | |
|     flex: 1;
 | |
|     height: 100%;
 | |
|     display: block;
 | |
|     background-color: black;
 | |
|     color: #D0D0D0;
 | |
|     font-size: 13px;
 | |
| }
 | |
| .viewerContainer .pane-relation-wrapper{
 | |
|   min-height: 500px;
 | |
| }
 | |
| /* .viewerRightSidePanel {
 | |
|     width: 300px;
 | |
|     height: 100%;
 | |
|     background-color: #323232;
 | |
|     margin: 0;
 | |
|     padding: 0;
 | |
|     margin-left: 2px;
 | |
|     border: 1px solid blueviolet;
 | |
|     color: #D0D0D0;
 | |
|     font-size: 13px;
 | |
| } */
 | |
| </style>
 | |
| 
 |