Skip to content

V
vue-composition-api
Commit cacbc7a9 by wangshuangqing
Options

三个页面样式

parent aff75ccd
Showing with 1668 additions and 1454 deletions
src/views/outHistorygrouping.vue
...@@ -6,823 +6,936 @@ ...@@ -6,823 +6,936 @@
* @Description: * @Description:
--> -->
<template> <template>
<!-- 智能分组 --> <!-- 智能分组 -->
<div class="outsetgrouping" id="setGroupingbox"> <div class="outsetgrouping" id="setGroupingbox">
<div class="outsetgrouping_button">
<div class="outsetgrouping_title"><span class="outsetgrouping_title_span">智能疾病分组</span></div> <!-- <el-button class="outsetgrouping_button_GoBackbtn" size="mini" @click="goback">
<div class="outsetgrouping_centent"> <span class="iconfont icon-daochu"></span> <span class="s2">返回</span>
<div class="outsetgrouping_centent_totalnum" v-for="(item, index) in CorePercents" :key="index"> </el-button> -->
<div class="outsetgrouping_centent_totalnum_left"> <el-button
<div class="outsetgrouping_centent_totalnum_left_radios"> class="outsetgrouping_button_Submitbtn"
<input type="radio" name="radios" :value="item.coreID" v-model="radio" /> size="mini"
</div> type="primary"
@click="submit"
<div class="outsetgrouping_centent_totalnum_left_text"> >
<div class="outsetgrouping_centent_totalnum_left_text_msg1"> <span class="iconfont icon-ipr_tijiao"></span>
<div class="outsetgrouping_centent_totalnum_left_text_msg1_text1"> <span class="s2">提交</span>
<span> 医保诊断名称:{{ item.diagMapName }}</span> </el-button>
<span> 诊断类型:{{ item.diagOrder }}</span> </div>
</div> <div class="outsetgrouping_top">
<div class="outsetgrouping_centent_totalnum_left_text_msg1_text2"> <div class="outsetgrouping_top_message">
<span>医保手术名称:{{ item.opsMapName }}</span> <div class="outsetgrouping_top_message_left">
<span>手术类型:{{ item.opsOrder }}</span> <span class="iconfont icon-xinrenzhinan"> </span>
</div> <div class="outsetgrouping_top_message_left_t1">
</div> 住院号:<span>{{ casehisObj ? casehisObj.a48 : "" }}</span>
<div class="outsetgrouping_centent_totalnum_left_text_msg2"> </div>
<div class="outsetgrouping_centent_totalnum_left_text_msg2_text3"> </div>
<span>分组编码：{{ item.code }}</span> <div class="outsetgrouping_top_message_centert">
<span>入组名称：{{ item.coreName }}</span> <span class="iconfont icon-yinhangka"></span>
</div> <div class="outsetgrouping_top_message_centert_t2">
<div class="outsetgrouping_centent_totalnum_left_text_msg2_text4"> 住院次数:<span>{{ casehisObj ? casehisObj.a49 : "" }}</span>
<span>主诊断编码：{{ item.disCode }}</span><span>主手术编码：{{ item.opsCode }}</span><span>点数：{{ </div>
item.score </div>
}}</span> <div class="outsetgrouping_top_message_right">
</div> <span class="iconfont icon-fufeiguanli"></span>
<div class="outsetgrouping_centent_totalnum_left_text_msg2_text5"> <div class="outsetgrouping_top_message_right_t3">
<span>医保支付金额：{{ item.unitfee }}</span><span>院内平均费用：{{ item.avgFee 医疗付费方式:<span>{{ casehisObj ? casehisObj.a46C : "" }}</span>
}}</span><span>院内平均住院天数：{{ item.avgInHosDay }}</span> </div>
</div> </div>
</div> </div>
</div>
</div> <div class="outsetgrouping_top2">
</div> <div class="outsetgrouping_top2_message">
<div class="outsetgrouping_centent_totalnum_right"> <div class="outsetgrouping_top2_message_left">
<div class="outsetgrouping_centent_totalnum_right_text1"> <span class="iconfont icon-iconset0254"> </span>
<span class="outsetgrouping_centent_totalnum_right_text1_span1"> 药占比:</span> <div class="outsetgrouping_top2_message_left_t1">
<div :id="`indexChart` + index" class="outsetgrouping_centent_totalnum_right_text1_echar1"> 当前入组编码:<span>{{
</div> casehisObj ? casehisObj.drgs.code : ""
</div> }}</span>
<div class="outsetgrouping_centent_totalnum_right_text2"> </div>
<span class="outsetgrouping_centent_totalnum_right_text2_span2"> 耗材占比:</span> </div>
<div :id="`indexCharttwo` + index" class="outsetgrouping_centent_totalnum_right_text2_echar2"> <div class="outsetgrouping_top2_message_centert">
</div> <span class="iconfont icon-daoru"></span>
</div> <div class="outsetgrouping_top2_message_centert_t2">
<div class="outsetgrouping_centent_totalnum_right_text3"> 入组名称:<span>{{ casehisObj ? casehisObj.drgs.name : "" }}</span>
<span class="outsetgrouping_centent_totalnum_right_text3_span3"> 检查占比:</span> </div>
<div :id="`indexCharttree` + index" class="outsetgrouping_centent_totalnum_right_text3_echar3"> </div>
</div> <div class="outsetgrouping_top2_message_right">
</div> <span class="iconfont icon-qianqian-"></span>
<div class="outsetgrouping_centent_totalnum_right_text4"> <div class="outsetgrouping_top2_message_right_t3">
<span class="outsetgrouping_centent_totalnum_right_text4_span4"> 检验占比:</span> 医疗支付金额:<span>{{
<div :id="`indexChartfore` + index" class="outsetgrouping_centent_totalnum_right_text4_echar4"> casehisObj ? casehisObj.drgs.actualfee : ""
</div> }}</span>
</div> </div>
<div class="outsetgrouping_centent_totalnum_right_text5"> </div>
<span class="outsetgrouping_centent_totalnum_right_text5_span5"> 其他占比:</span> </div>
<div :id="`indexChartfile` + index" class="outsetgrouping_centent_totalnum_right_text5_echar5"> </div>
</div> <div class="outsetgrouping_top3"></div>
</div>
</div>
</div>
<!-- 如果没有搜索时的样式 -->
<div v-show="nolistShow" class="outsetgrouping_centent_nodata"> <div class="outsetgrouping_title">
<div class="outsetgrouping_centent_nodata_img"> <span class="outsetgrouping_title_span">智能疾病分组</span>
<img src="../assets/img/nodata.png" alt="" /> </div>
</div> <div class="outsetgrouping_centent">
<div class="outsetgrouping_centent_nodata_text">暂无数据</div> <div
class="outsetgrouping_centent_totalnum"
v-for="(item, index) in CorePercents"
:key="index"
>
<div class="outsetgrouping_centent_totalnum_left">
<div class="outsetgrouping_centent_totalnum_left_radios">
<input
type="radio"
name="radios"
:value="item.coreID"
v-model="radio"
/>
</div>
<div class="outsetgrouping_centent_totalnum_left_text">
<div class="outsetgrouping_centent_totalnum_left_text_msg1">
<div class="outsetgrouping_centent_totalnum_left_text_msg1_text1">
<span> 医保诊断名称:{{ item.diagMapName }}</span>
<span> 诊断类型:{{ item.diagOrder }}</span>
</div>
<div class="outsetgrouping_centent_totalnum_left_text_msg1_text2">
<span>医保手术名称:{{ item.opsMapName }}</span>
<span>手术类型:{{ item.opsOrder }}</span>
</div>
</div>
<div class="outsetgrouping_centent_totalnum_left_text_msg2">
<div class="outsetgrouping_centent_totalnum_left_text_msg2_text3">
<span>分组编码：{{ item.code }}</span>
<span>入组名称：{{ item.coreName }}</span>
</div>
<div class="outsetgrouping_centent_totalnum_left_text_msg2_text4">
<span>主诊断编码：{{ item.disCode }}</span
><span>主手术编码：{{ item.opsCode }}</span
><span>点数：{{ item.score }}</span>
</div>
<div class="outsetgrouping_centent_totalnum_left_text_msg2_text5">
<span>医保支付金额：{{ item.unitfee }}</span
><span>院内平均费用：{{ item.avgFee }}</span
><span>院内平均住院天数：{{ item.avgInHosDay }}</span>
</div>
</div> </div>
</div>
</div> </div>
<div class="outsetgrouping_pagination"> <div class="outsetgrouping_centent_totalnum_right">
<el-pagination layout="sizes,prev, pager, next,jumper" :total="totalCount" @size-change="sizeChange" <div class="outsetgrouping_centent_totalnum_right_text1">
@current-change="currentChange" :current-page="currentPage" :page-size="pageSize" <span class="outsetgrouping_centent_totalnum_right_text1_span1">
:page-sizes="[10, 30, 50]"> 药占比:</span
</el-pagination> >
<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 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 { reactive, toRefs, onMounted, nextTick, computed } from '@vue/composition-api'; import {
import { decimal } from '../utils/decimal'; reactive,
import { useRoute, useRouter } from '../utils/useVueRouter'; toRefs,
import { initEcharts, categoryChart } from '../utils/echarts'; onMounted,
nextTick,
computed,
} from "@vue/composition-api";
import { decimal } from "../utils/decimal";
import { Message } from 'element-ui';
import { useRoute, useRouter } from "../utils/useVueRouter";
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 {
const router = useRouter(); http
const goback = () => { .post(
router.go(-1) `/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);
if (state.searchForm.diagName.length > 0) {
getlist();
}
});
return {
...toRefs(state),
decimal,
getCaseHis,
currentChange,
sizeChange,
getlist,
submit,
goback,
};
},
};
</script>
<style lang="scss" scoped>
@import "../styles/mixin.scss";
// @import '../styles/media/media/outHistorygrouping.scss';
.outsetgrouping {
height: 900px;
background-color: white;
padding: 0px 20px 20px 20px;
overflow: hidden;
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;
} }
&_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 {
function getCaseHis(code) { width: 33%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
http .iconfont {
.post(`/medical/Get/casehisData?id=${code}`, {}) color: #2cabe3;
.then((data) => { padding-left: 29px;
state.casehisObj = data; font-size: 23px;
console.log('data', data); }
state.diagMapList = data.diagMapList;
state.opsMapList = data.opsMapList;
getlist();
&_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 {
.catch((error) => { 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;
} }
//获取列表数据 &_t3 {
const getlist = () => { width: 80%;
height: 42px;
http display: flex;
.post(`/medical/get/GetCorePercents`, justify-content: start;
{ padding-left: 10px;
PageNumber: state.currentPage, align-items: center;
Type: 1, background-color: #fff;
pageSize: state.pageSize, color: #abafb3;
DiagMapList: state.diagMapList, font-size: 14px;
OpsMapList: state.opsMapList, margin-left: 29px;
id: route.value.query.id
}) span {
.then((data) => { color: #787e8a;
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++) { &_top2 {
initEcharts(categoryChart(state.CorePercents[i].drugPercent, '#2CABE3'), `indexChart${i}`); .span1 {
initEcharts(categoryChart(state.CorePercents[i].materialsPercent, '#71D875'), `indexCharttwo${i}`); display: flex;
initEcharts(categoryChart(state.CorePercents[i].inspectPercent, '#F35E77'), `indexCharttree${i}`); justify-content: start;
initEcharts(categoryChart(state.CorePercents[i].testPercent, '#FFB321'), `indexChartfore${i}`); font-size: 14px;
initEcharts(categoryChart(state.CorePercents[i].otherPercent, '#C05EF3'), `indexChartfile${i}`); color: #6a707e;
} font-family: PingFang SC;
font-weight: 400;
}) }
.catch((error) => {
});
};
//提交
const submit = () => {
if (state.radio == '') {
// ElMessage.warning({
// message: "请先选择要入组的病组",
// type: 'warning',
// });
} else {
http
.post(`/medical/Update/casehisById?PatientId=${route.value.query.id}`, [state.radio])
.then((data) => {
// ElMessage.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);
if (state.searchForm.diagName.length > 0) {
getlist();
}
});
return { &_message {
...toRefs(state), display: flex;
decimal, justify-content: space-between;
getCaseHis, margin-top: 10px;
currentChange, margin-bottom: 16px;
sizeChange,
getlist,
submit,
goback
};
},
};
</script>
<style lang="scss" scoped>
@import '../styles/mixin.scss';
// @import '../styles/media/media/outHistorygrouping.scss'; &_left {
.outsetgrouping { width: 33%;
height: 100%; height: 51px;
background-color: white; display: flex;
padding: 0px 20px 20px 20px; justify-content: start;
overflow: hidden; align-items: center;
position: relative; background-color: #f3fafd;
.iconfont {
color: #2cabe3;
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;
}
}
}
&_button { &_centert {
width: 33%;
height: 51px;
display: flex; display: flex;
justify-content: end; justify-content: start;
margin-bottom: 10px; align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
.iconfont {
color: #2cabe3;
padding-left: 29px;
font-size: 23px;
}
&_GoBackbtn { &_t2 {
color: #2CABE3; width: 80%;
border: 1px solid #2CABE3; 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;
&_Submitbtn { .iconfont {
background-color: #2CABE3; color: #2cabe3;
color: #fff; 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;
}
} }
}
} }
}
&_top {
.span1 { &_top3 {
display: flex; height: 10px;
justify-content: start; background-color: #f3fafd;
font-size: 14px; border-radius: 10px;
color: #6a707e; margin-bottom: 16px;
font-family: PingFang SC; }
font-weight: 400;
&_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: 282px;
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;
} }
&_message { &_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; display: flex;
justify-content: space-between; flex-direction: column;
justify-content: center;
align-items: center;
&_left { &_text1 {
width: 33%; width: 100%;
height: 51px; height: 50%;
display: flex; display: flex;
justify-content: start; justify-content: space-between;
align-items: center;
background-color: #f3fafd;
.iconfont {
color: #2cabe3;
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 { span {
width: 33%; height: 100%;
height: 51px; width: 50%;
margin: 5px 5px;
display: flex; display: flex;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
background-color: #f3fafd; font-size: 14px;
padding-left: 10px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 300;
.iconfont { color: #6a707e;
color: #2cabe3; }
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 { &_text2 {
width: 33%; width: 100%;
height: 51px; height: 48%;
display: flex;
justify-content: space-between;
span {
height: 100%;
width: 50%;
margin: 0px 5px;
display: flex; display: flex;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
background-color: #f3fafd; font-size: 14px;
padding-left: 10px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 300;
.iconfont { color: #6a707e;
color: #2cabe3; }
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;
}
}
} }
} }
}
&_top2 {
.span1 {
display: flex;
justify-content: start;
font-size: 14px;
color: #6a707e;
font-family: PingFang SC;
font-weight: 400;
}
&_message { &_msg2 {
background-color: rgba(44, 171, 227, 0.08);
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
margin-top: 10px; height: 65%;
margin-bottom: 16px; justify-content: center;
padding-top: 10px;
&_left {
width: 33%; &_text3 {
height: 51px; // 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; display: flex;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
background-color: #f3fafd; font-size: 14px;
padding-left: 10px;
.iconfont { font-family: PingFang SC;
color: #2cabe3; font-weight: 300;
padding-left: 29px; color: #6a707e;
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 { &_text4 {
width: 33%; margin-bottom: 10px;
height: 51px; 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; display: flex;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
background-color: #f3fafd; font-size: 14px;
padding-left: 10px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 300;
.iconfont { color: #6a707e;
color: #2cabe3; }
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 { &_text5 {
width: 33%; margin-bottom: 10px;
height: 51px; width: 100%;
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;
background-color: #f3fafd; font-size: 14px;
padding-left: 10px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 300;
.iconfont { color: #6a707e;
color: #2cabe3; }
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 { &_right {
height: 10px; width: 100%;
background-color: #f3fafd; height: 30%;
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; display: flex;
align-items: center; justify-content: space-around;
justify-content: start;
margin-bottom: 5px;
&_span { &_text1 {
padding-left: 10px; 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: 88px;
margin-left: -30px;
}
} }
}
&_centent { &_text2 {
background-color: #f1f5f8; width: 19%;
height: 66%; display: flex;
overflow-y: auto; justify-content: center;
align-items: center;
&_totalnum { &_span2 {
height: 282px; color: #71d875;
background-color: #fff; font-family: PingFang SC;
margin: 12px; font-weight: 400;
display: flex; }
flex-direction: column;
align-items: center;
&_left { &_echar2 {
flex: 1; width: 50%;
width: 100%; height: 88px;
height: 70%; margin-left: -30px;
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;
}
}
}
}
}
&_right { &_text3 {
width: 100%; width: 19%;
height: 30%; display: flex;
display: flex; justify-content: center;
justify-content: space-around; align-items: center;
&_text1 { &_span3 {
width: 19%; color: #f35e77;
display: flex; font-family: PingFang SC;
justify-content: center; font-weight: 400;
align-items: center; }
margin-left: 3%;
&_echar3 {
&_span1 { width: 50%;
color: #2cabe3; height: 85px;
font-family: PingFang SC; margin-left: -30px;
font-weight: 400; }
}
&_echar1 {
width: 50%;
height: 88px;
margin-left: -30px;
}
}
&_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: 88px;
margin-left: -30px;
}
}
&_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;
}
}
&_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: 88px;
margin-left: -30px;
}
}
&_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: 88px;
margin-left: -30px;
}
}
}
} }
// 没有数据 &_text4 {
&_nodata { width: 19%;
width: 100%; display: flex;
height: 100%; justify-content: center;
display: flex; align-items: center;
flex-direction: column;
justify-content: center;
align-content: center;
&_img { &_span4 {
img { color: #ffb321;
width: 115px; font-family: PingFang SC;
height: 102px; font-weight: 400;
} }
}
&_text { &_echar4 {
font-size: 18px; width: 50%;
font-family: PingFang SC; height: 88px;
font-weight: 400; margin-left: -30px;
color: #abafb3; }
}
} }
&_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: 88px;
margin-left: -30px;
}
}
}
} }
&_pagination { // 没有数据
display: flex; &_nodata {
justify-content: end; width: 100%;
margin-top: 1%; height: 100%;
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
...@@ -96,16 +96,8 @@ ...@@ -96,16 +96,8 @@
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="'100%'" height="575"
> >
<!-- <el-table-column :label="item.cloumn" :prop="item.name">
<template slot-scope="scope" v-if="item.cloumn == '单价'">
{{ decimal(scope.row.fee) }}
</template>
<template slot-scope="scope" v-if="item.cloumn == '总金额'">
{{ decimal(scope.row.unitprice) }}
</template>
</el-table-column> -->
<el-table-column <el-table-column
label="开单日期" label="开单日期"
prop="iteM_CODE" prop="iteM_CODE"
...@@ -197,6 +189,7 @@ ...@@ -197,6 +189,7 @@
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 { 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 {
...@@ -240,7 +233,7 @@ export default { ...@@ -240,7 +233,7 @@ export default {
.post(`/global/post/SetCaseProjectRuleHis?id=${route.value.query.id}`) .post(`/global/post/SetCaseProjectRuleHis?id=${route.value.query.id}`)
.then((data) => { .then((data) => {
// ElMessage.success(data.message); Message.success(data.message);
}) })
.catch((error) => { .catch((error) => {
...@@ -248,7 +241,7 @@ export default { ...@@ -248,7 +241,7 @@ export default {
}; };
//获取患者信息数据 //获取患者信息数据
const getHistoryInfo = () => { const getHistoryInfo = () => {
// var loadingInstance2 = ElLoading.service(loadingOption1);
http http
.post(`/medical/Get/getHisInfo?&code=${route.value.query.id}`, {}) .post(`/medical/Get/getHisInfo?&code=${route.value.query.id}`, {})
...@@ -262,10 +255,10 @@ export default { ...@@ -262,10 +255,10 @@ export default {
toggle(0, state.goods[0]); toggle(0, state.goods[0]);
} }
// loadingInstance2.close();
}) })
.catch((error) => { .catch((error) => {
// loadingInstance2.close();
}); });
}; };
...@@ -370,7 +363,7 @@ export default { ...@@ -370,7 +363,7 @@ export default {
// padding: 20px; // padding: 20px;
// position: relative; // position: relative;
// overflow: hidden; // overflow: hidden;
height: 100%; height: 775px;
background-color: white; background-color: white;
padding: 20px; padding: 20px;
overflow: hidden; overflow: hidden;
...@@ -537,7 +530,7 @@ export default { ...@@ -537,7 +530,7 @@ export default {
&_bottom { &_bottom {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 70%; height: 80%;
&_leftShowBox { &_leftShowBox {
width: 80%; width: 80%;
height: 100%; height: 100%;
...@@ -672,14 +665,14 @@ export default { ...@@ -672,14 +665,14 @@ export default {
// 无数据样式 // 无数据样式
&_box { &_box {
width: 100%; width: 100%;
height: 100%; 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: 200px; width: 100px;
height: 200px; height: 100px;
} }
&_text { &_text {
font-size: 18px; font-size: 18px;
......
src/views/outseeQualityControl.vue
...@@ -6,768 +6,876 @@ ...@@ -6,768 +6,876 @@
* @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>
<div class="outseeQualityControl_box_Content"> <div class="outseeQualityControl_box_Content">
<div class="outseeQualityControl_box_Content_left"> <div class="outseeQualityControl_box_Content_left">
<medical-record-homepage :medicalrecord="medicalrecord" :clicktitle="clicktitle"> <medical-record-homepage
</medical-record-homepage> :medicalrecord="medicalrecord"
</div> :clicktitle="clicktitle"
>
</medical-record-homepage>
</div>
<div class="outseeQualityControl_box_Content_right"> <div class="outseeQualityControl_box_Content_right">
<div class="outseeQualityControl_box_Content_right_top"> <div class="outseeQualityControl_box_Content_right_top">
<!--非编码问题 --> <!--非编码问题 -->
<div :class="[isleftcodeShow ? 'outseeQualityControl_box_Content_right_top_left' : 'outseeQualityControl_box_Content_right_top_left11']" <div
@click="leftcode"> :class="[
<div class="outseeQualityControl_box_Content_right_top_left_div1"> isleftcodeShow
<img src="../assets/img/fbm.png" alt="" v-show="isleftcodeShow" /> ? 'outseeQualityControl_box_Content_right_top_left'
<img src="../assets/img/bm.png" alt="" v-show="!isleftcodeShow" /> : 'outseeQualityControl_box_Content_right_top_left11',
</div> ]"
<div class="outseeQualityControl_box_Content_right_top_left_div2"> @click="leftcode"
<span :class="[ >
isleftcodeShow <div class="outseeQualityControl_box_Content_right_top_left_div1">
? 'outseeQualityControl_box_Content_right_top_left_div2_span1' <img
: 'outseeQualityControl_box_Content_right_top_left_div2_span11', src="../assets/img/fbm.png"
]">{{ fruleCount }}</span> alt=""
<span :class="[ v-show="isleftcodeShow"
isleftcodeShow />
? 'outseeQualityControl_box_Content_right_top_left_div2_span2' <img
: 'outseeQualityControl_box_Content_right_top_left_div2_span22', src="../assets/img/bm.png"
]">非编码问题</span> alt=""
</div> v-show="!isleftcodeShow"
</div> />
<!-- 编码问题 --> </div>
<div :class="[isleftcodeShow ? 'outseeQualityControl_box_Content_right_top_right' : 'outseeQualityControl_box_Content_right_top_right11']" <div class="outseeQualityControl_box_Content_right_top_left_div2">
@click="rightcode"> <span
<div class="outseeQualityControl_box_Content_right_top_right_div1"> :class="[
<img src="../assets/img/fbm.png" alt="" v-show="!isleftcodeShow" /> isleftcodeShow
<img src="../assets/img/bm.png" alt="" v-show="isleftcodeShow" /> ? 'outseeQualityControl_box_Content_right_top_left_div2_span1'
</div> : 'outseeQualityControl_box_Content_right_top_left_div2_span11',
<div class="outseeQualityControl_box_Content_right_top_right_div2"> ]"
<span :class="[ >{{ fruleCount }}</span
isleftcodeShow >
? 'outseeQualityControl_box_Content_right_top_right_div2_span1' <span
: 'outseeQualityControl_box_Content_right_top_right_div2_span11', :class="[
]">{{ ruleCount }}</span> isleftcodeShow
<span :class="[ ? 'outseeQualityControl_box_Content_right_top_left_div2_span2'
isleftcodeShow : 'outseeQualityControl_box_Content_right_top_left_div2_span22',
? 'outseeQualityControl_box_Content_right_top_right_div2_span2' ]"
: 'outseeQualityControl_box_Content_right_top_right_div2_span22', >非编码问题</span
]">编码问题</span> >
</div> </div>
</div> </div>
</div> <!-- 编码问题 -->
<div class="outseeQualityControl_box_Content_right_center"> <div
<div class="outseeQualityControl_box_Content_right_center_line" v-show="isleftcodeShow"></div> :class="[
<div class="outseeQualityControl_box_Content_right_center_line2" v-show="!isleftcodeShow"></div> 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> </div>
<div class="outseeQualityControl_box_Content_right_bottom"> </span>
<!-- <div class="outseeQualityControl_box_Content_right_bottom_title">患者基本信息</div> --> </template>
<div class="outseeQualityControl_box_Content_right_bottom_tree" v-show="isleftcodeShow"> </el-tree>
<el-tree :data="departmentTree" :props="defaultProps" :default-expand-all="false" ref="tree" </div>
node-key="id" @node-click="handleNodeClick">
<template #default="{ node, data }"> <div
<span class="custom-tree-node"> class="outseeQualityControl_box_Content_right_bottom_tree"
<div class="leftbox" :class="[data.ruleName != '非编码问题' ? 'leftboxs' : '']"> v-show="!isleftcodeShow"
<span :class="[data.ruleName == '非编码问题' ? 'spans' : '']">{{ data.ruleName >
}}</span> <el-tree
</div> :data="rightdepartmentTree"
<!-- <span class="_score"> -{{ data.score }}<span>分</span></span> --> :props="defaultProps"
</span> :default-expand-all="false"
</template> ref="tree"
</el-tree> node-key="id"
</div> @node-click="handleNodeClick"
v-show="!isnodataShow"
<div class="outseeQualityControl_box_Content_right_bottom_tree" v-show="!isleftcodeShow"> >
<el-tree :data="rightdepartmentTree" :props="defaultProps" :default-expand-all="false" <template #default="{ node, data }">
ref="tree" node-key="id" @node-click="handleNodeClick" v-show="!isnodataShow"> <span class="custom-tree-node">
<template #default="{ node, data }"> <div
<span class="custom-tree-node"> class="leftbox"
<div class="leftbox" :class="[data.ruleName != '编码问题' ? 'leftboxs' : '']"> :class="[data.ruleName != '编码问题' ? 'leftboxs' : '']"
<span :class="[data.ruleName == '编码问题' ? 'spans' : '']">{{ data.ruleName >
}}</span> <el-tooltip placement="bottom" trigger="hover">
</div> <template #content>{{ data.ruleName }} </template>
</span> <span
</template> :class="[data.ruleName == '编码问题' ? 'spans' : '']"
</el-tree> >{{ data.ruleName }}</span
<div class="outseeQualityControl_box_Content_right_bottom_tree_nodata" >
v-show="isnodataShow"> </el-tooltip>
<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 { reactive, toRefs, onMounted, nextTick, computed } from '@vue/composition-api'; import {
import medicalRecordHomepage from '../components/medicalRecordHomepage/index.vue'; reactive,
import { useRoute, useRouter } from '../utils/useVueRouter'; toRefs,
import $ from 'jquery'; onMounted,
import { setItem, getItem } from '../utils/auth'; nextTick,
computed,
} from "@vue/composition-api";
import medicalRecordHomepage from "../components/medicalRecordHomepage/index.vue";
import { useRoute, useRouter } from "../utils/useVueRouter";
import $ from "jquery";
import { setItem, getItem } from "../utils/auth";
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(); var route = useRoute();
onMounted(() => { onMounted(() => {
console.log(route.value); console.log(route.value);
});
});
//同步数据
//同步数据 const getSynchronous = (id) => {
const getSynchronous = (id) => { http
.post(`/medical/get/Synchronization?id=${route.value.query.id}`)
http .then((data) => {
.post(`/medical/get/Synchronization?id=${route.value.query.id}`) Message.success(data.message);
.then((data) => { })
.catch((error) => {
// ElMessage.success(data.message); Message.error(error);
})
.catch((error) => {
// ElMessage.error(error);
});
};
//获取到点击的值
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), const handleNodeClick = (data) => {
handleNodeClick, let arr = document.getElementsByClassName(data.columnName);
leftcode, let dom = $("#medicalRecord").find("#clickColor");
rightcode, if (dom.length != 0) {
getSynchronous, 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> </script>
<style lang="scss"> <style lang="scss">
// @import '../styles/mixin.scss'; // @import '../styles/mixin.scss';
// @import 'styles/media/components/outseeQualityControl.scss'; // @import 'styles/media/components/outseeQualityControl.scss';
.outseeQualityControl { .outseeQualityControl {
height: 96%;
background-color: white;
padding: 20px;
overflow: hidden;
position: relative;
#clickColor {
background-color: #f3bf18;
}
&_box {
height: 100%; height: 100%;
background-color: white; width: 100%;
padding: 20px; background-color: #f3fafd;
overflow: hidden;
position: relative; padding: 10px;
#clickColor { &_btn {
background-color: #f3bf18; 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;
}
}
&_box { &_Content {
height: 100%; display: flex;
width: 100%; flex-direction: row;
background-color: #f3fafd; height: 95%;
width: 100%;
justify-content: space-between;
align-items: center;
align-content: center;
flex-wrap: nowrap;
padding: 10px; margin-top: 10px;
&_btn { &_left {
width: 100%; width: 65%;
background-color: #ffffff;
height: 900px;
padding: 0 8%;
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; display: flex;
justify-content: end;
margin-bottom: 10px;
}
&_header { &_div1 {
height: r(25, 1920); flex: 1;
background: url('../assets/img/dataMaintenance/title.png') no-repeat; display: flex;
background-size: 100% 100%; 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;
}
width: 100%; &_span22 {
color: #2cabe3;
font-size: 16px;
font-weight: 500;
}
}
.leftblue {
color: #2cabe3;
}
}
&_left11 {
flex: 1;
height: 45%;
border-radius: 8px;
background-color: #fff;
background-repeat: no-repeat;
background-position: center;
display: flex; display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
&_text { &_div1 {
font-size: 13px; flex: 1;
font-family: PingFang SC; display: flex;
justify-content: center;
align-items: center;
img {
width: 82px;
height: 63px;
}
}
&_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; font-weight: 500;
color: #ffffff; }
margin-left: 15px;
&_span11 {
color: #2cabe3;
font-size: 26px;
font-weight: 700;
}
&_span22 {
color: #2cabe3;
font-size: 16px;
font-weight: 500;
}
} }
}
&_Content { .leftblue {
color: #2cabe3;
}
}
&_right {
height: 45%;
flex: 1;
border-radius: 8px;
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;
}
&_span11 {
color: white;
font-size: 26px;
font-weight: 700;
}
&_span22 {
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;
height: 95%;
width: 100%;
justify-content: space-between;
align-items: center;
align-content: center;
flex-wrap: nowrap;
margin-top: 10px; &_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;
}
}
}
}
&_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 {
background: #ffffff;
border-radius: 8px;
height: 100%;
width: 100%;
padding: 0 5% 5% 5%;
&_left { &_title {
width: 65%; font-size: 14px;
background-color: #ffffff; font-family: PingFang SC;
height: 900px; font-weight: bold;
color: #6a707e;
line-height: 40px;
padding: 0 8%; height: 10%;
overflow: auto; // @include flexLayout;
overflow-x: hidden;
justify-content: left;
}
&_tree {
.is-leaf {
visibility: hidden;
} }
&_right { height: 90%;
width: 34%; overflow-x: hidden;
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%; .leftboxs {
&_left { border-bottom: 1px dashed #dddddd;
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;
}
}
&_left11 { .leftbox {
flex: 1; width: 100%;
height: 45%; display: flex;
border-radius: 8px; align-items: center;
background-color: #fff; height: 100%;
background-repeat: no-repeat; overflow: hidden;
background-position: center; white-space: pre-wrap;
display: flex; text-overflow: ellipsis;
&_div1 { span {
flex: 1; font-size: 14px;
display: flex; font-family: PingFang SC;
justify-content: center; font-weight: 400;
align-items: center; line-height: 22px;
text-align: start;
img { overflow: hidden;
width: 82px; width: 92%;
height: 63px; white-space: nowrap;
} text-overflow: ellipsis;
} }
&_div2 { .spans {
flex: 1; color: #2cabe3;
display: flex; font-weight: 500;
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;
}
}
&_right { ._score {
height: 45%; font-size: 13px;
flex: 1; font-family: PingFang SC;
border-radius: 8px; font-weight: 400;
display: flex; color: #ff3333;
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;
}
}
}
&_right11 { width: 50%;
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;
}
}
}
}
&_center { display: flex;
width: 100%; flex-direction: row;
height: 2%; justify-content: flex-end;
background-color: #ffff; padding-right: 5%;
display: flex;
&_line { span {
width: 50%; color: rgba(106, 112, 126, 1);
height: 30%; }
border-radius: 40px; }
background-color: #2cabe3;
margin: 5px 0 5px 0;
}
&_line2 { .el-tree {
width: 50%; width: 98%;
height: 30%; height: 85px;
border-radius: 40px;
background-color: #2cabe3;
margin: 5px 0 5px 0;
margin-left: 50%;
}
}
&_bottom { .el-tree-node__content {
background: #ffffff; height: 85px;
border-radius: 8px; }
height: 100%;
width: 100%;
padding: 0 5% 5% 5%;
&_title { .el-tree-node.is-current > .el-tree-node__content {
font-size: 14px; height: 85px;
font-family: PingFang SC;
font-weight: bold;
color: #6a707e;
line-height: 40px;
height: 10%; /* background: #5fc3f0; */
// @include flexLayout; .custom-tree-node {
.leftbox {
width: 100%;
display: flex;
align-items: center;
height: 100%;
justify-content: left; span {
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
text-align: start;
} }
}
&_tree { ._score {
.is-leaf { font-size: 13px;
visibility: hidden; font-family: PingFang SC;
} font-weight: 400;
height: 90%; line-height: 22px;
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;
}
.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;
}
}
}
} }
}
} }
}
}
.custom-tree-node { .el-tree-node {
width: 100%; white-space: initial;
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 { &_nodata {
//父级加下滑线 height: 80%;
// border-bottom: 1px dashed #dddddd; display: flex;
} flex-direction: column;
justify-content: center;
align-items: center;
//修改三角icon样式 &_img {
.el-icon-caret-right { width: 80px;
font-size: 18px; height: 80px;
color: #e4e4e4; }
}
.el-tree-node__content .el-tree-node__label { &_text {
//子集字体小一号 color: #abafb3;
font-size: 14; font-family: PingFang SC;
font-family: PingFang SC; font-size: 14px;
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