Browse Source

接口相关

master
aBin 5 years ago
parent
commit
e2bd10c14e
  1. 26
      src/components/Duration/Duration.js
  2. 44
      src/components/Map/Map.js
  3. 89
      src/components/Map/Map.vue
  4. 6
      src/components/Sensor/Sensor.js
  5. 2
      src/components/Statistics/Statistics.js
  6. 12
      src/router/index.js
  7. 49
      src/views/BtnPage/BtnPage.vue

26
src/components/Duration/Duration.js

@ -31,12 +31,33 @@ const mixin = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
data: [
'呼叫',
'到场',
'评估',
'采血',
'CT',
'谈话',
'签字',
'注射',
'介入',
'手术',
'穿刺',
'DSA',
'溶栓',
'再通',
'支架',
'解脱',
'结束',
],
axisLabel: {
textStyle: {
fontWeight: 'normal',
color: '#ccc', //标题颜色
},
formatter: function(value) {
return value.split('').join('\n');
},
},
},
yAxis: {
@ -61,6 +82,7 @@ const mixin = {
{
name: '我院记录',
type: 'line',
connectNulls: true,
stack: '总量',
symbolSize: 6,
// symbol: 'star',
@ -75,6 +97,7 @@ const mixin = {
{
name: '国际水准',
type: 'line',
connectNulls: true,
stack: '总量',
symbolSize: 6,
data: this.pointTimeInternation,
@ -88,6 +111,7 @@ const mixin = {
{
name: '当前数据',
type: 'line',
connectNulls: true,
stack: '总量',
symbolSize: 6,
data: this.pointTimeCurrentList,

44
src/components/Map/Map.js

@ -4,47 +4,53 @@ var option = {
type: 'map3D',
name: '山西',
selectedMode: 'single', //地图高亮单选
boxDepth: 90, //地图倾斜度
regionHeight: 8, //地图高度
boxDepth: 230, //地图倾斜度
regionHeight: 6, //地图高度
map: '山西',
viewControl: {
distance: 150, //地图视角 控制初始大小
rotateSensitivity: 0, //禁止旋转
zoomSensitivity: 0, //禁止缩放
distance: 1000, //地图视角 控制初始大小
rotateSensitivity: 1, //禁止旋转
zoomSensitivity: 1, //禁止缩放
},
label: {
show: true, //是否显示市
textStyle: {
color: '#0a1640', //文字颜色
color: '#aaa', //文字颜色
fontSize: 12, //文字大小
backgroundColor: 'rgba(0,0,0,0)', //透明度0清空文字背景
},
},
itemStyle: {
color: '#81d0f1', //地图颜色
borderWidth: 0.5, //分界线wdith
color: 'rgb(18,57,90)', //地图颜色
borderWidth: 1, //分界线wdith
borderColor: '#459bca', //分界线颜色
},
emphasis: {
label: {
show: true, //是否显示高亮
textStyle: {
color: '#fff', //高亮文字颜色
},
},
itemStyle: {
color: '#0489d6', //地图高亮颜色
textStyle: { color: '#fff' }, //高亮文字颜色
},
itemStyle: { color: '#A7820D' }, //地图高亮颜色
},
//高亮市区 echarts bug 不生效
regions: [
data: [
{
name: '运城市',
itemStyle: {
areaColor: '#f00',
},
value: 0,
label: { textStyle: { color: '#fff' } }, //高亮文字颜色
itemStyle: { color: '#A7820D' }, //地图高亮颜色
},
],
//高亮市区 echarts bug 不生效
// regions: [
// {
// name: '运城市',
// value: 0,
// itemStyle: {
// areaColor: 'red',
// label: { show: false },
// },
// },
// ],
},
],
};

89
src/components/Map/Map.vue

@ -1,6 +1,6 @@
<template>
<div :style="{ width: 'width', height: 'height' }" class="chart-box">
<div id="myEchart" ref="myEchart" style="width: 100%;height:100%;"></div>
<div id="myEchart" ref="myEchart" style="width: 100%; height: 100%"></div>
</div>
</template>
@ -22,6 +22,7 @@ export default {
let hg = window.innerHeight;
this.width = wh + 'px';
this.height = hg + 'px';
console.log(this.width);
console.log(this.height);
window.onresize = () => {
return (() => {
@ -50,88 +51,4 @@ export default {
};
</script>
<style lang="stylus" scoped>
/* 懒加载图标动画 */
.demo-spin-icon-load {
animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
from {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
to {
transform: rotate(360deg);
}
}
/* 弹窗样式 */
.layer {
position: absolute;
left: 400px;
top: 300px;
z-index: 100;
width: 360px;
height: 280px;
background: rgba(10, 22, 64, 0.9);
border-radius: 5px;
border: 1px solid #122253;
transform: translate(-100%, -100%);
.content {
width: 100%;
height: 100%;
position: relative;
text-align: center;
p {
font-size: 20px;
color: #fff;
line-height: 50px;
}
.col-item {
height: 41px;
margin-top: 20px;
border-right: 1px solid #172353;
.num {
color: #ebf8ff;
font-size: 18px;
}
.text {
color: #507ebc;
font-size: 12px;
}
}
}
.content::after {
content: '';
width: 120px;
height: 2px;
background: #FFCCFF;
position: absolute;
right: -120px;
top: 50%;
transform: translateY(-50%);
}
.content::before {
content: '';
width: 2px;
height: 80px;
background: #FFB800;
position: absolute;
right: -134px;
top: 136px;
transform: rotateZ(-20deg);
}
}
</style>
<style lang="stylus" scoped></style>

6
src/components/Sensor/Sensor.js

@ -3,8 +3,8 @@ const mixin = {
data() {
return {
series1: [10, 20, 30, 10, 20, 30, 10, 20, 30], // 传感器1
series2: [20, 30, 10, 20, 30, 10, 20, 30, 10], // 传感器1
series3: [30, 10, 20, 30, 10, 20, 30, 10, 20], // 传感器1
series2: [20, 30, 10, 20, 30, 10, 20, 30, 10], // 传感器2
series3: [30, 10, 20, 30, 10, 20, 30, 10, 20], // 传感器3
};
},
computed: {
@ -13,7 +13,7 @@ const mixin = {
return {
legend: {
x: 'center',
y: 'top',
y: '8%',
data: ['传感器1', '传感器2', '传感器3'],
textStyle: {
fontWeight: 'normal',

2
src/components/Statistics/Statistics.js

@ -17,7 +17,7 @@ const mixin = {
legend: [
{
x: 'center',
y: 'top',
y: '8%',
data: ['本年', '去年'],
textStyle: {
fontWeight: 'normal',

12
src/router/index.js

@ -11,12 +11,12 @@ const routes = [
name: 'Home',
component: Home,
},
// 白框框显示内容界面
// {
// path: '/Index',
// name: 'Index',
// component: () => import(/* webpackChunkName: "Index" */ 'views/Index/Index.vue'),
// },
// 模拟按钮界面
{
path: '/BtnPage',
name: 'BtnPage',
component: () => import(/* webpackChunkName: "Index" */ 'views/BtnPage/BtnPage.vue'),
},
];
const router = new VueRouter({

49
src/views/BtnPage/BtnPage.vue

@ -0,0 +1,49 @@
<template>
<div class="wrap flex-1">
<a-button type="primary" v-for="(item, index) in nameList" :key="index"> {{ item }} </a-button>
</div>
</template>
<script>
export default {
name: 'BtnPage',
data() {
return {
str: '模拟按钮界面',
nameList: [
'分诊区',
'急救医生',
'采血车',
'CT室',
'介入室',
'平车停放点',
'卒中中心门口',
'急救大楼门',
'抢救室门',
'走廊',
'心电图室门口',
'专用电梯口(一楼)',
'专用电梯口(四楼)',
'CCU导管室门口',
'急救护士',
'专科医生',
'专科护士',
],
};
},
methods: {},
};
</script>
<style lang="stylus" scoped>
.wrap {
flex-wrap: wrap;
justify-content: center;
align-items: center;
button {
margin: 20px;
flex: 0 0 8%;
}
}
</style>
Loading…
Cancel
Save