549 lines
14 KiB
Vue
549 lines
14 KiB
Vue
|
<!--
|
|||
|
|
* @Author: hisense.xiaoshangqing
|
|||
|
|
* @Date: 2022-7-26 10:00:48
|
|||
|
|
* @LastEditors: xiaoshangqing
|
|||
|
|
* @LastEditTime: 2022-07-27 16:56:55
|
|||
|
|
* @Description: 水库专题首页缩略图 -->
|
|||
|
|
<template>
|
|||
|
|
<div class="river-course-view">
|
|||
|
|
<div ref="qdCityMap" class="city-map-content-echarts"></div>
|
|||
|
|
<div class="topic-animation1 display-animation1"></div>
|
|||
|
|
<div class="topic-animation2 display-animation2"></div>
|
|||
|
|
<div class="topic-animation3 display-animation3"></div>
|
|||
|
|
<div class="topic-animation4 display-animation4"></div>
|
|||
|
|
<div class="topic-animation5 display-animation5"></div>
|
|||
|
|
<div class="topic-animation6 display-animation6"></div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|||
|
|
//例如：import 《组件名称》 from '《组件路径》';
|
|||
|
|
import axios from 'axios'
|
|||
|
|
const echarts = require("echarts");
|
|||
|
|
export default {
|
|||
|
|
//import引入的组件需要注入到对象中才能使用
|
|||
|
|
components: {},
|
|||
|
|
data() {
|
|||
|
|
//这里存放数据
|
|||
|
|
return {
|
|||
|
|
|
|||
|
|
districtData: [
|
|||
|
|
{
|
|||
|
|
name: "市南区",
|
|||
|
|
value: [120.395966, 36.070892],
|
|||
|
|
num:232,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "市北区",
|
|||
|
|
value: [120.355026, 36.083819],
|
|||
|
|
num:232,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "李沧区",
|
|||
|
|
value: [120.421236, 36.160023],
|
|||
|
|
num:232,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "崂山区",
|
|||
|
|
value: [120.467393, 36.102569],
|
|||
|
|
num:232,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "城阳区",
|
|||
|
|
value: [120.389135, 36.306833],
|
|||
|
|
num:232,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "即墨区",
|
|||
|
|
value: [120.447352, 36.390847],
|
|||
|
|
num:232,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "莱西市",
|
|||
|
|
value: [120.526226, 36.86509],
|
|||
|
|
num:232,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "胶州市",
|
|||
|
|
value: [120.006202, 36.285878],
|
|||
|
|
num:232,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "平度市",
|
|||
|
|
value: [119.959012, 36.788828],
|
|||
|
|
num:232,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "西海岸",
|
|||
|
|
value: [119.995518, 35.875138],
|
|||
|
|
num:232,
|
|||
|
|
},
|
|||
|
|
],//青岛市区划坐标数据
|
|||
|
|
reservoirTypeArr:[
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
type: "warning",
|
|||
|
|
name: "超汛限",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
type: "normal",
|
|||
|
|
name: "正常",
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
// 1、菜单切换功能
|
|||
|
|
tabs: [
|
|||
|
|
{ name: "降雨量图" },
|
|||
|
|
{ name: "人口热力图" },
|
|||
|
|
{ name: "水库等级图" },
|
|||
|
|
{ name: "水库告警分布" },
|
|||
|
|
],
|
|||
|
|
selectedTabIndex: 3,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
//监听属性 类似于data概念
|
|||
|
|
computed: {},
|
|||
|
|
//监控data中的数据变化
|
|||
|
|
watch: {},
|
|||
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|||
|
|
created() {},
|
|||
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|||
|
|
mounted() {
|
|||
|
|
this.findAllInfo();
|
|||
|
|
// this.initMap();
|
|||
|
|
},
|
|||
|
|
//方法集合
|
|||
|
|
methods: {
|
|||
|
|
findAllInfo(){
|
|||
|
|
let data=this.districtData
|
|||
|
|
// let result=[]
|
|||
|
|
// for(let i=0;i<data.length;i++){
|
|||
|
|
// let value=[]
|
|||
|
|
// let d=res.data.data[i]
|
|||
|
|
// value.push(d["longitude"])
|
|||
|
|
// value.push(d["latitude"])
|
|||
|
|
// d["value"]=value
|
|||
|
|
// }
|
|||
|
|
this.initMap(data)
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
initMap(data) {
|
|||
|
|
this.loadedDataUrl = "./static/qingdao.json";
|
|||
|
|
let _this=this
|
|||
|
|
axios.get(_this.loadedDataUrl, {}) .then(geoJson =>{
|
|||
|
|
|
|||
|
|
_this.myChart = echarts.init(_this.$refs.qdCityMap);
|
|||
|
|
echarts.registerMap("qingdao", geoJson.data);
|
|||
|
|
const imgBack = new Image();
|
|||
|
|
imgBack.src = "./static/assets/map-back.png";
|
|||
|
|
const img = new Image();
|
|||
|
|
img.src = "./static/assets/echarts-map-bak.png";
|
|||
|
|
const typeImg = new Image();
|
|||
|
|
typeImg.src = "./static/assets/reservoir-type-bak.png";
|
|||
|
|
|
|||
|
|
_this.option = {
|
|||
|
|
visualMap: {
|
|||
|
|
show: false,
|
|||
|
|
max: 100,
|
|||
|
|
seriesIndex: 1,
|
|||
|
|
inRange: {
|
|||
|
|
color: ["#000000", "yellow", "pink"],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
geo: [
|
|||
|
|
{
|
|||
|
|
map: "qingdao",
|
|||
|
|
roam: true, // 是否允许缩放
|
|||
|
|
aspectScale: 0.8,
|
|||
|
|
zoom: 1.1, // 默认显示级别
|
|||
|
|
top: 100,
|
|||
|
|
z: 6,
|
|||
|
|
label: {
|
|||
|
|
show: true, //是否显示市
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#ffffff", //文字颜色
|
|||
|
|
fontSize: 16, //文字大小
|
|||
|
|
fontFamily: "微软雅黑",
|
|||
|
|
backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
borderColor: "#25e8ff",
|
|||
|
|
borderWidth: 2,
|
|||
|
|
/* areaColor: "#004d8e", //rgba设置透明度0
|
|||
|
|
shadowColor: "#10daff",
|
|||
|
|
shadowBlur: 10,
|
|||
|
|
shadowOffsetX: 10,
|
|||
|
|
opacity: 0.53, */
|
|||
|
|
areaColor: {
|
|||
|
|
image: img,
|
|||
|
|
repeat: "repeat",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
disabled: false,
|
|||
|
|
focus: "none",
|
|||
|
|
itemStyle: {
|
|||
|
|
color: null,
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
//color: "#fff",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
map: "qingdao",
|
|||
|
|
aspectScale: 0.8,
|
|||
|
|
roam: true, // 是否允许缩放
|
|||
|
|
zoom: 1.1, // 默认显示级别
|
|||
|
|
top: 105,
|
|||
|
|
z: 4,
|
|||
|
|
itemStyle: {
|
|||
|
|
areaColor: "#1864a5",
|
|||
|
|
borderColor: "transparent",
|
|||
|
|
},
|
|||
|
|
silent: true,
|
|||
|
|
tooltip: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
map: "qingdao",
|
|||
|
|
aspectScale: 0.8,
|
|||
|
|
roam: true, // 是否允许缩放
|
|||
|
|
zoom: 1.1, // 默认显示级别
|
|||
|
|
top: 110,
|
|||
|
|
z: 3,
|
|||
|
|
itemStyle: {
|
|||
|
|
areaColor: "#1864a5",
|
|||
|
|
borderColor: "transparent",
|
|||
|
|
borderWidth: 2,
|
|||
|
|
},
|
|||
|
|
silent: true,
|
|||
|
|
tooltip: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
map: "qingdao",
|
|||
|
|
aspectScale: 0.8,
|
|||
|
|
roam: true, // 是否允许缩放
|
|||
|
|
zoom: 1.1, // 默认显示级别
|
|||
|
|
top: 115,
|
|||
|
|
z: 2,
|
|||
|
|
itemStyle: {
|
|||
|
|
areaColor: "#1864a5",
|
|||
|
|
//borderColor: "#0f3866",
|
|||
|
|
borderColor: "transparent",
|
|||
|
|
borderWidth: 1,
|
|||
|
|
shadowColor: "#808080", // 外部阴影
|
|||
|
|
shadowBlur: "10",
|
|||
|
|
},
|
|||
|
|
silent: true,
|
|||
|
|
tooltip: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
// {
|
|||
|
|
// tooltip: {
|
|||
|
|
// show: false,
|
|||
|
|
// },
|
|||
|
|
// type: "effectScatter",
|
|||
|
|
// coordinateSystem: "geo",
|
|||
|
|
// rippleEffect: {
|
|||
|
|
// scale: 3,
|
|||
|
|
// brushType: "stroke",
|
|||
|
|
// },
|
|||
|
|
// showEffectOn: "render",
|
|||
|
|
// itemStyle: {
|
|||
|
|
// normal: {
|
|||
|
|
// shadowColor: "#ffffff",
|
|||
|
|
// shadowBlur: 10,
|
|||
|
|
// shadowOffsetX: 0,
|
|||
|
|
// shadowOffsetY: 0,
|
|||
|
|
// color: "#df1818",
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
// label: {
|
|||
|
|
// normal: {
|
|||
|
|
// color: "#fff",
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
// symbol: "circle",
|
|||
|
|
// symbolSize: [10, 5],
|
|||
|
|
// data:data, //地标闪烁小圆点
|
|||
|
|
// zlevel: 1,
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// type: "scatter",
|
|||
|
|
// coordinateSystem: "geo",
|
|||
|
|
// symbol: function (value, params) {
|
|||
|
|
// return 'image://static/assets/warning-reservoir.png';
|
|||
|
|
// },
|
|||
|
|
// symbolSize: [25, 35],
|
|||
|
|
// symbolOffset: [0, -20],
|
|||
|
|
// z: 9999,
|
|||
|
|
// data:data, //企业图片
|
|||
|
|
// },
|
|||
|
|
{
|
|||
|
|
type: 'scatter',
|
|||
|
|
coordinateSystem: 'geo',
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
formatter: function (params) {
|
|||
|
|
var name = params.data.num;
|
|||
|
|
var text = `{fline|${name}}`;
|
|||
|
|
return text;
|
|||
|
|
},
|
|||
|
|
color: '#fff',
|
|||
|
|
rich: {
|
|||
|
|
fline: {
|
|||
|
|
padding: [0, 25],
|
|||
|
|
color: '#dcc52f',
|
|||
|
|
textShadowColor: '#030615',
|
|||
|
|
textShadowBlur: '0',
|
|||
|
|
textShadowOffsetX: 1,
|
|||
|
|
textShadowOffsetY: 1,
|
|||
|
|
fontSize: 14,
|
|||
|
|
fontWeight: 400,
|
|||
|
|
},
|
|||
|
|
tline: {
|
|||
|
|
padding: [0, 27],
|
|||
|
|
color: '#afd31d',
|
|||
|
|
fontSize: 12,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
show: true,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#e3e00a',
|
|||
|
|
},
|
|||
|
|
symbol: "image://static/assets/reservoir-type-bak.png",
|
|||
|
|
symbolSize: [84, 28],
|
|||
|
|
symbolOffset: [0, -20],
|
|||
|
|
z: 999,
|
|||
|
|
data: data, //企业名称
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
_this.myChart.setOption(_this.option);
|
|||
|
|
_this.myChart.on("click", (params) => {
|
|||
|
|
// console.log("点的是什么", params);
|
|||
|
|
// //进入对应区的三维地图
|
|||
|
|
// //跟右下角菜单切换触发调用方法一样，但是要传递区划参数，区划name
|
|||
|
|
// const index = _this.districtData.findIndex((item) => {
|
|||
|
|
// return item.name === params.name ;
|
|||
|
|
// });
|
|||
|
|
// //console.log('rrrrrrrr5555',index);
|
|||
|
|
// let districtObject = {
|
|||
|
|
// name:params.name,
|
|||
|
|
// longitude:_this.districtData[index].value[0],
|
|||
|
|
// latitude:_this.districtData[index].value[1],
|
|||
|
|
// };
|
|||
|
|
// _this.$emit('jumpIntoMap',districtObject);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
beforeCreate() {}, //生命周期 - 创建之前
|
|||
|
|
beforeMount() {}, //生命周期 - 挂载之前
|
|||
|
|
beforeUpdate() {}, //生命周期 - 更新之前
|
|||
|
|
updated() {}, //生命周期 - 更新之后
|
|||
|
|
beforeDestroy() {}, //生命周期 - 销毁之前
|
|||
|
|
destroyed() {}, //生命周期 - 销毁完成
|
|||
|
|
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style lang='less' scoped>
|
|||
|
|
//@import url(); 引入公共css类
|
|||
|
|
|
|||
|
|
.river-course-view {
|
|||
|
|
position: relative;
|
|||
|
|
width:100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: url("~@/assets/common/homePage/big-bak.png") no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
.city-map-content-echarts {
|
|||
|
|
width: 11rem;
|
|||
|
|
height: 9rem;
|
|||
|
|
top: 80px;
|
|||
|
|
left: 400px;
|
|||
|
|
bottom: 60px;
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 1000;
|
|||
|
|
}
|
|||
|
|
.map-menu {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 486px;
|
|||
|
|
bottom: 10px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items:flex-end;
|
|||
|
|
pointer-events: none;
|
|||
|
|
z-index:99999;
|
|||
|
|
.map-tab {
|
|||
|
|
// 1、菜单切换功能
|
|||
|
|
display: flex;
|
|||
|
|
pointer-events: auto;
|
|||
|
|
.tab-item {
|
|||
|
|
flex: 1;
|
|||
|
|
cursor: pointer;
|
|||
|
|
min-width: 1.4rem;
|
|||
|
|
height: 30px;
|
|||
|
|
line-height: 30px;
|
|||
|
|
text-align: center;
|
|||
|
|
border: 1px solid #2ab1e9;
|
|||
|
|
border-left: 0;
|
|||
|
|
font-size: 16px;
|
|||
|
|
padding: 0px 20px;
|
|||
|
|
background-color: #0d284f;
|
|||
|
|
color: #35cffc;
|
|||
|
|
&.active {
|
|||
|
|
color: #fefefe;
|
|||
|
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #1eafda);
|
|||
|
|
}
|
|||
|
|
&:first-child {
|
|||
|
|
border-left: 1px solid #2ab1e9;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.reservoirType-list{
|
|||
|
|
position: absolute;
|
|||
|
|
right: 486px;
|
|||
|
|
width: 122px;
|
|||
|
|
height: 100px;
|
|||
|
|
top: 164px;
|
|||
|
|
padding: 10px 0 0 10px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
background-color: rgba(13,40,79,0.5);
|
|||
|
|
border:1px solid #0d284f;
|
|||
|
|
padding-top:22px;
|
|||
|
|
.type-legend{
|
|||
|
|
margin-bottom:20px;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
display:flex;
|
|||
|
|
flex-direction:row;
|
|||
|
|
.legend-color{
|
|||
|
|
width:12px;
|
|||
|
|
height:12px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 12px;
|
|||
|
|
}
|
|||
|
|
.color-normal{
|
|||
|
|
background-color:#00ebac ;
|
|||
|
|
}
|
|||
|
|
.color-warning{
|
|||
|
|
background-color:#ff3537 ;
|
|||
|
|
}
|
|||
|
|
.legend-text{
|
|||
|
|
margin-left: 10px;
|
|||
|
|
span{
|
|||
|
|
color:#ffffff;
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.topic-animation1 {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: absolute;
|
|||
|
|
|
|||
|
|
margin: 0px auto;
|
|||
|
|
background-image: url("~@/assets/common/homePage/animation1.png");
|
|||
|
|
background-size: cover;
|
|||
|
|
}
|
|||
|
|
.display-animation1 {
|
|||
|
|
animation: topup1 5s linear 1s infinite;
|
|||
|
|
}
|
|||
|
|
.topic-animation2 {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: absolute;
|
|||
|
|
|
|||
|
|
margin: 0px auto;
|
|||
|
|
background-image: url("~@/assets/common/homePage/animation2.png");
|
|||
|
|
background-size: cover;
|
|||
|
|
}
|
|||
|
|
.display-animation2 {
|
|||
|
|
animation: topup1 5s linear 2s infinite;
|
|||
|
|
}
|
|||
|
|
.topic-animation3 {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: absolute;
|
|||
|
|
|
|||
|
|
margin: 0px auto;
|
|||
|
|
background-image: url("~@/assets/common/homePage/animation3.png");
|
|||
|
|
background-size: cover;
|
|||
|
|
}
|
|||
|
|
.display-animation3 {
|
|||
|
|
animation: topup1 5s linear 3s infinite;
|
|||
|
|
}
|
|||
|
|
.topic-animation4 {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: absolute;
|
|||
|
|
|
|||
|
|
margin: 0px auto;
|
|||
|
|
background-image: url("~@/assets/common/homePage/animation4.png");
|
|||
|
|
background-size: cover;
|
|||
|
|
}
|
|||
|
|
.display-animation4 {
|
|||
|
|
animation: topup1 5s linear infinite;
|
|||
|
|
}
|
|||
|
|
.topic-animation5 {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: absolute;
|
|||
|
|
|
|||
|
|
margin: 0px auto;
|
|||
|
|
background-image: url("~@/assets/common/homePage/animation5.png");
|
|||
|
|
background-size: cover;
|
|||
|
|
}
|
|||
|
|
.display-animation5 {
|
|||
|
|
animation: topup1 5s linear 4s infinite;
|
|||
|
|
}
|
|||
|
|
.topic-animation6 {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: absolute;
|
|||
|
|
|
|||
|
|
margin: 0px auto;
|
|||
|
|
background-image: url("~@/assets/common/homePage/animation6.png");
|
|||
|
|
background-size: cover;
|
|||
|
|
}
|
|||
|
|
.display-animation6 {
|
|||
|
|
animation: topup1 5s linear infinite;
|
|||
|
|
}
|
|||
|
|
@keyframes topup1 {
|
|||
|
|
from {
|
|||
|
|
top: 0%;
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
top: -100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|