wip:对接运营监控接口

main
@0Melon0 1 year ago
parent 9b32739ef9
commit bda0244d90

62
package-lock.json generated

@ -8,6 +8,7 @@
"name": "cockpit",
"version": "0.1.0",
"dependencies": {
"axios": "^1.7.2",
"core-js": "^3.8.3",
"dayjs": "^1.11.10",
"echarts": "^5.5.0",
@ -3669,6 +3670,11 @@
"babel-runtime": "6.x"
}
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/at-least-node": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
@ -3715,6 +3721,16 @@
"postcss": "^8.1.0"
}
},
"node_modules/axios": {
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
"integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/babel-helper-vue-jsx-merge-props": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
@ -4455,6 +4471,17 @@
"integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
"dev": true
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/commander": {
"version": "8.3.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
@ -5253,6 +5280,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/depd": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@ -6565,10 +6600,9 @@
"dev": true
},
"node_modules/follow-redirects": {
"version": "1.15.5",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
"integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
"dev": true,
"version": "1.15.6",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
"funding": [
{
"type": "individual",
@ -6671,6 +6705,19 @@
"node": ">= 8"
}
},
"node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/forwarded": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@ -8225,7 +8272,6 @@
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"dev": true,
"engines": {
"node": ">= 0.6"
}
@ -8234,7 +8280,6 @@
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dev": true,
"dependencies": {
"mime-db": "1.52.0"
},
@ -9893,6 +9938,11 @@
"node": ">= 0.10"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/pseudomap": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",

@ -4,10 +4,12 @@
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^1.7.2",
"core-js": "^3.8.3",
"dayjs": "^1.11.10",
"echarts": "^5.5.0",

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="./webConfig.js"></script>
</head>
<body>
<noscript>

@ -0,0 +1,3 @@
window.globalUrl = {
baseURL: 'http://139.196.204.68:7015/',
};

@ -14,7 +14,7 @@ import comHeader from '@/components/comHeader/comHeader.vue';
export default {
data: () => {
return {
isLoding: true,
isLoding: false,
};
},
methods: {

@ -0,0 +1,69 @@
import _axios from '@/utils/_axios';
/**
* 获取手术总量(左上角)
*/
export const GetMonitorOperationCount = date => {
return _axios({
url: '/api/QualityMicroservice/Monitor/GetMonitorOperationCount',
params: {
date,
},
});
};
/**
* 获取术间状态(右上角)
*/
export const GetMonitorOperationRoomStatus = date => {
return _axios({
url: '/api/QualityMicroservice/Monitor/GetMonitorOperationRoomStatus',
params: {
date,
},
});
};
/**
* 获取手术量统计(左下角)
*/
export const GetMonitorOperationNumber = data => {
return _axios({
url: '/api/QualityMicroservice/Monitor/GetMonitorOperationNumber',
params: data,
});
};
/**
* 获取手术级别统计(下中左)
*/
export const GetMonitorOperationLevel = date => {
return _axios({
url: '/api/QualityMicroservice/Monitor/GetMonitorOperationLevel',
params: {
date,
},
});
};
/**
* 获取ASA级别(下中右)
*/
export const GetMonitorOperationASALevel = date => {
return _axios({
url: '/api/QualityMicroservice/Monitor/GetMonitorOperationASALevel',
params: {
date,
},
});
};
/**
* 获取ASA级别(右下角)
*/
export const GetMonitorOperationDept = data => {
return _axios({
url: '/api/QualityMicroservice/Monitor/GetMonitorOperationDept',
params: data,
});
};

@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind utilities;
.el-loading-spinner {
left: 50%;
}

@ -3,6 +3,11 @@ import App from './App.vue';
import router from './router';
import store from './store';
import '@/assets/style/tailwind.css';
import { Loading } from 'element-ui';
Vue.use(Loading.directive);
Vue.prototype.$loading = Loading.service;
Vue.config.productionTip = false;

@ -7,7 +7,7 @@ const routes = [
{
path: '/',
name: 'home',
redirect: '/scheduling',
redirect: '/monitor',
},
{
path: '/monitor',

@ -0,0 +1,23 @@
import axios from 'axios';
let _axios = axios.create({
baseURL: window.globalUrl.baseURL,
timeout: 5000,
});
// _axios.interceptors.request.use(function (config) {
// return config;
// }, function (error) {
// return Promise.reject(error);
// });
_axios.interceptors.response.use(
function (response) {
return response['data'];
},
function (error) {
return Promise.reject(error);
}
);
export default _axios;

@ -6,14 +6,17 @@
</div>
<div class="w-[42.96vh] h-[27.12vh] ml-[2.96vh] my-[3.7vh]" ref="echartsContainer"></div>
<div class="absolute right-0 top-1/4 w-[3.51vh] h-[12.6vh] bgWeekBox">
<div class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1]"></div>
<div class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1]"></div>
<div class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1]" @click="toWeek"></div>
<div class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1]" @click="toMonth"></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import { GetMonitorOperationNumber } from '@/api/monitor';
import dayjs from 'dayjs';
export default {
data() {
return {
@ -33,15 +36,30 @@ export default {
},
series: [
{
data: [87, 108, 50, 92],
data: [1, 1, 1, 1],
type: 'bar',
barWidth: '10%',
},
],
},
startDate: dayjs().format('YYYY-MM-DD'),
endDate: dayjs().format('YYYY-MM-DD'),
};
},
methods: {
onGetPageData() {
GetMonitorOperationNumber({ startDate: this.startDate, endDate: this.endDate }).then(res => {
this.chartOptions['series'][0]['data'] = [res['data']['ElectiveCount'], res['data']['EmergencyCount'], res['data']['DaySurgeryCount'], res['data']['OutSurgeryCount']];
this.isLoading = false;
});
},
toWeek() {
// this.startDate =
},
toMonth() {},
},
mounted() {
this.onGetPageData();
const echartsContainer = this.$refs.echartsContainer;
const chartLeft = echarts.init(echartsContainer);
chartLeft.setOption(this.chartOptions);

@ -20,7 +20,21 @@ import topRight from './topRight/index.vue';
import bottomLeft from './bottomLeft/index.vue';
import bottomMiddle from './bottomMiddle/index.vue';
import bottomRight from './bottomRight/index.vue';
export default {
data() {
return {
isLoading: true,
topLeftData: {
firstPunctualityRate: 0,
roomUserRate: 0,
patEmergencyCount: 0,
patCount: 0,
patOperationing: 0,
patWating: 0,
},
};
},
components: {
topLeft,
topRight,

@ -1,5 +1,5 @@
<template>
<div class="w-[51.29vh] h-[39.62vh] bgTopLeftBox bg-contain bg-center bg-no-repeat p-[3vh] box-border">
<div class="w-[51.29vh] h-[39.62vh] bgTopLeftBox bg-contain bg-center bg-no-repeat p-[3vh] box-border" v-loading="isLoading">
<section class="flex justify-between">
<template v-for="(item, index) in overviewData">
<div class="w-[12.96vh] h-[14.81vh] bgTopLeftItemBox bg-contain bg-no-repeat pl-[1.48vh] py-[0.92vh]" :key="index">
@ -18,7 +18,7 @@
<img src="@/assets/svg/Monitor/TopLeft/TrianglePurple.svg" />
<span class="youshe text-[1.75vh] ml-[1.11vh] opacity-80">总人数</span>
</div>
<p class="text-[#B53FDF] text-[4.07vh] mt-[1.4vh] youshe leading-none">350</p>
<p class="text-[#B53FDF] text-[4.07vh] mt-[1.4vh] youshe leading-none">{{ totalPopulation }}</p>
</section>
<section>
<template v-for="(item, index) in peopleData">
@ -39,23 +39,25 @@
</template>
<script>
import { GetMonitorOperationCount } from '@/api/monitor';
import dayjs from 'dayjs';
export default {
data() {
return {
overviewData: [
{
itemName: '首台准点率',
itemVal: '80',
itemVal: '0',
itemUnit: '%',
},
{
itemName: '手术间利用率',
itemVal: '86',
itemVal: '0',
itemUnit: '%',
},
{
itemName: '急诊患者',
itemVal: '180',
itemVal: '0',
itemUnit: '个',
},
],
@ -69,8 +71,28 @@ export default {
itemVal: '300',
},
],
totalPopulation: 0,
isLoading: true,
};
},
methods: {
onGetPageData() {
let nowDay = dayjs().format('YYYY-MM-DD');
nowDay = '2024-06-06';
GetMonitorOperationCount(nowDay).then(res => {
this.overviewData[0]['itemVal'] = res['data']['firstPunctualityRate'].slice(0, -1);
this.overviewData[1]['itemVal'] = res['data']['roomUserRate'].slice(0, -1);
this.overviewData[2]['itemVal'] = res['data']['patEmergencyCount'];
this.totalPopulation = res['data']['patCount'];
this.peopleData[0]['itemVal'] = res['data']['patOperationing'];
this.peopleData[1]['itemVal'] = res['data']['patWating'];
this.isLoading = false;
});
},
},
mounted() {
this.onGetPageData();
},
};
</script>

@ -1,10 +1,20 @@
<template>
<div class="w-[116.94vh] h-[39.62vh] bgTopRightBox bg-contain bg-center bg-no-repeat p-[2.96vh] box-border">
<div class="w-[116.94vh] h-[39.62vh] bgTopRightBox bg-contain bg-center bg-no-repeat p-[2.96vh] box-border" v-loading="isLoading">
<el-carousel direction="vertical" :autoplay="false" :interval="5000" indicatorPosition="none">
<el-carousel-item v-for="item in 3" :key="item">
<el-carousel-item v-for="item in opList" :key="item['roomCode']">
<section>
<template v-for="(item1, index) in 21">
<div v-if="index % 3" class="w-[12.59vh] h-[9.81vh] ItemBox relative" :key="index">
<template v-for="(subItem, index) in item">
<div class="w-[12.59vh] h-[9.81vh] ItemBox relative" :key="index">
<p class="absolute w-[10.74vh] h-[2.77vh] leading--[2.77vh] text-[1.85vh] left-[0.92vh] top-[0.74vh] text-center youshe PBg">
{{ subItem['roomName'] }}
</p>
<div class="absolute w-[10vh] h-[2.77vh] left-[1.03vh] bottom-[1.48vh] flex justify-between items-end">
<img src="@/assets/svg/Monitor/TopRight/OpingIcon.svg" />
<span class="text-[1.85vh] text-[#B53FDF] youshe text-nowrap">{{ subItem['operStatusName'] }}</span>
</div>
</div>
<!-- <div v-if="index % 3" class="w-[12.59vh] h-[9.81vh] ItemBox relative" :key="index">
<p class="absolute w-[10.74vh] h-[2.77vh] leading--[2.77vh] text-[1.85vh] left-[0.92vh] top-[0.74vh] text-center youshe PBg">
OR-{{ String(index + 1).padStart(3, '0') }}
</p>
@ -30,7 +40,7 @@
<img src="@/assets/svg/Monitor/TopRight/OpWaitIcon.svg" />
<span class="text-[1.85vh] text-[#0CFFFF] youshe">空置中</span>
</div>
</div>
</div> -->
</template>
</section>
</el-carousel-item>
@ -40,7 +50,40 @@
<script>
import { Carousel, CarouselItem } from 'element-ui';
import { GetMonitorOperationRoomStatus } from '@/api/monitor';
import dayjs from 'dayjs';
export default {
data() {
return {
opList: [],
isLoading: true,
};
},
methods: {
onGetPageData() {
let nowDay = dayjs().format('YYYY-MM-DD');
nowDay = '2024-06-06';
GetMonitorOperationRoomStatus(nowDay).then(res => {
this.formatData(res['data']);
this.isLoading = false;
});
},
formatData(pageData) {
this.opList = [];
let group = 0;
for (let i = 0; i < pageData['length']; i++) {
group = parseInt(i / 21);
if (this.opList[group]) {
this.opList[group].push(pageData[i]);
} else {
this.opList[group] = [pageData[i]];
}
}
},
},
mounted() {
this.onGetPageData();
},
components: {
'el-carousel': Carousel,
'el-carousel-item': CarouselItem,
@ -54,7 +97,7 @@ export default {
:deep(.el-carousel) {
height: 39.62vh;
.el-carousel__container {
height: 39.62vh;
height: 39.62vh;
.el-carousel__item {
section {
display: grid;

@ -11,8 +11,8 @@
</div>
</div>
<section class="w-[166.2vh] h-[77.12vh] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<el-carousel direction="vertical" :autoplay="false" :interval="5000" indicatorPosition="none">
<el-carousel-item v-for="item in 1" :key="item">
<el-carousel direction="vertical" :autoplay="true" :interval="5000" indicatorPosition="none">
<el-carousel-item v-for="item in 3" :key="item">
<section class="carouselItemBox">
<template v-for="(item, index) in 39">
<div class="w-[54.25vh] h-[4.44vh] leading-[4.44vh] text-center" :class="index % 6 < 3 ? 'bgOdd' : 'bgEven'" :key="index">

Loading…
Cancel
Save