parent
a539cc3f9b
commit
2323ae998d
|
Before Width: | Height: | Size: 194 KiB After Width: | Height: | Size: 802 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 803 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 414 B |
|
After Width: | Height: | Size: 375 B |
@ -1,3 +0,0 @@
|
||||
@function vh($px) {
|
||||
@return $px/1080 * 100vh;
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
@function vh($px) {
|
||||
@return $px/1080 * 100vh;
|
||||
}
|
||||
|
||||
@function vw($px) {
|
||||
@return $px / 1920 * 100vw;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: vh(88);
|
||||
padding: 0 vw(50);
|
||||
|
||||
.left {
|
||||
width: vw(264);
|
||||
}
|
||||
|
||||
.mid {
|
||||
font-size: vw(40);
|
||||
font-weight: 700;
|
||||
letter-spacing: vw(8);
|
||||
color: #5B458D;
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: vw(16);
|
||||
font-weight: 700;
|
||||
letter-spacing: vw(2);
|
||||
color: #5B458D;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
#pageBox {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("@/assets/img/bg.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
@ -1,347 +0,0 @@
|
||||
<template>
|
||||
<div id="opMain"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
// 定义柱状图左侧图形元素
|
||||
const leftRect = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 15, //柱状图宽
|
||||
zWidth: 8, //阴影折角宽
|
||||
zHeight: 4, //阴影折角高
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const api = shape.api;
|
||||
const xAxisPoint = api.coord([shape.xValue, 0]);
|
||||
const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
|
||||
const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
|
||||
const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
|
||||
const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
|
||||
const p4 = [shape.x + shape.width / 2, shape.y];
|
||||
|
||||
ctx.moveTo(p0[0], p0[1]);
|
||||
ctx.lineTo(p1[0], p1[1]);
|
||||
ctx.lineTo(p2[0], p2[1]);
|
||||
ctx.lineTo(p3[0], p3[1]);
|
||||
ctx.lineTo(p4[0], p4[1]);
|
||||
ctx.lineTo(p0[0], p0[1]);
|
||||
ctx.closePath();
|
||||
},
|
||||
});
|
||||
// 定义柱状图右侧以及顶部图形元素
|
||||
const rightRect = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 14,
|
||||
zWidth: 10,
|
||||
zHeight: 8,
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const api = shape.api;
|
||||
const xAxisPoint = api.coord([shape.xValue, 0]);
|
||||
const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];
|
||||
const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
|
||||
const p4 = [shape.x + shape.width / 2, shape.y];
|
||||
const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
|
||||
const p6 = [
|
||||
shape.x + shape.width / 2 + shape.zWidth,
|
||||
shape.y - shape.zHeight / 2,
|
||||
];
|
||||
const p7 = [
|
||||
shape.x - shape.width / 2 + shape.zWidth,
|
||||
shape.y - shape.zHeight,
|
||||
];
|
||||
ctx.moveTo(p4[0], p4[1]);
|
||||
ctx.lineTo(p3[0], p3[1]);
|
||||
ctx.lineTo(p5[0], p5[1]);
|
||||
ctx.lineTo(p6[0], p6[1]);
|
||||
ctx.lineTo(p4[0], p4[1]);
|
||||
|
||||
ctx.moveTo(p4[0], p4[1]);
|
||||
ctx.lineTo(p6[0], p6[1]);
|
||||
ctx.lineTo(p7[0], p7[1]);
|
||||
ctx.lineTo(p1[0], p1[1]);
|
||||
ctx.lineTo(p4[0], p4[1]);
|
||||
ctx.closePath();
|
||||
},
|
||||
});
|
||||
|
||||
// 注册图形元素
|
||||
echarts.graphic.registerShape("leftRect", leftRect);
|
||||
echarts.graphic.registerShape("rightRect", rightRect);
|
||||
|
||||
export default {
|
||||
name: "OpHistogram",
|
||||
props: {
|
||||
getDataList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labels: ["择期", "急诊", "日间", "门诊"],
|
||||
fields: [
|
||||
"electiveCount",
|
||||
"emergencyCount",
|
||||
"daySurgeryCount",
|
||||
"outSurgeryCount",
|
||||
],
|
||||
seriesData: [
|
||||
{
|
||||
label: "择期",
|
||||
value: [54],
|
||||
isHave: false,
|
||||
},
|
||||
{
|
||||
label: "急诊",
|
||||
value: [35],
|
||||
isHave: false,
|
||||
},
|
||||
{
|
||||
label: "日间",
|
||||
value: [19],
|
||||
isHave: false,
|
||||
},
|
||||
{
|
||||
label: "门诊",
|
||||
value: [60],
|
||||
isHave: false,
|
||||
},
|
||||
],
|
||||
colors: [
|
||||
[
|
||||
{ offset: 0, color: "rgba(26, 132, 191, 1)" },
|
||||
{ offset: 1, color: "rgba(52, 163, 224, 0.5)" },
|
||||
],
|
||||
[
|
||||
{ offset: 0, color: "rgba(137, 163, 164, 1)" },
|
||||
{ offset: 1, color: "rgba(137, 163, 164, 0.5)" },
|
||||
],
|
||||
[
|
||||
{ offset: 0, color: "rgba(44, 166, 166, 1)" },
|
||||
{ offset: 1, color: "rgba(44, 166, 166, 0.5)" },
|
||||
],
|
||||
[
|
||||
{ offset: 0, color: "rgba(34, 66, 186, 1)" },
|
||||
{ offset: 1, color: "rgba(34, 66, 186, 0.5)" },
|
||||
],
|
||||
],
|
||||
option: {},
|
||||
myChart: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
getDataList(newVal) {
|
||||
if (this.$store.getters.isMock) {
|
||||
return;
|
||||
}
|
||||
if (newVal.length) {
|
||||
this.wrapData(newVal);
|
||||
this.initOption();
|
||||
// 手动更新数据
|
||||
this.option && this.myChart && this.myChart.setOption(this.option);
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// 包装接口数据--初始化调用
|
||||
if (this.getDataList.length) {
|
||||
if (this.$store.getters.isMock) {
|
||||
console.log("sssxx");
|
||||
} else {
|
||||
this.wrapData(this.getDataList);
|
||||
}
|
||||
}
|
||||
this.initOption();
|
||||
},
|
||||
methods: {
|
||||
initOption() {
|
||||
this.option = {
|
||||
grid: {
|
||||
height: "80%",
|
||||
top: "8%",
|
||||
right: 0,
|
||||
|
||||
// bottom: "5%",
|
||||
},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
data: this.labels,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 0, // 表示倾斜的角度
|
||||
color: "#fff",
|
||||
padding: [0, 0, 0, 8],
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
// data: this.getlegendData(),
|
||||
// right: "25",
|
||||
// top: "18",
|
||||
// icon: "rect",
|
||||
// itemHeight: 10,
|
||||
// itemWidth: 10,
|
||||
// textStyle: {
|
||||
// color: "red",
|
||||
// },
|
||||
show: false,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: ["#fff"],
|
||||
},
|
||||
},
|
||||
},
|
||||
series: this.getSeriesData(),
|
||||
};
|
||||
},
|
||||
getlegendData() {
|
||||
let that = this;
|
||||
const data = [];
|
||||
this.labels.forEach((item, index) => {
|
||||
data.push({
|
||||
name: item,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
that.colors[index]
|
||||
),
|
||||
},
|
||||
});
|
||||
});
|
||||
return data;
|
||||
},
|
||||
getSeriesData() {
|
||||
let that = this;
|
||||
const data = [];
|
||||
this.seriesData.forEach((item, index) => {
|
||||
data.push({
|
||||
type: "custom",
|
||||
name: item.label,
|
||||
renderItem: function (params, api) {
|
||||
return that.getRenderItem(params, api);
|
||||
},
|
||||
label: {
|
||||
show: true, // 显示数值
|
||||
position: "outsideTop", // 数值显示的位置
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: "#fff",
|
||||
padding: [0, 0, 0, 7],
|
||||
},
|
||||
formatter: function (data) {
|
||||
let txt = "";
|
||||
that.seriesData.forEach((a) => {
|
||||
if (a.label == data.seriesName && !a.isHave) {
|
||||
a.isHave = true;
|
||||
txt = data.value;
|
||||
}
|
||||
});
|
||||
return txt;
|
||||
},
|
||||
},
|
||||
data: item.value,
|
||||
itemStyle: {
|
||||
color: () => {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
that.colors[index]
|
||||
);
|
||||
},
|
||||
shadowBlur: 8,
|
||||
shadowColor: "rgba(255,255,255,.4)",
|
||||
borderColor: "rgba(255,255,255,.6)",
|
||||
borderWidth: 0.4,
|
||||
},
|
||||
});
|
||||
});
|
||||
return data;
|
||||
},
|
||||
getRenderItem(params, api) {
|
||||
const index = params.seriesIndex;
|
||||
let location = api.coord([api.value(0) + index, api.value(1)]);
|
||||
// var extent = api.size([0, api.value(1)]);
|
||||
return {
|
||||
type: "group",
|
||||
children: [
|
||||
{
|
||||
type: "leftRect",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0) + index,
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
},
|
||||
style: api.style(),
|
||||
},
|
||||
{
|
||||
type: "rightRect",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0) + index,
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
},
|
||||
style: api.style(),
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
wrapData(list) {
|
||||
let that = this;
|
||||
// that.labels = [];
|
||||
that.seriesData = [];
|
||||
list.forEach((item) => {
|
||||
that.fields.forEach((a, index) => {
|
||||
for (let key in item) {
|
||||
if (a == key) {
|
||||
that.seriesData.push({
|
||||
label: that.labels[index],
|
||||
value: [item[key]],
|
||||
isHave: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
var chartDom = document.getElementById("opMain");
|
||||
this.myChart = echarts.init(chartDom);
|
||||
this.option && this.myChart.setOption(this.option);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#opMain {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,92 @@
|
||||
.box {
|
||||
width: vw(552);
|
||||
height: vh(438);
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #DFE0F3;
|
||||
box-shadow: 2px 4px 20px 0px rgba(87, 68, 175, 0.2);
|
||||
background: linear-gradient(180deg, rgba(240, 243, 253, 0.95) 0%, rgba(232, 238, 253, 0.95) 100%);
|
||||
border-radius: vw(8);
|
||||
padding: vh(16) vw(8);
|
||||
position: relative;
|
||||
|
||||
header {
|
||||
height: vh(48);
|
||||
background-image: url("@/assets/img/pageMonitor/headerLine.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
|
||||
div {
|
||||
width: vw(200);
|
||||
height: vh(40);
|
||||
background-image: url("@/assets/img/pageMonitor/headerBg.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin-left: vw(12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
color: #444444;
|
||||
font-size: vw(22);
|
||||
padding-left: vw(32);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
height: vh(350);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
top: 16%;
|
||||
|
||||
>div {
|
||||
width: vw(40);
|
||||
height: vh(70);
|
||||
background: #E9E4FF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
span {
|
||||
color: rgba(90, 73, 173, 0.5);
|
||||
font-size: vw(16);
|
||||
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
transform: skewY(-30deg);
|
||||
|
||||
span {
|
||||
transform: skewY(30deg);
|
||||
line-height: vh(60);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-top: vw(-24);
|
||||
transform: skewY(30deg);
|
||||
|
||||
span {
|
||||
transform: skewY(-30deg);
|
||||
line-height: vh(90);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #5C4BAD;
|
||||
z-index: 1;
|
||||
height: vh(82);
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,109 +1,38 @@
|
||||
<template>
|
||||
<div 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">
|
||||
<img src="@/assets/svg/Monitor/Triangle.svg" />
|
||||
<span class="text-[2.03vh] youshe leading-none">科室手术量统计(前五)</span>
|
||||
</div>
|
||||
<div class="w-[42.96vh] ml-[2.96vh] deptBody">
|
||||
<div class="h-[30vh] w-full">
|
||||
<Histogram v-if="getDataList.length" :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]" />
|
||||
<span>暂无数据</span>
|
||||
</div>
|
||||
<div class="box">
|
||||
<header>
|
||||
<div>
|
||||
<p class="panmen">手术量统计</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute right-0 top-1/4 w-[3.51vh] h-[12.6vh]" :class="sliderClass">
|
||||
<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>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetMonitorOperationDept } from '@/api/monitor';
|
||||
import dayjs from 'dayjs';
|
||||
import Histogram from '@/views/pageMonitor/bottomRight/DepHistogram.vue';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
startDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
|
||||
endDate: dayjs().format('YYYY-MM-DD'),
|
||||
sliderClass: {
|
||||
bgWeekBox: true,
|
||||
bgMonthBox: false,
|
||||
},
|
||||
renderTimer: null,
|
||||
isLoading: true,
|
||||
getDataList: [],
|
||||
active: 'week'
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Histogram,
|
||||
},
|
||||
methods: {
|
||||
onGetPageData() {
|
||||
this.isLoading = true;
|
||||
GetMonitorOperationDept({
|
||||
startDate: this.startDate,
|
||||
endDate: this.endDate,
|
||||
}).then(res => {
|
||||
// this.getDataList = [res["data"]] || [];
|
||||
// this.isLoading = false;
|
||||
this.getDataList = res['data'] || [];
|
||||
this.isLoading = false;
|
||||
});
|
||||
},
|
||||
toWeek() {
|
||||
this.startDate = dayjs().subtract(7, 'day').format('YYYY-MM-DD');
|
||||
this.sliderClass.bgWeekBox = true;
|
||||
this.sliderClass.bgMonthBox = false;
|
||||
this.onGetPageData();
|
||||
},
|
||||
toMonth() {
|
||||
this.startDate = dayjs().subtract(30, 'day').format('YYYY-MM-DD');
|
||||
this.sliderClass.bgWeekBox = false;
|
||||
this.sliderClass.bgMonthBox = true;
|
||||
this.onGetPageData();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.onGetPageData();
|
||||
this.renderTimer = setInterval(() => {
|
||||
if (this.sliderClass.bgWeekBox) {
|
||||
this.toMonth();
|
||||
} else {
|
||||
this.toWeek();
|
||||
}
|
||||
}, this.$store.getters.intervalTime);
|
||||
},
|
||||
beforeRouteLeave() {
|
||||
clearInterval(this.renderTimer);
|
||||
},
|
||||
changeActive(newActive) {
|
||||
this.active = newActive
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bgBottomLeftBox {
|
||||
background-image: url('@/assets/svg/Monitor/BottomLeft/Box.svg');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bgWeekBox {
|
||||
background-image: url('@/assets/svg/Monitor/BottomLeft/WeekActive.svg');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bgMonthBox {
|
||||
background-image: url('@/assets/svg/Monitor/BottomLeft/MonthActive.svg');
|
||||
}
|
||||
|
||||
.deptBody {
|
||||
height: calc(100% - 5.07vh);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss'
|
||||
</style>
|
||||
|
||||
@ -1,344 +0,0 @@
|
||||
<template>
|
||||
<div id="main"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
// 定义柱状图左侧图形元素
|
||||
const leftRect = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 15, //柱状图宽
|
||||
zWidth: 8, //阴影折角宽
|
||||
zHeight: 4, //阴影折角高
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const api = shape.api;
|
||||
const xAxisPoint = api.coord([shape.xValue, 0]);
|
||||
const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
|
||||
const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
|
||||
const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
|
||||
const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
|
||||
const p4 = [shape.x + shape.width / 2, shape.y];
|
||||
|
||||
ctx.moveTo(p0[0], p0[1]);
|
||||
ctx.lineTo(p1[0], p1[1]);
|
||||
ctx.lineTo(p2[0], p2[1]);
|
||||
ctx.lineTo(p3[0], p3[1]);
|
||||
ctx.lineTo(p4[0], p4[1]);
|
||||
ctx.lineTo(p0[0], p0[1]);
|
||||
ctx.closePath();
|
||||
},
|
||||
});
|
||||
// 定义柱状图右侧以及顶部图形元素
|
||||
const rightRect = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 14,
|
||||
zWidth: 10,
|
||||
zHeight: 8,
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const api = shape.api;
|
||||
const xAxisPoint = api.coord([shape.xValue, 0]);
|
||||
const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];
|
||||
const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
|
||||
const p4 = [shape.x + shape.width / 2, shape.y];
|
||||
const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
|
||||
const p6 = [
|
||||
shape.x + shape.width / 2 + shape.zWidth,
|
||||
shape.y - shape.zHeight / 2,
|
||||
];
|
||||
const p7 = [
|
||||
shape.x - shape.width / 2 + shape.zWidth,
|
||||
shape.y - shape.zHeight,
|
||||
];
|
||||
ctx.moveTo(p4[0], p4[1]);
|
||||
ctx.lineTo(p3[0], p3[1]);
|
||||
ctx.lineTo(p5[0], p5[1]);
|
||||
ctx.lineTo(p6[0], p6[1]);
|
||||
ctx.lineTo(p4[0], p4[1]);
|
||||
|
||||
ctx.moveTo(p4[0], p4[1]);
|
||||
ctx.lineTo(p6[0], p6[1]);
|
||||
ctx.lineTo(p7[0], p7[1]);
|
||||
ctx.lineTo(p1[0], p1[1]);
|
||||
ctx.lineTo(p4[0], p4[1]);
|
||||
ctx.closePath();
|
||||
},
|
||||
});
|
||||
|
||||
// 注册图形元素
|
||||
echarts.graphic.registerShape("leftRect", leftRect);
|
||||
echarts.graphic.registerShape("rightRect", rightRect);
|
||||
|
||||
export default {
|
||||
name: "DepHistogram",
|
||||
props: {
|
||||
getDataList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labels: ["骨科", "心胸外科", "普通外科", "神经外科", "整形外科"],
|
||||
seriesData: [
|
||||
{
|
||||
label: "骨科",
|
||||
value: [32],
|
||||
isHave: false,
|
||||
},
|
||||
{
|
||||
label: "心胸外科",
|
||||
value: [24],
|
||||
isHave: false,
|
||||
},
|
||||
{
|
||||
label: "普通外科",
|
||||
value: [42],
|
||||
isHave: false,
|
||||
},
|
||||
{
|
||||
label: "神经外科",
|
||||
value: [20],
|
||||
isHave: false,
|
||||
},
|
||||
{
|
||||
label: "整形外科",
|
||||
value: [18],
|
||||
isHave: false,
|
||||
},
|
||||
],
|
||||
colors: [
|
||||
[
|
||||
{ offset: 0, color: "rgba(26, 132, 191, 1)" },
|
||||
{ offset: 1, color: "rgba(52, 163, 224, 0.5)" },
|
||||
],
|
||||
[
|
||||
{ offset: 0, color: "rgba(137, 163, 164, 1)" },
|
||||
{ offset: 1, color: "rgba(137, 163, 164, 0.5)" },
|
||||
],
|
||||
[
|
||||
{ offset: 0, color: "rgba(44, 166, 166, 1)" },
|
||||
{ offset: 1, color: "rgba(44, 166, 166, 0.5)" },
|
||||
],
|
||||
[
|
||||
{ offset: 0, color: "rgba(34, 66, 186, 1)" },
|
||||
{ offset: 1, color: "rgba(34, 66, 186, 0.5)" },
|
||||
],
|
||||
[
|
||||
{ offset: 0, color: "rgba(250,200,88, 1)" },
|
||||
{ offset: 1, color: "rgba(250,200,88, 0.6)" },
|
||||
],
|
||||
],
|
||||
option: {},
|
||||
myChart: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
getDataList(newVal) {
|
||||
if (this.$store.getters.isMock) {
|
||||
return;
|
||||
}
|
||||
if (newVal.length) {
|
||||
this.wrapData(newVal);
|
||||
this.initOption();
|
||||
// 手动更新数据
|
||||
this.option && this.myChart && this.myChart.setOption(this.option);
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// 包装接口数据--初始化调用
|
||||
if (this.getDataList.length) {
|
||||
if (this.$store.getters.isMock) {
|
||||
console.log("sssxx");
|
||||
} else {
|
||||
this.wrapData(this.getDataList);
|
||||
}
|
||||
}
|
||||
this.initOption();
|
||||
},
|
||||
methods: {
|
||||
initOption() {
|
||||
this.option = {
|
||||
grid: {
|
||||
height: "80%",
|
||||
top: "8%",
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
// bottom: "5%",
|
||||
},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
data: this.labels,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: -20, // 表示倾斜的角度
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
// data: this.getlegendData(),
|
||||
// right: "25",
|
||||
// top: "18",
|
||||
// icon: "rect",
|
||||
// itemHeight: 10,
|
||||
// itemWidth: 10,
|
||||
// textStyle: {
|
||||
// color: "red",
|
||||
// },
|
||||
show: false,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: ["#fff"],
|
||||
},
|
||||
},
|
||||
},
|
||||
series: this.getSeriesData(),
|
||||
};
|
||||
},
|
||||
getlegendData() {
|
||||
let that = this;
|
||||
const data = [];
|
||||
this.labels.forEach((item, index) => {
|
||||
data.push({
|
||||
name: item,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
that.colors[index]
|
||||
),
|
||||
},
|
||||
});
|
||||
});
|
||||
return data;
|
||||
},
|
||||
getSeriesData() {
|
||||
let that = this;
|
||||
const data = [];
|
||||
this.seriesData.forEach((item, index) => {
|
||||
data.push({
|
||||
type: "custom",
|
||||
name: item.label,
|
||||
renderItem: function (params, api) {
|
||||
return that.getRenderItem(params, api);
|
||||
},
|
||||
label: {
|
||||
show: true, // 显示数值
|
||||
position: "insideTop", // 数值显示的位置
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: "#fff",
|
||||
padding: [0, 0, 0, 7],
|
||||
},
|
||||
formatter: function (data) {
|
||||
let txt = "";
|
||||
that.seriesData.forEach((a) => {
|
||||
if (a.label == data.seriesName && !a.isHave) {
|
||||
a.isHave = true;
|
||||
txt = data.value;
|
||||
}
|
||||
});
|
||||
return txt;
|
||||
},
|
||||
},
|
||||
data: item.value,
|
||||
itemStyle: {
|
||||
color: () => {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
that.colors[index]
|
||||
);
|
||||
},
|
||||
shadowBlur: 8,
|
||||
shadowColor: 'rgba(255,255,255,.4)',
|
||||
borderColor: "rgba(255,255,255,.6)",
|
||||
borderWidth: 0.4,
|
||||
},
|
||||
});
|
||||
});
|
||||
return data;
|
||||
},
|
||||
getRenderItem(params, api) {
|
||||
const index = params.seriesIndex;
|
||||
let location = api.coord([api.value(0) + index, api.value(1)]);
|
||||
// var extent = api.size([0, api.value(1)]);
|
||||
return {
|
||||
type: "group",
|
||||
children: [
|
||||
{
|
||||
type: "leftRect",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0) + index,
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
},
|
||||
style: api.style(),
|
||||
},
|
||||
{
|
||||
type: "rightRect",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0) + index,
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
},
|
||||
style: api.style(),
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
wrapData(list) {
|
||||
let that = this;
|
||||
that.labels = [];
|
||||
that.seriesData = [];
|
||||
list.forEach((item) => {
|
||||
that.labels.push(item.deptName);
|
||||
that.seriesData.push({
|
||||
label: item.deptName,
|
||||
value: [item.deptCount],
|
||||
isHave: false,
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
var chartDom = document.getElementById("main");
|
||||
this.myChart = echarts.init(chartDom);
|
||||
this.option && this.myChart.setOption(this.option);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,165 @@
|
||||
.boxWrap {
|
||||
width: vw(1280);
|
||||
height: vh(438);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.opGradeBox {
|
||||
width: vw(340);
|
||||
height: 100%;
|
||||
|
||||
header {
|
||||
height: vh(48);
|
||||
background-image: url("@/assets/img/pageMonitor/headerLine.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
|
||||
div {
|
||||
width: vw(200);
|
||||
height: vh(40);
|
||||
background-image: url("@/assets/img/pageMonitor/headerBg.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin-left: vw(12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
color: #444444;
|
||||
font-size: vw(22);
|
||||
padding-left: vw(32);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.asaGradeBox {
|
||||
width: vw(340);
|
||||
height: 100%;
|
||||
|
||||
header {
|
||||
height: vh(48);
|
||||
background-image: url("@/assets/img/pageMonitor/headerLine.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
|
||||
div {
|
||||
width: vw(200);
|
||||
height: vh(40);
|
||||
background-image: url("@/assets/img/pageMonitor/headerBg.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin-left: vw(12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
color: #444444;
|
||||
font-size: vw(22);
|
||||
padding-left: vw(32);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.opstatisticBox {
|
||||
width: vw(552);
|
||||
height: 100%;
|
||||
|
||||
header {
|
||||
height: vh(48);
|
||||
background-image: url("@/assets/img/pageMonitor/headerLine.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
|
||||
div {
|
||||
width: vw(300);
|
||||
height: vh(40);
|
||||
background-image: url("@/assets/img/pageMonitor/headerBg.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin-left: vw(12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
color: #444444;
|
||||
font-size: vw(22);
|
||||
padding-left: vw(32);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
top: 16%;
|
||||
|
||||
>div {
|
||||
width: vw(40);
|
||||
height: vh(70);
|
||||
background: #E9E4FF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
span {
|
||||
color: rgba(90, 73, 173, 0.5);
|
||||
font-size: vw(16);
|
||||
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
transform: skewY(-30deg);
|
||||
|
||||
span {
|
||||
transform: skewY(30deg);
|
||||
line-height: vh(60);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-top: vw(-24);
|
||||
transform: skewY(30deg);
|
||||
|
||||
span {
|
||||
transform: skewY(-30deg);
|
||||
line-height: vh(90);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #5C4BAD;
|
||||
z-index: 1;
|
||||
height: vh(82);
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #DFE0F3;
|
||||
box-shadow: 2px 4px 20px 0px rgba(87, 68, 175, 0.2);
|
||||
background: linear-gradient(180deg, rgba(240, 243, 253, 0.95) 0%, rgba(232, 238, 253, 0.95) 100%);
|
||||
border-radius: vw(8);
|
||||
padding: vh(16) vw(8);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
main {
|
||||
height: vh(350);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,177 @@
|
||||
.box {
|
||||
width: vw(552);
|
||||
height: vh(444);
|
||||
box-sizing: border-box;
|
||||
margin-bottom: vh(24);
|
||||
border: 2px solid #DFE0F3;
|
||||
box-shadow: 2px 4px 20px 0px rgba(87, 68, 175, 0.2);
|
||||
background: linear-gradient(180deg, rgba(240, 243, 253, 0.95) 0%, rgba(232, 238, 253, 0.95) 100%);
|
||||
border-radius: vw(8);
|
||||
padding: vh(8) vw(8);
|
||||
|
||||
header {
|
||||
height: vh(48);
|
||||
background-image: url("@/assets/img/pageMonitor/headerLine.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
|
||||
div {
|
||||
width: vw(200);
|
||||
height: vh(40);
|
||||
background-image: url("@/assets/img/pageMonitor/headerBg.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin-left: vw(12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
color: #444444;
|
||||
font-size: vw(22);
|
||||
padding-left: vw(32);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
height: vh(390);
|
||||
|
||||
.top {
|
||||
width: vw(488);
|
||||
height: vh(160);
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
background: linear-gradient(180deg, #F2F3FA 0%, #EAE9FE 100%);
|
||||
border: 1px solid #EDE9F4;
|
||||
box-sizing: border-box;
|
||||
border-radius: vw(4);
|
||||
|
||||
.left {
|
||||
div:first-of-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: vh(12);
|
||||
min-width: vw(120);
|
||||
|
||||
img {
|
||||
margin-right: vw(8);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: vw(20);
|
||||
color: #302D32;
|
||||
}
|
||||
}
|
||||
|
||||
div:last-of-type {
|
||||
color: #876395;
|
||||
font-size: vw(24);
|
||||
line-height: vw(44);
|
||||
letter-spacing: 2px;
|
||||
|
||||
span {
|
||||
color: #924AAC;
|
||||
font-size: vw(44);
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.numBox {
|
||||
width: vw(276);
|
||||
height: vh(50);
|
||||
background: linear-gradient(272deg, rgba(255, 85, 238, 0.045) 2%, rgba(150, 35, 135, 0.066) 99%);
|
||||
border: 2px solid;
|
||||
border-image: linear-gradient(161deg, rgba(255, 169, 205, 0.4) -11%, rgba(255, 169, 202, 0) 42%) 1.5;
|
||||
box-sizing: border-box;
|
||||
padding: 0 vw(16);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.leftTextBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.potionBox {
|
||||
width: vw(4);
|
||||
height: vw(4);
|
||||
border-radius: 100%;
|
||||
background: #D58DFF;
|
||||
box-shadow: 0px 0px vw(4) vw(2) #D58DFF;
|
||||
margin-right: vw(12);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: vw(16);
|
||||
color: #571273;
|
||||
}
|
||||
}
|
||||
|
||||
.rightTextBox {
|
||||
font-size: vw(14);
|
||||
color: #571273;
|
||||
line-height: vw(28);
|
||||
|
||||
span {
|
||||
font-size: vw(28);
|
||||
color: #924AAC;
|
||||
vertical-align: bottom;
|
||||
margin-right: vw(4);
|
||||
}
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
margin-bottom: vh(20);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: vw(488);
|
||||
height: vh(160);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
div {
|
||||
width: vw(146);
|
||||
height: vh(160);
|
||||
box-sizing: border-box;
|
||||
padding: vh(24) vw(20);
|
||||
background: linear-gradient(180deg, #F2F3FA 0%, #DEE6FF 100%);
|
||||
border: 2px solid #EDE9F4;
|
||||
border-radius: vw(4);
|
||||
|
||||
.secondRow {
|
||||
margin-top: vh(12);
|
||||
margin-bottom: vh(4);
|
||||
font-size: vw(16);
|
||||
color: #302D32;
|
||||
}
|
||||
|
||||
.thridRow {
|
||||
font-size: vw(28);
|
||||
color: #605C68;
|
||||
|
||||
span {
|
||||
font-size: vw(44);
|
||||
color: #5D49AF;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,145 @@
|
||||
.box {
|
||||
width: vw(1280);
|
||||
height: vh(444);
|
||||
box-sizing: border-box;
|
||||
margin-bottom: vh(24);
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #DFE0F3;
|
||||
box-shadow: 2px 4px 20px 0px rgba(87, 68, 175, 0.2);
|
||||
background: linear-gradient(180deg, rgba(240, 243, 253, 0.95) 0%, rgba(232, 238, 253, 0.95) 100%);
|
||||
border-radius: vw(8);
|
||||
padding: vh(24);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
:deep(.el-carousel) {
|
||||
height: 100%;
|
||||
|
||||
.el-carousel__container {
|
||||
height: 100%;
|
||||
|
||||
.el-carousel__item {
|
||||
section {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, vw(186));
|
||||
justify-content: space-between;
|
||||
align-content: space-between;
|
||||
|
||||
>div {
|
||||
height: vh(112);
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(180deg, rgba(232, 238, 255, 0.4) 0%, #E8EEFF 100%);
|
||||
border: 2px solid #E3E5FD;
|
||||
border-radius: vw(8);
|
||||
|
||||
p {
|
||||
font-size: vw(22);
|
||||
color: #000;
|
||||
text-align: center;
|
||||
letter-spacing: 2px;
|
||||
line-height: vh(54);
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, rgba(0, 109, 171, 0) -1%, #A7DFFF 50%, rgba(0, 109, 171, 0) 98%);
|
||||
}
|
||||
|
||||
div:last-of-type {
|
||||
box-sizing: border-box;
|
||||
height: vh(54);
|
||||
padding: 0 vw(20);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
|
||||
span {
|
||||
color: #000;
|
||||
font-size: vw(20);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.opEnter {
|
||||
p {
|
||||
color: #35CEFD;
|
||||
}
|
||||
|
||||
div:last-of-type {
|
||||
span {
|
||||
color: #35CEFD;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.anesStart {
|
||||
p {
|
||||
color: #424CFE;
|
||||
}
|
||||
|
||||
div:last-of-type {
|
||||
span {
|
||||
color: #424CFE;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.opStart {
|
||||
p {
|
||||
color: #B53FDF;
|
||||
}
|
||||
|
||||
div:last-of-type {
|
||||
span {
|
||||
color: #B53FDF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.opEnd {
|
||||
p {
|
||||
color: #BAE7A4;
|
||||
}
|
||||
|
||||
div:last-of-type {
|
||||
span {
|
||||
color: #BAE7A4;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.anesEnd {
|
||||
p {
|
||||
color: #946FEC;
|
||||
}
|
||||
|
||||
div:last-of-type {
|
||||
span {
|
||||
color: #946FEC;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.empty {
|
||||
p {
|
||||
color: #037E7E;
|
||||
}
|
||||
|
||||
div:last-of-type {
|
||||
span {
|
||||
color: #037E7E;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,11 @@
|
||||
const { defineConfig } = require('@vue/cli-service')
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true
|
||||
transpileDependencies: true,
|
||||
css: {
|
||||
loaderOptions: {
|
||||
scss: {
|
||||
additionalData: `@import "@/assets/scss/utils.scss";`
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
Reference in new issue