Skip to content

V
vue-composition-api
Commit ddf98c81 by nlp97
Options

init

parents
Showing with 3268 additions and 0 deletions
.env.development 0 → 100644
ENV = 'development'
VUE_APP_BASE_API = ''
VUE_APP_USER_NAME = ''
VUE_APP_PASS_WORD=''
\ No newline at end of file
.env.production 0 → 100644
ENV = 'production'
VUE_APP_BASE_API = ''
.gitignore 0 → 100644
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
README.md 0 → 100644
# suvalue-cli
## src
> * assets 存放静态文件
>> * icons 字体文件
>> * scss scss公共文件
>> * images 图片文件夹（可在此目录下根据不同模块创建不同文件下存放图片）
> * components 存放公共组件
>> * 待分区
> * http axios请求过滤
>> * index.js
> * router 路由文件夹 (可根据不同模块创建不同名称路由文件，引入到index.js中)
>> * index.js (内置路由拦截)
> * store vuex存取公共状态文件夹
>> * modules文件夹 内可根据模块来创建存储store的文件
>> * getters.js
>> * index.js
>* utils 文件夹存放公共方法函数
>> filters 文件夹 存放公共过滤器函数
>>待完善ing...
>* views 文件夹存放视图文件
>> 根据项目需求 划分目录结构，创建文件
>* main.js
`development 模式用于 vue-cli-service serve
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e`
\ No newline at end of file
babel.config.js 0 → 100644
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"name": "suvalue-cli",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vue-cli-service serve --open ",
"build": "vue-cli-service build ",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@vue/composition-api": "^1.6.2",
"core-js": "^3.6.5",
"element-ui": "^2.15.6",
"jquery": "^3.6.0",
"js-cookie": "^3.0.1",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.4.0",
"@vue/cli-plugin-eslint": "~4.4.0",
"@vue/cli-service": "~4.4.0",
"axios": "^0.19.2",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.18.0",
"sass-loader": "^7.1.0",
"sessionstorage": "^0.1.0",
"vue-router": "^3.3.2",
"vue-template-compiler": "^2.6.11",
"vuex": "^3.4.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
public/index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
src/App.vue 0 → 100644
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
</style>
src/assets/scss/color.scss 0 → 100644
$bgColor: #f3f3f3; //
$mainColor: #4194e7; //主色
$mainhoverColor: #1ba9fc; //hover状态主色
$subColor: #8fc6fd;
$pageColor: #fff;
$patientFontColor: #666; //病人页面主要字体
$timelineColor: #e3e1e1; //时间轴边框线颜色
$tableBorderColor: #ebeef5; //表格边框颜色
$tableActiveColor: #f5f7fa; //表格高亮颜色
$imgDomain: "/assets/img";
$upColor: #FF6100;
$downColor: #8CC220;
//菜单
$menuBgColor: #252a2f; //菜单颜色
$subMenuBgColor: #ededed; //菜单辅颜色
$leftMenuWidth: 200px;
$logoWidth: 50px; //logo宽度
//顶栏
$headerHeight: 50px;
//医院概况
$surveyBgColor1: #00a0e9;
$surveyBgColor2: #8cc220;
$surveyBgColor3: #ffb97f;
$surveyBgColor4: #b7a2de;
$surveyBgColor5: #2ec7c9;
$surveyBgColor6: #d87a80;
$surveyBgColor7: #5ab1ef;
src/components/404.vue 0 → 100644
<template>
<div class="http404_page">
<div class="content_404">
<div class="content_404_left">
<img src="../assets/img/404/img404.png" class="img404" alt />
<div class="icon_404">
<img src="../assets/img/404/Icon404.png" class="icon404" alt />
地址错误，请重新输入
</div>
<div class="message404">您可以先查网址，然后重新输入或给我们反馈问题！</div>
<router-link to="/" class="backHome">返回首页</router-link>
</div>
<div class="content_404_right">
<img src="../assets/img/404/rig404.png" alt />
</div>
</div>
</div>
</template>
<script>
</script>
<style lang="scss">
@import "@/styles/mixin.scss";
.http404_page {
background-color: #ffffff;
@include wh(100%, 100%);
@include flexLayout();
.content_404 {
height: 293px;
&_left {
float: left;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
.img404 {
@include wh(283.1px, 113px);
}
.icon_404 {
font-size: 23px;
font-family: PingFang SC;
font-weight: 400;
color: #abafb3;
line-height: 49px;
display: flex;
flex-direction: row;
align-items: center;
.icon404 {
@include wh(30.5px, 27px);
margin-right: 10px;
}
}
.message404 {
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #abafb3;
line-height: 22px;
}
.backHome {
width: 170px;
height: 44px;
background: #2cabe3;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 44px;
}
}
&_right {
float: right;
margin-left: 48px;
@include wh(302px, 293px);
img {
@include wh(100%, 100%);
}
}
}
}
</style>
src/main.js 0 → 100644
/*
* @Author: ninglupeng
* @Date: 2022-06-07 00:31:25
* @LastEditors: ninglupeng
* @LastEditTime: 2022-06-07 00:37:54
* @Description:
*/
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from '@/router/index'
Vue.config.productionTip = false;
import http from '@/utils/http.js'
Vue.prototype.$http = http;
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
import VueCompositionApi from '@vue/composition-api'
Vue.use(VueCompositionApi)
new Vue({
store,
router,
render: h => h(App),
}).$mount('#app')
\ No newline at end of file
src/router/index.js 0 → 100644
import Vue from "vue";
import Router from "vue-router";
import store from "@/store";
import { getItem, clear } from "@/utils/auth";
import HelloWorld from "@/views/HelloWorld.vue";
import login from "@/views/login.vue";
Vue.use(Router);
const router = new Router({
routes: [
{
path: "*",
component: (resolve) => require(["@/components/404.vue"], resolve),
},
{
path: "/login",
name: "login",
component: login,
},
{
path: "/",
name: "home",
component: HelloWorld,
},
],
});
//路由跳转前判断(登录权限)
router.beforeEach((to, from, next) => {
//console.log(to, from, next);
const token = getItem("svToken"); //获取用户id
console.log(token);
if (token) {
//有登录权限
if (to.path == "/login") {
next("/");
} else {
//console.log(to);
next();
}
} else {
//没有登录权限
if (to.path == "/login") {
next();
} else {
//不然就跳转到登录；
next("/login");
}
}
});
// router.beforeEach(async(to, from, next) => {
// const hasToken = getToken()
// if (hasToken) {
// if (to.path === '/login') {
// next({ path: '/' })
// } else {
// const hasGetUserInfo = store.getters.token
// if (hasGetUserInfo) {
// next()
// } else {
// try {
// // get user info
// await store.dispatch('user/getInfo')
// next()
// } catch (error) {
// await store.dispatch('user/resetToken')
// next(`/login?redirect=${encodeURIComponent(to.fullPath)}`)
// }
// }
// }
// } else {
// if (to.matched.some(rocode => rocode.meta.requireAuth)) {
// next(`/login?redirect=${encodeURIComponent(to.fullPath)}`)
// } else {
// next()
// }
// }
// })
export default router;
src/store/getters.js 0 → 100644
const getters = {
}
export default getters
\ No newline at end of file
src/store/index.js 0 → 100644
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
user
},
getters
})
export default store;
\ No newline at end of file
src/store/modules/user.js 0 → 100644
import { setItem, removeToken } from '@/utils/auth';
import http from '@/utils/http';
const state = {
token: '',
userInfo: {},
username: '',
routerData: [],
}
const mutations = {
SET_TOKEN: (state, token) => {
state.token = token;
},
SET_USERINFO: (state, userInfo) => {
state.userInfo = userInfo;
},
SET_NAME: (state, name) => {
state.username = name;
},
SET_ROUTERDATA: (state, list) => {
state.routerData = list;
},
}
const actions = {
login({ commit, dispatch }, userInfo) {
return new Promise((resolve, reject) => {
http
.post('/account/login', userInfo, {})
.then((response) => {
const data = response;
if (data.state === 2) {
ElMessage.error(data.message);
} else {
commit('SET_TOKEN', data.access_token);
setItem('svToken', data.access_token);
setItem('startTime', new Date().getTime());
setItem('refreshtoken', data.refresh_token);
dispatch('getInfo');
resolve(data);
}
})
.catch((error) => {
reject(error);
});
});
},
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
http
.get('/account/selfinfo')
.then((response) => {
let data = response;
if (!data) {
reject('验证失败，请重新登录。');
}
commit('SET_NAME', data.realName);
setItem('username', data.realName);
commit('SET_USERINFO', data);
setItem('userinfo', JSON.stringify(data));
resolve(data);
})
.catch((error) => {
reject(error);
});
});
},
getRouteList({ commit, state }) {
return new Promise((resolve, reject) => {
http
.get('/account/menu')
.then((response) => {
let data = response;
if (!data) {
reject('验证失败，请重新登录。');
}
commit('SET_ROUTERDATA', data);
setItem('routerData', data);
resolve(data);
})
.catch((error) => {
reject(error);
});
});
},
};
export default {
namespaced: true,
state,
mutations,
actions
}
\ No newline at end of file
src/styles/index.scss 0 → 100644
@import "./mixin.scss";
@import "./variables.module.scss";
@import "./sidebar.scss";
// 编写全局样式
body {
height: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
Microsoft YaHei, Arial, sans-serif;
margin: 0;
}
label {
font-weight: 700;
}
html {
height: 100%;
box-sizing: border-box;
}
#app {
height: 100%;
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
a:focus,
a:active {
outline: none;
}
a,
a:focus,
a:hover {
cursor: pointer;
color: inherit;
text-decoration: none;
}
div:focus {
outline: none;
}
.clearfix {
&:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
}
// main-container global css
.app-container {
padding: 20px;
}
\ No newline at end of file
src/styles/mixin.scss 0 → 100644
//清除浮动
@use "sass:math";
@mixin clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
@mixin scrollBar {
// &::-webkit-scrollbar-track-piece {
// background: #d3dce6;
// }
// &::-webkit-scrollbar {
// width: 6px;
// }
// &::-webkit-scrollbar-thumb {
// background: #99a9bf;
// border-radius: 20px;
// }
&::-webkit-scrollbar {
/*滚动条整体样式*/
width: 10px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 10px;
}
&::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
// border: 3px solid transparent;
// border-radius: 3px;
// background-clip: content-box;
// background: #27AAE2;
background-color: #27AAE2;
border: 3px solid transparent;
border-radius: 9px;
background-clip: content-box;
}
&::-webkit-scrollbar-track {
/*滚动条里面轨道*/
border-radius: 10px;
background: #F4F4F4;
width: 10px;
}
}
@mixin relative {
position: relative;
width: 100%;
height: 100%;
}
// 宽高
@mixin wh($width, $height) {
width: $width;
height: $height;
}
// flex布局 默认居中
@mixin flexLayout($center1: center, $center2: center) {
display: flex;
justify-content: $center1; // flex-start | flex-end | center | space-between | space-around
align-items: $center2; // flex-start | flex-end | center | baseline | stretch
}
// 文本超出隐藏 ...隐藏文本
@mixin ellipsis($width: 100%) {
width: $width;
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
@mixin MedicalService {
&_header {
display: flex;
flex-direction: row;
align-content: center;
justify-content: space-between;
align-items: center;
&_Cmi {
font-size: 14px;
font-family: PingFang SC;
font-weight: bold;
color: #ff7e00;
line-height: 29px;
}
&_Ratio {
font-size: 10px;
font-family: PingFang SC;
font-weight: 400;
color: #54657e;
line-height: 15px;
opacity: 0.6;
}
}
#serviceLeft {
width: 100%;
height: 60%;
}
#serviceRight {
width: 100%;
height: 60%;
}
&_message {
display: flex;
flex-direction: row;
align-content: center;
justify-content: space-between;
align-items: center;
margin-top: 2%;
&_left {
span {
display: inline-block;
width: 4px;
height: 10px;
}
font-size: 12px;
font-family: PingFang SC;
font-weight: 400;
color: #464a53;
line-height: 11px;
}
&_right {
font-size: 10px;
font-family: PingFang SC;
font-weight: 400;
color: #54657e;
line-height: 15px;
opacity: 0.6;
}
}
}
$Boxwidth:1024;
@function r($px, $Boxwidth:$Boxwidth) {
@if $px==0 {
@return 0;
}
@return math.div($px, $Boxwidth) * 100vw;
}
\ No newline at end of file
src/styles/sidebar.scss 0 → 100644
#app {
background-color: #f0f0f0;
.main-container {
min-height: 100%;
transition: margin-left .28s;
position: relative;
}
.sidebar-container {
transition: width 0.28s;
width: $sideBarWidth !important;
background-color: $menuBg;
height: calc(100vh - 50px);
position: fixed;
font-size: 0px;
top: 50px;
bottom: 0;
left: 0;
z-index: 1001;
overflow: hidden;
margin-right: 6px;
// reset element-ui css
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
}
.scrollbar-wrapper {
overflow-x: hidden !important;
}
.el-scrollbar__bar.is-vertical {
right: 0px;
}
.el-scrollbar {
height: 100%;
}
&.has-logo {
.el-scrollbar {
height: calc(100% - 50px);
}
}
.is-horizontal {
display: none;
}
a {
display: inline-block;
width: 100%;
overflow: hidden;
}
.svg-icon {
margin-right: 16px;
}
.sub-el-icon {
margin-right: 12px;
margin-left: -2px;
}
.el-menu {
border: none;
height: 100%;
width: 100% !important;
}
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
&:hover {
background-color: $menuHover !important;
}
}
.is-active>.el-submenu__title {
color: $subMenuActiveText !important;
}
& .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item {
min-width: $sideBarWidth !important;
background-color: $subMenuBg !important;
&:hover {
background-color: $subMenuHover !important;
}
}
}
.hideSidebar {
.sidebar-container {
width: 50px !important;
}
.main-container {
margin-left: 54px;
}
.submenu-title-noDropdown {
padding: 0 !important;
position: relative;
.el-tooltip {
padding: 0 !important;
.svg-icon {
margin-left: 20px;
}
.sub-el-icon {
margin-left: 19px;
}
}
}
.el-submenu {
overflow: hidden;
&>.el-submenu__title {
padding: 0 !important;
.svg-icon {
margin-left: 20px;
}
.sub-el-icon {
margin-left: 19px;
}
.el-submenu__icon-arrow {
display: none;
}
}
}
.el-menu--collapse {
.el-submenu {
&>.el-submenu__title {
&>span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
}
}
}
}
.el-menu--collapse .el-menu .el-submenu {
min-width: $sideBarWidth !important;
}
// mobile responsive
.mobile {
.main-container {
margin-left: 0px;
}
.sidebar-container {
transition: transform .28s;
width: $sideBarWidth !important;
}
&.hideSidebar {
.sidebar-container {
pointer-events: none;
transition-duration: 0.3s;
transform: translate3d(-$sideBarWidth, 0, 0);
}
}
}
.withoutAnimation {
.main-container,
.sidebar-container {
transition: none;
}
}
}
// when menu collapsed
.el-menu--vertical {
&>.el-menu {
.svg-icon {
margin-right: 16px;
}
.sub-el-icon {
margin-right: 12px;
margin-left: -2px;
}
}
.nest-menu .el-submenu>.el-submenu__title,
.el-menu-item {
&:hover {
// you can use $subMenuHover
background-color: $menuHover !important;
}
}
// the scroll bar appears when the subMenu is too long
>.el-menu--popup {
max-height: 100vh;
overflow-y: auto;
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
}
}
}
\ No newline at end of file
src/styles/variables.module.scss 0 → 100644
// sidebar
$menuText:#6A707E;
$menuActiveText:#2CABE3;
$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
$menuBg:#ffffff;
$menuHover:#2CABE3;
$subMenuBg:#2CABE3;
$subMenuHover:#001528;
$sideBarWidth:175px;
$sideBarWidthBak: 180px;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
menuText: $menuText;
menuActiveText: $menuActiveText;
subMenuActiveText: $subMenuActiveText;
menuBg: $menuBg;
menuHover: $menuHover;
subMenuBg: $subMenuBg;
subMenuHover: $subMenuHover;
}
\ No newline at end of file
src/utils/auth.js 0 → 100644
// import Cookies from 'js-cookie';
// // import sessionstorage from 'sessionstorage'
// const TokenKey = '我是token'
// export function getToken() {
// return Cookies.get(TokenKey)
// }
// export function setToken(token) {
// return Cookies.set(TokenKey, token)
// }
// export function removeToken() {
// return Cookies.remove(TokenKey)
// }
export function getItem(key) {
return window.sessionStorage.getItem(key);
}
export function setItem(key,value) {
return window.sessionStorage.setItem(key, value);
}
export function removeItem(key) {
return window.sessionStorage.removeItem(key);
}
export function clear() {
return window.sessionStorage.clear();
}
\ No newline at end of file
src/utils/decimal.js 0 → 100644
/*
* @Author: ninglupeng
* @Date: 2022-06-07 01:16:57
* @LastEditors: ninglupeng
* @LastEditTime: 2022-06-07 01:17:18
* @Description:
*/
export function decimal(num) {
var result = parseFloat(num);
if (isNaN(result)) {
return num;
} else {
result = Math.round(num * 100) / 100;
var s_x = result.toString();
var pos_decimal = s_x.indexOf('.');
if (pos_decimal < 0) {
//不是小数
pos_decimal = s_x.length;
s_x += '.';
}
while (s_x.length <= pos_decimal + 2) {
s_x += '0';
}
return s_x;
}
}
export function toPercent(point) {
var str = Number(point * 100).toFixed(2);
str += '%';
return str;
}
export function keepTwoDecimalFull(num) {
var result = parseFloat(num);
result = Math.round(num * 100) / 100;
var s_x = result.toString();
var pos_decimal = s_x.indexOf('.');
if (pos_decimal < 0) {
pos_decimal = s_x.length;
s_x += '.';
}
while (s_x.length <= pos_decimal + 2) {
s_x += '0';
}
return s_x;
}
export function changeArr(
data
) {
let arr = data.map((o) => [
o.cmi,
o.feeConsumeIndex,
o.source,
o.totalRw,
o.num,
o.stUnitFee,
o.actUnitFee,
o.drugPercent,
o.materialsPercent,
o.deptId,
o.doctorId,
o.targetConsumeIndex,
o.hosId,
o.tagDrugPercent, //目标药占比
o.tagActUnitFee, //目标指数单价
o.tagMaterialsPercent, //目标材料占比
o.coreid, //病组id
]);
return arr;
}
src/utils/echarts.js 0 → 100644
import { nextTick } from 'vue';
import { decimal } from '../utils/decimal.ts';
import { Split } from './split';
import * as echarts from 'echarts';
import { reduce } from 'lodash';
function fontSize(res) {
let docEl = document.documentElement,
clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (!clientWidth) return;
let fontSize = 100 * (clientWidth / 1920);
return res * fontSize;
}
/**
* @param echarts初始化
* @param option echarts配置的内容
* @param panelId echarts内容块Id
*/
export function initEcharts(option: any, panelId: string) {
let svChart;
return nextTick(() => {
svChart = echarts.getInstanceByDom(document.getElementById(panelId));
if (svChart == null) {
svChart = echarts.init(document.getElementById(panelId));
}
document.getElementById(panelId)?.setAttribute('_echarts_instance_', '');
svChart.clear();
svChart.setOption(option);
svChart.resize();
// 屏幕大小改变
window.addEventListener('resize', () => {
svChart.resize();
});
return svChart;
});
}
//仪表图
export function drawMoveStatistics(num) {
const option = {
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
itemStyle: {
color: '#ff7e00',
},
title: {
show: false,
},
detail: {
show: false,
},
//修改图表位置
center: ['50%', '90%'],
//修改图表大小
radius: '175%',
//外表盘样式
progress: {
show: true,
roundCap: false,
width: 30,
itemStyle: {
color: '#2cabe3',
},
},
//内表盘宽度
axisLine: {
roundCap: false,
lineStyle: {
width: 30,
color: [[1, '#16d0ff']],
},
},
//仪表盘指针
pointer: {
length: '100%',
width: 4, //指针宽度
offsetCenter: ['1%', '-1%'],
},
anchor: {
show: true,
showAbove: true,
size: 9,
itemStyle: {
borderWidth: 9,
borderColor: '#ff7e00',
},
},
//刻度标签
axisTick: {
show: false,
},
//刻度样式
splitLine: {
show: false,
},
//仪表盘轴线
axisLabel: {
show: false,
},
//控制表盘的值
data: [
{
value: num,
},
],
},
],
};
return option;
}
// 病案综合分析柱状图
export function comprebarChart(title: any, tdata: any, tcolor: any) {
const option = {
//提示框组件
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
//提示框样式(直接在tooltip中写)
textStyle: {
fontSize: 10,
},
},
grid: {
left: '2%',
right: '2%',
bottom: '1%',
top: '10%',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: true, //设置x轴两边的留白
data: title,
//刻度尺
axisTick: {
show: false, //刻度尺是否显示
alignWithLabel: true, //与标签对齐
},
//线条相关设置
axisLine: {
show: false,
lineStyle: {
color: 'hotpink',
},
},
//网格线
splitLine: {
show: true,
lineStyle: {
type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
color: '#ededed', //网格线颜色
},
},
//坐标轴刻度标签(刻度值）相关设置
axisLabel: {
show: true, //是否显示刻度值
textStyle: {
//刻度值样式修改
color: '#878787',
fontSize: 12,
},
interval: 0,
rotate: 0, //倾斜的程度
},
},
],
yAxis: [
{
type: 'value',
min: 0,
// min 是最小的值
splitNumber: 5, //刻度间距
//线条相关设置
axisLine: {
show: false,
lineStyle: {
color: '#999',
},
},
//网格线
splitLine: {
show: true,
lineStyle: {
type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
color: '#ededed', //网格线颜色
},
},
axisLabel: {
show: true, //是否显示刻度值
textStyle: {
//刻度值样式修改
color: '#878787',
fontSize: 12,
},
},
},
],
series: [
{
name: '异常数目',
type: 'bar',
barWidth: 80, //柱子宽度
emphasis: {
//强调(获取焦点时单独显示)
focus: 'series',
},
data: tdata,
label: {
show: true,
color: tcolor,
fontSize: 13,
align: 'center',
position: 'top',
},
},
],
};
return option;
}
// 病案综合分析百分比图
export function aginChart(title1, title2, maxdata: any, rdata: any, cdata: any, wp: any, np: any) {
const option = {
tooltip: {
trigger: 'item',
formatter: (params) => {
const { marker, name, value, componentType } = params;
if (componentType === 'series') {
return `
<div style=" color:#0098d9; text-align: start;">${title2} </div>
<div style="text-align: start;">问题总数: ${maxdata} </div>
<div style="text-align: start;">问题数量：${cdata}</div>
<div style="text-align: start; ">占比:${decimal(np)}% </div>
`;
}
},
},
title: [
{
x: 'center',
top: '38%',
textStyle: {
fontSize: '16', //百分比的样式
color: '#fac85b',
fontFamily: 'Arial',
foontWeight: '600',
},
},
],
polar: {
radius: ['50%', '30%'],
center: ['50%', '50%'],
},
angleAxis: {
max: maxdata,
show: false,
},
radiusAxis: {
type: 'category',
show: false,
},
series: [
{
name: '',
type: 'bar',
barWidth: 15, //圆圈宽度
showBackground: true,
backgroundStyle: {
color: '#f3fafd', //留白颜色
},
data: [cdata], //百分比占比
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#0098d9', //填色颜色
},
]),
},
},
},
// 外圆
{
type: 'pie',
clockWise: true, //顺时加载
radius: ['75%', '65%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: false,
fontSize: '40',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
tooltip: {
trigger: 'item',
formatter: (params) => {
const { marker, name, value, componentType } = params;
if (componentType === 'series') {
return `
<div style="text-align: start;color:#339ca8; background: rgba(230, 230, 230, 0.36);">${title1} </div>
<div style="text-align: start; background: rgba(230, 230, 230, 0.36);">问题总数: ${maxdata} </div>
<div style="text-align: start;">问题数量：${rdata}</div>
<div style="text-align: start; ">占比: ${decimal(wp)}% </div>
`;
}
},
},
data: [
{ value: maxdata - rdata }, //留白
{ value: rdata }, //填充
],
itemStyle: {
normal: {
color: function (params) {
//自定义颜色
var colorList = ['#f3fafc', '#339ca8']; //全部--部分
return colorList[params.dataIndex];
},
},
},
},
],
};
return option;
}
//柱状图
export function barChart(title: any, xdata: any, serdata: any) {
const option = {
title: { text: title }, //图标中的表题
tooltip: {},
xAxis: {
data: xdata,
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: serdata,
},
],
};
return option;
}
//百分比图 智能分组
export function categoryChart(data, tcolor) {
const option = {
title: [
{
text: data + `%`,
x: 'center',
top: '38%',
textStyle: {
fontSize: '16', //百分比的样式
color: tcolor,
fontFamily: 'Arial',
foontWeight: '600',
},
},
],
polar: {
radius: ['100%', '60%'],
center: ['50%', '50%'],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: 'category',
show: false,
},
series: [
{
name: '',
type: 'bar',
roundCap: true,
barWidth: 6,
showBackground: true,
backgroundStyle: {
color: '#f3fafd', //留白颜色
},
data: [data],
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: tcolor, //填色颜色
},
]),
},
},
},
],
};
return option;
}
//百分比图 病案入组
export function categoryChart11(text, data, tcolor) {
const option = {
title: [
{
text: text,
x: 'center',
top: '52%',
textStyle: {
fontSize: '14', //百分比的样式
color: tcolor,
fontFamily: 'PingFang SC',
foontWeight: '300',
},
},
{
text: data + `%`,
x: 'center',
top: '28%',
textStyle: {
fontSize: '20', //百分比的样式
color: tcolor,
fontFamily: 'Arial',
foontWeight: '600',
},
},
],
polar: {
radius: ['100%', '60%'],
center: ['50%', '50%'],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: 'category',
show: false,
},
series: [
{
name: '',
type: 'bar',
roundCap: true,
barWidth: 6,
showBackground: true,
backgroundStyle: {
color: '#f3fafd', //留白颜色
},
data: [data],
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: tcolor, //填色颜色
},
]),
},
},
},
],
};
return option;
}
//散点图
export function scatterChart(dataCount: any, cmi: any) {
let ymax = 0;
let xmax = 0;
let yarr = [];
let xarr = [];
dataCount.map((item) => {
return yarr.push(Math.abs(item[1]));
});
ymax = Math.ceil(Math.max(...yarr)); //最大值 向上取整
dataCount.map((item) => {
return xarr.push(Math.abs(item[0]));
});
xmax = Math.max(...xarr); //最大值
// console.log(xmax);
if (xmax < cmi) {
// x轴最大值小于cmi, x轴最大值边界为 x轴最大值 向上取整
xmax = Math.ceil(cmi);
}
const option = {
toolbox: {
//缩放
show: true,
top: '-2%',
right: '2%',
showTitle: true, //是否在鼠标 hover 的时候显示每个工具 icon 的标题
itemGap: 20, //工具栏 icon 每项之间的间隔
feature: {
// dataZoom: {
// },
dataView: {
//数据视图
show: false,
},
restore: {
//重置
show: false,
},
dataZoom: {
//数据缩放视图
show: true,
title:{
zoom:'区域缩放',
back:'区域还原'
},
},
saveAsImage: {
//保存图片
show: false,
},
},
},
tooltip: {
backgroundColor: '#ffff', //背景颜色
borderColor: '#fff',
padding: 0,
//设置文字左对齐,文字大小,文字颜色
textStyle: {
fontSize: fontSize(0.17),
align: 'left',
color: '#3D4D65',
},
formatter: (params) => {
const { marker, name, value, componentType } = params;
let color = '';
if (value[0] >= cmi && value[1] > 0) {
color = '#ff7e00';
} else if (value[0] < cmi && value[1] >= 0) {
// return '#d872a4 ';
color = 'red';
} else if (value[0] <= cmi && value[1] < 0) {
color = '#2cabe3';
} else if (value[0] > cmi && value[1] <= 0) {
color = '#23c768';
}
if (componentType === 'series') {
return `<div style="min-width:180px;background:#FFFFFF;box-shadow: 0px 12px 36px 0px rgba(38, 69, 90, 0.2); border-radius: 8px;
font-size:12px;
line-height:20px;
color: #3D4D65;">
<div style="padding-left: 5%;font-size:12px;line-height:25px; color:${color};overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> ${
value[2]
} </div>
<div style="padding-left: 5%; background: rgba(230, 230, 230, 0.36);">CMI: ${decimal(value[0])} </div>
<div style="padding-left: 5%;">指数偏离度：${decimal(value[1])}</div>
<div style="padding-left: 5%; background: rgba(230, 230, 230, 0.36);font-weight: bold;">目标偏离度：${decimal(value[11])}</div>
<div style="padding-left: 5%; ">总分值: ${decimal(value[3])} </div>
<div style="padding-left: 5%; background: rgba(230, 230, 230, 0.36);">例数：${value[4]}</div>
<div style="padding-left: 5%;">标准单价：${value[5]}</div>
<div style="padding-left: 5%;background: rgba(230, 230, 230, 0.36); ">目标指数单价：${decimal(value[14])}</div>
<div style="padding-left: 5%; ">实际单价：${decimal(value[6])}</div>
<div style="padding-left: 5%;background: rgba(230, 230, 230, 0.36);">药占比：${decimal(value[7] * 100)}%</div>
<div style="padding-left: 5%;">目标药占比：${decimal(value[13] * 100)}%</div>
<div style="padding-left: 5%; background: rgba(230, 230, 230, 0.36);">材料占比：${decimal(value[8] * 100)}%</div>
<div style="padding-left: 5%; ">目标材料占比：${decimal(value[15] * 100)}%</div>
</div>`;
}
},
},
grid: {
left: 30,
right: 30,
top: 21,
bottom: 20,
containLabel: true,
},
xAxis: {
splitLine: {
//x轴分割线
lineStyle: {
color: '#C1EBFE',
type: 'dashed', //虚线
},
},
axisLine: {
//x轴
lineStyle: {
color: '#0587C0',
width: 0,
},
},
splitNumber: 5,
// max: xmax,
max: decimal(xmax + cmi),
min: decimal(-xmax + cmi),
},
yAxis: {
splitLine: {
//y轴分割线
lineStyle: {
color: '#C1EBFE',
type: 'dashed', //虚线
},
},
axisLine: {
//y轴
lineStyle: {
color: '#0587C0',
width: 0,
},
},
splitNumber: 5,
max: ymax,
min: -ymax,
},
series: [
{
type: 'scatter',
data: dataCount,
label: {
show: true,
position: 'bottom',
formatter: (params) => {
const { marker, name, value, componentType } = params;
if (componentType === 'series') {
return Split(value[2]);
}
},
fontSize: 12,
},
symbolSize: (params) => {
if (params[4] > 5000) {
return Math.ceil(params[4] / 1000 + 10);
} else {
return Math.ceil(params[4] / 100 + 10);
}
},
markLine: {
label: {
normal: {
formatter: function (params) {
if (params.dataIndex == 0) {
return `CMI`;
} else if (params.dataIndex == 1) {
return ` 偏离度`;
}
return params.value;
},
},
},
lineStyle: {
normal: {
type: 'solid',
},
},
data: [
{
silent: false, //鼠标悬停事件 true没有，false有
lineStyle: {
//警戒线的样式 ，虚实 颜色
type: 'solid',
color: '#0587C0',
},
yAxis: 0,
},
{
lineStyle: {
//警戒线的样式 ，虚实 颜色
type: 'solid',
color: '#0587C0',
},
xAxis: cmi,
},
],
},
itemStyle: {
// shadowBlur: 2,
// shadowColor: 'rgba(120, 36, 50, 0.5)',
// shadowOffsetY: 1,
color: function (params: any) {
const { marker, name, value, componentType } = params;
if (value[0] >= cmi && value[1] > 0) {
return '#ff7e00';
} else if (value[0] < cmi && value[1] >= 0) {
// return '#d872a4 ';
return 'red';
} else if (value[0] <= cmi && value[1] < 0) {
return '#2cabe3';
} else if (value[0] > cmi && value[1] <= 0) {
return '#23c768';
}
},
},
},
],
};
return option;
}
export function safetyChart(data1) {
let color = ['#2CE3D8', '#24C768', '#FF7E00', '#00A1E4', '#FFC107'];
data1.map((item, index) => {
data1.push({ value: 0, name: '', color: 'transparent' });
color.push('transparent');
});
const option = {
grid: {
containLabel: true,
},
tooltip: {
show: true,
trigger: 'item',
formatter: '{b} : {c} ({d}%)',
},
legend: {
textStyle: {
color: '#464A53',
fontWeight: 'normal',
fontSize: fontSize(0.12),
},
icon: 'rect',
itemWidth: 5,
itemHeight: 15,
},
series: [
{
name: '医疗效率',
type: 'pie',
startAngle: 0,
radius: [30, 100],
center: ['50%', '20%'],
roseType: 'area',
avoidLabelOverlap: false,
itemStyle: {
color: function (params) {
return color[params.dataIndex];
},
},
label: {
show: true,
position: 'outside',
fontSize: fontSize(0.14),
formatter: function (params) {
return params.value;
},
// color: function (params) {
// return params.color;
// },
},
labelLine: {
// normal: {
length: 10,
length2: 20,
show: true,
lineStyle: {
width: 1,
},
// },
},
data: data1,
},
],
};
return option;
}
export function EfficiencyChart(data) {
const option = {
grid: {
left: 0,
right: 0,
top: 20,
bottom: 20,
containLabel: true,
},
tooltip: {
show: false,
// trigger: 'item',
// formatter: '{a} : {c} ({d}%)',
},
xAxis: {
type: 'category',
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: ['#F4F4F4'],
type: 'solid',
},
},
axisLabel: {
show: false,
},
show: false,
},
yAxis: {
type: 'value',
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: ['#F4F4F4'],
type: 'solid',
},
},
axisLabel: {
show: false,
},
show: false,
},
series: [
{
data: data,
type: 'bar',
},
],
barWidth: 30, //柱子宽度
};
return option;
}
export function serviceChart(color1, color2) {
const option = {
// tooltip: {
// show: true,
// trigger: 'axis',
// },
grid: {
left: 0,
right: 0,
top: 0,
bottom: 0,
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
axisTick: {
show: false,
},
//网格线显示
splitLine: {
show: false,
},
//刻度显示
axisLabel: {
show: false,
},
show: false,
},
],
yAxis: [
{
type: 'value',
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
show: false,
},
],
series: [
{
name: '疾病入组数：888',
type: 'line',
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbolSize: 0,
// smooth: true,
lineStyle: {
// normal: {
color: color1, // 线条颜色
// },
},
itemStyle: {
color: color1,
borderColor: color1,
},
tooltip: {
show: true,
},
areaStyle: {
//区域填充样式
},
data: [0, 100, 104, 109, 125, 54, 60, 90, 100, 94, 180, 200],
},
{
name: '收治病种数量：888',
type: 'line',
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbolSize: 0,
// smooth: true,
lineStyle: {
// normal: {
// color: color2, // 线条颜色
// },
borderColor: color2,
},
itemStyle: {
color: color2,
borderColor: color2,
},
tooltip: {
show: true,
},
areaStyle: {
//区域填充样式
},
data: [0, 150, 160, 140, 200, 160, 180, 230, 190, 230, 245, 280],
},
],
};
return option;
}
export function pieOption(data) {
var radius = ['0%', '60%'];
// 饼图
const optionPie = {
tooltip: {
trigger: 'axis',
},
series: [
{
tooltip: {
trigger: 'item',
formatter: function (params) {
return '占比：' + params.percent.toFixed(2) + '%';
},
},
labelLine: {
normal: {
// show: false,
},
},
label: {
fontSize: fontSize(0.14),
color: '#54657e99',
},
type: 'pie',
radius: radius,
center: ['50%', '50%'],
data: data,
},
],
};
return optionPie;
}
src/utils/http.js 0 → 100644
import Vue from 'vue'
import axios from 'axios'
import 'element-ui/lib/theme-chalk/index.css';
import { getItem } from '@/utils/auth'
axios.defaults.timeout = 120000
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'
var domain = '/api/api'
function createHeader() {
const token = getItem('svToken');
return token ? { Authorization: `Bearer ${token}` } : {};
}
function errorMsg(d) {
if (d.response.status == '401') {
Vue.prototype.$message.error('登录信息失效，重新登录！');
sessionStorage.clear();
this.$router.push("/login").catch((err) => {
console.log("输出报错", err);
}); //改变路由
}
if (d.response) {
// 请求已发出，但服务器响应的状态码不在 2xx 范围内
console.log(d.response.data.message);
}
if (Vue.prototype.$notify) {
Vue.prototype.$message.error(d ? d.response.data.message : '服务器端错误');
} else {
alert(d ? d.response.data.message : '服务器端错误')
}
}
let loadingInstance;
let loadingOption = { //加载loading
fullscreen: true,
text: '正在加载...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.5)'
}
axios.interceptors.response.use(
(response) => {
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
(error) => {
if (error.response.status == 401) {
window.sessionStorage.clear();
window.location.href = '/';
}
return Promise.reject(error);
}
);
export default {
post(url, params, option) {
if (getItem('svtoken')) {
loadingInstance = Vue.prototype.$loading(loadingOption);
}
return new Promise((resolve, reject) => {
axios
.post(domain + url, params, { ...{ headers: createHeader() }, ...option })
.then((res) => {
if (res.status !== 200) {
errorMsg(res.data);
reject(res.data);
return;
}
if (getItem('token')) {
loadingInstance.close();
}
resolve(res.data.data || res.data);
})
.catch((error) => {
if (getItem('token')) {
loadingInstance.close();
}
errorMsg(error);
reject(error);
});
});
},
get(url, option) {
loadingInstance = Vue.prototype.$loading(loadingOption);
return new Promise((resolve, reject) => {
axios
.get(domain + url, { ...{ headers: createHeader() }, ...option })
.then((res) => {
if (res.status !== 200) {
errorMsg(res.data);
reject(res.data);
return;
}
loadingInstance.close();
resolve(res.data.data || res.data);
})
.catch((error) => {
loadingInstance.close();
errorMsg(error);
reject(error);
});
});
},
}
\ No newline at end of file
src/views/HelloWorld.vue 0 → 100644
<!--
* @Author: wsq
* @Date: 2022-04-22 14:21:50
* @LastEditors: ninglupeng
* @LastEditTime: 2022-06-07 09:10:32
* @Description:
-->
<template>
<!-- 查看质控 -->
<div class="outseeQualityControl">
<div class="outseeQualityControl_box">
<div class="outseeQualityControl_box_btn">
<el-button size="mini" type="primary" @click="getSynchronous">同步数据</el-button>
</div>
<div class="outseeQualityControl_box_header">
<div class="outseeQualityControl_box_header_text"></div>
</div>
<div class="outseeQualityControl_box_Content">
<div class="outseeQualityControl_box_Content_left">
<medical-record-homepage :medicalrecord="medicalrecord" :clicktitle="clicktitle">
</medical-record-homepage>
</div>
<div class="outseeQualityControl_box_Content_right">
<div class="outseeQualityControl_box_Content_right_top">
<!--非编码问题 -->
<div :class="[isleftcodeShow ? 'outseeQualityControl_box_Content_right_top_left' : 'outseeQualityControl_box_Content_right_top_left11']"
@click="leftcode">
<div class="outseeQualityControl_box_Content_right_top_left_div1">
<img src="../assets/img/fbm.png" alt="" v-show="isleftcodeShow" />
<img src="../assets/img/bm.png" alt="" v-show="!isleftcodeShow" />
</div>
<div class="outseeQualityControl_box_Content_right_top_left_div2">
<span :class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_left_div2_span1'
: 'outseeQualityControl_box_Content_right_top_left_div2_span11',
]">{{ fruleCount }}</span>
<span :class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_left_div2_span2'
: 'outseeQualityControl_box_Content_right_top_left_div2_span22',
]">非编码问题</span>
</div>
</div>
<!-- 编码问题 -->
<div :class="[isleftcodeShow ? 'outseeQualityControl_box_Content_right_top_right' : 'outseeQualityControl_box_Content_right_top_right11']"
@click="rightcode">
<div class="outseeQualityControl_box_Content_right_top_right_div1">
<img src="../assets/img/fbm.png" alt="" v-show="!isleftcodeShow" />
<img src="../assets/img/bm.png" alt="" v-show="isleftcodeShow" />
</div>
<div class="outseeQualityControl_box_Content_right_top_right_div2">
<span :class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_right_div2_span1'
: 'outseeQualityControl_box_Content_right_top_right_div2_span11',
]">{{ ruleCount }}</span>
<span :class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_right_div2_span2'
: 'outseeQualityControl_box_Content_right_top_right_div2_span22',
]">编码问题</span>
</div>
</div>
</div>
<div class="outseeQualityControl_box_Content_right_center">
<div class="outseeQualityControl_box_Content_right_center_line" v-show="isleftcodeShow"></div>
<div class="outseeQualityControl_box_Content_right_center_line2" v-show="!isleftcodeShow"></div>
</div>
<div class="outseeQualityControl_box_Content_right_bottom">
<!-- <div class="outseeQualityControl_box_Content_right_bottom_title">患者基本信息</div> -->
<div class="outseeQualityControl_box_Content_right_bottom_tree" v-show="isleftcodeShow">
<el-tree :data="departmentTree" :props="defaultProps" :default-expand-all="false" ref="tree"
node-key="id" @node-click="handleNodeClick">
<template #default="{ node, data }">
<span class="custom-tree-node">
<div class="leftbox" :class="[data.ruleName != '非编码问题' ? 'leftboxs' : '']">
<span :class="[data.ruleName == '非编码问题' ? 'spans' : '']">{{ data.ruleName
}}</span>
</div>
<!-- <span class="_score"> -{{ data.score }}<span>分</span></span> -->
</span>
</template>
</el-tree>
</div>
<div class="outseeQualityControl_box_Content_right_bottom_tree" v-show="!isleftcodeShow">
<el-tree :data="rightdepartmentTree" :props="defaultProps" :default-expand-all="false"
ref="tree" node-key="id" @node-click="handleNodeClick" v-show="!isnodataShow">
<template #default="{ node, data }">
<span class="custom-tree-node">
<div class="leftbox" :class="[data.ruleName != '编码问题' ? 'leftboxs' : '']">
<span :class="[data.ruleName == '编码问题' ? 'spans' : '']">{{ data.ruleName
}}</span>
</div>
</span>
</template>
</el-tree>
<div class="outseeQualityControl_box_Content_right_bottom_tree_nodata"
v-show="isnodataShow">
<img class="outseeQualityControl_box_Content_right_bottom_tree_nodata_img"
src="../assets/img/mininodata.png" alt="" />
<div class="outseeQualityControl_box_Content_right_bottom_tree_nodata_text">暂无数据</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import http from '../utils/http';
import { reactive, toRefs, onMounted, nextTick, computed } from '@vue/composition-api';
// import { ElMessage, ElMessageBox } from 'element-plus';
// import { useRoute, useRouter } from 'vue-router';
import $ from 'jquery';
// import { ElLoading } from 'element-plus';
import { setItem, getItem } from '../utils/auth';
export default {
components: {
},
name: 'outseeQualityControl',
setup() {
let state = reactive({
medicalrecord: null,
ScoringDetails: null,
caseHistoryScoreData: null,
departmentTree: [], //非编码问题数据
rightdepartmentTree: [], //编码问题数据
isleftcodeShow: true, //非编码问题数据是否显示
defaultProps: {
children: 'rulesLists',
label: 'ruleName',
},
clicktitle: '',
fruleCount: '', //非编码问题数据条数
ruleCount: '', //编码问题数据条数
isnodataShow: false, //编码是否有数据,
inhtml: '',
splithtml: '', //
splithtml2: '', //单位电话
splithtml3: '', //病房
keys: [], //获取所有的问卷key
values: [], //
});
var route = useRoute();
//同步数据
const getSynchronous = (id) => {
// var loadingInstance1 = ElLoading.service(loadingOption1);
http
.post(`/medical/get/Synchronization?id=${route.query.id}`)
.then((data) => {
// loadingInstance1.close();
// ElMessage.success(data.message);
})
.catch((error) => {
// loadingInstance1.close();
// ElMessage.error(error);
});
};
//获取到点击的值
const handleNodeClick = (data) => {
let arr = document.getElementsByClassName(data.columnName);
let dom = $('#medicalRecord').find('#clickColor');
if (dom.length != 0) {
dom.removeAttr('id');
}
arr[0].setAttribute('id', 'clickColor');
scrollTop();
};
function scrollTop() {
if ($('#clickColor').position()) {
$('.outseeQualityControl_box_Content_left').animate(
{
scrollTop:
$('#clickColor').offset().top -
$('.outseeQualityControl_box_Content_left').offset().top +
$('.outseeQualityControl_box_Content_left').scrollTop() -
300,
},
500
);
}
}
const loadingOption1 = {
// 加载loading
fullscreen: true,
text: '正在加载...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.5)',
};
// 获取病案首页数据
function getHomePage(id) {
http
.post(`/medical/Get/HomeHisPage?id=${id}`, {})
.then((data) => {
state.medicalrecord = data;
state.keys = Object.keys(data);
})
.catch((error) => { });
}
//获取患者基本信息树形数据
function getScoringDetails(id) {
http
.post(`/medical/get/GetCaseHisRule?id=${id}`, {})
.then((data) => {
state.departmentTree = data[0].rulesLists;
state.rightdepartmentTree = data[1].rulesLists;
state.fruleCount = data[0].ruleCount;
state.ruleCount = data[1].ruleCount;
if (state.fruleCount == 0 || state.ruleCount == 0) {
state.isnodataShow = true;
}
})
.catch((error) => { });
}
//点击非编码问题
const leftcode = () => {
state.isleftcodeShow = true;
};
//点击编码问题
const rightcode = () => {
state.isleftcodeShow = false;
};
onMounted(() => {
if (route.query.id) {
getHomePage(route.query.id);
getScoringDetails(route.query.id);
setItem('outpid', route.query.id)
}
});
return {
...toRefs(state),
handleNodeClick,
leftcode,
rightcode,
getSynchronous,
};
},
};
</script>
<style lang="scss">
@import 'styles/mixin.scss';
// @import 'styles/media/components/outseeQualityControl.scss';
.outseeQualityControl {
// height: calc(100% - 50px);
// padding: 10px;
// overflow: hidden;
// background-color: #fff;
height: 100%;
background-color: white;
padding: 20px;
overflow: hidden;
position: relative;
#clickColor {
background-color: #f3bf18;
}
&_box {
height: 100%;
width: 100%;
background-color: #f3fafd;
padding: 10px;
&_btn {
width: 100%;
display: flex;
justify-content: end;
margin-bottom: 10px;
}
&_header {
height: r(25, 1920);
background: url('../assets/img/dataMaintenance/title.png') no-repeat;
background-size: 100% 100%;
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
&_text {
font-size: 13px;
font-family: PingFang SC;
font-weight: 500;
color: #ffffff;
margin-left: 15px;
}
}
&_Content {
display: flex;
flex-direction: row;
height: 95%;
width: 100%;
justify-content: space-between;
align-items: center;
align-content: center;
flex-wrap: nowrap;
margin-top: 10px;
&_left {
width: 65%;
background-color: #ffffff;
height: 100%;
padding: 0 8%;
overflow: auto;
overflow-x: hidden;
}
&_right {
width: 34%;
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
&_top {
background: #ffffff;
border-radius: 8px;
height: 16%;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-around;
align-items: center;
// padding: 3% 10%;
&_left {
flex: 1;
height: 100%;
border-radius: 8px;
background-image: url('../assets/img/BG.png');
background-repeat: no-repeat;
background-position: center;
display: flex;
&_div1 {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
img {
width: 82px;
height: 80px;
}
}
&_div2 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_span1 {
color: #fff;
font-size: 26px;
font-weight: 700;
}
&_span2 {
color: #fff;
font-size: 16px;
font-weight: 500;
}
&_span11 {
color: #2cabe3;
font-size: 26px;
font-weight: 700;
}
&_span22 {
color: #2cabe3;
font-size: 16px;
font-weight: 500;
}
}
.leftblue {
color: #2cabe3;
}
}
&_left11 {
flex: 1;
height: 100%;
border-radius: 8px;
background-color: #fff;
background-repeat: no-repeat;
background-position: center;
display: flex;
&_div1 {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
img {
width: 82px;
height: 80px;
}
}
&_div2 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_span1 {
color: #fff;
font-size: 26px;
font-weight: 700;
}
&_span2 {
color: #fff;
font-size: 16px;
font-weight: 500;
}
&_span11 {
color: #2cabe3;
font-size: 26px;
font-weight: 700;
}
&_span22 {
color: #2cabe3;
font-size: 16px;
font-weight: 500;
}
}
.leftblue {
color: #2cabe3;
}
}
&_right {
height: 100%;
flex: 1;
border-radius: 8px;
display: flex;
&_div1 {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
img {
width: 82px;
height: 80px;
}
}
&_div2 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_span1 {
color: #2cabe3;
font-size: 26px;
font-weight: 700;
}
&_span2 {
color: #2cabe3;
font-size: 16px;
font-weight: 500;
}
&_span11 {
color: #ffff;
font-size: 26px;
font-weight: 700;
}
&_span22 {
color: #ffff;
font-size: 16px;
font-weight: 500;
}
}
}
&_right11 {
flex: 1;
height: 100%;
border-radius: 8px;
background-image: url('../assets/img/BG.png');
background-repeat: no-repeat;
background-position: center;
display: flex;
&_div1 {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
img {
width: 82px;
height: 80px;
}
}
&_div2 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_span1 {
color: #2cabe3;
font-size: 26px;
font-weight: 700;
}
&_span2 {
color: #2cabe3;
font-size: 16px;
font-weight: 500;
}
}
}
}
&_center {
width: 100%;
height: 2%;
background-color: #ffff;
display: flex;
&_line {
width: 50%;
height: 30%;
border-radius: 40px;
background-color: #2cabe3;
margin: 5px 0 5px 0;
}
&_line2 {
width: 50%;
height: 30%;
border-radius: 40px;
background-color: #2cabe3;
margin: 5px 0 5px 0;
margin-left: 50%;
}
}
&_bottom {
background: #ffffff;
border-radius: 8px;
height: 100%;
width: 100%;
padding: 0 5% 5% 5%;
&_title {
font-size: 14px;
font-family: PingFang SC;
font-weight: bold;
color: #6a707e;
line-height: 40px;
height: 10%;
@include flexLayout;
justify-content: left;
}
&_tree {
.is-leaf {
visibility: hidden;
}
height: 90%;
overflow-x: hidden;
.leftboxs {
border-bottom: 1px dashed #dddddd;
}
.leftbox {
width: 100%;
display: flex;
align-items: center;
height: 100%;
overflow: hidden;
white-space: pre-wrap;
text-overflow: ellipsis;
span {
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
text-align: start;
}
.spans {
color: #2cabe3;
font-weight: 500;
}
}
._score {
font-size: 13px;
font-family: PingFang SC;
font-weight: 400;
color: #ff3333;
line-height: 22px;
width: 50%;
display: flex;
flex-direction: row;
justify-content: flex-end;
padding-right: 5%;
span {
color: rgba(106, 112, 126, 1);
}
}
.el-tree {
width: 98%;
height: 85px;
.el-tree-node__content {
height: 85px;
}
.el-tree-node.is-current>.el-tree-node__content {
height: 85px;
/* background: #5fc3f0; */
.custom-tree-node {
.leftbox {
width: 100%;
display: flex;
align-items: center;
height: 100%;
span {
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
text-align: start;
}
}
._score {
font-size: 13px;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
}
}
}
}
.el-tree-node {
white-space: initial;
}
&_nodata {
height: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_img {
width: 80px;
height: 80px;
}
&_text {
color: #abafb3;
font-family: PingFang SC;
font-size: 14px;
}
}
}
}
}
}
}
.custom-tree-node {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
height: 100%;
}
.el-tree>.el-tree-node {
//父级加下滑线
// border-bottom: 1px dashed #dddddd;
}
//修改三角icon样式
.el-icon-caret-right {
font-size: 18px;
color: #e4e4e4;
}
.el-tree-node__content .el-tree-node__label {
//子集字体小一号
font-size: 14;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
}
.el-tree-node__children .el-tree-node__label {
//子集字体小一号
font-size: 12px;
font-family: PingFang SC;
font-weight: 400;
line-height: 22px;
}
}
</style>
src/views/login.vue 0 → 100644
<template>
<div id="login">
<div class="login_form">
<div class="login_form_box">
<div class="login_title">基于病种精细化医院管理系统</div>
<el-form :model="ruleForm" ref="ruleForm" :rules="rules">
<el-form-item prop="userName">
<el-input class="login_username" v-model="ruleForm.userName" autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="passWord">
<el-input
class="login_password"
type="password"
v-model="ruleForm.passWord"
autocomplete="off"
auto-complete="new-password"
@keyup.enter="submitForm()"
></el-input>
</el-form-item>
<el-form-item>
<el-button @click="submitForm('ruleForm')" class="login_btn">{{ loginContent }}</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
name:'login',
data(){
return{
ruleForm: {
userName: '',
passWord: '',
},
rules: {
userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
passWord: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
},
loginContent: '登录',
}
},
computed:{
},
methods:{
submitForm(formName) {
const params = {
userName: this.ruleForm.userName,
password: this.ruleForm.passWord,
};
// 校验
this.$refs[formName].validate((valid) => {
if (valid) {
this.loginContent = '登录中...';
this.$store
.dispatch('user/login', params)
.then(() => {
this.$store.dispatch('user/getRouteList').then((routeList) => {
// routeList.map((item) => {
// if (item.menuName == '数据驾驶舱') {
// router.push({ path: item.menuUrl });
// }
// });
this.$router.push('*')
});
})
.catch((e) => {
console.log(e);
});
}
});
}
},
mounted(){
}
}
</script>
<style lang="scss">
@import '../styles/index.scss';
#login {
display: flex;
background: url(../assets/img/login/login1920.png) no-repeat;
background-size: cover !important;
@include flexLayout;
@include wh(100%, 100%);
.login_form {
width: 552px;
height: 100%;
position: absolute;
right: 0;
top: 0;
background-color: white;
display: flex;
@include flexLayout;
.login_form_box {
padding: 80px;
.login_title {
font-size: 24px;
color: #5faee3;
margin-bottom: 58px;
font-family: PingFang SC;
font-weight: bold;
}
.login_username {
border: 1px solid #dddfe1;
width: 100%;
height: 42px;
background: url(../assets/img/login/userlogo.png) no-repeat 30px 9px;
background-size: 17px 28px;
padding: 0px 0px 0px 80px; /*输入内容左右边距控制*/
position: relative;
&::before {
position: absolute;
height: calc(100% - 16px);
margin: 8px 0px;
width: 1px;
background: #f1ecf5;
content: '';
}
}
.login_password {
border: 1px solid #dddfe1;
width: 100%;
height: 42px;
background: url(../assets/img/login/passlogo.png) no-repeat 30px 9px;
background-size: 17px 22px;
padding: 0px 0px 0px 80px; /*输入内容左右边距控制*/
position: relative;
&::before {
position: absolute;
height: calc(100% - 16px);
margin: 8px 0px;
width: 1px;
background: #f1ecf5;
content: '';
}
}
.login_username .el-input__inner,
.login_password .el-input__inner {
border: none !important;
outline: none !important;
background-color: transparent !important;
height: 40px;
}
.login_btn {
background-color: #5faee3;
border-radius: 0px;
width: 100%;
outline: none;
color: white;
font-family: PingFang SC;
font-weight: bold;
}
}
}
}
</style>
\ No newline at end of file
vue.config.js 0 → 100644
/*
* @Author: ninglupeng
* @Date: 2022-06-07 00:31:25
* @LastEditors: ninglupeng
* @LastEditTime: 2022-06-07 00:40:32
* @Description:
*/
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
productionSourceMap: false,
devServer: { //测试环境代理
port: 8066, //测试端口
proxy: {
'/api': {
target: 'https://testjx.suvalue.com/',
changeOrigin: true,
pathRewrite: {
'^/': '/'
}
}
}
},
configureWebpack: {
resolve: {
alias: {
'@': resolve('src')
}
}
},
lintOnSave: false, //取消eslint
css: {
loaderOptions: {
// sass: {
// data: `
// @import "@/assets/color.scss";
// @import "@/assets/mixin.scss";
// `
// }
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment