Skip to content

M
md-vue-chc
Commit cf3eb10e authored by 何鹏程's avatar 何鹏程
Browse files
Options

修改大屏

parent 22517448
Hide whitespace changes
Inline Side-by-side
Showing with 322 additions and 179 deletions
package.json
View file @ cf3eb10e
......@@ -25,6 +25,7 @@
"vue-baidu-map": "^0.21.22",
"vue-i18n": "^8.0.0",
"vue-router": "^3.0.1",
"vue-seamless-scroll": "^1.1.23",
"vuex": "^3.0.1"
},
"devDependencies": {
......
src/api/bigscreen.js 0 → 100644
View file @ cf3eb10e
import request from '../util/ajax'
export function siteSummary(params) {
return request({
url: '/api/bigScreen/siteSummary',
method: 'GET',
data: params
})
}
export function patientSummary(params) {
return request({
url: '/api/bigScreen/patientSummary',
method: 'GET',
data: params
})
}
export function admissions(params) {
return request({
url: '/api/bigScreen/admissions',
method: 'GET',
data: params
})
}
export function centerSummary(params) {
return request({
url: '/api/bigScreen/centerSummary',
method: 'GET',
data: params
})
}
src/page/bigscreen/components/echartsMap.vue
View file @ cf3eb10e
......@@ -13,23 +13,28 @@
<div class="b">
<div class="l">
<p class="p1">项目总数</p>
<p class="p2">{{selectData.value}}</p>
<p class="p2">{{selectData.itemTotal}}</p>
</div>
<ul class="r">
<li>
<i class="xt"></i>
<span>胸痛</span>
<span class="num">{{selectData.val1}}</span>
<span class="num">{{selectData.chestTotal}}</span>
</li>
<li>
<i class="cz"></i>
<span>卒中</span>
<span class="num">{{selectData.val2}}</span>
<span class="num">{{selectData.strokeTotal}}</span>
</li>
<li>
<i class="css"></i>
<span>创/烧伤</span>
<span class="num">{{selectData.value - selectData.val1 - selectData.val2}}</span>
<span>创伤</span>
<span class="num">{{selectData.traumaTotal}}</span>
</li>
<li>
<i class="ss"></i>
<span>烧伤</span>
<span class="num">{{selectData.burnTotal}}</span>
</li>
</ul>
</div>
......@@ -38,38 +43,68 @@
</template>
<script>
/**
* 江岸区 江汉区 硚口区 汉阳区 武昌区 青山区 洪山区 东西湖区 汉南区 蔡甸区 江夏区 黄陂区 新洲区
* */
import * as echarts from 'echarts';
import wuhan from '@/assets/map/wuhan.json'
export default {
props: {
areaCenters: {
type: Array,
default: []
}
},
data() {
return {
chart: null,
dataList: [
{ name: '江岸区', selected: true, value: 541, val1: 300, val2: 200 },
{ name: '江汉区', value: 416, val1: 200, val2: 100 },
{ name: '硚口区', value: 280, val1: 200, val2: 10 },
{ name: '汉阳区', value: 971, val1: 200, val2: 100 },
{ name: '武昌区', value: 157, val1: 20, val2: 10 },
{ name: '青山区', value: 827, val1: 200, val2: 100 },
{ name: '洪山区', value: 844, val1: 200, val2: 100 },
{ name: '东西湖区', value: 850, val1: 200, val2: 100 },
{ name: '汉南区', value: 354, val1: 200, val2: 100 },
{ name: '蔡甸区', value: 431, val1: 200, val2: 100 },
{ name: '江夏区', value: 252, val1: 200, val2: 10 },
{ name: '黄陂区', value: 340, val1: 200, val2: 100 },
{ name: '新洲区', value: 752, val1: 200, val2: 100 }
],
selectData: { name: '江岸区', value: 541, val1: 300, val2: 200 }
myChart: null,
dataIndex: 0,
dataList: [],
selectData: {
name: '',
itemTotal: 0,
chestTotal: 0,
strokeTotal: 0,
traumaTotal: 0,
burnTotal: 0,
}
}
},
watch: {
areaCenters: function(val) {
if (val || val.length > 0) {
this.init()
}
}
},
mounted() {
echarts.registerMap('wuhan', wuhan)
this.init()
},
destroyed() {
clearInterval(this.timer)
},
methods: {
init() {
echarts.registerMap('wuhan', wuhan)
const myChart = echarts.init(this.$refs.chart);
let total = 0
const list = this.areaCenters.map((item, index) => {
total += item.itemTotal
const params = {
name: item.areaName,
value: item.itemTotal,
...item
}
if (index === 0) {
params.selected = true
this.selectData = params
}
return params
})
this.myChart = this.myChart || echarts.init(this.$refs.chart);
this.myChart.off('click')
this.myChart.off('selectchanged')
let option = {
title: {
text: '武汉市地图',
......@@ -87,11 +122,11 @@ export default {
left: 138,
bottom: 108,
pieces: [
{ gt: 820, lte: 1000, label: '高', color: '#386FFF' },
{ gt: 640, lte: 820, label: ' ', color: '#3361DE' },
{ gt: 460, lte: 640, label: ' ', color: '#2B52BD' },
{ gt: 280, lte: 460, label: ' ', color: '#24449C' },
{ gt: 100, lte: 280, label: '低', color: '#1A347A' }
{ gt: total / 5 * 4, lte: total, label: '高', color: '#386FFF' },
{ gt: total / 5 * 3, lte: total / 5 * 4, label: ' ', color: '#3361DE' },
{ gt: total / 5 * 2, lte: total / 5 * 3, label: ' ', color: '#2B52BD' },
{ gt: total / 5, lte: total / 5 * 2, label: ' ', color: '#24449C' },
{ gt: 0, lte: total / 5, label: '低', color: '#1A347A' }
],
itemWidth: 44,
itemHeight: 27,
......@@ -142,15 +177,30 @@ export default {
},
top: 115,
bottom: 325,
data: this.dataList
data: list
}
]
}
// this.chart.setOption(option);
myChart.setOption(option);
myChart.on('click', (params) => {
this.selectData = params.data
this.myChart.setOption(option);
this.myChart.on('click', (params) => {
this.dataIndex = params.dataIndex
this.selectData = list[this.dataIndex]
});
this.myChart.on('selectchanged', (params) => {
this.dataIndex = params.fromActionPayload.dataIndex
this.selectData = list[this.dataIndex]
});
clearInterval(this.timer)
this.timer = setInterval(() => {
this.dataIndex++
if (this.dataIndex >= list.length) {
this.dataIndex = 0
}
this.myChart.dispatchAction({
type: 'select',
dataIndex: this.dataIndex
})
}, 30 * 1000)
}
}
}
......@@ -184,7 +234,7 @@ export default {
.tip {
position: absolute;
width: 520px;
height: 382px;
height: 450px;
background: #00fffc;
box-shadow: 12px 12px 48px 0px rgba(0, 255, 252, 0.5),
0px 0px 64px 0px #00b3ff;
......@@ -202,7 +252,7 @@ export default {
line-height: 60px;
}
.b {
height: 189px;
height: 257px;
}
.l,
.r {
......@@ -249,6 +299,9 @@ export default {
&.css {
background: #ff8931;
}
&.ss {
background: #ff5600;
}
}
span:nth-child(2) {
display: inline-block;
......
src/page/bigscreen/components/echartsPie.vue
View file @ cf3eb10e
......@@ -2,7 +2,7 @@
<div class="main">
<div class="total">
<span>总人数</span>
<p>{{this.total}}人 </p>
<p>{{ total }}人 </p>
</div>
<div
class="chart"
......@@ -16,30 +16,45 @@
<script>
import * as echarts from 'echarts';
export default {
props: {
patientCount: {
type: Object,
default: {
burnTotal: 0,
chestTotal: 0,
strokeTotal: 0,
traumaTotal: 0
}
}
},
data() {
return {
chart: null,
list: [
{ value: 27594, name: '胸痛' },
{ value: 18594, name: '卒中' },
{ value: 18594, name: '创/烧伤' },
{ value: 18594, name: '其他' }
],
total: 0
}
},
watch: {
patientCount: function(val) {
if (val) {
this.init()
}
}
},
mounted() {
let count = 0
this.list.forEach(i => {
count += i.value
})
this.total = count
this.init()
},
methods: {
init() {
const { burnTotal, chestTotal, strokeTotal, traumaTotal } = this.patientCount
this.total = burnTotal + chestTotal + strokeTotal + traumaTotal
// console.log(total)
const list = [
{ value: chestTotal, name: '胸痛' },
{ value: strokeTotal, name: '卒中' },
{ value: traumaTotal, name: '创伤' },
{ value: burnTotal, name: '烧伤' }
]
const myChart = this.chart || echarts.init(this.$refs.chart);
// this.chart = echarts.init(this.$refs.chart);
let option = {
tooltip: {
trigger: 'item'
......@@ -52,8 +67,12 @@ export default {
itemWidth: 24,
itemHeight: 24,
formatter: (name) => {
const item = this.list.find(i => i.name = name)
const per = parseInt(item.value / this.total * 100)
const item = list.find(i => i.name == name)
let per = 0
if (item.value !== 0) {
per = parseInt(item.value / this.total * 100)
}
return '{a|' + name + '}{b|' + per + '%}{x|' + item.value + '人}'
},
textStyle: {
......@@ -94,7 +113,7 @@ export default {
labelLine: {
show: false
},
data: this.list,
data: list,
emphasis: {
itemStyle: {
shadowBlur: 10,
......@@ -125,7 +144,7 @@ export default {
.total {
position: absolute;
top: 183px;
left: 157px;
width: 50%;
text-align: center;
z-index: 9999;
span {
......
src/page/bigscreen/index.vue
View file @ cf3eb10e
......@@ -8,6 +8,7 @@
<div class="content">
<div class="div1 box">
<Title title="急救站点信息" />
<dl class="bigTab left">
<dt>
<div class="cell_1">序号</div>
......@@ -17,66 +18,73 @@
<div class="cell_5">车辆数量</div>
<div class="cell_6">所在医疗机构</div>
</dt>
<dd
v-for="(item, index) in dataList1"
:key="index"
<VueSeamless
class="seamless-warp"
:data="siteList"
:step="3"
>
<div
class="cell_1"
:title="index + 1"
>{{index + 1}}</div>
<div
class="cell_2"
:title="item.areaName"
>{{item.areaName}}</div>
<div
class="cell_3"
:title="item.siteName"
>{{item.siteName}}</div>
<div
class="cell_4"
:title="item.siteLocation"
>{{item.siteLocation}}</div>
<div
class="cell_5"
:title="item.carCount"
>{{item.carCount}}</div>
<div
class="cell_6"
:title="item.hospitalName"
>{{item.hospitalName}}</div>
</dd>
<dd
v-for="(item, index) in siteList"
:key="index"
>
<div
class="cell_1"
:title="index + 1"
>{{index + 1}}</div>
<div
class="cell_2"
:title="item.areaName"
>{{item.areaName}}</div>
<div
class="cell_3"
:title="item.siteName"
>{{item.siteName}}</div>
<div
class="cell_4"
:title="item.siteLocation"
>{{item.siteLocation}}</div>
<div
class="cell_5"
:title="item.carCount"
>{{item.carCount}}</div>
<div
class="cell_6"
:title="item.hospitalName"
>{{item.hospitalName}}</div>
</dd>
</VueSeamless>
</dl>
</div>
<div class="div2">
<div class="top box">
<Title title="院前救治患者" />
<Title title="当日急救患者" />
<div class="bigMsg">
<div class="row">
<div class="col">
<p class="p1">胸痛中心</p>
<p class="p2">{{dataList2.num1}}人</p>
<p class="p2">{{patientCount.today.chestTotal}}人</p>
</div>
<div class="col">
<p class="p1">卒中中心</p>
<p class="p2">{{dataList2.num2}}人</p>
<p class="p2">{{patientCount.today.strokeTotal}}人</p>
</div>
</div>
<div class="row">
<div class="col">
<p class="p1">创伤中心</p>
<p class="p2">{{dataList2.num3}}人</p>
<p class="p2">{{patientCount.today.traumaTotal}}人</p>
</div>
<div class="col">
<p class="p1">烧伤中心</p>
<p class="p2">{{dataList2.num4}}人</p>
<p class="p2">{{patientCount.today.burnTotal}}人</p>
</div>
</div>
</div>
</div>
<div class="bottom box">
<Title title="院前救治占比" />
<EchartsPie />
<Title title="当日急救患者占比" />
<EchartsPie :patientCount="patientCount.today" />
</div>
</div>
<div class="div3 box">
......@@ -87,7 +95,7 @@
alt=""
>
<p class="p1">胸痛中心</p>
<p class="p2">{{dataList3.num1}} <span>个</span></p>
<p class="p2">{{centerData.chestTotal}} <span>个</span></p>
</li>
<li>
<img
......@@ -95,48 +103,56 @@
alt=""
>
<p class="p1">卒中中心</p>
<p class="p2">{{dataList3.num2}} <span>个</span></p>
<p class="p2">{{centerData.strokeTotal}} <span>个</span></p>
</li>
<li>
<img
src="../../assets/images/bigscreen_03.png"
alt=""
>
<p class="p1">创/烧伤中心</p>
<p class="p2">{{dataList3.num3}} <span>个</span></p>
<p class="p1">创伤中心</p>
<p class="p2">{{centerData.traumaTotal}} <span>个</span></p>
</li>
<li>
<img
src="../../assets/images/bigscreen_04.png"
alt=""
>
<p class="p1">烧伤中心</p>
<p class="p2">{{centerData.burnTotal}} <span>个</span></p>
</li>
</ul>
<EchartsMap />
<EchartsMap :areaCenters="areaCenters" />
</div>
<div class="div4">
<div class="top box">
<Title title="院前救治患者" />
<Title title="累计急救患者" />
<div class="bigMsg">
<div class="row">
<div class="col">
<p class="p1">胸痛中心</p>
<p class="p2">{{dataList2.num1}}人</p>
<p class="p2">{{patientCount.chestTotal}}人</p>
</div>
<div class="col">
<p class="p1">卒中中心</p>
<p class="p2">{{dataList2.num2}}人</p>
<p class="p2">{{patientCount.strokeTotal}}人</p>
</div>
</div>
<div class="row">
<div class="col">
<p class="p1">创伤中心</p>
<p class="p2">{{dataList2.num3}}人</p>
<p class="p2">{{patientCount.traumaTotal}}人</p>
</div>
<div class="col">
<p class="p1">烧伤中心</p>
<p class="p2">{{dataList2.num4}}人</p>
<p class="p2">{{patientCount.burnTotal}}人</p>
</div>
</div>
</div>
</div>
<div class="bottom box">
<Title title="院前救治占比" />
<EchartsPie />
<Title title="累计急救患者占比" />
<EchartsPie :patientCount="patientCount" />
</div>
</div>
<div class="div5 box">
......@@ -147,38 +163,49 @@
<div class="cell_2">医院名称</div>
<div class="cell_3">胸痛患者</div>
<div class="cell_4">卒中患者</div>
<div class="cell_5">创/烧伤患者</div>
<div class="cell_6">总计</div>
<div class="cell_5">创伤患者</div>
<div class="cell_6">烧伤患者</div>
<div class="cell_7">总计</div>
</dt>
<dd
v-for="(item, index) in dataList7"
:key="index"
<VueSeamless
class="seamless-warp"
:data="acceptsList"
:step="5"
>
<div
class="cell_1"
:title="index + 1"
>{{index + 1}}</div>
<div
class="cell_2"
:title="item.hospitalName"
>{{item.hospitalName}}</div>
<div
class="cell_3"
:title="item.num1"
>{{item.num1}}</div>
<div
class="cell_4"
:title="item.num2"
>{{item.num2}}</div>
<div
class="cell_5"
:title="item.num3"
>{{item.num3}}</div>
<div
class="cell_6"
:title="item.num4"
>{{item.num4}}</div>
</dd>
<dd
v-for="(item, index) in acceptsList"
:key="index"
>
<div
class="cell_1"
:title="index + 1"
>{{index + 1}}</div>
<div
class="cell_2"
:title="item.hospitalName"
>{{item.hospitalName}}</div>
<div
class="cell_3"
:title="item.chestTotal"
>{{item.chestTotal}}</div>
<div
class="cell_4"
:title="item.strokeTotal"
>{{item.strokeTotal}}</div>
<div
class="cell_5"
:title="item.traumaTotal"
>{{item.traumaTotal}}</div>
<div
class="cell_6"
:title="item.burnTotal"
>{{item.burnTotal}}</div>
<div
class="cell_7"
:title="item.total"
>{{item.total}}</div>
</dd>
</VueSeamless>
</dl>
</div>
</div>
......@@ -187,64 +214,65 @@
</template>
<script>
import Title from './components/title.vue'
import EchartsPie from './components/echartsPie.vue'
import EchartsMap from './components/echartsMap.vue'
import { siteSummary, patientSummary, admissions, centerSummary } from '@/api/bigscreen'
import VueSeamless from 'vue-seamless-scroll'
export default {
components: {
Title,
EchartsPie,
EchartsMap
EchartsMap,
VueSeamless
},
data() {
return {
dataList1: [
{ areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
{ areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
{ areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
{ areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
{ areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
{ areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
{ areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
{ areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
{ areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
{ areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
{ areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
{ areaName: '硚口区硚口区硚口区硚口区硚口区硚口区', siteName: '站点1站点1站点1站点1站点1', siteLocation: '解放大道1095号解放大道1095号解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院华中科技大学附属同济医院华中科技大学附属同济医院华中科技大学附属同济医院' }
],
dataList2: {
num1: 23548,
num2: 47945,
num3: 32237,
num4: 1920,
},
dataList3: {
num1: 514,
num2: 29,
num3: 5
siteList: [],
patientCount: {
today: {}
},
dataList7: [
{ hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
{ hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
{ hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
{ hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
{ hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
{ hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
{ hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
{ hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
{ hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
{ hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
{ hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
{ hospitalName: '华中科技大学附属同济医院华中科技大学附属同济医院华中科技大学附属同济医院华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 }
]
centerData: {},
acceptsList: [],
areaCenters: [],
timer: null
}
},
mounted() {
this.getData()
this.timer = setInterval(() => {
this.getData()
}, 30 * 60 * 1000)
},
destroyed() {
clearTimeout(this.timer)
},
methods: {
getData() {
console.log('getData')
siteSummary({
pageNo: 1,
pageSize: 0
}).then(res => {
this.siteList = res.respData.list
})
patientSummary().then(res => {
this.patientCount = {
...res.respData,
today: res.respData.today || {}
}
})
admissions({
pageNo: 1,
pageSize: 0
}).then(res => {
this.acceptsList = res.respData.list
})
centerSummary().then(res => {
this.centerData = res.respData
this.areaCenters = res.respData.areaCenters
})
}
}
}
</script>
......@@ -253,7 +281,8 @@ export default {
.bigscreen-bg {
width: 9216px;
height: 2304px;
background: url("../../assets/images/bg.png") 100% 100%;
// background: url("../../assets/images/bg.png") 100% 100%;
background: #333;
background-size: 100% 100%;
.main {
padding-top: 203px;
......@@ -300,7 +329,7 @@ export default {
li {
height: 192px;
width: 500px;
padding: 0 50px;
padding: 0 10px;
img {
float: left;
height: 192px;
......@@ -344,6 +373,10 @@ export default {
.bigTab {
margin-top: 110px;
padding: 0 60px;
.seamless-warp {
height: 1320px;
overflow: hidden;
}
dt {
color: #6f96fe;
line-height: 44px;
......@@ -361,8 +394,8 @@ export default {
line-height: 110px;
margin: 0;
}
> dt,
> dd {
dt,
dd {
> div {
float: left;
padding: 0 10px;
......@@ -402,17 +435,20 @@ export default {
width: 500px;
}
.cell_3 {
width: 300px;
width: 200px;
}
.cell_4 {
width: 300px;
width: 200px;
}
.cell_5 {
width: 300px;
width: 200px;
}
.cell_6 {
width: 200px;
}
.cell_3 {
width: 300px;
}
}
}
.bigMsg {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment