zmj
/
plantScreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

shit

This commit is contained in:
zmj 2023-12-04 18:22:08 +08:00
parent 7a0a7c63b0
commit 9c7ea2527d
7 changed files with 198 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

279
src/components/areaMap.vue
View File

@ -44,74 +44,96 @@ import { ref, onMounted } from "vue"
import axios from "axios";
import * as echarts from 'echarts';
import "echarts-gl"
// import geoJson from "/static/jsonData/xuantan.js"
import iconbg from '/static/index/mapicon.png'
import geoJson from "/static/jsonData/xuantan.js"
const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'
const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
const pointerFn = () => {
// console.log()
let list = []
geoJson.center.forEach((item, index) => {
list.push({
coord: item,
symbol: ('image://' + icon),// 自定义图片路径
symbolSize: [100, 30], // 图片大小
symbolOffset: ['50%', '-50%'],
value: geoJson.features[index].properties.name,
animation: true,
label: {
show: true,
color: 'white',
fontSize: 14,
},
},)
})
return list
}
// pointerFn()
onMounted(() => {
const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'
axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510500_full.json')
axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json')
.then(function (response) {
let geoJson = response.data
const dot = document.getElementById('img')
var mapName = 'lz';
let data = [
]
const myChart = document.getElementById("chart2")
/*获取地图数据*/
let option = {
geo: [
{
layoutSize: '100%',//大小
type: "map",
map: mapName,
aspectScale: 1,
zoom: 1.2,
layoutCenter: ["50%", "51%"],
layoutSize: "100%",
roam: false,
label:{
emphasis:{
show:false
}
},
show: true,
map: mapName,
roam: false,
zoom: 1.2,
layoutCenter: ["50%", "50%"],
aspectScale: 1,
label: {
normal: {
show: false,
textStyle: {
color: '#fff'
}
},
},
roam: false,
itemStyle: {
areaColor: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: "rgba(3,27,78,0.75)", // 0% 处的颜色
}, {
offset: 1,
color: "rgba(58,149,253,0.75)", // 50% 处的颜色
},],
global: true, // 缺省为 false
normal: {
areaColor: 'transparent',
},
borderColor: "#D2F2FC",
borderWidth: 2,
shadowColor: "#8cd3ef",
shadowOffsetY: 10,
shadowBlur: 120,
emphasis: {
areaColor: {
type: 'radial', // linear 线性渐变 radial径向渐变
x: 0.5, // 0.5为正中心，如果小于渐变中心靠左
y: 0.5, // 0.5为正中心，如果小于渐变中心靠上
r: 1,
colorStops: [
{
offset: 0, color: '#A46759' // 0% 处的颜色
},
{
offset: 0.1, color: '#A46759' // 0% 处的颜色
},
{
offset: 1, color: '#FFB821' // 100% 处的颜色
}],
}
// borderWidth: 0
}
},
},
@ -125,20 +147,7 @@ onMounted(() => {
layoutSize: "100%",
roam: false,
silent: true,
regions: [
{
name: "南海诸岛",
itemStyle: {
// 隐藏地图
normal: {
opacity: 0, // 为 0 时不绘制该图形
}
},
label: {
show: false // 隐藏文字
}
}
],
itemStyle: {
normal: {
borderWidth: 1,
@ -153,8 +162,6 @@ onMounted(() => {
},
{
type: "map",
map: mapName,
@ -178,13 +185,15 @@ onMounted(() => {
},
},
},
{
type: "map",
map: mapName,
zlevel: -2,
aspectScale: 1,
zoom: 1.2,
layoutCenter: ["50%", "52%"],
layoutCenter: ["50%", "53%"],
layoutSize: "100%",
roam: false,
silent: true,
@ -202,66 +211,17 @@ onMounted(() => {
},
},
// {
// type: "map",
// map: mapName,
// zlevel: -3,
// aspectScale: 1,
// zoom: 1.2,
// layoutCenter: ["50%", "53%"],
// layoutSize: "101%",
// roam: false,
// silent: true,
// regions: [
// {
// name: "南海诸岛",
// itemStyle: {
// // 隐藏地图
// normal: {
// opacity: 0, // 为 0 时不绘制该图形
// }
// },
// label: {
// show: false // 隐藏文字
// }
// }
// ],
// itemStyle: {
// normal: {
// borderWidth: 1,
// // borderColor: "rgba(11, 43, 97,0.8)",
// borderColor: "rgba(58,149,253,0.4)",
// shadowColor: "rgba(58,149,253,1)",
// shadowOffsetY: 15,
// shadowBlur: 10,
// areaColor: "transpercent",
// },
// },
// },
{
type: "map",
map: mapName,
zlevel: -4,
aspectScale: 1,
zoom: 1.2,
layoutCenter: ["50%", "53%"],
layoutCenter: ["50%", "54%"],
layoutSize: "100%",
roam: false,
silent: true,
regions: [
{
name: "南海诸岛",
itemStyle: {
// 隐藏地图
normal: {
opacity: 0, // 为 0 时不绘制该图形
}
},
label: {
show: false // 隐藏文字
}
}
],
itemStyle: {
normal: {
borderWidth: 5,
@ -280,63 +240,54 @@ onMounted(() => {
],
series: [
{
type: 'map',
map: mapName,
geoIndex: 0,
aspectScale: 1, //长宽比
showLegendSymbol: true,
roam: true,
label: {
show: true,
position: "top",
distance: -10,
formatter(params) {
return "2";
},
textStyle: {
// color: "transparent",
padding: [15, 20],
backgroundColor: {
image: '/static/index/aa.png',
},
// backgroundColor:""
},
},
animation: true,
markPoint: {
symbol: "none"
name: '资产数',
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
period: 4, //动画时间，值越小速度越快
brushType: 'fill', //波纹绘制方式 stroke, fill
scale: 12, //波纹圆环最大限制，值越大波纹越大
number: 2,
},
data: data,
// 发散点的大小
symbolSize: function (val) {
return 4
// return val[2] / 10;
},
markPoint: {
data:pointerFn()
},
data: (() => {
let data = {
资产数: geoJson.center
}
let finalData = []
Object.keys(data).map((i, index) => {
let child = data[i].map((row) => ({
value: row,
itemStyle: {
color: '#FFB922',
},
}))
finalData = [...finalData, ...child]
})
return finalData
})(),
},
],
};
echarts.registerMap(mapName, geoJson)
const bg = echarts.init(myChart)
bg.setOption(option);
})
})

3
src/view/detail.vue
View File

@ -282,7 +282,8 @@ const test = () => {
}
onMounted(() => {
document.getElementById("online").removeAttribute('_echarts_instance_');
document.getElementById("offline").removeAttribute('_echarts_instance_');
initCharts('online', options.onLine)
initCharts('offline', options.offLine)

18
src/view/index.vue
View File

@ -10,7 +10,6 @@
<div class="cont">
<div style="display: flex;justify-content: space-between;align-items: center;margin-top: 3vh;">
<img src="/static/index/JYZ.png" style="width: 2.8vw; height: 4vw;" alt="">
<div class="circle">
<img src="/static/detail/bk.png" class="act-img" alt="">
<div style="width: 110px;height: 110px;" class="online" id="online"></div>
@ -21,7 +20,6 @@
</div>
<img src="/static/index/JTY.png" style="width: 2.8vw; height: 4vw;" alt="">
</div>
<div class="eqNum">
<div>
<img src="/static/index/Q.png" alt="" style="transform: translateY(2px);"> 在线设备统计：<span
@ -50,12 +48,8 @@
style="font-size: 18px;margin-left: 1vw; ">45454</span> 块</div>
</div>
<div class="map">
<areaMap></areaMap>
</div>
</div>
<div class="bottom">
<warnPop v-if="showWarnPop" ref="ChildsDom" @off="showWarnPop = false"></warnPop>
@ -70,12 +64,12 @@
<div
style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 1vw;color: #CAD5E5;">
<div style="display: flex;align-items: center;">
<img src="/static/index/MC.png" style="width:1.5vw;height: 1.5vw;margin-right: 5px; "
<img src="/static/index/MC.png" style="width:1.7vw;height: 1.5vw;margin-right: 5px; "
alt="">
张伟
</div>
<div style="display: flex;align-items: center;">
<img src="/static/index/MC.png" style="width:1.5vw;height: 1.5vw;margin-right: 5px; "
<img src="/static/index/JS.png" style="width:1.7vw;height: 1.5vw;margin-right: 5px; "
alt="">
这是一名后端开发
</div>
@ -173,7 +167,6 @@ const config3 = reactive({
]
})
// 图表
const initCharts = (tag, option) => {
var chartDom = document.getElementById(tag);
@ -181,9 +174,7 @@ const initCharts = (tag, option) => {
myChart.setOption(option);
}
const ChildsDom = ref(null);
const showWarnPop = ref(false)
const hdClick = (e) => {
// console.log(e)
if (e.ceil) {
@ -192,7 +183,6 @@ const hdClick = (e) => {
}
}
}
const showWarnDeatil = ref(false)
const hdClick3 = (e) => {
if (e.ceil) {
@ -203,7 +193,6 @@ const hdClick3 = (e) => {
}
}
const test = () => {
router.replace('/detail')
}
@ -221,7 +210,8 @@ const scrollTableFn = () => {
}
onMounted(() => {
document.getElementById("online").removeAttribute('_echarts_instance_');
document.getElementById("offline").removeAttribute('_echarts_instance_');
scrollTableFn()
initCharts('online', options.onLine)
initCharts('offline', options.offLine)

BIN
static/index/JS.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
static/index/MC.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

0
static/index/地方标签@3x.png → static/index/mapicon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

78
static/jsonData/xuantan.js
View File

File diff suppressed because one or more lines are too long