Skip to content

V
vue-composition-api
Commit 85683bbb by 唐玉峰
Options

.

parent c57cd76e
Showing with 2254 additions and 2462 deletions
src/views/outHistorygrouping.vue
...@@ -6,965 +6,894 @@ ...@@ -6,965 +6,894 @@
* @Description: * @Description:
--> -->
<template> <template>
<!-- 智能分组 --> <!-- 智能分组 -->
<div class="outsetgrouping" id="setGroupingbox"> <div class="outsetgrouping" id="setGroupingbox">
<div class="outsetgrouping_button"> <div class="outsetgrouping_button">
<!-- <el-button class="outsetgrouping_button_GoBackbtn" size="mini" @click="goback"> <!-- <el-button class="outsetgrouping_button_GoBackbtn" size="mini" @click="goback">
<span class="iconfont icon-daochu"></span> <span class="s2">返回</span> <span class="iconfont icon-daochu"></span> <span class="s2">返回</span>
</el-button> --> </el-button> -->
<el-button <el-button class="outsetgrouping_button_Submitbtn" size="mini" type="primary" @click="submit">
class="outsetgrouping_button_Submitbtn" <span class="iconfont icon-ipr_tijiao"></span>
size="mini" <span class="s2">提交</span>
type="primary" </el-button>
@click="submit"
>
<span class="iconfont icon-ipr_tijiao"></span>
<span class="s2">提交</span>
</el-button>
</div>
<div class="outsetgrouping_top">
<div class="outsetgrouping_top_message">
<div class="outsetgrouping_top_message_left">
<span class="outsetgrouping_top_message_left_tu1"><img src="../assets/img/peo.png" alt=""> </span>
<div class="outsetgrouping_top_message_left_t1">
住院号:<span>{{ casehisObj ? casehisObj.a48 : "" }}</span>
</div>
</div>
<div class="outsetgrouping_top_message_centert">
<span class="outsetgrouping_top_message_centert_tu2"><img src="../assets/img/ka.png" alt=""></span>
<div class="outsetgrouping_top_message_centert_t2">
住院次数:<span>{{ casehisObj ? casehisObj.a49 : "" }}</span>
</div>
</div>
<div class="outsetgrouping_top_message_right">
<span class="outsetgrouping_top_message_right_tu3"><img src="../assets/img/qian.png" alt=""></span>
<div class="outsetgrouping_top_message_right_t3">
医疗付费方式:<span>{{ casehisObj ? casehisObj.a46C : "" }}</span>
</div>
</div>
</div>
</div>
<div class="outsetgrouping_top2">
<div class="outsetgrouping_top2_message">
<div class="outsetgrouping_top2_message_left">
<span class="outsetgrouping_top2_message_left_tu4"><img src="../assets/img/bianma.png" alt=""> </span>
<div class="outsetgrouping_top2_message_left_t1">
当前入组编码:<span>{{
casehisObj ? casehisObj.drgs.code : ""
}}</span>
</div>
</div> </div>
<div class="outsetgrouping_top2_message_centert"> <div class="outsetgrouping_top">
<span class="outsetgrouping_top2_message_centert_tu5"><img src="../assets/img/daoru.png" alt=""></span> <div class="outsetgrouping_top_message">
<div class="outsetgrouping_top2_message_centert_t2"> <div class="outsetgrouping_top_message_left">
入组名称:<span>{{ casehisObj ? casehisObj.drgs.name : "" }}</span> <span class="outsetgrouping_top_message_left_tu1"><img src="../assets/img/peo.png" alt="" /> </span>
</div> <div class="outsetgrouping_top_message_left_t1">
住院号:<span>{{ casehisObj ? casehisObj.a48 : "" }}</span>
</div>
</div>
<div class="outsetgrouping_top_message_centert">
<span class="outsetgrouping_top_message_centert_tu2"><img src="../assets/img/ka.png" alt="" /></span>
<div class="outsetgrouping_top_message_centert_t2">
住院次数:<span>{{ casehisObj ? casehisObj.a49 : "" }}</span>
</div>
</div>
<div class="outsetgrouping_top_message_right">
<span class="outsetgrouping_top_message_right_tu3"><img src="../assets/img/qian.png" alt="" /></span>
<div class="outsetgrouping_top_message_right_t3">
医疗付费方式:<span>{{ casehisObj ? casehisObj.a46C : "" }}</span>
</div>
</div>
</div>
</div> </div>
<div class="outsetgrouping_top2_message_right"> <div class="outsetgrouping_top2">
<span class="outsetgrouping_top2_message_right_tu6"><img src="../assets/img/jiner.png" alt=""></span> <div class="outsetgrouping_top2_message">
<div class="outsetgrouping_top2_message_right_t3"> <div class="outsetgrouping_top2_message_left">
预计DRG支付费用:<span>{{ <span class="outsetgrouping_top2_message_left_tu4"><img src="../assets/img/bianma.png" alt="" /> </span>
casehisObj ? casehisObj.drgs.actualfee : "" <div class="outsetgrouping_top2_message_left_t1">
}}</span> 当前入组编码:<span>{{ casehisObj ? casehisObj.drgs.code : "" }}</span>
</div> </div>
</div>
<div class="outsetgrouping_top2_message_centert">
<span class="outsetgrouping_top2_message_centert_tu5"><img src="../assets/img/daoru.png" alt="" /></span>
<div class="outsetgrouping_top2_message_centert_t2">
入组名称:<span>{{ casehisObj ? casehisObj.drgs.name : "" }}</span>
</div>
</div>
<div class="outsetgrouping_top2_message_right">
<span class="outsetgrouping_top2_message_right_tu6"><img src="../assets/img/jiner.png" alt="" /></span>
<div class="outsetgrouping_top2_message_right_t3">
预计DRG支付费用:<span>{{ casehisObj ? casehisObj.drgs.actualfee : "" }}</span>
</div>
</div>
</div>
</div> </div>
</div> <div class="outsetgrouping_top3"></div>
</div>
<div class="outsetgrouping_top3"></div>
<div class="outsetgrouping_title"> <div class="outsetgrouping_title">
<span class="outsetgrouping_title_span">智能疾病分组</span> <span class="outsetgrouping_title_span">智能疾病分组</span>
</div> </div>
<div class="outsetgrouping_centent"> <div class="outsetgrouping_centent">
<div <div class="outsetgrouping_centent_totalnum" v-for="(item, index) in CorePercents" :key="index">
class="outsetgrouping_centent_totalnum" <div class="outsetgrouping_centent_totalnum_left">
v-for="(item, index) in CorePercents" <div class="outsetgrouping_centent_totalnum_left_radios">
:key="index" <input type="radio" name="radios" :value="item.coreID" v-model="radio" />
> </div>
<div class="outsetgrouping_centent_totalnum_left">
<div class="outsetgrouping_centent_totalnum_left_radios"> <div class="outsetgrouping_centent_totalnum_left_text">
<input <div class="outsetgrouping_centent_totalnum_left_text_msg1">
type="radio" <div class="outsetgrouping_centent_totalnum_left_text_msg1_text1">
name="radios" <span> 诊断名称:{{ item.diagMapName }}</span>
:value="item.coreID" <span> 诊断类型:{{ item.diagOrder }}</span>
v-model="radio" </div>
/> <div class="outsetgrouping_centent_totalnum_left_text_msg1_text2">
</div> <span>操作名称:{{ item.opsMapName }}</span>
<span>手术类型:{{ item.opsOrder }}</span>
<div class="outsetgrouping_centent_totalnum_left_text"> </div>
<div class="outsetgrouping_centent_totalnum_left_text_msg1"> </div>
<div class="outsetgrouping_centent_totalnum_left_text_msg1_text1"> <div class="outsetgrouping_centent_totalnum_left_text_msg2">
<span> 诊断名称:{{ item.diagMapName }}</span> <div class="outsetgrouping_centent_totalnum_left_text_msg2_text3">
<span> 诊断类型:{{ item.diagOrder }}</span> <span>分组编码：{{ item.code }}</span>
</div> <span>入组名称：{{ item.coreName }}</span>
<div class="outsetgrouping_centent_totalnum_left_text_msg1_text2"> </div>
<span>操作名称:{{ item.opsMapName }}</span> <div class="outsetgrouping_centent_totalnum_left_text_msg2_text4">
<span>手术类型:{{ item.opsOrder }}</span> <span>主诊断编码：{{ item.disCode }}</span
</div> ><span>主操作编码：{{ item.opsCode }}</span
><span>基准点数：{{ item.score }}</span>
</div>
<div class="outsetgrouping_centent_totalnum_left_text_msg2_text5">
<span>预计DRG支付费用：{{ item.unitfee }}</span
><span>院内历年平均费用：{{ item.avgFee }}</span
><span>院内历年平均住院天数：{{ item.avgInHosDay }}</span>
</div>
</div>
</div>
</div>
<div class="outsetgrouping_centent_totalnum_right">
<div class="outsetgrouping_centent_totalnum_right_text1">
<span class="outsetgrouping_centent_totalnum_right_text1_span1"> 药占比:</span>
<div :id="`indexChart` + index" class="outsetgrouping_centent_totalnum_right_text1_echar1"></div>
</div>
<div class="outsetgrouping_centent_totalnum_right_text2">
<span class="outsetgrouping_centent_totalnum_right_text2_span2"> 耗材占比:</span>
<div :id="`indexCharttwo` + index" class="outsetgrouping_centent_totalnum_right_text2_echar2"></div>
</div>
<div class="outsetgrouping_centent_totalnum_right_text3">
<span class="outsetgrouping_centent_totalnum_right_text3_span3"> 检查占比:</span>
<div :id="`indexCharttree` + index" class="outsetgrouping_centent_totalnum_right_text3_echar3"></div>
</div>
<div class="outsetgrouping_centent_totalnum_right_text4">
<span class="outsetgrouping_centent_totalnum_right_text4_span4"> 检验占比:</span>
<div :id="`indexChartfore` + index" class="outsetgrouping_centent_totalnum_right_text4_echar4"></div>
</div>
<div class="outsetgrouping_centent_totalnum_right_text5">
<span class="outsetgrouping_centent_totalnum_right_text5_span5"> 其他占比:</span>
<div :id="`indexChartfile` + index" class="outsetgrouping_centent_totalnum_right_text5_echar5"></div>
</div>
</div>
</div> </div>
<div class="outsetgrouping_centent_totalnum_left_text_msg2"> <!-- 如果没有搜索时的样式 -->
<div class="outsetgrouping_centent_totalnum_left_text_msg2_text3">
<span>分组编码：{{ item.code }}</span> <div v-show="nolistShow" class="outsetgrouping_centent_nodata">
<span>入组名称：{{ item.coreName }}</span> <div class="outsetgrouping_centent_nodata_img">
</div> <img src="../assets/img/nodata.png" alt="" />
<div class="outsetgrouping_centent_totalnum_left_text_msg2_text4"> </div>
<span>主诊断编码：{{ item.disCode }}</span <div class="outsetgrouping_centent_nodata_text">暂无数据</div>
><span>主操作编码：{{ item.opsCode }}</span
><span>基准点数：{{ item.score }}</span>
</div>
<div class="outsetgrouping_centent_totalnum_left_text_msg2_text5">
<span>预计DRG支付费用：{{ item.unitfee }}</span
><span>院内历年平均费用：{{ item.avgFee }}</span
><span>院内历年平均住院天数：{{ item.avgInHosDay }}</span>
</div>
</div> </div>
</div>
</div> </div>
<div class="outsetgrouping_centent_totalnum_right"> <div class="outsetgrouping_pagination">
<div class="outsetgrouping_centent_totalnum_right_text1"> <el-pagination
<span class="outsetgrouping_centent_totalnum_right_text1_span1"> layout="sizes,prev, pager, next,jumper"
药占比:</span :total="totalCount"
> @size-change="sizeChange"
<div @current-change="currentChange"
:id="`indexChart` + index" :current-page="currentPage"
class="outsetgrouping_centent_totalnum_right_text1_echar1" :page-size="pageSize"
></div> :page-sizes="[10, 30, 50]"
</div>
<div class="outsetgrouping_centent_totalnum_right_text2">
<span class="outsetgrouping_centent_totalnum_right_text2_span2">
耗材占比:</span
>
<div
:id="`indexCharttwo` + index"
class="outsetgrouping_centent_totalnum_right_text2_echar2"
></div>
</div>
<div class="outsetgrouping_centent_totalnum_right_text3">
<span class="outsetgrouping_centent_totalnum_right_text3_span3">
检查占比:</span
>
<div
:id="`indexCharttree` + index"
class="outsetgrouping_centent_totalnum_right_text3_echar3"
></div>
</div>
<div class="outsetgrouping_centent_totalnum_right_text4">
<span class="outsetgrouping_centent_totalnum_right_text4_span4">
检验占比:</span
>
<div
:id="`indexChartfore` + index"
class="outsetgrouping_centent_totalnum_right_text4_echar4"
></div>
</div>
<div class="outsetgrouping_centent_totalnum_right_text5">
<span class="outsetgrouping_centent_totalnum_right_text5_span5">
其他占比:</span
> >
<div </el-pagination>
:id="`indexChartfile` + index"
class="outsetgrouping_centent_totalnum_right_text5_echar5"
></div>
</div>
</div> </div>
</div>
<!-- 如果没有搜索时的样式 -->
<div v-show="nolistShow" class="outsetgrouping_centent_nodata">
<div class="outsetgrouping_centent_nodata_img">
<img src="../assets/img/nodata.png" alt="" />
</div>
<div class="outsetgrouping_centent_nodata_text">暂无数据</div>
</div>
</div>
<div class="outsetgrouping_pagination">
<el-pagination
layout="sizes,prev, pager, next,jumper"
:total="totalCount"
@size-change="sizeChange"
@current-change="currentChange"
:current-page="currentPage"
:page-size="pageSize"
:page-sizes="[10, 30, 50]"
>
</el-pagination>
</div> </div>
</div>
</template> </template>
<script > <script>
import http from "../utils/http"; import http from "../utils/http";
import { import { reactive, toRefs, onMounted, nextTick, computed } from "@vue/composition-api";
reactive,
toRefs,
onMounted,
nextTick,
computed,
} from "@vue/composition-api";
import { decimal } from "../utils/decimal"; 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 { initEcharts, categoryChart } from "../utils/echarts"; import { initEcharts, categoryChart } from "../utils/echarts";
export default { export default {
name: "outHistorygrouping", name: "outHistorygrouping",
setup() { setup() {
let state = reactive({ let state = reactive({
abc: "", abc: "",
casehisObj: null, casehisObj: null,
searchForm: { searchForm: {
diagName: "", diagName: "",
opsName: "", opsName: "",
}, },
CorePercents: [], CorePercents: [],
totalCount: 0, //总条数 totalCount: 0, //总条数
currentPage: 1, //当前页 currentPage: 1, //当前页
pageSize: 10, pageSize: 10,
typesel: 1, typesel: 1,
radio: "", //单选框选中值 radio: "", //单选框选中值
drug: [], drug: [],
nodataShow: true, //没有搜索时显示 nodataShow: true, //没有搜索时显示
nolistShow: false, //没有搜索数据的时候显示 nolistShow: false, //没有搜索数据的时候显示
groupList: [], //主诊断 groupList: [], //主诊断
groupArr: [], groupArr: [],
groupList2: [], //主手术 groupList2: [], //主手术
groupArr2: [], groupArr2: [],
diagMapList: null, //医保诊断编码集合 diagMapList: null, //医保诊断编码集合
opsMapList: null, //医保手术编码集合 opsMapList: null, //医保手术编码集合
});
//返回
const router = useRouter();
const goback = () => {
router.go(-1);
};
//获取基本数据
function getCaseHis(code) {
http
.post(`/medical/Get/casehisData?id=${code}`, {})
.then((data) => {
state.casehisObj = data;
console.log("data", data);
state.diagMapList = data.diagMapList;
state.opsMapList = data.opsMapList;
getlist();
})
.catch((error) => {});
}
//获取列表数据
const getlist = () => {
http
.post(`/medical/get/GetCorePercents`, {
PageNumber: state.currentPage,
Type: 1,
pageSize: state.pageSize,
DiagMapList: state.diagMapList,
OpsMapList: state.opsMapList,
id: route.value.query.id,
})
.then((data) => {
state.CorePercents = data.list;
state.totalCount = data.totalCount;
if (state.CorePercents.length == 0) {
state.nolistShow = true;
// state.nodataShow = false;
}
for (var i = 0; i < state.CorePercents.length; i++) {
initEcharts(
categoryChart(state.CorePercents[i].drugPercent, "#2CABE3"),
`indexChart${i}`
);
initEcharts(
categoryChart(state.CorePercents[i].materialsPercent, "#71D875"),
`indexCharttwo${i}`
);
initEcharts(
categoryChart(state.CorePercents[i].inspectPercent, "#F35E77"),
`indexCharttree${i}`
);
initEcharts(
categoryChart(state.CorePercents[i].testPercent, "#FFB321"),
`indexChartfore${i}`
);
initEcharts(
categoryChart(state.CorePercents[i].otherPercent, "#C05EF3"),
`indexChartfile${i}`
);
}
})
.catch((error) => {});
};
//提交
const submit = () => {
if (state.radio == "") {
Message.warning({
message: "请先选择要入组的病组",
type: 'warning',
}); });
} else { //返回
http const router = useRouter();
.post( const goback = () => {
`/medical/Update/casehisById?PatientId=${route.value.query.id}`, router.go(-1);
[state.radio] };
)
.then((data) => { //获取基本数据
Message.success({ function getCaseHis(code) {
message: `${data.message}`, http.post(`/medical/Get/casehisData?id=${code}`, {})
type: 'success', .then((data) => {
}); state.casehisObj = data;
console.log("data", data);
state.diagMapList = data.diagMapList;
state.opsMapList = data.opsMapList;
getlist();
})
.catch((error) => {});
}
//获取列表数据
const getlist = () => {
http.post(`/medical/get/GetCorePercents`, {
PageNumber: state.currentPage,
Type: 1,
pageSize: state.pageSize,
DiagMapList: state.diagMapList,
OpsMapList: state.opsMapList,
id: route.value.query.id,
})
.then((data) => {
state.CorePercents = data.list;
state.totalCount = data.totalCount;
if (state.CorePercents.length == 0) {
state.nolistShow = true;
// state.nodataShow = false;
}
for (var i = 0; i < state.CorePercents.length; i++) {
initEcharts(categoryChart(state.CorePercents[i].drugPercent, "#2CABE3"), `indexChart${i}`);
initEcharts(categoryChart(state.CorePercents[i].materialsPercent, "#71D875"), `indexCharttwo${i}`);
initEcharts(categoryChart(state.CorePercents[i].inspectPercent, "#F35E77"), `indexCharttree${i}`);
initEcharts(categoryChart(state.CorePercents[i].testPercent, "#FFB321"), `indexChartfore${i}`);
initEcharts(categoryChart(state.CorePercents[i].otherPercent, "#C05EF3"), `indexChartfile${i}`);
}
})
.catch((error) => {});
};
//提交
const submit = () => {
if (state.radio == "") {
Message.warning({
message: "请先选择要入组的病组",
type: "warning",
});
} else {
http.post(`/medical/Update/casehisById?PatientId=${route.value.query.id}`, [state.radio])
.then((data) => {
Message.success({
message: `${data.message}`,
type: "success",
});
getCaseHis(route.value.query.id);
})
.catch((error) => {});
}
};
/**
* 页码
*/
const currentChange = (val) => {
state.currentPage = val;
getlist();
};
const sizeChange = (val) => {
state.pageSize = val;
getlist();
};
var route = useRoute();
onMounted(() => {
getCaseHis(route.value.query.id); getCaseHis(route.value.query.id);
}) if (state.searchForm.diagName.length > 0) {
.catch((error) => {}); getlist();
} }
}; });
/**
* 页码 return {
*/ ...toRefs(state),
const currentChange = (val) => { decimal,
state.currentPage = val; getCaseHis,
getlist(); currentChange,
}; sizeChange,
const sizeChange = (val) => { getlist,
state.pageSize = val; submit,
getlist(); goback,
}; };
var route = useRoute(); },
onMounted(() => {
getCaseHis(route.value.query.id);
if (state.searchForm.diagName.length > 0) {
getlist();
}
});
return {
...toRefs(state),
decimal,
getCaseHis,
currentChange,
sizeChange,
getlist,
submit,
goback,
};
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../styles/mixin.scss"; @import "../styles/mixin.scss";
// @import '../styles/media/media/outHistorygrouping.scss'; // @import '../styles/media/media/outHistorygrouping.scss';
.outsetgrouping { .outsetgrouping {
height: 900px; height: 900px;
background-color: white; background-color: white;
padding: 0px 20px 20px 20px; padding: 0px 20px 20px 20px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
&_button {
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
&_GoBackbtn {
color: #2cabe3;
border: 1px solid #2cabe3;
}
&_Submitbtn {
background-color: #2cabe3;
color: #fff;
}
}
&_top {
.span1 {
display: flex;
justify-content: start;
font-size: 14px;
color: #6a707e;
font-family: PingFang SC;
font-weight: 400;
}
&_message {
display: flex;
justify-content: space-between;
&_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 { &_button {
width: 33%;
height: 51px;
display: flex; display: flex;
justify-content: start; justify-content: flex-end;
align-items: center; margin-bottom: 10px;
background-color: #f3fafd;
font-family: PingFang SC;
// .iconfont {
// color: #2cabe3;
// padding-left: 29px;
// font-size: 23px;
// }
&_tu2{
padding-left: 29px;
font-size: 23px;
}
&_t2 { &_GoBackbtn {
width: 80%; color: #2cabe3;
height: 42px; border: 1px solid #2cabe3;
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;
}
}
}
&_right {
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;
// }
&_tu3{
padding-left: 29px;
font-size: 23px;
} }
&_t3 { &_Submitbtn {
width: 80%; background-color: #2cabe3;
height: 42px; color: #fff;
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;
}
} }
}
}
}
&_top2 {
.span1 {
display: flex;
justify-content: start;
font-size: 14px;
color: #6a707e;
font-family: PingFang SC;
font-weight: 400;
} }
&_message { &_top {
display: flex; .span1 {
justify-content: space-between; display: flex;
margin-top: 10px; justify-content: start;
margin-bottom: 16px; font-size: 14px;
color: #6a707e;
&_left { font-family: PingFang SC;
width: 33%; font-weight: 400;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
// .iconfont {
// color: #2cabe3;
// padding-left: 29px;
// font-size: 23px;
// }
&_tu4{
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;
// }
&_tu5{
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 {
color: #787e8a;
}
}
}
&_right {
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;
// }
&_tu6{
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;
}
}
}
}
}
&_top3 {
height: 10px;
background-color: #f3fafd;
border-radius: 10px;
margin-bottom: 16px;
}
&_title {
height: 30px;
background-image: url(../assets/img/bbj.png);
background-size: 100% 100%;
color: white;
font-size: 12px;
display: flex;
align-items: center;
justify-content: start;
margin-bottom: 5px;
&_span {
padding-left: 10px;
}
}
&_centent {
background-color: #f1f5f8;
height: 66%;
overflow-y: auto;
&_totalnum {
height: 290px;
background-color: #fff;
margin: 12px;
display: flex;
flex-direction: column;
align-items: center;
&_left {
flex: 1;
width: 100%;
height: 70%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
&_radios {
width: 3%;
height: 30%;
display: flex;
justify-content: center;
align-items: center;
} }
&_text { &_message {
width: 97%;
height: 100%;
&_msg1 {
height: 25%;
box-sizing: content-box;
border: 10px solid rgba(44, 171, 227, 0.08);
border-bottom: 5px solid rgba(44, 171, 227, 0.08);
border-top: 5px solid rgba(44, 171, 227, 0.08);
margin-bottom: 5px;
margin-top: 5px;
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
justify-content: center;
align-items: center;
&_text1 { &_left {
width: 100%; width: 33%;
height: 50%; height: 51px;
display: flex; display: flex;
justify-content: space-between; 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;
}
}
}
span { &_centert {
height: 100%; width: 33%;
width: 50%; height: 51px;
margin: 5px 5px;
display: flex; display: flex;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
font-size: 14px; background-color: #f3fafd;
padding-left: 10px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 300;
color: #6a707e;
}
}
&_text2 { // .iconfont {
width: 100%; // color: #2cabe3;
height: 48%; // padding-left: 29px;
display: flex; // font-size: 23px;
justify-content: space-between; // }
&_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 {
color: #787e8a;
}
}
}
span { &_right {
height: 100%; width: 33%;
width: 50%; height: 51px;
margin: 0px 5px;
display: flex; display: flex;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
font-size: 14px; background-color: #f3fafd;
padding-left: 10px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 300;
color: #6a707e; // .iconfont {
} // color: #2cabe3;
// padding-left: 29px;
// font-size: 23px;
// }
&_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;
}
}
} }
} }
}
&_msg2 { &_top2 {
background-color: rgba(44, 171, 227, 0.08); .span1 {
display: flex; display: flex;
flex-direction: column; justify-content: start;
height: 65%; font-size: 14px;
justify-content: center; color: #6a707e;
padding-top: 10px; font-family: PingFang SC;
font-weight: 400;
&_text3 { }
// margin-bottom: 10px;
width: 100%; &_message {
height: 30%; display: flex;
display: flex; justify-content: space-between;
justify-content: space-between; margin-top: 10px;
margin-bottom: 16px;
span {
display: block; &_left {
height: 100%; width: 33%;
width: 50%; height: 51px;
margin: 0px 10px;
background-color: #fff;
display: flex; display: flex;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
font-size: 14px; background-color: #f3fafd;
padding-left: 10px;
font-family: PingFang SC; // .iconfont {
font-weight: 300; // color: #2cabe3;
color: #6a707e; // padding-left: 29px;
} // font-size: 23px;
// }
&_tu4 {
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;
}
}
} }
&_text4 { &_centert {
margin-bottom: 10px; width: 33%;
width: 100%; height: 51px;
height: 30%;
margin-top: 10px;
display: flex;
justify-content: space-between;
span {
height: 100%;
width: 50%;
margin: 0px 10px;
background-color: #fff;
display: flex; display: flex;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
font-size: 14px; background-color: #f3fafd;
padding-left: 10px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 300;
color: #6a707e; // .iconfont {
} // color: #2cabe3;
// padding-left: 29px;
// font-size: 23px;
// }
&_tu5 {
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 {
color: #787e8a;
}
}
} }
&_text5 { &_right {
margin-bottom: 10px; width: 33%;
width: 100%; height: 51px;
height: 30%;
display: flex;
justify-content: space-between;
span {
height: 100%;
width: 50%;
margin: 0px 10px;
background-color: #fff;
display: flex; display: flex;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
font-size: 14px; background-color: #f3fafd;
padding-left: 10px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 300;
color: #6a707e;
}
}
}
}
}
&_right { // .iconfont {
width: 100%; // color: #2cabe3;
height: 30%; // padding-left: 29px;
display: flex; // font-size: 23px;
justify-content: space-around; // }
&_tu6 {
&_text1 { padding-left: 29px;
width: 19%; font-size: 23px;
display: flex; }
justify-content: center;
align-items: center; &_t3 {
margin-left: 3%; width: 80%;
height: 42px;
&_span1 { display: flex;
color: #2cabe3; justify-content: start;
font-family: PingFang SC; padding-left: 10px;
font-weight: 400; align-items: center;
} background-color: #fff;
color: #abafb3;
&_echar1 { font-size: 14px;
width: 50%; margin-left: 29px;
height: 85px;
margin-left: -30px; span {
margin-top: 10px; color: #787e8a;
} }
}
}
} }
}
&_text2 { &_top3 {
width: 19%; height: 10px;
display: flex; background-color: #f3fafd;
justify-content: center; border-radius: 10px;
align-items: center; margin-bottom: 16px;
}
&_span2 { &_title {
color: #71d875; height: 30px;
font-family: PingFang SC; background-image: url(../assets/img/bbj.png);
font-weight: 400; background-size: 100% 100%;
} color: white;
font-size: 12px;
display: flex;
align-items: center;
justify-content: start;
margin-bottom: 5px;
&_echar2 { &_span {
width: 50%; padding-left: 10px;
height: 85px;
margin-left: -30px;
margin-top: 10px;
}
} }
}
&_text3 { &_centent {
width: 19%; background-color: #f1f5f8;
display: flex; height: 66%;
justify-content: center; overflow-y: auto;
align-items: center;
&_span3 {
color: #f35e77;
font-family: PingFang SC;
font-weight: 400;
}
&_echar3 {
width: 50%;
height: 85px;
margin-left: -30px;
margin-top: 10px;
}
}
&_text4 { &_totalnum {
width: 19%; height: 290px;
display: flex; background-color: #fff;
justify-content: center; margin: 12px;
align-items: center; display: flex;
flex-direction: column;
align-items: center;
&_span4 { &_left {
color: #ffb321; flex: 1;
font-family: PingFang SC; width: 100%;
font-weight: 400; height: 70%;
} display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
&_radios {
width: 3%;
height: 30%;
display: flex;
justify-content: center;
align-items: center;
}
&_text {
width: 97%;
height: 100%;
&_msg1 {
height: 25%;
box-sizing: content-box;
border: 10px solid rgba(44, 171, 227, 0.08);
border-bottom: 5px solid rgba(44, 171, 227, 0.08);
border-top: 5px solid rgba(44, 171, 227, 0.08);
margin-bottom: 5px;
margin-top: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_text1 {
width: 100%;
height: 50%;
display: flex;
justify-content: space-between;
span {
height: 100%;
width: 50%;
margin: 5px 5px;
display: flex;
justify-content: start;
align-items: center;
font-size: 14px;
padding-left: 10px;
font-family: PingFang SC;
font-weight: 300;
color: #6a707e;
}
}
&_text2 {
width: 100%;
height: 48%;
display: flex;
justify-content: space-between;
span {
height: 100%;
width: 50%;
margin: 0px 5px;
display: flex;
justify-content: start;
align-items: center;
font-size: 14px;
padding-left: 10px;
font-family: PingFang SC;
font-weight: 300;
color: #6a707e;
}
}
}
&_msg2 {
background-color: rgba(44, 171, 227, 0.08);
display: flex;
flex-direction: column;
height: 65%;
justify-content: center;
padding-top: 10px;
&_text3 {
// margin-bottom: 10px;
width: 100%;
height: 30%;
display: flex;
justify-content: space-between;
span {
display: block;
height: 100%;
width: 50%;
margin: 0px 10px;
background-color: #fff;
display: flex;
justify-content: start;
align-items: center;
font-size: 14px;
padding-left: 10px;
font-family: PingFang SC;
font-weight: 300;
color: #6a707e;
}
}
&_text4 {
margin-bottom: 10px;
width: 100%;
height: 30%;
margin-top: 10px;
display: flex;
justify-content: space-between;
span {
height: 100%;
width: 50%;
margin: 0px 10px;
background-color: #fff;
display: flex;
justify-content: start;
align-items: center;
font-size: 14px;
padding-left: 10px;
font-family: PingFang SC;
font-weight: 300;
color: #6a707e;
}
}
&_text5 {
margin-bottom: 10px;
width: 100%;
height: 30%;
display: flex;
justify-content: space-between;
span {
height: 100%;
width: 50%;
margin: 0px 10px;
background-color: #fff;
display: flex;
justify-content: start;
align-items: center;
font-size: 14px;
padding-left: 10px;
font-family: PingFang SC;
font-weight: 300;
color: #6a707e;
}
}
}
}
}
&_echar4 { &_right {
width: 50%; width: 100%;
height: 85px; height: 30%;
margin-left: -30px; display: flex;
margin-top: 10px; justify-content: space-around;
}
&_text1 {
width: 19%;
display: flex;
justify-content: center;
align-items: center;
margin-left: 3%;
&_span1 {
color: #2cabe3;
font-family: PingFang SC;
font-weight: 400;
}
&_echar1 {
width: 50%;
height: 85px;
margin-left: -30px;
margin-top: 10px;
}
}
&_text2 {
width: 19%;
display: flex;
justify-content: center;
align-items: center;
&_span2 {
color: #71d875;
font-family: PingFang SC;
font-weight: 400;
}
&_echar2 {
width: 50%;
height: 85px;
margin-left: -30px;
margin-top: 10px;
}
}
&_text3 {
width: 19%;
display: flex;
justify-content: center;
align-items: center;
&_span3 {
color: #f35e77;
font-family: PingFang SC;
font-weight: 400;
}
&_echar3 {
width: 50%;
height: 85px;
margin-left: -30px;
margin-top: 10px;
}
}
&_text4 {
width: 19%;
display: flex;
justify-content: center;
align-items: center;
&_span4 {
color: #ffb321;
font-family: PingFang SC;
font-weight: 400;
}
&_echar4 {
width: 50%;
height: 85px;
margin-left: -30px;
margin-top: 10px;
}
}
&_text5 {
width: 19%;
display: flex;
justify-content: center;
align-items: center;
&_span5 {
color: #c05ef3;
font-family: PingFang SC;
font-weight: 400;
}
&_echar5 {
width: 50%;
height: 85px;
margin-left: -30px;
margin-top: 10px;
}
}
}
} }
&_text5 { // 没有数据
width: 19%; &_nodata {
display: flex; width: 100%;
justify-content: center; height: 100%;
align-items: center; display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
&_span5 { &_img {
color: #c05ef3; img {
font-family: PingFang SC; width: 115px;
font-weight: 400; height: 102px;
} }
}
&_echar5 { &_text {
width: 50%; font-size: 18px;
height: 85px; font-family: PingFang SC;
margin-left: -30px; font-weight: 400;
margin-top: 10px; color: #abafb3;
} }
} }
}
} }
// 没有数据 &_pagination {
&_nodata { display: flex;
width: 100%; justify-content: flex-end;
height: 100%; margin-top: 1%;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
&_img {
img {
width: 115px;
height: 102px;
}
}
&_text {
font-size: 18px;
font-family: PingFang SC;
font-weight: 400;
color: #abafb3;
}
} }
}
&_pagination {
display: flex;
justify-content: flex-end;
margin-top: 1%;
}
} }
</style> </style>
src/views/outpatientDetails.vue
...@@ -6,829 +6,775 @@ ...@@ -6,829 +6,775 @@
* @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"> <img src="../assets/img/peo.png" alt="" /></span>
<div class="outpatientDetails_top_message_left_t1"> <div class="outpatientDetails_top_message_left_t1">
住院号:<span>{{ HistoryInfo.id }}</span> 住院号:<span>{{ HistoryInfo.id }}</span>
</div> </div>
</div> </div>
<div class="outpatientDetails_top_message_centert"> <div class="outpatientDetails_top_message_centert">
<span class="outpatientDetails_top_message_centert_tu2"><img src="../assets/img/ka.png" alt=""></span> <span class="outpatientDetails_top_message_centert_tu2"><img src="../assets/img/ka.png" alt="" /></span>
<div class="outpatientDetails_top_message_centert_t2"> <div class="outpatientDetails_top_message_centert_t2">
住院次数:<span>{{ HistoryInfo.a49 }}</span> 住院次数:<span>{{ HistoryInfo.a49 }}</span>
</div> </div>
</div> </div>
<div class="outpatientDetails_top_message_right"> <div class="outpatientDetails_top_message_right">
<span class="outpatientDetails_top_message_right_tu3"><img src="../assets/img/qian.png" alt=""></span> <span class="outpatientDetails_top_message_right_tu3"><img src="../assets/img/qian.png" alt="" /></span>
<div class="outpatientDetails_top_message_right_t3"> <div class="outpatientDetails_top_message_right_t3">
医疗付费方式:<span>{{ HistoryInfo.paymentType }}</span> 医疗付费方式:<span>{{ HistoryInfo.paymentType }}</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"><img src="../assets/img/zu.png" alt="" /></span>
<span>分组:{{ HistoryInfo.doctorName }}</span> <span>分组:{{ HistoryInfo.doctorName }}</span>
<span>权重:{{ decimal(HistoryInfo.rw) }}</span> <span>权重:{{ decimal(HistoryInfo.rw) }}</span>
<span>实际医保费用:{{ decimal(HistoryInfo.actualfee) }}</span> <span>实际医保费用:{{ decimal(HistoryInfo.actualfee) }}</span>
<span>总费用:{{ decimal(HistoryInfo.totalFee) }}</span> <span>总费用:{{ decimal(HistoryInfo.totalFee) }}</span>
<span>盈亏:{{ decimal(HistoryInfo.profitLoss) }}</span> <span>盈亏:{{ decimal(HistoryInfo.profitLoss) }}</span>
<span>院内历年平均费用:{{ decimal(HistoryInfo.avgFee) }}</span> <span>院内历年平均费用:{{ decimal(HistoryInfo.avgFee) }}</span>
<span>院内历年平均住院天数:{{ decimal(HistoryInfo.days) }}</span> <span>院内历年平均住院天数:{{ decimal(HistoryInfo.days) }}</span>
</div> </div>
<div class="outpatientDetails_title"> <div class="outpatientDetails_title">
<span>费用分类</span> <span>费用分类</span>
</div> </div>
<div class="outpatientDetails_bottom"> <div class="outpatientDetails_bottom">
<!-- 有数据 --> <!-- 有数据 -->
<div class="outpatientDetails_bottom_leftShowBox" v-if="goods.length !== 0"> <div class="outpatientDetails_bottom_leftShowBox" v-if="goods.length !== 0">
<div class="outpatientDetails_bottom_leftShowBox_left"> <div class="outpatientDetails_bottom_leftShowBox_left">
<ul class="outpatientDetails_bottom_leftShowBox_left_ul"> <ul class="outpatientDetails_bottom_leftShowBox_left_ul">
<li v-for="(item, index) in goods" :key="index"> <li v-for="(item, index) in goods" :key="index">
<div <div
@click=" @click="
toggle(index, item); toggle(index, item);
scrollToFoods(index); scrollToFoods(index);
" "
:class="{ active: index == checkindex }" :class="{ active: index == checkindex }"
> >
<span :class="{ fc2: index == checkindex }" class="sp1"> <span :class="{ fc2: index == checkindex }" class="sp1">
<span v-show="index == checkindex" style="color: #fff" class="iconfont icon-jiantou1"></span> <span v-show="index == checkindex" style="color: #fff" class="iconfont icon-jiantou1"></span>
{{ item.iteM_TYPE }}:{{ decimal(item.totalFee) }}</span {{ item.iteM_TYPE }}:{{ decimal(item.totalFee) }}</span
> >
<span :class="{ fc3: index == checkindex }" class="sp2"> <span :class="{ fc3: index == checkindex }" class="sp2">
<span class="sp2_avg"> <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 class="outpatientDetails_bottom_leftShowBox_right" v-if="tableData.length !== 0">
<el-table <el-table
:data="tableData" :data="tableData"
border border
size="medium" size="medium"
style="width: 100%" style="width: 100%"
:default-sort="{ prop: 'date', order: 'descending' }" :default-sort="{ prop: 'date', order: 'descending' }"
:row-class-name="tableRowClassName" :row-class-name="tableRowClassName"
height="575" height="575"
> >
<el-table-column <el-table-column label="开单日期" prop="iteM_CODE"></el-table-column>
label="开单日期" <el-table-column label="项目编码" prop="chargeTime"></el-table-column>
prop="iteM_CODE" <el-table-column label="项目名称" prop="iteM_NAME"></el-table-column>
></el-table-column> <el-table-column label="单价" prop="unitprice">
<el-table-column <template slot-scope="scope">
label="项目编码" {{ decimal(scope.row.fee) }}
prop="chargeTime" </template>
></el-table-column> </el-table-column>
<el-table-column <el-table-column label="数量" prop="quantity"></el-table-column>
label="项目名称" <el-table-column label="总金额" prop="fee">
prop="iteM_NAME" <template slot-scope="scope">
></el-table-column> {{ decimal(scope.row.unitprice) }}
<el-table-column label="单价" prop="unitprice"> </template>
<template slot-scope="scope"> </el-table-column>
{{ decimal(scope.row.fee) }} </el-table>
</template> </div>
</el-table-column> <!-- 中间表格无数据 -->
<el-table-column label="数量" prop="quantity"></el-table-column> <div class="outpatientDetails_bottom_leftShowBox_right" v-else>
<el-table-column label="总金额" prop="fee"> <div class="outpatientDetails_bottom_leftShowBox_right_box">
<template slot-scope="scope" > <img class="outpatientDetails_bottom_leftShowBox_right_box_img" src="../assets/img/nodata.png" alt="" />
{{ decimal(scope.row.unitprice) }} <div class="outpatientDetails_bottom_leftShowBox_right_box_text">暂无数据</div>
</template> </div>
</el-table-column> </div>
</el-table> </div>
</div>
<!-- 中间表格无数据 -->
<div class="outpatientDetails_bottom_leftShowBox_right" v-else>
<div class="outpatientDetails_bottom_leftShowBox_right_box">
<img class="outpatientDetails_bottom_leftShowBox_right_box_img" src="../assets/img/nodata.png" alt="" />
<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 class="outpatientDetails_bottom_leftShowBox_box_img" src="../assets/img/nodata.png" alt="" />
<div class="outpatientDetails_bottom_leftShowBox_box_text">暂无数据</div> <div class="outpatientDetails_bottom_leftShowBox_box_text">暂无数据</div>
</div> </div>
</div> </div>
<!-- 右侧有数据 --> <!-- 右侧有数据 -->
<div class="outpatientDetails_bottom_rght2"> <div class="outpatientDetails_bottom_rght2">
<div class="outpatientDetails_bottom_rght2_top"> <div class="outpatientDetails_bottom_rght2_top">
<div class="outpatientDetails_bottom_rght2_top_title">异常问题</div> <div class="outpatientDetails_bottom_rght2_top_title">异常问题</div>
<div class="outpatientDetails_bottom_rght2_top_mes"> <div class="outpatientDetails_bottom_rght2_top_mes">
<span class="outpatientDetails_bottom_rght2_top_mes_span1" v-for="(item, ind) in typeCountDatas" :key="ind"
<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 >{{ 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_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" v-for="(item, ind) in options" :key="ind">
<span v-show="item.projectRuleLevel == '禁止'" class="outpatientDetails_bottom_rght2_bottom_li_title" style="background: red">{{
<span v-show="item.projectRuleLevel == '禁止'" class="outpatientDetails_bottom_rght2_bottom_li_title" style="background: red">{{ item.projectRuleLevel
item.projectRuleLevel }}</span>
}}</span> <span v-show="item.projectRuleLevel == '提示'" class="outpatientDetails_bottom_rght2_bottom_li_title" style="background: #2aaae2">{{
<span v-show="item.projectRuleLevel == '提示'" class="outpatientDetails_bottom_rght2_bottom_li_title" style="background: #2aaae2">{{ item.projectRuleLevel
item.projectRuleLevel }}</span>
}}</span> <span v-show="item.projectRuleLevel == '警告'" class="outpatientDetails_bottom_rght2_bottom_li_title" style="background: #e9c621">{{
<span v-show="item.projectRuleLevel == '警告'" class="outpatientDetails_bottom_rght2_bottom_li_title" style="background: #e9c621">{{ item.projectRuleLevel
item.projectRuleLevel }}</span>
}}</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">{{ item.notes }}</span>
</el-tooltip> </el-tooltip>
</div>
</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 { reactive, toRefs, onMounted, nextTick, computed } from "@vue/composition-api";
import { decimal } from '../utils/decimal'; 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() { data() {
return {
//表格颜色 HistoryInfo: {
const tableRowClassName = ({ row}) => { name: "",
if (row.rowIndex % 2 == 0) { healthyID: "",
return 'isverifyStyle'; paymentType: "",
} else { doctorName: "",
return ''; rw: "",
} totalFee: "",
}; avgFee: "",
days: "",
//异常问题接口 profitLoss: "",
const GetProjectRulesData = () => { },
checkindex: 0, // 初始化第一个栏块高亮
goods: [], //左侧费用类型
http tableListHead: [
.post(`/medical/get/GetPRHisData?&code=${route.value.query.id}`, {}) { cloumn: "开单日期", name: "chargeTime" },
.then((data) => { {
state.options = data.projectRules; cloumn: "项目编码",
state.typeCountDatas = data.typeCountDatas; name: "iteM_CODE",
if (data.typeCountDatas == null) { },
state.showCountDatas = false; {
} cloumn: "项目名称",
if (data.projectRules == null) { name: "iteM_NAME",
state.showbottom = false; },
} {
cloumn: "单价",
}) name: "unitprice",
.catch((error) => { },
{
}); cloumn: "数量",
}; name: "quantity",
//医嘱质控 },
const getControl = () => { {
cloumn: "总金额",
http name: "fee",
.post(`/global/post/SetCaseProjectRuleHis?id=${route.value.query.id}`) },
.then((data) => { ],
tableData: [],
Message.success(data.message); options: [], //异常问题数据
}) medInsNum: 0, //医保数
.catch((error) => { notdrugsNum: 0, //非药品
drugsNum: 0, //药品
}); diseaseNum: 0, //疾病
}; dipid: "",
//获取患者信息数据 typeCountDatas: [], //异常数据
const getHistoryInfo = () => { showCountDatas: true, //异常问题类型是否显示
showbottom: true, //异常问题详情是否显示
};
http },
.post(`/medical/Get/getHisInfo?&code=${route.value.query.id}`, {}) mounted() {
.then((data) => { this.GetProjectRulesData();
state.HistoryInfo = data; this.getHistoryInfo();
state.dipid = data.id; },
state.goods = data.inpat_FeeDatas; methods: {
decimal,
if (state.goods.length > 0) { //表格颜色
// debugger tableRowClassName({ row }) {
toggle(0, state.goods[0]); if (row.rowIndex % 2 == 0) {
} return "isverifyStyle";
} else {
return "";
}) }
.catch((error) => { },
//异常问题接口
}); GetProjectRulesData() {
}; http.post(`/medical/get/GetPRHisData?&code=${this.$route.query.id}`, {})
.then((data) => {
//费用分类接口 this.options = data.projectRules;
const getInpatFeesByREGCODE = (item) => { this.typeCountDatas = data.typeCountDatas;
if (data.typeCountDatas == null) {
this.showCountDatas = false;
http }
.post(`/medical/Get/getIFHisByREGCODE?&code=${route.value.query.id}&ItemType=${item.iteM_TYPE}`, {}) if (data.projectRules == null) {
.then((data) => { this.showbottom = false;
state.tableData = data; }
})
}) .catch((error) => {});
.catch((error) => { },
//医嘱质控
}); getControl() {
}; http.post(`/global/post/SetCaseProjectRuleHis?id=${this.$route.query.id}`)
const toggle = (index, item) => { .then((data) => {
state.checkindex = index; Message.success(data.message);
getInpatFeesByREGCODE(item); })
}; .catch((error) => {});
const scrollToFoods = (index) => { },
// state.checkindex = index; //获取患者信息数据
}; getHistoryInfo() {
let state = reactive({ http.post(`/medical/Get/getHisInfo?&code=${this.$route.query.id}`, {})
HistoryInfo: { .then((data) => {
name: '', this.HistoryInfo = data;
healthyID: '', this.dipid = data.id;
paymentType: '', this.goods = data.inpat_FeeDatas || [];
doctorName: '', if (this.goods.length > 0) {
rw: '', this.toggle(0, this.goods[0]);
totalFee: '', }
avgFee: '', })
days: '', .catch((error) => {});
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, //异常问题详情是否显示
});
//表格自适应高度
const route = useRoute();
onMounted(() => {
GetProjectRulesData();
getHistoryInfo();
});
return { //费用分类接口
...toRefs(state), getInpatFeesByREGCODE(item) {
tableRowClassName, http.post(`/medical/Get/getIFHisByREGCODE?&code=${this.$route.query.id}&ItemType=${item.iteM_TYPE}`, {})
toggle, .then((data) => {
scrollToFoods, this.tableData = data;
getHistoryInfo, })
getInpatFeesByREGCODE, .catch((error) => {});
decimal, },
// tableCot, toggle(index, item) {
GetProjectRulesData, this.checkindex = index;
getControl, this.getInpatFeesByREGCODE(item);
}; },
}, scrollToFoods(index) {
//this.checkindex = index;
},
},
}; };
</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 { &_message {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 16px; margin-top: 16px;
&_left { &_left {
width: 33%; 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 { // .iconfont {
// color: #2cabe3; // color: #2cabe3;
// padding-left: 29px; // padding-left: 29px;
// font-size: 23px; // font-size: 23px;
// } // }
&_tu1{ &_tu1 {
padding-left: 29px; padding-left: 29px;
font-size: 23px; font-size: 23px;
} }
&_t1 { &_t1 {
width: 80%; width: 80%;
height: 42px; height: 42px;
display: flex; display: flex;
justify-content: start; justify-content: start;
padding-left: 10px; padding-left: 10px;
align-items: center; align-items: center;
background-color: #fff; background-color: #fff;
color: #abafb3; color: #abafb3;
font-size: 14px; font-size: 14px;
margin-left: 29px; margin-left: 29px;
span { span {
color: #787e8a; color: #787e8a;
} }
} }
} }
&_centert { &_centert {
width: 33%; 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;
font-family: PingFang SC; font-family: PingFang SC;
// .iconfont { // .iconfont {
// color: #2cabe3; // color: #2cabe3;
// padding-left: 29px; // padding-left: 29px;
// font-size: 23px; // font-size: 23px;
// } // }
&_tu2{ &_tu2 {
padding-left: 29px; padding-left: 29px;
font-size: 23px; font-size: 23px;
} }
&_t2 { &_t2 {
width: 80%; width: 80%;
height: 42px; height: 42px;
display: flex; display: flex;
justify-content: start; justify-content: start;
padding-left: 10px; padding-left: 10px;
align-items: center; align-items: center;
background-color: #fff; background-color: #fff;
color: #abafb3; color: #abafb3;
font-size: 14px; font-size: 14px;
margin-left: 29px; margin-left: 29px;
span { span {
color: #787e8a; color: #787e8a;
} }
} }
} }
&_right { &_right {
width: 33%; 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;
font-family: PingFang SC; font-family: PingFang SC;
// .iconfont { // .iconfont {
// color: #2cabe3; // color: #2cabe3;
// padding-left: 29px; // padding-left: 29px;
// font-size: 23px; // font-size: 23px;
// } // }
&_tu3{ &_tu3 {
padding-left: 29px; padding-left: 29px;
font-size: 23px; font-size: 23px;
} }
&_t3 { &_t3 {
width: 80%; width: 80%;
height: 42px; height: 42px;
display: flex; display: flex;
justify-content: start; justify-content: start;
padding-left: 10px; padding-left: 10px;
align-items: center; align-items: center;
background-color: #fff; background-color: #fff;
color: #abafb3; color: #abafb3;
font-size: 14px; font-size: 14px;
margin-left: 29px; margin-left: 29px;
span { span {
color: #787e8a; color: #787e8a;
} }
} }
} }
} }
} }
&_msg { &_msg {
height: 51px; height: 51px;
background-color: #f3fafd; background-color: #f3fafd;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 25px; margin-bottom: 25px;
// .iconfont { // .iconfont {
// color: #2cabe3; // color: #2cabe3;
// padding-left: 28px; // padding-left: 28px;
// font-size: 23px; // font-size: 23px;
// } // }
&_tu4{ &_tu4 {
padding-left: 29px; padding-left: 29px;
font-size: 23px; font-size: 23px;
} }
span:nth-child(2) { span:nth-child(2) {
margin-left: 21px; margin-left: 21px;
} }
span:nth-child(n + 2) { span:nth-child(n + 2) {
width: 258px; width: 258px;
height: 39px; height: 39px;
background-color: #fff; background-color: #fff;
font-size: 14px; font-size: 14px;
color: #6d7381; color: #6d7381;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-family: PingFang SC; font-family: PingFang SC;
margin-right: 5px; margin-right: 5px;
} }
span:nth-child(n + 7) { span:nth-child(n + 7) {
margin-right: 5px; margin-right: 5px;
} }
} }
&_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: 37%;
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: 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%;
.iconfont { .iconfont {
font-size: 20px; font-size: 20px;
} }
} }
.fc3 { .fc3 {
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%;
} }
} }
} }
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: flex-end;
} }
} }
} }
} }
} }
&_right { &_right {
width: 62%; width: 62%;
// 无数据样式 // 无数据样式
&_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: #ffffff; color: #ffffff;
} }
&_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: #ffffff; color: #ffffff;
} }
&_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>
src/views/outseeQualityControl.vue
...@@ -6,876 +6,793 @@ ...@@ -6,876 +6,793 @@
* @Description: * @Description:
--> -->
<template> <template>
<!-- 查看质控 --> <!-- 查看质控 -->
<div class="outseeQualityControl"> <div class="outseeQualityControl">
<div class="outseeQualityControl_box"> <div class="outseeQualityControl_box">
<!-- <div class="outseeQualityControl_box_btn"> <!-- <div class="outseeQualityControl_box_btn">
<el-button size="mini" type="primary" @click="getSynchronous">同步数据</el-button> <el-button size="mini" type="primary" @click="getSynchronous">同步数据</el-button>
</div> --> </div> -->
<div class="outseeQualityControl_box_header"> <div class="outseeQualityControl_box_header">
<div class="outseeQualityControl_box_header_text"></div> <div class="outseeQualityControl_box_header_text"></div>
</div>
<div class="outseeQualityControl_box_Content">
<div class="outseeQualityControl_box_Content_left">
<medical-record-homepage
:medicalrecord="medicalrecord"
:clicktitle="clicktitle"
>
</medical-record-homepage>
</div>
<div class="outseeQualityControl_box_Content_right">
<div class="outseeQualityControl_box_Content_right_top">
<!--非编码问题 -->
<div
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_left'
: 'outseeQualityControl_box_Content_right_top_left11',
]"
@click="leftcode"
>
<div class="outseeQualityControl_box_Content_right_top_left_div1">
<img
src="../assets/img/fbm.png"
alt=""
v-show="isleftcodeShow"
/>
<img
src="../assets/img/bm.png"
alt=""
v-show="!isleftcodeShow"
/>
</div>
<div class="outseeQualityControl_box_Content_right_top_left_div2">
<span
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_left_div2_span1'
: 'outseeQualityControl_box_Content_right_top_left_div2_span11',
]"
>{{ fruleCount }}</span
>
<span
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_left_div2_span2'
: 'outseeQualityControl_box_Content_right_top_left_div2_span22',
]"
>非编码问题</span
>
</div>
</div>
<!-- 编码问题 -->
<div
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_right'
: 'outseeQualityControl_box_Content_right_top_right11',
]"
@click="rightcode"
>
<div
class="outseeQualityControl_box_Content_right_top_right_div1"
>
<img
src="../assets/img/fbm.png"
alt=""
v-show="!isleftcodeShow"
/>
<img
src="../assets/img/bm.png"
alt=""
v-show="isleftcodeShow"
/>
</div>
<div
class="outseeQualityControl_box_Content_right_top_right_div2"
>
<span
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_right_div2_span1'
: 'outseeQualityControl_box_Content_right_top_right_div2_span11',
]"
>{{ ruleCount }}</span
>
<span
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_right_div2_span2'
: 'outseeQualityControl_box_Content_right_top_right_div2_span22',
]"
>编码问题</span
>
</div>
</div>
</div>
<div class="outseeQualityControl_box_Content_right_center">
<div
class="outseeQualityControl_box_Content_right_center_line"
v-show="isleftcodeShow"
></div>
<div
class="outseeQualityControl_box_Content_right_center_line2"
v-show="!isleftcodeShow"
></div>
</div>
<div class="outseeQualityControl_box_Content_right_bottom">
<!-- <div class="outseeQualityControl_box_Content_right_bottom_title">患者基本信息</div> -->
<div
class="outseeQualityControl_box_Content_right_bottom_tree"
v-show="isleftcodeShow"
>
<el-tree
:data="departmentTree"
:props="defaultProps"
:default-expand-all="false"
ref="tree"
node-key="id"
@node-click="handleNodeClick"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<div
class="leftbox"
:class="[data.ruleName != '非编码问题' ? 'leftboxs' : '']"
>
<el-tooltip placement="bottom" trigger="hover">
<template #content>{{ data.ruleName }} </template>
<span
:class="[
data.ruleName == '非编码问题' ? 'spans' : '',
]"
>{{ data.ruleName }}</span
>
</el-tooltip>
</div>
</span>
</template>
</el-tree>
</div> </div>
<div <div class="outseeQualityControl_box_Content">
class="outseeQualityControl_box_Content_right_bottom_tree" <div class="outseeQualityControl_box_Content_left">
v-show="!isleftcodeShow" <medical-record-homepage :medicalrecord="medicalrecord" :clicktitle="clicktitle"> </medical-record-homepage>
> </div>
<el-tree
:data="rightdepartmentTree" <div class="outseeQualityControl_box_Content_right">
:props="defaultProps" <div class="outseeQualityControl_box_Content_right_top">
:default-expand-all="false" <!--非编码问题 -->
ref="tree" <div
node-key="id" :class="[isleftcodeShow ? 'outseeQualityControl_box_Content_right_top_left' : 'outseeQualityControl_box_Content_right_top_left11']"
@node-click="handleNodeClick" @click="leftcode"
v-show="!isnodataShow"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<div
class="leftbox"
:class="[data.ruleName != '编码问题' ? 'leftboxs' : '']"
>
<el-tooltip placement="bottom" trigger="hover">
<template #content>{{ data.ruleName }} </template>
<span
:class="[data.ruleName == '编码问题' ? 'spans' : '']"
>{{ data.ruleName }}</span
> >
</el-tooltip> <div class="outseeQualityControl_box_Content_right_top_left_div1">
<img src="../assets/img/fbm.png" alt="" v-show="isleftcodeShow" />
<img src="../assets/img/bm.png" alt="" v-show="!isleftcodeShow" />
</div>
<div class="outseeQualityControl_box_Content_right_top_left_div2">
<span
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_left_div2_span1'
: 'outseeQualityControl_box_Content_right_top_left_div2_span11',
]"
>{{ fruleCount }}</span
>
<span
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_left_div2_span2'
: 'outseeQualityControl_box_Content_right_top_left_div2_span22',
]"
>非编码问题</span
>
</div>
</div>
<!-- 编码问题 -->
<div
:class="[
isleftcodeShow ? 'outseeQualityControl_box_Content_right_top_right' : 'outseeQualityControl_box_Content_right_top_right11',
]"
@click="rightcode"
>
<div class="outseeQualityControl_box_Content_right_top_right_div1">
<img src="../assets/img/fbm.png" alt="" v-show="!isleftcodeShow" />
<img src="../assets/img/bm.png" alt="" v-show="isleftcodeShow" />
</div>
<div class="outseeQualityControl_box_Content_right_top_right_div2">
<span
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_right_div2_span1'
: 'outseeQualityControl_box_Content_right_top_right_div2_span11',
]"
>{{ ruleCount }}</span
>
<span
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_right_div2_span2'
: 'outseeQualityControl_box_Content_right_top_right_div2_span22',
]"
>编码问题</span
>
</div>
</div>
</div>
<div class="outseeQualityControl_box_Content_right_center">
<div class="outseeQualityControl_box_Content_right_center_line" v-show="isleftcodeShow"></div>
<div class="outseeQualityControl_box_Content_right_center_line2" v-show="!isleftcodeShow"></div>
</div>
<div class="outseeQualityControl_box_Content_right_bottom">
<!-- <div class="outseeQualityControl_box_Content_right_bottom_title">患者基本信息</div> -->
<div class="outseeQualityControl_box_Content_right_bottom_tree" v-show="isleftcodeShow">
<el-tree
:data="departmentTree"
:props="defaultProps"
:default-expand-all="false"
ref="tree"
node-key="id"
@node-click="handleNodeClick"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<div class="leftbox" :class="[data.ruleName != '非编码问题' ? 'leftboxs' : '']">
<el-tooltip placement="bottom" trigger="hover">
<template #content>{{ data.ruleName }} </template>
<span :class="[data.ruleName == '非编码问题' ? 'spans' : '']">{{ data.ruleName }}</span>
</el-tooltip>
</div>
</span>
</template>
</el-tree>
</div>
<div class="outseeQualityControl_box_Content_right_bottom_tree" v-show="!isleftcodeShow">
<el-tree
:data="rightdepartmentTree"
:props="defaultProps"
:default-expand-all="false"
ref="tree"
node-key="id"
@node-click="handleNodeClick"
v-show="!isnodataShow"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<div class="leftbox" :class="[data.ruleName != '编码问题' ? 'leftboxs' : '']">
<el-tooltip placement="bottom" trigger="hover">
<template #content>{{ data.ruleName }} </template>
<span :class="[data.ruleName == '编码问题' ? 'spans' : '']">{{ data.ruleName }}</span>
</el-tooltip>
</div>
</span>
</template>
</el-tree>
<div class="outseeQualityControl_box_Content_right_bottom_tree_nodata" v-show="isnodataShow">
<img class="outseeQualityControl_box_Content_right_bottom_tree_nodata_img" src="../assets/img/mininodata.png" alt="" />
<div class="outseeQualityControl_box_Content_right_bottom_tree_nodata_text">暂无数据</div>
</div>
</div>
</div> </div>
</span>
</template>
</el-tree>
<div
class="
outseeQualityControl_box_Content_right_bottom_tree_nodata
"
v-show="isnodataShow"
>
<img
class="
outseeQualityControl_box_Content_right_bottom_tree_nodata_img
"
src="../assets/img/mininodata.png"
alt=""
/>
<div
class="
outseeQualityControl_box_Content_right_bottom_tree_nodata_text
"
>
暂无数据
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import http from "../utils/http"; import http from "../utils/http";
import { import { reactive, toRefs, onMounted, nextTick, computed } from "@vue/composition-api";
reactive,
toRefs,
onMounted,
nextTick,
computed,
} from "@vue/composition-api";
import medicalRecordHomepage from "../components/medicalRecordHomepage/index.vue"; import medicalRecordHomepage from "../components/medicalRecordHomepage/index.vue";
import { useRoute, useRouter } from "../utils/useVueRouter"; import { useRoute, useRouter } from "../utils/useVueRouter";
import $ from "jquery"; import $ from "jquery";
import { setItem, getItem } from "../utils/auth"; import { setItem, getItem } from "../utils/auth";
import { Message } from "element-ui"; import { Message } from "element-ui";
export default { export default {
components: { components: {
medicalRecordHomepage, medicalRecordHomepage,
}, },
name: "outseeQualityControl", name: "outseeQualityControl",
setup() { setup() {
let state = reactive({ let state = reactive({
medicalrecord: null, medicalrecord: null,
ScoringDetails: null, ScoringDetails: null,
caseHistoryScoreData: null, caseHistoryScoreData: null,
departmentTree: [], //非编码问题数据 departmentTree: [], //非编码问题数据
rightdepartmentTree: [], //编码问题数据 rightdepartmentTree: [], //编码问题数据
isleftcodeShow: true, //非编码问题数据是否显示 isleftcodeShow: true, //非编码问题数据是否显示
defaultProps: { defaultProps: {
children: "rulesLists", children: "rulesLists",
label: "ruleName", label: "ruleName",
}, },
clicktitle: "", clicktitle: "",
fruleCount: "", //非编码问题数据条数 fruleCount: "", //非编码问题数据条数
ruleCount: "", //编码问题数据条数 ruleCount: "", //编码问题数据条数
isnodataShow: false, //编码是否有数据, isnodataShow: false, //编码是否有数据,
inhtml: "", inhtml: "",
splithtml: "", // splithtml: "", //
splithtml2: "", //单位电话 splithtml2: "", //单位电话
splithtml3: "", //病房 splithtml3: "", //病房
keys: [], //获取所有的问卷key keys: [], //获取所有的问卷key
values: [], // values: [], //
});
var route = useRoute();
onMounted(() => {
console.log(route.value);
});
//同步数据
const getSynchronous = (id) => {
http
.post(`/medical/get/Synchronization?id=${route.value.query.id}`)
.then((data) => {
Message.success(data.message);
})
.catch((error) => {
Message.error(error);
}); });
}; var route = useRoute();
//获取到点击的值
const handleNodeClick = (data) => {
let arr = document.getElementsByClassName(data.columnName);
let dom = $("#medicalRecord").find("#clickColor");
if (dom.length != 0) {
dom.removeAttr("id");
}
arr[0].setAttribute("id", "clickColor");
scrollTop();
};
function scrollTop() {
if ($("#clickColor").position()) {
$(".outseeQualityControl_box_Content_left").animate(
{
scrollTop:
$("#clickColor").offset().top -
$(".outseeQualityControl_box_Content_left").offset().top +
$(".outseeQualityControl_box_Content_left").scrollTop() -
300,
},
500
);
}
}
const loadingOption1 = {
// 加载loading
fullscreen: true,
text: "正在加载...",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.5)",
};
// 获取病案首页数据
function getHomePage(id) {
http
.post(`/medical/Get/HomeHisPage?id=${id}`, {})
.then((data) => {
state.medicalrecord = data;
state.keys = Object.keys(data);
})
.catch((error) => {});
}
//获取患者基本信息树形数据
function getScoringDetails(id) {
http
.post(`/medical/get/GetCaseHisRule?id=${id}`, {})
.then((data) => {
state.departmentTree = data[0].rulesLists;
state.rightdepartmentTree = data[1].rulesLists;
state.fruleCount = data[0].ruleCount;
state.ruleCount = data[1].ruleCount;
if (state.fruleCount == 0 || state.ruleCount == 0) {
state.isnodataShow = true;
}
})
.catch((error) => {});
}
//点击非编码问题
const leftcode = () => {
state.isleftcodeShow = true;
};
//点击编码问题
const rightcode = () => {
state.isleftcodeShow = false;
};
onMounted(() => {
if (route.value.query.id) {
getHomePage(route.value.query.id);
getScoringDetails(route.value.query.id);
setItem("outpid", route.value.query.id);
}
});
return {
...toRefs(state),
handleNodeClick,
leftcode,
rightcode,
getSynchronous,
};
},
};
</script>
<style lang="scss">
// @import '../styles/mixin.scss';
// @import 'styles/media/components/outseeQualityControl.scss';
.outseeQualityControl {
height: 96%;
background-color: white;
padding: 20px;
overflow: hidden;
position: relative;
#clickColor {
background-color: #f3bf18;
}
&_box {
height: 100%;
width: 100%;
background-color: #f3fafd;
padding: 10px;
&_btn {
width: 100%;
display: flex;
justify-content: end;
margin-bottom: 10px;
}
&_header {
height: r(25, 1920);
background: url("../assets/img/dataMaintenance/title.png") no-repeat;
background-size: 100% 100%;
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
&_text {
font-size: 13px;
font-family: PingFang SC;
font-weight: 500;
color: #ffffff;
margin-left: 15px;
}
}
&_Content {
display: flex;
flex-direction: row;
height: 95%;
width: 100%;
justify-content: space-between;
align-items: center;
align-content: center;
flex-wrap: nowrap;
margin-top: 10px;
&_left {
width: 65%;
background-color: #ffffff;
height: 900px;
padding: 0 8%; onMounted(() => {
console.log(route.value);
overflow: auto; });
overflow-x: hidden;
}
&_right {
width: 34%;
height: 900px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
&_top {
background: #ffffff;
border-radius: 8px;
height: 16%;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-around;
align-items: center;
// padding: 3% 10%;
&_left {
flex: 1;
height: 45%;
border-radius: 8px;
background-image: url("../assets/img/BG.png");
background-repeat: no-repeat;
background-position: center;
display: flex;
&_div1 {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
img { //同步数据
width: 82px; const getSynchronous = (id) => {
height: 53px; http.post(`/medical/get/Synchronization?id=${route.value.query.id}`)
} .then((data) => {
Message.success(data.message);
})
.catch((error) => {
Message.error(error);
});
};
//获取到点击的值
const handleNodeClick = (data) => {
let arr = document.getElementsByClassName(data.columnName);
let dom = $("#medicalRecord").find("#clickColor");
if (dom.length != 0) {
dom.removeAttr("id");
} }
&_div2 { arr[0].setAttribute("id", "clickColor");
flex: 1;
display: flex; scrollTop();
flex-direction: column; };
justify-content: center;
align-items: center; function scrollTop() {
if ($("#clickColor").position()) {
&_span1 { $(".outseeQualityControl_box_Content_left").animate(
color: #fff; {
font-size: 26px; scrollTop:
font-weight: 700; $("#clickColor").offset().top -
} $(".outseeQualityControl_box_Content_left").offset().top +
$(".outseeQualityControl_box_Content_left").scrollTop() -
&_span2 { 300,
color: #fff; },
font-size: 16px; 500
font-weight: 500; );
}
&_span11 {
color: #2cabe3;
font-size: 26px;
font-weight: 700;
}
&_span22 {
color: #2cabe3;
font-size: 16px;
font-weight: 500;
}
} }
}
.leftblue { const loadingOption1 = {
color: #2cabe3; // 加载loading
fullscreen: true,
text: "正在加载...",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.5)",
};
// 获取病案首页数据
function getHomePage(id) {
http.post(`/medical/Get/HomeHisPage?id=${id}`, {})
.then((data) => {
state.medicalrecord = data;
state.keys = Object.keys(data);
})
.catch((error) => {});
}
//获取患者基本信息树形数据
function getScoringDetails(id) {
http.post(`/medical/get/GetCaseHisRule?id=${id}`, {})
.then((data) => {
state.departmentTree = data[0].rulesLists;
state.rightdepartmentTree = data[1].rulesLists;
state.fruleCount = data[0].ruleCount;
state.ruleCount = data[1].ruleCount;
if (state.fruleCount == 0 || state.ruleCount == 0) {
state.isnodataShow = true;
}
})
.catch((error) => {});
}
//点击非编码问题
const leftcode = () => {
state.isleftcodeShow = true;
};
//点击编码问题
const rightcode = () => {
state.isleftcodeShow = false;
};
onMounted(() => {
if (route.value.query.id) {
getHomePage(route.value.query.id);
getScoringDetails(route.value.query.id);
setItem("outpid", route.value.query.id);
} }
} });
&_left11 {
flex: 1;
height: 45%;
border-radius: 8px;
background-color: #fff;
background-repeat: no-repeat;
background-position: center;
display: flex;
&_div1 {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
img { return {
width: 82px; ...toRefs(state),
height: 63px; handleNodeClick,
} leftcode,
} rightcode,
getSynchronous,
};
},
};
</script>
&_div2 { <style lang="scss">
flex: 1; // @import '../styles/mixin.scss';
display: flex; // @import 'styles/media/components/outseeQualityControl.scss';
flex-direction: column;
justify-content: center;
align-items: center;
&_span1 {
color: #fff;
font-size: 26px;
font-weight: 700;
}
&_span2 {
color: #fff;
font-size: 16px;
font-weight: 500;
}
&_span11 { .outseeQualityControl {
color: #2cabe3; height: 96%;
font-size: 26px; background-color: white;
font-weight: 700; padding: 20px;
} overflow: hidden;
position: relative;
#clickColor {
background-color: #f3bf18;
}
&_span22 { &_box {
color: #2cabe3; height: 100%;
font-size: 16px; width: 100%;
font-weight: 500; background-color: #f3fafd;
}
}
.leftblue { padding: 10px;
color: #2cabe3;
}
}
&_right { &_btn {
height: 45%; width: 100%;
flex: 1;
border-radius: 8px;
display: flex; display: flex;
justify-content: end;
margin-bottom: 10px;
}
&_div1 { &_header {
flex: 1; height: r(25, 1920);
display: flex; background: url("../assets/img/dataMaintenance/title.png") no-repeat;
justify-content: center; background-size: 100% 100%;
align-items: center;
img {
width: 82px;
height: 53px;
}
}
&_div2 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_span1 {
color: #2cabe3;
font-size: 26px;
font-weight: 700;
}
&_span2 {
color: #2cabe3;
font-size: 16px;
font-weight: 500;
}
&_span11 {
color: white;
font-size: 26px;
font-weight: 700;
}
&_span22 { width: 100%;
color: white;
font-size: 16px;
font-weight: 500;
}
}
}
&_right11 {
flex: 1;
height: 45%;
border-radius: 8px;
background-image: url("../assets/img/BG.png");
background-repeat: no-repeat;
background-position: center;
display: flex; display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
&_div1 { &_text {
flex: 1; font-size: 13px;
display: flex; font-family: PingFang SC;
justify-content: center;
align-items: center;
img {
width: 82px;
height: 53px;
}
}
&_div2 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_span1 {
color: #2cabe3;
font-size: 26px;
font-weight: 700;
}
&_span2 {
color: #2cabe3;
font-size: 16px;
font-weight: 500; font-weight: 500;
} color: #ffffff;
margin-left: 15px;
} }
}
}
&_center {
width: 100%;
height: 2%;
background-color: #ffff;
display: flex;
&_line {
width: 50%;
height: 30%;
border-radius: 40px;
background-color: #2cabe3;
margin: 5px 0 5px 0;
}
&_line2 {
width: 50%;
height: 30%;
border-radius: 40px;
background-color: #2cabe3;
margin: 5px 0 5px 0;
margin-left: 50%;
}
} }
&_bottom { &_Content {
background: #ffffff; display: flex;
border-radius: 8px; flex-direction: row;
height: 100%; height: 95%;
width: 100%; width: 100%;
padding: 0 5% 5% 5%; justify-content: space-between;
align-items: center;
&_title { align-content: center;
font-size: 14px; flex-wrap: nowrap;
font-family: PingFang SC;
font-weight: bold;
color: #6a707e;
line-height: 40px;
height: 10%; margin-top: 10px;
// @include flexLayout; &_left {
width: 65%;
background-color: #ffffff;
height: 900px;
justify-content: left; padding: 0 8%;
}
&_tree { overflow: auto;
.is-leaf { overflow-x: hidden;
visibility: hidden;
} }
height: 90%; &_right {
overflow-x: hidden; width: 34%;
height: 900px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
&_top {
background: #ffffff;
border-radius: 8px;
height: 16%;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-around;
align-items: center;
.leftboxs { // padding: 3% 10%;
border-bottom: 1px dashed #dddddd; &_left {
} flex: 1;
height: 45%;
border-radius: 8px;
background-image: url("../assets/img/BG.png");
background-repeat: no-repeat;
background-position: center;
display: flex;
&_div1 {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
img {
width: 82px;
height: 53px;
}
}
&_div2 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_span1 {
color: #fff;
font-size: 26px;
font-weight: 700;
}
&_span2 {
color: #fff;
font-size: 16px;
font-weight: 500;
}
&_span11 {
color: #2cabe3;
font-size: 26px;
font-weight: 700;
}
&_span22 {
color: #2cabe3;
font-size: 16px;
font-weight: 500;
}
}
.leftblue {
color: #2cabe3;
}
}
.leftbox { &_left11 {
width: 100%; flex: 1;
display: flex; height: 45%;
align-items: center; border-radius: 8px;
height: 100%; background-color: #fff;
overflow: hidden; background-repeat: no-repeat;
white-space: pre-wrap; background-position: center;
text-overflow: ellipsis; display: flex;
span { &_div1 {
font-size: 14px; flex: 1;
font-family: PingFang SC; display: flex;
font-weight: 400; justify-content: center;
line-height: 22px; align-items: center;
text-align: start;
overflow: hidden; img {
width: 92%; width: 82px;
white-space: nowrap; height: 63px;
text-overflow: ellipsis; }
} }
.spans { &_div2 {
color: #2cabe3; flex: 1;
font-weight: 500; display: flex;
} flex-direction: column;
} justify-content: center;
align-items: center;
&_span1 {
color: #fff;
font-size: 26px;
font-weight: 700;
}
&_span2 {
color: #fff;
font-size: 16px;
font-weight: 500;
}
&_span11 {
color: #2cabe3;
font-size: 26px;
font-weight: 700;
}
&_span22 {
color: #2cabe3;
font-size: 16px;
font-weight: 500;
}
}
.leftblue {
color: #2cabe3;
}
}
._score { &_right {
font-size: 13px; height: 45%;
font-family: PingFang SC; flex: 1;
font-weight: 400; border-radius: 8px;
color: #ff3333; display: flex;
line-height: 22px;
&_div1 {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
img {
width: 82px;
height: 53px;
}
}
&_div2 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_span1 {
color: #2cabe3;
font-size: 26px;
font-weight: 700;
}
&_span2 {
color: #2cabe3;
font-size: 16px;
font-weight: 500;
}
&_span11 {
color: white;
font-size: 26px;
font-weight: 700;
}
&_span22 {
color: white;
font-size: 16px;
font-weight: 500;
}
}
}
width: 50%; &_right11 {
flex: 1;
height: 45%;
border-radius: 8px;
background-image: url("../assets/img/BG.png");
background-repeat: no-repeat;
background-position: center;
display: flex;
&_div1 {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
img {
width: 82px;
height: 53px;
}
}
&_div2 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_span1 {
color: #2cabe3;
font-size: 26px;
font-weight: 700;
}
&_span2 {
color: #2cabe3;
font-size: 16px;
font-weight: 500;
}
}
}
}
display: flex; &_center {
flex-direction: row; width: 100%;
justify-content: flex-end; height: 2%;
padding-right: 5%; background-color: #ffff;
display: flex;
span { &_line {
color: rgba(106, 112, 126, 1); width: 50%;
} height: 30%;
} border-radius: 40px;
background-color: #2cabe3;
margin: 5px 0 5px 0;
}
.el-tree { &_line2 {
width: 98%; width: 50%;
height: 85px; height: 30%;
border-radius: 40px;
background-color: #2cabe3;
margin: 5px 0 5px 0;
margin-left: 50%;
}
}
.el-tree-node__content { &_bottom {
height: 85px; background: #ffffff;
} border-radius: 8px;
height: 100%;
width: 100%;
padding: 0 5% 5% 5%;
.el-tree-node.is-current > .el-tree-node__content { &_title {
height: 85px; font-size: 14px;
font-family: PingFang SC;
font-weight: bold;
color: #6a707e;
line-height: 40px;
/* background: #5fc3f0; */ height: 10%;
.custom-tree-node { // @include flexLayout;
.leftbox {
width: 100%;
display: flex;
align-items: center;
height: 100%;
span { justify-content: left;
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
text-align: start;
} }
}
._score {
font-size: 13px;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px; &_tree {
} .is-leaf {
visibility: hidden;
}
height: 90%;
overflow-x: hidden;
.leftboxs {
border-bottom: 1px dashed #dddddd;
}
.leftbox {
width: 100%;
display: flex;
align-items: center;
height: 100%;
overflow: hidden;
white-space: pre-wrap;
text-overflow: ellipsis;
span {
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
text-align: start;
overflow: hidden;
width: 92%;
white-space: nowrap;
text-overflow: ellipsis;
}
.spans {
color: #2cabe3;
font-weight: 500;
}
}
._score {
font-size: 13px;
font-family: PingFang SC;
font-weight: 400;
color: #ff3333;
line-height: 22px;
width: 50%;
display: flex;
flex-direction: row;
justify-content: flex-end;
padding-right: 5%;
span {
color: rgba(106, 112, 126, 1);
}
}
.el-tree {
width: 98%;
height: 85px;
.el-tree-node__content {
height: 85px;
}
.el-tree-node.is-current > .el-tree-node__content {
height: 85px;
/* background: #5fc3f0; */
.custom-tree-node {
.leftbox {
width: 100%;
display: flex;
align-items: center;
height: 100%;
span {
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
text-align: start;
}
}
._score {
font-size: 13px;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
}
}
}
}
.el-tree-node {
white-space: initial;
}
&_nodata {
height: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_img {
width: 80px;
height: 80px;
}
&_text {
color: #abafb3;
font-family: PingFang SC;
font-size: 14px;
}
}
}
} }
}
} }
}
}
.el-tree-node { .custom-tree-node {
white-space: initial; width: 100%;
} display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
height: 100%;
}
&_nodata { .el-tree > .el-tree-node {
height: 80%; //父级加下滑线
display: flex; // border-bottom: 1px dashed #dddddd;
flex-direction: column; }
justify-content: center;
align-items: center;
&_img { //修改三角icon样式
width: 80px; .el-icon-caret-right {
height: 80px; font-size: 18px;
} color: #e4e4e4;
}
&_text { .el-tree-node__content .el-tree-node__label {
color: #abafb3; //子集字体小一号
font-family: PingFang SC; font-size: 14;
font-size: 14px; font-family: PingFang SC;
} font-weight: 400;
} line-height: 22px;
} }
}
} .el-tree-node__children .el-tree-node__label {
//子集字体小一号
font-size: 12px;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
} }
}
.custom-tree-node {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
height: 100%;
}
.el-tree > .el-tree-node {
//父级加下滑线
// border-bottom: 1px dashed #dddddd;
}
//修改三角icon样式
.el-icon-caret-right {
font-size: 18px;
color: #e4e4e4;
}
.el-tree-node__content .el-tree-node__label {
//子集字体小一号
font-size: 14;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
}
.el-tree-node__children .el-tree-node__label {
//子集字体小一号
font-size: 12px;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
}
} }
</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