cockpit.git - Gitblit

			@@ -8,7 +8,9 @@

			<script>
			import * as echarts from 'echarts';

			import {
			getAllMapOutlineAction,
			} from "../../assets/js/api";
			export default {
			name: "chinaMap",
			chart: "",
			@@ -41,307 +43,38 @@
			}
			},
			methods: {
			setOption(opt) {
			// 设置配置项
			this.$options.chart.setOption(opt);

			},
			setData(data) {
			console.log(data);
			let geoJson = require(`../../../public/mapJson/zhongguo.json`);
			echarts.registerMap('china', geoJson);
			let newarr = [
			{
			name: "武汉",//武汉
			value: [113.41, 31.22, 100],
			color:"#f44336",
			curveness:'-1',
			linesColor:"#fff",
			arrowColor:"#000"

			},
			{
			name: "佛山",//佛山
			value: [113.122717, 23.028762],
			color:"#4AFD88",
			curveness:'-0.2',
			linesColor:"#4AFD88",
			arrowColor:"#4AFD88"
			},

			{
			name: "福州",//福州
			value: [118.28, 26.08],
			color:"#fff100",
			curveness:'-0.2',
			linesColor:"#FFF100",
			arrowColor:"#FFF100"
			},
			{
			name: "长春",//长春
			value: [125.35, 43.88],
			color:"#ECA0BA",
			curveness:'-0.2',
			linesColor:"#00FEFF",
			arrowColor:"#F8A036",
			borderColor:"#F8A036"
			},
			{
			name: "天津",//天津
			value: [117.04, 39.33],
			color:"#4AFD88",
			curveness:'0.2',
			linesColor:"#4AFD88",
			arrowColor:"#4AFD88"
			},
			{
			name: "太原",//太原
			value: [112.30, 37.99],
			color:"#fff100",
			curveness:'0.2',
			linesColor:"#FFF100",
			arrowColor:"#FFF100"
			},
			{
			name: "银川",//银川
			value: [106.26667, 37.46667],
			color:"#4AFD88",
			curveness:'0.2',
			linesColor:"#4AFD88",
			arrowColor:"#1A6BF0"
			},

			];
			let LableData = [];
			let series = [
			// 常规地图
			{
			type: 'map',
			mapType: 'china',
			aspectScale: 0.85,
			layoutCenter: ["50%", "65%"], //地图位置
			layoutSize: '130%',
			zoom: 1, //当前视角的缩放比例
			// roam: true, //是否开启平游或缩放
			scaleLimit: { //滚轮缩放的极限控制
			min: 1,
			max: 2
			},
			// 默认选中的数据
			data:[
			{name:'广东',selected:true},
			{name:'湖北',selected:true},
			{name:'山西',selected:true},
			{name:'吉林',selected:true},
			{name:'福建',selected:true},
			{name:'宁夏',selected:true},
			],
			itemStyle: {
			normal: {
			areaColor: '#00B2E0',
			borderColor: '#021651',
			borderWidth: 1


			},
			emphasis: {
			areaColor: '#1A6BF0',
			label: {
			color: "#fff"
			}

			}
			},


			},

			{

			type: 'lines',
			zlevel: 3,
			symbol: 'circle',
			symbolSize: [5, 5],
			color: '#ff8003',
			opacity: 1,
			label: {
			show: true,
			padding: [10, 20],
			color: '#fff',
			backgroundColor: "#1a3961",
			borderColor: '#aee9fb',
			borderWidth: 1,
			borderRadius: 6,
			formatter(params) {
			console.log(params)
			let arr = [params.name, "上行：" + params.value[1] + "G/s", "下行：" + params.value[0] + "G/s"];
			return arr.join("\n")
			},
			textStyle: {
			align: 'left',
			lineHeight: 20,
			}
			},
			lineStyle: {
			type: 'solid',
			color: '#fff',
			width: 0.5,
			opacity: 1,

			},
			data: LableData,


			},
			];
			newarr.forEach(item=>{
			series.push( // 区域散点图
			{
			type: 'effectScatter',
			coordinateSystem: 'geo',
			zlevel: 12,
			symbolSize: 10,
			rippleEffect: { //坐标点动画
			period: 3,
			scale: 5,
			brushType: 'fill'
			},
			label: {
			normal: {
			show: true,
			position: 'right',
			formatter: '{b}',
			color: '#fff',
			fontWeight: "bold",
			fontSize: 13
			}
			},

			data: [
			{
			name: item.name,
			value: item.value
			}
			],
			itemStyle: { //坐标点颜色
			normal: {
			show: true,
			color: item.color,
			borderColor:item.borderColor?item.borderColor:'none',
			shadowBlur: 1,
			shadowColor: '#fff'
			},
			emphasis: {
			areaColor: '#f00'
			}
			},

			});
			if(item.name !="武汉"){
			series.push(
			// 线和点
			{
			name: item.name,
			type: 'lines',
			zlevel: 2,
			effect: {
			show: true,
			period: 5,//流动速度越小越快
			trailLength: 0.7,
			color: item.arrowColor, //流动点颜色
			symbol: 'arrow',
			symbolSize: 6
			},
			lineStyle: {
			normal: {
			color: item.linesColor,//线的颜色
			width: 1.5,
			opacity: 0.8,
			curveness: item.curveness
			}
			},
			data: [{
			fromName: "武汉",
			toName: item.name,
			coords:[
			[ 113.41, 31.22 ],
			item.value
			]
			}]

			},
			)
			getAllMapOutlineAction() {
			//查询激活轮廓图
			getAllMapOutlineAction().then((res) => {
			let rs = JSON.parse(res.data.result);
			if (rs.code == 1) {
			let data = rs.data;
			data.map((item, index) => {
			if (item.status == 1) {
			this.mapName = item.name;
			}
			});
			}
			})
			let option = {
			// backgroundColor: '#000f1e',
			geo: {
			map: 'china',
			aspectScale: 0.85,
			layoutCenter: ["50%", "65%"], //地图位置
			layoutSize: '130%',
			itemStyle: {
			normal: {
			shadowColor: '#276fce',
			shadowOffsetX: 0,
			shadowOffsetY: 15,
			opacity: 0.5,
			},
			emphasis: {
			areaColor: '#276fce',

			}
			},
			regions: [
			{
			name: '南海诸岛',
			itemStyle: {
			areaColor: 'rgba(0, 10, 52, 1)',

			borderColor: 'rgba(0, 10, 52, 1)',
			normal: {
			opacity: 0,
			label: {
			show: false,
			color: "#009cc9",
			}
			},
			},
			label: {
			show: false,
			color: '#FFFFFF',
			fontSize: 12,
			},
			},
			],

			},
			series: series
			};
			this.$nextTick(function(){
			this.setOption(option);
			})

			if (!this.mapName) {
			this.mapStyle = "百度地图";
			}
			this.mapNameCopy = this.mapName;
			this.$nextTick(() => {
			// this.initPage();
			});
			})
			.catch((err) => {
			console.log(err);
			});
			},
			resize() {
			let self = this;
			setTimeout(() => {
			self.$options.chart.resize();
			self.setData(null);
			}, 300)
			// this.$options.chart.resize();
			}
			},
			mounted() {
			this.$nextTick(function(){
			// 基于准备好的dom，初始化echarts实例
			this.$options.chart = echarts.init(this.$refs.chinaMap);
			window.addEventListener('resize', this.resize);
			})
			// 初始化页面
			this.getAllMapOutlineAction();

			},
			destroyed() {
			window.removeEventListener('resize', this.resize);

			}
			}
			</script>

	src/assets/js/api.js	15 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/js/axios.js	10 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/charts/chinaMap.vue	323 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

			@@ -132,4 +132,17 @@
			url: "/batteryAlarm/monCapacity",
			params: data
			})
			}
			}

			/**
			* 首页地图json数据配置查询关联地图
			* 参数： json={"id":id}
			*/
			export const getAllMapOutlineAction = (data) => {
			return axios({
			method: "post",
			url: "MapOutlineAction!getAll",
			data: 'json=' + JSON.stringify(data),
			asy:1
			});
			};

			@@ -11,6 +11,16 @@
			}
			// 添加请求拦截器
			axios.interceptors.request.use(function (config) {
			if(config.asy){
			if (process.env.NODE_ENV == 'dev') {
			// 跨域请求
			config.baseURL = 'http://localhost:8919/fg';
			config.withCredentials = true; // 保持请求头
			} else {
			config.baseURL = '/fg';
			config.withCredentials = true; // 保持请求头
			}
			}
			// 在发送请求之前做些什么
			return config;
			}, function (error) {