This commit is contained in:
zmj 2023-12-02 18:36:12 +08:00
parent e4dd66c51e
commit 7a0a7c63b0
24 changed files with 1211 additions and 299 deletions

View File

@ -1,15 +1,23 @@
<script setup lang="ts"> <script setup lang="ts">
// @ts-ignore // @ts-ignore
import Header from "@/components/Header.vue" import Header from "@/components/Header.vue"
import Login from "@/components/login.vue"
let Token =localStorage.getItem('TOKEN')
</script> </script>
<template> <template>
<!-- <div>sadas</div> --> <!-- <div>sadas</div> -->
<div class="main-box"> <div class="main-box" v-if="Token">
<Header></Header> <Header></Header>
<router-view></router-view> <router-view></router-view>
</div>
<div v-else class="login-box">
<Login></Login>
</div>
<div>
</div> </div>
</template> </template>
@ -30,7 +38,13 @@ import Header from "@/components/Header.vue"
background-size: 100% 100%; background-size: 100% 100%;
overflow: hidden; overflow: hidden;
} }
.login-box{
width: 100vw;
height: 100vh;
background-image: url('/static/login/bg.png');
background-size: 100% 100%;
overflow: hidden;
}
.color-font { .color-font {
font-family: FZCYJ; font-family: FZCYJ;
color: #E5EFFF; color: #E5EFFF;

297
src/TEST.vue Normal file
View File

@ -0,0 +1,297 @@
<template>
<div style="width: 45vw;height: 50vh;" id="myChart"></div>
<div style="width: 45vw;height: 50vh;" id="chart2"></div>
<img src="/static/index/aa.png" id="img" style="opacity: 0;" alt="">
</template>
<script setup>
import { ref, onMounted } from "vue"
import axios from "axios";
import * as echarts from 'echarts';
import "echarts-gl"
const initData = (data) => {
var data3d = data.map(el => {
return {
name: el.properties.name,
value:el.properties.center,
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
color: 'white',
fontWeight: "bold",
fontSize: 18
}
},
itemStyle: {
normal: {
color: '#FFB923'
}
},
}
});
return data3d
}
onMounted(() => {
const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'
axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json')
.then(function (response) {
let dot=document.getElementById('img')
let mapJson = response.data
let chartOption= {
geo: {
backgroundColor: {
color: {
image: dot, // HTMLImageElement, HTMLCanvasElement
repeat: 'repeat' // 'repeat-x', 'repeat-y', 'no-repeat'
}
},
show: true,
map: `lz`,
left: '0',
top: `0%`,
right: '8%',
bottom: '0',
itemStyle: {
// normal: {
// areaColor: `rgba(115, 219, 249, 0)`,
// borderwidth: 3,
// borderColor: `#37C1FD`,
// shadowBlur: 20,
// shadowOffsetY: 4,
// shadowOffsetX: 4,
// shadowColor: `#ddd`
// },
areaColor: {
image: dot,
repeat: 'repeat'
},
}
},
series: [
{
type: `effectScatter`,
coordinateSystem: `geo`,
rippleEffect: { //
period: 4, //
brushType: `stroke`, // stroke, fill
scale: 8 //
},
itemStyle: {
// normal: {
// color: `orange`,
// shadowBlur: 2
// },
},
symbolSize: 8,
data: [
{ name: `三亚市`, value: [ 104.065735, 30.659462] },
{ name: `五指山市`, value: [104.773447,29.352765] }
//[109.508268, 18.247872, ``],
//[109.516662, 18.776921, ``]
]
}
]
}
echarts.registerMap(`lz`, mapJson)
// const myChart2 = document.getElementById('chart2')
// const bg = echarts.init(myChart2);
// bg.setOption(chartOption)
const canvas = document.createElement(`canvas`)
let bg = echarts.init(canvas, null, {
width: 1024,
height: 1024
})
bg.setOption(chartOption)
const myChart = document.getElementById('myChart')
const charts = echarts.init(myChart);
let option = {
// geo3D: {
// map: ``,
// viewControl: {
// autoRotate: false,
// distance: 180
// },
// shading: `color`,
// boundingCoords: [
// [-180, 90],
// [180, -90]
// ],
// colorMaterial: {
// detailTexture: this.bg, //
// textureTiling: 1 // 1
// },
// //
// groundPlane: {
// show: false
// }
// },
geo3D: {
map: "luzhou",
shading: `color`,
//
roam: true,
itemStyle: {
// color: "#014281",
opacity: 0.9,
borderWidth: 0.4,
borderColor: "#000",
normal: {
areaColor: 'red',
borderWidth: 4, //
// borderColor: '#f8911b',
},
emphasis: {
show: false,
// areaColor: '#01215c'
}
// areaColor: '#fff'
},
viewControl: {
autoRotate: true,
autoRotateAfterStill: 3,
distance: 90,
minAlpha: 5, // alpha [ default: 5 ]
maxAlpha: 90, // alpha [ default: 90 ]
minBeta: -360, // beta [ default: -80 ]
maxBeta: 360, // beta [ default: 80 ]
animation: true, // [ default: true ]
animationDurationUpdate: 1000, // [ default: 1000 ]
animationEasingUpdate: "cubicInOut" // [ default: cubicInOut ]
},
emphasis: {
disabled: true, //
label: {
//
show: true,
},
itemStyle: {
color:
"#B17049" //
}
},
label: {
show: false,
// position: "bottom",
color: "white", //
fontSize: 14,
lineHeight: 16,
// textStyle: {
// color: "#fff", //
// fontSize: 12,
// opacity: 1,
// backgroundColor: "red",
// },
},
shading: "color",
light: {
//
main: {
// color: "#fff", //
intensity: 0.8, //
shadowQuality: 'high', //
shadow: true, //
shadowQuality: "medium", // ultra //
alpha: 55,
beta: 10
},
ambient: {
intensity: 0.7
}
},
colorMaterial: {
detailTexture: bg, //
textureTiling: 1 // 1
},
},
series: [
{
type: "scatter3D",
coordinateSystem: "geo3D",
data: initData(mapJson.features),
// symbol: "circle",
symbolSize: 20,
// itemStyle: {
// color: "transparent",
// },
label: {
show: true,
position: "top",
distance: -10,
formatter(params) {
return "2";
},
textStyle: {
// color: "transparent",
padding: [15, 20],
backgroundColor: {
image: '/static/index/aa.png',
},
// backgroundColor:""
},
},
emphasis: {
label: {
show: true,
textStyle: {
backgroundColor: {
// image: '/static/index/aa.png',
},
},
},
},
},
],
};
// option.geo.map
echarts.registerMap("luzhou", mapJson)
charts.setOption(option);
})
})
</script>

View File

@ -43,46 +43,6 @@ const route = useRoute()
// //
const show = reactive([false, true, true, true, true]) const show = reactive([false, true, true, true, true])
const showFn = (index, src) => {
show.forEach((item, i) => {
show[i] = true
})
show[index] = !show[index]
if (src) {
router.replace(src)
}
}
const backUrl = ref('/')
// alert(zz3)
watch(
() => route.path,
(value, oldValue) => {
if (value == '/') {
showFn(0)
}
if (value == '/commodity') {
showFn(1)
}
if (value == '/Businesses') {
showFn(2)
}
if (value == '/order') {
showFn(3)
}
if (value == '/finance') {
showFn(4)
}
console.log(value)
}
)
@ -95,7 +55,9 @@ const offAreaList = () => {
} }
const out = () => { const out = () => {
//@ts-ignore //@ts-ignore
window.open("about:blank", "_top").close() // window.open("about:blank", "_top").close()
localStorage.removeItem('TOKEN')
router.replace('/')
} }
const updateTime = () => { const updateTime = () => {
var date = new Date(); var date = new Date();

View File

@ -1,248 +1,293 @@
<template> <template>
<div style="width: 45vw;height: 50vh;" id="myChart"></div> <div>
<div style="width: 45vw;height: 50vh;" id="chart2"></div>
<img src="/static/index/aa.png" id="img" style="opacity: 0;" alt="">
<div style="width: 45vw;height: 50vh;" id="chart2"></div>
<!-- <img src="/static/index/lx.png" class="img4" alt=""> -->
</div>
<!-- <div style="width: 45vw;height: 50vh;" id="myChart"></div> -->
<!-- <img src="/static/index/SC.png" id="img" style="width: 45vw;height: 50vh;" alt=""> -->
</template> </template>
<style lang="scss" scoped>
@keyframes spin {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
.img4 {
top: 19.5vh;
left: 33.3vw;
height: 44vh;
width: 33.6vw;
position: absolute;
// transform: rotateX(45deg);
// animation: spin 2s linear infinite;
}
#chart2 {
position: absolute;
z-index: 9;
}
</style>
<script setup> <script setup>
import { ref, onMounted } from "vue" import { ref, onMounted } from "vue"
import axios from "axios"; import axios from "axios";
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import "echarts-gl" import "echarts-gl"
// import geoJson from "/static/jsonData/xuantan.js"
const initData = (data) => {
var data3d = data.map(el => {
return {
name: el.properties.name,
value:el.properties.center,
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
color: 'white',
fontWeight: "bold",
fontSize: 18
}
},
itemStyle: {
normal: {
color: '#FFB923'
}
},
}
});
return data3d
}
onMounted(() => { onMounted(() => {
const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png' const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'
axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json')
.then(function (response) {
let dot=document.getElementById('img')
let mapJson = response.data
let chartOption= {
geo: {
backgroundColor: {
color: {
image: dot, // HTMLImageElement, HTMLCanvasElement
repeat: 'repeat' // 'repeat-x', 'repeat-y', 'no-repeat'
}
},
show: true,
map: `lz`,
left: '0',
top: `0%`,
right: '8%',
bottom: '0',
itemStyle: {
// normal: {
// areaColor: `rgba(115, 219, 249, 0)`,
// borderwidth: 3,
// borderColor: `#37C1FD`,
// shadowBlur: 20,
// shadowOffsetY: 4,
// shadowOffsetX: 4,
// shadowColor: `#ddd`
// },
areaColor: {
image: dot,
repeat: 'repeat'
},
}
},
series: [
{
type: `effectScatter`,
coordinateSystem: `geo`,
rippleEffect: { //
period: 4, //
brushType: `stroke`, // stroke, fill
scale: 8 //
},
itemStyle: {
// normal: {
// color: `orange`,
// shadowBlur: 2
// },
},
symbolSize: 8, axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510500_full.json')
data: [
{ name: `三亚市`, value: [ 104.065735, 30.659462] },
{ name: `五指山市`, value: [104.773447,29.352765] } axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json')
//[109.508268, 18.247872, ``], .then(function (response) {
//[109.516662, 18.776921, ``] let geoJson = response.data
] const dot = document.getElementById('img')
} var mapName = 'lz';
] let data = [
]
const myChart = document.getElementById("chart2")
/*获取地图数据*/
let option = {
geo: [
{
layoutSize: '100%',//
show: true,
map: mapName,
roam: false,
zoom: 1.2,
layoutCenter: ["50%", "50%"],
aspectScale: 1,
label: {
normal: {
show: false,
textStyle: {
color: '#fff'
} }
},
},
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
},
borderColor: "#D2F2FC",
borderWidth: 2,
shadowColor: "#8cd3ef",
shadowOffsetY: 10,
shadowBlur: 120,
},
},
{
echarts.registerMap(`lz`, mapJson) type: "map",
// const myChart2 = document.getElementById('chart2') map: mapName,
// const bg = echarts.init(myChart2); zlevel: -1,
// bg.setOption(chartOption) aspectScale: 1,
zoom: 1.2,
const canvas = document.createElement(`canvas`) layoutCenter: ["50%", "51%"],
let bg = echarts.init(canvas, null, { layoutSize: "100%",
width: 1024, roam: false,
height: 1024 silent: true,
}) regions: [
bg.setOption(chartOption) {
const myChart = document.getElementById('myChart') name: "南海诸岛",
const charts = echarts.init(myChart); itemStyle: {
let option = { //
normal: {
opacity: 0, // 0
}
// geo3D: {
// map: ``,
// viewControl: {
// autoRotate: false,
// distance: 180
// },
// shading: `color`,
// boundingCoords: [
// [-180, 90],
// [180, -90]
// ],
// colorMaterial: {
// detailTexture: this.bg, //
// textureTiling: 1 // 1
// },
// //
// groundPlane: {
// show: false
// }
// },
geo3D: {
map: "luzhou",
shading: `color`,
//
roam: true,
itemStyle: {
// color: "#014281",
opacity: 0.9,
borderWidth: 0.4,
borderColor: "#000",
normal: {
areaColor: 'red',
borderWidth: 4, //
// borderColor: '#f8911b',
},
emphasis: {
show: false,
// areaColor: '#01215c'
}
// areaColor: '#fff'
},
viewControl: {
autoRotate: true,
autoRotateAfterStill: 3,
distance: 90,
minAlpha: 5, // alpha [ default: 5 ]
maxAlpha: 90, // alpha [ default: 90 ]
minBeta: -360, // beta [ default: -80 ]
maxBeta: 360, // beta [ default: 80 ]
animation: true, // [ default: true ]
animationDurationUpdate: 1000, // [ default: 1000 ]
animationEasingUpdate: "cubicInOut" // [ default: cubicInOut ]
},
emphasis: {
disabled: true, //
label: {
//
show: true,
},
itemStyle: {
color:
"#B17049" //
}
},
label: {
show: false,
// position: "bottom",
color: "white", //
fontSize: 14,
lineHeight: 16,
// textStyle: {
// color: "#fff", //
// fontSize: 12,
// opacity: 1,
// backgroundColor: "red",
// },
},
shading: "color",
light: {
//
main: {
// color: "#fff", //
intensity: 0.8, //
shadowQuality: 'high', //
shadow: true, //
shadowQuality: "medium", // ultra //
alpha: 55,
beta: 10
},
ambient: {
intensity: 0.7
}
},
colorMaterial: {
detailTexture: bg, //
textureTiling: 1 // 1
},
}, },
series: [ label: {
{ show: false //
type: "scatter3D", }
coordinateSystem: "geo3D", }
data: initData(mapJson.features), ],
// symbol: "circle", itemStyle: {
symbolSize: 20, normal: {
// itemStyle: { borderWidth: 1,
// color: "transparent", borderColor: "rgba(17, 149, 216,0.6)",
// }, borderColor: "#5AD0E0",
label: { shadowColor: "rgba(172, 122, 255,0.5)",
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: "rgba(5,21,35,0.1)",
},
},
},
{
type: "map",
map: mapName,
zlevel: -1,
aspectScale: 1,
zoom: 1.2,
layoutCenter: ["50%", "52%"],
layoutSize: "100%",
roam: false,
silent: true,
itemStyle: {
normal: {
borderWidth: 1,
borderColor: "rgba(17, 149, 216,0.6)",
borderColor: "#5AD0E0",
shadowColor: "rgba(172, 122, 255,0.5)",
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: "rgba(5,21,35,0.1)",
},
},
},
{
type: "map",
map: mapName,
zlevel: -2,
aspectScale: 1,
zoom: 1.2,
layoutCenter: ["50%", "52%"],
layoutSize: "100%",
roam: false,
silent: true,
itemStyle: {
normal: {
borderWidth: 1,
borderColor: "rgba(17, 149, 216,0.4)",
borderColor: "#5AD0E0",
shadowColor: "rgba(172, 122, 255,0.5)",
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: "rgba(5,21,35,0.1)",
},
},
},
// {
// 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%"],
layoutSize: "100%",
roam: false,
silent: true,
regions: [
{
name: "南海诸岛",
itemStyle: {
//
normal: {
opacity: 0, // 0
}
},
label: {
show: false //
}
}
],
itemStyle: {
normal: {
borderWidth: 5,
// borderColor: "rgba(11, 43, 97,0.8)",
borderColor: "rgba(5,9,57,0.8)",
shadowColor: "rgba(29, 111, 165,0.8)",
shadowOffsetY: 15,
shadowBlur: 10,
areaColor: "rgba(5,21,35,0.1)",
},
},
},
],
series: [
{
type: 'map',
map: mapName,
geoIndex: 0,
aspectScale: 1, //
showLegendSymbol: true,
roam: true,
label: {
show: true, show: true,
position: "top", position: "top",
distance: -10, distance: -10,
@ -259,31 +304,34 @@ let dot=document.getElementById('img')
// backgroundColor:"" // backgroundColor:""
}, },
}, },
emphasis: {
label: {
show: true,
textStyle: {
backgroundColor: {
// image: '/static/index/aa.png',
},
},
},
},
},
],
};
// option.geo.map
echarts.registerMap("luzhou", mapJson)
charts.setOption(option);
}) animation: true,
markPoint: {
symbol: "none"
},
data: data,
},
],
};
echarts.registerMap(mapName, geoJson)
const bg = echarts.init(myChart)
bg.setOption(option);
})

View File

@ -0,0 +1,437 @@
<template>
<div style="width: 45vw;height: 50vh;" id="chart2">
</div>
<!-- <img src="/static/index/SC.png" id="img" style="width: 45vw;height: 50vh;" alt=""> -->
</template>
<style lang="scss" scoped>
@keyframes spin {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
.img4 {
width: 45VW;
height: 50vh;
transform-origin: center center;
// transform: rotateX(45deg);
// animation: spin 2s linear infinite;
}
</style>
<script setup>
import { ref, onMounted } from "vue"
import axios from "axios";
import * as echarts from 'echarts';
import "echarts-gl"
onMounted(() => {
const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'
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';
var geoCoordMap = {
};
let data = [
{
name: "成都市",
value: 12,
itemStyle: {
normal: {
color: {
image: document.getElementById("img"),
repeat: 'no-repeat'
}
}
}
},
{
name: "眉山市",
value: 12,
itemStyle: {
normal: {
color: {
image: document.getElementById("img"),
repeat: 'no-repeat'
}
}
}
},
{
name: "雅安市",
value: 12,
itemStyle: {
normal: {
color: {
image: document.getElementById("img"),
repeat: 'no-repeat'
}
}
}
},
]
const myChart = document.getElementById("chart2")
/*获取地图数据*/
var mapFeatures = geoJson.features;
mapFeatures.forEach(function (v) {
//
var name = v.properties.name;
//
geoCoordMap[name] = v.properties.cp;
});
// console.log(dot)
let option = {
visualMap: {
show: false
},
title: {
show: true,
// textStyle: {
// color: "#fff",
// fontFamily: "线",
// fontSize: 18,
// },
},
tooltip: {
trigger: 'none',
formatter: function (params) {
if (typeof params.value[2] == 'undefined') {
var toolTiphtml = '';
for (var i = 0; i < toolTipData.length; i++) {
if (params.name == toolTipData[i].name) {
toolTiphtml += toolTipData[i].name + "" + toolTipData[i].value;
}
}
console.log(toolTiphtml);
// console.log(convertData(data))
return toolTiphtml;
} else {
var toolTiphtml = '';
for (var i = 0; i < toolTipData.length; i++) {
if (params.name == toolTipData[i].name) {
toolTiphtml += toolTipData[i].name + "" + toolTipData[i].value;
}
}
console.log(toolTiphtml);
return toolTiphtml;
}
},
backgroundColor: "#fff",
borderColor: "#333",
padding: [5, 10],
textStyle: {
color: "#333",
fontSize: "16"
}
},
geo: [
{
layoutSize: '100%',//
show: true,
map: mapName,
backgroundColor: {
color: {
image: dot, // HTMLImageElement, HTMLCanvasElement
repeat: 'repeat' // 'repeat-x', 'repeat-y', 'no-repeat'
}
},
roam: false,
zoom: 1.2,
layoutCenter: ["50%", "50%"],
aspectScale: 1,
label: {
normal: {
show: false,
textStyle: {
color: '#fff'
}
},
emphasis: {
show: true,
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
areaColor: {
type: "linear",
x: 1200,
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
},
borderColor: "#D2F2FC",
borderWidth: 2,
shadowColor: "#8cd3ef",
shadowOffsetY: 10,
shadowBlur: 120,
},
},
// {
// type: "map",
// map: mapName,
// zlevel: -1,
// aspectScale: 1,
// zoom: 1.2,
// layoutCenter: ["50%", "51%"],
// layoutSize: "100%",
// roam: false,
// silent: true,
// regions: [
// {
// name: "",
// itemStyle: {
// //
// normal: {
// opacity: 0, // 0
// }
// },
// label: {
// show: false //
// }
// }
// ],
// itemStyle: {
// normal: {
// borderWidth: 1,
// borderColor: "rgba(17, 149, 216,0.6)",
// borderColor: "#5AD0E0",
// shadowColor: "rgba(172, 122, 255,0.5)",
// shadowOffsetY: 5,
// shadowBlur: 15,
// areaColor: "rgba(5,21,35,0.1)",
// },
// },
// },
// {
// type: "map",
// map: mapName,
// zlevel: -2,
// aspectScale: 1,
// zoom: 1.2,
// layoutCenter: ["50%", "52%"],
// layoutSize: "100%",
// roam: false,
// silent: true,
// regions: [
// {
// name: "",
// itemStyle: {
// //
// normal: {
// opacity: 0, // 0
// }
// },
// label: {
// show: false //
// }
// }
// ],
// itemStyle: {
// normal: {
// borderWidth: 1,
// // borderColor: "rgba(57, 132, 188,0.4)",
// borderColor: "#1C75C8",
// shadowColor: "rgba(65, 214, 255,1)",
// shadowOffsetY: 5,
// shadowBlur: 15,
// areaColor: "transpercent",
// },
// },
// },
// {
// 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%", "54%"],
// layoutSize: "103%",
// roam: false,
// silent: true,
// regions: [
// {
// name: "",
// itemStyle: {
// //
// normal: {
// opacity: 0, // 0
// }
// },
// label: {
// show: false //
// }
// }
// ],
// itemStyle: {
// normal: {
// borderWidth: 5,
// // borderColor: "rgba(11, 43, 97,0.8)",
// borderColor: "rgba(5,9,57,0.8)",
// shadowColor: "rgba(29, 111, 165,0.8)",
// shadowOffsetY: 15,
// shadowBlur: 10,
// areaColor: "rgba(5,21,35,0.1)",
// },
// },
// },
],
series: [
{
type: 'map',
map: mapName,
geoIndex: 0,
aspectScale: 1, //
zoom: 0.65,
showLegendSymbol: true,
roam: true,
label: {
normal: {
show: true,
textStyle: {
color: "#fff",
fontSize: "120%"
},
},
emphasis: {
// show: false,
},
},
// itemStyle: {
// normal: {
// areaColor: {
// type: "linear",
// x: 1200,
// 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
// },
// borderColor: "#fff",
// borderWidth: 0.2,
// },
// },
layoutCenter: ["50%", "50%"],
layoutSize: "180%",
animation: true,
markPoint: {
symbol: "none"
},
data: data,
},
],
};
echarts.registerMap(mapName, geoJson)
const bg = echarts.init(myChart)
bg.setOption(option);
})
})
</script>
<style lang="scss" scoped>
#chart2{
transform: rotateX(20deg);
}
</style>

114
src/components/login.vue Normal file
View File

@ -0,0 +1,114 @@
<template>
<div class="form">
<div class="content">
<div style="position: relative;margin-bottom: 3VH;">
<input class="ipt" type="text" placeholder="请输入账号" v-model="account">
<img src="/static/login/ZH.png" alt="" class="accont-icon">
<div style="color: red;" v-show="isAccount">请输入账号</div>
</div>
<div style="position: relative;margin-bottom: 3VH;">
<input class="ipt" placeholder="请输入密码" :type="show ? 'text' : 'password'" v-model="password">
<div style="color: red;" v-show="isPassword">请输入密码</div>
<img src="/static/login/MM.png" alt="" class="accont-icon">
<img src="/static/login/KJ.png" v-if="show" alt="" @click="show = false" class="show">
<img src="/static/login/BKH.png" v-else alt="" @click="show = true" class="show">
</div>
<img src="/static/login/DL.png" class="btn" alt="" @click="submit">
</div>
</div>
</template>
<style lang="scss" scoped>
.form {
width: 35vw;
height: 45vh;
position: absolute;
top: 25vh;
right: 10vw;
box-sizing: border-box;
background: url("/static/login/DLBG.png");
background-size: 100% 100%;
.content {
position: absolute;
top: 13vh;
// background-color: red;
left: 10vw;
.ipt {
border: 1px solid #194FA3;
padding: 1vh 2vw;
background-color: #123266;
width: 13VW;
outline: none;
-webkit-user-select: auto;
caret-color: #fff;
color: white;
}
input[type="password"]::-ms-reveal {
display: none
}
.btn {
width: 7vw;
cursor: pointer;
margin-left: 50%;
transform: translateX(-50%);
}
.accont-icon {
width: 0.8vw;
position: absolute;
left: 1vh;
top: .8vh;
}
.show {
position: absolute;
top: 10px;
right: 10px;
width: 1vw;
cursor: pointer;
}
}
}
</style>
<script setup>
import { ref, reactive } from "vue"
import { useRouter } from "vue-router";
const router =useRouter()
const show = ref(false)
const account = ref('')
const password = ref('')
const isAccount = ref(false)
const isPassword = ref(false)
const submit = () => {
if (!account.value) {
isAccount.value = true;
return
}
else isAccount.value = false;
if (!password.value)
{ isPassword.value = true;
return}
else isPassword.value = false;
localStorage.setItem("TOKEN",15455465465465)
router.replace('/index')
// alert(isAccount.value)
}
</script>

View File

@ -6,13 +6,13 @@
<div style="display: flex;justify-content: space-between;flex-direction: column;margin-left: 1vw;"> <div style="display: flex;justify-content: space-between;flex-direction: column;margin-left: 1vw;">
<div style="font-family:FZCYJ ;">告警数据:</div> <div style="font-family:FZCYJ ;">告警数据:</div>
<div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num">1</span> <div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num">1</span>
<span class="text"> 这是一名jiujs</span> <span class="text"> 老东赛</span>
</div> </div>
<div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num"> 2</span> <div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num"> 2</span>
<span class="text"> 这是一名jiujs发射点发射点点大夫</span> <span class="text"> 这是一名后端开发</span>
</div> </div>
<div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num">3</span> <span <div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num">3</span> <span
class="text"> 这是一名jiujs啊沙发沙发沙发沙发沙发阿松大沙sdsa发</span> class="text"> 这是一名地方都是开发建设的咖啡机发动机</span>
</div> </div>
</div> </div>
</div> </div>

View File

@ -3,6 +3,11 @@ import { createRouter, createWebHistory } from 'vue-router'
const routes = [ const routes = [
{ {
path: '/', path: '/',
name: 'login',
component: () => import('@/components/login.vue'),
},
{
path: '/index',
name: 'index', name: 'index',
component: () => import('@/view/index.vue'), component: () => import('@/view/index.vue'),
}, },
@ -13,6 +18,8 @@ const routes = [
}, },
] ]
const router = createRouter({ const router = createRouter({

View File

@ -33,6 +33,16 @@
</div> </div>
<div class="c"> <div class="c">
<div class="top"> <div class="top">
<div style="display: flex;justify-content: space-between;">
<div class=" c-top-tits"><span class="color-font" @click="router.push('/index')">返回首页</span></div>
<div class=" c-top-tits"><span class="color-font">同谭政地块</span> </div>
<!-- <img src="/static/detail/FHSY.png" alt=""> -->
</div>
<farmerMap></farmerMap>
</div> </div>
<div class="bottom"> <div class="bottom">
@ -111,6 +121,12 @@ import * as echarts from 'echarts';
import warnDetail from "@/components/warnDetail.vue" import warnDetail from "@/components/warnDetail.vue"
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import farmerMap from "../components/farmerMap.vue";
const router = useRouter() const router = useRouter()
@ -367,7 +383,23 @@ onMounted(() => {
margin-top: 1vh; margin-top: 1vh;
width: 49vw; width: 49vw;
height: 61vh; height: 61vh;
// background-color: RED;
background-image: url('/static/index/ZBK.png');
background-size: 100% 100%;
box-sizing: border-box;
padding: 2vh 2vw;
.c-top-tits {
padding: 1vh 1vw;
font-size: 20px;
// border: 1px solid red;
cursor: pointer;
background-image: url('/static/detail/FHSY.png');
background-size: 100% 100%;
}
} }
.bottom { .bottom {

View File

Before

Width:  |  Height:  |  Size: 8.3 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

File diff suppressed because one or more lines are too long

BIN
static/index/SC.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 MiB

BIN
static/index/a.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 MiB

BIN
static/index/a4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

BIN
static/index/lx.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
static/index/lz.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 MiB

File diff suppressed because one or more lines are too long

BIN
static/login/BKH.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
static/login/DL.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
static/login/DLBG.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 378 KiB

BIN
static/login/KJ.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
static/login/MM.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
static/login/ZH.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
static/login/bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB