|
|
|
|
@ -110,7 +110,8 @@
|
|
|
|
|
</div>
|
|
|
|
|
</el-footer>
|
|
|
|
|
</el-container>
|
|
|
|
|
<el-aside style="background-color: rgba(0,0,0,0.3);overflow: auto;margin-bottom: 0;height: calc(100vh - 84px)" width="350px">
|
|
|
|
|
<el-aside style="background-color: rgba(0,0,0,0.3);overflow: auto;margin-bottom: 0;height: calc(100vh - 84px)"
|
|
|
|
|
width="350px">
|
|
|
|
|
<div v-for="i in 60" style="position:relative;color:#fff;height: 120px;">
|
|
|
|
|
<img src="../assets/icons/highTemperature.png"
|
|
|
|
|
style="width: 40px;height: 40px;position: absolute;top: 10px;left: 0px">
|
|
|
|
|
@ -132,6 +133,7 @@ import * as echarts from 'echarts';
|
|
|
|
|
// import resize from './mixins/resize'
|
|
|
|
|
import chinaMap from './china.json'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const animationDuration = 6000
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
@ -158,39 +160,15 @@ export default {
|
|
|
|
|
tyreChart: null,
|
|
|
|
|
mapName: 'china',
|
|
|
|
|
geoCoordMap: {},
|
|
|
|
|
chartData: [
|
|
|
|
|
{name: "北京", value: 177},
|
|
|
|
|
{name: "天津", value: 42},
|
|
|
|
|
{name: "河北", value: 102},
|
|
|
|
|
{name: "山西", value: 81},
|
|
|
|
|
{name: "内蒙古", value: 47},
|
|
|
|
|
{name: "辽宁", value: 67},
|
|
|
|
|
{name: "吉林", value: 82},
|
|
|
|
|
{name: "黑龙江", value: 66},
|
|
|
|
|
{name: "上海", value: 24},
|
|
|
|
|
{name: "江苏", value: 92},
|
|
|
|
|
{name: "浙江", value: 114},
|
|
|
|
|
{name: "安徽", value: 109},
|
|
|
|
|
{name: "福建", value: 116},
|
|
|
|
|
{name: "江西", value: 91},
|
|
|
|
|
{name: "山东", value: 119},
|
|
|
|
|
{name: "河南", value: 137},
|
|
|
|
|
{name: "湖北", value: 116},
|
|
|
|
|
{name: "湖南", value: 114},
|
|
|
|
|
{name: "重庆", value: 91},
|
|
|
|
|
{name: "四川", value: 125},
|
|
|
|
|
{name: "贵州", value: 62},
|
|
|
|
|
{name: "云南", value: 83},
|
|
|
|
|
{name: "西藏", value: 9},
|
|
|
|
|
{name: "陕西", value: 80},
|
|
|
|
|
{name: "甘肃", value: 56},
|
|
|
|
|
{name: "青海", value: 10},
|
|
|
|
|
{name: "宁夏", value: 18},
|
|
|
|
|
{name: "新疆", value: 67},
|
|
|
|
|
{name: "广东", value: 123},
|
|
|
|
|
{name: "广西", value: 59},
|
|
|
|
|
{name: "海南", value: 14},
|
|
|
|
|
],
|
|
|
|
|
chartData: [...(chinaMap.features.map(e => {
|
|
|
|
|
return {
|
|
|
|
|
name: e.properties.name,
|
|
|
|
|
value: Math.random() * 200
|
|
|
|
|
}
|
|
|
|
|
})), {
|
|
|
|
|
name: '南海诸岛',
|
|
|
|
|
value: Math.random() * 200
|
|
|
|
|
}],
|
|
|
|
|
toolTipData: [
|
|
|
|
|
{
|
|
|
|
|
"name": "北京",
|
|
|
|
|
@ -324,6 +302,7 @@ export default {
|
|
|
|
|
this.initChart()
|
|
|
|
|
this.initCarChart()
|
|
|
|
|
this.initTyreChart()
|
|
|
|
|
this.getErrInfo()
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
@ -372,7 +351,7 @@ export default {
|
|
|
|
|
geo: {
|
|
|
|
|
show: true,
|
|
|
|
|
map: this.mapName,
|
|
|
|
|
zoom:1.2,
|
|
|
|
|
zoom: 1.2,
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
show: false
|
|
|
|
|
@ -404,7 +383,6 @@ export default {
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
formatter: (e) => {
|
|
|
|
|
console.log(e)
|
|
|
|
|
return e.data.name
|
|
|
|
|
},
|
|
|
|
|
position: 'right',
|
|
|
|
|
@ -424,7 +402,7 @@ export default {
|
|
|
|
|
type: 'map',
|
|
|
|
|
map: 'china',
|
|
|
|
|
geoIndex: 0,
|
|
|
|
|
zoom:1.6,
|
|
|
|
|
zoom: 1.6,
|
|
|
|
|
aspectScale: 0.75, //长宽比
|
|
|
|
|
showLegendSymbol: false, // 存在legend时显示
|
|
|
|
|
label: {
|
|
|
|
|
@ -639,18 +617,31 @@ export default {
|
|
|
|
|
],
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
getErrInfo(){
|
|
|
|
|
if( typeof(WebSocket) != "function" ) {
|
|
|
|
|
getErrInfo() {
|
|
|
|
|
if (typeof (WebSocket) != "function") {
|
|
|
|
|
alert("您的浏览器不支持Websocket通信协议")
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const getWebsocket = () => {
|
|
|
|
|
let websocket = new WebSocket("ws://10.11.41.249:8080/websocket/message")
|
|
|
|
|
websocket.onopen = function (event) {
|
|
|
|
|
console.log("服务已连接")
|
|
|
|
|
};
|
|
|
|
|
websocket.onmessage = function (event) {
|
|
|
|
|
console.log(event)
|
|
|
|
|
}
|
|
|
|
|
websocket.onerror = function () {
|
|
|
|
|
setTimeout(getWebsocket, 1000)
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
getWebsocket()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style>
|
|
|
|
|
.indexBg{
|
|
|
|
|
background-image:url('../assets/images/indexBg.jpg');
|
|
|
|
|
.indexBg {
|
|
|
|
|
background-image: url('../assets/images/indexBg.jpg');
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
