You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
651 lines
20 KiB
651 lines
20 KiB
10 months ago
|
<template>
|
||
|
|
<el-dialog class="data-vision" :fullscreen="true" :visible.sync="visible" :modal-append-to-body="false" @close="closedDialog">
|
||
|
|
<!-- 上 -->
|
||
|
|
<div class="data-vision-top" />
|
||
|
|
<!-- 中 -->
|
||
|
|
<div class="data-vision-middle">
|
||
|
|
<el-row :gutter="16">
|
||
|
|
<el-col :span="6">
|
||
|
|
<!-- 左侧 -->
|
||
|
|
<div class="data-vision-middle-left">
|
||
|
|
<!-- 今日数据 -->
|
||
|
|
<div class="today-data">
|
||
|
|
<p class="title">
|
||
|
|
<svg-icon icon-class="icon-three-xiexian" />
|
||
|
|
<span style="padding-left:10px;">今日数据</span>
|
||
|
|
</p>
|
||
|
|
<div class="today-data-content">
|
||
|
|
<div class="dp data-flex">
|
||
|
|
<p>手术患者数量</p>
|
||
|
|
<p class="patientData" />
|
||
|
|
</div>
|
||
|
|
<div class="dh data-flex">
|
||
|
|
<p>新增档案</p>
|
||
|
|
<p class="addArchivesData" />
|
||
|
|
</div>
|
||
|
|
<div class="qj data-flex">
|
||
|
|
<p>检查项目数</p>
|
||
|
|
<p class="inspectionData" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 当月手术top5 -->
|
||
|
|
<div class="month-operation-top5">
|
||
|
|
<p class="title">
|
||
|
|
<svg-icon icon-class="icon-three-xiexian" />
|
||
|
|
<span style="padding-left:10px;">当月手术医生TOP 5</span>
|
||
|
|
</p>
|
||
|
|
<div class="month-operation-content">
|
||
|
|
<month-top-echarts
|
||
|
|
v-if="monthOperationContentHeight"
|
||
|
|
id-name="month-top-echarts"
|
||
|
|
:height="monthOperationContentHeight"
|
||
|
|
:chart-data="monthOperationTopList"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 历史数据录入 -->
|
||
|
|
<div class="history-data">
|
||
|
|
<p class="title">
|
||
|
|
<svg-icon icon-class="icon-three-xiexian" />
|
||
|
|
<span style="padding-left:10px;">历史手术记录</span>
|
||
|
|
</p>
|
||
|
|
<div class="history-data-content">
|
||
|
|
<history-data-echarts id-name="history-data-echarts" :chart-data="historyDataList" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12">
|
||
|
|
<!-- 中间 -->
|
||
|
|
<div class="data-vision-middle-middle">
|
||
|
|
<p class="title">
|
||
|
|
<svg-icon icon-class="icon-three-xiexian" />
|
||
|
|
<span style="padding-left:10px;">患者信息</span>
|
||
|
|
</p>
|
||
|
|
<div class="patient-bank-count">
|
||
|
|
<div class="sex-age-count">
|
||
|
|
<div class="age-count-left">
|
||
|
|
<p>
|
||
|
|
<span>患者总数</span>
|
||
|
|
<span class="patientTotal" />
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<span>档案总数</span>
|
||
|
|
<span class="archivesTotal" />
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="sex-age-count-right">
|
||
|
|
<div class="sex-count">
|
||
|
|
<sex-count-echarts v-if="sexCountHeight" id-name="sex-count-echarts" :height="sexCountHeight" :chart-data="patientAnalyseList.sexAnalyse" />
|
||
|
|
</div>
|
||
|
|
<div class="age-count">
|
||
|
|
<age-count-echarts v-if="sexCountHeight" id-name="age-count-echarts" :height="sexCountHeight" :chart-data="patientAnalyseList.ageAnalyse" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="yanya">
|
||
|
|
<p class="patient-bank-title">
|
||
|
|
<svg-icon icon-class="icon-three-xiexian" />
|
||
|
|
<span>眼压分布</span>
|
||
|
|
</p>
|
||
|
|
<div class="yanya-content">
|
||
|
|
<qipao-echarts v-if="yanyaContentHeight" :height="yanyaContentHeight" id-name="yanya-echarts" :chart-data="yanyaList" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="shili">
|
||
|
|
<p class="patient-bank-title">
|
||
|
|
<svg-icon icon-class="icon-three-xiexian" />
|
||
|
|
<span>视力分布</span>
|
||
|
|
</p>
|
||
|
|
<div class="shili-content">
|
||
|
|
<qipao-echarts v-if="yanyaContentHeight" :height="yanyaContentHeight" id-name="shili-echarts" :chart-data="shiliList" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="yanzhou">
|
||
|
|
<p class="patient-bank-title">
|
||
|
|
<svg-icon icon-class="icon-three-xiexian" />
|
||
|
|
<span>眼轴分布</span>
|
||
|
|
</p>
|
||
|
|
<div class="yanzhou-content">
|
||
|
|
<qipao-echarts v-if="yanyaContentHeight" :height="yanyaContentHeight" id-name="yanzhou-echarts" :chart-data="yanzhouList" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="patient-bank-count-bottom" />
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<!-- 右侧 -->
|
||
|
|
<div class="data-vision-middle-right">
|
||
|
|
<!-- 手术诊断用药 -->
|
||
|
|
<div class="medication">
|
||
|
|
<p class="title">
|
||
|
|
<svg-icon icon-class="icon-three-xiexian" />
|
||
|
|
<span style="padding-left:10px;">手术-诊断-用药</span>
|
||
|
|
</p>
|
||
|
|
<div class="medication-diagnosis-content">
|
||
|
|
<medication-diagosis-echarts v-if="medicationDiagContentHeight" :height="medicationDiagContentHeight" id-name="medication-diagosis-echarts" :chart-data="medicationList" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 收费项统计 -->
|
||
|
|
<!-- <div class="charge-statistics">
|
||
|
|
<p class="title">
|
||
|
|
<svg-icon icon-class="icon-three-xiexian" />
|
||
|
|
<span style="padding-left:10px;">收费项统计</span>
|
||
|
|
</p>
|
||
|
|
<div class="charge-statistics-content">
|
||
|
|
<month-top-echarts
|
||
|
|
v-if="chargeStatisticsHeight"
|
||
|
|
id-name="charge-statistics-echarts"
|
||
|
|
:height="chargeStatisticsHeight"
|
||
|
|
:chart-data="monthOperationTopList"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row />
|
||
|
|
</div>
|
||
|
|
<!-- 下 -->
|
||
|
|
<div class="data-vision-bottom" />
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import monthTopEcharts from './month-top-echarts.vue'
|
||
|
|
import historyDataEcharts from './history-data-echarts.vue'
|
||
|
|
import sexCountEcharts from './sex-count-echarts.vue'
|
||
|
|
import ageCountEcharts from './age-count-echarts.vue'
|
||
|
|
import qipaoEcharts from './qipao-echarts.vue'
|
||
|
|
import medicationDiagosisEcharts from './medication-diagnosis-echarts.vue'
|
||
|
|
export default {
|
||
|
|
components: { monthTopEcharts, historyDataEcharts, sexCountEcharts, ageCountEcharts, qipaoEcharts, medicationDiagosisEcharts },
|
||
|
|
props: {
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
visible: false,
|
||
|
|
drgsName: window.localStorage.getItem('identity'),
|
||
|
|
monthOperationContentHeight: '',
|
||
|
|
sexCountHeight: '',
|
||
|
|
yanyaContentHeight: '',
|
||
|
|
medicationDiagContentHeight: '',
|
||
|
|
chargeStatisticsHeight: '',
|
||
|
|
todayDataList: [{
|
||
|
|
name: '手术患者数据',
|
||
|
|
value: '1000'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '新增档案',
|
||
|
|
value: '100'
|
||
|
|
}, {
|
||
|
|
name: '检查项目数',
|
||
|
|
value: '3000'
|
||
|
|
}, {
|
||
|
|
name: '患者总数',
|
||
|
|
value: '12000'
|
||
|
|
}, {
|
||
|
|
name: '档案总数',
|
||
|
|
value: '13000'
|
||
|
|
}],
|
||
|
|
monthOperationTopList: [{
|
||
|
|
name: '孟医生',
|
||
|
|
value: 15
|
||
|
|
}, {
|
||
|
|
name: '张医生',
|
||
|
|
value: 12
|
||
|
|
}, {
|
||
|
|
name: '刘医生',
|
||
|
|
value: 10
|
||
|
|
}, {
|
||
|
|
name: '李医生',
|
||
|
|
value: 8
|
||
|
|
}, {
|
||
|
|
name: '葛医生',
|
||
|
|
value: 6
|
||
|
|
}],
|
||
|
|
historyDataList: [],
|
||
|
|
patientAnalyseList: [],
|
||
|
|
yanyaList: {},
|
||
|
|
shiliList: {},
|
||
|
|
yanzhouList: {},
|
||
|
|
medicationList: {},
|
||
|
|
diagnosenList: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
init() {
|
||
|
|
this.visible = true
|
||
|
|
this.$nextTick(() => {
|
||
|
|
// 今日数据
|
||
|
|
this.getTodayDataList()
|
||
|
|
// 当月手术top5
|
||
|
|
// this.getMonthOperationTop()
|
||
|
|
// 获取历史录入数据
|
||
|
|
this.getHistoryDataList()
|
||
|
|
// 获取患者分析数据
|
||
|
|
this.getPatientSnalyse()
|
||
|
|
// 获取眼压分布
|
||
|
|
this.getYanyaList()
|
||
|
|
// 获取视力分布
|
||
|
|
this.getShiliList()
|
||
|
|
// 获取眼轴分布
|
||
|
|
this.getYanzhouList()
|
||
|
|
// 获取用药分析
|
||
|
|
this.medication()
|
||
|
|
// 获取诊断分析
|
||
|
|
this.getDiagnosis()
|
||
|
|
this.monthOperationContentHeight = document.querySelector('.month-operation-content') ? document.querySelector('.month-operation-content').offsetHeight + 'px' : ''
|
||
|
|
this.sexCountHeight = document.querySelector('.sex-count') ? document.querySelector('.sex-count').offsetHeight + 'px' : ''
|
||
|
|
this.yanyaContentHeight = document.querySelector('.yanya-content') ? document.querySelector('.yanya-content').offsetHeight + 'px' : ''
|
||
|
|
this.medicationDiagContentHeight = document.querySelector('.medication-diagnosis-content') ? document.querySelector('.medication-diagnosis-content').offsetHeight + 'px' : ''
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 获取今日数据
|
||
|
|
async getTodayDataList() {
|
||
|
|
// const { data: res } = await this.$http.get('/quguang/data/analyse/todayDpAnalyse')
|
||
|
|
// if (res.code === 0) {
|
||
|
|
// this.todayDataList = JSON.parse(JSON.stringify(res.data))
|
||
|
|
// this.todayDataList.forEach(item => {
|
||
|
|
// item.innerHTML = [0, item.value]
|
||
|
|
// item.name === '订片' ? item.targets = '.dpData' : ''
|
||
|
|
// item.name === '到货' ? item.targets = '.dhData' : ''
|
||
|
|
// item.name === '取镜' ? item.targets = '.qjData' : ''
|
||
|
|
// item.name === '总数' ? item.targets = '.patientTotal' : ''
|
||
|
|
// item.name === '今日新增' ? item.targets = '.patientTodayAdd' : ''
|
||
|
|
// })
|
||
|
|
// this.todayDataAnime()
|
||
|
|
// } else {
|
||
|
|
// this.$message.error(res.msg)
|
||
|
|
// }
|
||
|
|
this.todayDataList.forEach(item => {
|
||
|
|
item.innerHTML = [0, item.value]
|
||
|
|
item.name === '手术患者数据' ? item.targets = '.patientData' : ''
|
||
|
|
item.name === '新增档案' ? item.targets = '.addArchivesData' : ''
|
||
|
|
item.name === '检查项目数' ? item.targets = '.inspectionData' : ''
|
||
|
|
item.name === '患者总数' ? item.targets = '.patientTotal' : ''
|
||
|
|
item.name === '档案总数' ? item.targets = '.archivesTotal' : ''
|
||
|
|
})
|
||
|
|
this.todayDataAnime()
|
||
|
|
},
|
||
|
|
// 数据动画
|
||
|
|
todayDataAnime() {
|
||
|
|
this.todayDataList.forEach(item => {
|
||
|
|
this.$anime({
|
||
|
|
targets: item.targets,
|
||
|
|
innerHTML: item.innerHTML,
|
||
|
|
easing: 'linear',
|
||
|
|
round: 1, // 去除小数点
|
||
|
|
duration: 1500
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 当月订片top5
|
||
|
|
async getMonthOperationTop() {
|
||
|
|
const { data: res } = await this.$http.get('/quguang/data/analyse/monthDpTop5')
|
||
|
|
if (res.code === 0) {
|
||
|
|
this.monthOperationTopList = res.data
|
||
|
|
} else {
|
||
|
|
this.$message.error(res.msg)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 获取历史录入数据
|
||
|
|
async getHistoryDataList() {
|
||
|
|
const { data: res } = await this.$http.get('/quguang/data/analyse/historyInsert')
|
||
|
|
if (res.code === 0) {
|
||
|
|
this.historyDataList = res.data
|
||
|
|
} else {
|
||
|
|
this.$message.error(res.msg)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 获取患者分析数据
|
||
|
|
async getPatientSnalyse() {
|
||
|
|
const { data: res } = await this.$http.get('/quguang/data/analyse/patientAnalyse')
|
||
|
|
if (res.code === 0) {
|
||
|
|
this.patientAnalyseList = res.data
|
||
|
|
} else {
|
||
|
|
this.$message.error(res.msg)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 获取眼压分布
|
||
|
|
async getYanyaList() {
|
||
|
|
const { data: res } = await this.$http.get('/quguang/data/analyse/IOPAnalyse')
|
||
|
|
if (res.code === 0) {
|
||
|
|
this.yanyaList = res.data
|
||
|
|
} else {
|
||
|
|
this.$message.error(res.msg)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 获取视力分布
|
||
|
|
async getShiliList() {
|
||
|
|
const { data: res } = await this.$http.get('/quguang/data/analyse/VAAnalyse')
|
||
|
|
if (res.code === 0) {
|
||
|
|
this.shiliList = res.data
|
||
|
|
} else {
|
||
|
|
this.$message.error(res.msg)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 获取眼轴分布
|
||
|
|
async getYanzhouList() {
|
||
|
|
const { data: res } = await this.$http.get('/quguang/data/analyse/ALAnalyse')
|
||
|
|
if (res.code === 0) {
|
||
|
|
this.yanzhouList = res.data
|
||
|
|
} else {
|
||
|
|
this.$message.error(res.msg)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 获取用药分析
|
||
|
|
async medication() {
|
||
|
|
const { data: res } = await this.$http.get('/quguang/data/analyse/medicationAnalyse')
|
||
|
|
if (res.code === 0) {
|
||
|
|
this.medicationList = res.data
|
||
|
|
} else {
|
||
|
|
this.$message.error(res.msg)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 获取诊断分析
|
||
|
|
async getDiagnosis() {
|
||
|
|
const { data: res } = await this.$http.get('/quguang/data/analyse/diagnoseAnalyse')
|
||
|
|
if (res.code === 0) {
|
||
|
|
this.diagnosenList = res.data
|
||
|
|
} else {
|
||
|
|
this.$message.error(res.msg)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
closedDialog() {
|
||
|
|
this.$emit('dataVisionVisible')
|
||
|
|
this.visible = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.data-vision {
|
||
|
|
.data-vision-top,
|
||
|
|
.data-vision-bottom,
|
||
|
|
.today-data {
|
||
|
|
image-rendering: -moz-crisp-edges;
|
||
|
|
image-rendering: -o-crisp-edges;
|
||
|
|
image-rendering: -webkit-optimize-contrast;
|
||
|
|
image-rendering: crisp-edges;
|
||
|
|
-ms-interpolation-mode: nearest-neighbor;
|
||
|
|
}
|
||
|
|
.data-vision-top {
|
||
|
|
height: 70px;
|
||
|
|
background: url(../../assets/img/data-vision-head.png) no-repeat top center;
|
||
|
|
background-size: 100% 100px;
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
.data-vision-bottom {
|
||
|
|
height: 60px;
|
||
|
|
background: url(../../assets/img/data-vision-bottom.png) no-repeat top
|
||
|
|
center;
|
||
|
|
background-size: 100% 60px;
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
.data-vision-middle {
|
||
|
|
height: calc(100vh - 70px - 60px);
|
||
|
|
padding: 0 24px;
|
||
|
|
margin-top: 85px;
|
||
|
|
// display: flex;
|
||
|
|
color: #fff;
|
||
|
|
.title {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 16px;
|
||
|
|
padding: 0 16px;
|
||
|
|
height: 36px;
|
||
|
|
background: url(../../assets/img/data-vision-left-head.png) no-repeat top
|
||
|
|
center;
|
||
|
|
background-size: 100% 48px;
|
||
|
|
}
|
||
|
|
.svg-icon {
|
||
|
|
width: 24px;
|
||
|
|
}
|
||
|
|
.today-data-content,
|
||
|
|
.month-operation-content,
|
||
|
|
.history-data-content,.medication-diagnosis-content,.charge-statistics-content {
|
||
|
|
padding: 16px;
|
||
|
|
width: 100%;
|
||
|
|
flex: 1;
|
||
|
|
background: rgba(14, 33, 84, 0.6);
|
||
|
|
box-shadow: inset 0px 0px 32px rgba(108, 167, 255, 0.4);
|
||
|
|
border: 1px solid #3d91e4;
|
||
|
|
border-image: -webkit-linear-gradient(
|
||
|
|
184deg,
|
||
|
|
#3d91e4 50%,
|
||
|
|
#133b72,
|
||
|
|
#3d91e4,
|
||
|
|
#133b72
|
||
|
|
)
|
||
|
|
5 5;
|
||
|
|
border-image: -moz-linear-gradient(
|
||
|
|
184deg,
|
||
|
|
#3d91e4 50%,
|
||
|
|
#133b72,
|
||
|
|
#3d91e4,
|
||
|
|
#133b72
|
||
|
|
)
|
||
|
|
5 5;
|
||
|
|
border-image: linear-gradient(
|
||
|
|
184deg,
|
||
|
|
#3d91e4 50%,
|
||
|
|
#133b72,
|
||
|
|
#3d91e4,
|
||
|
|
#133b72
|
||
|
|
)
|
||
|
|
5 5;
|
||
|
|
}
|
||
|
|
.data-vision-middle-left {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
height: 100%;
|
||
|
|
.today-data {
|
||
|
|
width: 100%;
|
||
|
|
flex: 25%;
|
||
|
|
line-height: 30px;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.month-operation-top5 {
|
||
|
|
flex: 35%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.history-data {
|
||
|
|
flex: 40%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.today-data-content {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
.data-flex {
|
||
|
|
flex: 33.33%;
|
||
|
|
text-align: center;
|
||
|
|
p:nth-child(1) {
|
||
|
|
color: #00ffff;
|
||
|
|
font-size: 16px;
|
||
|
|
white-space: nowrap; // 段落不换行
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
p:nth-child(2) {
|
||
|
|
color: #ffc700;
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.dp,
|
||
|
|
.dh {
|
||
|
|
border-right: 2px solid #3d91e4;
|
||
|
|
border-image: -webkit-linear-gradient(
|
||
|
|
transparent,
|
||
|
|
#17a5e5,
|
||
|
|
transparent
|
||
|
|
)
|
||
|
|
5 5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.month-operation-content {
|
||
|
|
padding: 0;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
.history-data-content {
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.data-vision-middle-middle {
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
.title {
|
||
|
|
background: url(../../assets/img/data-vision-middle.png) no-repeat top
|
||
|
|
center;
|
||
|
|
background-size: 100% 48px;
|
||
|
|
}
|
||
|
|
.patient-bank-count {
|
||
|
|
padding: 0 20px;
|
||
|
|
border-bottom: 0;
|
||
|
|
flex: 1;
|
||
|
|
border-top: 1px solid #3d91e4;
|
||
|
|
background: url(../../assets/img/data-vision-middle-two.png) repeat-y bottom;
|
||
|
|
background-size: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
.sex-age-count {
|
||
|
|
display: flex;
|
||
|
|
flex: 35%;
|
||
|
|
}
|
||
|
|
.age-count-left {
|
||
|
|
width: 20%;
|
||
|
|
text-align: center;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
border-right: 2px solid #3d91e4;
|
||
|
|
border-image: -webkit-linear-gradient(
|
||
|
|
transparent,
|
||
|
|
#17a5e5,
|
||
|
|
transparent
|
||
|
|
)
|
||
|
|
5 5;
|
||
|
|
p {
|
||
|
|
span {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
span:nth-child(1) {
|
||
|
|
color: #00FFFF;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
span:nth-child(2) {
|
||
|
|
color: #FFC700;
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
p:nth-child(1) {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.sex-age-count-right {
|
||
|
|
flex: 1;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.sex-count,.age-count {
|
||
|
|
flex: 50%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.yanya,.shili,.yanzhou {
|
||
|
|
flex: 21.6%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
margin-bottom: 6px;
|
||
|
|
}
|
||
|
|
.yanzhou {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
.patient-bank-title {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
height: 20px;
|
||
|
|
span {
|
||
|
|
padding-left: 4px;
|
||
|
|
color: #00ffff;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.yanya-content {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.patient-bank-count-bottom {
|
||
|
|
width: 100%;
|
||
|
|
height: 33px;
|
||
|
|
background: url(../../assets/img/data-vision-middle-bottom.png) no-repeat bottom;
|
||
|
|
background-size: 100% 33px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.data-vision-middle-right {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
height: 100%;
|
||
|
|
.medication {
|
||
|
|
flex: 60%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
.medication-diagnosis-content {
|
||
|
|
padding: 0;
|
||
|
|
// margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.charge-statistics {
|
||
|
|
flex: 40%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.data-vision {
|
||
|
|
.el-dialog__header,
|
||
|
|
.el-dialog__body {
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
.el-dialog__headerbtn {
|
||
|
|
z-index: 99;
|
||
|
|
}
|
||
|
|
.el-dialog.is-fullscreen {
|
||
|
|
background: #000000;
|
||
|
|
}
|
||
|
|
.el-row,
|
||
|
|
.el-col {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.el-dialog.is-fullscreen {
|
||
|
|
height: 100vh;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|