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

fix(n): 第一版修改

Browse Source
main
@0Melon0 2 years ago
parent 00c32862f1
commit 8397924d06
15 changed files with 451 additions and 348 deletions
Show Stats Download Patch File Download Diff File

11
src/App.vue
Unescape View File

@ -25,7 +25,7 @@ export default {
enterFullscreen() { enterFullscreen() {
const element = document.documentElement; const element = document.documentElement;
// 请求全屏模式 // 请求全屏模式
if (!this.isLoding) { if (this.isLoding) {
if (element.webkitRequestFullscreen) { if (element.webkitRequestFullscreen) {
// Chrome, Safari and Opera // Chrome, Safari and Opera
element.webkitRequestFullscreen(); element.webkitRequestFullscreen();
@ -48,12 +48,21 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@font-face {
font-family: 'DIN-Bold';
src: url('@/assets/fonts/DIN-Bold.otf') format('opentype');
}
.numFont {
font-family: 'DIN-Bold';
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
text-decoration: none; text-decoration: none;
list-style: none; list-style: none;
color: #fff; color: #fff;
font-family: Microsoft YaHei;
} }
.app { .app {
width: 100%; width: 100%;

BIN
src/assets/fonts/DIN-Bold.otf
View File

Binary file not shown.

34
src/components/comHeader/index.vue
Unescape View File

@ -3,8 +3,10 @@
<dv-decoration-8 class="left" /> <dv-decoration-8 class="left" />
<dv-decoration-5 class="center" /> <dv-decoration-5 class="center" />
<dv-decoration-8 class="right" :reverse="true" /> <dv-decoration-8 class="right" :reverse="true" />
<div class="centerTitle">{{$route.meta.title}}</div> <div class="centerTitle">{{ $route.meta.title }}</div>
<dv-decoration-7 class="dateBox"><span>{{ curTime }}</span></dv-decoration-7> <dv-decoration-7 class="dateBox"
><span>{{ curTime }}</span></dv-decoration-7
>
</Header> </Header>
</template> </template>
@ -66,38 +68,38 @@ Header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-shrink: 0; flex-shrink: 0;
height: 100px; height: 8.6vh;
position: relative; position: relative;
.left { .left {
width: 25%; width: 25%;
height: 60px; height: 6vh;
} }
.center { .center {
width: 40%; width: 40%;
height: 60px; height: 6vh;
margin-top: 30px; margin-top: 2.2vh;
} }
.right { .right {
width: 25%; width: 25%;
height: 60px; height: 6vh;
} }
.centerTitle { .centerTitle {
position: absolute; position: absolute;
font-size: 30px; font-size: 3.4vh;
font-weight: 700; font-weight: 700;
left: 50%; left: 50%;
top: 15px; top: 0.6vh;
transform: translateX(-50%); transform: translateX(-50%);
} }
.dateBox { .dateBox {
position: absolute; position: absolute;
width: 18%; width: 32vh;
height: 60px; height: 3vh;
font-size: 16px; font-size: 1.8vh;
font-weight: 700; font-weight: 400;
right: 9%; right: 19vh;
top: 27px; top: 4.2vh;
span{ span {
margin: 0 8px; margin: 0 8px;
} }
} }

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

@ -4,12 +4,11 @@
<div class="chartsBox"> <div class="chartsBox">
<div class="chartItem"> <div class="chartItem">
<p>手术等级</p> <p>手术等级</p>
<dv-active-ring-chart :config="config1" /> <dv-charts :option="option1"></dv-charts>
</div> </div>
<dv-decoration-2 :reverse="true" />
<div class="chartItem"> <div class="chartItem">
<p>ASA分级</p> <p>ASA分级</p>
<dv-active-ring-chart :config="config2" /> <dv-charts :option="option2"></dv-charts>
</div> </div>
</div> </div>
</dv-border-box-13> </dv-border-box-13>
@ -20,47 +19,80 @@
export default { export default {
data() { data() {
return { return {
config1: { option1: {
data: [ series: [
{ {
name: '一级', type: 'pie',
value: 300, radius: ['40%', '55%'],
}, itemStyle: {
{ borderRadius: 10,
name: '二级', borderColor: '#fff',
value: 250, borderWidth: 2,
}, },
{ data: [
name: '三级', {
value: 250, name: '一级',
}, value: 300,
{ },
name: '四级', {
value: 100, name: '二级',
}, value: 250,
{ },
name: '五级', {
value: 80, name: '三级',
value: 250,
},
{
name: '四级',
value: 100,
},
{
name: '五级',
value: 80,
},
],
outsideLabel: {
formatter: '{name} {value}',
labelLineBendGap: '8%',
labelLineEndLength: 8,
style: {
fontSize: 16,
},
},
}, },
], ],
}, },
config2: { option2: {
data: [ series: [
{
name: 'I级',
value: 80,
},
{
name: 'II级',
value: 50,
},
{
name: 'III级',
value: 10,
},
{ {
name: 'IV级', type: 'pie',
value: 20, radius: ['40%', '55%'],
data: [
{
name: 'I级',
value: 80,
},
{
name: 'II级',
value: 50,
},
{
name: 'III级',
value: 10,
},
{
name: 'IV级',
value: 20,
},
],
outsideLabel: {
formatter: '{name} {value}',
labelLineBendGap: '8%',
labelLineEndLength: 8,
style: {
fontSize: 16,
},
},
}, },
], ],
}, },
@ -80,7 +112,7 @@ export default {
padding-top: 10px; padding-top: 10px;
box-sizing: border-box; box-sizing: border-box;
.chartItem { .chartItem {
width: 48%; width: 50%;
height: 100%; height: 100%;
flex-shrink: 0; flex-shrink: 0;
padding-top: 40px; padding-top: 40px;
@ -88,8 +120,9 @@ export default {
p { p {
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
letter-spacing: 0.1vh;
} }
:deep(.dv-active-ring-chart) { :deep(.dv-charts-container) {
height: 90%; height: 90%;
} }
} }

109
src/views/pageMonitor/bottomMiddle/index.vue
Unescape View File

@ -10,7 +10,7 @@
<p>月</p> <p>月</p>
</div> </div>
</nav> </nav>
<dv-capsule-chart :config="config" /> <dv-charts :option="option"></dv-charts>
</div> </div>
</div> </div>
</dv-border-box-13> </dv-border-box-13>
@ -21,30 +21,60 @@
export default { export default {
data() { data() {
return { return {
config: { option: {
data: [ grid: {
{ left: '20%',
name: '择期手术', top: '6%',
value: 120, },
xAxis: {
data: 'value',
max: '1%',
min: 0,
axisLabel: {
style: {
fontSize: 0,
},
}, },
{ axisLine: {
name: '急诊手术', show: false,
value: 10,
}, },
{ },
name: '门诊手术', yAxis: {
value: 30, type: 'category',
data: ['择期手术', '急诊手术', '门诊手术', '无痛手术', '日间手术', '外科手术'],
axisLabel: {
style: {
stroke: '#fff',
fontSize: 14,
},
}, },
{ splitLine: { show: false },
name: '无痛手术', axisLine: {
value: 20, show: false,
}, },
},
series: [
{ {
name: '日间手术', type: 'bar',
value: 25, data: [10, 20, 25, 30, 40, 80],
barWidth: '40%',
label: {
show: true,
position: 'top',
offset: [16, 2],
style: {
stroke: '#fff',
fontSize: 14,
},
},
gradient: {
color: ['#83bff6', '#188df0', '#188df0'],
},
backgroundBar: {
show: true,
},
}, },
], ],
showValue: true,
}, },
}; };
}, },
@ -59,57 +89,38 @@ export default {
height: 100%; height: 100%;
display: flex; display: flex;
position: relative; position: relative;
padding-top: 10px; padding-top: 1vh;
box-sizing: border-box; box-sizing: border-box;
.chartItem { .chartItem {
width: 100%; width: 100%;
height: 100%; height: 100%;
flex-shrink: 0; flex-shrink: 0;
padding: 0 20px; padding: 2vh;
padding-top: 20px;
box-sizing: border-box; box-sizing: border-box;
nav { nav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
.right { .right {
display: flex; display: flex;
.active, .active,
p:hover { p:hover {
color: #87ceeb; color: #87ceeb;
border: 1px solid #87ceeb;
} }
p { p {
margin-right: 10px; margin-right: 1.5vh;
cursor: pointer; cursor: pointer;
border: 1px solid #fff;
font-size: 1.6vh;
width: 2.6vh;
height: 2.6vh;
line-height: 2.6vh;
text-align: center;
} }
} }
p { p {
font-size: 24px; font-size: 2.4vh;
}
}
:deep(.dv-capsule-chart) {
height: 90%;
transform: translateX(-10px) translateY(20px);
.label-column {
div {
font-size: 18px;
margin-top: 7px;
}
}
.capsule-container {
.capsule-item {
height: 20px;
.capsule-item-column {
height: 18px;
.capsule-item-value {
font-size: 18px;
transform: translateX(110%);
}
}
}
.unit-label {
visibility: hidden;
font-size: 20px;
}
} }
} }
} }

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

@ -10,7 +10,7 @@
<p>月</p> <p>月</p>
</div> </div>
</nav> </nav>
<dv-bar-chart></dv-bar-chart> <dv-charts :option="option"></dv-charts>
</div> </div>
</div> </div>
</dv-border-box-13> </dv-border-box-13>
@ -18,11 +18,57 @@
</template> </template>
<script> <script>
// import dvBarChart from '@/components/dvBarChart/index.vue';
import comBar from '@/components/comBar/index.vue';
export default { export default {
components: { data() {
'dv-bar-chart': comBar, return {
option: {
xAxis: {
type: 'category',
data: ['骨科', '心胸外科', '普通外科', '神经外科', '整形外科'],
axisLabel: {
style: {
stroke: '#fff',
fontSize: 14,
fontWeight: 'normal',
fontFamily: 'Microsoft YaHei',
},
},
},
yAxis: {
type: 'value',
data: 'value',
max: '1%',
axisLabel: {
style: {
stroke: '#fff',
fontSize: 14,
fontWeight: 'normal',
fontFamily: 'Microsoft YaHei',
},
},
},
series: [
{
type: 'bar',
data: [200, 150, 120, 80, 70],
barWidth: '40%',
label: {
show: true,
position: 'top',
style: {
stroke: '#fff',
fontSize: 14,
fontWeight: 'normal',
fontFamily: 'Microsoft YaHei',
},
},
gradient: {
color: ['#83bff6', '#188df0', '#188df0'],
},
},
],
},
};
}, },
}; };
</script> </script>
@ -35,36 +81,40 @@ export default {
height: 100%; height: 100%;
display: flex; display: flex;
position: relative; position: relative;
padding-top: 10px; padding-top: 1vh;
box-sizing: border-box; box-sizing: border-box;
.chartItem { .chartItem {
width: 100%; width: 100%;
height: 100%; height: 100%;
flex-shrink: 0; flex-shrink: 0;
padding: 0 20px; padding: 2vh;
padding-top: 20px;
box-sizing: border-box; box-sizing: border-box;
nav { nav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
.right { .right {
display: flex; display: flex;
.active, .active,
p:hover { p:hover {
color: #87ceeb; color: #87ceeb;
border: 1px solid #87ceeb;
} }
p { p {
margin-right: 10px; margin-right: 1.5vh;
cursor: pointer; cursor: pointer;
border: 1px solid #fff;
font-size: 1.6vh;
width: 2.6vh;
height: 2.6vh;
line-height: 2.6vh;
text-align: center;
} }
} }
p { p {
font-size: 24px; font-size: 2.4vh;
} }
} }
:deep(.dv-charts-container){
height: 90%;
}
} }
} }
} }

79
src/views/pageMonitor/topLeft/index.vue
Unescape View File

@ -3,27 +3,21 @@
<dv-border-box-13> <dv-border-box-13>
<div class="box"> <div class="box">
<dv-border-box-2 class="item"> <dv-border-box-2 class="item">
<p class="active numFont">80%</p>
<p>首台准点率</p> <p>首台准点率</p>
<p>
<dv-digital-flop :config="config1" />
</p>
</dv-border-box-2> </dv-border-box-2>
<dv-border-box-2 class="item"> <dv-border-box-2 class="item">
<p class="active numFont">86%</p>
<p>手术间利用率</p> <p>手术间利用率</p>
<p>
<dv-digital-flop :config="config2" />
</p>
</dv-border-box-2> </dv-border-box-2>
<dv-border-box-2 class="item"> <dv-border-box-2 class="item">
<p>总人数 <span>400</span></p> <p>总人数 <span class="numFont">400</span></p>
<p>进行中 <span>180</span></p> <p>进行中 <span class="numFont">180</span></p>
<p>待进行 <span>220</span></p> <p>待进行 <span class="numFont">220</span></p>
</dv-border-box-2> </dv-border-box-2>
<dv-border-box-2 class="item"> <dv-border-box-2 class="item">
<p class="active numFont">80个</p>
<p>急症患者</p> <p>急症患者</p>
<p>
<dv-digital-flop :config="config6" />
</p>
</dv-border-box-2> </dv-border-box-2>
</div> </div>
</dv-border-box-13> </dv-border-box-13>
@ -33,44 +27,7 @@
<script> <script>
export default { export default {
data() { data() {
return { return {};
config1: {
number: [0],
content: '{nt} %',
animationFrame: 150,
animationCurve: 'easeOutCubic',
style: {
fontSize: 30,
},
},
config2: {
number: [0],
content: '{nt} %',
animationFrame: 150,
animationCurve: 'easeOutCubic',
style: {
fontSize: 30,
},
},
config6: {
number: [0],
content: '{nt} 个',
animationFrame: 150,
animationCurve: 'easeOutCubic',
style: {
fontSize: 30,
},
},
};
},
mounted() {
const { config1, config2, config6 } = this;
config1.number = [80];
config2.number = [86];
config6.number = [180];
this.config1 = { ...this.config1 };
this.config2 = { ...this.config2 };
this.config6 = { ...this.config6 };
}, },
}; };
</script> </script>
@ -82,8 +39,10 @@ export default {
height: 100%; height: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-evenly;
align-items: center; align-content: space-evenly;
padding: 2vh;
box-sizing: border-box;
.item { .item {
flex-basis: 45%; flex-basis: 45%;
flex-shrink: 0; flex-shrink: 0;
@ -95,19 +54,25 @@ export default {
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
font-size: 20px; font-size: 2.3vh;
p { p {
height: 30%; height: 30%;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
align-items: center; align-items: center;
letter-spacing: 0.1vh;
font-size: 2.4vh;
span { span {
margin-left: 10px; margin-left: 1vh;
} color: aquamarine;
.dv-digital-flop { font-size: 2.6vh;
height: 100%;
} }
} }
.active {
color: aquamarine;
font-size: 3.8vh;
letter-spacing: 0.3vh;
}
} }
} }
} }

25
src/views/pageMonitor/topRight/index.vue
Unescape View File

@ -5,7 +5,7 @@
<el-carousel-item v-for="item in 3" :key="item"> <el-carousel-item v-for="item in 3" :key="item">
<div class="item" v-for="(item1, index) in 21" :key="item1"> <div class="item" v-for="(item1, index) in 21" :key="item1">
<dv-border-box-2> <dv-border-box-2>
<p>WK{{ String(index + 1).padStart(2, '0') }}</p> <p class="numFont">WK{{ String(index + 1).padStart(2, '0') }}</p>
<p v-if="index % 3" style="color: #f00">手术中</p> <p v-if="index % 3" style="color: #f00">手术中</p>
<p v-else-if="index % 5" style="color: #ff0">麻醉结束</p> <p v-else-if="index % 5" style="color: #ff0">麻醉结束</p>
<p v-else style="color: #fff">空置中</p> <p v-else style="color: #fff">空置中</p>
@ -38,29 +38,30 @@ export default {
} }
.el-carousel__item { .el-carousel__item {
height: 100%; height: 100%;
padding: 2vh;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: space-evenly;
.item { .item {
float: left; flex-basis: 15.4vh;
width: 13%; height: 12vh;
padding-top: 10%; flex-shrink: 0;
position: relative;
margin-left: 1%;
margin-top: 1.8%;
> div { > div {
position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0;
left: 0;
.border-box-content { .border-box-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-evenly; justify-content: space-evenly;
letter-spacing: 0.1vh;
p:first-child { p:first-child {
font-size: 18px; font-size: 2.4vh;
} }
p:last-child { p:last-child {
font-size: 22px; font-size: 2.6vh;
} }
} }
} }

6
src/views/pageOperation/index.vue
Unescape View File

@ -29,18 +29,18 @@ export default {
.operation { .operation {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 20px; padding: 2vh;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.leftBox { .leftBox {
flex-basis: 30%; flex-basis: 25%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
} }
.rightBox { .rightBox {
flex-basis: 69%; flex-basis: 74%;
} }
} }
</style> </style>

5
src/views/pageOperation/leftBottom/index.vue
Unescape View File

@ -11,6 +11,9 @@ export default {
data() { data() {
return { return {
option: { option: {
grid: {
left: '18%',
},
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['3月', '4月', '5月', '6月', '7月', '8月'], data: ['3月', '4月', '5月', '6月', '7月', '8月'],
@ -57,6 +60,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.leftBottom { .leftBottom {
height: 49%; height: 39%;
} }
</style> </style>

103
src/views/pageOperation/leftTop/index.vue
Unescape View File

@ -1,15 +1,12 @@
<template> <template>
<div class="leftTop"> <div class="leftTop">
<dv-border-box-13> <dv-border-box-13>
<dv-border-box-2 class="item"> <dv-charts :option="option"></dv-charts>
<p>首台准点率 <span>80%</span></p> <section class="dataSection">
</dv-border-box-2> <p>总人数<span class="numFont">400</span></p>
<dv-decoration-2 /> <p>进行中<span class="numFont">180</span></p>
<dv-border-box-2 class="item"> <p>待进行<span class="numFont">220</span></p>
<p>总人数 <span>400</span></p> </section>
<p>进行中 <span>180</span></p>
<p>待进行 <span>220</span></p>
</dv-border-box-2>
</dv-border-box-13> </dv-border-box-13>
</div> </div>
</template> </template>
@ -17,42 +14,74 @@
<script> <script>
export default { export default {
data() { data() {
return {}; return {
option: {
series: [
{
type: 'gauge',
startAngle: -Math.PI / 2,
endAngle: Math.PI * 1.5,
arcLineWidth: 35,
data: [{ name: 'itemA', value: 80, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] }],
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
pointer: {
show: false,
},
dataItemStyle: {
lineCap: 'round',
},
details: {
show: true,
formatter: '首台准点率 {value}%',
style: {
fill: 'aqua',
fontSize: 24,
},
},
backgroundArc: {
style: {
stroke: '#4F518C',
},
},
},
],
},
};
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.leftTop { .leftTop {
height: 49%; height: 59%;
position: relative;
:deep(.dv-border-box-13) { :deep(.dv-border-box-13) {
padding: 20px; padding: 2vh;
box-sizing: border-box; box-sizing: border-box;
> div { .dv-charts-container {
display: flex; height: 80%;
flex-direction: column; }
justify-content: space-around; }
align-items: center; .dataSection {
.item { width: 100%;
height: 45%; position: absolute;
.border-box-content { bottom: 1.4vh;
display: flex; p {
flex-direction: column; color: #fff;
justify-content: space-around; font-size: 2.4vh;
align-items: center; text-align: center;
padding: 20px 0 ; letter-spacing: .2vh;
box-sizing: border-box; line-height: 4vh;
p { span {
font-size: 20px; font-size: 2.6vh;
span { color: aqua;
font-size: 24px; letter-spacing: 0.1vh;
color: #61bad3; margin-left: 1vh;
}
}
}
}
.dv-decoration-2 {
height: 2%;
} }
} }
} }

32
src/views/pageOperation/rightMiddle/index.vue
Unescape View File

@ -1,6 +1,8 @@
<template> <template>
<div class="rightMiddle"> <div class="rightMiddle">
<dv-scroll-board :config="config" /> <dv-border-box-13>
<dv-scroll-board :config="config" />
</dv-border-box-13>
</div> </div>
</template> </template>
@ -37,6 +39,7 @@ export default {
rowNum: 12, rowNum: 12,
waitTime: 10000, waitTime: 10000,
carousel: 'page', carousel: 'page',
headerBGC:"#1D70A2",
}, },
}; };
}, },
@ -46,19 +49,22 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.rightMiddle { .rightMiddle {
height: 100%; height: 100%;
:deep(.dv-scroll-board) { :deep(.dv-border-box-13) {
box-sizing: border-box; box-sizing: border-box;
height: 100%; padding: 2vh;
.header-item { .dv-scroll-board {
font-size: 18px; height: 100%;
} .header-item {
.ceil { font-size: 2vh;
font-size: 18px; }
white-space: nowrap; .ceil {
} font-size: 1.8vh;
.row-item { white-space: nowrap;
.ceil:last-child { }
color: #87ceeb; .row-item {
.ceil:last-child {
color: #87ceeb;
}
} }
} }
} }

14
src/views/pageRoom/leftMiddle/index.vue
Unescape View File

@ -3,17 +3,17 @@
<dv-border-box-13> <dv-border-box-13>
<dv-border-box-2 class="item"> <dv-border-box-2 class="item">
<p>手术间数</p> <p>手术间数</p>
<span>80</span> <span class="numFont">80</span>
</dv-border-box-2> </dv-border-box-2>
<dv-decoration-2 /> <dv-decoration-2 />
<dv-border-box-2 class="item"> <dv-border-box-2 class="item">
<p>手术间利用率</p> <p>手术间利用率</p>
<span>72%</span> <span class="numFont">72%</span>
</dv-border-box-2> </dv-border-box-2>
<dv-decoration-2 /> <dv-decoration-2 />
<dv-border-box-2 class="item"> <dv-border-box-2 class="item">
<p>平均接台时间</p> <p>平均接台时间</p>
<span>45分钟</span> <span class="numFont">45分钟</span>
</dv-border-box-2> </dv-border-box-2>
</dv-border-box-13> </dv-border-box-13>
</div> </div>
@ -27,7 +27,7 @@ export default {};
.leftMiddle { .leftMiddle {
height: 100%; height: 100%;
:deep(.dv-border-box-13) { :deep(.dv-border-box-13) {
padding: 20px; padding: 2vh;
box-sizing: border-box; box-sizing: border-box;
> div { > div {
display: flex; display: flex;
@ -41,13 +41,13 @@ export default {};
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
padding: 20px 0; padding: 2vh 0;
box-sizing: border-box; box-sizing: border-box;
p { p {
font-size: 24px; font-size: 2.4vh;
} }
span { span {
font-size: 30px; font-size: 3.6vh;
color: #61bad3; color: #61bad3;
} }
} }

88
src/views/pageRoom/rightMiddle/index.vue
Unescape View File

@ -1,6 +1,11 @@
<template> <template>
<div class="rightMiddle"> <div class="rightMiddle">
<dv-charts :option="option"></dv-charts> <dv-border-box-13>
<dv-loading v-if="isLoding">Loading...</dv-loading>
<section v-else>
<dv-charts :option="option"></dv-charts>
</section>
</dv-border-box-13>
</div> </div>
</template> </template>
@ -8,15 +13,16 @@
export default { export default {
data() { data() {
return { return {
isLoding: true,
option: { option: {
xAxis: { xAxis: {
type: 'category', type: 'category',
position: 'top', position: 'top',
data: 'value', data: 'value',
min: 0, min: 0,
max: 23, max: 24,
minInterval: 1, minInterval: 1,
splitNumber: 24, splitNumber: 25,
axisLabel: { axisLabel: {
style: { style: {
stroke: '#fff', stroke: '#fff',
@ -24,9 +30,6 @@ export default {
}, },
formatter: dataItem => `${String(dataItem.value).padStart(2, '0')}:00`, formatter: dataItem => `${String(dataItem.value).padStart(2, '0')}:00`,
}, },
axisLine: {
show: false,
},
}, },
yAxis: { yAxis: {
data: [], data: [],
@ -42,35 +45,42 @@ export default {
}, },
}; };
}, },
created() { mounted() {
// 手术间数量 setTimeout(() => {
const num = 8; // 手术间数量
// 生成手术间 const num = 12;
for (let index = num; index >= 1; index--) { // 生成手术间
this.option.yAxis.data.push(`手术间${String(index).padStart(2, '0')}`); for (let index = num; index >= 1; index--) {
} this.option.yAxis.data.push(`手术间${String(index).padStart(2, '0')}`);
// 生成对应的使用率数据 }
for (let index = 1; index <= 24; index++) { // 生成对应的使用率数据
let seriesData = { for (let index = 1; index <= 24; index++) {
name: `bar${String(index).padStart(2, '0')}`, let seriesData = {
type: 'bar', name: `bar${String(index).padStart(2, '0')}`,
stack: 'bar', type: 'bar',
data: [], stack: 'bar',
independentColor: true, data: [],
independentColors: [], independentColor: true,
barWidth: 10, independentColors: [],
}; barWidth: '40%',
for (let sunIndex = 0; sunIndex < num; sunIndex++) { barStyle: {
const isUse = Math.random() < 0.7; stroke: 'rgb(128,128,128)',
seriesData.data.push(1); },
if (isUse) { };
seriesData.independentColors.push('#87ceeb'); for (let sunIndex = 0; sunIndex < num; sunIndex++) {
} else { const isUse = Math.random() < 0.7;
seriesData.independentColors.push('rgb(128,128,128)'); seriesData.data.push(1);
if (isUse) {
seriesData.independentColors.push('#87ceeb');
} else {
seriesData.independentColors.push('rgb(128,128,128)');
}
} }
this.option.series.push(seriesData);
} }
this.option.series.push(seriesData); this.option = { ...this.option };
} this.isLoding = false;
}, 500);
}, },
}; };
</script> </script>
@ -78,6 +88,16 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.rightMiddle { .rightMiddle {
height: 100%; height: 100%;
background-color: gray; :deep(.dv-border-box-13) {
padding: 2vh;
box-sizing: border-box;
section {
height: 100%;
background-color: gray;
.dv-charts-container {
height: 100%;
}
}
}
} }
</style> </style>

102
src/views/pageScheduling/index.vue
Unescape View File

@ -14,68 +14,42 @@ export default {
titleWidth: 380, titleWidth: 380,
config: { config: {
data: [ data: [
['WK01 郑六、小李、杨三、孙七', 'WK02 小红、小李、杨三、小刚', 'WK03 赵六、吴四、赵十五'], ['WK01 王总、小红、乐迪', 'WK02 魏兄、乐迪、方老师', 'WK03 省文、魏兄、方老师'],
['WK04 李八、吴四、王五、钟二十一', 'WK05 刘一、小丽、小明', 'WK06 小刚、黄十二、小明、周十六'], ['WK04 省文、魏兄、方老师', 'WK05 乐迪、魏兄、小红', 'WK06 省文、方老师、小红'],
['WK07 李四、郑六、吴十九、孙七', 'WK08 小李、吴四、李八', 'WK09 吴四、吴十九、李四、小丽、钟二十一'], ['WK07 乐迪、王总、方老师', 'WK08 省文、乐迪、小红', 'WK09 魏兄、王总、小红'],
[ ['WK10 乐迪、魏兄、王总', 'WK11 魏兄、乐迪、小红', 'WK12 魏兄、王总、乐迪'],
'WK10 李四、吴十九、王五、陈十七、杨三', ['WK13 王总、小红、魏兄', 'WK14 魏兄、王总、方老师', 'WK15 乐迪、方老师、小红'],
'WK11 黄十二、张三、小丽、小红、小李', ['WK16 省文、方老师、王总', 'WK17 魏兄、小红、方老师', 'WK18 魏兄、方老师、小红'],
'WK12 杨十八、钟二十一、陈十七、小刚、许二十', ['WK19 乐迪、魏兄、王总', 'WK20 魏兄、小红、方老师', 'WK21 王总、小红、魏兄'],
], ['WK22 乐迪、魏兄、小红', 'WK23 乐迪、王总、小红', 'WK24 乐迪、方老师、小红'],
['WK13 杨三、周五、朱九', 'WK14 朱九、郑六、小刚、孙七', 'WK15 许二十、陈二、刘一'], ['WK25 省文、魏兄、方老师', 'WK26 乐迪、小红、王总', 'WK27 省文、方老师、小红'],
[ ['WK28 乐迪、魏兄、小红', 'WK29 魏兄、方老师、王总', 'WK30 乐迪、小红、魏兄'],
'WK16 郑六、许二十、小红、朱九、杨十八', ['WK31 魏兄、乐迪、方老师', 'WK32 王总、魏兄、乐迪', 'WK33 乐迪、小红、方老师'],
'WK17 郑六、刘一、吴十九、钟二十一、小李', ['WK34 乐迪、魏兄、小红', 'WK35 省文、魏兄、方老师', 'WK36 乐迪、小红、王总'],
'WK18 钟二十一、杨三、林十一、小红、吴十九', ['WK37 省文、小红、乐迪', 'WK38 魏兄、王总、方老师', 'WK39 乐迪、方老师、小红'],
], ['WK40 乐迪、小红、方老师', 'WK41 乐迪、魏兄、小红', 'WK42 省文、方老师、小红'],
[ ['WK43 乐迪、方老师、王总', 'WK44 王总、魏兄、小红', 'WK45 魏兄、王总、乐迪'],
'WK19 小李、小明、王五、许二十', ['WK46 乐迪、小红、王总', 'WK47 省文、小红、魏兄', 'WK48 王总、乐迪、方老师'],
'WK20 刘一、杨十八、小丽、赵六、陈十七', ['WK49 王总、小红、魏兄', 'WK50 王总、乐迪、王总', 'WK51 乐迪、王总、小红'],
'WK21 小刚、孙七、吴四、黄十二、钟二十一', ['WK52 魏兄、方老师、乐迪', 'WK53 乐迪、魏兄、小红', 'WK54 乐迪、小红、方老师'],
], ['WK55 乐迪、小红、魏兄', 'WK56 乐迪、方老师、魏兄', 'WK57 乐迪、小红、王总'],
['WK22 黄十二、郑六、王十四、林十一、小明', 'WK23 刘一、小刚、小丽、赵六', 'WK24 周五、王五、黄十二、李八'], ['WK58 省文、方老师、小红', 'WK59 乐迪、王总、小红', 'WK60 乐迪、魏兄、方老师'],
['WK25 郑六、周十六、王五、张三', 'WK26 陈十七、吴十九、陈二、张三', 'WK27 小明、林十一、李四'], ['WK61 省文、方老师、魏兄', 'WK62 魏兄、乐迪、王总', 'WK63 乐迪、魏兄、小红'],
[ ['WK64 王总、小红、乐迪', 'WK65 乐迪、方老师、王总', 'WK66 乐迪、小红、方老师'],
'WK28 小红、赵十五、陈二、李八、朱九', ['WK67 魏兄、方老师、小红', 'WK68 王总、魏兄、方老师', 'WK69 乐迪、方老师、魏兄'],
'WK29 陈十七、小丽、张三、王十四', ['WK70 王总、小红、方老师', 'WK71 省文、小红、魏兄', 'WK72 乐迪、王总、魏兄'],
'WK30 陈二、王五、王十四、周五、吴十九', ['WK73 魏兄、方老师、小红', 'WK74 乐迪、小红、方老师', 'WK75 乐迪、小红、魏兄'],
], ['WK76 乐迪、方老师、魏兄', 'WK77 王总、乐迪、方老师', 'WK78 王总、魏兄、魏兄'],
['WK31 小红、杨十八、小丽', 'WK32 杨十八、陈二、小丽、郑六、林十一', 'WK33 张三、刘一、孙七、王五'], [],
['WK34 小红、小刚、林十一', 'WK35 李四、杨十八、赵十五、朱九', 'WK36 朱九、赵六、张三、赵十五、小李'], [],
['WK37 杨三、陈二、刘一', 'WK38 朱九、小明、吴十九、孙七', 'WK39 刘一、陈二、小刚、赵六'], [],
[ [],
'WK40 王五、小红、刘十三、杨十八', [],
'WK41 赵十五、黄十二、周十六、张三', [],
'WK42 朱九、赵十五、周十六、李八、黄十二', [],
], [],
['WK43 小刚、吴十九、周五、朱九、李八', 'WK44 小李、周五、王五', 'WK45 杨十八、黄十二、李八'], [],
['WK46 李四、小丽、王五、吴十九', 'WK47 何十、孙七、小李', 'WK48 林十一、钟二十一、小刚、刘一'], [],
[
'WK49 赵十五、王五、周十六、小丽、杨十八',
'WK50 郑六、周十六、李八',
'WK51 王十四、小刚、赵十五、陈二、林十一',
],
['WK52 小刚、李四、吴十九', 'WK53 周五、李八、周十六', 'WK54 吴十九、周十六、林十一'],
['WK55 郑六、小李、王五、李八、钟二十一', 'WK56 小李、刘十三、周五', 'WK57 何十、周十六、吴四、小红、许二十'],
[
'WK58 孙七、杨十八、陈十七、王五、李八',
'WK59 赵六、杨十八、周十六',
'WK60 杨三、周十六、刘一、赵六、许二十',
],
[
'WK61 钟二十一、杨十八、刘一、杨三、黄十二',
'WK62 李八、何十、刘十三、王五、陈十七',
'WK63 李八、朱九、王十四、小丽、郑六',
],
[
'WK64 刘十三、小明、黄十二、小红',
'WK65 杨十八、陈二、黄十二、赵六、周十六',
'WK66 赵六、吴十九、小丽、刘一、张三',
],
['WK67 孙七、小刚、王五、吴四', 'WK68 刘十三、周十六、王十四、张三、杨三', 'WK69 杨十八、李八、孙七、陈十七'],
['WK70 小李、陈十七、张三', 'WK71 赵六、刘一、钟二十一、赵十五', 'WK72 杨三、钟二十一、小红、小李、王十四'],
['WK73 周十六、小刚、小李、小红、陈十七', 'WK74 吴十九、孙七、小红', 'WK75 刘一、李四、周十六'],
['WK76 杨十八、郑六、陈十七、赵六', 'WK77 李八、张三、小丽', 'WK78 王五、吴十九、刘一、孙七、何十'],
], ],
rowNum: 12, rowNum: 12,
waitTime: 5000, waitTime: 5000,
@ -96,8 +70,8 @@ export default {
padding: 3% 1% 0; padding: 3% 1% 0;
box-sizing: border-box; box-sizing: border-box;
height: 92%; height: 92%;
.ceil{ .ceil {
font-size: 20px; font-size: 2vh;
white-space: nowrap; white-space: nowrap;
/* border-right: 1px dashed #fff; */ /* border-right: 1px dashed #fff; */
} }

Write Preview
Loading…
Cancel
Save