gangkou/ruoyi-ui/src/views/home/components/middle.vue

244 lines
6.7 KiB
Vue

<template>
<div class="reservoir-survey1">
<!-- 最上面 密封点概况-->
<div class="reservoir-top">
<third-title title="港口信息">
</third-title>
<div class="beautified-div">
<div ref="chart" style="width:100%; height: 600px;"></div>
</div>
<!-- <div>油气回收在线监测设备</div>
<dv-scroll-board :config="config" style="width:100%;height:170px" />
</div>
<div class="beautified-div">
<div>厂内移动式设备</div>
<dv-scroll-board :config="config1" style="width:100%;height:170px" />
</div>
<div class="beautified-div">
<div>厂界在线监测设备</div>
<dv-scroll-board :config="config2" style="width:100%;height:170px" />
</div> -->
</div>
</div>
</template>
<script>
import store from "@/store";
import ThirdTitle from "./ThirdTitle.vue";
import * as echarts from 'echarts';
import axios from 'axios'
export default {
//import引入的组件需要注入到对象中才能使用
components: {
ThirdTitle
},
created() {
},
mounted() {
this.initChart();
},
data() {
//这里存放数据
return {
loadedDataUrl:'./static/shandong.json',
chart: null,
// 准备山东省的 geoJSON 数据
shandongGeoJSON: null,
points : [
{ name: '青岛港', value: [120.345089,36.109947], list: []},
{ name: '日照港', value: [119.561732,35.382109], list: []},
{ name: '烟台港', value: [121.40541,37.562686], list: [] },
{ name: '渤海湾港', value: [119.219496,36.71416], list: []}
],
};
},
methods: {
async initChart() {
// 获取山东省的 geoJSON 数据
axios.get(this.loadedDataUrl, {}).then((geoJson) => {
// 注册山东省的地图
echarts.registerMap('shandong', geoJson.data);
// 初始化 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 地图标注的 4 个点信息(名称、坐标)
const points = [
{ name: '青岛港', value: [120.345089, 36.109947], list: [] },
{ name: '日照港', value: [119.561732, 35.382109], list: [] },
{ name: '烟台港', value: [121.40541, 37.562686], list: [] },
{ name: '渤海湾港', value: [119.219496, 36.71416], list: [] }
];
// 动态生成每个点的 list 数据
points.forEach(point => {
point.list = Array.from({ length: 10 }, (_, index) => ({
factoryName: `${point.name}工厂${index + 1}`,
avgValue: (Math.random() * 100).toFixed(2)
}));
});
// 设置 ECharts 的配置项
const option = {
backgroundColor: '#1b1b1b', // 设置背景色
tooltip: {
trigger: 'item',
formatter: (params) => {
if (params.componentType === 'series') {
const point = points.find(p => p.name === params.name);
if (point) {
return `
<div style="width: 250px; padding: 10px; background-color: rgba(255, 255, 255, 0.9); border-radius: 8px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);">
<div style="display: flex; justify-content: space-between; font-weight: bold; color: #333;">
<div style="width: 200px;">企业名</div>
<div style="width: 50px;">平均值</div>
</div>
<div style="margin-top: 5px;">
${point.list.map(f => `
<div style="display: flex; justify-content: space-between; margin-bottom: 5px; color: #FF8C00;">
<div style="width: 200px;">${f.factoryName}</div>
<div style="width: 50px;">${f.avgValue}</div>
</div>
`).join('')}
</div>
</div>`;
}
}
return ''; // 返回空以防其他情况
}
},
geo: {
map: 'shandong', // 使用山东省地图
center: [120.3, 36.1], // 设置地图中心
zoom: 2, // 放大地图
roam: true, // 开启缩放和拖动
label: {
show: false, // 不显示地图标签
},
itemStyle: {
areaColor: '#B1D0FC', // 地图区域颜色
borderColor: '#111', // 地图边界颜色
borderWidth: 1,
},
emphasis: {
itemStyle: {
areaColor: '#FFD700', // 鼠标悬停时的区域颜色
},
},
},
series: [
{
name: '港口',
type: 'scatter',
coordinateSystem: 'geo',
data: points,
symbolSize: 20, // 标记点的大小
itemStyle: {
color: '#FFD700', // 使用黄色标记点
},
label: {
show: true,
formatter: '{b}', // 标签显示名称
position: 'right',
color: '#FF8C00', // 橙黄色
fontWeight: 'bold', // 加粗
fontSize:24,
},
emphasis: {
label: {
show: true,
color: '#FFD700', // 鼠标悬停时的标签颜色
fontSize: 16, // 增加悬停时标签的字体大小
},
},
},
],
};
// 渲染图表
this.chart.setOption(option);
});
}
}
};
</script>
<style lang='scss' scoped>
@keyframes turn {
0% {
border-image: linear-gradient(to right, #003194, #00ffea) 1;
}
25% {
border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
}
50% {
border-image: linear-gradient(to left, #003194, #00ffea) 1;
}
75% {
border-image: linear-gradient(to top, #003194, #00ffea) 1;
}
100% {
border-image: linear-gradient(to right, #003194, #00ffea) 1;
}
}
.reservoir-survey1 {
width: 100%;
color: #f0fafa;
font-size: 16px;
display: flex;
flex-direction: column;
.reservoir-top {
height: 760px;
background: rgba(0, 108, 188, 0.2);
border-radius: 2px;
border: 1px solid rgba(0, 108, 188, 0.7);
// background-color: #183c77;
padding: 10px;
// height: 600px;
display: flex;
flex-direction: column;
.beautified-div {
height: 620px;
background-color: rgba(29, 168, 210, 0.2); /* 背景颜色 */
border: 1px solid #1da8d2; /* 边框颜色 */
border-radius: 8px; /* 圆角 */
padding: 15px 25px; /* 内边距 */
margin: 5px; /* 外边距 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
font-size: 18px; /* 字体大小 */
text-align: center; /* 文本居中 */
transition: all 0.3s ease; /* 动画过渡 */
}
}
.reservoir-top:hover {
border: 2px solid;
animation: turn 5s linear infinite;
}
}
</style>