Skip to content

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

修改大屏

parent 22517448
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 322 additions and 179 deletions
package.json
View file @ cf3eb10e
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
"vue-baidu-map": "^0.21.22", "vue-baidu-map": "^0.21.22",
"vue-i18n": "^8.0.0", "vue-i18n": "^8.0.0",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vue-seamless-scroll": "^1.1.23",
"vuex": "^3.0.1" "vuex": "^3.0.1"
}, },
"devDependencies": { "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 @@ ...@@ -13,23 +13,28 @@
<div class="b"> <div class="b">
<div class="l"> <div class="l">
<p class="p1">项目总数</p> <p class="p1">项目总数</p>
<p class="p2">{{selectData.value}}</p> <p class="p2">{{selectData.itemTotal}}</p>
</div> </div>
<ul class="r"> <ul class="r">
<li> <li>
<i class="xt"></i> <i class="xt"></i>
<span>胸痛</span> <span>胸痛</span>
<span class="num">{{selectData.val1}}</span> <span class="num">{{selectData.chestTotal}}</span>
</li> </li>
<li> <li>
<i class="cz"></i> <i class="cz"></i>
<span>卒中</span> <span>卒中</span>
<span class="num">{{selectData.val2}}</span> <span class="num">{{selectData.strokeTotal}}</span>
</li> </li>
<li> <li>
<i class="css"></i> <i class="css"></i>
<span>创/烧伤</span> <span>创伤</span>
<span class="num">{{selectData.value - selectData.val1 - selectData.val2}}</span> <span class="num">{{selectData.traumaTotal}}</span>
</li>
<li>
<i class="ss"></i>
<span>烧伤</span>
<span class="num">{{selectData.burnTotal}}</span>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -38,38 +43,68 @@ ...@@ -38,38 +43,68 @@
</template> </template>
<script> <script>
/**
* 江岸区 江汉区 硚口区 汉阳区 武昌区 青山区 洪山区 东西湖区 汉南区 蔡甸区 江夏区 黄陂区 新洲区
* */
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import wuhan from '@/assets/map/wuhan.json' import wuhan from '@/assets/map/wuhan.json'
export default { export default {
props: {
areaCenters: {
type: Array,
default: []
}
},
data() { data() {
return { return {
chart: null, myChart: null,
dataList: [ dataIndex: 0,
{ name: '江岸区', selected: true, value: 541, val1: 300, val2: 200 }, dataList: [],
{ name: '江汉区', value: 416, val1: 200, val2: 100 }, selectData: {
{ name: '硚口区', value: 280, val1: 200, val2: 10 }, name: '',
{ name: '汉阳区', value: 971, val1: 200, val2: 100 }, itemTotal: 0,
{ name: '武昌区', value: 157, val1: 20, val2: 10 }, chestTotal: 0,
{ name: '青山区', value: 827, val1: 200, val2: 100 }, strokeTotal: 0,
{ name: '洪山区', value: 844, val1: 200, val2: 100 }, traumaTotal: 0,
{ name: '东西湖区', value: 850, val1: 200, val2: 100 }, burnTotal: 0,
{ 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 }, watch: {
{ name: '新洲区', value: 752, val1: 200, val2: 100 } areaCenters: function(val) {
], if (val || val.length > 0) {
selectData: { name: '江岸区', value: 541, val1: 300, val2: 200 } this.init()
}
} }
}, },
mounted() { mounted() {
echarts.registerMap('wuhan', wuhan)
this.init() this.init()
}, },
destroyed() {
clearInterval(this.timer)
},
methods: { methods: {
init() { init() {
echarts.registerMap('wuhan', wuhan) let total = 0
const myChart = echarts.init(this.$refs.chart); 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 = { let option = {
title: { title: {
text: '武汉市地图', text: '武汉市地图',
...@@ -87,11 +122,11 @@ export default { ...@@ -87,11 +122,11 @@ export default {
left: 138, left: 138,
bottom: 108, bottom: 108,
pieces: [ pieces: [
{ gt: 820, lte: 1000, label: '高', color: '#386FFF' }, { gt: total / 5 * 4, lte: total, label: '高', color: '#386FFF' },
{ gt: 640, lte: 820, label: ' ', color: '#3361DE' }, { gt: total / 5 * 3, lte: total / 5 * 4, label: ' ', color: '#3361DE' },
{ gt: 460, lte: 640, label: ' ', color: '#2B52BD' }, { gt: total / 5 * 2, lte: total / 5 * 3, label: ' ', color: '#2B52BD' },
{ gt: 280, lte: 460, label: ' ', color: '#24449C' }, { gt: total / 5, lte: total / 5 * 2, label: ' ', color: '#24449C' },
{ gt: 100, lte: 280, label: '低', color: '#1A347A' } { gt: 0, lte: total / 5, label: '低', color: '#1A347A' }
], ],
itemWidth: 44, itemWidth: 44,
itemHeight: 27, itemHeight: 27,
...@@ -142,15 +177,30 @@ export default { ...@@ -142,15 +177,30 @@ export default {
}, },
top: 115, top: 115,
bottom: 325, bottom: 325,
data: this.dataList data: list
} }
] ]
} }
// this.chart.setOption(option); this.myChart.setOption(option);
myChart.setOption(option); this.myChart.on('click', (params) => {
myChart.on('click', (params) => { this.dataIndex = params.dataIndex
this.selectData = params.data 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 { ...@@ -184,7 +234,7 @@ export default {
.tip { .tip {
position: absolute; position: absolute;
width: 520px; width: 520px;
height: 382px; height: 450px;
background: #00fffc; background: #00fffc;
box-shadow: 12px 12px 48px 0px rgba(0, 255, 252, 0.5), box-shadow: 12px 12px 48px 0px rgba(0, 255, 252, 0.5),
0px 0px 64px 0px #00b3ff; 0px 0px 64px 0px #00b3ff;
...@@ -202,7 +252,7 @@ export default { ...@@ -202,7 +252,7 @@ export default {
line-height: 60px; line-height: 60px;
} }
.b { .b {
height: 189px; height: 257px;
} }
.l, .l,
.r { .r {
...@@ -249,6 +299,9 @@ export default { ...@@ -249,6 +299,9 @@ export default {
&.css { &.css {
background: #ff8931; background: #ff8931;
} }
&.ss {
background: #ff5600;
}
} }
span:nth-child(2) { span:nth-child(2) {
display: inline-block; display: inline-block;
......
src/page/bigscreen/components/echartsPie.vue
View file @ cf3eb10e
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="main"> <div class="main">
<div class="total"> <div class="total">
<span>总人数</span> <span>总人数</span>
<p>{{this.total}}人 </p> <p>{{ total }}人 </p>
</div> </div>
<div <div
class="chart" class="chart"
...@@ -16,30 +16,45 @@ ...@@ -16,30 +16,45 @@
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
props: {
patientCount: {
type: Object,
default: {
burnTotal: 0,
chestTotal: 0,
strokeTotal: 0,
traumaTotal: 0
}
}
},
data() { data() {
return { return {
chart: null, chart: null,
list: [
{ value: 27594, name: '胸痛' },
{ value: 18594, name: '卒中' },
{ value: 18594, name: '创/烧伤' },
{ value: 18594, name: '其他' }
],
total: 0 total: 0
} }
}, },
watch: {
patientCount: function(val) {
if (val) {
this.init()
}
}
},
mounted() { mounted() {
let count = 0
this.list.forEach(i => {
count += i.value
})
this.total = count
this.init() this.init()
}, },
methods: { methods: {
init() { 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); const myChart = this.chart || echarts.init(this.$refs.chart);
// this.chart = echarts.init(this.$refs.chart);
let option = { let option = {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
...@@ -52,8 +67,12 @@ export default { ...@@ -52,8 +67,12 @@ export default {
itemWidth: 24, itemWidth: 24,
itemHeight: 24, itemHeight: 24,
formatter: (name) => { 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 + '人}' return '{a|' + name + '}{b|' + per + '%}{x|' + item.value + '人}'
}, },
textStyle: { textStyle: {
...@@ -94,7 +113,7 @@ export default { ...@@ -94,7 +113,7 @@ export default {
labelLine: { labelLine: {
show: false show: false
}, },
data: this.list, data: list,
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
...@@ -125,7 +144,7 @@ export default { ...@@ -125,7 +144,7 @@ export default {
.total { .total {
position: absolute; position: absolute;
top: 183px; top: 183px;
left: 157px; width: 50%;
text-align: center; text-align: center;
z-index: 9999; z-index: 9999;
span { span {
......
src/page/bigscreen/index.vue
View file @ cf3eb10e
This diff is collapsed.
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