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