feat:增加统一请求间隔时间

main
@0Melon0 10 months ago
parent 073e4f6225
commit 9b9fcf2b89

@ -1,14 +1,16 @@
import Vue from "vue"; import Vue from 'vue';
import Vuex from "vuex"; import Vuex from 'vuex';
Vue.use(Vuex); Vue.use(Vuex);
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
isMock: false, isMock: false,
intervalTime: 30000, // 请求间隔时间
}, },
getters: { getters: {
isMock: (state) => state.isMock, isMock: state => state.isMock,
intervalTime: state => state.intervalTime,
}, },
mutations: {}, mutations: {},
actions: {}, actions: {},

@ -1,60 +1,34 @@
<template> <template>
<div <div class="w-[51.29vh] h-[40.09vh] bgBottomLeftBox mt-[2.68vh] relative">
class="w-[51.29vh] h-[40.09vh] bgBottomLeftBox mt-[2.68vh] relative" <div class="w-[45%] h-[5.07vh] ml-[1.85vh] flex justify-between items-center">
v-loading="isLoading"
>
<div
class="w-[45%] h-[5.07vh] ml-[1.85vh] flex justify-between items-center"
>
<img src="@/assets/svg/Monitor/Triangle.svg" /> <img src="@/assets/svg/Monitor/Triangle.svg" />
<span class="text-[2.03vh] youshe leading-none" <span class="text-[2.03vh] youshe leading-none">科室手术量统计(前五)</span>
>科室手术量统计(前五)</span
>
</div> </div>
<div class="w-[42.96vh] ml-[2.96vh] deptBody"> <div class="w-[42.96vh] ml-[2.96vh] deptBody">
<div class="h-[30vh] w-full"> <div class="h-[30vh] w-full">
<Histogram <Histogram v-if="getDataList.length" :getDataList="getDataList"></Histogram>
v-if="getDataList.length" <div v-else class="flex flex-col w-[100%] h-[100%] items-center justify-center">
:getDataList="getDataList"
></Histogram>
<div
v-else
class="flex flex-col w-[100%] h-[100%] items-center justify-center"
>
<img src="@/assets/img/noData.png" class="w-[120px]" /> <img src="@/assets/img/noData.png" class="w-[120px]" />
<span>暂无数据</span> <span>暂无数据</span>
</div> </div>
</div> </div>
</div> </div>
<div <div class="absolute right-0 top-1/4 w-[3.51vh] h-[12.6vh]" :class="sliderClass">
class="absolute right-0 top-1/4 w-[3.51vh] h-[12.6vh]" <div class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1] cursor-pointer" @click="toWeek"></div>
:class="sliderClass" <div class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1] cursor-pointer" @click="toMonth"></div>
>
<div
class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1] cursor-pointer"
@click="toWeek"
>
</div>
<div
class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1] cursor-pointer"
@click="toMonth"
>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { GetMonitorOperationDept } from "@/api/monitor"; import { GetMonitorOperationDept } from '@/api/monitor';
import dayjs from "dayjs"; import dayjs from 'dayjs';
import Histogram from "@/views/pageMonitor/bottomRight/DepHistogram.vue"; import Histogram from '@/views/pageMonitor/bottomRight/DepHistogram.vue';
export default { export default {
data() { data() {
return { return {
startDate: dayjs().subtract(7, "day").format("YYYY-MM-DD"), startDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
endDate: dayjs().format("YYYY-MM-DD"), endDate: dayjs().format('YYYY-MM-DD'),
sliderClass: { sliderClass: {
bgWeekBox: true, bgWeekBox: true,
bgMonthBox: false, bgMonthBox: false,
@ -73,21 +47,21 @@ export default {
GetMonitorOperationDept({ GetMonitorOperationDept({
startDate: this.startDate, startDate: this.startDate,
endDate: this.endDate, endDate: this.endDate,
}).then((res) => { }).then(res => {
// this.getDataList = [res["data"]] || []; // this.getDataList = [res["data"]] || [];
// this.isLoading = false; // this.isLoading = false;
this.getDataList = res["data"] || []; this.getDataList = res['data'] || [];
this.isLoading = false; this.isLoading = false;
}); });
}, },
toWeek() { toWeek() {
this.startDate = dayjs().subtract(7, "day").format("YYYY-MM-DD"); this.startDate = dayjs().subtract(7, 'day').format('YYYY-MM-DD');
this.sliderClass.bgWeekBox = true; this.sliderClass.bgWeekBox = true;
this.sliderClass.bgMonthBox = false; this.sliderClass.bgMonthBox = false;
this.onGetPageData(); this.onGetPageData();
}, },
toMonth() { toMonth() {
this.startDate = dayjs().subtract(30, "day").format("YYYY-MM-DD"); this.startDate = dayjs().subtract(30, 'day').format('YYYY-MM-DD');
this.sliderClass.bgWeekBox = false; this.sliderClass.bgWeekBox = false;
this.sliderClass.bgMonthBox = true; this.sliderClass.bgMonthBox = true;
this.onGetPageData(); this.onGetPageData();
@ -101,7 +75,7 @@ export default {
} else { } else {
this.toWeek(); this.toWeek();
} }
}, 20000); }, this.$store.getters.intervalTime);
}, },
beforeRouteLeave() { beforeRouteLeave() {
clearInterval(this.renderTimer); clearInterval(this.renderTimer);
@ -111,19 +85,19 @@ export default {
<style> <style>
.bgBottomLeftBox { .bgBottomLeftBox {
background-image: url("@/assets/svg/Monitor/BottomLeft/Box.svg"); background-image: url('@/assets/svg/Monitor/BottomLeft/Box.svg');
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.bgWeekBox { .bgWeekBox {
background-image: url("@/assets/svg/Monitor/BottomLeft/WeekActive.svg"); background-image: url('@/assets/svg/Monitor/BottomLeft/WeekActive.svg');
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.bgMonthBox { .bgMonthBox {
background-image: url("@/assets/svg/Monitor/BottomLeft/MonthActive.svg"); background-image: url('@/assets/svg/Monitor/BottomLeft/MonthActive.svg');
} }
.deptBody { .deptBody {

@ -1,15 +1,11 @@
<template> <template>
<div class="w-[71.58vh] h-[40.09vh] bgBottomMidBox mt-[2.68vh] relative"> <div class="w-[71.58vh] h-[40.09vh] bgBottomMidBox mt-[2.68vh] relative">
<div class="flex"> <div class="flex">
<div <div class="w-[12.4vh] h-[5.07vh] ml-[1.85vh] flex justify-between items-center">
class="w-[12.4vh] h-[5.07vh] ml-[1.85vh] flex justify-between items-center"
>
<img src="@/assets/svg/Monitor/Triangle.svg" /> <img src="@/assets/svg/Monitor/Triangle.svg" />
<span class="text-[2.03vh] youshe leading-none">手术等级</span> <span class="text-[2.03vh] youshe leading-none">手术等级</span>
</div> </div>
<div <div class="w-[12.4vh] h-[5.07vh] ml-[27vh] flex justify-between items-center">
class="w-[12.4vh] h-[5.07vh] ml-[27vh] flex justify-between items-center"
>
<img src="@/assets/svg/Monitor/Triangle.svg" /> <img src="@/assets/svg/Monitor/Triangle.svg" />
<span class="text-[2.03vh] youshe leading-none">ASA分级</span> <span class="text-[2.03vh] youshe leading-none">ASA分级</span>
</div> </div>
@ -19,9 +15,7 @@
<span title="手术等级">今日</span> <span title="手术等级">今日</span>
<span title="ASA分级">今日</span> <span title="ASA分级">今日</span>
</div> </div>
<div <div class="w-[35.79vh] h-[24.62vh] border-r border-dashed border-r-[rgba(255,255,255,0.26)]">
class="w-[35.79vh] h-[24.62vh] border-r border-dashed border-r-[rgba(255,255,255,0.26)]"
>
<div class="h-full" ref="echartsContainerLeft"></div> <div class="h-full" ref="echartsContainerLeft"></div>
</div> </div>
<div class="w-[35.79vh] h-[24.62vh]"> <div class="w-[35.79vh] h-[24.62vh]">
@ -32,13 +26,10 @@
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from 'echarts';
import { import { GetMonitorOperationLevel, GetMonitorOperationASALevel } from '@/api/monitor';
GetMonitorOperationLevel, import { fnR } from '@/utils/common';
GetMonitorOperationASALevel, import dayjs from 'dayjs';
} from "@/api/monitor";
import { fnR } from "@/utils/common";
import dayjs from "dayjs";
let chartLeft = null; let chartLeft = null;
let chartRight = null; let chartRight = null;
@ -49,18 +40,18 @@ export default {
chartOptionsLeft: { chartOptionsLeft: {
series: [ series: [
{ {
type: "pie", type: 'pie',
radius: ["32%", "50%"], radius: ['32%', '50%'],
selectedMode: "single", selectedMode: 'single',
data: [ data: [
{ name: "一级", value: 148, selected: false }, { name: '一级', value: 148, selected: false },
{ name: "二级", value: 87, selected: false }, { name: '二级', value: 87, selected: false },
{ name: "三级", value: 75, selected: false }, { name: '三级', value: 75, selected: false },
{ name: "四级", value: 40, selected: false }, { name: '四级', value: 40, selected: false },
], ],
label: { label: {
formatter: "{b}{c}", formatter: '{b}{c}',
color: "inherit", color: 'inherit',
}, },
labelLine: { labelLine: {
show: true, show: true,
@ -74,12 +65,12 @@ export default {
}, },
}, },
{ {
name: "外边框-outBig", name: '外边框-outBig',
type: "pie", type: 'pie',
clockWise: false, // clockWise: false, //
hoverAnimation: false, // hoverAnimation: false, //
center: ["50%", "50%"], center: ['50%', '50%'],
radius: ["62%", "62%"], radius: ['62%', '62%'],
label: { label: {
normal: { normal: {
show: false, show: false,
@ -88,23 +79,23 @@ export default {
data: [ data: [
{ {
value: 9, value: 9,
name: "", name: '',
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 2, borderWidth: 2,
borderColor: "#2F58B4", borderColor: '#2F58B4',
}, },
}, },
}, },
], ],
}, },
{ {
name: "外边框-outSmall", name: '外边框-outSmall',
type: "pie", type: 'pie',
clockWise: false, // clockWise: false, //
hoverAnimation: false, // hoverAnimation: false, //
center: ["50%", "50%"], center: ['50%', '50%'],
radius: ["57%", "57%"], radius: ['57%', '57%'],
label: { label: {
normal: { normal: {
show: false, show: false,
@ -112,48 +103,48 @@ export default {
}, },
showEmptyCircle: true, showEmptyCircle: true,
itemStyle: { itemStyle: {
shadowColor: "rgba(255, 0, 0, 1)", shadowColor: 'rgba(255, 0, 0, 1)',
shadowBlur: 10, shadowBlur: 10,
opacity: 1, opacity: 1,
}, },
data: [ data: [
{ {
value: 9, value: 9,
name: "", name: '',
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 2, borderWidth: 2,
borderColor: "#0D447C", borderColor: '#0D447C',
}, },
}, },
}, },
], ],
}, },
{ {
name: "内边框-inBig", name: '内边框-inBig',
type: "pie", type: 'pie',
clockWise: true, // clockWise: true, //
hoverAnimation: false, // hoverAnimation: false, //
center: ["50%", "50%"], center: ['50%', '50%'],
radius: ["25%", "25%"], radius: ['25%', '25%'],
label: { label: {
normal: { normal: {
show: false, show: false,
}, },
}, },
itemStyle: { itemStyle: {
shadowColor: "rgba(255, 0, 0, 1)", shadowColor: 'rgba(255, 0, 0, 1)',
shadowBlur: 10, shadowBlur: 10,
opacity: 1, opacity: 1,
}, },
data: [ data: [
{ {
value: 9, value: 9,
name: "", name: '',
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 2, borderWidth: 2,
borderColor: "#006CFF", borderColor: '#006CFF',
opacity: 0.4, opacity: 0.4,
}, },
}, },
@ -161,12 +152,12 @@ export default {
], ],
}, },
{ {
name: "内边框-inSmall", name: '内边框-inSmall',
type: "pie", type: 'pie',
clockWise: true, // clockWise: true, //
hoverAnimation: false, // hoverAnimation: false, //
center: ["50%", "50%"], center: ['50%', '50%'],
radius: ["20%", "20%"], radius: ['20%', '20%'],
label: { label: {
normal: { normal: {
show: false, show: false,
@ -175,11 +166,11 @@ export default {
data: [ data: [
{ {
value: 9, value: 9,
name: "", name: '',
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 2, borderWidth: 2,
borderColor: "#fff", borderColor: '#fff',
opacity: 0.2, opacity: 0.2,
}, },
}, },
@ -191,19 +182,19 @@ export default {
chartOptionsRight: { chartOptionsRight: {
series: [ series: [
{ {
type: "pie", type: 'pie',
radius: ["32%", "50%"], radius: ['32%', '50%'],
selectedMode: "single", selectedMode: 'single',
data: [ data: [
{ name: "I级", value: 137, selected: false }, { name: 'I级', value: 137, selected: false },
{ name: "II级", value: 105, selected: false }, { name: 'II级', value: 105, selected: false },
{ name: "III级", value: 58, selected: false }, { name: 'III级', value: 58, selected: false },
{ name: "IV级", value: 37, selected: false }, { name: 'IV级', value: 37, selected: false },
{ name: "V级", value: 13, selected: false }, { name: 'V级', value: 13, selected: false },
], ],
label: { label: {
formatter: "{b}{c}", formatter: '{b}{c}',
color: "inherit", color: 'inherit',
}, },
labelLine: { labelLine: {
show: true, show: true,
@ -217,12 +208,12 @@ export default {
}, },
}, },
{ {
name: "外边框-outBig", name: '外边框-outBig',
type: "pie", type: 'pie',
clockWise: false, // clockWise: false, //
hoverAnimation: false, // hoverAnimation: false, //
center: ["50%", "50%"], center: ['50%', '50%'],
radius: ["62%", "62%"], radius: ['62%', '62%'],
label: { label: {
normal: { normal: {
show: false, show: false,
@ -231,23 +222,23 @@ export default {
data: [ data: [
{ {
value: 9, value: 9,
name: "", name: '',
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 2, borderWidth: 2,
borderColor: "#2F58B4", borderColor: '#2F58B4',
}, },
}, },
}, },
], ],
}, },
{ {
name: "外边框-outSmall", name: '外边框-outSmall',
type: "pie", type: 'pie',
clockWise: false, // clockWise: false, //
hoverAnimation: false, // hoverAnimation: false, //
center: ["50%", "50%"], center: ['50%', '50%'],
radius: ["57%", "57%"], radius: ['57%', '57%'],
label: { label: {
normal: { normal: {
show: false, show: false,
@ -255,48 +246,48 @@ export default {
}, },
showEmptyCircle: true, showEmptyCircle: true,
itemStyle: { itemStyle: {
shadowColor: "rgba(255, 0, 0, 1)", shadowColor: 'rgba(255, 0, 0, 1)',
shadowBlur: 10, shadowBlur: 10,
opacity: 1, opacity: 1,
}, },
data: [ data: [
{ {
value: 9, value: 9,
name: "", name: '',
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 2, borderWidth: 2,
borderColor: "#0D447C", borderColor: '#0D447C',
}, },
}, },
}, },
], ],
}, },
{ {
name: "内边框-inBig", name: '内边框-inBig',
type: "pie", type: 'pie',
clockWise: true, // clockWise: true, //
hoverAnimation: false, // hoverAnimation: false, //
center: ["50%", "50%"], center: ['50%', '50%'],
radius: ["25%", "25%"], radius: ['25%', '25%'],
label: { label: {
normal: { normal: {
show: false, show: false,
}, },
}, },
itemStyle: { itemStyle: {
shadowColor: "rgba(255, 0, 0, 1)", shadowColor: 'rgba(255, 0, 0, 1)',
shadowBlur: 10, shadowBlur: 10,
opacity: 1, opacity: 1,
}, },
data: [ data: [
{ {
value: 9, value: 9,
name: "", name: '',
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 2, borderWidth: 2,
borderColor: "#006CFF", borderColor: '#006CFF',
opacity: 0.4, opacity: 0.4,
}, },
}, },
@ -304,12 +295,12 @@ export default {
], ],
}, },
{ {
name: "内边框-inSmall", name: '内边框-inSmall',
type: "pie", type: 'pie',
clockWise: true, // clockWise: true, //
hoverAnimation: false, // hoverAnimation: false, //
center: ["50%", "50%"], center: ['50%', '50%'],
radius: ["20%", "20%"], radius: ['20%', '20%'],
label: { label: {
normal: { normal: {
show: false, show: false,
@ -318,11 +309,11 @@ export default {
data: [ data: [
{ {
value: 9, value: 9,
name: "", name: '',
itemStyle: { itemStyle: {
normal: { normal: {
borderWidth: 2, borderWidth: 2,
borderColor: "#fff", borderColor: '#fff',
opacity: 0.2, opacity: 0.2,
}, },
}, },
@ -331,30 +322,22 @@ export default {
}, },
], ],
}, },
toDate: dayjs().format("YYYY-MM-DD"), toDate: dayjs().format('YYYY-MM-DD'),
}; };
}, },
methods: { methods: {
onGetPageData() { onGetPageData() {
this.isLoading = true; this.isLoading = true;
Promise.all([ Promise.all([GetMonitorOperationLevel(this.toDate), GetMonitorOperationASALevel(this.toDate)]).then(res => {
GetMonitorOperationLevel(this.toDate), this.chartOptionsLeft.series[0].data[0].value = res[0].data['level1'];
GetMonitorOperationASALevel(this.toDate), this.chartOptionsLeft.series[0].data[1].value = res[0].data['level2'];
]).then((res) => { this.chartOptionsLeft.series[0].data[2].value = res[0].data['level3'];
this.chartOptionsLeft.series[0].data[0].value = res[0].data["level1"]; this.chartOptionsLeft.series[0].data[3].value = res[0].data['level4'];
this.chartOptionsLeft.series[0].data[1].value = res[0].data["level2"]; this.chartOptionsRight.series[0].data[0].value = res[1].data['asaLevel1'];
this.chartOptionsLeft.series[0].data[2].value = res[0].data["level3"]; this.chartOptionsRight.series[0].data[1].value = res[1].data['asaLevel2'];
this.chartOptionsLeft.series[0].data[3].value = res[0].data["level4"]; this.chartOptionsRight.series[0].data[2].value = res[1].data['asaLevel3'];
this.chartOptionsRight.series[0].data[0].value = this.chartOptionsRight.series[0].data[3].value = res[1].data['asaLevel4'];
res[1].data["asaLevel1"]; this.chartOptionsRight.series[0].data[4].value = res[1].data['asaLevel5'];
this.chartOptionsRight.series[0].data[1].value =
res[1].data["asaLevel2"];
this.chartOptionsRight.series[0].data[2].value =
res[1].data["asaLevel3"];
this.chartOptionsRight.series[0].data[3].value =
res[1].data["asaLevel4"];
this.chartOptionsRight.series[0].data[4].value =
res[1].data["asaLevel5"];
if (this.$store.getters.isMock) { if (this.$store.getters.isMock) {
this.chartOptionsLeft.series[0].data[0].value = fnR(); this.chartOptionsLeft.series[0].data[0].value = fnR();
this.chartOptionsLeft.series[0].data[1].value = fnR(); this.chartOptionsLeft.series[0].data[1].value = fnR();
@ -378,13 +361,16 @@ export default {
chartRight = echarts.init(this.$refs.echartsContainerRight); chartRight = echarts.init(this.$refs.echartsContainerRight);
chartRight.setOption(this.chartOptionsRight); chartRight.setOption(this.chartOptionsRight);
this.onGetPageData(); this.onGetPageData();
setInterval(() => {
this.onGetPageData();
}, this.$store.getters.intervalTime);
}, },
}; };
</script> </script>
<style> <style>
.bgBottomMidBox { .bgBottomMidBox {
background-image: url("@/assets/svg/Monitor/BottomMid/Box.svg"); background-image: url('@/assets/svg/Monitor/BottomMid/Box.svg');
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;

@ -1,59 +1,35 @@
<template> <template>
<div <div class="w-[41.75vh] h-[40.09vh] bgBottomRightBox mt-[2.68vh] relative">
class="w-[41.75vh] h-[40.09vh] bgBottomRightBox mt-[2.68vh] relative" <div class="w-[34%] h-[5.07vh] ml-[1.85vh] flex justify-between items-center">
v-loading="isLoading"
>
<div
class="w-[34%] h-[5.07vh] ml-[1.85vh] flex justify-between items-center"
>
<img src="@/assets/svg/Monitor/Triangle.svg" /> <img src="@/assets/svg/Monitor/Triangle.svg" />
<span class="text-[2.03vh] youshe leading-none">手术量统计</span> <span class="text-[2.03vh] youshe leading-none">手术量统计</span>
</div> </div>
<div class="w-[35.46vh] h-[28.05vh] ml-[2.4vh] opBody"> <div class="w-[35.46vh] h-[28.05vh] ml-[2.4vh] opBody">
<div class="h-[30vh] w-full"> <div class="h-[30vh] w-full">
<Histogram <Histogram v-if="getDataList.length" :getDataList="getDataList"></Histogram>
v-if="getDataList.length" <div v-else class="flex flex-col w-[100%] h-[100%] items-center justify-center">
:getDataList="getDataList"
></Histogram>
<div
v-else
class="flex flex-col w-[100%] h-[100%] items-center justify-center"
>
<img src="@/assets/img/noData.png" class="w-[120px]" /> <img src="@/assets/img/noData.png" class="w-[120px]" />
<span>暂无数据</span> <span>暂无数据</span>
</div> </div>
</div> </div>
</div> </div>
<div <div class="absolute right-0 top-1/4 w-[3.51vh] h-[12.6vh]" :class="sliderClass">
class="absolute right-0 top-1/4 w-[3.51vh] h-[12.6vh]" <div class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1] cursor-pointer" @click="toWeek"></div>
:class="sliderClass" <div class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1] cursor-pointer" @click="toMonth"></div>
>
<div
class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1] cursor-pointer"
@click="toWeek"
>
</div>
<div
class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1] cursor-pointer"
@click="toMonth"
>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { GetMonitorOperationNumber } from "@/api/monitor"; import { GetMonitorOperationNumber } from '@/api/monitor';
import dayjs from "dayjs"; import dayjs from 'dayjs';
import Histogram from "@/views/pageMonitor/bottomLeft/OpHistogram.vue"; import Histogram from '@/views/pageMonitor/bottomLeft/OpHistogram.vue';
export default { export default {
data() { data() {
return { return {
startDate: dayjs().subtract(7, "day").format("YYYY-MM-DD"), startDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
endDate: dayjs().format("YYYY-MM-DD"), endDate: dayjs().format('YYYY-MM-DD'),
sliderClass: { sliderClass: {
bgWeekBox: true, bgWeekBox: true,
bgMonthBox: false, bgMonthBox: false,
@ -72,22 +48,22 @@ export default {
GetMonitorOperationNumber({ GetMonitorOperationNumber({
startDate: this.startDate, startDate: this.startDate,
endDate: this.endDate, endDate: this.endDate,
}).then((res) => { }).then(res => {
// this.getDataList = res["data"] || []; // this.getDataList = res["data"] || [];
// this.isLoading = false; // this.isLoading = false;
this.getDataList = [res["data"]] || []; this.getDataList = [res['data']] || [];
this.isLoading = false; this.isLoading = false;
}); });
}, },
toWeek() { toWeek() {
this.startDate = dayjs().subtract(7, "day").format("YYYY-MM-DD"); this.startDate = dayjs().subtract(7, 'day').format('YYYY-MM-DD');
this.sliderClass.bgWeekBox = true; this.sliderClass.bgWeekBox = true;
this.sliderClass.bgMonthBox = false; this.sliderClass.bgMonthBox = false;
this.onGetPageData(); this.onGetPageData();
}, },
toMonth() { toMonth() {
this.startDate = dayjs().subtract(30, "day").format("YYYY-MM-DD"); this.startDate = dayjs().subtract(30, 'day').format('YYYY-MM-DD');
this.sliderClass.bgWeekBox = false; this.sliderClass.bgWeekBox = false;
this.sliderClass.bgMonthBox = true; this.sliderClass.bgMonthBox = true;
this.onGetPageData(); this.onGetPageData();
@ -101,7 +77,7 @@ export default {
} else { } else {
this.toWeek(); this.toWeek();
} }
}, 20000); }, this.$store.getters.intervalTime);
}, },
beforeRouteLeave() { beforeRouteLeave() {
clearInterval(this.renderTimer); clearInterval(this.renderTimer);
@ -111,21 +87,21 @@ export default {
<style> <style>
.bgBottomRightBox { .bgBottomRightBox {
background-image: url("@/assets/svg/Monitor/BottomRight/Box.svg"); background-image: url('@/assets/svg/Monitor/BottomRight/Box.svg');
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.bgWeekBox { .bgWeekBox {
background-image: url("@/assets/svg/Monitor/BottomLeft/WeekActive.svg"); background-image: url('@/assets/svg/Monitor/BottomLeft/WeekActive.svg');
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.bgMonthBox { .bgMonthBox {
background-image: url("@/assets/svg/Monitor/BottomLeft/MonthActive.svg"); background-image: url('@/assets/svg/Monitor/BottomLeft/MonthActive.svg');
} }
.opBody{ .opBody {
height: calc(100% - 5.07vh); height: calc(100% - 5.07vh);
display: flex; display: flex;
justify-content: center; justify-content: center;

@ -1,40 +1,24 @@
<template> <template>
<div <div class="w-[51.29vh] h-[39.62vh] bgTopLeftBox bg-contain bg-center bg-no-repeat p-[3vh] box-border">
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"> <section class="flex justify-between">
<template v-for="(item, index) in overviewData"> <template v-for="(item, index) in overviewData">
<div <div class="w-[12.96vh] h-[14.81vh] bgTopLeftItemBox bg-contain bg-no-repeat pl-[1.48vh] py-[0.92vh]" :key="index">
class="w-[12.96vh] h-[14.81vh] bgTopLeftItemBox bg-contain bg-no-repeat pl-[1.48vh] py-[0.92vh]"
:key="index"
>
<img src="@/assets/svg/Monitor/TopLeft/TriangleBlue.svg" /> <img src="@/assets/svg/Monitor/TopLeft/TriangleBlue.svg" />
<p <p class="tracking-[0.27vh] text-[1.48vh] leading-none mt-[2vh] mb-[2vh] opacity-80">
class="tracking-[0.27vh] text-[1.48vh] leading-none mt-[2vh] mb-[2vh] opacity-80" {{ item['itemName'] }}
>
{{ item["itemName"] }}
</p> </p>
<p class=""> <p class="">
<span class="text-[4.25vh] youshe text-[#733FF3] leading-none">{{ <span class="text-[4.25vh] youshe text-[#733FF3] leading-none">{{ item['itemVal'] }}</span>
item["itemVal"] <span class="text-[2.22vh] youshe text-[#733FF3] leading-none">{{ item['itemUnit'] }}</span>
}}</span>
<span class="text-[2.22vh] youshe text-[#733FF3] leading-none">{{
item["itemUnit"]
}}</span>
</p> </p>
</div> </div>
</template> </template>
</section> </section>
<div <div class="w-[45.18vh] h-[14.81vh] bgTopLeftItemBoxPurple bg-contain bg-no-repeat mt-[3.7vh] px-[2.96vh] py-[2.4vh] flex justify-between items-center">
class="w-[45.18vh] h-[14.81vh] bgTopLeftItemBoxPurple bg-contain bg-no-repeat mt-[3.7vh] px-[2.96vh] py-[2.4vh] flex justify-between items-center"
>
<section> <section>
<div class="flex"> <div class="flex">
<img src="@/assets/svg/Monitor/TopLeft/TrianglePurple.svg" /> <img src="@/assets/svg/Monitor/TopLeft/TrianglePurple.svg" />
<span class="youshe text-[1.75vh] ml-[1.11vh] opacity-80" <span class="youshe text-[1.75vh] ml-[1.11vh] opacity-80">总人数</span>
>总人数</span
>
</div> </div>
<p class="text-[#B53FDF] text-[4.07vh] mt-[1.4vh] youshe leading-none"> <p class="text-[#B53FDF] text-[4.07vh] mt-[1.4vh] youshe leading-none">
{{ totalPopulation }} {{ totalPopulation }}
@ -42,21 +26,13 @@
</section> </section>
<section> <section>
<template v-for="(item, index) in peopleData"> <template v-for="(item, index) in peopleData">
<div <div class="w-[25.55vh] h-[4.07vh] peopleItemBox px-[2.22vh] flex justify-between items-center" :class="!index && 'mb-[1.85vh]'" :key="index">
class="w-[25.55vh] h-[4.07vh] peopleItemBox px-[2.22vh] flex justify-between items-center"
:class="!index && 'mb-[1.85vh]'"
:key="index"
>
<div class="flex items-end"> <div class="flex items-end">
<img src="@/assets/svg/Monitor/TopLeft/PointPurple.svg" /> <img src="@/assets/svg/Monitor/TopLeft/PointPurple.svg" />
<span class="text-[1.48vh] opacity-80 ml-[0.74vh]">{{ <span class="text-[1.48vh] opacity-80 ml-[0.74vh]">{{ item['itemName'] }}</span>
item["itemName"]
}}</span>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<span class="text-[#B53FDF] text-[2.4vh] youshe">{{ <span class="text-[#B53FDF] text-[2.4vh] youshe">{{ item['itemVal'] }}</span>
item["itemVal"]
}}</span>
<span class="text-[1.11vh] opacity-65 ml-[0.74vh]"></span> <span class="text-[1.11vh] opacity-65 ml-[0.74vh]"></span>
</div> </div>
</div> </div>
@ -67,36 +43,36 @@
</template> </template>
<script> <script>
import { GetMonitorOperationCount } from "@/api/monitor"; import { GetMonitorOperationCount } from '@/api/monitor';
import dayjs from "dayjs"; import dayjs from 'dayjs';
export default { export default {
data() { data() {
return { return {
overviewData: [ overviewData: [
{ {
itemName: "首台准点率", itemName: '首台准点率',
itemVal: "0", itemVal: '0',
itemUnit: "%", itemUnit: '%',
}, },
{ {
itemName: "手术间利用率", itemName: '手术间利用率',
itemVal: "0", itemVal: '0',
itemUnit: "%", itemUnit: '%',
}, },
{ {
itemName: "急诊患者", itemName: '急诊患者',
itemVal: "0", itemVal: '0',
itemUnit: "个", itemUnit: '个',
}, },
], ],
peopleData: [ peopleData: [
{ {
itemName: "进行中", itemName: '进行中',
itemVal: "50", itemVal: '50',
}, },
{ {
itemName: "待进行", itemName: '待进行',
itemVal: "300", itemVal: '300',
}, },
], ],
totalPopulation: 0, totalPopulation: 0,
@ -105,62 +81,57 @@ export default {
}, },
methods: { methods: {
onGetPageData() { onGetPageData() {
let nowDay = dayjs().format("YYYY-MM-DD"); this.isLoading = true;
let nowDay = dayjs().format('YYYY-MM-DD');
if (this.$store.getters.isMock) { if (this.$store.getters.isMock) {
nowDay = "2024-06-06"; nowDay = '2024-06-06';
} }
GetMonitorOperationCount(nowDay).then((res) => { GetMonitorOperationCount(nowDay).then(res => {
if (!res.data) { if (!res.data) {
return; return;
} }
let fisrtRate = res["data"]["firstPunctualityRate"]; let fisrtRate = res['data']['firstPunctualityRate'];
if (fisrtRate.includes("%")) { if (fisrtRate.includes('%')) {
this.overviewData[0]["itemVal"] = fisrtRate.slice(0, -1); this.overviewData[0]['itemVal'] = fisrtRate.slice(0, -1);
} else { } else {
this.overviewData[0]["itemVal"] = Number(fisrtRate); this.overviewData[0]['itemVal'] = Number(fisrtRate);
} }
let roomUserRate = res["data"]["roomUserRate"]; let roomUserRate = res['data']['roomUserRate'];
if (roomUserRate.includes("%")) { if (roomUserRate.includes('%')) {
this.overviewData[1]["itemVal"] = roomUserRate.slice(0, -1); this.overviewData[1]['itemVal'] = roomUserRate.slice(0, -1);
} else { } else {
this.overviewData[1]["itemVal"] = Number(roomUserRate); this.overviewData[1]['itemVal'] = Number(roomUserRate);
} }
this.overviewData[2]["itemVal"] = res["data"]["patEmergencyCount"]; this.overviewData[2]['itemVal'] = res['data']['patEmergencyCount'];
this.totalPopulation = res["data"]["patCount"]; this.totalPopulation = res['data']['patCount'];
this.peopleData[0]["itemVal"] = res["data"]["patOperationing"]; this.peopleData[0]['itemVal'] = res['data']['patOperationing'];
this.peopleData[1]["itemVal"] = res["data"]["patWating"]; this.peopleData[1]['itemVal'] = res['data']['patWating'];
this.isLoading = false; this.isLoading = false;
}); });
}, },
}, },
mounted() { mounted() {
this.onGetPageData(); this.onGetPageData();
setInterval(() => {
this.onGetPageData();
}, this.$store.getters.intervalTime);
}, },
}; };
</script> </script>
<style> <style>
.bgTopLeftBox { .bgTopLeftBox {
background-image: url("@/assets/svg/Monitor/TopLeft/Box.svg"); background-image: url('@/assets/svg/Monitor/TopLeft/Box.svg');
} }
.bgTopLeftItemBox { .bgTopLeftItemBox {
background-image: url("@/assets/svg/Monitor/TopLeft/ItemBox.svg"); background-image: url('@/assets/svg/Monitor/TopLeft/ItemBox.svg');
} }
.bgTopLeftItemBoxPurple { .bgTopLeftItemBoxPurple {
background-image: url("@/assets/svg/Monitor/TopLeft/ItemBoxPurple.svg"); background-image: url('@/assets/svg/Monitor/TopLeft/ItemBoxPurple.svg');
} }
.peopleItemBox { .peopleItemBox {
background: linear-gradient( background: linear-gradient(271deg, rgba(85, 255, 212, 0.045) 2%, rgba(35, 150, 121, 0.066) 99%);
271deg,
rgba(85, 255, 212, 0.045) 2%,
rgba(35, 150, 121, 0.066) 99%
);
border: 1.5px solid; border: 1.5px solid;
border-image: linear-gradient( border-image: linear-gradient(159deg, rgba(169, 213, 255, 0.4) -8%, rgba(169, 213, 255, 0) 38%) 1.5;
159deg,
rgba(169, 213, 255, 0.4) -8%,
rgba(169, 213, 255, 0) 38%
)
1.5;
} }
</style> </style>

@ -1,103 +1,37 @@
<template> <template>
<div <div class="w-[116.94vh] h-[39.62vh] bgTopRightBox bg-contain bg-center bg-no-repeat p-[2.96vh] box-border">
class="w-[116.94vh] h-[39.62vh] bgTopRightBox bg-contain bg-center bg-no-repeat p-[2.96vh] box-border" <el-carousel direction="vertical" :autoplay="true" :interval="5000" indicatorPosition="none">
v-loading="isLoading"
>
<el-carousel
direction="vertical"
:autoplay="false"
:interval="5000"
indicatorPosition="none"
>
<el-carousel-item v-for="item in opList" :key="item['roomCode']"> <el-carousel-item v-for="item in opList" :key="item['roomCode']">
<section> <section>
<template v-for="(subItem, index) in item"> <template v-for="(subItem, index) in item">
<div class="w-[12.59vh] h-[9.81vh] ItemBox relative" :key="index"> <div class="w-[12.59vh] h-[9.81vh] ItemBox relative" :key="index">
<p <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">
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'] }}
>
{{ subItem["roomName"] }}
</p> </p>
<div <div class="absolute w-[10vh] h-[2.77vh] left-[1.03vh] bottom-[1.48vh]">
class="absolute w-[10vh] h-[2.77vh] left-[1.03vh] bottom-[1.48vh]" <div class="w-full h-full flex justify-between items-center" v-if="subItem.procStatus == 10">
> <img src="@/assets/svg/Monitor/TopRight/opRoom.svg" class="relative top-[-2px]" />
<div <span class="text-[1.85vh] text-[#35CEFD] youshe text-nowrap">{{ subItem['operStatusName'] }}</span>
class="w-full h-full flex justify-between items-center"
v-if="subItem.procStatus == 10"
>
<img
src="@/assets/svg/Monitor/TopRight/opRoom.svg"
class="relative top-[-2px]"
/>
<span
class="text-[1.85vh] text-[#35CEFD] youshe text-nowrap"
>{{ subItem["operStatusName"] }}</span
>
</div> </div>
<div <div class="w-full h-full flex justify-between items-center" v-else-if="subItem.procStatus == 15">
class="w-full h-full flex justify-between items-center" <img src="@/assets/svg/Monitor/TopRight/anesStart.svg" class="relative top-[-2px]" />
v-else-if="subItem.procStatus == 15" <span class="text-[1.85vh] text-[#424CFE] youshe text-nowrap">{{ subItem['operStatusName'] }}</span>
>
<img
src="@/assets/svg/Monitor/TopRight/anesStart.svg"
class="relative top-[-2px]"
/>
<span
class="text-[1.85vh] text-[#424CFE] youshe text-nowrap"
>{{ subItem["operStatusName"] }}</span
>
</div> </div>
<div <div class="w-full h-full flex justify-between items-center" v-else-if="subItem.procStatus == 20">
class="w-full h-full flex justify-between items-center" <img src="@/assets/svg/Monitor/TopRight/OpingIcon.svg" class="relative top-[-2px]" />
v-else-if="subItem.procStatus == 20" <span class="text-[1.85vh] text-[#B53FDF] youshe text-nowrap">{{ subItem['operStatusName'] }}</span>
>
<img
src="@/assets/svg/Monitor/TopRight/OpingIcon.svg"
class="relative top-[-2px]"
/>
<span
class="text-[1.85vh] text-[#B53FDF] youshe text-nowrap"
>{{ subItem["operStatusName"] }}</span
>
</div> </div>
<div <div class="w-full h-full flex justify-between items-center" v-else-if="subItem.procStatus == 25">
class="w-full h-full flex justify-between items-center" <img src="@/assets/svg/Monitor/TopRight/opEnd.svg" class="relative top-[-2px]" />
v-else-if="subItem.procStatus == 25" <span class="text-[1.85vh] text-[#BAE7A4] youshe text-nowrap">{{ subItem['operStatusName'] }}</span>
>
<img
src="@/assets/svg/Monitor/TopRight/opEnd.svg"
class="relative top-[-2px]"
/>
<span
class="text-[1.85vh] text-[#BAE7A4] youshe text-nowrap"
>{{ subItem["operStatusName"] }}</span
>
</div> </div>
<div <div class="w-full h-full flex justify-between items-center" v-else-if="subItem.procStatus == 30">
class="w-full h-full flex justify-between items-center" <img src="@/assets/svg/Monitor/TopRight/OpendIcon.svg" class="relative top-[-2px]" />
v-else-if="subItem.procStatus == 30" <span class="text-[1.85vh] text-[#946FEC] youshe text-nowrap">{{ subItem['operStatusName'] }}</span>
>
<img
src="@/assets/svg/Monitor/TopRight/OpendIcon.svg"
class="relative top-[-2px]"
/>
<span
class="text-[1.85vh] text-[#946FEC] youshe text-nowrap"
>{{ subItem["operStatusName"] }}</span
>
</div> </div>
<div <div class="w-full h-full flex justify-between items-center" v-else>
class="w-full h-full flex justify-between items-center" <img src="@/assets/svg/Monitor/TopRight/OpWaitIcon.svg" class="relative top-[-2px]" />
v-else <span class="text-[1.85vh] text-[#0CFFFF] youshe text-nowrap">{{ subItem['operStatusName'] }}</span>
>
<img
src="@/assets/svg/Monitor/TopRight/OpWaitIcon.svg"
class="relative top-[-2px]"
/>
<span
class="text-[1.85vh] text-[#0CFFFF] youshe text-nowrap"
>{{ subItem["operStatusName"] }}</span
>
</div> </div>
</div> </div>
</div> </div>
@ -109,9 +43,9 @@
</template> </template>
<script> <script>
import { Carousel, CarouselItem } from "element-ui"; import { Carousel, CarouselItem } from 'element-ui';
import { GetMonitorOperationRoomStatus } from "@/api/monitor"; import { GetMonitorOperationRoomStatus } from '@/api/monitor';
import dayjs from "dayjs"; import dayjs from 'dayjs';
export default { export default {
data() { data() {
return { return {
@ -121,21 +55,20 @@ export default {
}, },
methods: { methods: {
onGetPageData() { onGetPageData() {
let nowDay = dayjs().format("YYYY-MM-DD"); let nowDay = dayjs().format('YYYY-MM-DD');
if (this.$store.getters.isMock) { if (this.$store.getters.isMock) {
nowDay = "2024-06-06"; nowDay = '2024-06-06';
} }
GetMonitorOperationRoomStatus(nowDay).then((res) => { GetMonitorOperationRoomStatus(nowDay).then(res => {
this.formatData(res["data"]); this.formatData(res['data']);
this.isLoading = false; this.isLoading = false;
}); });
}, },
formatData(pageData) { formatData(pageData) {
console.log("pageData:", pageData);
this.opList = []; this.opList = [];
let group = 0; let group = 0;
for (let i = 0; i < pageData["length"]; i++) { for (let i = 0; i < pageData['length']; i++) {
group = parseInt(i / 21); group = parseInt(i / 21);
if (this.opList[group]) { if (this.opList[group]) {
this.opList[group].push(pageData[i]); this.opList[group].push(pageData[i]);
@ -147,17 +80,20 @@ export default {
}, },
mounted() { mounted() {
this.onGetPageData(); this.onGetPageData();
setInterval(() => {
this.onGetPageData();
}, this.$store.getters.intervalTime);
}, },
components: { components: {
"el-carousel": Carousel, 'el-carousel': Carousel,
"el-carousel-item": CarouselItem, 'el-carousel-item': CarouselItem,
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.bgTopRightBox { .bgTopRightBox {
background-image: url("@/assets/svg/Monitor/TopRight/Box.svg"); background-image: url('@/assets/svg/Monitor/TopRight/Box.svg');
:deep(.el-carousel) { :deep(.el-carousel) {
height: 39.62vh; height: 39.62vh;
.el-carousel__container { .el-carousel__container {
@ -175,33 +111,23 @@ export default {
} }
.ItemBox { .ItemBox {
background-image: url("@/assets/svg/Monitor/TopRight/ItemBox.svg"); background-image: url('@/assets/svg/Monitor/TopRight/ItemBox.svg');
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.PBg { .PBg {
background: linear-gradient( background: linear-gradient(90deg, rgba(0, 147, 255, 0) 0%, rgba(0, 147, 255, 0.37) 44%, rgba(0, 147, 255, 0) 99%);
90deg,
rgba(0, 147, 255, 0) 0%,
rgba(0, 147, 255, 0.37) 44%,
rgba(0, 147, 255, 0) 99%
);
position: relative; position: relative;
&::after { &::after {
content: ""; content: '';
display: block; display: block;
width: 100%; width: 100%;
height: 1px; height: 1px;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: linear-gradient( background: linear-gradient(90deg, rgba(0, 147, 255, 0) 0%, #0093ff 49%, rgba(0, 147, 255, 0) 99%);
90deg,
rgba(0, 147, 255, 0) 0%,
#0093ff 49%,
rgba(0, 147, 255, 0) 99%
);
} }
} }
</style> </style>

@ -1,5 +1,5 @@
<template> <template>
<div class="h-[32.4vh] mt-[2.77vh] bgLeftBottomBox pt-[3.24vh]" v-loading="isLoading"> <div class="h-[32.4vh] mt-[2.77vh] bgLeftBottomBox pt-[3.24vh]">
<div class="w-[43.79vh] h-[26.85vh] mx-auto" ref="echartsContainer"></div> <div class="w-[43.79vh] h-[26.85vh] mx-auto" ref="echartsContainer"></div>
</div> </div>
</template> </template>
@ -90,6 +90,9 @@ export default {
mounted() { mounted() {
chart = echarts.init(this.$refs.echartsContainer); chart = echarts.init(this.$refs.echartsContainer);
this.onGetPageData(); this.onGetPageData();
setInterval(() => {
this.onGetPageData();
}, this.$store.getters.intervalTime);
}, },
}; };
</script> </script>

@ -1,18 +1,11 @@
<template> <template>
<div class="h-[48.79vh] bgLeftTopBox p-[1.85vh]" v-loading="isLoading"> <div class="h-[48.79vh] bgLeftTopBox p-[1.85vh]">
<div <div class="w-[21.29vh] h-[21.29vh] mx-auto m-[2vh]" ref="echartsContainer"></div>
class="w-[21.29vh] h-[21.29vh] mx-auto m-[2vh]" <div class="w-[45.18vh] h-[14.81vh] bgTopLeftItemBox mx-auto mt-[4.8vh] px-[2.96vh] py-[2.4vh] flex justify-between items-center">
ref="echartsContainer"
></div>
<div
class="w-[45.18vh] h-[14.81vh] bgTopLeftItemBox mx-auto mt-[4.8vh] px-[2.96vh] py-[2.4vh] flex justify-between items-center"
>
<section> <section>
<div class="flex"> <div class="flex">
<img src="@/assets/svg/Monitor/TopLeft/TrianglePurple.svg" /> <img src="@/assets/svg/Monitor/TopLeft/TrianglePurple.svg" />
<span class="youshe text-[1.75vh] ml-[1.11vh] opacity-80" <span class="youshe text-[1.75vh] ml-[1.11vh] opacity-80">总人数</span>
>总人数</span
>
</div> </div>
<p class="text-[#733FF3] text-[4.07vh] mt-[1.4vh] youshe leading-none"> <p class="text-[#733FF3] text-[4.07vh] mt-[1.4vh] youshe leading-none">
{{ totalPopulation }} {{ totalPopulation }}
@ -20,21 +13,13 @@
</section> </section>
<section> <section>
<template v-for="(item, index) in peopleData"> <template v-for="(item, index) in peopleData">
<div <div class="w-[25.55vh] h-[4.07vh] peopleItemBox px-[2.22vh] flex justify-between items-center" :class="!index && 'mb-[1.85vh]'" :key="index">
class="w-[25.55vh] h-[4.07vh] peopleItemBox px-[2.22vh] flex justify-between items-center"
:class="!index && 'mb-[1.85vh]'"
:key="index"
>
<div class="flex items-end"> <div class="flex items-end">
<img src="@/assets/svg/Operation/LeftTop/PointBlue.svg" /> <img src="@/assets/svg/Operation/LeftTop/PointBlue.svg" />
<span class="text-[1.48vh] opacity-80 ml-[0.74vh]">{{ <span class="text-[1.48vh] opacity-80 ml-[0.74vh]">{{ item['itemName'] }}</span>
item["itemName"]
}}</span>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<span class="text-[#733FF3] text-[2.4vh] youshe">{{ <span class="text-[#733FF3] text-[2.4vh] youshe">{{ item['itemVal'] }}</span>
item["itemVal"]
}}</span>
<span class="text-[1.11vh] opacity-65 ml-[0.74vh]"></span> <span class="text-[1.11vh] opacity-65 ml-[0.74vh]"></span>
</div> </div>
</div> </div>
@ -45,9 +30,9 @@
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from 'echarts';
import { GetMonitorOperationCount } from "@/api/monitor"; import { GetMonitorOperationCount } from '@/api/monitor';
import dayjs from "dayjs"; import dayjs from 'dayjs';
let chart = null; let chart = null;
export default { export default {
data() { data() {
@ -55,15 +40,15 @@ export default {
chartOptions: { chartOptions: {
series: [ series: [
{ {
type: "gauge", type: 'gauge',
startAngle: 90, startAngle: 90,
endAngle: -270, endAngle: -270,
pointer: { pointer: {
show: false, show: false,
}, },
max: 100, max: 100,
radius: "100%", radius: '100%',
center: ["50%", "50%"], center: ['50%', '50%'],
progress: { progress: {
show: true, show: true,
overlap: false, overlap: false,
@ -71,7 +56,7 @@ export default {
clip: false, clip: false,
itemStyle: { itemStyle: {
color: { color: {
type: "linear", type: 'linear',
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
@ -79,11 +64,11 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "#9C85FA", color: '#9C85FA',
}, },
{ {
offset: 1, offset: 1,
color: "#5531E7", color: '#5531E7',
}, },
], ],
global: false, global: false,
@ -92,7 +77,7 @@ export default {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: [[1, "#4F518C"]], color: [[1, '#4F518C']],
opacity: 0.7, opacity: 0.7,
width: 30, width: 30,
}, },
@ -112,21 +97,21 @@ export default {
data: [ data: [
{ {
value: 86, value: 86,
name: "首台准点率", name: '首台准点率',
title: { title: {
offsetCenter: ["0%", "20%"], offsetCenter: ['0%', '20%'],
fontSize: 22, fontSize: 22,
fontFamily: "Microsoft YaHei", fontFamily: 'Microsoft YaHei',
color: "#fff", color: '#fff',
overflow: "break", overflow: 'break',
lineHeight: 20, lineHeight: 20,
}, },
detail: { detail: {
valueAnimation: true, valueAnimation: true,
offsetCenter: ["0%", "-15%"], offsetCenter: ['0%', '-15%'],
fontSize: 40, fontSize: 40,
fontFamily: "DIN-Bold,Microsoft YaHei", fontFamily: 'DIN-Bold,Microsoft YaHei',
color: "#03FFFF", color: '#03FFFF',
formatter: `{value}%`, formatter: `{value}%`,
}, },
}, },
@ -136,12 +121,12 @@ export default {
}, },
peopleData: [ peopleData: [
{ {
itemName: "进行中", itemName: '进行中',
itemVal: "50", itemVal: '50',
}, },
{ {
itemName: "待进行", itemName: '待进行',
itemVal: "300", itemVal: '300',
}, },
], ],
totalPopulation: 0, totalPopulation: 0,
@ -150,29 +135,25 @@ export default {
}, },
methods: { methods: {
onGetPageData() { onGetPageData() {
let nowDay = dayjs().format("YYYY-MM-DD"); let nowDay = dayjs().format('YYYY-MM-DD');
if (this.$store.getters.isMock) { if (this.$store.getters.isMock) {
nowDay = "2024-06-06"; nowDay = '2024-06-06';
} }
GetMonitorOperationCount(nowDay).then((res) => { GetMonitorOperationCount(nowDay).then(res => {
if (!res.data) { if (!res.data) {
this.isLoading = false; this.isLoading = false;
return; return;
} }
let fisrtRate = res["data"]["firstPunctualityRate"]; let fisrtRate = res['data']['firstPunctualityRate'];
if (fisrtRate.includes("%")) { if (fisrtRate.includes('%')) {
this.chartOptions["series"][0]["data"][0]["value"] = fisrtRate.slice( this.chartOptions['series'][0]['data'][0]['value'] = fisrtRate.slice(0, -1);
0,
-1
);
} else { } else {
this.chartOptions["series"][0]["data"][0]["value"] = this.chartOptions['series'][0]['data'][0]['value'] = Number(fisrtRate);
Number(fisrtRate);
} }
this.peopleData[0]["itemVal"] = res["data"]["patOperationing"]; this.peopleData[0]['itemVal'] = res['data']['patOperationing'];
this.peopleData[1]["itemVal"] = res["data"]["patWating"]; this.peopleData[1]['itemVal'] = res['data']['patWating'];
this.totalPopulation = res["data"]["patCount"]; this.totalPopulation = res['data']['patCount'];
chart.setOption(this.chartOptions); chart.setOption(this.chartOptions);
this.isLoading = false; this.isLoading = false;
}); });
@ -181,35 +162,29 @@ export default {
mounted() { mounted() {
chart = echarts.init(this.$refs.echartsContainer); chart = echarts.init(this.$refs.echartsContainer);
this.onGetPageData(); this.onGetPageData();
setInterval(() => {
this.onGetPageData();
}, this.$store.getters.intervalTime);
}, },
}; };
</script> </script>
<style> <style>
.bgLeftTopBox { .bgLeftTopBox {
background-image: url("@/assets/svg/Operation/LeftTop/Box.svg"); background-image: url('@/assets/svg/Operation/LeftTop/Box.svg');
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.bgTopLeftItemBox { .bgTopLeftItemBox {
background-image: url("@/assets/svg/Operation/LeftTop/ItemBox.svg"); background-image: url('@/assets/svg/Operation/LeftTop/ItemBox.svg');
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.peopleItemBox { .peopleItemBox {
background: linear-gradient( background: linear-gradient(271deg, rgba(85, 255, 212, 0.045) 2%, rgba(35, 150, 121, 0.066) 99%);
271deg,
rgba(85, 255, 212, 0.045) 2%,
rgba(35, 150, 121, 0.066) 99%
);
border: 1.5px solid; border: 1.5px solid;
border-image: linear-gradient( border-image: linear-gradient(159deg, rgba(169, 213, 255, 0.4) -8%, rgba(169, 213, 255, 0) 38%) 1.5;
159deg,
rgba(169, 213, 255, 0.4) -8%,
rgba(169, 213, 255, 0) 38%
)
1.5;
} }
</style> </style>

@ -3,93 +3,46 @@
<div class="w-[112.96vh] h-[77.03vh] mx-auto mt-[2.96vh]"> <div class="w-[112.96vh] h-[77.03vh] mx-auto mt-[2.96vh]">
<div class="h-[4.44vh] leading-[4.44vh] text-center bg-[#322369]"> <div class="h-[4.44vh] leading-[4.44vh] text-center bg-[#322369]">
<div class="inline-block"> <div class="inline-block">
<div class="inline-block w-[5.11vh] text-[#AAAAAA] text-[1.48vh]"> <div class="inline-block w-[5.11vh] text-[#AAAAAA] text-[1.48vh]">手术间</div>
手术间 <div class="inline-block w-[11.11vh] text-[#AAAAAA] text-[1.48vh]">人员</div>
</div> <div class="inline-block w-[16.51vh] text-[#AAAAAA] text-[1.48vh]">手术名称</div>
<div class="inline-block w-[11.11vh] text-[#AAAAAA] text-[1.48vh]"> <div class="inline-block w-[13.11vh] text-[#AAAAAA] text-[1.48vh]">申请类型</div>
人员 <div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">入手术室时间</div>
</div> <div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">麻醉开始时间</div>
<div class="inline-block w-[16.51vh] text-[#AAAAAA] text-[1.48vh]"> <div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">手术开始时间</div>
手术名称 <div class="inline-block w-[11.11vh] text-[#AAAAAA] text-[1.48vh]">是否准点</div>
</div>
<div class="inline-block w-[13.11vh] text-[#AAAAAA] text-[1.48vh]">
申请类型
</div>
<div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">
入手术室时间
</div>
<div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">
麻醉开始时间
</div>
<div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">
手术开始时间
</div>
<div class="inline-block w-[11.11vh] text-[#AAAAAA] text-[1.48vh]">
是否准点
</div>
</div> </div>
</div> </div>
<div class="h-[72.58vh]"> <div class="h-[72.58vh]">
<el-carousel <el-carousel direction="vertical" :autoplay="true" :interval="15000" indicatorPosition="none">
direction="vertical"
:autoplay="true"
:interval="15000"
indicatorPosition="none"
>
<el-carousel-item v-for="(item, index) in scheduList" :key="index"> <el-carousel-item v-for="(item, index) in scheduList" :key="index">
<template v-for="(subItem, index) in item"> <template v-for="(subItem, index) in item">
<div <div class="h-[4.44vh] leading-[4.44vh] mt-[0.74vh] text-center itemStyle" :key="index">
class="h-[4.44vh] leading-[4.44vh] mt-[0.74vh] text-center itemStyle"
:key="index"
>
<div class="inline-block"> <div class="inline-block">
<div <div class="inline-block align-top w-[5.11vh] text-[1.48vh] panmen">
class="inline-block align-top w-[5.11vh] text-[1.48vh] panmen" {{ subItem['roomName'] }}
>
{{ subItem["roomName"] }}
</div> </div>
<div class="inline-block align-top w-[11.11vh] text-[1.48vh]"> <div class="inline-block align-top w-[11.11vh] text-[1.48vh]">
{{ subItem["patientName"] }} {{ subItem['patientName'] }}
</div> </div>
<div <div class="inline-block align-top w-[16.51vh] text-[1.48vh] px-1">
class="inline-block align-top w-[16.51vh] text-[1.48vh] px-1" <marquee scrollamount="2">{{ subItem['operationName'] }}</marquee>
>
<marquee scrollamount="2">{{
subItem["operationName"]
}}</marquee>
</div> </div>
<div <div class="inline-block align-middle w-[13.11vh] text-[1.48vh]">
class="inline-block align-middle w-[13.11vh] text-[1.48vh]" <img class="mx-auto" src="@/assets/svg/Operation/RightMid/Emergency.svg" v-if="subItem['OperationType']" />
> <img class="mx-auto" src="@/assets/svg/Operation/RightMid/Other.svg" v-else />
<img
class="mx-auto"
src="@/assets/svg/Operation/RightMid/Emergency.svg"
v-if="subItem['OperationType']"
/>
<img
class="mx-auto"
src="@/assets/svg/Operation/RightMid/Other.svg"
v-else
/>
</div> </div>
<div class="inline-block align-top w-[16.66vh] text-[1.48vh]"> <div class="inline-block align-top w-[16.66vh] text-[1.48vh]">
{{ formatData(subItem["inDateTime"]) }} {{ formatData(subItem['inDateTime']) }}
</div> </div>
<div class="inline-block align-top w-[16.66vh] text-[1.48vh]"> <div class="inline-block align-top w-[16.66vh] text-[1.48vh]">
{{ formatData(subItem["anesStartTime"]) }} {{ formatData(subItem['anesStartTime']) }}
</div> </div>
<div class="inline-block align-top w-[16.66vh] text-[1.48vh]"> <div class="inline-block align-top w-[16.66vh] text-[1.48vh]">
{{ formatData(subItem["operStartTime"]) }} {{ formatData(subItem['operStartTime']) }}
</div> </div>
<div <div class="inline-block align-top w-[11.11vh] text-[1.48vh]" :class="subItem['IsFirstOnTime'] ? 'text-[#349AFC]' : 'text-[#A53FAF]'">
class="inline-block align-top w-[11.11vh] text-[1.48vh]" {{ subItem['IsFirstOnTime'] ? '准点' : '不准点' }}
:class="
subItem['IsFirstOnTime']
? 'text-[#349AFC]'
: 'text-[#A53FAF]'
"
>
{{ subItem["IsFirstOnTime"] ? "准点" : "不准点" }}
</div> </div>
</div> </div>
</div> </div>
@ -102,9 +55,9 @@
</template> </template>
<script> <script>
import { Carousel, CarouselItem } from "element-ui"; import { Carousel, CarouselItem } from 'element-ui';
import { GetMonitorOperationCount } from "@/api/operation"; import { GetMonitorOperationCount } from '@/api/operation';
import dayjs from "dayjs"; import dayjs from 'dayjs';
export default { export default {
data() { data() {
return { return {
@ -114,45 +67,48 @@ export default {
}, },
methods: { methods: {
onGetPageData() { onGetPageData() {
let nowDay = dayjs().format("YYYY-MM-DD"); let nowDay = dayjs().format('YYYY-MM-DD');
if (this.$store.getters.isMock) { if (this.$store.getters.isMock) {
nowDay = "2024-06-06"; nowDay = '2024-06-06';
} }
GetMonitorOperationCount(nowDay).then((res) => { GetMonitorOperationCount(nowDay).then(res => {
this.scheduList = []; this.scheduList = [];
let group = 0; let group = 0;
for (let i = 0; i < res["data"]["length"]; i++) { for (let i = 0; i < res['data']['length']; i++) {
group = parseInt(i / 14); group = parseInt(i / 14);
if (this.scheduList[group]) { if (this.scheduList[group]) {
this.scheduList[group].push(res["data"][i]); this.scheduList[group].push(res['data'][i]);
} else { } else {
this.scheduList[group] = [res["data"][i]]; this.scheduList[group] = [res['data'][i]];
} }
} }
this.isLoading = false; this.isLoading = false;
}); });
}, },
formatData(date) { formatData(date) {
let txt = ""; let txt = '';
if (date) { if (date) {
txt = dayjs(date).format("YYYY-MM-DD HH:mm:ss"); txt = dayjs(date).format('YYYY-MM-DD HH:mm:ss');
} }
return txt; return txt;
}, },
}, },
mounted() { mounted() {
this.onGetPageData(); this.onGetPageData();
setInterval(() => {
this.onGetPageData();
}, this.$store.getters.intervalTime);
}, },
components: { components: {
"el-carousel": Carousel, 'el-carousel': Carousel,
"el-carousel-item": CarouselItem, 'el-carousel-item': CarouselItem,
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.bgRightMidBox { .bgRightMidBox {
background-image: url("@/assets/svg/Operation/RightMid/Box.svg"); background-image: url('@/assets/svg/Operation/RightMid/Box.svg');
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;

@ -1,5 +1,5 @@
<template> <template>
<div class="h-[32.31vh] mt-[2.77vh] pt-[4vh] bgLeftBottomBox" v-loading="isLoading"> <div class="h-[32.31vh] mt-[2.77vh] pt-[4vh] bgLeftBottomBox">
<div class="h-[20vh] flex justify-center" ref="echartsContainer"></div> <div class="h-[20vh] flex justify-center" ref="echartsContainer"></div>
<section class="w-[37.96vh] h-[5.18vh] leading-[5.18vh] text-center border border-[#2D126F] mx-auto"> <section class="w-[37.96vh] h-[5.18vh] leading-[5.18vh] text-center border border-[#2D126F] mx-auto">
<span class="text-[1.85vh] youshe">平均接台时间</span> <span class="text-[1.85vh] youshe">平均接台时间</span>
@ -105,6 +105,9 @@ export default {
mounted() { mounted() {
chart = echarts.init(this.$refs.echartsContainer); chart = echarts.init(this.$refs.echartsContainer);
this.onGetPageData(); this.onGetPageData();
setInterval(() => {
this.onGetPageData();
}, this.$store.getters.intervalTime);
}, },
}; };
</script> </script>

@ -1,12 +1,7 @@
<template> <template>
<div class="h-[48.79vh] bgLeftTopBox p-[1.85vh]" v-loading="isLoading"> <div class="h-[48.79vh] bgLeftTopBox p-[1.85vh]">
<div <div class="w-[22vh] h-[22vh] mx-auto mt-[4.6vh] flex justify-center" ref="echartsContainer"></div>
class="w-[22vh] h-[22vh] mx-auto mt-[4.6vh] flex justify-center" <div class="w-[37.96vh] h-[6.29vh] mx-auto mt-[8.6vh] px-[4.96vh] flex justify-between items-center bgTopLeftItemBox">
ref="echartsContainer"
></div>
<div
class="w-[37.96vh] h-[6.29vh] mx-auto mt-[8.6vh] px-[4.96vh] flex justify-between items-center bgTopLeftItemBox"
>
<div class="flex"> <div class="flex">
<img src="@/assets/svg/Room/LeftTop/TrianglePurple.svg" /> <img src="@/assets/svg/Room/LeftTop/TrianglePurple.svg" />
<span class="text-[1.85vh] youshe ml-[1.4vh]">手术间数</span> <span class="text-[1.85vh] youshe ml-[1.4vh]">手术间数</span>
@ -17,9 +12,9 @@
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from 'echarts';
import { GetMonitorOperationCount } from "@/api/monitor"; import { GetMonitorOperationCount } from '@/api/monitor';
import dayjs from "dayjs"; import dayjs from 'dayjs';
let chart = null; let chart = null;
export default { export default {
data() { data() {
@ -27,15 +22,15 @@ export default {
chartOptions: { chartOptions: {
series: [ series: [
{ {
type: "gauge", type: 'gauge',
startAngle: 90, startAngle: 90,
endAngle: -270, endAngle: -270,
pointer: { pointer: {
show: false, show: false,
}, },
max: 100, max: 100,
radius: "100%", radius: '100%',
center: ["50%", "50%"], center: ['50%', '50%'],
progress: { progress: {
show: true, show: true,
overlap: false, overlap: false,
@ -43,7 +38,7 @@ export default {
clip: false, clip: false,
itemStyle: { itemStyle: {
color: { color: {
type: "linear", type: 'linear',
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
@ -51,11 +46,11 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "#9C85FA", color: '#9C85FA',
}, },
{ {
offset: 1, offset: 1,
color: "#5531E7", color: '#5531E7',
}, },
], ],
global: false, global: false,
@ -64,7 +59,7 @@ export default {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: [[1, "#4F518C"]], color: [[1, '#4F518C']],
opacity: 0.7, opacity: 0.7,
width: 30, width: 30,
}, },
@ -84,21 +79,21 @@ export default {
data: [ data: [
{ {
value: 86, value: 86,
name: "首台准点率", name: '首台准点率',
title: { title: {
offsetCenter: ["0%", "20%"], offsetCenter: ['0%', '20%'],
fontSize: 22, fontSize: 22,
fontFamily: "Microsoft YaHei", fontFamily: 'Microsoft YaHei',
color: "#fff", color: '#fff',
overflow: "break", overflow: 'break',
lineHeight: 20, lineHeight: 20,
}, },
detail: { detail: {
valueAnimation: true, valueAnimation: true,
offsetCenter: ["0%", "-15%"], offsetCenter: ['0%', '-15%'],
fontSize: 40, fontSize: 40,
fontFamily: "DIN-Bold,Microsoft YaHei", fontFamily: 'DIN-Bold,Microsoft YaHei',
color: "#03FFFF", color: '#03FFFF',
formatter: `{value}%`, formatter: `{value}%`,
}, },
}, },
@ -112,25 +107,21 @@ export default {
}, },
methods: { methods: {
onGetPageData() { onGetPageData() {
let nowDay = dayjs().format("YYYY-MM-DD"); let nowDay = dayjs().format('YYYY-MM-DD');
if (this.$store.getters.isMock) { if (this.$store.getters.isMock) {
nowDay = "2024-06-06"; nowDay = '2024-06-06';
} }
GetMonitorOperationCount(nowDay).then((res) => { GetMonitorOperationCount(nowDay).then(res => {
if (!res.data) { if (!res.data) {
return; return;
} }
let fisrtRate = res["data"]["firstPunctualityRate"]; let fisrtRate = res['data']['firstPunctualityRate'];
if (fisrtRate.includes("%")) { if (fisrtRate.includes('%')) {
this.chartOptions["series"][0]["data"][0]["value"] = fisrtRate.slice( this.chartOptions['series'][0]['data'][0]['value'] = fisrtRate.slice(0, -1);
0,
-1
);
} else { } else {
this.chartOptions["series"][0]["data"][0]["value"] = this.chartOptions['series'][0]['data'][0]['value'] = Number(fisrtRate);
Number(fisrtRate);
} }
this.opTotal = res["data"]["roomCount"]; this.opTotal = res['data']['roomCount'];
chart.setOption(this.chartOptions); chart.setOption(this.chartOptions);
this.isLoading = false; this.isLoading = false;
}); });
@ -139,19 +130,22 @@ export default {
mounted() { mounted() {
chart = echarts.init(this.$refs.echartsContainer); chart = echarts.init(this.$refs.echartsContainer);
this.onGetPageData(); this.onGetPageData();
setInterval(() => {
this.onGetPageData();
}, this.$store.getters.intervalTime);
}, },
}; };
</script> </script>
<style> <style>
.bgLeftTopBox { .bgLeftTopBox {
background-image: url("@/assets/svg/Room/LeftTop/Box.svg"); background-image: url('@/assets/svg/Room/LeftTop/Box.svg');
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.bgTopLeftItemBox { .bgTopLeftItemBox {
background-image: url("@/assets/svg/Room/LeftTop/ItemBox.svg"); background-image: url('@/assets/svg/Room/LeftTop/ItemBox.svg');
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;

@ -5,10 +5,10 @@
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from 'echarts';
import dayjs from "dayjs"; import dayjs from 'dayjs';
import { GetRoomList, GetMonitorRoomUsageRate } from "@/api/room"; import { GetRoomList, GetMonitorRoomUsageRate } from '@/api/room';
import { statusToTxt, textToColor } from "@/utils/common"; import { statusToTxt, textToColor } from '@/utils/common';
let chart = null; let chart = null;
export default { export default {
data() { data() {
@ -16,27 +16,27 @@ export default {
isLoding: false, isLoding: false,
chartOptions: { chartOptions: {
grid: { grid: {
width: "86%", width: '86%',
height: "80%", height: '80%',
top: "14%", top: '14%',
}, },
legend: { legend: {
data: [], data: [],
selectedMode: "none", selectedMode: 'none',
top: "6%", top: '6%',
right: "4%", right: '4%',
textStyle: { textStyle: {
color: "#fff", color: '#fff',
fontSize: 14, fontSize: 14,
fontFamily: "DIN-Bold,Microsoft YaHei", fontFamily: 'DIN-Bold,Microsoft YaHei',
}, },
}, },
xAxis: { xAxis: {
type: "time", type: 'time',
position: "top", position: 'top',
splitNumber: 24, splitNumber: 24,
axisLabel: { axisLabel: {
color: "#B7BDBF", color: '#B7BDBF',
fontSize: 12, fontSize: 12,
margin: 16, margin: 16,
formatter: function (value) { formatter: function (value) {
@ -44,32 +44,26 @@ export default {
var hours = date.getHours(); var hours = date.getHours();
var minutes = date.getMinutes(); var minutes = date.getMinutes();
if (hours === 0 && minutes === 0) { if (hours === 0 && minutes === 0) {
return "00:00"; return '00:00';
} else { } else {
return ( return (hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes;
(hours < 10 ? "0" : "") +
hours +
":" +
(minutes < 10 ? "0" : "") +
minutes
);
} }
}, },
}, },
}, },
yAxis: { yAxis: {
type: "category", type: 'category',
data: [], data: [],
axisLabel: { axisLabel: {
color: "#B7BDBF", color: '#B7BDBF',
fontSize: 12, fontSize: 12,
margin: 16, margin: 16,
fontFamily: "DIN-Bold,Microsoft YaHei", fontFamily: 'DIN-Bold,Microsoft YaHei',
}, },
}, },
series: [], series: [],
}, },
legendDataList: ["入手术间", "手术开始", "手术结束", "出手术间"], legendDataList: ['入手术间', '手术开始', '手术结束', '出手术间'],
yAxisArr: [], yAxisArr: [],
showPageIndex: -1, showPageIndex: -1,
allPageIndex: 0, allPageIndex: 0,
@ -83,23 +77,19 @@ export default {
methods: { methods: {
initMockData() { initMockData() {
// //
const currentDate = dayjs().format("YYYY-MM-DD"); const currentDate = dayjs().format('YYYY-MM-DD');
const hours = new Date().getHours(); const hours = new Date().getHours();
const detailMin = dayjs().subtract(1, "minute").format("HH:mm:00"); const detailMin = dayjs().subtract(1, 'minute').format('HH:mm:00');
const sevenMinutesAgo = dayjs().subtract(8, "minute").format("HH:mm:00"); const sevenMinutesAgo = dayjs().subtract(8, 'minute').format('HH:mm:00');
this.chartOptions.xAxis.min = `${currentDate} 08:00:00`; this.chartOptions.xAxis.min = `${currentDate} 08:00:00`;
this.chartOptions.xAxis.max = `${dayjs() this.chartOptions.xAxis.max = `${dayjs().add(1, 'day').format('YYYY-MM-DD')} 07:00:00`;
.add(1, "day")
.format("YYYY-MM-DD")} 07:00:00`;
// //
const num = 20; const num = 20;
// //
const timeArr = []; const timeArr = [];
// //
for (let index = num; index >= 1; index--) { for (let index = num; index >= 1; index--) {
this.chartOptions.yAxis.data.push( this.chartOptions.yAxis.data.push(`手术间${String(index).padStart(3, '0')}`);
`手术间${String(index).padStart(3, "0")}`
);
const isUseArr = this.getUseTime(); const isUseArr = this.getUseTime();
for (let j = 1; j < isUseArr.length; j += 2) { for (let j = 1; j < isUseArr.length; j += 2) {
if (isUseArr[j] <= hours) { if (isUseArr[j] <= hours) {
@ -107,12 +97,9 @@ export default {
startTime: `${currentDate} ${isUseArr[j - 1]}:00:00`, startTime: `${currentDate} ${isUseArr[j - 1]}:00:00`,
endTime: `${currentDate} ${isUseArr[j]}:00:00`, endTime: `${currentDate} ${isUseArr[j]}:00:00`,
yValue: index - 1, yValue: index - 1,
color: textToColor("出手术间"), color: textToColor('出手术间'),
diff: dayjs(`${currentDate} ${isUseArr[j]}:00:00`).diff( diff: dayjs(`${currentDate} ${isUseArr[j]}:00:00`).diff(dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`), 'minute'),
dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`), name: '出手术间',
"minute"
),
name: "出手术间",
}); });
} else if (isUseArr[j] > hours && isUseArr[j - 1] < hours) { } else if (isUseArr[j] > hours && isUseArr[j - 1] < hours) {
if (Math.random() > 0.5) { if (Math.random() > 0.5) {
@ -120,24 +107,18 @@ export default {
startTime: `${currentDate} ${isUseArr[j - 1]}:00:00`, startTime: `${currentDate} ${isUseArr[j - 1]}:00:00`,
endTime: `${currentDate} ${detailMin}`, endTime: `${currentDate} ${detailMin}`,
yValue: index - 1, yValue: index - 1,
color: textToColor("手术开始"), color: textToColor('手术开始'),
diff: dayjs(`${currentDate} ${detailMin}`).diff( diff: dayjs(`${currentDate} ${detailMin}`).diff(dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`), 'minute'),
dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`), name: '手术开始',
"minute"
),
name: "手术开始",
}); });
} else { } else {
timeArr.push({ timeArr.push({
startTime: `${currentDate} ${isUseArr[j - 1]}:00:00`, startTime: `${currentDate} ${isUseArr[j - 1]}:00:00`,
endTime: `${currentDate} ${detailMin}`, endTime: `${currentDate} ${detailMin}`,
yValue: index - 1, yValue: index - 1,
color: textToColor("手术结束"), color: textToColor('手术结束'),
diff: dayjs(`${currentDate} ${detailMin}`).diff( diff: dayjs(`${currentDate} ${detailMin}`).diff(dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`), 'minute'),
dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`), name: '手术结束',
"minute"
),
name: "手术结束",
}); });
} }
} else if (isUseArr[j] > hours && isUseArr[j - 1] == hours) { } else if (isUseArr[j] > hours && isUseArr[j - 1] == hours) {
@ -145,9 +126,9 @@ export default {
startTime: `${currentDate} ${sevenMinutesAgo}`, startTime: `${currentDate} ${sevenMinutesAgo}`,
endTime: `${currentDate} ${detailMin}`, endTime: `${currentDate} ${detailMin}`,
yValue: index - 1, yValue: index - 1,
color: textToColor("入手术间"), color: textToColor('入手术间'),
diff: "7", diff: '7',
name: "入手术间", name: '入手术间',
}); });
} }
} }
@ -158,22 +139,20 @@ export default {
chart.setOption(this.chartOptions); chart.setOption(this.chartOptions);
}, },
onGetPageData() { onGetPageData() {
let today = dayjs().format("YYYY-MM-DD"); let today = dayjs().format('YYYY-MM-DD');
// today = '2024-06-06'; // today = '2024-06-06';
// today = '2024-08-07'; // today = '2024-08-07';
this.chartOptions.xAxis.min = `${today} 08:00:00`; this.chartOptions.xAxis.min = `${today} 08:00:00`;
this.chartOptions.xAxis.max = `${dayjs(today) this.chartOptions.xAxis.max = `${dayjs(today).add(1, 'day').format('YYYY-MM-DD')} 07:00:00`;
.add(1, "day") GetMonitorRoomUsageRate(today).then(res => {
.format("YYYY-MM-DD")} 07:00:00`; this.originData = res['data'];
GetMonitorRoomUsageRate(today).then((res) => {
this.originData = res["data"];
this.formatPageList(); this.formatPageList();
}); });
}, },
seriesData(data) { seriesData(data) {
const res = data.map(function (item) { const res = data.map(function (item) {
return { return {
type: "custom", type: 'custom',
name: item.name, name: item.name,
renderItem: function (params, api) { renderItem: function (params, api) {
var xStart = api.coord([item.startTime, item.yValue]); var xStart = api.coord([item.startTime, item.yValue]);
@ -181,10 +160,10 @@ export default {
var textX = (xStart[0] + xEnd[0]) / 2; var textX = (xStart[0] + xEnd[0]) / 2;
var textY = xStart[1] - 20; var textY = xStart[1] - 20;
return { return {
type: "group", type: 'group',
children: [ children: [
{ {
type: "line", type: 'line',
shape: { shape: {
x1: xStart[0], x1: xStart[0],
y1: xStart[1], y1: xStart[1],
@ -197,13 +176,13 @@ export default {
}, },
}, },
{ {
type: "text", type: 'text',
position: [textX, textY], position: [textX, textY],
style: { style: {
text: `${item.diff} min`, text: `${item.diff} min`,
fill: "#B7BDBF", fill: '#B7BDBF',
textSize: "12px", textSize: '12px',
textAlign: "center", textAlign: 'center',
}, },
}, },
], ],
@ -225,21 +204,17 @@ export default {
} }
const numValues = Math.floor(Math.random() * 3) + 8; const numValues = Math.floor(Math.random() * 3) + 8;
const randomValues = getRandomUniqueValues( const randomValues = getRandomUniqueValues(8, 24, numValues % 2 ? numValues + 1 : numValues);
8,
24,
numValues % 2 ? numValues + 1 : numValues
);
return randomValues.sort((a, b) => { return randomValues.sort((a, b) => {
return a - b; return a - b;
}); });
}, },
formatLegendData() { formatLegendData() {
if (this.legendDataList.length) { if (this.legendDataList.length) {
this.legendDataList.forEach((item) => { this.legendDataList.forEach(item => {
this.chartOptions.legend.data.push({ this.chartOptions.legend.data.push({
name: item, name: item,
icon: "rect", icon: 'rect',
itemStyle: { itemStyle: {
color: textToColor(item), color: textToColor(item),
}, },
@ -254,32 +229,23 @@ export default {
const timeArr = []; const timeArr = [];
// ,Y // ,Y
++this.showPageIndex >= this.allPageNum && (this.showPageIndex = 0); ++this.showPageIndex >= this.allPageNum && (this.showPageIndex = 0);
this.yAxisArr = this.allRoomList this.yAxisArr = this.allRoomList.slice(this.pageNum * this.showPageIndex, this.pageNum * (this.showPageIndex + 1)).reverse();
.slice(
this.pageNum * this.showPageIndex,
this.pageNum * (this.showPageIndex + 1)
)
.reverse();
console.log(this.yAxisArr); console.log(this.yAxisArr);
this.chartOptions.yAxis.data = this.yAxisArr; this.chartOptions.yAxis.data = this.yAxisArr;
this.legendDataList = []; this.legendDataList = [];
// //
this.originData.forEach((item) => { this.originData.forEach(item => {
if (this.yAxisArr.includes(item["roomName"])) { if (this.yAxisArr.includes(item['roomName'])) {
if (!this.legendDataList.includes(statusToTxt(item["procStatus"]))) { if (!this.legendDataList.includes(statusToTxt(item['procStatus']))) {
this.legendDataList.push(statusToTxt(item["procStatus"])); this.legendDataList.push(statusToTxt(item['procStatus']));
} }
timeArr.push({ timeArr.push({
startTime: dayjs(item["inRoomDateTime"]).format( startTime: dayjs(item['inRoomDateTime']).format('YYYY-MM-DD HH:mm:ss'),
"YYYY-MM-DD HH:mm:ss" endTime: dayjs(item['inRoomDateTime']).add(item['surgicalDuration'], 'minute').format('YYYY-MM-DD HH:mm:ss'),
), yValue: this.yAxisArr.findIndex(text => text == item['roomName']),
endTime: dayjs(item["inRoomDateTime"]) color: textToColor(statusToTxt(item['procStatus'])),
.add(item["surgicalDuration"], "minute") diff: item['surgicalDuration'],
.format("YYYY-MM-DD HH:mm:ss"), name: statusToTxt(item['procStatus']),
yValue: this.yAxisArr.findIndex((text) => text == item["roomName"]),
color: textToColor(statusToTxt(item["procStatus"])),
diff: item["surgicalDuration"],
name: statusToTxt(item["procStatus"]),
}); });
} }
}); });
@ -294,10 +260,10 @@ export default {
}, },
}, },
mounted() { mounted() {
GetRoomList().then((res) => { GetRoomList().then(res => {
res["Data"]["Data"].forEach((item) => { res['Data']['Data'].forEach(item => {
if (item["RoomTypeCode"] == 0) { if (item['RoomTypeCode'] == 0) {
this.allRoomList.push(item["RoomName"]); this.allRoomList.push(item['RoomName']);
this.allPageIndex++; this.allPageIndex++;
} }
}); });
@ -307,6 +273,9 @@ export default {
this.initMockData(); this.initMockData();
} else { } else {
this.onGetPageData(); this.onGetPageData();
setInterval(() => {
this.onGetPageData();
}, this.$store.getters.intervalTime);
} }
}); });
}, },
@ -315,7 +284,7 @@ export default {
<style> <style>
.bgRightMidBox { .bgRightMidBox {
background-image: url("@/assets/svg/Room/RightMid/Box.svg"); background-image: url('@/assets/svg/Room/RightMid/Box.svg');
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;

@ -89,7 +89,7 @@ export default {
this.onGetPageData(); this.onGetPageData();
this.redenTimer = setInterval(() => { this.redenTimer = setInterval(() => {
this.onGetPageData(); this.onGetPageData();
}, 300000); }, this.$store.getters.intervalTime);
}, },
components: { components: {
'el-carousel': Carousel, 'el-carousel': Carousel,

Loading…
Cancel
Save