@0Melon0
1 year ago
parent
b34677ad4d
commit
ca45c2d5e8
@ -1,15 +1,17 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
root: true,
|
root: true,
|
||||||
env: {
|
env: {
|
||||||
node: true,
|
node: true
|
||||||
},
|
},
|
||||||
extends: ['plugin:vue/essential', 'eslint:recommended'],
|
'extends': [
|
||||||
|
'plugin:vue/essential',
|
||||||
|
'eslint:recommended'
|
||||||
|
],
|
||||||
parserOptions: {
|
parserOptions: {
|
||||||
parser: '@babel/eslint-parser',
|
parser: '@babel/eslint-parser'
|
||||||
},
|
},
|
||||||
rules: {
|
rules: {
|
||||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
|
||||||
'vue/multi-word-component-names': 'off',
|
}
|
||||||
},
|
}
|
||||||
};
|
|
||||||
|
|||||||
@ -1,5 +1,24 @@
|
|||||||
# cockpit
|
# cockpit
|
||||||
|
|
||||||
大屏数据展示基于 `Vue2 + dataV + Echart`
|
## Project setup
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
[`dataV`](http://datav.jiaminghi.com)
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lints and fixes files
|
||||||
|
```
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize configuration
|
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
|
|||||||
@ -1,12 +1,5 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
presets: ['@vue/cli-plugin-babel/preset'],
|
presets: [
|
||||||
plugins: [
|
'@vue/cli-plugin-babel/preset'
|
||||||
[
|
]
|
||||||
'component',
|
}
|
||||||
{
|
|
||||||
libraryName: 'element-ui',
|
|
||||||
styleLibraryName: 'theme-chalk',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
@ -1,17 +0,0 @@
|
|||||||
@font-face {
|
|
||||||
font-family: "iconfont"; /* Project id */
|
|
||||||
src: url('iconfont.ttf?t=1701073554125') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconfont {
|
|
||||||
font-family: "iconfont" !important;
|
|
||||||
font-size: 16px;
|
|
||||||
font-style: normal;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-youjiantou:before {
|
|
||||||
content: "\e619";
|
|
||||||
}
|
|
||||||
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 184 KiB |
|
Before Width: | Height: | Size: 750 KiB |
@ -1,3 +0,0 @@
|
|||||||
@function vw($px) {
|
|
||||||
@return $px/1920 * 100vw;
|
|
||||||
}
|
|
||||||
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1003 B |
|
Before Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 6.0 KiB |
|
Before Width: | Height: | Size: 3.7 KiB |
@ -1,51 +0,0 @@
|
|||||||
<template>
|
|
||||||
<dv-charts :option="option"></dv-charts>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
option: {
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: ['骨科', '心胸外科', '普通外科', '神经外科', '整形外科'],
|
|
||||||
axisLabel: {
|
|
||||||
style: {
|
|
||||||
stroke: '#fff',
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
data: 'value',
|
|
||||||
max: '1%',
|
|
||||||
axisLabel: {
|
|
||||||
style: {
|
|
||||||
stroke: '#fff',
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'bar',
|
|
||||||
data: [200, 150, 120, 80, 70],
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'top',
|
|
||||||
style: {
|
|
||||||
stroke: '#fff',
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style></style>
|
|
||||||
@ -1,116 +0,0 @@
|
|||||||
<template>
|
|
||||||
<section ref="echartsContainer"></section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
title: String,
|
|
||||||
maxNum: {
|
|
||||||
type: Number,
|
|
||||||
default: 100,
|
|
||||||
},
|
|
||||||
nowNum: Number,
|
|
||||||
unit: {
|
|
||||||
type: String,
|
|
||||||
default: '%',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chartOptions: {
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'gauge',
|
|
||||||
startAngle: 90,
|
|
||||||
endAngle: -270,
|
|
||||||
pointer: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
max: this.maxNum,
|
|
||||||
radius: '100%',
|
|
||||||
center: ['50%', '50%'],
|
|
||||||
progress: {
|
|
||||||
show: true,
|
|
||||||
overlap: false,
|
|
||||||
roundCap: true,
|
|
||||||
clip: false,
|
|
||||||
itemStyle: {
|
|
||||||
color: {
|
|
||||||
type: 'linear',
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: '#03c2fd',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.5,
|
|
||||||
color: '#1ed3e5',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: '#2fded6',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
global: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: [[1, '#4F518C']],
|
|
||||||
opacity: 0.7,
|
|
||||||
width: 30,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false,
|
|
||||||
distance: 0,
|
|
||||||
length: 10,
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: false,
|
|
||||||
distance: 50,
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: this.nowNum,
|
|
||||||
name: this.title,
|
|
||||||
title: {
|
|
||||||
offsetCenter: ['0%', '20%'],
|
|
||||||
fontSize: 22,
|
|
||||||
fontFamily: 'Microsoft YaHei',
|
|
||||||
color: '#fff',
|
|
||||||
overflow: 'break',
|
|
||||||
lineHeight: 20,
|
|
||||||
},
|
|
||||||
detail: {
|
|
||||||
valueAnimation: true,
|
|
||||||
offsetCenter: ['0%', '-15%'],
|
|
||||||
fontSize: 40,
|
|
||||||
fontFamily: 'DIN-Bold,Microsoft YaHei',
|
|
||||||
color: '#03FFFF',
|
|
||||||
formatter: `{value}${this.unit}`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
const chartContainer = this.$refs.echartsContainer;
|
|
||||||
const chart = echarts.init(chartContainer);
|
|
||||||
chart.setOption(this.chartOptions);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<template>
|
||||||
|
<div></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
@ -1,107 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Header>
|
|
||||||
<dv-decoration-8 class="left" />
|
|
||||||
<dv-decoration-5 class="center" />
|
|
||||||
<dv-decoration-8 class="right" :reverse="true" />
|
|
||||||
<div class="centerTitle gradientText">{{ $route.meta.title }}</div>
|
|
||||||
<dv-decoration-7 class="dateBox">
|
|
||||||
<span class="numFont">{{ curTime }}</span>
|
|
||||||
</dv-decoration-7>
|
|
||||||
</Header>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import dayjs from 'dayjs';
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
curTime: '',
|
|
||||||
dayOfWeekText: '',
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 获取星期
|
|
||||||
getWeek() {
|
|
||||||
const dayOfWeek = dayjs().day();
|
|
||||||
switch (dayOfWeek) {
|
|
||||||
case 0:
|
|
||||||
this.dayOfWeekText = '星期日';
|
|
||||||
break;
|
|
||||||
case 1:
|
|
||||||
this.dayOfWeekText = '星期一';
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
this.dayOfWeekText = '星期二';
|
|
||||||
break;
|
|
||||||
case 3:
|
|
||||||
this.dayOfWeekText = '星期三';
|
|
||||||
break;
|
|
||||||
case 4:
|
|
||||||
this.dayOfWeekText = '星期四';
|
|
||||||
break;
|
|
||||||
case 5:
|
|
||||||
this.dayOfWeekText = '星期五';
|
|
||||||
break;
|
|
||||||
case 6:
|
|
||||||
this.dayOfWeekText = '星期六';
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 更新当前时间
|
|
||||||
updateTime() {
|
|
||||||
this.curTime = dayjs().format(`YYYY-MM-DD HH:mm:ss ${this.dayOfWeekText}`);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.getWeek();
|
|
||||||
this.updateTime();
|
|
||||||
this.timer = setInterval(this.updateTime, 1000);
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
clearInterval(this.timer);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
Header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
flex-shrink: 0;
|
|
||||||
height: 8.6vh;
|
|
||||||
position: relative;
|
|
||||||
.left {
|
|
||||||
width: 25%;
|
|
||||||
height: 6vh;
|
|
||||||
}
|
|
||||||
.center {
|
|
||||||
width: 40%;
|
|
||||||
height: 6vh;
|
|
||||||
margin-top: 2.2vh;
|
|
||||||
}
|
|
||||||
.right {
|
|
||||||
width: 25%;
|
|
||||||
height: 6vh;
|
|
||||||
}
|
|
||||||
.centerTitle {
|
|
||||||
position: absolute;
|
|
||||||
font-size: 3.4vh;
|
|
||||||
font-weight: 700;
|
|
||||||
left: 50%;
|
|
||||||
top: 0.6vh;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
.dateBox {
|
|
||||||
position: absolute;
|
|
||||||
width: 32vh;
|
|
||||||
height: 3vh;
|
|
||||||
font-size: 1.8vh;
|
|
||||||
font-weight: 400;
|
|
||||||
right: 17vh;
|
|
||||||
top: 4.2vh;
|
|
||||||
span {
|
|
||||||
margin: 0 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,109 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="dv-bar-chart">
|
|
||||||
<div class="bar-chart-container" ref="bar-chart" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Charts from '@jiaminghi/charts';
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index';
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util';
|
|
||||||
export default {
|
|
||||||
name: 'DvBarChart',
|
|
||||||
props: {
|
|
||||||
config: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
defaultConfig: {},
|
|
||||||
mergedConfig: null,
|
|
||||||
chart: null,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
init() {
|
|
||||||
const { initChart, mergeConfig, setBarOption } = this;
|
|
||||||
initChart();
|
|
||||||
mergeConfig();
|
|
||||||
setBarOption();
|
|
||||||
},
|
|
||||||
initChart() {
|
|
||||||
// 寻找 Echart 根节点
|
|
||||||
const { $refs } = this;
|
|
||||||
this.chart = new Charts($refs['bar-chart']);
|
|
||||||
},
|
|
||||||
mergeConfig() {
|
|
||||||
// 将页面设置的配置和默认配置进行合并
|
|
||||||
const { defaultConfig, config } = this;
|
|
||||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {});
|
|
||||||
},
|
|
||||||
setBarOption() {
|
|
||||||
const { getBarOption, chart } = this;
|
|
||||||
// 获取 Echart 的配置列表
|
|
||||||
const option = getBarOption();
|
|
||||||
chart.setOption(option, true);
|
|
||||||
},
|
|
||||||
getBarOption() {
|
|
||||||
// 根据配置动态组装配置数据
|
|
||||||
// const { mergedConfig } = this;
|
|
||||||
return {
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
||||||
axisTick: {
|
|
||||||
alignWithLabel: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
data:[],
|
|
||||||
axisLabel: {
|
|
||||||
textStyle: {
|
|
||||||
color: '#333',
|
|
||||||
fontSize: 12,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#ddd',
|
|
||||||
type: 'dashed',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axis: {
|
|
||||||
// 在这里设置 axis 的属性
|
|
||||||
name: 'Y轴名称',
|
|
||||||
nameTextStyle: {
|
|
||||||
color: '#666',
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
// 更多 axis 相关的属性...
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data: [120, 200, 150, 80, 70, 110, 130],
|
|
||||||
type: 'bar',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
const { init } = this;
|
|
||||||
// 组件初始化
|
|
||||||
init();
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.bar-chart-container {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,50 +1,12 @@
|
|||||||
import Vue from 'vue';
|
import Vue from 'vue'
|
||||||
import App from './App.vue';
|
import App from './App.vue'
|
||||||
import router from './router';
|
import router from './router'
|
||||||
import store from './store';
|
import store from './store'
|
||||||
|
|
||||||
import {
|
Vue.config.productionTip = false
|
||||||
fullScreenContainer,
|
|
||||||
loading,
|
|
||||||
digitalFlop,
|
|
||||||
activeRingChart,
|
|
||||||
capsuleChart,
|
|
||||||
scrollBoard,
|
|
||||||
charts,
|
|
||||||
decoration2,
|
|
||||||
decoration4,
|
|
||||||
decoration5,
|
|
||||||
decoration8,
|
|
||||||
decoration7,
|
|
||||||
borderBox1,
|
|
||||||
borderBox2,
|
|
||||||
borderBox7,
|
|
||||||
borderBox11,
|
|
||||||
borderBox13,
|
|
||||||
} from '@jiaminghi/data-view';
|
|
||||||
|
|
||||||
Vue.use(fullScreenContainer)
|
|
||||||
.use(loading)
|
|
||||||
.use(digitalFlop)
|
|
||||||
.use(activeRingChart)
|
|
||||||
.use(capsuleChart)
|
|
||||||
.use(scrollBoard)
|
|
||||||
.use(charts)
|
|
||||||
.use(decoration2)
|
|
||||||
.use(decoration4)
|
|
||||||
.use(decoration5)
|
|
||||||
.use(decoration8)
|
|
||||||
.use(decoration7)
|
|
||||||
.use(borderBox1)
|
|
||||||
.use(borderBox2)
|
|
||||||
.use(borderBox7)
|
|
||||||
.use(borderBox11)
|
|
||||||
.use(borderBox13);
|
|
||||||
|
|
||||||
Vue.config.productionTip = false;
|
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
router,
|
router,
|
||||||
store,
|
store,
|
||||||
render: h => h(App),
|
render: h => h(App)
|
||||||
}).$mount('#app');
|
}).$mount('#app')
|
||||||
|
|||||||
@ -0,0 +1,9 @@
|
|||||||
|
<template>
|
||||||
|
<div></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
@ -1,114 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="bottomLeft">
|
|
||||||
<dv-border-box-13>
|
|
||||||
<div class="chartsBox">
|
|
||||||
<div class="chartItem">
|
|
||||||
<p>手术等级</p>
|
|
||||||
<div class="echartsContainer" ref="echartsContainerLeft"></div>
|
|
||||||
</div>
|
|
||||||
<div class="chartItem">
|
|
||||||
<p>ASA分级</p>
|
|
||||||
<div class="echartsContainer" ref="echartsContainerRight"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</dv-border-box-13>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
nowIndex: 0,
|
|
||||||
chartOptionsLeft: {
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['32%', '50%'],
|
|
||||||
selectedMode: 'single',
|
|
||||||
data: [
|
|
||||||
{ name: '一级', value: 148, selected: true },
|
|
||||||
{ name: '二级', value: 87, selected: false },
|
|
||||||
{ name: '三级', value: 75, selected: false },
|
|
||||||
{ name: '四级', value: 40, selected: false },
|
|
||||||
],
|
|
||||||
label: {
|
|
||||||
formatter: '{b}{c}',
|
|
||||||
color: 'inherit',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
chartOptionsRight: {
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['32%', '50%'],
|
|
||||||
selectedMode: 'single',
|
|
||||||
data: [
|
|
||||||
{ name: 'I级', value: 137, selected: true },
|
|
||||||
{ 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',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
const echartsContainerLeft = this.$refs.echartsContainerLeft;
|
|
||||||
const chartLeft = echarts.init(echartsContainerLeft);
|
|
||||||
chartLeft.setOption(this.chartOptionsLeft);
|
|
||||||
const echartsContainerRight = this.$refs.echartsContainerRight;
|
|
||||||
const chartRight = echarts.init(echartsContainerRight);
|
|
||||||
chartRight.setOption(this.chartOptionsRight);
|
|
||||||
setInterval(() => {
|
|
||||||
let lastIndex = this.nowIndex++;
|
|
||||||
const leftData = this.chartOptionsLeft['series'][0]['data'];
|
|
||||||
leftData[lastIndex % 4]['selected'] = false;
|
|
||||||
leftData[this.nowIndex % 4]['selected'] = true;
|
|
||||||
chartLeft.setOption(this.chartOptionsLeft,true);
|
|
||||||
const rightData = this.chartOptionsRight['series'][0]['data'];
|
|
||||||
rightData[lastIndex % 5]['selected'] = false;
|
|
||||||
rightData[this.nowIndex % 5]['selected'] = true;
|
|
||||||
chartRight.setOption(this.chartOptionsRight,true);
|
|
||||||
}, 2000);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.bottomLeft {
|
|
||||||
flex-basis: 38%;
|
|
||||||
.chartsBox {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
padding-top: 10px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
.chartItem {
|
|
||||||
width: 50%;
|
|
||||||
height: 100%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
padding-top: 40px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
p {
|
|
||||||
font-size: 24px;
|
|
||||||
text-align: center;
|
|
||||||
letter-spacing: 0.1vh;
|
|
||||||
}
|
|
||||||
.echartsContainer {
|
|
||||||
height: 90%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,130 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="bottomMiddle">
|
|
||||||
<dv-border-box-13>
|
|
||||||
<div class="chartsBox">
|
|
||||||
<div class="chartItem">
|
|
||||||
<nav>
|
|
||||||
<p class="left">手术量统计</p>
|
|
||||||
<div class="right">
|
|
||||||
<p class="active">周</p>
|
|
||||||
<p>月</p>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<dv-charts :option="option"></dv-charts>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</dv-border-box-13>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
option: {
|
|
||||||
grid: {
|
|
||||||
left: '20%',
|
|
||||||
top: '6%',
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
data: 'value',
|
|
||||||
max: '1%',
|
|
||||||
min: 0,
|
|
||||||
axisLabel: {
|
|
||||||
style: {
|
|
||||||
fontSize: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: ['无痛手术', '门诊手术', '日间手术', '急诊手术', '择期手术'],
|
|
||||||
axisLabel: {
|
|
||||||
style: {
|
|
||||||
stroke: '#fff',
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: { show: false },
|
|
||||||
axisLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'bar',
|
|
||||||
data: [160, 238, 326, 352, 724],
|
|
||||||
barWidth: '40%',
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'top',
|
|
||||||
offset: [16, 2],
|
|
||||||
style: {
|
|
||||||
stroke: '#fff',
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// gradient: {
|
|
||||||
// color: ['#83bff6', '#188df0', '#188df0'],
|
|
||||||
// },
|
|
||||||
backgroundBar: {
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
independentColor: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.bottomMiddle {
|
|
||||||
flex-basis: 30%;
|
|
||||||
.chartsBox {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
padding-top: 1vh;
|
|
||||||
box-sizing: border-box;
|
|
||||||
.chartItem {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
padding: 2vh;
|
|
||||||
box-sizing: border-box;
|
|
||||||
nav {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
.right {
|
|
||||||
display: flex;
|
|
||||||
.active,
|
|
||||||
p:hover {
|
|
||||||
color: #87ceeb;
|
|
||||||
border: 1px solid #87ceeb;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin-right: 1.5vh;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 1px solid #fff;
|
|
||||||
font-size: 1.6vh;
|
|
||||||
width: 2.6vh;
|
|
||||||
height: 2.6vh;
|
|
||||||
line-height: 2.6vh;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
font-size: 2.4vh;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,122 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="bottomRight">
|
|
||||||
<dv-border-box-13>
|
|
||||||
<div class="chartsBox">
|
|
||||||
<div class="chartItem">
|
|
||||||
<nav>
|
|
||||||
<p class="left">科室手术量统计(前五)</p>
|
|
||||||
<div class="right">
|
|
||||||
<p class="active">周</p>
|
|
||||||
<p>月</p>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<dv-charts :option="option"></dv-charts>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</dv-border-box-13>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
option: {
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: ['骨科', '心胸外科', '普通外科', '神经外科', '整形外科'],
|
|
||||||
axisLabel: {
|
|
||||||
style: {
|
|
||||||
stroke: '#fff',
|
|
||||||
fontSize: 14,
|
|
||||||
fontWeight: 'normal',
|
|
||||||
fontFamily: 'Microsoft YaHei',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
data: 'value',
|
|
||||||
max: '1%',
|
|
||||||
min: 0,
|
|
||||||
axisLabel: {
|
|
||||||
style: {
|
|
||||||
stroke: '#fff',
|
|
||||||
fontSize: 14,
|
|
||||||
fontWeight: 'normal',
|
|
||||||
fontFamily: 'Microsoft YaHei',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'bar',
|
|
||||||
data: [180, 165, 155, 148, 137],
|
|
||||||
barWidth: '40%',
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'top',
|
|
||||||
style: {
|
|
||||||
stroke: '#fff',
|
|
||||||
fontSize: 14,
|
|
||||||
fontWeight: 'normal',
|
|
||||||
fontFamily: 'Microsoft YaHei',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
gradient: {
|
|
||||||
color: ['#83bff6', '#188df0', '#188df0'],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.bottomRight {
|
|
||||||
flex-basis: 30%;
|
|
||||||
.chartsBox {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
padding-top: 1vh;
|
|
||||||
box-sizing: border-box;
|
|
||||||
.chartItem {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
padding: 2vh;
|
|
||||||
box-sizing: border-box;
|
|
||||||
nav {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
.right {
|
|
||||||
display: flex;
|
|
||||||
.active,
|
|
||||||
p:hover {
|
|
||||||
color: #87ceeb;
|
|
||||||
border: 1px solid #87ceeb;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin-right: 1.5vh;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 1px solid #fff;
|
|
||||||
font-size: 1.6vh;
|
|
||||||
width: 2.6vh;
|
|
||||||
height: 2.6vh;
|
|
||||||
line-height: 2.6vh;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
font-size: 2.4vh;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
<template>
|
|
||||||
<dv-border-box-1>
|
|
||||||
<section class="monitor">
|
|
||||||
<div class="topBox">
|
|
||||||
<topLeft></topLeft>
|
|
||||||
<topRight></topRight>
|
|
||||||
</div>
|
|
||||||
<div class="bottomBox">
|
|
||||||
<bottomMiddle></bottomMiddle>
|
|
||||||
<bottomLeft></bottomLeft>
|
|
||||||
<bottomRight></bottomRight>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</dv-border-box-1>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import topLeft from './topLeft/index.vue';
|
|
||||||
import topRight from './topRight/index.vue';
|
|
||||||
import bottomLeft from './bottomLeft/index.vue';
|
|
||||||
import bottomMiddle from './bottomMiddle/index.vue';
|
|
||||||
import bottomRight from './bottomRight/index.vue';
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
topLeft,
|
|
||||||
topRight,
|
|
||||||
bottomLeft,
|
|
||||||
bottomMiddle,
|
|
||||||
bottomRight,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.monitor {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
> div {
|
|
||||||
height: 50%;
|
|
||||||
padding: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.topBox {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.bottomBox {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,182 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="topLeft">
|
|
||||||
<dv-border-box-13>
|
|
||||||
<section>
|
|
||||||
<nav>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/svg/blueTriangle.svg" />
|
|
||||||
<p>首台准点率</p>
|
|
||||||
<p>80<span>%</span></p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/svg/blueTriangle.svg" />
|
|
||||||
<p>手术间利用率</p>
|
|
||||||
<p>86<span>%</span></p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/svg/blueTriangle.svg" />
|
|
||||||
<p>急诊患者</p>
|
|
||||||
<p>180<span>个</span></p>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<div class="bottomBox">
|
|
||||||
<section>
|
|
||||||
<div class="leftBox">
|
|
||||||
<img src="@/assets/svg/greenTriangle.svg" />
|
|
||||||
<p>总人数</p>
|
|
||||||
</div>
|
|
||||||
<div class="rightBox">
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/svg/greenPoint.svg" />
|
|
||||||
<p>进行中</p>
|
|
||||||
</div>
|
|
||||||
<p>50<span>人</span></p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section class="numBox">
|
|
||||||
<div class="leftBox">350</div>
|
|
||||||
<div class="rightBox">
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/svg/greenPoint.svg" />
|
|
||||||
<p>待进行</p>
|
|
||||||
</div>
|
|
||||||
<p>300<span>人</span></p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</dv-border-box-13>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import '@/assets/scss/pxtovh.scss';
|
|
||||||
.topLeft {
|
|
||||||
flex-basis: 30%;
|
|
||||||
section {
|
|
||||||
height: 100%;
|
|
||||||
padding: vh(46) vh(32);
|
|
||||||
box-sizing: border-box;
|
|
||||||
nav {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
div {
|
|
||||||
width: vh(140);
|
|
||||||
height: vh(160);
|
|
||||||
background-image: url('@/assets/svg/blueBox.svg');
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
padding: vh(10) vh(16);
|
|
||||||
box-sizing: border-box;
|
|
||||||
img {
|
|
||||||
width: vh(20);
|
|
||||||
}
|
|
||||||
p:first-of-type {
|
|
||||||
margin-top: vh(12);
|
|
||||||
margin-bottom: vh(18);
|
|
||||||
font-size: vh(16);
|
|
||||||
color: #fff;
|
|
||||||
font-family: Source Han Sans;
|
|
||||||
letter-spacing: 3px;
|
|
||||||
font-weight: normal;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
p:last-of-type {
|
|
||||||
font-size: vh(46);
|
|
||||||
line-height: vh(46);
|
|
||||||
color: #0592ff;
|
|
||||||
span {
|
|
||||||
font-size: vh(24);
|
|
||||||
color: #0592ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bottomBox {
|
|
||||||
margin-top: vh(48);
|
|
||||||
height: vh(182);
|
|
||||||
background-image: url('@/assets/svg/greenBox.svg');
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
padding: vh(26) vh(32);
|
|
||||||
box-sizing: border-box;
|
|
||||||
section {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0;
|
|
||||||
height: auto;
|
|
||||||
margin-bottom: vh(20);
|
|
||||||
margin-top: vh(10);
|
|
||||||
.leftBox {
|
|
||||||
img {
|
|
||||||
width: vh(20);
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: vh(12);
|
|
||||||
font-size: vh(20);
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
|
||||||
vertical-align: middle;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rightBox {
|
|
||||||
width: vh(240);
|
|
||||||
height: vh(44);
|
|
||||||
padding: 0 vh(24);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
background: linear-gradient(271deg, rgba(85, 255, 212, 0.075) 2%, rgba(35, 150, 121, 0.11) 99%);
|
|
||||||
border: 1.5px solid;
|
|
||||||
border-image: linear-gradient(159deg, #a9d5ff -8%, rgba(169, 213, 255, 0) 38%) 1.5;
|
|
||||||
div {
|
|
||||||
img {
|
|
||||||
width: vh(14);
|
|
||||||
vertical-align: bottom;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: vh(8);
|
|
||||||
font-size: vh(16);
|
|
||||||
font-family: Source Han Sans;
|
|
||||||
vertical-align: middle;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> p {
|
|
||||||
color: #67c23a;
|
|
||||||
font-size: vh(26);
|
|
||||||
span {
|
|
||||||
font-family: Source Han Sans;
|
|
||||||
color: #fff;
|
|
||||||
font-size: vh(12);
|
|
||||||
margin-left: vh(4);
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.numBox {
|
|
||||||
.leftBox {
|
|
||||||
font-size: vh(44);
|
|
||||||
color: #67c23a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,150 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="topRight">
|
|
||||||
<dv-border-box-13>
|
|
||||||
<el-carousel direction="vertical" :autoplay="false" :interval="5000">
|
|
||||||
<el-carousel-item v-for="item in 3" :key="item">
|
|
||||||
<section>
|
|
||||||
<template v-for="(item1, index) in 24">
|
|
||||||
<div v-if="index % 3" class="item opreationRoom" :key="index">
|
|
||||||
<p>OR-{{ String(index + 1).padStart(3, '0') }}</p>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/svg/opreationIcon.svg" />
|
|
||||||
<span>手术中</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="index % 5" class="item endRoom" :key="index">
|
|
||||||
<p>OR-{{ String(index + 1).padStart(3, '0') }}</p>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/svg/endIcon.svg" />
|
|
||||||
<span>麻醉结束</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else class="item waitRoom" :key="index">
|
|
||||||
<p>OR-{{ String(index + 1).padStart(3, '0') }}</p>
|
|
||||||
<div>
|
|
||||||
<img src="@/assets/svg/waitIcon.svg" />
|
|
||||||
<span>空置中</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</section>
|
|
||||||
</el-carousel-item>
|
|
||||||
</el-carousel>
|
|
||||||
</dv-border-box-13>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Carousel, CarouselItem } from 'element-ui';
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
'el-carousel': Carousel,
|
|
||||||
'el-carousel-item': CarouselItem,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import '@/assets/scss/pxtovh.scss';
|
|
||||||
.topRight {
|
|
||||||
flex-basis: 69%;
|
|
||||||
:deep(.el-carousel) {
|
|
||||||
height: 100%;
|
|
||||||
.el-carousel__container {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.el-carousel__item {
|
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
align-content: space-evenly;
|
|
||||||
section {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 96%;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(8, minmax(vh(136), 1fr));
|
|
||||||
gap: vh(20);
|
|
||||||
grid-row-gap: vh(40);
|
|
||||||
.item {
|
|
||||||
width: vh(136);
|
|
||||||
height: vh(106);
|
|
||||||
// display: inline-block;
|
|
||||||
// margin: vh(16) vh(22) vh(16) 0;
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
position: relative;
|
|
||||||
p {
|
|
||||||
width: vh(116);
|
|
||||||
margin: vh(8) auto 0;
|
|
||||||
text-align: center;
|
|
||||||
line-height: vh(30);
|
|
||||||
background: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
rgba(0, 147, 255, 0) 0%,
|
|
||||||
rgba(0, 147, 255, 0.37) 44%,
|
|
||||||
rgba(0, 147, 255, 0) 99%
|
|
||||||
);
|
|
||||||
font-size: vh(20);
|
|
||||||
color: #fff;
|
|
||||||
position: relative;
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 1px;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
background: linear-gradient(90deg, rgba(0, 147, 255, 0) 0%, #0093ff 49%, rgba(0, 147, 255, 0) 99%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
div {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 15%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
white-space: nowrap;
|
|
||||||
img {
|
|
||||||
width: vh(28);
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
margin-left: vh(8);
|
|
||||||
font-size: vh(20);
|
|
||||||
vertical-align: middle;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.waitRoom {
|
|
||||||
background-image: url('@/assets/svg/waitRoom.svg');
|
|
||||||
span {
|
|
||||||
color: #0592ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.endRoom {
|
|
||||||
background-image: url('@/assets/svg/endRoom.svg');
|
|
||||||
span {
|
|
||||||
color: #67c23a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.opreationRoom {
|
|
||||||
background-image: url('@/assets/svg/opreationRoom.svg');
|
|
||||||
span {
|
|
||||||
color: #ff8515;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.item:nth-child(8n) {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<template>
|
||||||
|
<div></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
@ -1,47 +0,0 @@
|
|||||||
<template>
|
|
||||||
<dv-border-box-1>
|
|
||||||
<section class="operation">
|
|
||||||
<div class="leftBox">
|
|
||||||
<leftTop></leftTop>
|
|
||||||
<leftBottom></leftBottom>
|
|
||||||
</div>
|
|
||||||
<div class="rightBox">
|
|
||||||
<rightMiddle></rightMiddle>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</dv-border-box-1>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import leftTop from './leftTop/index.vue';
|
|
||||||
import leftBottom from './leftBottom/index.vue';
|
|
||||||
import rightMiddle from './rightMiddle/index.vue';
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
leftTop,
|
|
||||||
leftBottom,
|
|
||||||
rightMiddle,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import '@/assets/scss/pxtovw.scss';
|
|
||||||
.operation {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: vw(20);
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
.leftBox {
|
|
||||||
flex-basis: vw(462);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.rightBox {
|
|
||||||
flex-basis: vw(1326);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,90 +0,0 @@
|
|||||||
<template>
|
|
||||||
<dv-border-box-13 class="leftBottom">
|
|
||||||
<div class="echartsContainer" ref="echartsContainer"></div>
|
|
||||||
</dv-border-box-13>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chartOptions: {
|
|
||||||
grid: {
|
|
||||||
top: '13%',
|
|
||||||
left: '13%',
|
|
||||||
right: '10%',
|
|
||||||
bottom: '13%',
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
data: ['3月', '4月', '5月', '6月', '7月', '8月'],
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff',
|
|
||||||
fontFamily: 'DIN-Bold,Microsoft YaHei',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
axisLabel: {
|
|
||||||
formatter: '{value}%',
|
|
||||||
color: '#fff',
|
|
||||||
fontFamily: 'DIN-Bold,Microsoft YaHei',
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: 'rgba(0,142,114,0.3)',
|
|
||||||
width: 0.5,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data: [95, 97, 96, 98, 99, 96],
|
|
||||||
type: 'line',
|
|
||||||
itemStyle: {
|
|
||||||
color: '#30FDFF',
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
color: {
|
|
||||||
type: 'linear',
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgba(0, 128, 255, 0.7)', // 开始颜色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: 'rgba(200, 254, 255, 0)', // 结束颜色
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
const chartContainer = this.$refs.echartsContainer;
|
|
||||||
const chart = echarts.init(chartContainer);
|
|
||||||
chart.setOption(this.chartOptions);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import '@/assets/scss/pxtovw.scss';
|
|
||||||
.leftBottom {
|
|
||||||
height: vw(380);
|
|
||||||
background: #011343;
|
|
||||||
.echartsContainer {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="leftTop">
|
|
||||||
<dv-border-box-13>
|
|
||||||
<comGauge class="echartsContainer" :title="'首台准点率'" :nowNum="86"></comGauge>
|
|
||||||
<section class="dataSection">
|
|
||||||
<div class="left">
|
|
||||||
<p>总人数</p>
|
|
||||||
<span class="numFont gradientText">350</span>
|
|
||||||
</div>
|
|
||||||
<div class="right">
|
|
||||||
<div>
|
|
||||||
<p>进行中</p>
|
|
||||||
<span class="numFont gradientText">50</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p>待进行</p>
|
|
||||||
<span class="numFont gradientText">220</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</dv-border-box-13>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import comGauge from '@/components/comGauge';
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
comGauge,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import '@/assets/scss/pxtovw.scss';
|
|
||||||
.leftTop {
|
|
||||||
height: vw(500);
|
|
||||||
position: relative;
|
|
||||||
background-color: #011343;
|
|
||||||
:deep(.dv-border-box-13) {
|
|
||||||
padding: vw(40) vw(18);
|
|
||||||
box-sizing: border-box;
|
|
||||||
.border-box-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
.echartsContainer {
|
|
||||||
height: vw(252);
|
|
||||||
}
|
|
||||||
.dataSection {
|
|
||||||
height: vw(120);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
.left {
|
|
||||||
flex-basis: vw(210);
|
|
||||||
border: 1px solid #4f518c;
|
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding-left: vw(32);
|
|
||||||
padding-top: vw(16);
|
|
||||||
p {
|
|
||||||
font-size: vw(20);
|
|
||||||
margin-bottom: vw(4);
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
font-size: vw(44);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.right {
|
|
||||||
flex-basis: vw(210);
|
|
||||||
div {
|
|
||||||
height: vw(58);
|
|
||||||
border: 1px solid #4f518c;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: vw(16) vw(24);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
p {
|
|
||||||
font-size: vw(20);
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
font-size: vw(24);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
div:first-child {
|
|
||||||
margin-bottom: vw(4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<template>
|
||||||
|
<div></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
@ -1,47 +0,0 @@
|
|||||||
<template>
|
|
||||||
<dv-border-box-1>
|
|
||||||
<section class="operation">
|
|
||||||
<div class="leftBox">
|
|
||||||
<leftTop></leftTop>
|
|
||||||
<leftBottom></leftBottom>
|
|
||||||
</div>
|
|
||||||
<div class="rightBox">
|
|
||||||
<rightMiddle></rightMiddle>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</dv-border-box-1>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import leftTop from './leftTop/index.vue';
|
|
||||||
import leftBottom from './leftBottom/index.vue';
|
|
||||||
import rightMiddle from './rightMiddle/index.vue';
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
leftTop,
|
|
||||||
leftBottom,
|
|
||||||
rightMiddle,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import '@/assets/scss/pxtovw.scss';
|
|
||||||
.operation {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: vw(20);
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
.leftBox {
|
|
||||||
flex-basis: vw(462);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.rightBox {
|
|
||||||
flex-basis: vw(1326);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,132 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="leftBottom">
|
|
||||||
<dv-border-box-13 class="leftBottom">
|
|
||||||
<div class="echartsContainer" ref="echartsContainer"></div>
|
|
||||||
<section class="dataSection">
|
|
||||||
<span>平均接台时间</span>
|
|
||||||
</section>
|
|
||||||
</dv-border-box-13>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chartOptions: {
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'gauge',
|
|
||||||
radius: '100%',
|
|
||||||
max: 120,
|
|
||||||
axisLabel: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
width: 20,
|
|
||||||
color: [[1, 'rgba(126, 130, 137, 0.3)']],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
progress: {
|
|
||||||
show: true,
|
|
||||||
width: 20,
|
|
||||||
itemStyle: {
|
|
||||||
color: {
|
|
||||||
type: 'linear',
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{ offset: 0, color: '#03c2fd' },
|
|
||||||
{ offset: 0.5, color: '#1ed3e5' },
|
|
||||||
{ offset: 1, color: '#2fded6' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
pointer: {
|
|
||||||
icon: 'rect',
|
|
||||||
width: 3,
|
|
||||||
offsetCenter: ['0%', '-40%'],
|
|
||||||
itemStyle: {
|
|
||||||
color: 'rgba(139, 230, 253, 1)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: 'itemA',
|
|
||||||
value: 45,
|
|
||||||
title: { show: false },
|
|
||||||
detail: {
|
|
||||||
offsetCenter: [0, '20%'],
|
|
||||||
formatter: function (value) {
|
|
||||||
return '{a|' + value + '}{b|min}';
|
|
||||||
},
|
|
||||||
rich: {
|
|
||||||
a: {
|
|
||||||
fontSize: 40,
|
|
||||||
color: '#4AC9FF',
|
|
||||||
fontFamily: 'DIN-Bold,Microsoft YaHei',
|
|
||||||
},
|
|
||||||
b: {
|
|
||||||
fontSize: 20,
|
|
||||||
color: '#4AC9FF',
|
|
||||||
fontFamily: 'DIN-Bold,Microsoft YaHei',
|
|
||||||
verticalAlign: 'bottom',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
const chartContainer = this.$refs.echartsContainer;
|
|
||||||
const chart = echarts.init(chartContainer);
|
|
||||||
chart.setOption(this.chartOptions);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import '@/assets/scss/pxtovw.scss';
|
|
||||||
.leftBottom {
|
|
||||||
height: vw(380);
|
|
||||||
background: #011343;
|
|
||||||
:deep(.dv-border-box-13) {
|
|
||||||
padding: vw(50) 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
.border-box-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
.echartsContainer {
|
|
||||||
height: vw(252);
|
|
||||||
}
|
|
||||||
.dataSection {
|
|
||||||
width: vw(280);
|
|
||||||
height: vw(48);
|
|
||||||
line-height: vw(48);
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0;
|
|
||||||
margin: 0 auto;
|
|
||||||
span {
|
|
||||||
display: inline-block;
|
|
||||||
height: 100%;
|
|
||||||
width: vw(280);
|
|
||||||
background-color: rgba(3, 47, 104, 0.6);
|
|
||||||
font-size: vw(18);
|
|
||||||
color: #fff;
|
|
||||||
border-radius: vw(8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="leftTop">
|
|
||||||
<dv-border-box-13>
|
|
||||||
<comGauge class="echartsContainer" :title="'首台准点率'" :nowNum="86"></comGauge>
|
|
||||||
<section class="dataSection">
|
|
||||||
<p>手术间数</p>
|
|
||||||
<span class="numFont gradientText">100</span>
|
|
||||||
</section>
|
|
||||||
</dv-border-box-13>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import comGauge from '@/components/comGauge';
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
comGauge,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import '@/assets/scss/pxtovw.scss';
|
|
||||||
.leftTop {
|
|
||||||
height: vw(500);
|
|
||||||
position: relative;
|
|
||||||
background-color: #011343;
|
|
||||||
:deep(.dv-border-box-13) {
|
|
||||||
padding: vw(60) vw(32);
|
|
||||||
box-sizing: border-box;
|
|
||||||
.border-box-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
.echartsContainer {
|
|
||||||
height: vw(252);
|
|
||||||
}
|
|
||||||
.dataSection {
|
|
||||||
width: vw(280);
|
|
||||||
height: vw(60);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
background-color: rgba(3, 47, 104, 0.6);
|
|
||||||
padding: 0 vw(48);
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: vw(20);
|
|
||||||
border-radius: vw(8);
|
|
||||||
margin: 0 auto;
|
|
||||||
span {
|
|
||||||
font-size: vw(32);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,255 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="rightMiddle">
|
|
||||||
<dv-border-box-13>
|
|
||||||
<dv-loading v-if="isLoding">Loading...</dv-loading>
|
|
||||||
<section v-else ref="echartsContainer"></section>
|
|
||||||
</dv-border-box-13>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
import dayjs from 'dayjs';
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
isLoding: false,
|
|
||||||
chartOptions: {
|
|
||||||
grid: {
|
|
||||||
width: '92%',
|
|
||||||
height: '88%',
|
|
||||||
left: '6%',
|
|
||||||
top: '10%',
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: '入手术室',
|
|
||||||
icon: 'rect',
|
|
||||||
itemStyle: {
|
|
||||||
color: '#92CC76',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '开始手术',
|
|
||||||
icon: 'rect',
|
|
||||||
itemStyle: {
|
|
||||||
color: '#EF6666',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '手术结束',
|
|
||||||
icon: 'rect',
|
|
||||||
itemStyle: {
|
|
||||||
color: '#FAC858',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '出手术室',
|
|
||||||
icon: 'rect',
|
|
||||||
itemStyle: {
|
|
||||||
color: '#5470C6',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
selectedMode: 'none',
|
|
||||||
top: 10,
|
|
||||||
right: 1,
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 14,
|
|
||||||
fontFamily: 'DIN-Bold,Microsoft YaHei',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'time',
|
|
||||||
position: 'top',
|
|
||||||
splitNumber: 24,
|
|
||||||
axisLabel: {
|
|
||||||
color: '#B7BDBF',
|
|
||||||
fontSize: 12,
|
|
||||||
margin: 16,
|
|
||||||
formatter: function (value) {
|
|
||||||
var date = new Date(value);
|
|
||||||
var hours = date.getHours();
|
|
||||||
var minutes = date.getMinutes();
|
|
||||||
if (hours === 0 && minutes === 0) {
|
|
||||||
return '00:00';
|
|
||||||
} else {
|
|
||||||
return (hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: [],
|
|
||||||
axisLabel: {
|
|
||||||
color: '#B7BDBF',
|
|
||||||
fontSize: 12,
|
|
||||||
margin: 16,
|
|
||||||
fontFamily: 'DIN-Bold,Microsoft YaHei',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initData() {
|
|
||||||
// 创建一个数组来存储整点时间
|
|
||||||
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');
|
|
||||||
this.chartOptions.xAxis.min = `${currentDate} 08: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')}`);
|
|
||||||
const isUseArr = this.getUseTime();
|
|
||||||
for (let j = 1; j < isUseArr.length; j += 2) {
|
|
||||||
if (isUseArr[j] <= hours) {
|
|
||||||
timeArr.push({
|
|
||||||
startTime: `${currentDate} ${isUseArr[j - 1]}:00:00`,
|
|
||||||
endTime: `${currentDate} ${isUseArr[j]}:00:00`,
|
|
||||||
yValue: index - 1,
|
|
||||||
color: '#5470C6',
|
|
||||||
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) {
|
|
||||||
timeArr.push({
|
|
||||||
startTime: `${currentDate} ${isUseArr[j - 1]}:00:00`,
|
|
||||||
endTime: `${currentDate} ${detailMin}`,
|
|
||||||
yValue: index - 1,
|
|
||||||
color: '#EF6666',
|
|
||||||
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: '#FAC858',
|
|
||||||
diff: dayjs(`${currentDate} ${detailMin}`).diff(
|
|
||||||
dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`),
|
|
||||||
'minute'
|
|
||||||
),
|
|
||||||
name: '手术结束',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else if (isUseArr[j] > hours && isUseArr[j - 1] == hours) {
|
|
||||||
timeArr.push({
|
|
||||||
startTime: `${currentDate} ${sevenMinutesAgo}`,
|
|
||||||
endTime: `${currentDate} ${detailMin}`,
|
|
||||||
yValue: index - 1,
|
|
||||||
color: '#92CC76',
|
|
||||||
diff: '7',
|
|
||||||
name: '入手术室',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 生成series数据
|
|
||||||
this.chartOptions.series = this.seriesData(timeArr);
|
|
||||||
},
|
|
||||||
seriesData(data) {
|
|
||||||
// const obj = {};
|
|
||||||
const res = data.map(function (item) {
|
|
||||||
// obj[item.name] = item.color;
|
|
||||||
return {
|
|
||||||
type: 'custom',
|
|
||||||
name: item.name,
|
|
||||||
renderItem: function (params, api) {
|
|
||||||
var xStart = api.coord([item.startTime, item.yValue]);
|
|
||||||
var xEnd = api.coord([item.endTime, item.yValue]);
|
|
||||||
var textX = (xStart[0] + xEnd[0]) / 2;
|
|
||||||
var textY = xStart[1] - 20;
|
|
||||||
return {
|
|
||||||
type: 'group',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
type: 'line',
|
|
||||||
shape: {
|
|
||||||
x1: xStart[0],
|
|
||||||
y1: xStart[1],
|
|
||||||
x2: xEnd[0],
|
|
||||||
y2: xEnd[1],
|
|
||||||
},
|
|
||||||
style: {
|
|
||||||
stroke: item.color,
|
|
||||||
lineWidth: 8,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'text',
|
|
||||||
position: [textX, textY],
|
|
||||||
style: {
|
|
||||||
text: `${item.diff} min`,
|
|
||||||
fill: '#B7BDBF',
|
|
||||||
textSize: '12px',
|
|
||||||
textAlign: 'center',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
data: [item],
|
|
||||||
};
|
|
||||||
});
|
|
||||||
// console.log(obj);
|
|
||||||
// console.log(JSON.stringify(res));
|
|
||||||
return res;
|
|
||||||
},
|
|
||||||
getUseTime() {
|
|
||||||
// 随机生成当天手术室的使用时间
|
|
||||||
function getRandomUniqueValues(min, max, count) {
|
|
||||||
const values = new Set();
|
|
||||||
while (values.size < count) {
|
|
||||||
values.add(Math.floor(Math.random() * (max - min + 1)) + min);
|
|
||||||
}
|
|
||||||
return Array.from(values);
|
|
||||||
}
|
|
||||||
|
|
||||||
const numValues = Math.floor(Math.random() * 3) + 8;
|
|
||||||
const randomValues = getRandomUniqueValues(8, 24, numValues % 2 ? numValues + 1 : numValues);
|
|
||||||
return randomValues.sort((a, b) => {
|
|
||||||
return a - b;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
const chartContainer = this.$refs.echartsContainer;
|
|
||||||
const chart = echarts.init(chartContainer);
|
|
||||||
this.initData();
|
|
||||||
chart.setOption(this.chartOptions);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.rightMiddle {
|
|
||||||
height: 100%;
|
|
||||||
background-color: #011343;
|
|
||||||
:deep(.dv-border-box-13) {
|
|
||||||
padding: 2vh;
|
|
||||||
box-sizing: border-box;
|
|
||||||
section {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<template>
|
||||||
|
<div></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
@ -1,58 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="rightMiddle">
|
|
||||||
<dv-border-box-13>
|
|
||||||
<dv-loading v-if="isLoding">Loading...</dv-loading>
|
|
||||||
<section v-else ref="echartsContainer"></section>
|
|
||||||
</dv-border-box-13>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
isLoding: false,
|
|
||||||
chartOptions: {
|
|
||||||
legend: {},
|
|
||||||
tooltip: {},
|
|
||||||
dataset: {
|
|
||||||
source: [
|
|
||||||
['product', '2012', '2013', '2014', '2015'],
|
|
||||||
['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
|
|
||||||
['Milk Tea', 86.5, 92.1, 85.7, 83.1],
|
|
||||||
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4],
|
|
||||||
],
|
|
||||||
},
|
|
||||||
xAxis: { type: 'category' },
|
|
||||||
yAxis: {},
|
|
||||||
series: [
|
|
||||||
{ type: 'bar', encode: { x: 'product', y: '2012' } },
|
|
||||||
{ type: 'bar', encode: { x: 'product', y: '2013' } },
|
|
||||||
{ type: 'bar', encode: { x: 'product', y: '2014' } },
|
|
||||||
{ type: 'bar', encode: { x: 'product', y: '2015' } },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
const chartContainer = this.$refs.echartsContainer;
|
|
||||||
const chart = echarts.init(chartContainer);
|
|
||||||
chart.setOption(this.chartOptions);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.rightMiddle {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
:deep(.dv-border-box-13) {
|
|
||||||
padding: 2vh;
|
|
||||||
box-sizing: border-box;
|
|
||||||
section {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,5 +1,4 @@
|
|||||||
const { defineConfig } = require('@vue/cli-service');
|
const { defineConfig } = require('@vue/cli-service')
|
||||||
module.exports = defineConfig({
|
module.exports = defineConfig({
|
||||||
transpileDependencies: true,
|
transpileDependencies: true
|
||||||
publicPath: './',
|
})
|
||||||
});
|
|
||||||
|
|||||||
Loading…
Reference in new issue