yin.wei
/
bigScreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip: 对接运营监控可视化页面

Browse Source
main
shengwen.chen 4 months ago
parent 2323ae998d
commit b7c9710bc0
5 changed files with 318 additions and 375 deletions
Show Stats Download Patch File Download Diff File

120
src/views/pageMonitor/bottomLeft/index.vue
Unescape View File

@ -6,6 +6,7 @@
</div>
</header>
<main>
<div id="chart" class="h-full"></div>
</main>
<section class="sidebar ">
<div class="top" :class="{ 'active': active == 'week' }" @click="changeActive('week')">
@ -19,17 +20,126 @@
</template>
<script>
import * as echarts from "echarts";
import { GetMonitorOperationDept } from '@/api/monitor';
import dayjs from 'dayjs';
export default {
data() {
return {
active: 'week'
active: 'week',
startDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
endDate: dayjs().format('YYYY-MM-DD'),
renderTimer: null,
getDataList: [],
};
},
methods: {
changeActive(newActive) {
this.active = newActive
}
}
changeActive(newActive = '') {
if (!newActive) {
if (this.active == 'week') {
newActive = 'month'
} else {
newActive = 'week'
}
}
this.startDate = dayjs().subtract(newActive == 'week' ? 7 : 30, 'day').format('YYYY-MM-DD');
this.active = newActive;
this.onGetPageData();
},
onGetPageData() {
GetMonitorOperationDept({
startDate: this.startDate,
endDate: this.endDate,
}).then(res => {
this.getDataList = res['data']
this.updateChart();
});
},
updateChart() {
const myChart = echarts.init(document.getElementById("chart"));
let categories = ['骨科', '普外科', '内科', '神经外科', '肿瘤科']
let values = [0, 0, 0, 0, 0]
let maxVal = 10;
if (this.getDataList.length) {
categories = this.getDataList.map(item => {
return item['deptName']
})
values = this.getDataList.map(item => {
return item['deptCount']
})
maxVal = Math.ceil(Math.max(...values) / 20) * 20;
}
const option = {
grid: {
left: 80,
right: 50,
top: 20,
bottom: 20,
},
xAxis: {
max: maxVal,
axisLabel: {
color: `rgba(0, 0, 0, 0.3)`,
fontSize: 12,
},
},
yAxis: {
type: "category",
data: categories,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
color: `rgba(0, 0, 0, 0.3)`,
fontSize: 12,
},
},
series: [
{
type: "bar",
data: values,
barWidth: 20,
itemStyle: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: "#a066f8" },
{ offset: 1, color: "#6173f7" },
]),
borderRadius: 10,
},
z: 2,
},
{
type: "scatter",
data: values,
symbolSize: 24,
itemStyle: {
color: "#fff",
borderColor: "#8a6df0",
borderWidth: 1,
shadowColor: "#fff",
shadowBlur: 5,
},
z: 3,
label: {
show: true,
position: "outside",
formatter: "{c}",
color: "#8a6df0",
fontSize: 14,
fontWeight: "bold",
},
},
],
};
myChart.setOption(option);
},
},
mounted() {
this.onGetPageData();
setInterval(() => {
this.changeActive()
}, this.$store.getters.intervalTime);
},
};
</script>

24
src/views/pageMonitor/bottomRight/eLeft.vue
Unescape View File

@ -0,0 +1,24 @@
<template>
<div class="opGradeBox box">
<header>
<div>
<p class="panmen">手术等级</p>
</div>
</header>
<main>
</main>
</div>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
},
mounted() {
},
};
</script>

24
src/views/pageMonitor/bottomRight/eMid.vue
Unescape View File

@ -0,0 +1,24 @@
<template>
<div class="asaGradeBox box">
<header>
<div>
<p class="panmen">ASA分级</p>
</div>
</header>
<main>
</main>
</div>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
},
mounted() {
},
};
</script>

145
src/views/pageMonitor/bottomRight/eRight.vue
Unescape View File

@ -0,0 +1,145 @@
<template>
<div class="opstatisticBox box">
<header>
<div>
<p class="panmen">科室手术量统计（前五）</p>
</div>
</header>
<main>
<div id="chartBottomRight" class="h-full"></div>
</main>
<section class="sidebar">
<div class="top" :class="{ 'active': active == 'week' }" @click="changeActive('week')">
<span>周</span>
</div>
<div class="bottom" :class="{ 'active': active == 'month' }" @click="changeActive('month')">
<span>月</span>
</div>
</section>
</div>
</template>
<script>
import * as echarts from "echarts";
import { GetMonitorOperationDept } from '@/api/monitor';
import dayjs from 'dayjs';
export default {
data() {
return {
active: 'week',
startDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
endDate: dayjs().format('YYYY-MM-DD'),
renderTimer: null,
getDataList: [],
};
},
methods: {
changeActive(newActive = '') {
if (!newActive) {
if (this.active == 'week') {
newActive = 'month'
} else {
newActive = 'week'
}
}
this.startDate = dayjs().subtract(newActive == 'week' ? 7 : 30, 'day').format('YYYY-MM-DD');
this.active = newActive;
this.onGetPageData();
},
onGetPageData() {
GetMonitorOperationDept({
startDate: this.startDate,
endDate: this.endDate,
}).then(res => {
this.getDataList = res['data']
this.updateChart();
});
},
updateChart() {
const myChart = echarts.init(document.getElementById("chartBottomRight"));
let categories = ['骨科', '普外科', '内科', '神经外科', '肿瘤科']
let values = [0, 0, 0, 0, 0]
let maxVal = 10;
if (this.getDataList.length) {
categories = this.getDataList.map(item => {
return item['deptName']
})
values = this.getDataList.map(item => {
return item['deptCount']
})
maxVal = Math.ceil(Math.max(...values) / 20) * 20;
}
const option = {
grid: {
left: 80,
right: 50,
top: 20,
bottom: 20,
},
xAxis: {
max: maxVal,
axisLabel: {
color: `rgba(0, 0, 0, 0.3)`,
fontSize: 12,
},
},
yAxis: {
type: "category",
data: categories,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
color: `rgba(0, 0, 0, 0.3)`,
fontSize: 12,
},
},
series: [
{
type: "bar",
data: values,
barWidth: 20,
itemStyle: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: "#a066f8" },
{ offset: 1, color: "#6173f7" },
]),
borderRadius: 10,
},
z: 2,
},
{
type: "scatter",
data: values,
symbolSize: 24,
itemStyle: {
color: "#fff",
borderColor: "#8a6df0",
borderWidth: 1,
shadowColor: "#fff",
shadowBlur: 5,
},
z: 3,
label: {
show: true,
position: "outside",
formatter: "{c}",
color: "#8a6df0",
fontSize: 14,
fontWeight: "bold",
},
},
],
};
myChart.setOption(option);
},
},
mounted() {
this.onGetPageData();
setInterval(() => {
this.changeActive()
}, this.$store.getters.intervalTime);
},
};
</script>

380
src/views/pageMonitor/bottomRight/index.vue
Unescape View File

@ -1,390 +1,30 @@
<template>
<section class="boxWrap">
<div class="opGradeBox box">
<header>
<div>
<p class="panmen">手术等级</p>
</div>
</header>
<main>
<div class="h-full" ref="echartsContainerLeft"></div>
</main>
</div>
<div class="asaGradeBox box">
<header>
<div>
<p class="panmen">ASA分级</p>
</div>
</header>
<main>
<div class="h-full" ref="echartsContainerRight"></div>
</main>
</div>
<div class="opstatisticBox box">
<header>
<div>
<p class="panmen">科室手术量统计（前五）</p>
</div>
</header>
<main></main>
<section class="sidebar">
<div class="top" :class="{ 'active': active == 'week' }" @click="changeActive('week')">
<span>周</span>
</div>
<div class="bottom" :class="{ 'active': active == 'month' }" @click="changeActive('month')">
<span>月</span>
</div>
</section>
</div>
<eLeft />
<eMid />
<eRight />
</section>
</template>
<script>
import * as echarts from 'echarts';
import { GetMonitorOperationLevel, GetMonitorOperationASALevel } from '@/api/monitor';
import { fnR } from '@/utils/common';
import dayjs from 'dayjs';
let chartLeft = null;
let chartRight = null;
import eLeft from './eLeft.vue';
import eMid from './eMid.vue';
import eRight from './eRight.vue';
export default {
data() {
return {
active: 'week',
nowIndex: 0,
chartOptionsLeft: {
series: [
{
type: 'pie',
radius: ['32%', '50%'],
selectedMode: 'single',
data: [
{ name: '一级', value: 148, selected: false },
{ name: '二级', value: 87, selected: false },
{ name: '三级', value: 75, selected: false },
{ name: '四级', value: 40, selected: false },
],
label: {
formatter: '{b}{c}',
color: 'inherit',
},
labelLine: {
show: true,
length: 15,
length2: 18,
smooth: 0.6, // 可以使引导线稍微弯曲，使得标签位置更加合理
},
padAngle: 5,
itemStyle: {
borderRadius: 10,
},
},
{
name: '外边框-outBig',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ['50%', '50%'],
radius: ['62%', '62%'],
label: {
normal: {
show: false,
},
},
data: [
{
value: 9,
name: '',
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#2F58B4',
},
},
},
],
},
{
name: '外边框-outSmall',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ['50%', '50%'],
radius: ['57%', '57%'],
label: {
normal: {
show: false,
},
},
showEmptyCircle: true,
itemStyle: {
shadowColor: 'rgba(255, 0, 0, 1)',
shadowBlur: 10,
opacity: 1,
},
data: [
{
value: 9,
name: '',
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#0D447C',
},
},
},
],
},
{
name: '内边框-inBig',
type: 'pie',
clockWise: true, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ['50%', '50%'],
radius: ['25%', '25%'],
label: {
normal: {
show: false,
},
},
itemStyle: {
shadowColor: 'rgba(255, 0, 0, 1)',
shadowBlur: 10,
opacity: 1,
},
data: [
{
value: 9,
name: '',
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#006CFF',
opacity: 0.4,
},
},
},
],
},
{
name: '内边框-inSmall',
type: 'pie',
clockWise: true, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ['50%', '50%'],
radius: ['20%', '20%'],
label: {
normal: {
show: false,
},
},
data: [
{
value: 9,
name: '',
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#fff',
opacity: 0.2,
},
},
},
],
},
],
},
chartOptionsRight: {
series: [
{
type: 'pie',
radius: ['32%', '50%'],
selectedMode: 'single',
data: [
{ name: 'I级', value: 137, selected: false },
{ name: 'II级', value: 105, selected: false },
{ name: 'III级', value: 58, selected: false },
{ name: 'IV级', value: 37, selected: false },
{ name: 'V级', value: 13, selected: false },
],
label: {
formatter: '{b}{c}',
color: 'inherit',
},
labelLine: {
show: true,
length: 15,
length2: 18,
smooth: 0.6, // 可以使引导线稍微弯曲，使得标签位置更加合理
},
padAngle: 5,
itemStyle: {
borderRadius: 10,
},
},
{
name: '外边框-outBig',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ['50%', '50%'],
radius: ['62%', '62%'],
label: {
normal: {
show: false,
},
},
data: [
{
value: 9,
name: '',
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#2F58B4',
},
},
},
],
},
{
name: '外边框-outSmall',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ['50%', '50%'],
radius: ['57%', '57%'],
label: {
normal: {
show: false,
},
},
showEmptyCircle: true,
itemStyle: {
shadowColor: 'rgba(255, 0, 0, 1)',
shadowBlur: 10,
opacity: 1,
},
data: [
{
value: 9,
name: '',
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#0D447C',
},
},
},
],
},
{
name: '内边框-inBig',
type: 'pie',
clockWise: true, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ['50%', '50%'],
radius: ['25%', '25%'],
label: {
normal: {
show: false,
},
},
itemStyle: {
shadowColor: 'rgba(255, 0, 0, 1)',
shadowBlur: 10,
opacity: 1,
},
data: [
{
value: 9,
name: '',
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#006CFF',
opacity: 0.4,
},
},
},
],
},
{
name: '内边框-inSmall',
type: 'pie',
clockWise: true, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ['50%', '50%'],
radius: ['20%', '20%'],
label: {
normal: {
show: false,
},
},
data: [
{
value: 9,
name: '',
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#fff',
opacity: 0.2,
},
},
},
],
},
],
},
toDate: dayjs().format('YYYY-MM-DD'),
};
},
methods: {
changeActive(newActive) {
this.active = newActive
},
onGetPageData() {
this.isLoading = true;
Promise.all([GetMonitorOperationLevel(this.toDate), GetMonitorOperationASALevel(this.toDate)]).then(res => {
this.chartOptionsLeft.series[0].data[0].value = res[0].data['level1'];
this.chartOptionsLeft.series[0].data[1].value = res[0].data['level2'];
this.chartOptionsLeft.series[0].data[2].value = res[0].data['level3'];
this.chartOptionsLeft.series[0].data[3].value = res[0].data['level4'];
this.chartOptionsRight.series[0].data[0].value = res[1].data['asaLevel1'];
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) {
this.chartOptionsLeft.series[0].data[0].value = fnR();
this.chartOptionsLeft.series[0].data[1].value = fnR();
this.chartOptionsLeft.series[0].data[2].value = fnR();
this.chartOptionsLeft.series[0].data[3].value = fnR();
this.chartOptionsRight.series[0].data[0].value = fnR();
this.chartOptionsRight.series[0].data[1].value = fnR();
this.chartOptionsRight.series[0].data[2].value = fnR();
this.chartOptionsRight.series[0].data[3].value = fnR();
this.chartOptionsRight.series[0].data[4].value = fnR();
}
chartLeft.setOption(this.chartOptionsLeft);
chartRight.setOption(this.chartOptionsRight);
this.isLoading = false;
});
},
},
mounted() {
chartLeft = echarts.init(this.$refs.echartsContainerLeft);
chartLeft.setOption(this.chartOptionsLeft);
chartRight = echarts.init(this.$refs.echartsContainerRight);
chartRight.setOption(this.chartOptionsRight);
this.onGetPageData();
setInterval(() => {
this.onGetPageData();
}, this.$store.getters.intervalTime);
},
components: { eLeft, eMid, eRight }
};
</script>
<style lang="scss" scoped>
<style lang="scss">
@import './index.scss'
</style>

Write Preview
Loading…
Cancel
Save