503 lines
15 KiB
Vue
503 lines
15 KiB
Vue
<!--
|
||
* @Author: hisense.xiaoshangqing
|
||
* @Date: 2022-7-26 10:00:48
|
||
* @LastEditors: hisense.wuhongjian
|
||
* @LastEditTime: 2022-11-29 11:47:26
|
||
* @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>
|
||
import { getProvideDistrictFundStatement } from '@/api/assertReport'
|
||
import axios from 'axios'
|
||
const echarts = require('echarts')
|
||
export default {
|
||
//import引入的组件需要注入到对象中才能使用
|
||
components: {},
|
||
data() {
|
||
//这里存放数据
|
||
return {
|
||
districtData: [
|
||
{
|
||
name: '市南区',
|
||
value: [120.395966, 36.000892],
|
||
},
|
||
{
|
||
name: '市北区',
|
||
value: [120.355026, 36.083819],
|
||
},
|
||
{
|
||
name: '李沧区',
|
||
value: [120.421236, 36.188023],
|
||
},
|
||
{
|
||
name: '崂山区',
|
||
value: [120.587393, 36.199569],
|
||
},
|
||
{
|
||
name: '城阳区',
|
||
value: [120.369135, 36.266833],
|
||
},
|
||
{
|
||
name: '即墨区',
|
||
value: [120.517352, 36.490847],
|
||
},
|
||
{
|
||
name: '莱西市',
|
||
value: [120.426226, 36.86009],
|
||
},
|
||
{
|
||
name: '胶州市',
|
||
value: [120.010202, 36.235878],
|
||
},
|
||
{
|
||
name: '平度市',
|
||
value: [119.959012, 36.788828],
|
||
},
|
||
{
|
||
name: '西海岸新区',
|
||
value: [119.895518, 35.875138],
|
||
},
|
||
],
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
this.findAllInfo()
|
||
},
|
||
//方法集合
|
||
methods: {
|
||
findAllInfo() {
|
||
getProvideDistrictFundStatement().then((res) => {
|
||
let districtData = this.districtData
|
||
let resulrtData = res.data.data
|
||
for (let i = 0; i < resulrtData.length; i++) {
|
||
for (let j = 0; j < districtData.length; j++) {
|
||
if (resulrtData[i].districtName === districtData[j].name) {
|
||
districtData[j].num = resulrtData[i].applyPrice + '万'
|
||
}
|
||
}
|
||
}
|
||
console.log('上图数据', districtData)
|
||
this.initMap(districtData)
|
||
})
|
||
},
|
||
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: false, // 是否允许缩放
|
||
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: false, // 是否允许缩放
|
||
zoom: 1.1, // 默认显示级别
|
||
top: 105,
|
||
z: 4,
|
||
itemStyle: {
|
||
areaColor: '#1864a5',
|
||
borderColor: 'transparent',
|
||
},
|
||
silent: true,
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
map: 'qingdao',
|
||
aspectScale: 0.8,
|
||
roam: false, // 是否允许缩放
|
||
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, -30],
|
||
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() {}, //生命周期 - 更新之后
|
||
beforeUnmount() {}, //生命周期 - 销毁之前
|
||
unmounted() {}, //生命周期 - 销毁完成
|
||
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: 10rem;
|
||
height: 7.9rem;
|
||
top: 10px;
|
||
left: 500px;
|
||
bottom: 2rem;
|
||
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>
|