Skip to content

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

完成大屏样式

parent 492a0cf2
Expand all Show whitespace changes
Inline Side-by-side
Showing with 207 additions and 86 deletions
index.html
View file @ 875fd219
......@@ -12,7 +12,7 @@
<!-- 引入阿里云oss-sdk -->
<!-- <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script> -->
<!-- 引入百度DuGIS -->
<!-- <script src="http://40.1.2.251:8219/bmapgl/"></script> -->
<script src="http://40.1.2.251:8219/bmapgl/"></script>
</head>
<body>
......
src/assets/map/wuhan.json 0 → 100644
View file @ 875fd219
This diff is collapsed.
src/page/bigscreen/components/echartsMap.vue
View file @ 875fd219
<template>
<div class="main">
<div class="main-map">
<div
class="chart"
ref="chart"
>
</div>
<div class="bg">
</div>
<div class="tip">
<p class="name">{{selectData.name}}</p>
<div class="b">
<div class="l">
<p class="p1">项目总数</p>
<p class="p2">{{selectData.value}}</p>
</div>
<ul class="r">
<li>
<i class="xt"></i>
<span>胸痛</span>
<span class="num">{{selectData.val1}}</span>
</li>
<li>
<i class="cz"></i>
<span>卒中</span>
<span class="num">{{selectData.val2}}</span>
</li>
<li>
<i class="css"></i>
<span>创/烧伤</span>
<span class="num">{{selectData.value - selectData.val1 - selectData.val2}}</span>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
let Echarts = require('echarts/lib/echarts');
let wuhan = require('@/assets/map/wuhan.json');
// let china = require('echarts/map/json/china');
export default {
data() {
return {
chart: null,
list: [
{ value: 27594, name: '胸痛' },
{ value: 18594, name: '卒中' },
{ value: 18594, name: '创/烧伤' },
{ value: 18594, name: '其他' }
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 }
],
total: 0
selectData: { name: '江岸区', value: 541, val1: 300, val2: 200 }
}
},
mounted() {
let count = 0
this.list.forEach(i => {
count += i.value
})
this.total = count
this.init()
},
methods: {
init() {
Echarts.registerMap('wuhan', wuhan)
// Echarts.registerMap('china', china)
this.chart = Echarts.init(this.$refs.chart);
let option = {
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: '50%',
top: 'middle',
itemGap: 72,
itemWidth: 24,
itemHeight: 24,
formatter: (name) => {
const item = this.list.find(i => i.name = name)
const per = parseInt(item.value / this.total * 100)
return '{a|' + name + '}{b|' + per + '%}{x|' + item.value + '人}'
},
title: {
text: '武汉市地图',
textStyle: {
padding: [0, 20, 0, 0],
rich: {
a: {
color: 'rgba(255, 255, 255, 0.6)',
color: '#386FFF',
fontSize: 40,
width: 180,
padding: [0, 0, 0, 10]
},
b: {
color: '#FFFFFF',
fontSize: 40,
width: 120
right: '90px',
bottom: '109px'
},
x: {
color: '#FFFFFF',
fontSize: 40,
width: 200
// tooltip: {
// trigger: 'item',
// formatter: '{b}<br/>{c} (p / km2)'
// },
visualMap: {
type: 'piecewise',
min: 100,
max: 1000,
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' }
],
itemWidth: 44,
itemHeight: 27,
itemGap: 24,
itemSymbol: 'rect',
// realtime: false,
// calculable: true,
textStyle: {
color: '#386FFF',
fontSize: 29,
},
}
inRange: {
symbol: [],
color: ['#1A347A', '#24449C', '#2B52BD', '#3361DE', '#386FFF']
}
},
color: ['#FF3178', '#00C9FF', '#FFA400', '#7A52FF'],
series: [
{
name: '访问来源',
type: 'pie',
clockwise: false,
radius: ['60%', '85%'],
avoidLabelOverlap: false,
name: '武汉市地图',
type: 'map',
selectedMode: 'single',
mapType: 'wuhan', // 自定义扩展图表类型
// label: {
// show: true
// },
// zoom: 1.2,
emphasis: {
label: {
show: false,
position: 'center'
},
center: ['25%', '50%'],
labelLine: {
show: false
},
data: this.list,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
areaColor: '#00FFFC',
backgroundColor: '#00FFFC',
},
},
itemStyle: {
borderWidth: 2,
borderColor: '#000D4A'
},
top: 115,
bottom: 325,
data: this.dataList
}
]
};
}
this.chart.setOption(option);
this.chart.on('click', (params) => {
this.selectData = params.data
});
}
}
}
</script>
<style lang="scss" scoped>
.main {
.main-map {
// margin: 100px 0 0;
height: calc(100% - 266px);
position: relative;
margin: 132px 60px;
.chart {
width: 100%;
height: 500px;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 998;
}
.total {
.bg {
width: 1130px;
height: 381px;
bottom: 139px;
position: absolute;
top: 183px;
left: 157px;
text-align: center;
z-index: 9999;
span {
height: 40px;
font-size: 40px;
color: rgba(255, 255, 255, 0.6);
}
p {
height: 48px;
margin: 0 auto;
left: 0;
right: 0;
background: url("../../../assets/images/quan.png");
background-size: 100%;
z-index: 997;
}
.tip {
position: absolute;
width: 520px;
height: 382px;
background: #00fffc;
box-shadow: 12px 12px 48px 0px rgba(0, 255, 252, 0.5),
0px 0px 64px 0px #00b3ff;
border-radius: 24px;
border: 4px solid #00fffc;
bottom: 350px;
right: 240px;
z-index: 999;
.name {
padding: 48px 49px 37px;
height: 60px;
font-size: 56px;
color: #ffffff;
line-height: 48px;
margin-top: 20px;
font-weight: bold;
color: #000000;
line-height: 60px;
}
.b {
height: 189px;
}
.l,
.r {
float: left;
height: 100%;
}
.l {
box-sizing: border-box;
border-right: 2px solid rgba(0, 0, 0, 0.38);
padding-top: 36px;
text-align: center;
width: 40%;
.p1 {
font-size: 32px;
color: rgba(0, 0, 0, 0.6);
}
.p2 {
font-size: 72px;
color: #000000;
margin-top: 16px;
}
}
.r {
width: 60%;
li {
height: 63px;
line-height: 63px;
font-size: 36px;
color: #000000;
i {
display: inline-block;
width: 12px;
height: 12px;
vertical-align: middle;
border: 2px solid #ffffff;
margin: auto 16px auto 33px;
border-radius: 50%;
&.xt {
background: #ff3178;
}
&.cz {
background: #316aff;
}
&.css {
background: #ff8931;
}
}
span:nth-child(2) {
display: inline-block;
width: 130px;
}
.num {
font-weight: bold;
}
}
}
}
}
......
src/page/emergencyCar/components/emergencyCarDialog.vue
View file @ 875fd219
......@@ -325,7 +325,7 @@ export default {
return {
dialogVisible: false,
loading: false,
uploadUrl: '/api/team/car/uploadEmergencyImage',
uploadUrl: (process.env.NODE_ENV === 'production' ? process.env.BASE_API : '') + '/api/team/car/uploadEmergencyImage',
formDisabled: false,
dataForm: {
vehicleUsingUnit: '',
......
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