fix: 运营监控页中环状图优化、暂无数据icon添加、多个页面中的首台率显示bug处理等

main
weiyin 10 months ago
parent 69614ca454
commit 21737e13f7

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 80 KiB

@ -14,9 +14,9 @@
v-if="getDataList.length" v-if="getDataList.length"
:getDataList="getDataList" :getDataList="getDataList"
></Histogram> ></Histogram>
<div v-else class="flex w-[100%] h-[100%] items-center justify-center"> <div v-else class="flex flex-col w-[100%] h-[100%] items-center justify-center">
<!-- 暂无数据 -->
<img src="@/assets/svg/noData.svg" /> <img src="@/assets/svg/noData.svg" />
<span>暂无数据</span>
</div> </div>
</div> </div>
<div <div

@ -58,6 +58,10 @@ export default {
formatter: "{b}{c}", formatter: "{b}{c}",
color: "inherit", color: "inherit",
}, },
padAngle: 5,
itemStyle: {
borderRadius: 10,
},
}, },
], ],
}, },
@ -78,6 +82,10 @@ export default {
formatter: "{b}{c}", formatter: "{b}{c}",
color: "inherit", color: "inherit",
}, },
padAngle: 5,
itemStyle: {
borderRadius: 10,
},
}, },
], ],
}, },

@ -17,8 +17,9 @@
v-if="getDataList.length" v-if="getDataList.length"
:getDataList="getDataList" :getDataList="getDataList"
></Histogram> ></Histogram>
<div v-else class="flex w-[100%] h-[100%] items-center justify-center"> <div v-else class="flex flex-col w-[100%] h-[100%] items-center justify-center">
暂无数据 <img src="@/assets/svg/noData.svg" />
<span>暂无数据</span>
</div> </div>
</div> </div>
<div <div

@ -113,13 +113,18 @@ export default {
if (!res.data) { if (!res.data) {
return; return;
} }
this.overviewData[0]["itemVal"] = res["data"][ let fisrtRate = res["data"]["firstPunctualityRate"];
"firstPunctualityRate" if (fisrtRate.includes("%")) {
].slice(0, -1); this.overviewData[0]["itemVal"] = fisrtRate.slice(0, -1);
this.overviewData[1]["itemVal"] = res["data"]["roomUserRate"].slice( } else {
0, this.overviewData[0]["itemVal"] = Number(fisrtRate);
-1 }
); let roomUserRate = res["data"]["roomUserRate"];
if (roomUserRate.includes("%")) {
this.overviewData[1]["itemVal"] = roomUserRate.slice(0, -1);
} else {
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"];

@ -18,7 +18,7 @@
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
</template> </template>
<script> <script>
import { Carousel, CarouselItem } from 'element-ui'; import { Carousel, CarouselItem } from 'element-ui';

@ -159,9 +159,17 @@ export default {
this.isLoading = false; this.isLoading = false;
return; return;
} }
this.chartOptions["series"][0]["data"][0]["value"] = res["data"][ let fisrtRate = res["data"]["firstPunctualityRate"];
"firstPunctualityRate" if (fisrtRate.includes("%")) {
].slice(0, -1); this.chartOptions["series"][0]["data"][0]["value"] = fisrtRate.slice(
0,
-1
);
} else {
this.chartOptions["series"][0]["data"][0]["value"] =
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"];

@ -3,34 +3,93 @@
<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-[11.11vh] text-[#AAAAAA] text-[1.48vh]">手术间</div> <div class="inline-block w-[5.11vh] text-[#AAAAAA] text-[1.48vh]">
<div class="inline-block w-[16.51vh] text-[#AAAAAA] text-[1.48vh]">手术名称</div> 手术间
<div class="inline-block w-[13.11vh] 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-[11.11vh] text-[#AAAAAA] text-[1.48vh]">
<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>
<div class="inline-block w-[11.11vh] text-[#AAAAAA] text-[1.48vh]">是否准点</div> <div class="inline-block w-[16.51vh] text-[#AAAAAA] text-[1.48vh]">
手术名称
</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 direction="vertical" :autoplay="true" :interval="15000" indicatorPosition="none"> <el-carousel
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 class="h-[4.44vh] leading-[4.44vh] mt-[0.74vh] text-center itemStyle" :key="index"> <div
class="h-[4.44vh] leading-[4.44vh] mt-[0.74vh] text-center itemStyle"
:key="index"
>
<div class="inline-block"> <div class="inline-block">
<div class="inline-block align-top w-[11.11vh] text-[1.48vh] panmen">{{ subItem['roomName'] }}</div> <div
<div class="inline-block align-top w-[16.51vh] text-[1.48vh] px-1"> class="inline-block align-top w-[5.11vh] text-[1.48vh] panmen"
<marquee scrollamount="2">{{ subItem['operationName'] }}</marquee> >
{{ subItem["roomName"] }}
</div> </div>
<div class="inline-block align-middle w-[13.11vh] text-[1.48vh]"> <div class="inline-block align-top w-[11.11vh] text-[1.48vh]">
<img class="mx-auto" src="@/assets/svg/Operation/RightMid/Emergency.svg" v-if="subItem['OperationType']" /> {{ subItem["patientName"] }}
<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]">{{ formatData(subItem['InDateTime']) }}</div> <div
<div class="inline-block align-top w-[16.66vh] text-[1.48vh]">{{ formatData(subItem['AnesStartTime']) }}</div> class="inline-block align-top w-[16.51vh] text-[1.48vh] px-1"
<div class="inline-block align-top w-[16.66vh] text-[1.48vh]">{{ formatData(subItem['OperStartTime']) }}</div> >
<div class="inline-block align-top w-[11.11vh] text-[1.48vh]" :class="subItem['IsFirstOnTime'] ? 'text-[#349AFC]' : 'text-[#A53FAF]'"> <marquee scrollamount="2">{{
{{ subItem['IsFirstOnTime'] ? '准点' : '不准点' }} subItem["operationName"]
}}</marquee>
</div>
<div
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
/>
</div>
<div class="inline-block align-top w-[16.66vh] text-[1.48vh]">
{{ formatData(subItem["inDateTime"]) }}
</div>
<div class="inline-block align-top w-[16.66vh] text-[1.48vh]">
{{ formatData(subItem["anesStartTime"]) }}
</div>
<div class="inline-block align-top w-[16.66vh] text-[1.48vh]">
{{ formatData(subItem["operStartTime"]) }}
</div>
<div
class="inline-block align-top w-[11.11vh] text-[1.48vh]"
:class="
subItem['IsFirstOnTime']
? 'text-[#349AFC]'
: 'text-[#A53FAF]'
"
>
{{ subItem["IsFirstOnTime"] ? "准点" : "不准点" }}
</div> </div>
</div> </div>
</div> </div>
@ -43,9 +102,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 {
@ -55,41 +114,45 @@ 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) {
return dayjs(date).format('YYYY-MM-DD HH:mm:ss'); let txt = "";
if (date) {
txt = dayjs(date).format("YYYY-MM-DD HH:mm:ss");
}
return txt;
}, },
}, },
mounted() { mounted() {
this.onGetPageData(); this.onGetPageData();
}, },
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;

@ -120,9 +120,16 @@ export default {
if (!res.data) { if (!res.data) {
return; return;
} }
this.chartOptions["series"][0]["data"][0]["value"] = res["data"][ let fisrtRate = res["data"]["firstPunctualityRate"];
"firstPunctualityRate" if (fisrtRate.includes("%")) {
].slice(0, -1); this.chartOptions["series"][0]["data"][0]["value"] = fisrtRate.slice(
0,
-1
);
} else {
this.chartOptions["series"][0]["data"][0]["value"] =
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;

@ -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,26 +44,32 @@ 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 (hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes; return (
(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,
@ -77,19 +83,23 @@ 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().add(1, 'day').format('YYYY-MM-DD')} 07:00:00`; this.chartOptions.xAxis.max = `${dayjs()
.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(`手术间${String(index).padStart(3, '0')}`); this.chartOptions.yAxis.data.push(
`手术间${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) {
@ -97,9 +107,12 @@ 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(dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`), 'minute'), diff: dayjs(`${currentDate} ${isUseArr[j]}:00:00`).diff(
name: '出手术间', dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`),
"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) {
@ -107,18 +120,24 @@ 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(dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`), 'minute'), diff: dayjs(`${currentDate} ${detailMin}`).diff(
name: '手术开始', dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`),
"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(dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`), 'minute'), diff: dayjs(`${currentDate} ${detailMin}`).diff(
name: '手术结束', dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`),
"minute"
),
name: "手术结束",
}); });
} }
} else if (isUseArr[j] > hours && isUseArr[j - 1] == hours) { } else if (isUseArr[j] > hours && isUseArr[j - 1] == hours) {
@ -126,9 +145,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: "入手术间",
}); });
} }
} }
@ -139,20 +158,22 @@ 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).add(1, 'day').format('YYYY-MM-DD')} 07:00:00`; this.chartOptions.xAxis.max = `${dayjs(today)
GetMonitorRoomUsageRate(today).then(res => { .add(1, "day")
this.originData = res['data']; .format("YYYY-MM-DD")} 07:00:00`;
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]);
@ -160,10 +181,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],
@ -176,13 +197,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",
}, },
}, },
], ],
@ -204,17 +225,21 @@ export default {
} }
const numValues = Math.floor(Math.random() * 3) + 8; const numValues = Math.floor(Math.random() * 3) + 8;
const randomValues = getRandomUniqueValues(8, 24, numValues % 2 ? numValues + 1 : numValues); const randomValues = getRandomUniqueValues(
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),
}, },
@ -229,23 +254,32 @@ 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.slice(this.pageNum * this.showPageIndex, this.pageNum * (this.showPageIndex + 1)).reverse(); this.yAxisArr = this.allRoomList
.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('YYYY-MM-DD HH:mm:ss'), startTime: dayjs(item["inRoomDateTime"]).format(
endTime: dayjs(item['inRoomDateTime']).add(item['surgicalDuration'], 'minute').format('YYYY-MM-DD HH:mm:ss'), "YYYY-MM-DD HH:mm:ss"
yValue: this.yAxisArr.findIndex(text => text == item['roomName']), ),
color: textToColor(statusToTxt(item['procStatus'])), endTime: dayjs(item["inRoomDateTime"])
diff: item['surgicalDuration'], .add(item["surgicalDuration"], "minute")
name: statusToTxt(item['procStatus']), .format("YYYY-MM-DD HH:mm:ss"),
yValue: this.yAxisArr.findIndex((text) => text == item["roomName"]),
color: textToColor(statusToTxt(item["procStatus"])),
diff: item["surgicalDuration"],
name: statusToTxt(item["procStatus"]),
}); });
} }
}); });
@ -260,16 +294,16 @@ 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++;
} }
}); });
this.allPageNum = Math.ceil(this.allPageIndex / this.pageNum); this.allPageNum = Math.ceil(this.allPageIndex / this.pageNum);
chart = echarts.init(this.$refs.echartsContainer); chart = echarts.init(this.$refs.echartsContainer);
if (!this.$store.getters.isMock) { if (this.$store.getters.isMock) {
this.initMockData(); this.initMockData();
} else { } else {
this.onGetPageData(); this.onGetPageData();
@ -281,7 +315,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;

Loading…
Cancel
Save