Skip to content

V
vue-composition-api
Commit fd01bd07 by wangshuangqing
Options

Merge branch 'feature/修改' into develop

parents 3758f55d f0a8ef2b
Showing with 1174 additions and 964 deletions
src/views/outHistorygrouping.vue
...@@ -42,6 +42,13 @@ ...@@ -42,6 +42,13 @@
医疗付费方式:<span>{{ casehisObj ? casehisObj.a46C : "" }}</span> 医疗付费方式:<span>{{ casehisObj ? casehisObj.a46C : "" }}</span>
</div> </div>
</div> </div>
<div class="outsetgrouping_top_message_blow">
<span class="outsetgrouping_top_message_blow_tu7"><img src="../assets/img/daoru.png" alt=""></span>
<div class="outsetgrouping_top_message_blow_t4">
分组类型:<span>{{ casehisObj?casehisObj.drgs.disNature:'' }}</span>
</div>
</div>
</div> </div>
</div> </div>
<div class="outsetgrouping_top2"> <div class="outsetgrouping_top2">
...@@ -67,7 +74,9 @@ ...@@ -67,7 +74,9 @@
casehisObj ? casehisObj.drgs.actualfee : "" casehisObj ? casehisObj.drgs.actualfee : ""
}}</span> }}</span>
</div> </div>
</div>
</div>
</div> </div>
</div> </div>
<div class="outsetgrouping_top3"></div> <div class="outsetgrouping_top3"></div>
...@@ -96,6 +105,7 @@ ...@@ -96,6 +105,7 @@
<div class="outsetgrouping_centent_totalnum_left_text_msg1_text1"> <div class="outsetgrouping_centent_totalnum_left_text_msg1_text1">
<span> 诊断名称:{{ item.diagMapName }}</span> <span> 诊断名称:{{ item.diagMapName }}</span>
<span> 诊断类型:{{ item.diagOrder }}</span> <span> 诊断类型:{{ item.diagOrder }}</span>
<span> 分组类型:{{item.disNature}}</span>
</div> </div>
<div class="outsetgrouping_centent_totalnum_left_text_msg1_text2"> <div class="outsetgrouping_centent_totalnum_left_text_msg1_text2">
<span>操作名称:{{ item.opsMapName }}</span> <span>操作名称:{{ item.opsMapName }}</span>
...@@ -393,7 +403,7 @@ export default { ...@@ -393,7 +403,7 @@ export default {
justify-content: space-between; justify-content: space-between;
&_left { &_left {
width: 33%; width: 25%;
height: 51px; height: 51px;
display: flex; display: flex;
justify-content: start; justify-content: start;
...@@ -429,7 +439,7 @@ export default { ...@@ -429,7 +439,7 @@ export default {
} }
&_centert { &_centert {
width: 33%; width: 25%;
height: 51px; height: 51px;
display: flex; display: flex;
justify-content: start; justify-content: start;
...@@ -466,7 +476,7 @@ export default { ...@@ -466,7 +476,7 @@ export default {
} }
&_right { &_right {
width: 33%; width: 25%;
height: 51px; height: 51px;
display: flex; display: flex;
justify-content: start; justify-content: start;
...@@ -501,7 +511,38 @@ export default { ...@@ -501,7 +511,38 @@ export default {
} }
} }
} }
&_blow {
width: 25%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
&_tu7{
padding-left: 29px;
font-size: 23px;
}
&_t4 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
} }
} }
...@@ -602,11 +643,7 @@ export default { ...@@ -602,11 +643,7 @@ export default {
background-color: #f3fafd; background-color: #f3fafd;
font-family: PingFang SC; font-family: PingFang SC;
// .iconfont {
// color: #2cabe3;
// padding-left: 29px;
// font-size: 23px;
// }
&_tu6{ &_tu6{
padding-left: 29px; padding-left: 29px;
font-size: 23px; font-size: 23px;
...@@ -629,6 +666,7 @@ export default { ...@@ -629,6 +666,7 @@ export default {
} }
} }
} }
} }
} }
...@@ -727,17 +765,17 @@ export default { ...@@ -727,17 +765,17 @@ export default {
width: 100%; width: 100%;
height: 48%; height: 48%;
display: flex; display: flex;
justify-content: space-between; justify-content: start;
span { span {
height: 100%; height: 100%;
width: 50%; width: 32%;
margin: 0px 5px; margin: 0px 5px;
display: flex; display: flex;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
padding-left: 10px; padding-left: 11px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 300; font-weight: 300;
color: #6a707e; color: #6a707e;
......
src/views/outpatientDetails.vue
...@@ -6,120 +6,206 @@ ...@@ -6,120 +6,206 @@
* @Description: * @Description:
--> -->
<template> <template>
<!-- 患者详情页 --> <!-- 患者详情页 -->
<div class="outpatientDetails"> <div class="outpatientDetails">
<div class="outpatientDetails_top"> <div class="outpatientDetails_top">
<div class="outpatientDetails_top_div1"> <div class="outpatientDetails_top_div1">
<span class="span1">患者信息</span> <span class="span1">患者信息</span>
<!-- <el-button size="mini" type="primary" @click="getControl">医嘱质控</el-button> --> <!-- <el-button size="mini" type="primary" @click="getControl">医嘱质控</el-button> -->
<!-- <el-button size="mini" type="primary">医嘱质控</el-button> --> <!-- <el-button size="mini" type="primary">医嘱质控</el-button> -->
</div> </div>
<div class="outpatientDetails_top_message"> <div class="outpatientDetails_top_message">
<div class="outpatientDetails_top_message_left"> <div class="outpatientDetails_top_message_left">
<span class="outpatientDetails_top_message_left_tu1"> <img src="../assets/img/peo.png" alt=""></span> <span class="outpatientDetails_top_message_left_tu1">
<div class="outpatientDetails_top_message_left_t1"> <img src="../assets/img/peo.png" alt=""
住院号:<span>{{ HistoryInfo.id }}</span> /></span>
</div> <div class="outpatientDetails_top_message_left_t1">
</div> 住院号:<span>{{ HistoryInfo.id }}</span>
<div class="outpatientDetails_top_message_centert"> </div>
<span class="outpatientDetails_top_message_centert_tu2"><img src="../assets/img/ka.png" alt=""></span> </div>
<div class="outpatientDetails_top_message_centert_t2"> <div class="outpatientDetails_top_message_centert">
住院次数:<span>{{ HistoryInfo.a49 }}</span> <span class="outpatientDetails_top_message_centert_tu2"
</div> ><img src="../assets/img/ka.png" alt=""
</div> /></span>
<div class="outpatientDetails_top_message_right"> <div class="outpatientDetails_top_message_centert_t2">
<span class="outpatientDetails_top_message_right_tu3"><img src="../assets/img/qian.png" alt=""></span> 住院次数:<span>{{ HistoryInfo.a49 }}</span>
<div class="outpatientDetails_top_message_right_t3"> </div>
医疗付费方式:<span>{{ HistoryInfo.paymentType }}</span> </div>
<div class="outpatientDetails_top_message_right">
<span class="outpatientDetails_top_message_right_tu3"
><img src="../assets/img/qian.png" alt=""
/></span>
<div class="outpatientDetails_top_message_right_t3">
医疗付费方式:<span>{{ HistoryInfo.paymentType }}</span>
</div>
</div>
<div class="outpatientDetails_top_message_low">
<span class="outpatientDetails_top_message_low_tu4"
><img src="../assets/img/daoru.png" alt=""
/></span>
<div class="outpatientDetails_top_message_low_t4">
分组类型:<span>{{ HistoryInfo.disNature }}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="outpatientDetails_msg"> <div class="outpatientDetails_msg">
<span class="outpatientDetails_msg_tu4"><img src="../assets/img/zu.png" alt=""></span> <span class="outpatientDetails_msg_tu4"
<span>分组:{{ HistoryInfo.doctorName }}</span> ><img src="../assets/img/zu.png" alt=""
<span>基准点数:{{ decimal(HistoryInfo.rw) }}</span> /></span>
<span>实际医保费用:{{ decimal(HistoryInfo.actualfee) }}</span> <span>分组:{{ HistoryInfo.doctorName }}</span>
<span>总费用:{{ decimal(HistoryInfo.totalFee) }}</span> <span>基准点数:{{ decimal(HistoryInfo.rw) }}</span>
<span>盈亏:{{ decimal(HistoryInfo.profitLoss) }}</span> <span>实际医保费用:{{ decimal(HistoryInfo.actualfee) }}</span>
<span>院内历年平均费用:{{ decimal(HistoryInfo.avgFee) }}</span> <span>总费用:{{ decimal(HistoryInfo.totalFee) }}</span>
<span>院内历年平均住院天数:{{ decimal(HistoryInfo.days) }}</span> <span>盈亏:{{ decimal(HistoryInfo.profitLoss) }}</span>
</div> <span>院内历年平均费用:{{ decimal(HistoryInfo.avgFee) }}</span>
<div class="outpatientDetails_fenqu" v-if="lowMagnification!=0 && highMagnification!=0"> <span>院内历年平均住院天数:{{ decimal(HistoryInfo.days) }}</span>
<div class="outpatientDetails_fenqu_di"> </div>
<div class="outpatientDetails_fenqu_di_bb"> <div
<div class="outpatientDetails_fenqu_di_bb_div1"> class="outpatientDetails_fenqu"
<span class="outpatientDetails_fenqu_di_bb_div1_num" :style="{marginLeft:(totalwidth-1)+'%',color:totalcolor}">{{decimal(HistoryInfo.totalFee)}}</span> v-if="lowMagnification != 0 && highMagnification != 0"
<span class="outpatientDetails_fenqu_di_bb_div1_he" :style="{ marginLeft:totalwidth+'%',backgroundColor:totalcolor}"></span> >
</div> <div class="outpatientDetails_fenqu_di">
<div class="outpatientDetails_fenqu_di_bb_div2"> <div class="outpatientDetails_fenqu_di_bb">
<span class="outpatientDetails_fenqu_di_bb_div2_span1" :style="{ width: lowwidth + '%' }">低倍率区域：&lt;={{Math.round(lowMagnification)}}</span> <div class="outpatientDetails_fenqu_di_bb_div1">
<span class="outpatientDetails_fenqu_di_bb_div2_span2" :style="{ width: contentwidth + '%' }">正常区域：{{(Math.round(lowMagnification)+1)+'~'+(Math.round(highMagnification)-1)}}</span> <span
class="outpatientDetails_fenqu_di_bb_div1_num"
:style="{ marginLeft: totalwidth - 1 + '%', color: totalcolor }"
>{{ decimal(HistoryInfo.totalFee) }}</span
>
<span
class="outpatientDetails_fenqu_di_bb_div1_he"
:style="{
marginLeft: totalwidth + '%',
backgroundColor: totalcolor,
}"
></span>
</div>
<div class="outpatientDetails_fenqu_di_bb_div2">
<span
class="outpatientDetails_fenqu_di_bb_div2_span1"
:style="{ width: lowwidth + '%' }"
><span
class="outpatientDetails_fenqu_di_bb_div2_span1_t1"
:title="'低倍率区域：&lt;=' + Math.round(lowMagnification)"
>低倍率区域：&lt;={{ Math.round(lowMagnification) }}</span
></span
>
<span
class="outpatientDetails_fenqu_di_bb_div2_span2"
:style="{ width: contentwidth + '%' }"
><span
class="outpatientDetails_fenqu_di_bb_div2_span2_t2"
:title="
'正常区域：' +
Math.round(lowMagnification) +
1 +
'~' +
(Math.round(highMagnification) - 1)
"
>正常区域：{{
Math.round(lowMagnification) +
1 +
"~" +
(Math.round(highMagnification) - 1)
}}</span
></span
>
<span class="outpatientDetails_fenqu_di_bb_div2_span3" :style="{ width: heightwidth + '%' }">高倍率区域：>{{Math.round(highMagnification)}}</span> <span
</div> class="outpatientDetails_fenqu_di_bb_div2_span3"
<div class="outpatientDetails_fenqu_di_bb_div3"> :style="{ width: heightwidth + '%' }"
<span class="outpatientDetails_fenqu_di_bb_div3_span1" :style="{ width: lowwidth + '%' }"> ><span
0 class="outpatientDetails_fenqu_di_bb_div2_span3_t3"
</span> :title="'高倍率区域：>' + Math.round(highMagnification)"
<span class="outpatientDetails_fenqu_di_bb_div3_span2" :style="{ width: contentwidth + '%' }"> >高倍率区域：>{{ Math.round(highMagnification) }}</span
{{Math.round(lowMagnification)}} ></span
</span> >
<span class="outpatientDetails_fenqu_di_bb_div3_span3" :style="{ width: heightwidth + '%' }"> </div>
<span class="outpatientDetails_fenqu_di_bb_div3_span2_nmm1">{{Math.round(highMagnification)}}</span> <div class="outpatientDetails_fenqu_di_bb_div3">
<span class="outpatientDetails_fenqu_di_bb_div3_span2_nmm2">{{ Math.round(heightnum) }}</span> <span
</span> class="outpatientDetails_fenqu_di_bb_div3_span1"
</div> :style="{ width: lowwidth + '%' }"
</div> >
0
</div> </span>
</div> <span
class="outpatientDetails_fenqu_di_bb_div3_span2"
<div class="outpatientDetails_title"> :style="{ width: contentwidth + '%' }"
<span>费用分类</span> >
</div> {{ Math.round(lowMagnification) }}
</span>
<span
class="outpatientDetails_fenqu_di_bb_div3_span3"
:style="{ width: heightwidth + '%' }"
>
<span class="outpatientDetails_fenqu_di_bb_div3_span2_nmm1">{{
Math.round(highMagnification)
}}</span>
<span class="outpatientDetails_fenqu_di_bb_div3_span2_nmm2">{{
Math.round(heightnum)
}}</span>
</span>
</div>
</div>
</div>
</div>
<div class="outpatientDetails_title">
<span>费用分类</span>
</div>
<div class="outpatientDetails_bottom" :style="{height:bottomheight}"> <div class="outpatientDetails_bottom" :style="{ height: bottomheight }">
<!-- 有数据 --> <!-- 有数据 -->
<div class="outpatientDetails_bottom_leftShowBox" v-if="goods.length !== 0"> <div
<div class="outpatientDetails_bottom_leftShowBox_left"> class="outpatientDetails_bottom_leftShowBox"
<ul class="outpatientDetails_bottom_leftShowBox_left_ul"> v-if="goods.length !== 0"
<li v-for="(item, index) in goods" :key="index"> >
<div <div class="outpatientDetails_bottom_leftShowBox_left">
@click=" <ul class="outpatientDetails_bottom_leftShowBox_left_ul">
toggle(index, item); <li v-for="(item, index) in goods" :key="index">
scrollToFoods(index); <div
" @click="
:class="{ active: index == checkindex }" toggle(index, item);
> scrollToFoods(index);
<span :class="{ fc2: index == checkindex }" class="sp1"> "
<span v-show="index == checkindex" style="color: #fff" class="iconfont icon-jiantou1"></span> :class="{ active: index == checkindex }"
{{ item.iteM_TYPE }}:{{ decimal(item.totalFee) }}</span >
> <span :class="{ fc2: index == checkindex }" class="sp1">
<span :class="{ fc3: index == checkindex }" class="sp2"> <span
<span class="sp2_avg"> v-show="index == checkindex"
style="color: #fff"
class="iconfont icon-jiantou1"
></span>
{{ item.iteM_TYPE }}:{{ decimal(item.totalFee) }}</span
>
<span :class="{ fc3: index == checkindex }" class="sp2">
<!-- <span class="sp2_avg">
平均: 平均:
{{ decimal(item.avgFee) }} {{ decimal(item.avgFee) }}
</span> </span> -->
<!-- <span class="sp2_reto" v-ratio="[item.proportion / 100, item.proportion / 100, `${index == checkindex ? '#fff' : '#6a707e'}`]"> <!-- <span class="sp2_reto" v-ratio="[item.proportion / 100, item.proportion / 100, `${index == checkindex ? '#fff' : '#6a707e'}`]">
</span> --> </span> -->
<span class="sp2_reto" v-if="item.proportion <= 0"> <span class="sp2_reto" v-if="item.proportion <= 0">
{{ decimal(item.proportion * -1) + '%' }} {{ decimal(item.proportion * -1) + "%" }}
<img style="width: 4px; height: 12px; margin-left: 5px" src="../assets/img/dataCockpit/lvse_zuo.png" /> <!-- <img style="width: 4px; height: 12px; margin-left: 5px" src="../assets/img/dataCockpit/lvse_zuo.png" /> -->
</span> </span>
<span class="sp2_reto" v-else> <span class="sp2_reto" v-else>
{{ decimal(item.proportion) + '%' }} {{ decimal(item.proportion) + "%" }}
<img style="width: 4px; height: 12px; margin-left: 5px" src="../assets/img/dataCockpit/hongse_you.png" /> <!-- <img style="width: 4px; height: 12px; margin-left: 5px" src="../assets/img/dataCockpit/hongse_you.png" /> -->
</span> </span>
</span> </span>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
<!-- 中间有数据样式 表格--> <!-- 中间有数据样式 表格-->
<div class="outpatientDetails_bottom_leftShowBox_right" v-if="tableData.length !== 0"> <div
<el-table class="outpatientDetails_bottom_leftShowBox_right"
v-if="tableData.length !== 0"
>
<el-table
:data="tableData" :data="tableData"
border border
size="medium" size="medium"
...@@ -141,910 +227,996 @@ ...@@ -141,910 +227,996 @@
prop="iteM_NAME" prop="iteM_NAME"
></el-table-column> ></el-table-column>
<el-table-column label="单价" prop="unitprice"> <el-table-column label="单价" prop="unitprice">
<template slot-scope="scope"> <template slot-scope="scope">
{{ decimal(scope.row.fee) }} {{ decimal(scope.row.fee) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="数量" prop="quantity"></el-table-column> <el-table-column label="数量" prop="quantity"></el-table-column>
<el-table-column label="总金额" prop="fee"> <el-table-column label="总金额" prop="fee">
<template slot-scope="scope" > <template slot-scope="scope">
{{ decimal(scope.row.unitprice) }} {{ decimal(scope.row.unitprice) }}
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<!-- 中间表格无数据 --> <!-- 中间表格无数据 -->
<div class="outpatientDetails_bottom_leftShowBox_right" v-else> <div class="outpatientDetails_bottom_leftShowBox_right" v-else>
<div class="outpatientDetails_bottom_leftShowBox_right_box"> <div class="outpatientDetails_bottom_leftShowBox_right_box">
<img class="outpatientDetails_bottom_leftShowBox_right_box_img" src="../assets/img/nodata.png" alt="" /> <img
<div class="outpatientDetails_bottom_leftShowBox_right_box_text">暂无数据</div> class="outpatientDetails_bottom_leftShowBox_right_box_img"
</div> src="../assets/img/nodata.png"
</div> alt=""
</div> />
<div class="outpatientDetails_bottom_leftShowBox_right_box_text">
暂无数据
</div>
</div>
</div>
</div>
<!-- 表格无数据样式 --> <!-- 表格无数据样式 -->
<div class="outpatientDetails_bottom_leftShowBox" v-else> <div class="outpatientDetails_bottom_leftShowBox" v-else>
<div class="outpatientDetails_bottom_leftShowBox_box"> <div class="outpatientDetails_bottom_leftShowBox_box">
<img class="outpatientDetails_bottom_leftShowBox_box_img" src="../assets/img/nodata.png" alt="" /> <img
<div class="outpatientDetails_bottom_leftShowBox_box_text">暂无数据</div> class="outpatientDetails_bottom_leftShowBox_box_img"
</div> src="../assets/img/nodata.png"
</div> alt=""
<!-- 右侧有数据 --> />
<div class="outpatientDetails_bottom_rght2"> <div class="outpatientDetails_bottom_leftShowBox_box_text">
<div class="outpatientDetails_bottom_rght2_top"> 暂无数据
<div class="outpatientDetails_bottom_rght2_top_title">异常问题</div> </div>
<div class="outpatientDetails_bottom_rght2_top_mes"> </div>
</div>
<span class="outpatientDetails_bottom_rght2_top_mes_span1" v-for="(item, ind) in typeCountDatas" :key="ind">{{ item.name }}：<span :style="{ color: item.color }">{{ item.count }}</span></span <!-- 右侧有数据 -->
> <div class="outpatientDetails_bottom_rght2">
<!-- <span class="outpatientDetails_bottom_rght2_top_mes_span2">检查：<span style="color: #3ad330">0</span></span> <div class="outpatientDetails_bottom_rght2_top">
<div class="outpatientDetails_bottom_rght2_top_title">异常问题</div>
<div class="outpatientDetails_bottom_rght2_top_mes">
<span
class="outpatientDetails_bottom_rght2_top_mes_span1"
v-for="(item, ind) in typeCountDatas"
:key="ind"
>{{ item.name }}：<span :style="{ color: item.color }">{{
item.count
}}</span></span
>
<!-- <span class="outpatientDetails_bottom_rght2_top_mes_span2">检查：<span style="color: #3ad330">0</span></span>
<span class="outpatientDetails_bottom_rght2_top_mes_span3">治疗：<span style="color: #2aaae2">0</span></span> <span class="outpatientDetails_bottom_rght2_top_mes_span3">治疗：<span style="color: #2aaae2">0</span></span>
<span class="outpatientDetails_bottom_rght2_top_mes_span4">其他：<span style="color: red">0</span></span> --> <span class="outpatientDetails_bottom_rght2_top_mes_span4">其他：<span style="color: red">0</span></span> -->
</div> </div>
</div> </div>
<div class="outpatientDetails_bottom_rght2_bottom"> <div class="outpatientDetails_bottom_rght2_bottom">
<div class="outpatientDetails_bottom_rght2_bottom_li" v-for="(item, ind) in options" :key="ind"> <div
class="outpatientDetails_bottom_rght2_bottom_li"
<span v-show="item.projectRuleLevel == '禁止'" class="outpatientDetails_bottom_rght2_bottom_li_title" style="background: red">{{ v-for="(item, ind) in options"
item.projectRuleLevel :key="ind"
}}</span> >
<span v-show="item.projectRuleLevel == '提示'" class="outpatientDetails_bottom_rght2_bottom_li_title" style="background: #2aaae2">{{ <span
item.projectRuleLevel v-show="item.projectRuleLevel == '禁止'"
}}</span> class="outpatientDetails_bottom_rght2_bottom_li_title"
<span v-show="item.projectRuleLevel == '警告'" class="outpatientDetails_bottom_rght2_bottom_li_title" style="background: #e9c621">{{ style="background: red"
item.projectRuleLevel >{{ item.projectRuleLevel }}</span
}}</span> >
<span
v-show="item.projectRuleLevel == '提示'"
class="outpatientDetails_bottom_rght2_bottom_li_title"
style="background: #2aaae2"
>{{ item.projectRuleLevel }}</span
>
<span
v-show="item.projectRuleLevel == '警告'"
class="outpatientDetails_bottom_rght2_bottom_li_title"
style="background: #e9c621"
>{{ item.projectRuleLevel }}</span
>
<el-tooltip placement="bottom" trigger="hover"> <el-tooltip placement="bottom" trigger="hover">
<template #content>{{item.notes}} </template> <template #content>{{ item.notes }} </template>
<span class="outpatientDetails_bottom_rght2_bottom_li_cont">{{ item.notes }}</span> <span class="outpatientDetails_bottom_rght2_bottom_li_cont">{{
</el-tooltip> item.notes
}}</span>
</div> </el-tooltip>
</div> </div>
</div> </div>
</div> </div>
<!--无数据 --> </div>
<!-- <div class="outpatientDetails_bottom" v-if="goods.length == 0"> <!--无数据 -->
<!-- <div class="outpatientDetails_bottom" v-if="goods.length == 0">
<div class="outpatientDetails_bottom_box"> <div class="outpatientDetails_bottom_box">
<img class="outpatientDetails_bottom_box_img" src="../assets/img/nodata.png" alt="" /> <img class="outpatientDetails_bottom_box_img" src="../assets/img/nodata.png" alt="" />
<div class="outpatientDetails_bottom_box_text">暂无数据</div> <div class="outpatientDetails_bottom_box_text">暂无数据</div>
</div> </div>
</div> --> </div> -->
</div> </div>
</template> </template>
<script > <script >
import http from '../utils/http'; import http from "../utils/http";
import { reactive, toRefs, onMounted, nextTick, computed } from '@vue/composition-api'; import {
import { decimal } from '../utils/decimal'; reactive,
toRefs,
onMounted,
nextTick,
computed,
} from "@vue/composition-api";
import { decimal } from "../utils/decimal";
import { Message } from 'element-ui'; import { Message } from "element-ui";
import { useRoute, useRouter } from '../utils/useVueRouter'; import { useRoute, useRouter } from "../utils/useVueRouter";
import { setItem, getItem } from '../utils/auth'; import { setItem, getItem } from "../utils/auth";
export default { export default {
name: 'outpatientDetails', name: "outpatientDetails",
setup() { setup() {
//表格颜色
//表格颜色 const tableRowClassName = ({ row }) => {
const tableRowClassName = ({ row}) => { if (row.rowIndex % 2 == 0) {
if (row.rowIndex % 2 == 0) { return "isverifyStyle";
return 'isverifyStyle'; } else {
} else { return "";
return ''; }
} };
};
//异常问题接口
const GetProjectRulesData = () => {
http //异常问题接口
.post(`/medical/get/GetPRHisData?&code=${route.value.query.id}`, {}) const GetProjectRulesData = () => {
.then((data) => { http
state.options = data.projectRules; .post(`/medical/get/GetPRHisData?&code=${route.value.query.id}`, {})
state.typeCountDatas = data.typeCountDatas; .then((data) => {
if (data.typeCountDatas == null) { state.options = data.projectRules;
state.showCountDatas = false; state.typeCountDatas = data.typeCountDatas;
} if (data.typeCountDatas == null) {
if (data.projectRules == null) { state.showCountDatas = false;
state.showbottom = false; }
} if (data.projectRules == null) {
state.showbottom = false;
}) }
.catch((error) => { })
.catch((error) => {});
}); };
}; //医嘱质控
//医嘱质控 const getControl = () => {
const getControl = () => { http
.post(`/global/post/SetCaseProjectRuleHis?id=${route.value.query.id}`)
http .then((data) => {
.post(`/global/post/SetCaseProjectRuleHis?id=${route.value.query.id}`) Message.success(data.message);
.then((data) => { })
.catch((error) => {});
Message.success(data.message); };
}) //获取患者信息数据
.catch((error) => { const getHistoryInfo = () => {
http
}); .post(`/medical/Get/getHisInfo?&code=${route.value.query.id}`, {})
}; .then((data) => {
//获取患者信息数据 state.HistoryInfo = data;
const getHistoryInfo = () => { state.dipid = data.id;
state.goods = data.inpat_FeeDatas;
http state.lowMagnification = data.lowMagnification;
.post(`/medical/Get/getHisInfo?&code=${route.value.query.id}`, {}) state.highMagnification = data.highMagnification;
.then((data) => { // 高倍率>总费用 高倍率金额+高倍率金额*30%
state.HistoryInfo = data; if (data.highMagnification > data.totalFee) {
state.dipid = data.id; state.heightnum =
state.goods = data.inpat_FeeDatas; data.highMagnification + data.highMagnification * 0.3;
console.log("state.heightnum", state.heightnum);
} else if (data.highMagnification < data.totalFee) {
// 高倍率<总费用 患者总费用的金额+患者总费用的金额*30%
state.heightnum = data.totalFee + data.totalFee * 0.3;
console.log("state.heightnum", state.heightnum);
}
// 低倍率宽度
state.lowwidth = Math.round(
(Math.round(data.lowMagnification) / Math.round(state.heightnum)) *
100
);
// 高倍率宽度
state.heightwidth = Math.round(
((Math.round(state.heightnum) -
Math.round(data.highMagnification)) /
Math.round(state.heightnum)) *
100
);
// 正常倍率宽度
state.contentwidth = 100 - (state.lowwidth + state.heightwidth);
//总费用宽度
state.totalwidth = Math.round(
(Math.round(data.totalFee) / Math.round(state.heightnum)) * 100
);
// 判断总费用显示的颜色
if (data.totalFee < data.lowMagnification) {
state.totalcolor = "#e9c622";
} else if (
data.totalFee > data.lowMagnification &&
data.totalFee < data.highMagnification
) {
state.totalcolor = "#22d016";
} else if (data.totalFee > data.highMagnification) {
state.totalcolor = "#ff7e00";
}
if (data.lowMagnification == 0 || data.highMagnification == 0) {
state.bottomheight = "80%";
} else if (data.lowMagnification != 0) {
state.bottomheight = "70%";
}
state.lowMagnification=data.lowMagnification; if (state.goods.length > 0) {
state.highMagnification=data.highMagnification; // debugger
// 高倍率>总费用 高倍率金额+高倍率金额*30% toggle(0, state.goods[0]);
if (data.highMagnification > data.totalFee) { }
state.heightnum = data.highMagnification + data.highMagnification * 0.3; })
console.log('state.heightnum', state.heightnum); .catch((error) => {});
} else if (data.highMagnification < data.totalFee) { };
// 高倍率<总费用 患者总费用的金额+患者总费用的金额*30%
state.heightnum = data.totalFee + data.totalFee * 0.3; //费用分类接口
console.log('state.heightnum', state.heightnum); const getInpatFeesByREGCODE = (item) => {
} http
// 低倍率宽度 .post(
state.lowwidth = Math.round((Math.round(data.lowMagnification) / Math.round(state.heightnum)) * 100); `/medical/Get/getIFHisByREGCODE?&code=${route.value.query.id}&ItemType=${item.iteM_TYPE}`,
// 高倍率宽度 {}
state.heightwidth = Math.round(((Math.round(state.heightnum) -Math.round(data.highMagnification) ) / Math.round(state.heightnum)) * 100); )
// 正常倍率宽度 .then((data) => {
state.contentwidth = 100 - (state.lowwidth + state.heightwidth); state.tableData = data;
//总费用宽度 })
state.totalwidth= Math.round((Math.round(data.totalFee)/Math.round(state.heightnum))*100); .catch((error) => {});
// 判断总费用显示的颜色 };
if(data.totalFee<data.lowMagnification){ const toggle = (index, item) => {
state.totalcolor='#e9c622' state.checkindex = index;
}else if(data.totalFee>data.lowMagnification && data.totalFee<data.highMagnification){ getInpatFeesByREGCODE(item);
state.totalcolor='#22d016' };
const scrollToFoods = (index) => {
// state.checkindex = index;
};
let state = reactive({
HistoryInfo: {
name: "",
healthyID: "",
paymentType: "",
disNature:'',
doctorName: "",
rw: "",
totalFee: "",
avgFee: "",
days: "",
profitLoss: "",
},
checkindex: 0, // 初始化第一个栏块高亮
goods: [], //左侧费用类型
tableListHead: [
{ cloumn: "开单日期", name: "chargeTime" },
{
cloumn: "项目编码",
name: "iteM_CODE",
},
{
cloumn: "项目名称",
name: "iteM_NAME",
},
{
cloumn: "单价",
name: "unitprice",
},
{
cloumn: "数量",
name: "quantity",
},
{
cloumn: "总金额",
name: "fee",
},
],
tableData: [],
options: [], //异常问题数据
medInsNum: 0, //医保数
notdrugsNum: 0, //非药品
drugsNum: 0, //药品
diseaseNum: 0, //疾病
dipid: "",
typeCountDatas: [], //异常数据
showCountDatas: true, //异常问题类型是否显示
showbottom: true, //异常问题详情是否显示
heightnum: "", //最大值
lowwidth: "", //低倍率宽度
heightwidth: "", //高倍率宽度
contentwidth: "", //正常倍率宽度
totalwidth: "", //总费用宽度
totalcolor: "", //总费用颜色
lowMagnification: 0, //低倍率值
highMagnification: 0, //高倍率值
bottomheight: "60%", //底部高度
});
//表格自适应高度
const route = useRoute();
}else if(data.totalFee>data.highMagnification){ onMounted(() => {
state.totalcolor='#ff7e00' GetProjectRulesData();
} getHistoryInfo();
});
return {
if(data.lowMagnification==0 || data.highMagnification==0){ ...toRefs(state),
state.bottomheight="80%" tableRowClassName,
}else if(data.lowMagnification!=0) { toggle,
state.bottomheight="70%" scrollToFoods,
} getHistoryInfo,
getInpatFeesByREGCODE,
if (state.goods.length > 0) { decimal,
// debugger // tableCot,
toggle(0, state.goods[0]); GetProjectRulesData,
} getControl,
};
},
})
.catch((error) => {
});
};
//费用分类接口
const getInpatFeesByREGCODE = (item) => {
http
.post(`/medical/Get/getIFHisByREGCODE?&code=${route.value.query.id}&ItemType=${item.iteM_TYPE}`, {})
.then((data) => {
state.tableData = data;
})
.catch((error) => {
});
};
const toggle = (index, item) => {
state.checkindex = index;
getInpatFeesByREGCODE(item);
};
const scrollToFoods = (index) => {
// state.checkindex = index;
};
let state = reactive({
HistoryInfo: {
name: '',
healthyID: '',
paymentType: '',
doctorName: '',
rw: '',
totalFee: '',
avgFee: '',
days: '',
profitLoss: '',
},
checkindex: 0, // 初始化第一个栏块高亮
goods: [], //左侧费用类型
tableListHead: [
{ cloumn: '开单日期', name: 'chargeTime' },
{
cloumn: '项目编码',
name: 'iteM_CODE',
},
{
cloumn: '项目名称',
name: 'iteM_NAME',
},
{
cloumn: '单价',
name: 'unitprice',
},
{
cloumn: '数量',
name: 'quantity',
},
{
cloumn: '总金额',
name: 'fee',
},
],
tableData: [],
options: [], //异常问题数据
medInsNum: 0, //医保数
notdrugsNum: 0, //非药品
drugsNum: 0, //药品
diseaseNum: 0, //疾病
dipid: '',
typeCountDatas: [], //异常数据
showCountDatas: true, //异常问题类型是否显示
showbottom: true, //异常问题详情是否显示
heightnum: '', //最大值
lowwidth: '', //低倍率宽度
heightwidth: '', //高倍率宽度
contentwidth: '', //正常倍率宽度
totalwidth:'',//总费用宽度
totalcolor:'',//总费用颜色
lowMagnification:0,//低倍率值
highMagnification:0,//高倍率值
bottomheight:'60%',//底部高度
});
//表格自适应高度
const route = useRoute();
onMounted(() => {
GetProjectRulesData();
getHistoryInfo();
});
return {
...toRefs(state),
tableRowClassName,
toggle,
scrollToFoods,
getHistoryInfo,
getInpatFeesByREGCODE,
decimal,
// tableCot,
GetProjectRulesData,
getControl,
};
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../styles/mixin.scss'; @import "../styles/mixin.scss";
// @import '../styles/media/components/outpatientDetails.scss'; // @import '../styles/media/components/outpatientDetails.scss';
.outpatientDetails { .outpatientDetails {
// height: calc(100% - 50px); // height: calc(100% - 50px);
// background-color: white; // background-color: white;
// padding: 20px; // padding: 20px;
// position: relative; // position: relative;
// overflow: hidden; // overflow: hidden;
height: 850px; height: 850px;
background-color: white; background-color: white;
padding: 20px; padding: 20px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
&_top { &_top {
margin-bottom: 18px; margin-bottom: 18px;
&_div1 { &_div1 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.span1 { .span1 {
display: flex; display: flex;
justify-content: start; justify-content: start;
font-size: 14px; font-size: 14px;
color: #6a707e; color: #6a707e;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
} }
} }
&_message {
display: flex;
justify-content: space-between;
margin-top: 16px;
&_left {
width: 33%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
// .iconfont {
// color: #2cabe3;
// padding-left: 29px;
// font-size: 23px;
// }
&_tu1{
padding-left: 29px;
font-size: 23px;
}
&_t1 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
&_centert {
width: 33%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
// .iconfont {
// color: #2cabe3;
// padding-left: 29px;
// font-size: 23px;
// }
&_tu2{
padding-left: 29px;
font-size: 23px;
}
&_t2 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span { &_message {
color: #787e8a; display: flex;
} justify-content: space-between;
} margin-top: 16px;
} &_left {
&_right { width: 25%;
width: 33%; height: 51px;
height: 51px; display: flex;
display: flex; justify-content: start;
justify-content: start; align-items: center;
align-items: center; background-color: #f3fafd;
background-color: #f3fafd; // .iconfont {
font-family: PingFang SC; // color: #2cabe3;
// .iconfont { // padding-left: 29px;
// color: #2cabe3; // font-size: 23px;
// padding-left: 29px; // }
// font-size: 23px; &_tu1 {
// } padding-left: 29px;
&_tu3{ font-size: 23px;
padding-left: 29px; }
font-size: 23px; &_t1 {
} width: 80%;
&_t3 { height: 42px;
width: 80%; display: flex;
height: 42px; justify-content: start;
display: flex; padding-left: 10px;
justify-content: start; align-items: center;
padding-left: 10px; background-color: #fff;
align-items: center; color: #abafb3;
background-color: #fff; font-size: 14px;
color: #abafb3; margin-left: 29px;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
}
}
&_msg {
height: 51px;
background-color: #f3fafd;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
// .iconfont {
// color: #2cabe3;
// padding-left: 28px;
// font-size: 23px;
// }
&_tu4{
padding-left: 29px;
font-size: 23px;
}
span:nth-child(2) {
margin-left: 21px;
}
span:nth-child(n + 2) {
width: 258px;
height: 39px;
background-color: #fff;
font-size: 14px;
color: #6d7381;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC;
margin-right: 5px;
}
span:nth-child(n + 7) {
margin-right: 5px;
}
}
&_fenqu { span {
width: 100%; color: #787e8a;
height: 12%; }
margin-bottom: 10px; }
background-color: #f3fafd; }
display: flex; &_centert {
justify-content: center; width: 25%;
align-items: center; height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
// .iconfont {
// color: #2cabe3;
// padding-left: 29px;
// font-size: 23px;
// }
&_tu2 {
padding-left: 29px;
font-size: 23px;
}
&_t2 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
&_di { span {
width: 99%; color: #787e8a;
height: 85%; }
background-color: white; }
display: flex; }
&_right {
width: 25%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
&_tu3 {
padding-left: 29px;
font-size: 23px;
}
&_t3 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
&_low {
width: 25%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
&_tu4 {
padding-left: 29px;
font-size: 23px;
}
&_t4 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
}
}
&_msg {
height: 51px;
background-color: #f3fafd;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
// .iconfont {
// color: #2cabe3;
// padding-left: 28px;
// font-size: 23px;
// }
&_tu4 {
padding-left: 29px;
font-size: 23px;
}
span:nth-child(2) {
margin-left: 21px;
}
span:nth-child(n + 2) {
width: 258px;
height: 39px;
background-color: #fff;
font-size: 14px;
color: #6d7381;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC;
margin-right: 5px;
}
span:nth-child(n + 7) {
margin-right: 5px;
}
}
justify-content: center; &_fenqu {
&_bb{ width: 100%;
width: 98%; height: 12%;
height: 85%; margin-bottom: 10px;
margin: 0 5px; background-color: #f3fafd;
background-color: white; display: flex;
display: flex; justify-content: center;
flex-direction: column; align-items: center;
justify-content: space-around;
padding-top: 10px;
&_div1 {
width: 100%;
height: 18%;
// display: flex;
// flex-direction: column;
// align-items: flex-start;
&_num {
display: flex;
font-size: 12px;
font-family: PingFang SC;
}
&_he {
display: block;
width: 2px;
height: 10px;
}
}
&_div2 {
width: 100%;
height: 64%;
display: flex;
justify-content: center;
align-items: center;
&_span1 {
display: block;
// width: 33%;
height: 50%;
border-radius: 2px;
color: white;
font-size: 12px;
background-color: #e9c622; &_di {
display: flex; width: 99%;
align-items: center; height: 85%;
justify-content: center; background-color: white;
font-family: PingFang SC; display: flex;
}
&_span2 {
display: block;
// width: 33%;
height: 50%;
border-radius: 2px;
color: white;
font-size: 12px;
background-color: #22d016; justify-content: center;
display: flex; &_bb {
align-items: center; width: 98%;
justify-content: center; height: 85%;
font-family: PingFang SC; margin: 0 5px;
} background-color: white;
&_span3 { display: flex;
display: block; flex-direction: column;
// width: 33%; justify-content: space-around;
height: 50%; padding-top: 10px;
border-radius: 2px; &_div1 {
color: white; width: 100%;
font-size: 12px; height: 18%;
background-color: #ff7e00; // display: flex;
display: flex; // flex-direction: column;
align-items: center; // align-items: flex-start;
justify-content: center; &_num {
font-family: PingFang SC; display: flex;
} font-size: 12px;
} font-family: PingFang SC;
&_div3 { }
width: 100%; &_he {
height: 18%; display: block;
display: flex; width: 2px;
&_span1 { height: 10px;
display: flex; }
height: 100%; }
justify-content: start; &_div2 {
font-size: 12px; width: 100%;
font-family: PingFang SC; height: 64%;
color: #abafb3; display: flex;
justify-content: center;
align-items: center;
&_span1 {
display: block;
// width: 33%;
height: 50%;
border-radius: 2px;
color: white;
font-size: 12px;
} background-color: #e9c622;
&_span2 { display: flex;
display: flex; align-items: center;
height: 100%; justify-content: center;
font-size: 12px; font-family: PingFang SC;
font-family: PingFang SC; &_t1 {
color: #abafb3; width: 90%;
justify-content: start; height: 100%;
} white-space: nowrap;
&_span3 { overflow: hidden;
display: flex; text-overflow: ellipsis;
height: 100%; text-align: center;
font-family: PingFang SC; padding-top: 10px;
font-size: 12px; }
color: #abafb3; &_t1:hover {
justify-content: space-between; width: 90%;
} }
// &_span4 { }
// display: flex; &_span2 {
// width: 25%; display: block;
// height: 100%; // width: 33%;
// font-family: PingFang SC; height: 50%;
// padding-left: 383px; border-radius: 2px;
// font-size: 12px; color: white;
// color: #abafb3; font-size: 12px;
// }
}
} background-color: #22d016;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC;
&_t2 {
width: 90%;
height: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
padding-top: 10px;
}
&_t2:hover {
width: 90%;
}
}
&_span3 {
display: block;
// width: 33%;
height: 50%;
border-radius: 2px;
color: white;
font-size: 12px;
background-color: #ff7e00;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC;
&_t3 {
width: 90%;
height: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
padding-top: 10px;
}
} &_t3:hover {
} width: 90%;
}
}
}
&_div3 {
width: 100%;
height: 18%;
display: flex;
&_span1 {
display: flex;
height: 100%;
justify-content: start;
font-size: 12px;
font-family: PingFang SC;
color: #abafb3;
}
&_span2 {
display: flex;
height: 100%;
font-size: 12px;
font-family: PingFang SC;
color: #abafb3;
justify-content: start;
}
&_span3 {
display: flex;
height: 100%;
font-family: PingFang SC;
font-size: 12px;
color: #abafb3;
justify-content: space-between;
}
// &_span4 {
// display: flex;
// width: 25%;
// height: 100%;
// font-family: PingFang SC;
// padding-left: 383px;
// font-size: 12px;
// color: #abafb3;
// }
}
}
}
}
&_title { &_title {
background-image: url('../assets/img/dataMaintenance/title.png'); background-image: url("../assets/img/dataMaintenance/title.png");
background-repeat: no-repeat; background-repeat: no-repeat;
display: flex; display: flex;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
margin-bottom: 22px; margin-bottom: 22px;
background-size: 100% 100%; background-size: 100% 100%;
background-position: center; background-position: center;
height: 26px; height: 26px;
span { span {
color: #fff; color: #fff;
font-size: 13px; font-size: 13px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
margin-left: 17px; margin-left: 17px;
} }
} }
&_bottom { &_bottom {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 80%; height: 80%;
&_leftShowBox { &_leftShowBox {
width: 80%; width: 80%;
height: 100%; height: 100%;
display: flex; display: flex;
// 左侧无数据 // 左侧无数据
&_box { &_box {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&_img { &_img {
width: 155px; width: 155px;
height: 155px; height: 155px;
} }
&_text { &_text {
font-size: 14px; font-size: 14px;
color: #6a707e; color: #6a707e;
} }
} }
// 有数据 // 有数据
&_left { &_left {
list-style-type: none; list-style-type: none;
width: 37%; width: 27%;
height: 90%; height: 90%;
overflow-y: auto; overflow-y: auto;
&_ul { &_ul {
margin: 0; margin: 0;
padding-left: 0; padding-left: 0;
width: 100%; width: 100%;
.active { .active {
display: flex; display: flex;
justify-content: start; justify-content: start;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(to right, #2cabe3, #57cafd); background: linear-gradient(to right, #2cabe3, #57cafd);
color: #fff; color: #fff;
.fc2 { .fc2 {
width: 40%; width: 70%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
justify-content: flex-start; justify-content: flex-start;
padding-left: 3%; padding-left: 3%;
.iconfont { .iconfont {
font-size: 20px; font-size: 20px;
} }
} }
.fc3 { .fc3 {
width: 60%; width: 30%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
justify-content: flex-end; justify-content: center;
padding-right: 3%; padding-right: 3%;
} }
} }
} }
li { li {
list-style-type: none; list-style-type: none;
width: 100%; width: 100%;
height: 56px; height: 56px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background-color: #f5f6fa; background-color: #f5f6fa;
margin-bottom: 21px; margin-bottom: 21px;
font-size: 13px; font-size: 13px;
color: #6a707e; color: #6a707e;
div { div {
width: 98%; width: 98%;
height: 46px; height: 46px;
background-color: #fff; background-color: #fff;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-size: 13px; font-size: 13px;
font-family: 'PingFang SC'; font-family: "PingFang SC";
.sp1 { .sp1 {
width: 40%; width: 40%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
justify-content: flex-start; justify-content: flex-start;
padding-left: 3%; padding-left: 3%;
font-family: 'PingFang SC'; font-family: "PingFang SC";
} }
.sp2 { .sp2 {
width: 60%; width: 60%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
justify-content: flex-end; justify-content: flex-end;
padding-right: 3%; padding-right: 3%;
font-family: 'PingFang SC'; font-family: "PingFang SC";
&_avg { &_avg {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
width: 50%; width: 50%;
justify-content: flex-end; justify-content: flex-end;
} }
&_reto { &_reto {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
width: 50%; width: 50%;
justify-content: flex-end; justify-content: center;
} }
} }
} }
} }
} }
&_right { &_right {
width: 62%; width: 72%;
// 无数据样式 // 无数据样式
&_box { &_box {
width: 100%; width: 100%;
height: 500px; height: 500px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
&_img { &_img {
width: 100px; width: 100px;
height: 100px; height: 100px;
} }
&_text { &_text {
font-size: 18px; font-size: 18px;
color: #6a707e; color: #6a707e;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
} }
} }
&_table { &_table {
height: calc(100% - 100px); height: calc(100% - 100px);
} }
.isverifyStyle { .isverifyStyle {
background-color: #f4f5f8; background-color: #f4f5f8;
} }
.paginations { .paginations {
text-align: right; text-align: right;
} }
} }
} }
&_rght2 { &_rght2 {
width: 22%; width: 22%;
height: 100%; height: 100%;
border: 1px solid #f6f6f8; border: 1px solid #f6f6f8;
padding: 10px; padding: 10px;
&_top { &_top {
height: 20%; height: 20%;
width: 100%; width: 100%;
border-bottom: 3px solid #eef8fd; border-bottom: 3px solid #eef8fd;
&_title { &_title {
width: 98px; width: 98px;
height: 19px; height: 19px;
text-align: start; text-align: start;
padding-left: 10px; padding-left: 10px;
background-color: #2cabe3; background-color: #2cabe3;
font-size: 14px; font-size: 14px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
color: white; color: white;
} }
&_mes { &_mes {
width: 100%; width: 100%;
height: 80%; height: 80%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
&_span1 { &_span1 {
width: 30%; width: 30%;
height: 36px; height: 36px;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 5px; padding-left: 5px;
background: #f6f6f8; background: #f6f6f8;
font-size: 16px; font-size: 16px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
color: #5d5d5d; color: #5d5d5d;
margin-right: 5px; margin-right: 5px;
} }
&_span2 { &_span2 {
width: 101px; width: 101px;
height: 36px; height: 36px;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 10px; padding-left: 10px;
background: #f6f6f8; background: #f6f6f8;
font-size: 16px; font-size: 16px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
color: #5d5d5d; color: #5d5d5d;
margin-right: 5px; margin-right: 5px;
} }
&_span3 { &_span3 {
width: 101px; width: 101px;
height: 36px; height: 36px;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 10px; padding-left: 10px;
background: #f6f6f8; background: #f6f6f8;
font-size: 16px; font-size: 16px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
color: #5d5d5d; color: #5d5d5d;
margin-right: 5px; margin-right: 5px;
} }
&_span4 { &_span4 {
width: 101px; width: 101px;
height: 36px; height: 36px;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 10px; padding-left: 10px;
background: #f6f6f8; background: #f6f6f8;
font-size: 16px; font-size: 16px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
color: #5d5d5d; color: #5d5d5d;
} }
} }
} }
&_bottom { &_bottom {
height: 70%; height: 70%;
width: 100%; width: 100%;
overflow-y: scroll; overflow-y: scroll;
&_li { &_li {
width: 100%; width: 100%;
height: 25%; height: 25%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: space-around; justify-content: space-around;
border-bottom: 3px solid #eef8fd; border-bottom: 3px solid #eef8fd;
&_title { &_title {
width: 69px; width: 69px;
height: 32px; height: 32px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 20px; font-size: 20px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
color: whiteff; color: whiteff;
} }
&_cont { &_cont {
font-size: 16px; font-size: 16px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
color: #5d5d5d; color: #5d5d5d;
text-align: start; text-align: start;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 97%; width: 97%;
} }
} }
} }
} }
} }
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment