zzc
3 months ago
116 changed files with 14875 additions and 4933 deletions
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 874 B |
|
After Width: | Height: | Size: 849 B |
|
After Width: | Height: | Size: 767 B |
|
After Width: | Height: | Size: 734 B |
|
After Width: | Height: | Size: 1018 B |
|
After Width: | Height: | Size: 716 B |
|
After Width: | Height: | Size: 699 B |
|
After Width: | Height: | Size: 860 B |
|
After Width: | Height: | Size: 833 B |
|
After Width: | Height: | Size: 787 B |
|
After Width: | Height: | Size: 759 B |
|
After Width: | Height: | Size: 1.7 KiB |
@ -1,33 +1,27 @@ |
|||||
<script> |
<script> |
||||
export default { |
export default { |
||||
name: 'MenuItem', |
name: "MenuItem", |
||||
functional: true, |
functional: true, |
||||
props: { |
props: { |
||||
icon: { |
icon: { |
||||
type: String, |
type: String, |
||||
default: '' |
default: "", |
||||
}, |
}, |
||||
title: { |
title: { |
||||
type: String, |
type: String, |
||||
default: '' |
default: "", |
||||
} |
}, |
||||
}, |
}, |
||||
render(h, context) { |
|
||||
const { icon, title } = context.props |
|
||||
const vnodes = [] |
|
||||
|
|
||||
if (icon) { |
render(h, context) { |
||||
vnodes.push(<svg-icon icon-class={icon}/>) |
const { icon, title } = context.props; |
||||
} |
const vnodes = []; |
||||
|
|
||||
if (title) { |
if (title) { |
||||
if (title.length > 5) { |
vnodes.push(<span slot="title">{title}</span>); |
||||
vnodes.push(<span slot='title' title={(title)}>{(title)}</span>) |
|
||||
} else { |
|
||||
vnodes.push(<span slot='title'>{(title)}</span>) |
|
||||
} |
|
||||
} |
} |
||||
return vnodes |
|
||||
} |
return vnodes; |
||||
} |
}, |
||||
|
}; |
||||
</script> |
</script> |
||||
|
|||||
@ -1,111 +1,122 @@ |
|||||
<template> |
<template> |
||||
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"> |
<div |
||||
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> |
:class="classObj" |
||||
<sidebar v-if="!sidebar.hide" class="sidebar-container"/> |
class="app-wrapper" |
||||
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container"> |
:style="{ '--current-color': theme }" |
||||
<div :class="{'fixed-header':fixedHeader}"> |
> |
||||
<navbar/> |
<!-- <div |
||||
<tags-view v-if="needTagsView"/> |
v-if="device === 'mobile' && sidebar.opened" |
||||
|
class="drawer-bg" |
||||
|
@click="handleClickOutside" |
||||
|
/> --> |
||||
|
<sidebar v-if="!sidebar.hide" class="sidebar-container" /> |
||||
|
<div |
||||
|
:class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" |
||||
|
class="main-container" |
||||
|
> |
||||
|
<div :class="{ 'fixed-header': fixedHeader }"> |
||||
|
<navbar /> |
||||
|
<!-- <tags-view v-if="needTagsView"/> --> |
||||
</div> |
</div> |
||||
<app-main/> |
<app-main /> |
||||
<right-panel> |
<right-panel> |
||||
<settings/> |
<settings /> |
||||
</right-panel> |
</right-panel> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import RightPanel from '@/components/RightPanel' |
import RightPanel from "@/components/RightPanel"; |
||||
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components' |
import { AppMain, Navbar, Settings, Sidebar, TagsView } from "./components"; |
||||
import ResizeMixin from './mixin/ResizeHandler' |
import ResizeMixin from "./mixin/ResizeHandler"; |
||||
import { mapState } from 'vuex' |
import { mapState } from "vuex"; |
||||
import variables from '@/assets/styles/variables.scss' |
import variables from "@/assets/styles/variables.scss"; |
||||
|
|
||||
export default { |
export default { |
||||
name: 'Layout', |
name: "Layout", |
||||
components: { |
components: { |
||||
AppMain, |
AppMain, |
||||
Navbar, |
Navbar, |
||||
RightPanel, |
RightPanel, |
||||
Settings, |
Settings, |
||||
Sidebar, |
Sidebar, |
||||
TagsView |
TagsView, |
||||
}, |
}, |
||||
mixins: [ResizeMixin], |
mixins: [ResizeMixin], |
||||
computed: { |
computed: { |
||||
...mapState({ |
...mapState({ |
||||
theme: state => state.settings.theme, |
theme: (state) => state.settings.theme, |
||||
sideTheme: state => state.settings.sideTheme, |
sideTheme: (state) => state.settings.sideTheme, |
||||
sidebar: state => state.app.sidebar, |
sidebar: (state) => state.app.sidebar, |
||||
device: state => state.app.device, |
device: (state) => state.app.device, |
||||
needTagsView: state => state.settings.tagsView, |
needTagsView: (state) => state.settings.tagsView, |
||||
fixedHeader: state => state.settings.fixedHeader |
fixedHeader: (state) => state.settings.fixedHeader, |
||||
}), |
}), |
||||
classObj() { |
classObj() { |
||||
return { |
return { |
||||
hideSidebar: !this.sidebar.opened, |
hideSidebar: !this.sidebar.opened, |
||||
openSidebar: this.sidebar.opened, |
openSidebar: this.sidebar.opened, |
||||
withoutAnimation: this.sidebar.withoutAnimation, |
withoutAnimation: this.sidebar.withoutAnimation, |
||||
mobile: this.device === 'mobile' |
mobile: this.device === "mobile", |
||||
} |
}; |
||||
}, |
}, |
||||
variables() { |
variables() { |
||||
return variables; |
return variables; |
||||
} |
}, |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
handleClickOutside() { |
handleClickOutside() { |
||||
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false }) |
this.$store.dispatch("app/closeSideBar", { withoutAnimation: false }); |
||||
} |
}, |
||||
} |
}, |
||||
} |
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
@import "~@/assets/styles/mixin.scss"; |
@import "~@/assets/styles/mixin.scss"; |
||||
@import "~@/assets/styles/variables.scss"; |
@import "~@/assets/styles/variables.scss"; |
||||
|
|
||||
.app-wrapper { |
.app-wrapper { |
||||
@include clearfix; |
@include clearfix; |
||||
position: relative; |
position: relative; |
||||
height: 100%; |
height: 100%; |
||||
width: 100%; |
width: 100%; |
||||
|
|
||||
&.mobile.openSidebar { |
&.mobile.openSidebar { |
||||
position: fixed; |
|
||||
top: 0; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.drawer-bg { |
|
||||
background: #000; |
|
||||
opacity: 0.3; |
|
||||
width: 100%; |
|
||||
top: 0; |
|
||||
height: 100%; |
|
||||
position: absolute; |
|
||||
z-index: 999; |
|
||||
} |
|
||||
|
|
||||
.fixed-header { |
|
||||
position: fixed; |
position: fixed; |
||||
top: 0; |
top: 0; |
||||
right: 0; |
|
||||
z-index: 9; |
|
||||
width: calc(100% - #{$base-sidebar-width}); |
|
||||
transition: width 0.28s; |
|
||||
} |
} |
||||
|
} |
||||
|
|
||||
.hideSidebar .fixed-header { |
.drawer-bg { |
||||
width: calc(100% - 54px); |
background: #000; |
||||
} |
opacity: 0.3; |
||||
|
width: 100%; |
||||
|
top: 0; |
||||
|
height: 100%; |
||||
|
position: absolute; |
||||
|
z-index: 999; |
||||
|
} |
||||
|
|
||||
.sidebarHide .fixed-header { |
.fixed-header { |
||||
width: 100%; |
position: fixed; |
||||
} |
top: 0; |
||||
|
right: 0; |
||||
|
z-index: 9; |
||||
|
width: calc(100% - #{$base-sidebar-width}); |
||||
|
transition: width 0.28s; |
||||
|
} |
||||
|
|
||||
.mobile .fixed-header { |
.hideSidebar .fixed-header { |
||||
width: 100%; |
width: calc(100% - 54px); |
||||
} |
} |
||||
|
|
||||
|
.sidebarHide .fixed-header { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.mobile .fixed-header { |
||||
|
width: 100%; |
||||
|
} |
||||
</style> |
</style> |
||||
|
|||||
@ -1,66 +1,68 @@ |
|||||
import Cookies from 'js-cookie' |
import Cookies from "js-cookie"; |
||||
|
|
||||
const state = { |
const state = { |
||||
sidebar: { |
sidebar: { |
||||
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true, |
opened: Cookies.get("sidebarStatus") |
||||
|
? !!+Cookies.get("sidebarStatus") |
||||
|
: true, |
||||
withoutAnimation: false, |
withoutAnimation: false, |
||||
hide: false |
hide: false, |
||||
}, |
}, |
||||
device: 'desktop', |
device: "desktop", |
||||
size: Cookies.get('size') || 'medium' |
size: Cookies.get("size") || "medium", |
||||
} |
}; |
||||
|
|
||||
const mutations = { |
const mutations = { |
||||
TOGGLE_SIDEBAR: state => { |
TOGGLE_SIDEBAR: (state) => { |
||||
if (state.sidebar.hide) { |
if (state.sidebar.hide) { |
||||
return false; |
return true; |
||||
} |
} |
||||
state.sidebar.opened = !state.sidebar.opened |
state.sidebar.opened = true; |
||||
state.sidebar.withoutAnimation = false |
state.sidebar.withoutAnimation = true; |
||||
if (state.sidebar.opened) { |
if (state.sidebar.opened) { |
||||
Cookies.set('sidebarStatus', 1) |
Cookies.set("sidebarStatus", 1); |
||||
} else { |
} else { |
||||
Cookies.set('sidebarStatus', 0) |
Cookies.set("sidebarStatus", 1); |
||||
} |
} |
||||
}, |
}, |
||||
CLOSE_SIDEBAR: (state, withoutAnimation) => { |
CLOSE_SIDEBAR: (state, withoutAnimation) => { |
||||
Cookies.set('sidebarStatus', 0) |
Cookies.set("sidebarStatus", 1); |
||||
state.sidebar.opened = false |
state.sidebar.opened = true; |
||||
state.sidebar.withoutAnimation = withoutAnimation |
state.sidebar.withoutAnimation = false; |
||||
}, |
}, |
||||
TOGGLE_DEVICE: (state, device) => { |
TOGGLE_DEVICE: (state, device) => { |
||||
state.device = device |
state.device = device; |
||||
}, |
}, |
||||
SET_SIZE: (state, size) => { |
SET_SIZE: (state, size) => { |
||||
state.size = size |
state.size = size; |
||||
Cookies.set('size', size) |
Cookies.set("size", size); |
||||
}, |
}, |
||||
SET_SIDEBAR_HIDE: (state, status) => { |
SET_SIDEBAR_HIDE: (state, status) => { |
||||
state.sidebar.hide = status |
state.sidebar.hide = status; |
||||
} |
}, |
||||
} |
}; |
||||
|
|
||||
const actions = { |
const actions = { |
||||
toggleSideBar({ commit }) { |
toggleSideBar({ commit }) { |
||||
commit('TOGGLE_SIDEBAR') |
commit("TOGGLE_SIDEBAR"); |
||||
}, |
}, |
||||
closeSideBar({ commit }, { withoutAnimation }) { |
closeSideBar({ commit }, { withoutAnimation }) { |
||||
commit('CLOSE_SIDEBAR', withoutAnimation) |
commit("CLOSE_SIDEBAR", withoutAnimation); |
||||
}, |
}, |
||||
toggleDevice({ commit }, device) { |
toggleDevice({ commit }, device) { |
||||
commit('TOGGLE_DEVICE', device) |
commit("TOGGLE_DEVICE", device); |
||||
}, |
}, |
||||
setSize({ commit }, size) { |
setSize({ commit }, size) { |
||||
commit('SET_SIZE', size) |
commit("SET_SIZE", size); |
||||
}, |
}, |
||||
toggleSideBarHide({ commit }, status) { |
toggleSideBarHide({ commit }, status) { |
||||
commit('SET_SIDEBAR_HIDE', status) |
commit("SET_SIDEBAR_HIDE", status); |
||||
} |
}, |
||||
} |
}; |
||||
|
|
||||
export default { |
export default { |
||||
namespaced: true, |
namespaced: true, |
||||
state, |
state, |
||||
mutations, |
mutations, |
||||
actions |
actions, |
||||
} |
}; |
||||
|
|||||
@ -1,42 +1,59 @@ |
|||||
import defaultSettings from '@/settings' |
import defaultSettings from "@/settings"; |
||||
|
|
||||
const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle } = defaultSettings |
const { |
||||
|
sideTheme, |
||||
|
showSettings, |
||||
|
topNav, |
||||
|
tagsView, |
||||
|
fixedHeader, |
||||
|
sidebarLogo, |
||||
|
dynamicTitle, |
||||
|
} = defaultSettings; |
||||
|
|
||||
const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || '' |
const storageSetting = JSON.parse(localStorage.getItem("layout-setting")) || ""; |
||||
const state = { |
const state = { |
||||
title: '', |
title: "", |
||||
theme: storageSetting.theme || '#409EFF', |
theme: "#70483E", |
||||
sideTheme: storageSetting.sideTheme || sideTheme, |
sideTheme: storageSetting.sideTheme || sideTheme, |
||||
showSettings: showSettings, |
showSettings: showSettings, |
||||
topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav, |
topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav, |
||||
tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView, |
tagsView: |
||||
fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader, |
storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView, |
||||
sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo, |
fixedHeader: |
||||
dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle |
storageSetting.fixedHeader === undefined |
||||
} |
? fixedHeader |
||||
|
: storageSetting.fixedHeader, |
||||
|
sidebarLogo: |
||||
|
storageSetting.sidebarLogo === undefined |
||||
|
? sidebarLogo |
||||
|
: storageSetting.sidebarLogo, |
||||
|
dynamicTitle: |
||||
|
storageSetting.dynamicTitle === undefined |
||||
|
? dynamicTitle |
||||
|
: storageSetting.dynamicTitle, |
||||
|
}; |
||||
const mutations = { |
const mutations = { |
||||
CHANGE_SETTING: (state, { key, value }) => { |
CHANGE_SETTING: (state, { key, value }) => { |
||||
if (state.hasOwnProperty(key)) { |
if (state.hasOwnProperty(key)) { |
||||
state[key] = value |
state[key] = value; |
||||
} |
} |
||||
} |
}, |
||||
} |
}; |
||||
|
|
||||
const actions = { |
const actions = { |
||||
// 修改布局设置
|
// 修改布局设置
|
||||
changeSetting({ commit }, data) { |
changeSetting({ commit }, data) { |
||||
commit('CHANGE_SETTING', data) |
commit("CHANGE_SETTING", data); |
||||
}, |
}, |
||||
// 设置网页标题
|
// 设置网页标题
|
||||
setTitle({ commit }, title) { |
setTitle({ commit }, title) { |
||||
state.title = title |
state.title = title; |
||||
} |
}, |
||||
} |
}; |
||||
|
|
||||
export default { |
export default { |
||||
namespaced: true, |
namespaced: true, |
||||
state, |
state, |
||||
mutations, |
mutations, |
||||
actions |
actions, |
||||
} |
}; |
||||
|
|
||||
|
|||||
|
After Width: | Height: | Size: 983 KiB |
@ -0,0 +1,261 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="app-container"> |
||||
|
<div class="dis" style="width: 100%"> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">随访队列分布</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<!-- 患者总数统计图 --> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="follow" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">失访原因分布</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<!-- 患者总数统计图 --> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="lossFollow" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from "echarts"; |
||||
|
require("echarts/theme/macarons"); // echarts theme |
||||
|
import resize from "@/views/dashboard/mixins/resize"; |
||||
|
import { sffb, sftj } from "@/api/indexCom.js"; |
||||
|
import { followEcharts, lossFollowEcharts } from "./index"; |
||||
|
export default { |
||||
|
name: "Post", |
||||
|
props: ["title"], |
||||
|
mixins: [resize], |
||||
|
data() { |
||||
|
return { |
||||
|
loading: false, |
||||
|
followValue: [], // |
||||
|
lossFollowValue: [], // |
||||
|
queryParams: { |
||||
|
param: { |
||||
|
startTime: "", |
||||
|
endTime: "", |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
// this.Linepatient() |
||||
|
this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
statistics(_data, _type) { |
||||
|
this.initial(_data, _type); // 处理数据 |
||||
|
this.loading = true; |
||||
|
this.getData(); // 获取数据 |
||||
|
}, |
||||
|
//患者信息 |
||||
|
async getData() { |
||||
|
try { |
||||
|
this.followValue = {}; |
||||
|
await sffb(this.queryParams).then((res) => { |
||||
|
res.data.forEach((i) => { |
||||
|
let data = [i.dsf, i.ljsf, i.cqsf, i.zc]; |
||||
|
this.followValue[i.queueName] = data; |
||||
|
}); |
||||
|
this.handleFollow(); |
||||
|
}); |
||||
|
await sftj(this.queryParams).then((res) => { |
||||
|
this.lossFollowValue = res.data; |
||||
|
this.handleLossFollow(); |
||||
|
}); |
||||
|
this.loading = false; |
||||
|
} catch (e) { |
||||
|
console.log("随访", e); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 队列 |
||||
|
handleFollow() { |
||||
|
followEcharts.series = []; |
||||
|
let colorArr = [ |
||||
|
"#C7BDB1", |
||||
|
"#C6A268", |
||||
|
"#906C4A", |
||||
|
"#70483E", |
||||
|
"#582518", |
||||
|
"#C7BDB1", |
||||
|
"#C6A268", |
||||
|
"#906C4A", |
||||
|
"#70483E", |
||||
|
"#582518", |
||||
|
"#C7BDB1", |
||||
|
"#C6A268", |
||||
|
"#906C4A", |
||||
|
"#70483E", |
||||
|
"#582518", |
||||
|
"#C7BDB1", |
||||
|
"#C6A268", |
||||
|
"#906C4A", |
||||
|
"#70483E", |
||||
|
"#582518", |
||||
|
"#C7BDB1", |
||||
|
"#C6A268", |
||||
|
"#906C4A", |
||||
|
"#70483E", |
||||
|
"#582518", |
||||
|
"#C7BDB1", |
||||
|
"#C6A268", |
||||
|
"#906C4A", |
||||
|
"#70483E", |
||||
|
"#582518", |
||||
|
"#C7BDB1", |
||||
|
"#C6A268", |
||||
|
"#906C4A", |
||||
|
"#70483E", |
||||
|
"#582518", |
||||
|
"#C7BDB1", |
||||
|
"#C6A268", |
||||
|
"#906C4A", |
||||
|
"#70483E", |
||||
|
"#582518", |
||||
|
]; |
||||
|
let index = 0; |
||||
|
for (let key in this.followValue) { |
||||
|
let series = { |
||||
|
name: key, |
||||
|
data: this.followValue[key], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度 |
||||
|
color: colorArr[index], |
||||
|
}; |
||||
|
followEcharts.series.push(series); |
||||
|
index++; |
||||
|
} |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("follow"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(followEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 失访 |
||||
|
handleLossFollow() { |
||||
|
lossFollowEcharts.series[0].data = this.lossFollowValue?.map((item) => { |
||||
|
return item.num; |
||||
|
}); |
||||
|
lossFollowEcharts.xAxis.data = this.lossFollowValue?.map((item) => { |
||||
|
return item.reason; |
||||
|
}); |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init( |
||||
|
document.getElementById("lossFollow"), |
||||
|
null, |
||||
|
{ |
||||
|
height: 300, |
||||
|
} |
||||
|
); |
||||
|
myChart.setOption(lossFollowEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 数据处理 查询类型判断参数 |
||||
|
initial(_data, _type) { |
||||
|
_data[0] = this.$moment(_data[0]).format("YYYY-MM-DD"); |
||||
|
_data[1] = this.$moment(_data[1]).format("YYYY-MM-DD"); |
||||
|
this.queryParams.param = { |
||||
|
startTime: _data[0] + " " + "00:00:00", |
||||
|
endTime: _data[1] + " " + "23:59:59", |
||||
|
}; |
||||
|
}, |
||||
|
// 重新渲染图标 |
||||
|
getRenew() { |
||||
|
this.handleFollow(); |
||||
|
this.handleLossFollow(); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped src="@/assets/styles/common.css"></style> |
||||
|
<style scoped> |
||||
|
>>> .el-card__body { |
||||
|
padding: 10px 0 !important; |
||||
|
} |
||||
|
|
||||
|
.dis { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.header-title { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.title-box { |
||||
|
padding: 10px 20px; |
||||
|
border-bottom: 1px solid #dfe6ec; |
||||
|
} |
||||
|
|
||||
|
.dian-box { |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.dian { |
||||
|
display: inline-block; |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
border-radius: 50%; |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.title-box { |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
. >>> .el-radio--small.is-bordered { |
||||
|
margin-right: 20px !important; |
||||
|
margin-left: 0 !important; |
||||
|
} |
||||
|
|
||||
|
>>> .el-radio__input { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
>>> .el-radio__label { |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
|
||||
|
.app-container { |
||||
|
padding: 0; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 20px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.title-bor { |
||||
|
display: inline-block; |
||||
|
height: 20px; |
||||
|
width: 6px; |
||||
|
background: #4f8bff; |
||||
|
margin-right: 10px; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 2.5 KiB |
File diff suppressed because it is too large
@ -0,0 +1,374 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<!-- |
||||
|
1 抑郁情绪 0：无；1：只在问到时才诉述；2：在访谈中自发地表达；3：从表情、姿势、声音中流露；4：几乎完全表现为这种情绪 |
||||
|
2 有罪感 0：无；1：责备自己，感到连累他人；2：认为自己犯了罪；3：认为疾病是惩罚；4：罪恶妄想伴有幻觉 |
||||
|
3 自杀 0：无；1：觉得活着没有意义；2：希望死去；3：有自杀念头；4：有自杀行为 |
||||
|
4 入睡困难 0：无；1：有时入睡困难；2：每晚入睡困难 |
||||
|
5 睡眠不深 0：无；1：睡眠浅多恶梦；2：半夜醒来 |
||||
|
6 早醒 0：无；1：早醒但能重新入睡；2：早醒后无法重新入睡 |
||||
|
7 工作和兴趣 0：无困难；1：提问时才诉述；2：自发表达对活动失去兴趣；3：病室劳动或娱乐不满3小时；4：停止工作或无法完成日常事务 |
||||
|
8 迟缓 0：无；1：提问时才诉述；2：自发表达迟缓；3：明显迟缓；4：完全迟缓 |
||||
|
9 激越 0：无；1：有些心神不宁；2：明显心神不宁；3：不能静坐；4：严重激越 |
||||
|
10 精神性焦虑 0：无；1：问时诉述；2：自发表达；3：明显忧虑；4：明显惊恐 |
||||
|
11 躯体性焦虑 0：无；1：轻度；2：中度；3：重度；4：严重影响生活 |
||||
|
12 胃肠道症状 0：无；1：食欲减退；2：进食需他人催促；3：需用泻药或助消化药 |
||||
|
13 全身症状 0：无；1：轻度；2：明显 |
||||
|
14 性症状 0：无；1：轻度；2：重度；3：不适合或不能肯定 |
||||
|
15 疑病 0：无；1：对身体过分关注；2：反复考虑健康问题；3：有疑病妄想；4：伴有幻觉的疑病妄想 |
||||
|
16 体重减轻 0：无；1：可能有体重减轻；2：肯定体重减轻 |
||||
|
17 自知力 0：知道自己有病；1：归咎于其他原因；2：完全否认有病 |
||||
|
18 认知障碍 0：无；1：轻度；2：中度；3：重度；4：极重度 |
||||
|
19 日夜变化 0：无；1：有日夜变化 |
||||
|
20 人格解体 0：无；1：轻度；2：中度；3：重度；4：极重度 |
||||
|
21 偏执症状 0：无；1：轻度；2：中度；3：重度；4：极重度 |
||||
|
22 强迫症状 0：无；1：轻度；2：中度；3：重度；4：极重度 |
||||
|
23 躯体化症状 0：无；1：轻度；2：中度；3：重度；4：极重度 |
||||
|
24 社交退缩 0：无；1：轻度；2：中度；3：重度；4：极重度 |
||||
|
--> |
||||
|
<div> |
||||
|
<div |
||||
|
class="item-container" |
||||
|
v-for="(item, index) in questions" |
||||
|
:key="index" |
||||
|
> |
||||
|
<div class="item-title">{{ item.index }}. {{ item.question }}</div> |
||||
|
<div class="item-radio-box"> |
||||
|
<el-radio-group v-model="form[`topic${item.index}`]"> |
||||
|
<el-radio |
||||
|
v-for="(criteria, index) in item.criteria" |
||||
|
:key="index" |
||||
|
:label="criteria.value" |
||||
|
>{{ criteria.label }} |
||||
|
</el-radio> |
||||
|
</el-radio-group> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="submit-box"> |
||||
|
<el-button type="primary" class="submit-box-but" @click="submitForm" |
||||
|
>提交</el-button |
||||
|
> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "phq", |
||||
|
props: ["scaleCode"], |
||||
|
data() { |
||||
|
return { |
||||
|
form: {}, |
||||
|
questions: [ |
||||
|
{ |
||||
|
index: 1, |
||||
|
question: "抑郁情绪", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "只在问到时才诉述", value: 1 }, |
||||
|
{ label: "在访谈中自发地表达", value: 2 }, |
||||
|
{ label: "从表情、姿势、声音中流露", value: 3 }, |
||||
|
{ label: "几乎完全表现为这种情绪", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 2, |
||||
|
question: "有罪感", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "责备自己，感到连累他人", value: 1 }, |
||||
|
{ label: "认为自己犯了罪", value: 2 }, |
||||
|
{ label: "认为疾病是惩罚", value: 3 }, |
||||
|
{ label: "罪恶妄想伴有幻觉", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 3, |
||||
|
question: "自杀", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "觉得活着没有意义", value: 1 }, |
||||
|
{ label: "希望死去", value: 2 }, |
||||
|
{ label: "有自杀念头", value: 3 }, |
||||
|
{ label: "有自杀行为", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 4, |
||||
|
question: "入睡困难", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "有时入睡困难", value: 1 }, |
||||
|
{ label: "每晚入睡困难", value: 2 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 5, |
||||
|
question: "睡眠不深", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "睡眠浅多恶梦", value: 1 }, |
||||
|
{ label: "半夜醒来", value: 2 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 6, |
||||
|
question: "早醒", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "早醒但能重新入睡", value: 1 }, |
||||
|
{ label: "早醒后无法重新入睡", value: 2 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 7, |
||||
|
question: "工作和兴趣", |
||||
|
criteria: [ |
||||
|
{ label: "无困难", value: 0 }, |
||||
|
{ label: "提问时才诉述", value: 1 }, |
||||
|
{ label: "自发表达对活动失去兴趣", value: 2 }, |
||||
|
{ label: "病室劳动或娱乐不满3小时", value: 3 }, |
||||
|
{ label: "停止工作或无法完成日常事务", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 8, |
||||
|
question: "迟缓", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "提问时才诉述", value: 1 }, |
||||
|
{ label: "自发表达迟缓", value: 2 }, |
||||
|
{ label: "明显迟缓", value: 3 }, |
||||
|
{ label: "完全迟缓", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 9, |
||||
|
question: "激越", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "有些心神不宁", value: 1 }, |
||||
|
{ label: "明显心神不宁", value: 2 }, |
||||
|
{ label: "不能静坐", value: 3 }, |
||||
|
{ label: "严重激越", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 10, |
||||
|
question: "精神性焦虑", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "问时诉述", value: 1 }, |
||||
|
{ label: "自发表达", value: 2 }, |
||||
|
{ label: "明显忧虑", value: 3 }, |
||||
|
{ label: "明显惊恐", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 11, |
||||
|
question: "躯体性焦虑", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "轻度", value: 1 }, |
||||
|
{ label: "中度", value: 2 }, |
||||
|
{ label: "重度", value: 3 }, |
||||
|
{ label: "严重影响生活", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 12, |
||||
|
question: "胃肠道症状", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "食欲减退", value: 1 }, |
||||
|
{ label: "进食需他人催促", value: 2 }, |
||||
|
{ label: "需用泻药或助消化药", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 13, |
||||
|
question: "全身症状", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "轻度", value: 1 }, |
||||
|
{ label: "明显", value: 2 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 14, |
||||
|
question: "性症状", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "轻度", value: 1 }, |
||||
|
{ label: "重度", value: 2 }, |
||||
|
{ label: "不适合或不能肯定", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 15, |
||||
|
question: "疑病", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "对身体过分关注", value: 1 }, |
||||
|
{ label: "反复考虑健康问题", value: 2 }, |
||||
|
{ label: "有疑病妄想", value: 3 }, |
||||
|
{ label: "伴有幻觉的疑病妄想", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 16, |
||||
|
question: "体重减轻", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "可能有体重减轻", value: 1 }, |
||||
|
{ label: "肯定体重减轻", value: 2 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 17, |
||||
|
question: "自知力", |
||||
|
criteria: [ |
||||
|
{ label: "知道自己有病", value: 0 }, |
||||
|
{ label: "归咎于其他原因", value: 1 }, |
||||
|
{ label: "完全否认有病", value: 2 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 18, |
||||
|
question: "认知障碍", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "轻度", value: 1 }, |
||||
|
{ label: "中度", value: 2 }, |
||||
|
{ label: "重度", value: 3 }, |
||||
|
{ label: "极重度", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 19, |
||||
|
question: "日夜变化", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "有日夜变化", value: 1 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 20, |
||||
|
question: "人格解体", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "轻度", value: 1 }, |
||||
|
{ label: "中度", value: 2 }, |
||||
|
{ label: "重度", value: 3 }, |
||||
|
{ label: "极重度", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 21, |
||||
|
question: "偏执症状", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "轻度", value: 1 }, |
||||
|
{ label: "中度", value: 2 }, |
||||
|
{ label: "重度", value: 3 }, |
||||
|
{ label: "极重度", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 22, |
||||
|
question: "强迫症状", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "轻度", value: 1 }, |
||||
|
{ label: "中度", value: 2 }, |
||||
|
{ label: "重度", value: 3 }, |
||||
|
{ label: "极重度", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 23, |
||||
|
question: "躯体化症状", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "轻度", value: 1 }, |
||||
|
{ label: "中度", value: 2 }, |
||||
|
{ label: "重度", value: 3 }, |
||||
|
{ label: "极重度", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 24, |
||||
|
question: "社交退缩", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "轻度", value: 1 }, |
||||
|
{ label: "中度", value: 2 }, |
||||
|
{ label: "重度", value: 3 }, |
||||
|
{ label: "极重度", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
], |
||||
|
scaleData: {}, |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.treatmentId = this.$route.query.treatmentId; // 诊疗id |
||||
|
let scaleData = localStorage.getItem("scaleData"); // 获取上次填写的数据 |
||||
|
// 如果scaleData存在，则解析成对象，否则创建一个空对象 |
||||
|
this.scaleData = scaleData |
||||
|
? JSON.parse(scaleData) |
||||
|
: { |
||||
|
[this.treatmentId]: {}, |
||||
|
}; |
||||
|
|
||||
|
// 如果scaleData[this.treatmentId]不存在，则创建一个空对象 |
||||
|
if (!this.scaleData[this.treatmentId]) { |
||||
|
this.scaleData[this.treatmentId] = {}; |
||||
|
} |
||||
|
this.form = this.scaleData[this.treatmentId][this.scaleCode] || {}; // 将上次填写的数据赋值给form |
||||
|
}, |
||||
|
methods: { |
||||
|
submitForm() { |
||||
|
let score = 0; |
||||
|
// 计算总分, topic${i}属性不一定存在，先校验是否存在 |
||||
|
for (let i = 1; i <= 24; i++) { |
||||
|
if (this.form[`topic${i}`] !== undefined) { |
||||
|
score += this.form[`topic${i}`]; |
||||
|
} |
||||
|
} |
||||
|
// 存储数据 |
||||
|
this.scaleData[this.treatmentId][this.scaleCode] = this.form; |
||||
|
localStorage.setItem("scaleData", JSON.stringify(this.scaleData)); |
||||
|
// 将数据传递给父组件 |
||||
|
this.$emit("getScaleResult", score, this.scaleCode); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped src="@/assets/styles/common.css"></style> |
||||
|
|
||||
|
<style scoped> |
||||
|
.item-title { |
||||
|
font-size: 20px; |
||||
|
font-weight: bold; |
||||
|
color: #3d3d3d; |
||||
|
line-height: 26px; |
||||
|
} |
||||
|
.item-radio-box { |
||||
|
margin: 16px 0px; |
||||
|
} |
||||
|
>>> .el-radio__label { |
||||
|
font-size: 18px; |
||||
|
color: #555555; |
||||
|
line-height: 20px; |
||||
|
} |
||||
|
.submit-box { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
.submit-box-but { |
||||
|
width: 200px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,323 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<!-- |
||||
|
1 我觉得比平常容易紧张和着急（焦虑） 1：没有或很少时间；2：小部分时间；3：相当多时间；4：绝大部分或全部时间 |
||||
|
2 我无缘无故地感到害怕（害怕） 1：没有或很少时间；2：小部分时间；3：相当多时间；4：绝大部分或全部时间 |
||||
|
3 我容易心里烦乱或觉得惊恐（惊恐） 1：没有或很少时间；2：小部分时间；3：相当多时间；4：绝大部分或全部时间 |
||||
|
4 我觉得我可能将要发疯（发疯感） 1：没有或很少时间；2：小部分时间；3：相当多时间；4：绝大部分或全部时间 |
||||
|
5 我觉得一切都很好，也不会发生什么不幸（不幸预感） 4：没有或很少时间；3：小部分时间；2：相当多时间；1：绝大部分或全部时间 |
||||
|
6 我手脚发抖打颤（手足颤抖） 1：没有或很少时间；2：小部分时间；3：相当多时间；4：绝大部分或全部时间 |
||||
|
7 我因为头痛、头颈痛和背痛而苦恼（躯体疼痛） 1：没有或很少时间；2：小部分时间；3：相当多时间；4：绝大部分或全部时间 |
||||
|
8 我感觉容易衰弱和疲乏（乏力） 1：没有或很少时间；2：小部分时间；3：相当多时间；4：绝大部分或全部时间 |
||||
|
9 我觉得心平气和，并且容易安静坐着（静坐不能） 4：没有或很少时间；3：小部分时间；2：相当多时间；1：绝大部分或全部时间 |
||||
|
10 我觉得心跳得很快（心悸） 1：没有或很少时间；2：小部分时间；3：相当多时间；4：绝大部分或全部时间 |
||||
|
11 我因为一阵阵头晕而苦恼（头晕） 1：没有或很少时间；2：小部分时间；3：相当多时间；4：绝大部分或全部时间 |
||||
|
12 我有晕倒发作或觉得要晕倒似的（晕厥感） 1：没有或很少时间；2：小部分时间；3：相当多时间；4：绝大部分或全部时间 |
||||
|
13 我呼气、吸气都感到很容易（呼吸困难） 4：没有或很少时间；3：小部分时间；2：相当多时间；1：绝大部分或全部时间 |
||||
|
14 我手脚麻木和刺痛（手足刺痛） 1：没有或很少时间；2：小部分时间；3：相当多时间；4：绝大部分或全部时间 |
||||
|
15 我因为胃痛和消化不良而苦恼（胃痛，消化不良） 1：没有或很少时间；2：小部分时间；3：相当多时间；4：绝大部分或全部时间 |
||||
|
16 我常常要小便（尿意频数） 1：没有或很少时间；2：小部分时间；3：相当多时间；4：绝大部分或全部时间 |
||||
|
17 我的手常常是干燥温暖的（多汗） 4：没有或很少时间；3：小部分时间；2：相当多时间；1：绝大部分或全部时间 |
||||
|
18 我脸红发热（面部潮红） 1：没有或很少时间；2：小部分时间；3：相当多时间；4：绝大部分或全部时间 |
||||
|
19 我容易入睡，并且一夜睡得很好（睡眠障碍） 4：没有或很少时间；3：小部分时间；2：相当多时间；1：绝大部分或全部时间 |
||||
|
20 我做噩梦（噩梦） 1：没有或很少时间；2：小部分时间；3：相当多时间；4：绝大部分或全部时间 |
||||
|
--> |
||||
|
<div> |
||||
|
<div |
||||
|
class="item-container" |
||||
|
v-for="(item, index) in questions" |
||||
|
:key="index" |
||||
|
> |
||||
|
<div class="item-title">{{ item.index }}. {{ item.question }}</div> |
||||
|
<div class="item-radio-box"> |
||||
|
<el-radio-group v-model="form[`topic${item.index}`]"> |
||||
|
<el-radio |
||||
|
v-for="(criteria, index) in item.criteria" |
||||
|
:key="index" |
||||
|
:label="criteria.value" |
||||
|
>{{ criteria.label }} |
||||
|
</el-radio> |
||||
|
</el-radio-group> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="submit-box"> |
||||
|
<el-button type="primary" class="submit-box-but" @click="submitForm" |
||||
|
>提交</el-button |
||||
|
> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "phq", |
||||
|
props: ["scaleCode"], |
||||
|
data() { |
||||
|
return { |
||||
|
form: {}, |
||||
|
questions: [ |
||||
|
{ |
||||
|
index: 1, |
||||
|
question: "我觉得比平常容易紧张和着急（焦虑）", |
||||
|
criteria: [ |
||||
|
{ label: "没有或很少时间", value: 1 }, |
||||
|
{ label: "小部分时间", value: 2 }, |
||||
|
{ label: "相当多时间", value: 3 }, |
||||
|
{ label: "绝大部分或全部时间", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 2, |
||||
|
question: "我无缘无故地感到害怕（害怕）", |
||||
|
criteria: [ |
||||
|
{ label: "没有或很少时间", value: 1 }, |
||||
|
{ label: "小部分时间", value: 2 }, |
||||
|
{ label: "相当多时间", value: 3 }, |
||||
|
{ label: "绝大部分或全部时间", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 3, |
||||
|
question: "我容易心里烦乱或觉得惊恐（惊恐）", |
||||
|
criteria: [ |
||||
|
{ label: "没有或很少时间", value: 1 }, |
||||
|
{ label: "小部分时间", value: 2 }, |
||||
|
{ label: "相当多时间", value: 3 }, |
||||
|
{ label: "绝大部分或全部时间", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 4, |
||||
|
question: "我觉得我可能将要发疯（发疯感）", |
||||
|
criteria: [ |
||||
|
{ label: "没有或很少时间", value: 1 }, |
||||
|
{ label: "小部分时间", value: 2 }, |
||||
|
{ label: "相当多时间", value: 3 }, |
||||
|
{ label: "绝大部分或全部时间", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 5, |
||||
|
question: "我觉得一切都很好，也不会发生什么不幸（不幸预感）", |
||||
|
criteria: [ |
||||
|
{ label: "没有或很少时间", value: 4 }, |
||||
|
{ label: "小部分时间", value: 3 }, |
||||
|
{ label: "相当多时间", value: 2 }, |
||||
|
{ label: "绝大部分或全部时间", value: 1 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 6, |
||||
|
question: "我手脚发抖打颤（手足颤抖）", |
||||
|
criteria: [ |
||||
|
{ label: "没有或很少时间", value: 1 }, |
||||
|
{ label: "小部分时间", value: 2 }, |
||||
|
{ label: "相当多时间", value: 3 }, |
||||
|
{ label: "绝大部分或全部时间", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 7, |
||||
|
question: "我因为头痛、头颈痛和背痛而苦恼（躯体疼痛）", |
||||
|
criteria: [ |
||||
|
{ label: "没有或很少时间", value: 1 }, |
||||
|
{ label: "小部分时间", value: 2 }, |
||||
|
{ label: "相当多时间", value: 3 }, |
||||
|
{ label: "绝大部分或全部时间", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 8, |
||||
|
question: "我感觉容易衰弱和疲乏（乏力）", |
||||
|
criteria: [ |
||||
|
{ label: "没有或很少时间", value: 1 }, |
||||
|
{ label: "小部分时间", value: 2 }, |
||||
|
{ label: "相当多时间", value: 3 }, |
||||
|
{ label: "绝大部分或全部时间", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 9, |
||||
|
question: "我觉得心平气和，并且容易安静坐着（静坐不能）", |
||||
|
criteria: [ |
||||
|
{ label: "没有或很少时间", value: 4 }, |
||||
|
{ label: "小部分时间", value: 3 }, |
||||
|
{ label: "相当多时间", value: 2 }, |
||||
|
{ label: "绝大部分或全部时间", value: 1 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 10, |
||||
|
question: "我觉得心跳得很快（心悸）", |
||||
|
criteria: [ |
||||
|
{ label: "没有或很少时间", value: 1 }, |
||||
|
{ label: "小部分时间", value: 2 }, |
||||
|
{ label: "相当多时间", value: 3 }, |
||||
|
{ label: "绝大部分或全部时间", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 11, |
||||
|
question: "我因为一阵阵头晕而苦恼（头晕）", |
||||
|
criteria: [ |
||||
|
{ label: "没有或很少时间", value: 1 }, |
||||
|
{ label: "小部分时间", value: 2 }, |
||||
|
{ label: "相当多时间", value: 3 }, |
||||
|
{ label: "绝大部分或全部时间", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 12, |
||||
|
question: "我有晕倒发作或觉得要晕倒似的（晕厥感）", |
||||
|
criteria: [ |
||||
|
{ label: "没有或很少时间", value: 1 }, |
||||
|
{ label: "小部分时间", value: 2 }, |
||||
|
{ label: "相当多时间", value: 3 }, |
||||
|
{ label: "绝大部分或全部时间", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 13, |
||||
|
question: "我呼气、吸气都感到很容易（呼吸困难）", |
||||
|
criteria: [ |
||||
|
{ label: "没有或很少时间", value: 4 }, |
||||
|
{ label: "小部分时间", value: 3 }, |
||||
|
{ label: "相当多时间", value: 2 }, |
||||
|
{ label: "绝大部分或全部时间", value: 1 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 14, |
||||
|
question: "我手脚麻木和刺痛（手足刺痛）", |
||||
|
criteria: [ |
||||
|
{ label: "没有或很少时间", value: 1 }, |
||||
|
{ label: "小部分时间", value: 2 }, |
||||
|
{ label: "相当多时间", value: 3 }, |
||||
|
{ label: "绝大部分或全部时间", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 15, |
||||
|
question: "我因为胃痛和消化不良而苦恼（胃痛，消化不良）", |
||||
|
criteria: [ |
||||
|
{ label: "没有或很少时间", value: 1 }, |
||||
|
{ label: "小部分时间", value: 2 }, |
||||
|
{ label: "相当多时间", value: 3 }, |
||||
|
{ label: "绝大部分或全部时间", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 16, |
||||
|
question: "我常常要小便（尿意频数）", |
||||
|
criteria: [ |
||||
|
{ label: "没有或很少时间", value: 1 }, |
||||
|
{ label: "小部分时间", value: 2 }, |
||||
|
{ label: "相当多时间", value: 3 }, |
||||
|
{ label: "绝大部分或全部时间", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 17, |
||||
|
question: "我的手常常是干燥温暖的（多汗）", |
||||
|
criteria: [ |
||||
|
{ label: "没有或很少时间", value: 4 }, |
||||
|
{ label: "小部分时间", value: 3 }, |
||||
|
{ label: "相当多时间", value: 2 }, |
||||
|
{ label: "绝大部分或全部时间", value: 1 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 18, |
||||
|
question: "我脸红发热（面部潮红）", |
||||
|
criteria: [ |
||||
|
{ label: "没有或很少时间", value: 1 }, |
||||
|
{ label: "小部分时间", value: 2 }, |
||||
|
{ label: "相当多时间", value: 3 }, |
||||
|
{ label: "绝大部分或全部时间", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 19, |
||||
|
question: "我容易入睡，并且一夜睡得很好（睡眠障碍）", |
||||
|
criteria: [ |
||||
|
{ label: "没有或很少时间", value: 4 }, |
||||
|
{ label: "小部分时间", value: 3 }, |
||||
|
{ label: "相当多时间", value: 2 }, |
||||
|
{ label: "绝大部分或全部时间", value: 1 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 20, |
||||
|
question: "我做噩梦（噩梦）", |
||||
|
criteria: [ |
||||
|
{ label: "没有或很少时间", value: 1 }, |
||||
|
{ label: "小部分时间", value: 2 }, |
||||
|
{ label: "相当多时间", value: 3 }, |
||||
|
{ label: "绝大部分或全部时间", value: 4 }, |
||||
|
], |
||||
|
}, |
||||
|
], |
||||
|
scaleData: {}, |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.treatmentId = this.$route.query.treatmentId; // 诊疗id |
||||
|
let scaleData = localStorage.getItem("scaleData"); // 获取上次填写的数据 |
||||
|
// 如果scaleData存在，则解析成对象，否则创建一个空对象 |
||||
|
this.scaleData = scaleData |
||||
|
? JSON.parse(scaleData) |
||||
|
: { |
||||
|
[this.treatmentId]: {}, |
||||
|
}; |
||||
|
|
||||
|
// 如果scaleData[this.treatmentId]不存在，则创建一个空对象 |
||||
|
if (!this.scaleData[this.treatmentId]) { |
||||
|
this.scaleData[this.treatmentId] = {}; |
||||
|
} |
||||
|
this.form = this.scaleData[this.treatmentId][this.scaleCode] || {}; // 将上次填写的数据赋值给form |
||||
|
}, |
||||
|
methods: { |
||||
|
submitForm() { |
||||
|
let score = 0; |
||||
|
// 计算总分, topic${i}属性不一定存在，先校验是否存在 |
||||
|
for (let i = 1; i <= 20; i++) { |
||||
|
if (this.form[`topic${i}`] !== undefined) { |
||||
|
score += this.form[`topic${i}`]; |
||||
|
} |
||||
|
} |
||||
|
// 存储数据 |
||||
|
this.scaleData[this.treatmentId][this.scaleCode] = this.form; |
||||
|
localStorage.setItem("scaleData", JSON.stringify(this.scaleData)); |
||||
|
// 将数据传递给父组件 |
||||
|
this.$emit("getScaleResult", score, this.scaleCode); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped src="@/assets/styles/common.css"></style> |
||||
|
|
||||
|
<style scoped> |
||||
|
.item-title { |
||||
|
font-size: 20px; |
||||
|
font-weight: bold; |
||||
|
color: #3d3d3d; |
||||
|
line-height: 26px; |
||||
|
} |
||||
|
.item-radio-box { |
||||
|
margin: 16px 0px; |
||||
|
} |
||||
|
>>> .el-radio__label { |
||||
|
font-size: 18px; |
||||
|
color: #555555; |
||||
|
line-height: 20px; |
||||
|
} |
||||
|
.submit-box { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
.submit-box-but { |
||||
|
width: 200px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,202 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<!-- |
||||
|
分值范围 |
||||
|
● 评分方法：每个条目根据症状频率评分，0分表示“完全没有”，1分表示“有几天”，2分表示“七天以上”，3分表示“接近每天”。总分范围为0~27分。 |
||||
|
● 分值意义： |
||||
|
○ 0~4分：无或极轻微的抑郁症状。 |
||||
|
○ 5~9分：轻度抑郁。 |
||||
|
○ 10~14分：中度抑郁。 |
||||
|
○ 15~19分：中重度抑郁。 |
||||
|
○ 20~27分：重度抑郁。 |
||||
|
--> |
||||
|
<div> |
||||
|
<div |
||||
|
class="item-container" |
||||
|
v-for="(item, index) in questions" |
||||
|
:key="index" |
||||
|
> |
||||
|
<div class="item-title">{{ item.index }}. {{ item.question }}</div> |
||||
|
<div class="item-radio-box"> |
||||
|
<el-radio-group v-model="form[`topic${item.index}`]"> |
||||
|
<el-radio |
||||
|
v-for="(criteria, index) in item.criteria" |
||||
|
:key="index" |
||||
|
:label="criteria.value" |
||||
|
>{{ criteria.label }} |
||||
|
</el-radio> |
||||
|
</el-radio-group> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="submit-box"> |
||||
|
<el-button class="submit-box-but" type="primary" @click="submitForm" |
||||
|
>提交</el-button |
||||
|
> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "PHQ9", |
||||
|
props: ["scaleCode"], |
||||
|
data() { |
||||
|
return { |
||||
|
form: {}, |
||||
|
questions: [ |
||||
|
{ |
||||
|
index: 1, |
||||
|
question: "做任何事都觉得沉闷或者根本不想做任何事", |
||||
|
criteria: [ |
||||
|
{ label: "完全没有", value: 0 }, |
||||
|
{ label: "有几天", value: 1 }, |
||||
|
{ label: "七天以上", value: 2 }, |
||||
|
{ label: "接近每天", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 2, |
||||
|
question: "情绪低落、忧郁或绝望", |
||||
|
criteria: [ |
||||
|
{ label: "完全没有", value: 0 }, |
||||
|
{ label: "有几天", value: 1 }, |
||||
|
{ label: "七天以上", value: 2 }, |
||||
|
{ label: "接近每天", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 3, |
||||
|
question: "难于入睡、半夜会醒，或相反，睡觉时间过多", |
||||
|
criteria: [ |
||||
|
{ label: "完全没有", value: 0 }, |
||||
|
{ label: "有几天", value: 1 }, |
||||
|
{ label: "七天以上", value: 2 }, |
||||
|
{ label: "接近每天", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 4, |
||||
|
question: "觉得疲倦或没有精力", |
||||
|
criteria: [ |
||||
|
{ label: "完全没有", value: 0 }, |
||||
|
{ label: "有几天", value: 1 }, |
||||
|
{ label: "七天以上", value: 2 }, |
||||
|
{ label: "接近每天", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 5, |
||||
|
question: "胃口不好或饮食过量", |
||||
|
criteria: [ |
||||
|
{ label: "完全没有", value: 0 }, |
||||
|
{ label: "有几天", value: 1 }, |
||||
|
{ label: "七天以上", value: 2 }, |
||||
|
{ label: "接近每天", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 6, |
||||
|
question: "觉得自己做得不好、对自己失望或有负家人期望", |
||||
|
criteria: [ |
||||
|
{ label: "完全没有", value: 0 }, |
||||
|
{ label: "有几天", value: 1 }, |
||||
|
{ label: "七天以上", value: 2 }, |
||||
|
{ label: "接近每天", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 7, |
||||
|
question: "难于集中精神做事，例如看报纸或看电视", |
||||
|
criteria: [ |
||||
|
{ label: "完全没有", value: 0 }, |
||||
|
{ label: "有几天", value: 1 }, |
||||
|
{ label: "七天以上", value: 2 }, |
||||
|
{ label: "接近每天", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 8, |
||||
|
question: |
||||
|
"其它人可能会注意到您在动或说话的时候比平时慢；或者相反，您坐立不安，比起平时有多余的身体动作", |
||||
|
criteria: [ |
||||
|
{ label: "完全没有", value: 0 }, |
||||
|
{ label: "有几天", value: 1 }, |
||||
|
{ label: "七天以上", value: 2 }, |
||||
|
{ label: "接近每天", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 9, |
||||
|
question: "想到自己不如死了算了，或者有自残的念头", |
||||
|
criteria: [ |
||||
|
{ label: "完全没有", value: 0 }, |
||||
|
{ label: "有几天", value: 1 }, |
||||
|
{ label: "七天以上", value: 2 }, |
||||
|
{ label: "接近每天", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
], |
||||
|
scaleData: {}, |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.treatmentId = this.$route.query.treatmentId; // 诊疗id |
||||
|
let scaleData = localStorage.getItem("scaleData"); // 获取上次填写的数据 |
||||
|
// 如果scaleData存在，则解析成对象，否则创建一个空对象 |
||||
|
this.scaleData = scaleData |
||||
|
? JSON.parse(scaleData) |
||||
|
: { |
||||
|
[this.treatmentId]: {}, |
||||
|
}; |
||||
|
|
||||
|
// 如果scaleData[this.treatmentId]不存在，则创建一个空对象 |
||||
|
if (!this.scaleData[this.treatmentId]) { |
||||
|
this.scaleData[this.treatmentId] = {}; |
||||
|
} |
||||
|
this.form = this.scaleData[this.treatmentId][this.scaleCode] || {}; // 将上次填写的数据赋值给form |
||||
|
}, |
||||
|
methods: { |
||||
|
submitForm() { |
||||
|
let score = 0; |
||||
|
// 计算总分, topic${i}属性不一定存在，先校验是否存在 |
||||
|
for (let i = 1; i <= 9; i++) { |
||||
|
if (this.form[`topic${i}`] !== undefined) { |
||||
|
score += this.form[`topic${i}`]; |
||||
|
} |
||||
|
} |
||||
|
// 存储数据 |
||||
|
this.scaleData[this.treatmentId][this.scaleCode] = this.form; |
||||
|
localStorage.setItem("scaleData", JSON.stringify(this.scaleData)); |
||||
|
// 将数据传递给父组件 |
||||
|
this.$emit("getScaleResult", score, this.scaleCode); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped src="@/assets/styles/common.css"></style> |
||||
|
|
||||
|
<style scoped> |
||||
|
.item-title { |
||||
|
font-size: 20px; |
||||
|
font-weight: bold; |
||||
|
color: #3d3d3d; |
||||
|
line-height: 26px; |
||||
|
} |
||||
|
.item-radio-box { |
||||
|
margin: 16px 0px; |
||||
|
} |
||||
|
>>> .el-radio__label { |
||||
|
font-size: 18px; |
||||
|
color: #555555; |
||||
|
line-height: 20px; |
||||
|
} |
||||
|
.submit-box { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
.submit-box-but { |
||||
|
width: 200px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,171 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div> |
||||
|
<div |
||||
|
class="item-container" |
||||
|
v-for="(item, index) in questions" |
||||
|
:key="index" |
||||
|
> |
||||
|
<div class="item-title">{{ item.index }}. {{ item.question }}</div> |
||||
|
<div class="item-radio-box"> |
||||
|
<el-radio-group v-model="form[`topic${item.index}`]"> |
||||
|
<el-radio |
||||
|
v-for="(criteria, index) in item.criteria" |
||||
|
:key="index" |
||||
|
:label="criteria.value" |
||||
|
>{{ criteria.label }} |
||||
|
</el-radio> |
||||
|
</el-radio-group> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="submit-box"> |
||||
|
<el-button class="submit-box-but" type="primary" @click="submitForm" |
||||
|
>提交</el-button |
||||
|
> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "PHQ9", |
||||
|
props: ["scaleCode"], |
||||
|
data() { |
||||
|
return { |
||||
|
form: {}, |
||||
|
questions: [ |
||||
|
{ |
||||
|
index: 1, |
||||
|
question: "睡眠质量-总体评价睡眠质量", |
||||
|
criteria: [ |
||||
|
{ label: "很好", value: 0 }, |
||||
|
{ label: "较好", value: 1 }, |
||||
|
{ label: "较差", value: 2 }, |
||||
|
{ label: "很差", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 2, |
||||
|
question: "入睡时间-从上床到入睡的时间", |
||||
|
criteria: [ |
||||
|
{ label: "≤15分钟", value: 0 }, |
||||
|
{ label: "16~30分钟", value: 1 }, |
||||
|
{ label: "31~60分钟", value: 2 }, |
||||
|
{ label: "≥60分钟", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 3, |
||||
|
question: "睡眠时间-每晚实际睡眠时间", |
||||
|
criteria: [ |
||||
|
{ label: ">7小时", value: 0 }, |
||||
|
{ label: "6~7小时", value: 1 }, |
||||
|
{ label: "5~6小时", value: 2 }, |
||||
|
{ label: "<5小时", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 4, |
||||
|
question: "睡眠效率-睡眠时间与床上时间的比例", |
||||
|
criteria: [ |
||||
|
{ label: ">85%", value: 0 }, |
||||
|
{ label: "75%~84%", value: 1 }, |
||||
|
{ label: "65%~74%", value: 2 }, |
||||
|
{ label: "<65%", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 5, |
||||
|
question: "睡眠障碍-夜间醒来、呼吸困难、噩梦等", |
||||
|
criteria: [ |
||||
|
{ label: "每项无", value: 0 }, |
||||
|
{ label: "<1次/周", value: 1 }, |
||||
|
{ label: "1~2次/周", value: 2 }, |
||||
|
{ label: "≥3次/周", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 6, |
||||
|
question: "催眠药物-使用催眠药物的频率", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "<1次/周", value: 1 }, |
||||
|
{ label: "1~2次/周", value: 2 }, |
||||
|
{ label: "≥3次/周", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 7, |
||||
|
question: "日间功能障碍-白天困倦、注意力不集中等", |
||||
|
criteria: [ |
||||
|
{ label: "无", value: 0 }, |
||||
|
{ label: "<1次/周", value: 1 }, |
||||
|
{ label: "1~2次/周", value: 2 }, |
||||
|
{ label: "≥3次/周", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
], |
||||
|
scaleData: {}, |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.treatmentId = this.$route.query.treatmentId; // 诊疗id |
||||
|
let scaleData = localStorage.getItem("scaleData"); // 获取上次填写的数据 |
||||
|
// 如果scaleData存在，则解析成对象，否则创建一个空对象 |
||||
|
this.scaleData = scaleData |
||||
|
? JSON.parse(scaleData) |
||||
|
: { |
||||
|
[this.treatmentId]: {}, |
||||
|
}; |
||||
|
|
||||
|
// 如果scaleData[this.treatmentId]不存在，则创建一个空对象 |
||||
|
if (!this.scaleData[this.treatmentId]) { |
||||
|
this.scaleData[this.treatmentId] = {}; |
||||
|
} |
||||
|
this.form = this.scaleData[this.treatmentId][this.scaleCode] || {}; // 将上次填写的数据赋值给form |
||||
|
}, |
||||
|
methods: { |
||||
|
submitForm() { |
||||
|
let score = 0; |
||||
|
// 计算总分, topic${i}属性不一定存在，先校验是否存在 |
||||
|
for (let i = 1; i <= 7; i++) { |
||||
|
if (this.form[`topic${i}`] !== undefined) { |
||||
|
score += this.form[`topic${i}`]; |
||||
|
} |
||||
|
} |
||||
|
// 存储数据 |
||||
|
this.scaleData[this.treatmentId][this.scaleCode] = this.form; |
||||
|
localStorage.setItem("scaleData", JSON.stringify(this.scaleData)); |
||||
|
// 将数据传递给父组件 |
||||
|
this.$emit("getScaleResult", score, this.scaleCode); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped src="@/assets/styles/common.css"></style> |
||||
|
|
||||
|
<style scoped> |
||||
|
.item-title { |
||||
|
font-size: 20px; |
||||
|
font-weight: bold; |
||||
|
color: #3d3d3d; |
||||
|
line-height: 26px; |
||||
|
} |
||||
|
.item-radio-box { |
||||
|
margin: 16px 0px; |
||||
|
} |
||||
|
>>> .el-radio__label { |
||||
|
font-size: 18px; |
||||
|
color: #555555; |
||||
|
line-height: 20px; |
||||
|
} |
||||
|
.submit-box { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
.submit-box-but { |
||||
|
width: 200px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,191 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<!-- |
||||
|
1 坐着阅读书刊 0：从不打瞌睡；1：轻度可能；2：中度可能；3：很可能打瞌睡 |
||||
|
2 看电视 0：从不打瞌睡；1：轻度可能；2：中度可能；3：很可能打瞌睡 |
||||
|
3 在公共场所坐着不活动（如剧院或会议） 0：从不打瞌睡；1：轻度可能；2：中度可能；3：很可能打瞌睡 |
||||
|
4 作为乘客在车内乘坐一小时以上 0：从不打瞌睡；1：轻度可能；2：中度可能；3：很可能打瞌睡 |
||||
|
5 午间静卧休息 0：从不打瞌睡；1：轻度可能；2：中度可能；3：很可能打瞌睡 |
||||
|
6 坐着和别人交谈 0：从不打瞌睡；1：轻度可能；2：中度可能；3：很可能打瞌睡 |
||||
|
7 午餐后静坐（不饮酒） 0：从不打瞌睡；1：轻度可能；2：中度可能；3：很可能打瞌睡 |
||||
|
8 坐在车内，当车辆因交通拥堵而停下时 0：从不打瞌睡；1：轻度可能；2：中度可能；3：很可能打瞌睡 |
||||
|
--> |
||||
|
<div> |
||||
|
<div |
||||
|
class="item-container" |
||||
|
v-for="(item, index) in questions" |
||||
|
:key="index" |
||||
|
> |
||||
|
<div class="item-title">{{ item.index }}. {{ item.question }}</div> |
||||
|
<div class="item-radio-box"> |
||||
|
<el-radio-group v-model="form[`topic${item.index}`]"> |
||||
|
<el-radio |
||||
|
v-for="(criteria, index) in item.criteria" |
||||
|
:key="index" |
||||
|
:label="criteria.value" |
||||
|
>{{ criteria.label }} |
||||
|
</el-radio> |
||||
|
</el-radio-group> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="submit-box"> |
||||
|
<el-button class="submit-box-but" type="primary" @click="submitForm" |
||||
|
>提交</el-button |
||||
|
> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "phq", |
||||
|
props: ["scaleCode"], |
||||
|
data() { |
||||
|
return { |
||||
|
form: {}, |
||||
|
questions: [ |
||||
|
{ |
||||
|
index: 1, |
||||
|
question: "坐着阅读书刊", |
||||
|
criteria: [ |
||||
|
{ label: "从不打瞌睡", value: 0 }, |
||||
|
{ label: "轻度可能", value: 1 }, |
||||
|
{ label: "中度可能", value: 2 }, |
||||
|
{ label: "很可能打瞌睡", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 2, |
||||
|
question: "看电视", |
||||
|
criteria: [ |
||||
|
{ label: "从不打瞌睡", value: 0 }, |
||||
|
{ label: "轻度可能", value: 1 }, |
||||
|
{ label: "中度可能", value: 2 }, |
||||
|
{ label: "很可能打瞌睡", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 3, |
||||
|
question: "在公共场所坐着不活动（如剧院或会议）", |
||||
|
criteria: [ |
||||
|
{ label: "从不打瞌睡", value: 0 }, |
||||
|
{ label: "轻度可能", value: 1 }, |
||||
|
{ label: "中度可能", value: 2 }, |
||||
|
{ label: "很可能打瞌睡", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 4, |
||||
|
question: "作为乘客在车内乘坐一小时以上", |
||||
|
criteria: [ |
||||
|
{ label: "从不打瞌睡", value: 0 }, |
||||
|
{ label: "轻度可能", value: 1 }, |
||||
|
{ label: "中度可能", value: 2 }, |
||||
|
{ label: "很可能打瞌睡", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 5, |
||||
|
question: "午间静卧休息", |
||||
|
criteria: [ |
||||
|
{ label: "从不打瞌睡", value: 0 }, |
||||
|
{ label: "轻度可能", value: 1 }, |
||||
|
{ label: "中度可能", value: 2 }, |
||||
|
{ label: "很可能打瞌睡", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 6, |
||||
|
question: "坐着和别人交谈", |
||||
|
criteria: [ |
||||
|
{ label: "从不打瞌睡", value: 0 }, |
||||
|
{ label: "轻度可能", value: 1 }, |
||||
|
{ label: "中度可能", value: 2 }, |
||||
|
{ label: "很可能打瞌睡", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 7, |
||||
|
question: "午餐后静坐（不饮酒）", |
||||
|
criteria: [ |
||||
|
{ label: "从不打瞌睡", value: 0 }, |
||||
|
{ label: "轻度可能", value: 1 }, |
||||
|
{ label: "中度可能", value: 2 }, |
||||
|
{ label: "很可能打瞌睡", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
index: 8, |
||||
|
question: "坐在车内，当车辆因交通拥堵而停下时", |
||||
|
criteria: [ |
||||
|
{ label: "从不打瞌睡", value: 0 }, |
||||
|
{ label: "轻度可能", value: 1 }, |
||||
|
{ label: "中度可能", value: 2 }, |
||||
|
{ label: "很可能打瞌睡", value: 3 }, |
||||
|
], |
||||
|
}, |
||||
|
], |
||||
|
scaleData: {}, |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.treatmentId = this.$route.query.treatmentId; // 诊疗id |
||||
|
let scaleData = localStorage.getItem("scaleData"); // 获取上次填写的数据 |
||||
|
// 如果scaleData存在，则解析成对象，否则创建一个空对象 |
||||
|
this.scaleData = scaleData |
||||
|
? JSON.parse(scaleData) |
||||
|
: { |
||||
|
[this.treatmentId]: {}, |
||||
|
}; |
||||
|
|
||||
|
// 如果scaleData[this.treatmentId]不存在，则创建一个空对象 |
||||
|
if (!this.scaleData[this.treatmentId]) { |
||||
|
this.scaleData[this.treatmentId] = {}; |
||||
|
} |
||||
|
this.form = this.scaleData[this.treatmentId][this.scaleCode] || {}; // 将上次填写的数据赋值给form |
||||
|
}, |
||||
|
methods: { |
||||
|
submitForm() { |
||||
|
let score = 0; |
||||
|
// 计算总分, topic${i}属性不一定存在，先校验是否存在 |
||||
|
for (let i = 1; i <= 8; i++) { |
||||
|
if (this.form[`topic${i}`] !== undefined) { |
||||
|
score += this.form[`topic${i}`]; |
||||
|
} |
||||
|
} |
||||
|
// 存储数据 |
||||
|
this.scaleData[this.treatmentId][this.scaleCode] = this.form; |
||||
|
localStorage.setItem("scaleData", JSON.stringify(this.scaleData)); |
||||
|
// 将数据传递给父组件 |
||||
|
this.$emit("getScaleResult", score, this.scaleCode); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped src="@/assets/styles/common.css"></style> |
||||
|
|
||||
|
<style scoped> |
||||
|
.item-title { |
||||
|
font-size: 20px; |
||||
|
font-weight: bold; |
||||
|
color: #3d3d3d; |
||||
|
line-height: 26px; |
||||
|
} |
||||
|
.item-radio-box { |
||||
|
margin: 16px 0px; |
||||
|
} |
||||
|
>>> .el-radio__label { |
||||
|
font-size: 18px; |
||||
|
color: #555555; |
||||
|
line-height: 20px; |
||||
|
} |
||||
|
.submit-box { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
.submit-box-but { |
||||
|
width: 200px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
File diff suppressed because it is too large
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,146 @@ |
|||||
|
import request from "@/utils/request"; |
||||
|
|
||||
|
// 患者统计 - 饼状
|
||||
|
export function queryPatient(data) { |
||||
|
return request({ |
||||
|
url: "/admin/qualityControl/home/queryPatient", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 患者统计 - 柱状图
|
||||
|
export function queryByDatePatient(data) { |
||||
|
return request({ |
||||
|
url: "/admin/qualityControl/home/queryByDatePatient", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 静脉溶栓率 - 统计
|
||||
|
export function queryJmrs(data) { |
||||
|
return request({ |
||||
|
url: "/admin/qualityControl/home/queryJmrs", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 静脉溶栓率 - 数据对比
|
||||
|
// 静脉溶栓率 - DNT
|
||||
|
export function queryDntResult(data) { |
||||
|
return request({ |
||||
|
url: "/admin/qualityControl/home/queryDntResult", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 静脉溶栓率 - Sich
|
||||
|
export function querySichResult(data) { |
||||
|
return request({ |
||||
|
url: "/admin/qualityControl/home/querySichResult", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 血管治疗 - DPT
|
||||
|
export function queryDptResult(data) { |
||||
|
return request({ |
||||
|
url: "/admin/qualityControl/home/queryDptResult", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 血管治疗 - Rpt
|
||||
|
export function queryRptResult(data) { |
||||
|
return request({ |
||||
|
url: "/admin/qualityControl/home/queryRptResult", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 血管治疗 - SJDB
|
||||
|
// export function selectXgzl(data) {
|
||||
|
// return request({
|
||||
|
// url: "/qualityControl/home/selectXgzl",
|
||||
|
// method: "post",
|
||||
|
// data: data,
|
||||
|
// });
|
||||
|
// }
|
||||
|
export function dataComparison(data) { |
||||
|
return request({ |
||||
|
url: "/admin/qualityControl/home/selectXgzl", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 血管治疗统计
|
||||
|
export function queryXgzlLv(data) { |
||||
|
return request({ |
||||
|
url: "/admin/qualityControl/home/queryXgzlLv", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 大屏急救数量统计
|
||||
|
export function queryPatientList(data) { |
||||
|
return request({ |
||||
|
url: "/admin/qualityControl/home/queryPatientList", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 大屏急救时长分析
|
||||
|
export function queryFirstAidTime(data) { |
||||
|
return request({ |
||||
|
url: "/admin/qualityControl/home/queryFirstAidTime", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 大屏智慧平车面板数据
|
||||
|
export function queryData(data) { |
||||
|
return request({ |
||||
|
url: "/admin/qualityControl/home/queryData", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 患者信息
|
||||
|
export function patientTotal(data) { |
||||
|
return request({ |
||||
|
url: "/admin/statistics/patientTotal", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 诊疗信息
|
||||
|
export function zlInfo(data) { |
||||
|
return request({ |
||||
|
url: "/admin/statistics/zlInfo", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 治疗类型
|
||||
|
export function zlType(data) { |
||||
|
return request({ |
||||
|
url: "/admin/statistics/zlType", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 随访分布
|
||||
|
export function sffb(data) { |
||||
|
return request({ |
||||
|
url: "/admin/statistics/sffb", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
export function sftj(data) { |
||||
|
return request({ |
||||
|
url: "/admin/statistics/sftj", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
@ -0,0 +1,106 @@ |
|||||
|
import request from "@/utils/request"; |
||||
|
|
||||
|
// 获取租户列表
|
||||
|
export function tenantsList(data) { |
||||
|
return request({ |
||||
|
url: "/tenants/list", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 新增租户
|
||||
|
export function tenantsAdd(data) { |
||||
|
return request({ |
||||
|
url: "/tenants/add", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 修改租户
|
||||
|
export function tenantsUpd(data) { |
||||
|
return request({ |
||||
|
url: "/tenants/upd", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 删除租户
|
||||
|
export function tenantsDel(data) { |
||||
|
return request({ |
||||
|
url: "/tenants/del", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// ------ 数据源 ------
|
||||
|
// 获取数据源列表
|
||||
|
export function dataSourcesList(data) { |
||||
|
return request({ |
||||
|
url: "/dataSources/list", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
}// 新增数据源
|
||||
|
export function dataSourcesAdd(data) { |
||||
|
return request({ |
||||
|
url: "/dataSources/add", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 修改数据源
|
||||
|
export function dataSourcesUpd(data) { |
||||
|
return request({ |
||||
|
url: "/dataSources/upd", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 删除数据源
|
||||
|
export function dataSourcesDel(data) { |
||||
|
return request({ |
||||
|
url: "/dataSources/del", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// ------ 用户 ------
|
||||
|
export function tenantUsersList(data) { |
||||
|
return request({ |
||||
|
url: "/tenantUsers/list", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
}// 新增数据源
|
||||
|
export function tenantUsersAdd(data) { |
||||
|
return request({ |
||||
|
url: "/tenantUsers/add", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 修改数据源
|
||||
|
export function tenantUsersUpd(data) { |
||||
|
return request({ |
||||
|
url: "/tenantUsers/upd", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 删除数据源
|
||||
|
export function tenantUsersDel(data) { |
||||
|
return request({ |
||||
|
url: "/tenantUsers/del", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
//
|
||||
|
export function resetPwd(data) { |
||||
|
return request({ |
||||
|
url: "/web/resetPwd", |
||||
|
method: "put", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
@ -0,0 +1,64 @@ |
|||||
|
import request from "@/utils/request"; |
||||
|
|
||||
|
// ------ 上报类型 ------
|
||||
|
// 查询类型
|
||||
|
export function reportList(data) { |
||||
|
return request({ |
||||
|
url: "/report/list", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
export function reportAdd(data) { |
||||
|
return request({ |
||||
|
url: "/report/add", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
export function reportUpd(data) { |
||||
|
return request({ |
||||
|
url: "/report/upd", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
export function reportDel(data) { |
||||
|
return request({ |
||||
|
url: "/report/del", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// ------ 上报管理 ------
|
||||
|
|
||||
|
export function managerQuery(data) { |
||||
|
return request({ |
||||
|
url: "/report/queryManager", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
export function managerAdd(data) { |
||||
|
return request({ |
||||
|
url: "/report/addManager", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
export function managerUpd(data) { |
||||
|
return request({ |
||||
|
url: "/report/updManager", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
export function managerDel(data) { |
||||
|
return request({ |
||||
|
url: "/report/delManager", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -1,42 +1,59 @@ |
|||||
import defaultSettings from '@/settings' |
import defaultSettings from "@/settings"; |
||||
|
|
||||
const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle } = defaultSettings |
const { |
||||
|
sideTheme, |
||||
|
showSettings, |
||||
|
topNav, |
||||
|
tagsView, |
||||
|
fixedHeader, |
||||
|
sidebarLogo, |
||||
|
dynamicTitle, |
||||
|
} = defaultSettings; |
||||
|
|
||||
const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || '' |
const storageSetting = JSON.parse(localStorage.getItem("layout-setting")) || ""; |
||||
const state = { |
const state = { |
||||
title: '', |
title: "", |
||||
theme: storageSetting.theme || '#409EFF', |
theme: storageSetting.theme || "#C6A268", |
||||
sideTheme: storageSetting.sideTheme || sideTheme, |
sideTheme: storageSetting.sideTheme || sideTheme, |
||||
showSettings: showSettings, |
showSettings: showSettings, |
||||
topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav, |
topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav, |
||||
tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView, |
tagsView: |
||||
fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader, |
storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView, |
||||
sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo, |
fixedHeader: |
||||
dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle |
storageSetting.fixedHeader === undefined |
||||
} |
? fixedHeader |
||||
|
: storageSetting.fixedHeader, |
||||
|
sidebarLogo: |
||||
|
storageSetting.sidebarLogo === undefined |
||||
|
? sidebarLogo |
||||
|
: storageSetting.sidebarLogo, |
||||
|
dynamicTitle: |
||||
|
storageSetting.dynamicTitle === undefined |
||||
|
? dynamicTitle |
||||
|
: storageSetting.dynamicTitle, |
||||
|
}; |
||||
const mutations = { |
const mutations = { |
||||
CHANGE_SETTING: (state, { key, value }) => { |
CHANGE_SETTING: (state, { key, value }) => { |
||||
if (state.hasOwnProperty(key)) { |
if (state.hasOwnProperty(key)) { |
||||
state[key] = value |
state[key] = value; |
||||
} |
} |
||||
} |
}, |
||||
} |
}; |
||||
|
|
||||
const actions = { |
const actions = { |
||||
// 修改布局设置
|
// 修改布局设置
|
||||
changeSetting({ commit }, data) { |
changeSetting({ commit }, data) { |
||||
commit('CHANGE_SETTING', data) |
commit("CHANGE_SETTING", data); |
||||
}, |
}, |
||||
// 设置网页标题
|
// 设置网页标题
|
||||
setTitle({ commit }, title) { |
setTitle({ commit }, title) { |
||||
state.title = title |
state.title = title; |
||||
} |
}, |
||||
} |
}; |
||||
|
|
||||
export default { |
export default { |
||||
namespaced: true, |
namespaced: true, |
||||
state, |
state, |
||||
mutations, |
mutations, |
||||
actions |
actions, |
||||
} |
}; |
||||
|
|
||||
|
|||||
|
After Width: | Height: | Size: 1.2 MiB |
File diff suppressed because it is too large
@ -0,0 +1,420 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="app-container"> |
||||
|
<div class="dis" style="width: 100%"> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">病种排名</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="diagnose" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">体型分布</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="system" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">体质分布</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="physique" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">体态评估（TAPS）</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="posture" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">失眠评估（PHQ-9）</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="agrypnia" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">焦虑（HAMD-24）</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="anxiety" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- <div class="app-container"> |
||||
|
<div class="dis" style="width: 100%"> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">失眠评估（PHQ-9）</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="agrypnia" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">焦虑（HAMD-24）</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="anxiety" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from "echarts"; |
||||
|
require("echarts/theme/macarons"); // echarts theme |
||||
|
import resize from "@/views/dashboard/mixins/resize"; |
||||
|
import { zlInfo } from "@/api/indexCom.js"; |
||||
|
import { |
||||
|
diagnoseEcharts, |
||||
|
systemEcharts, |
||||
|
physiqueEcharts, |
||||
|
postureEcharts, |
||||
|
agrypniaEcharts, |
||||
|
anxietyEcharts, |
||||
|
} from "./index"; |
||||
|
export default { |
||||
|
name: "Post", |
||||
|
props: ["title"], |
||||
|
mixins: [resize], |
||||
|
data() { |
||||
|
return { |
||||
|
queryParams: { |
||||
|
param: { |
||||
|
startTime: "", |
||||
|
endTime: "", |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
loading: false, |
||||
|
diagnoseValue: null, // 病种 |
||||
|
systemValue: null, // 体系 |
||||
|
physiqueValue: null, // 体质 |
||||
|
postureValue: null, // 体态 |
||||
|
agrypniaValue: null, // 失眠 |
||||
|
anxietyValue: null, // 焦虑 |
||||
|
// 体系中文 |
||||
|
systemObj: { |
||||
|
yxfpz: "隐形肥胖型", //隐形肥胖型 |
||||
|
zfgdx: "脂肪过多型", //脂肪过多型 |
||||
|
fpx: "肥胖型", //肥胖型 |
||||
|
jrbzx: "肌肉不足型", //肌肉不足型 |
||||
|
jkjcx: "健康匀称型", //健康匀称型 |
||||
|
czjrx: "超重肌肉型", //超重肌肉型 |
||||
|
xsx: "消瘦型", //消瘦型 |
||||
|
dzfx: "低脂肪型", //低脂肪型 |
||||
|
ydyx: "运动员型", //运动员型 |
||||
|
}, |
||||
|
// 体质 |
||||
|
physiqueObj: { |
||||
|
phz: "平和质", //平和质 |
||||
|
qxz: "气虚质", //气虚质 |
||||
|
yangxz: "阳虚质", //阳虚质 |
||||
|
yinxz: "阴虚质", //阴虚质 |
||||
|
tsz: "痰湿质", //痰湿质 |
||||
|
srz: "湿热质", //湿热质 |
||||
|
xyz: "血瘀质", //血瘀质 |
||||
|
qyz: "气郁质", //气郁质 |
||||
|
tlz: "特禀质", //特禀质 |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
// this.Linepatient(); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
statistics(_data, _type) { |
||||
|
this.initial(_data, _type); // 处理数据 |
||||
|
this.loading = true; |
||||
|
this.getData(); // 获取数据 |
||||
|
}, |
||||
|
//患者信息 |
||||
|
async getData() { |
||||
|
try { |
||||
|
await zlInfo(this.queryParams).then((res) => { |
||||
|
const { jlfb, smfb, sort, ttfb, txfb, zytz } = res.data; |
||||
|
// 病种（主要诊断） |
||||
|
this.diagnoseValue = sort?.sort((a, b) => a.total - b.total); |
||||
|
this.handleDiagnose(); |
||||
|
// 体系 |
||||
|
this.systemValue = []; |
||||
|
delete txfb?.total; |
||||
|
for (let key in txfb) { |
||||
|
let data = { |
||||
|
name: this.systemObj[key], |
||||
|
value: txfb[key] || 0, |
||||
|
}; |
||||
|
this.systemValue.push(data); |
||||
|
} |
||||
|
this.handleSystem(); |
||||
|
// 体质 |
||||
|
this.physiqueValue = []; |
||||
|
delete zytz?.total; |
||||
|
for (let key in zytz) { |
||||
|
let data = { |
||||
|
name: this.physiqueObj[key], |
||||
|
value: zytz[key] || 0, |
||||
|
}; |
||||
|
this.physiqueValue.push(data); |
||||
|
} |
||||
|
this.handlePhysique(); |
||||
|
// 体态 |
||||
|
this.postureValue = [ |
||||
|
{ |
||||
|
value: ttfb?.score1 || 0, |
||||
|
name: "1分", |
||||
|
}, |
||||
|
{ |
||||
|
value: ttfb?.score2 || 0, |
||||
|
name: "2分", |
||||
|
}, |
||||
|
{ |
||||
|
value: ttfb?.score3 || 0, |
||||
|
name: "3分", |
||||
|
}, |
||||
|
{ |
||||
|
value: ttfb?.score4 || 0, |
||||
|
name: "4分", |
||||
|
}, |
||||
|
{ |
||||
|
value: ttfb?.score5 || 0, |
||||
|
name: "5分", |
||||
|
}, |
||||
|
]; |
||||
|
this.handlePosture(); |
||||
|
// 失眠评估（PHQ-9） |
||||
|
this.agrypniaValue = []; |
||||
|
for (let key in smfb) { |
||||
|
this.agrypniaValue.push(smfb[key]); |
||||
|
} |
||||
|
this.handleAgrypnia(); |
||||
|
// 焦虑度 |
||||
|
this.anxietyValue = []; |
||||
|
for (let key in jlfb) { |
||||
|
this.anxietyValue.push(jlfb[key]); |
||||
|
} |
||||
|
this.handleAnxiety(); |
||||
|
this.loading = false; |
||||
|
}); |
||||
|
} catch (e) { |
||||
|
console.log("诊疗信息", e); |
||||
|
} |
||||
|
}, |
||||
|
// 病种（主要诊断） |
||||
|
handleDiagnose() { |
||||
|
diagnoseEcharts.series[0].data = this.diagnoseValue?.map((item) => { |
||||
|
return item.total; |
||||
|
}); |
||||
|
diagnoseEcharts.yAxis.data = this.diagnoseValue?.map((item) => { |
||||
|
return item.diseaseName; |
||||
|
}); |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("diagnose"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(diagnoseEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 体系 |
||||
|
handleSystem() { |
||||
|
systemEcharts.series[0].data = this.systemValue?.map((item) => { |
||||
|
return item.value; |
||||
|
}); |
||||
|
systemEcharts.xAxis.data = this.systemValue?.map((item) => { |
||||
|
return item.name; |
||||
|
}); |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("system"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(systemEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 体质 |
||||
|
handlePhysique() { |
||||
|
physiqueEcharts.series[0].data = this.physiqueValue?.map((item) => { |
||||
|
return item.value; |
||||
|
}); |
||||
|
physiqueEcharts.xAxis.data = this.physiqueValue?.map((item) => { |
||||
|
return item.name; |
||||
|
}); |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("physique"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(physiqueEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 体态评估 |
||||
|
handlePosture() { |
||||
|
postureEcharts.series[0].data = this.postureValue; |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("posture"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(postureEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 数据处理 查询类型判断参数 |
||||
|
initial(_data, _type) { |
||||
|
_data[0] = this.$moment(_data[0]).format("YYYY-MM-DD"); |
||||
|
_data[1] = this.$moment(_data[1]).format("YYYY-MM-DD"); |
||||
|
this.queryParams.param = { |
||||
|
startTime: _data[0] + " " + "00:00:00", |
||||
|
endTime: _data[1] + " " + "23:59:59", |
||||
|
}; |
||||
|
}, |
||||
|
// 失眠评估 |
||||
|
handleAgrypnia() { |
||||
|
agrypniaEcharts.series[0].data = this.agrypniaValue; |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("agrypnia"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(agrypniaEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 焦虑评估 |
||||
|
handleAnxiety() { |
||||
|
anxietyEcharts.series[0].data = this.anxietyValue; |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("anxiety"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(anxietyEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 重新渲染图标 |
||||
|
getRenew() { |
||||
|
this.handleDiagnose(); |
||||
|
this.handleSystem(); |
||||
|
this.handlePhysique(); |
||||
|
this.handlePosture(); |
||||
|
this.handleAgrypnia(); |
||||
|
this.handleAnxiety(); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped src="@/assets/styles/common.css"></style> |
||||
|
<style scoped> |
||||
|
>>> .el-card__body { |
||||
|
padding: 10px 0 !important; |
||||
|
} |
||||
|
|
||||
|
.dis { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.header-title { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.title-box { |
||||
|
padding: 10px 20px; |
||||
|
border-bottom: 1px solid #dfe6ec; |
||||
|
} |
||||
|
|
||||
|
.dian-box { |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.dian { |
||||
|
display: inline-block; |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
border-radius: 50%; |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.title-box { |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
. >>> .el-radio--small.is-bordered { |
||||
|
margin-right: 20px !important; |
||||
|
margin-left: 0 !important; |
||||
|
} |
||||
|
|
||||
|
>>> .el-radio__input { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
>>> .el-radio__label { |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
|
||||
|
.app-container { |
||||
|
padding: 0; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 20px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.title-bor { |
||||
|
display: inline-block; |
||||
|
height: 20px; |
||||
|
width: 6px; |
||||
|
background: #4f8bff; |
||||
|
margin-right: 10px; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,388 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="app-container"> |
||||
|
<div class="dis" style="width: 100%"> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">治疗类型分布</span> |
||||
|
<div class="dis"> |
||||
|
<div class="dian-box dis"> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #c6a268"></span> |
||||
|
中西医结合 |
||||
|
</div> |
||||
|
<span class="dian" style="background: #d8d8d8"></span> |
||||
|
纯中医 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="healType" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<!-- <div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">病种方法分布</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="diseaseMethod" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1;"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">病种穴位分布</span> |
||||
|
<div class="dis"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="acupoint" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> --> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">治疗效果</span> |
||||
|
<div class="dis"> |
||||
|
<div class="dian-box dis"> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #c6a268"></span> |
||||
|
治愈 |
||||
|
</div> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #906c4a"></span> |
||||
|
显效 |
||||
|
</div> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #70483e"></span> |
||||
|
好转 |
||||
|
</div> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #c7bdb1"></span> |
||||
|
无效 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="effect" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">诊疗费用分布</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="cost" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- <div class="app-container"> |
||||
|
<div class="dis" style="width: 100%"> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">治疗效果</span> |
||||
|
<div class="dis"> |
||||
|
<div class="dian-box dis"> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #5C7BD9"></span> |
||||
|
治愈 |
||||
|
</div> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #91CC75"></span> |
||||
|
显效 |
||||
|
</div> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #FAC858"></span> |
||||
|
好转 |
||||
|
</div> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #EE6666"></span> |
||||
|
无效 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="effect" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">诊疗费用分布</span> |
||||
|
<div class="dis"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="cost" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from "echarts"; |
||||
|
require("echarts/theme/macarons"); // echarts theme |
||||
|
import resize from "@/views/dashboard/mixins/resize"; |
||||
|
import { zlType } from "@/api/indexCom.js"; |
||||
|
import { |
||||
|
healTypeEcharts, |
||||
|
diseaseMethodEcharts, |
||||
|
effectEcharts, |
||||
|
costEcharts, |
||||
|
} from "./index"; |
||||
|
export default { |
||||
|
name: "Post", |
||||
|
props: ["title"], |
||||
|
mixins: [resize], |
||||
|
data() { |
||||
|
return { |
||||
|
queryParams: { |
||||
|
param: { |
||||
|
startTime: "", |
||||
|
endTime: "", |
||||
|
}, |
||||
|
}, |
||||
|
loading: false, |
||||
|
healTypeValue: null, // 治疗类型 |
||||
|
diseaseMethod: null, // 病种方法 |
||||
|
effectValue: null, // 治疗效果 |
||||
|
costValue: null, //治疗效果 |
||||
|
effectObj: { |
||||
|
zy: "治愈", //治愈 |
||||
|
xx: "显效", //显效 |
||||
|
hz: "好转", //好转 |
||||
|
wx: "无效", //无效 |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
// this.Linepatient(); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
statistics(_data, _type) { |
||||
|
this.initial(_data, _type); // 处理数据 |
||||
|
this.loading = true; |
||||
|
this.getData(); // 获取数据 |
||||
|
}, |
||||
|
//患者信息 |
||||
|
async getData() { |
||||
|
try { |
||||
|
await zlType(this.queryParams).then((res) => { |
||||
|
const { bzfffb, bzxwfb, zlfy, zllxtj, zlxwfb } = res.data; |
||||
|
//治疗 |
||||
|
this.healTypeValue = [ |
||||
|
{ |
||||
|
value: zllxtj?.zxyjh || 0, |
||||
|
name: "中西医结合", |
||||
|
}, |
||||
|
{ |
||||
|
value: zllxtj?.czy || 0, |
||||
|
name: "纯中医", |
||||
|
}, |
||||
|
]; |
||||
|
this.handleHealType(); |
||||
|
// 病种方法 |
||||
|
// let diseaseMethod = [] |
||||
|
// let index = 0 |
||||
|
// for(let i in bzfffb){ |
||||
|
// for(let k in bzfffb[i]){ |
||||
|
// console.log(bzfffb[i][k]) |
||||
|
// } |
||||
|
// index ++ |
||||
|
// } |
||||
|
// this.handleDiseaseMethod() |
||||
|
|
||||
|
// 治疗效果 |
||||
|
this.effectValue = [ |
||||
|
{ |
||||
|
name: "治愈", |
||||
|
value: zlxwfb?.zy || 0, |
||||
|
}, |
||||
|
{ |
||||
|
name: "显效", |
||||
|
value: zlxwfb?.xx || 0, |
||||
|
}, |
||||
|
{ |
||||
|
name: "好转", |
||||
|
value: zlxwfb?.hz || 0, |
||||
|
}, |
||||
|
{ |
||||
|
name: "无效", |
||||
|
value: zlxwfb?.wx || 0, |
||||
|
}, |
||||
|
]; |
||||
|
this.handleEffect(); |
||||
|
// 治疗费用 |
||||
|
this.costValue = [ |
||||
|
zlfy?.score1 || 0, |
||||
|
zlfy?.score2 || 0, |
||||
|
zlfy?.score3 || 0, |
||||
|
zlfy?.score4 || 0, |
||||
|
zlfy?.score5 || 0, |
||||
|
]; |
||||
|
this.handleCost(); |
||||
|
this.loading = false; |
||||
|
}); |
||||
|
} catch (e) { |
||||
|
console.log("治疗类型", e); |
||||
|
} |
||||
|
}, |
||||
|
// 治疗类型 |
||||
|
handleHealType() { |
||||
|
healTypeEcharts.series[0].data = this.healTypeValue; |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("healType"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(healTypeEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 病种方法 |
||||
|
handleDiseaseMethod() { |
||||
|
// diseaseMethodEcharts.series[0].data = this.diseaseMethod |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init( |
||||
|
document.getElementById("diseaseMethod"), |
||||
|
null, |
||||
|
{ |
||||
|
height: 300, |
||||
|
} |
||||
|
); |
||||
|
myChart.setOption(diseaseMethodEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 治疗效果 |
||||
|
handleEffect() { |
||||
|
effectEcharts.series[0].data = this.effectValue; |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("effect"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(effectEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 治疗费用 |
||||
|
handleCost() { |
||||
|
costEcharts.series[0].data = this.costValue; |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("cost"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(costEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 数据处理 查询类型判断参数 |
||||
|
initial(_data, _type) { |
||||
|
_data[0] = this.$moment(_data[0]).format("YYYY-MM-DD"); |
||||
|
_data[1] = this.$moment(_data[1]).format("YYYY-MM-DD"); |
||||
|
this.queryParams.param = { |
||||
|
startTime: _data[0] + " " + "00:00:00", |
||||
|
endTime: _data[1] + " " + "23:59:59", |
||||
|
}; |
||||
|
}, |
||||
|
// 重新渲染图标 |
||||
|
getRenew() { |
||||
|
this.handleHealType(); |
||||
|
this.handleEffect(); |
||||
|
this.handleCost(); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped src="@/assets/styles/common.css"></style> |
||||
|
<style scoped> |
||||
|
>>> .el-card__body { |
||||
|
padding: 10px 0 !important; |
||||
|
} |
||||
|
|
||||
|
.dis { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.header-title { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.title-box { |
||||
|
padding: 10px 20px; |
||||
|
border-bottom: 1px solid #dfe6ec; |
||||
|
} |
||||
|
|
||||
|
.dian-box { |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.dian { |
||||
|
display: inline-block; |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
border-radius: 50%; |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.title-box { |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
. >>> .el-radio--small.is-bordered { |
||||
|
margin-right: 20px !important; |
||||
|
margin-left: 0 !important; |
||||
|
} |
||||
|
|
||||
|
>>> .el-radio__input { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
>>> .el-radio__label { |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
|
||||
|
.app-container { |
||||
|
padding: 0; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 20px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.title-bor { |
||||
|
display: inline-block; |
||||
|
height: 20px; |
||||
|
width: 6px; |
||||
|
background: #4f8bff; |
||||
|
margin-right: 10px; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,261 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="app-container"> |
||||
|
<div class="dis" style="width: 100%"> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">随访队列分布</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<!-- 患者总数统计图 --> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="follow" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">失访原因分布</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<!-- 患者总数统计图 --> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="lossFollow" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from "echarts"; |
||||
|
require("echarts/theme/macarons"); // echarts theme |
||||
|
import resize from "@/views/dashboard/mixins/resize"; |
||||
|
import { sffb, sftj } from "@/api/indexCom.js"; |
||||
|
import { followEcharts, lossFollowEcharts } from "./index"; |
||||
|
export default { |
||||
|
name: "Post", |
||||
|
props: ["title"], |
||||
|
mixins: [resize], |
||||
|
data() { |
||||
|
return { |
||||
|
loading: false, |
||||
|
followValue: [], // |
||||
|
lossFollowValue: [], // |
||||
|
queryParams: { |
||||
|
param: { |
||||
|
startTime: "", |
||||
|
endTime: "", |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
// this.Linepatient() |
||||
|
this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
statistics(_data, _type) { |
||||
|
this.initial(_data, _type); // 处理数据 |
||||
|
this.loading = true; |
||||
|
this.getData(); // 获取数据 |
||||
|
}, |
||||
|
//患者信息 |
||||
|
async getData() { |
||||
|
try { |
||||
|
this.followValue = {}; |
||||
|
await sffb(this.queryParams).then((res) => { |
||||
|
res.data.forEach((i) => { |
||||
|
let data = [i.dsf, i.ljsf, i.cqsf, i.zc]; |
||||
|
this.followValue[i.queueName] = data; |
||||
|
}); |
||||
|
this.handleFollow(); |
||||
|
}); |
||||
|
await sftj(this.queryParams).then((res) => { |
||||
|
this.lossFollowValue = res.data; |
||||
|
this.handleLossFollow(); |
||||
|
}); |
||||
|
this.loading = false; |
||||
|
} catch (e) { |
||||
|
console.log("随访", e); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 队列 |
||||
|
handleFollow() { |
||||
|
followEcharts.series = []; |
||||
|
let colorArr = [ |
||||
|
"#C7BDB1", |
||||
|
"#C6A268", |
||||
|
"#906C4A", |
||||
|
"#70483E", |
||||
|
"#582518", |
||||
|
"#C7BDB1", |
||||
|
"#C6A268", |
||||
|
"#906C4A", |
||||
|
"#70483E", |
||||
|
"#582518", |
||||
|
"#C7BDB1", |
||||
|
"#C6A268", |
||||
|
"#906C4A", |
||||
|
"#70483E", |
||||
|
"#582518", |
||||
|
"#C7BDB1", |
||||
|
"#C6A268", |
||||
|
"#906C4A", |
||||
|
"#70483E", |
||||
|
"#582518", |
||||
|
"#C7BDB1", |
||||
|
"#C6A268", |
||||
|
"#906C4A", |
||||
|
"#70483E", |
||||
|
"#582518", |
||||
|
"#C7BDB1", |
||||
|
"#C6A268", |
||||
|
"#906C4A", |
||||
|
"#70483E", |
||||
|
"#582518", |
||||
|
"#C7BDB1", |
||||
|
"#C6A268", |
||||
|
"#906C4A", |
||||
|
"#70483E", |
||||
|
"#582518", |
||||
|
"#C7BDB1", |
||||
|
"#C6A268", |
||||
|
"#906C4A", |
||||
|
"#70483E", |
||||
|
"#582518", |
||||
|
]; |
||||
|
let index = 0; |
||||
|
for (let key in this.followValue) { |
||||
|
let series = { |
||||
|
name: key, |
||||
|
data: this.followValue[key], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度 |
||||
|
color: colorArr[index], |
||||
|
}; |
||||
|
followEcharts.series.push(series); |
||||
|
index++; |
||||
|
} |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("follow"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(followEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 失访 |
||||
|
handleLossFollow() { |
||||
|
lossFollowEcharts.series[0].data = this.lossFollowValue?.map((item) => { |
||||
|
return item.num; |
||||
|
}); |
||||
|
lossFollowEcharts.xAxis.data = this.lossFollowValue?.map((item) => { |
||||
|
return item.reason; |
||||
|
}); |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init( |
||||
|
document.getElementById("lossFollow"), |
||||
|
null, |
||||
|
{ |
||||
|
height: 300, |
||||
|
} |
||||
|
); |
||||
|
myChart.setOption(lossFollowEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 数据处理 查询类型判断参数 |
||||
|
initial(_data, _type) { |
||||
|
_data[0] = this.$moment(_data[0]).format("YYYY-MM-DD"); |
||||
|
_data[1] = this.$moment(_data[1]).format("YYYY-MM-DD"); |
||||
|
this.queryParams.param = { |
||||
|
startTime: _data[0] + " " + "00:00:00", |
||||
|
endTime: _data[1] + " " + "23:59:59", |
||||
|
}; |
||||
|
}, |
||||
|
// 重新渲染图标 |
||||
|
getRenew() { |
||||
|
this.handleFollow(); |
||||
|
this.handleLossFollow(); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped src="@/assets/styles/common.css"></style> |
||||
|
<style scoped> |
||||
|
>>> .el-card__body { |
||||
|
padding: 10px 0 !important; |
||||
|
} |
||||
|
|
||||
|
.dis { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.header-title { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.title-box { |
||||
|
padding: 10px 20px; |
||||
|
border-bottom: 1px solid #dfe6ec; |
||||
|
} |
||||
|
|
||||
|
.dian-box { |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.dian { |
||||
|
display: inline-block; |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
border-radius: 50%; |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.title-box { |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
. >>> .el-radio--small.is-bordered { |
||||
|
margin-right: 20px !important; |
||||
|
margin-left: 0 !important; |
||||
|
} |
||||
|
|
||||
|
>>> .el-radio__input { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
>>> .el-radio__label { |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
|
||||
|
.app-container { |
||||
|
padding: 0; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 20px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.title-bor { |
||||
|
display: inline-block; |
||||
|
height: 20px; |
||||
|
width: 6px; |
||||
|
background: #4f8bff; |
||||
|
margin-right: 10px; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 2.5 KiB |
@ -0,0 +1,955 @@ |
|||||
|
import * as echarts from "echarts"; |
||||
|
// -------- 患者信息统计 --------
|
||||
|
// 患者总数
|
||||
|
export const HZXX = { |
||||
|
tooltip: { |
||||
|
trigger: "item", |
||||
|
}, |
||||
|
title: { |
||||
|
text: "100", |
||||
|
left: "center", |
||||
|
top: "40%", |
||||
|
textStyle: { |
||||
|
textAlign: "center", |
||||
|
color: "#393D4E", |
||||
|
fontSize: 40, |
||||
|
fontWeight: 600, |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "0%", |
||||
|
left: "0", |
||||
|
right: "0%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
color: ["#C6A268"], |
||||
|
graphic: { |
||||
|
type: "text", |
||||
|
left: "center", |
||||
|
top: "56%", |
||||
|
style: { |
||||
|
text: "患者总数", |
||||
|
color: "#70798C", |
||||
|
textAlign: "center", |
||||
|
fill: "#999999", |
||||
|
fontSize: 18, |
||||
|
width: "50px", |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: "pie", |
||||
|
radius: ["60%", "80%"], |
||||
|
avoidLabelOverlap: false, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: "center", |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
data: [], |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
// 患者性别
|
||||
|
export const gende = { |
||||
|
tooltip: { |
||||
|
trigger: "item", |
||||
|
}, |
||||
|
title: { |
||||
|
text: "", |
||||
|
left: "center", |
||||
|
top: "40%", |
||||
|
textStyle: { |
||||
|
textAlign: "center", |
||||
|
color: "#393D4E", |
||||
|
fontSize: 40, |
||||
|
fontWeight: 600, |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "0%", |
||||
|
left: "0", |
||||
|
right: "0%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
color: ["#70483E", "#C7BDB1"], |
||||
|
series: [ |
||||
|
{ |
||||
|
type: "pie", |
||||
|
radius: "80%", |
||||
|
avoidLabelOverlap: false, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: "center", |
||||
|
normal: { |
||||
|
show: true, |
||||
|
position: "inner", |
||||
|
formatter: "{b}：{c}个", |
||||
|
textStyle: { |
||||
|
color: "#fff", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
data: [], |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
// 年龄分布
|
||||
|
export const ageEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: ["<40岁", "41-50岁", "51-60岁", "61-70岁", "71-80岁", ">80岁"], |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "12%", |
||||
|
left: "4%", |
||||
|
right: "4%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
name: "数量( 个 )", |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
nameTextStyle: { |
||||
|
padding: [0, 0, 0, 20], |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "数量：", |
||||
|
data: [], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
color: "#C6A268", |
||||
|
// itemStyle: {
|
||||
|
// normal: {
|
||||
|
// //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
|
||||
|
// barBorderRadius: [50, 50, 0, 0],
|
||||
|
// color: function (params) {
|
||||
|
// var colorList = [
|
||||
|
// "#C6A268",
|
||||
|
// ];
|
||||
|
// return colorList[params.dataIndex];
|
||||
|
// },
|
||||
|
// },
|
||||
|
// },
|
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
// 病种分布
|
||||
|
export const diseaseEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: ["<40岁", "41-50岁", "51-60岁", "61-70岁", "71-80岁", ">80岁"], |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "12%", |
||||
|
left: "6%", |
||||
|
right: "4%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
name: "数量( 个 )", |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
nameTextStyle: { |
||||
|
padding: [0, 0, 0, 30], |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "数量：", |
||||
|
data: [], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
color: "#70483E", |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
|
||||
|
// -------- 诊疗信息统计 --------
|
||||
|
// 病种排名
|
||||
|
export const diagnoseEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "4%", |
||||
|
left: "4%", |
||||
|
right: "6%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: "category", |
||||
|
data: [], |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "数量：", |
||||
|
data: [], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
color: "#906C4A", |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
// 体型
|
||||
|
export const systemEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: [], |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "12%", |
||||
|
left: "6%", |
||||
|
right: "4%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
name: "数量( 个 )", |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
nameTextStyle: { |
||||
|
padding: [0, 0, 0, 34], |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "数量：", |
||||
|
data: [], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
color: "#C6A268", |
||||
|
// itemStyle: {
|
||||
|
// normal: {
|
||||
|
// //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
|
||||
|
// barBorderRadius: [50, 50, 0, 0],
|
||||
|
// },
|
||||
|
// },
|
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
// 体质
|
||||
|
export const physiqueEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: [], |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "12%", |
||||
|
left: "4%", |
||||
|
right: "4%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
name: "数量( 个 )", |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
nameTextStyle: { |
||||
|
padding: [0, 0, 0, 20], |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "数量：", |
||||
|
data: [], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
color: "#70483E", |
||||
|
// itemStyle: {
|
||||
|
// normal: {
|
||||
|
// //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
|
||||
|
// barBorderRadius: [50, 50, 0, 0],
|
||||
|
// },
|
||||
|
// },
|
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
// 体态
|
||||
|
export const postureEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "item", |
||||
|
}, |
||||
|
title: { |
||||
|
text: "", |
||||
|
left: "center", |
||||
|
top: "40%", |
||||
|
textStyle: { |
||||
|
textAlign: "center", |
||||
|
color: "#393D4E", |
||||
|
fontSize: 40, |
||||
|
fontWeight: 600, |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "0%", |
||||
|
left: "0", |
||||
|
right: "0%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
color: ["#C7BDB1", "#C6A268", "#906C4A", "#70483E", "#582518"], |
||||
|
series: [ |
||||
|
{ |
||||
|
type: "pie", |
||||
|
radius: "80%", |
||||
|
avoidLabelOverlap: false, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: "center", |
||||
|
normal: { |
||||
|
show: true, |
||||
|
position: "inner", |
||||
|
formatter: "{b}：{c}个", |
||||
|
textStyle: { |
||||
|
color: "#fff", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
data: [], |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
// 失眠评估
|
||||
|
export const agrypniaEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: ["0~4分", "5~9分", "10~14分", "15~19分", "20~27分"], |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "12%", |
||||
|
left: "5%", |
||||
|
right: "5%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
name: "数量( 个 )", |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
nameTextStyle: { |
||||
|
padding: [0, 0, 0, 20], |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "数量：", |
||||
|
data: [], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
color: "#C6A268", |
||||
|
// itemStyle: {
|
||||
|
// normal: {
|
||||
|
// //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
|
||||
|
// barBorderRadius: [50, 50, 0, 0],
|
||||
|
// },
|
||||
|
// },
|
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
// 焦虑度
|
||||
|
export const anxietyEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: ["<8分", "8~20分", "21~35分", ">35分"], |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "12%", |
||||
|
left: "5%", |
||||
|
right: "5%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
name: "数量( 个 )", |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
nameTextStyle: { |
||||
|
padding: [0, 0, 0, 20], |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "数量：", |
||||
|
data: [], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
color: "#70483E", |
||||
|
// itemStyle: {
|
||||
|
// normal: {
|
||||
|
// //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
|
||||
|
// barBorderRadius: [50, 50, 0, 0],
|
||||
|
// },
|
||||
|
// },
|
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
// -------- 治疗类型 --------
|
||||
|
// 治疗类型
|
||||
|
export const healTypeEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "item", |
||||
|
}, |
||||
|
title: { |
||||
|
text: "", |
||||
|
left: "center", |
||||
|
top: "40%", |
||||
|
textStyle: { |
||||
|
textAlign: "center", |
||||
|
color: "#393D4E", |
||||
|
fontSize: 40, |
||||
|
fontWeight: 600, |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "0%", |
||||
|
left: "0", |
||||
|
right: "0%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
color: ["#C6A268", "#D8D8D8"], |
||||
|
series: [ |
||||
|
{ |
||||
|
type: "pie", |
||||
|
radius: "80%", |
||||
|
avoidLabelOverlap: false, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: "center", |
||||
|
normal: { |
||||
|
show: true, |
||||
|
position: "inner", |
||||
|
formatter: "{b}：{c}个", |
||||
|
textStyle: { |
||||
|
color: "#fff", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
data: [], |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
// 病种方法
|
||||
|
export const diseaseMethodEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: ["肥胖症", "失眠症", "其他"], |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "12%", |
||||
|
left: "5%", |
||||
|
right: "2%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
name: "数量( 个 )", |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "数量1：", |
||||
|
data: [1, 2], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
|
||||
|
barBorderRadius: [50, 50, 0, 0], |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: "数量2：", |
||||
|
data: [1, 3], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
|
||||
|
barBorderRadius: [50, 50, 0, 0], |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
// 治疗效果
|
||||
|
export const effectEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "item", |
||||
|
}, |
||||
|
title: { |
||||
|
text: "", |
||||
|
left: "center", |
||||
|
top: "40%", |
||||
|
textStyle: { |
||||
|
textAlign: "center", |
||||
|
color: "#393D4E", |
||||
|
fontSize: 40, |
||||
|
fontWeight: 600, |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "0%", |
||||
|
left: "0", |
||||
|
right: "0%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
color: ["#C6A268", "#906C4A", "#70483E", "#C7BDB1"], |
||||
|
series: [ |
||||
|
{ |
||||
|
type: "pie", |
||||
|
radius: "80%", |
||||
|
avoidLabelOverlap: false, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: "center", |
||||
|
normal: { |
||||
|
show: true, |
||||
|
position: "inner", |
||||
|
formatter: "{b}：{c}个", |
||||
|
textStyle: { |
||||
|
color: "#fff", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
data: [], |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
// 诊疗费用
|
||||
|
export const costEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: ["<300元", "300 ~ 900元", "900 ~ 2000元", "2000 ~ 5000元", ">5000元"], |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "12%", |
||||
|
left: "4%", |
||||
|
right: "4%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
name: "数量( 个 )", |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
nameTextStyle: { |
||||
|
padding: [0, 0, 0, 20], |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "数量：", |
||||
|
data: [], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
color: "#C6A268", |
||||
|
// itemStyle: {
|
||||
|
// normal: {
|
||||
|
// //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
|
||||
|
// barBorderRadius: [50, 50, 0, 0],
|
||||
|
// },
|
||||
|
// },
|
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
// -------- 随访 --------
|
||||
|
export const followEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: ["待随访", "临近随访", "超期随访", "正常随访"], |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "12%", |
||||
|
left: "4%", |
||||
|
right: "4%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
name: "数量( 个 )", |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
nameTextStyle: { |
||||
|
padding: [0, 0, 0, 20], |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [], |
||||
|
}; |
||||
|
// 失访原因
|
||||
|
export const lossFollowEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: [], |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "12%", |
||||
|
left: "4%", |
||||
|
right: "4%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
name: "数量( 个 )", |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
nameTextStyle: { |
||||
|
padding: [0, 0, 0, 20], |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "数量：", |
||||
|
data: [], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
color: "#70483E", |
||||
|
// itemStyle: {
|
||||
|
// normal: {
|
||||
|
// //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
|
||||
|
// barBorderRadius: [50, 50, 0, 0],
|
||||
|
// },
|
||||
|
// },
|
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
@ -0,0 +1,373 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="app-container"> |
||||
|
<div class="dis" style="width: 100%"> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">患者总数</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<!-- 患者总数统计图 --> |
||||
|
<div |
||||
|
style=" |
||||
|
height: 300px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
" |
||||
|
v-loading="loading" |
||||
|
> |
||||
|
<div class="div-hz"> |
||||
|
<div class="div-hz-icon"> |
||||
|
<img src="./image.png" alt="" width="60px" height="60px" /> |
||||
|
</div> |
||||
|
<div class="div-hz-num"> |
||||
|
<div class=""> |
||||
|
{{ HZXXvalue[0].value || 0 }}<span>人</span> |
||||
|
</div> |
||||
|
<div class="hz-num-title">患者总数</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- <div id="patienty" style="width: 100%"></div> --> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">性别数量</span> |
||||
|
<div class="dis"> |
||||
|
<div class="dian-box dis"> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #70483e"></span> |
||||
|
男 |
||||
|
</div> |
||||
|
<span class="dian" style="background: #c7bdb1"></span> |
||||
|
女 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 性别统计图 --> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="gender" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">年龄分布</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<!-- 患者总数统计图 --> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="age" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">既往病种分布</span> |
||||
|
<div class="dis"> |
||||
|
<!-- <div class="dian-box dis"> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #4f8bff"></span> |
||||
|
男 |
||||
|
</div> |
||||
|
<span class="dian" style="background: #ffcd6c"></span> |
||||
|
女 |
||||
|
</div> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 既往病种分布 --> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="disease" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from "echarts"; |
||||
|
require("echarts/theme/macarons"); // echarts theme |
||||
|
import resize from "@/views/dashboard/mixins/resize"; |
||||
|
import { patientTotal, queryByDatePatient } from "@/api/indexCom.js"; |
||||
|
import { HZXX, HZXXSJFX, gende, ageEcharts, diseaseEcharts } from "./index"; |
||||
|
export default { |
||||
|
name: "Post", |
||||
|
props: ["title"], |
||||
|
mixins: [resize], |
||||
|
data() { |
||||
|
return { |
||||
|
loading: false, |
||||
|
HZXXvalue: null, // 患者总数统计值 |
||||
|
gendeValue: null, // 性别统计值 |
||||
|
ageValue: null, // 年龄统计值 |
||||
|
diseaseValue: null, // 年龄统计值 |
||||
|
queryParams: { |
||||
|
param: { |
||||
|
startTime: "", |
||||
|
endTime: "", |
||||
|
}, |
||||
|
}, |
||||
|
jwbzObj: { |
||||
|
gxy: "高血压", //高血压 |
||||
|
nxgb: "脑血管病", //脑血管病 |
||||
|
exzl: "恶性肿瘤", //恶性肿瘤 |
||||
|
gxb: "冠心病", //冠心病 |
||||
|
jsjb: "精神疾病", //精神疾病 |
||||
|
whsezcky: "胃和十二指肠溃疡", //胃和十二指肠溃疡 |
||||
|
fpz: "肥胖症", //肥胖症 |
||||
|
gzssz: "骨质疏松症", //骨质疏松症 |
||||
|
ycxXtxjb: "遗传性、先天性疾病", //遗传性、先天性疾病 |
||||
|
tnb: "糖尿病", //糖尿病 |
||||
|
mxfxjb: "慢性肺系疾病", //慢性肺系疾病 |
||||
|
gzxz: "高脂血症", //高脂血症 |
||||
|
gzjb: "肝脏疾病", //肝脏疾病 |
||||
|
gmxjb: "过敏性疾病", //过敏性疾病 |
||||
|
gjy: "关节炎", //关节炎 |
||||
|
tf: "痛风", //痛风 |
||||
|
sySb: "肾炎、肾病", //肾炎、肾病 |
||||
|
other: "其他", //其他 |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
// this.Linepatient() |
||||
|
this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
statistics(_data, _type) { |
||||
|
this.initial(_data, _type); // 处理数据 |
||||
|
this.loading = true; |
||||
|
this.getData(); // 获取数据 |
||||
|
}, |
||||
|
//患者信息 |
||||
|
async getData() { |
||||
|
try { |
||||
|
await patientTotal(this.queryParams).then((res) => { |
||||
|
// 患者总数统计图 |
||||
|
this.HZXXvalue = [ |
||||
|
{ |
||||
|
value: res.data.totalPatients, |
||||
|
name: "患者总数", |
||||
|
}, |
||||
|
]; |
||||
|
// 性别分析图 |
||||
|
this.gendeValue = [ |
||||
|
{ |
||||
|
value: res.data.gender.male, |
||||
|
name: "男", |
||||
|
}, |
||||
|
{ |
||||
|
value: res.data.gender.female, |
||||
|
name: "女", |
||||
|
}, |
||||
|
]; |
||||
|
// 年龄分布 |
||||
|
let ageValue = res.data.age || {}; |
||||
|
this.ageValue = [ |
||||
|
ageValue.num1 || 0, |
||||
|
ageValue.num2 || 0, |
||||
|
ageValue.num3 || 0, |
||||
|
ageValue.num4 || 0, |
||||
|
ageValue.num5 || 0, |
||||
|
ageValue.num6 || 0, |
||||
|
]; |
||||
|
// 病种分布 |
||||
|
let diseaseValue = res.data.jwbz || {}; |
||||
|
this.diseaseValue = []; |
||||
|
for (let key in diseaseValue) { |
||||
|
let data = { |
||||
|
name: this.jwbzObj[key], |
||||
|
value: diseaseValue[key] || 0, |
||||
|
}; |
||||
|
this.diseaseValue.push(data); |
||||
|
} |
||||
|
// this.Linepatient(); // 患者总数 |
||||
|
this.handleAge(); // 年龄 |
||||
|
this.columnar(); //性别分析图 |
||||
|
this.handleDisease(); //病种分布 |
||||
|
}); |
||||
|
this.loading = false; |
||||
|
} catch (e) { |
||||
|
console.log("患者统计", e); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 患者信息 |
||||
|
Linepatient() { |
||||
|
HZXX.title.text = this.HZXXvalue[0].value; |
||||
|
HZXX.series[0].data = this.HZXXvalue; |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("patienty"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(HZXX, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 性别分析图 |
||||
|
columnar() { |
||||
|
gende.series[0].data = this.gendeValue; |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("gender"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(gende, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 年龄分布图 |
||||
|
handleAge() { |
||||
|
ageEcharts.series[0].data = this.ageValue; |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("age"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(ageEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 病种分布图 |
||||
|
handleDisease() { |
||||
|
diseaseEcharts.series[0].data = this.diseaseValue?.map((item) => { |
||||
|
return item.value; |
||||
|
}); |
||||
|
diseaseEcharts.xAxis.data = this.diseaseValue?.map((item) => { |
||||
|
return item.name; |
||||
|
}); |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("disease"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(diseaseEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 数据处理 查询类型判断参数 |
||||
|
initial(_data, _type) { |
||||
|
_data[0] = this.$moment(_data[0]).format("YYYY-MM-DD"); |
||||
|
_data[1] = this.$moment(_data[1]).format("YYYY-MM-DD"); |
||||
|
this.queryParams.param = { |
||||
|
startTime: _data[0] + " " + "00:00:00", |
||||
|
endTime: _data[1] + " " + "23:59:59", |
||||
|
}; |
||||
|
}, |
||||
|
// 重新渲染图标 |
||||
|
getRenew() { |
||||
|
this.Linepatient(); // 患者总数 |
||||
|
this.handleAge(); // 年龄 |
||||
|
this.columnar(); //性别分析图 |
||||
|
this.handleDisease(); //病种分布 |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped src="@/assets/styles/common.css"></style> |
||||
|
<style scoped> |
||||
|
.div-hz { |
||||
|
background: #c6a268; |
||||
|
width: 80%; |
||||
|
height: 70%; |
||||
|
border-radius: 10px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
box-sizing: border-box; |
||||
|
padding: 24px; |
||||
|
} |
||||
|
.div-hz-icon { |
||||
|
flex: 1; |
||||
|
} |
||||
|
.div-hz-num { |
||||
|
flex: 1; |
||||
|
font-size: 50px; |
||||
|
color: #ffffff; |
||||
|
text-align: right; |
||||
|
} |
||||
|
.div-hz-num span { |
||||
|
font-size: 24px; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
.hz-num-title { |
||||
|
font-size: 22px; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
>>> .el-card__body { |
||||
|
padding: 10px 0 !important; |
||||
|
} |
||||
|
|
||||
|
.dis { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.header-title { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.title-box { |
||||
|
padding: 10px 20px; |
||||
|
border-bottom: 1px solid #dfe6ec; |
||||
|
} |
||||
|
|
||||
|
.dian-box { |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.dian { |
||||
|
display: inline-block; |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
border-radius: 50%; |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.title-box { |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
. >>> .el-radio--small.is-bordered { |
||||
|
margin-right: 20px !important; |
||||
|
margin-left: 0 !important; |
||||
|
} |
||||
|
|
||||
|
>>> .el-radio__input { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
>>> .el-radio__label { |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
|
||||
|
.app-container { |
||||
|
padding: 0; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 20px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.title-bor { |
||||
|
display: inline-block; |
||||
|
height: 20px; |
||||
|
width: 6px; |
||||
|
background: #4f8bff; |
||||
|
margin-right: 10px; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,179 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div class="title1"> |
||||
|
<span class="title-bor"></span> |
||||
|
{{ title }} |
||||
|
</div> |
||||
|
<div> |
||||
|
<div> |
||||
|
<!-- <el-radio-group |
||||
|
v-model="radioValue" |
||||
|
size="small" |
||||
|
style="height: 36px" |
||||
|
@change="radioChange" |
||||
|
> |
||||
|
<el-radio label="0" border style="margin: 0 20px 0 0">周</el-radio> |
||||
|
<el-radio label="1" border style="margin: 0 20px 0 0">月</el-radio> |
||||
|
<el-radio label="2" border style="margin: 0 20px 0 0">季</el-radio> |
||||
|
<el-radio label="3" border style="margin: 0 20px 0 0">年</el-radio> |
||||
|
</el-radio-group> --> |
||||
|
<el-date-picker |
||||
|
v-model="pickerValue" |
||||
|
type="daterange" |
||||
|
align="right" |
||||
|
unlink-panels |
||||
|
range-separator="至" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
@change="pickerChage" |
||||
|
> |
||||
|
</el-date-picker> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import { deviceType } from "./index.js"; |
||||
|
// this.$store.commit('headerFun', data) |
||||
|
export default { |
||||
|
name: "Post", |
||||
|
props: ["title", "type"], |
||||
|
data() { |
||||
|
return { |
||||
|
radioValue: "1", |
||||
|
radioTime: [], |
||||
|
pickerValue: null, |
||||
|
pickerOptions: { |
||||
|
shortcuts: [ |
||||
|
{ |
||||
|
text: "最近一周", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近一个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近三个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
console.log(this.pickerValue, 222); |
||||
|
}, |
||||
|
methods: { |
||||
|
radioChange() { |
||||
|
const start = new Date(); |
||||
|
const end = new Date(); |
||||
|
this.timeType = 4; |
||||
|
if (this.radioValue == 0) { |
||||
|
this.timeType = 4; |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
||||
|
this.radioTime = [start, end]; |
||||
|
} |
||||
|
if (this.radioValue == 1) { |
||||
|
this.timeType = 4; |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
||||
|
this.radioTime = [start, end]; |
||||
|
} |
||||
|
if (this.radioValue == 2) { |
||||
|
this.timeType = 1; |
||||
|
const now = new Date(); // 当前日期 |
||||
|
const nowYear = now.getFullYear(); //当前年 |
||||
|
const nowMonth = now.getMonth(); //当前月 |
||||
|
const nowDay = now.getDate(); // 当前日 |
||||
|
const nowDayOfWeek = now.getDay(); // 周几 |
||||
|
const jd = Math.ceil((nowMonth + 1) / 3); // 当前季度 |
||||
|
const startDate = new Date(nowYear, (jd - 1) * 3, 1); |
||||
|
const endDate = new Date(nowYear, jd * 3, 0); |
||||
|
this.radioTime = [startDate, endDate]; |
||||
|
} |
||||
|
if (this.radioValue == 3) { |
||||
|
this.timeType = 1; |
||||
|
end.setTime(start.getTime()); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 365); |
||||
|
this.radioTime = [start, end]; |
||||
|
} |
||||
|
this.$emit( |
||||
|
"radio-change", |
||||
|
this.pickerValue || this.radioTime, |
||||
|
this.type, |
||||
|
this.timeType |
||||
|
); |
||||
|
}, |
||||
|
pickerChage() { |
||||
|
if (!this.pickerValue) { |
||||
|
this.radioChange(); |
||||
|
} |
||||
|
console.log(this.pickerValue, 111); |
||||
|
this.radioTime = []; |
||||
|
this.timeType = 4; |
||||
|
if (this.radioValue == 0) { |
||||
|
this.timeType = 4; |
||||
|
} |
||||
|
if (this.radioValue == 1) { |
||||
|
this.timeType = 4; |
||||
|
} |
||||
|
if (this.radioValue == 2) { |
||||
|
this.timeType = 1; |
||||
|
} |
||||
|
if (this.radioValue == 3) { |
||||
|
this.timeType = 1; |
||||
|
} |
||||
|
this.$emit("picker-change", this.pickerValue, this.type, this.timeType); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped src="@/assets/styles/common.css"></style> |
||||
|
<style scoped> |
||||
|
. >>> .el-radio--small.is-bordered { |
||||
|
margin-right: 20px !important; |
||||
|
margin-left: 0 !important; |
||||
|
} |
||||
|
>>> .el-radio__input { |
||||
|
display: none; |
||||
|
} |
||||
|
>>> .el-radio__label { |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
.app-container { |
||||
|
padding: 0; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.title1 { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 20px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
.title-bor { |
||||
|
display: inline-block; |
||||
|
height: 20px; |
||||
|
width: 6px; |
||||
|
background: #4f8bff; |
||||
|
margin-right: 10px; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
</style> |
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue