shit
This commit is contained in:
parent
e4dd66c51e
commit
7a0a7c63b0
22
src/App.vue
22
src/App.vue
|
|
@ -1,15 +1,23 @@
|
|||
<script setup lang="ts">
|
||||
// @ts-ignore
|
||||
import Header from "@/components/Header.vue"
|
||||
|
||||
|
||||
import Login from "@/components/login.vue"
|
||||
let Token =localStorage.getItem('TOKEN')
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<!-- <div>sadas</div> -->
|
||||
<div class="main-box">
|
||||
<div class="main-box" v-if="Token">
|
||||
<Header></Header>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<div v-else class="login-box">
|
||||
<Login></Login>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -30,7 +38,13 @@ import Header from "@/components/Header.vue"
|
|||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-box{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-image: url('/static/login/bg.png');
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.color-font {
|
||||
font-family: FZCYJ;
|
||||
color: #E5EFFF;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -43,46 +43,6 @@ const route = useRoute()
|
|||
// 标题
|
||||
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 = () => {
|
||||
//@ts-ignore
|
||||
window.open("about:blank", "_top").close()
|
||||
// window.open("about:blank", "_top").close()
|
||||
localStorage.removeItem('TOKEN')
|
||||
router.replace('/')
|
||||
}
|
||||
const updateTime = () => {
|
||||
var date = new Date();
|
||||
|
|
|
|||
|
|
@ -1,248 +1,293 @@
|
|||
<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="">
|
||||
<div>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
import { ref, onMounted } from "vue"
|
||||
import axios from "axios";
|
||||
import * as echarts from 'echarts';
|
||||
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(() => {
|
||||
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, `五指山市`]
|
||||
]
|
||||
}
|
||||
]
|
||||
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%',//大小
|
||||
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)
|
||||
// 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是拉伸，数字表示纹理平铺次数
|
||||
},
|
||||
{
|
||||
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 时不绘制该图形
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "scatter3D",
|
||||
coordinateSystem: "geo3D",
|
||||
data: initData(mapJson.features),
|
||||
// symbol: "circle",
|
||||
symbolSize: 20,
|
||||
// itemStyle: {
|
||||
// color: "transparent",
|
||||
// },
|
||||
label: {
|
||||
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: -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,
|
||||
position: "top",
|
||||
distance: -10,
|
||||
|
|
@ -259,31 +304,34 @@ let dot=document.getElementById('img')
|
|||
// 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);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -6,13 +6,13 @@
|
|||
<div style="display: flex;justify-content: space-between;flex-direction: column;margin-left: 1vw;">
|
||||
<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>
|
||||
<span class="text"> 这是一名jiujs</span>
|
||||
<span class="text"> 老东赛！</span>
|
||||
</div>
|
||||
<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 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>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,11 @@ import { createRouter, createWebHistory } from 'vue-router'
|
|||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'login',
|
||||
component: () => import('@/components/login.vue'),
|
||||
},
|
||||
{
|
||||
path: '/index',
|
||||
name: 'index',
|
||||
component: () => import('@/view/index.vue'),
|
||||
},
|
||||
|
|
@ -11,6 +16,8 @@ const routes = [
|
|||
name: 'detail',
|
||||
component: () => import('@/view/detail.vue'),
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
]
|
||||
|
|
|
|||
|
|
@ -33,6 +33,16 @@
|
|||
</div>
|
||||
<div class="c">
|
||||
<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 class="bottom">
|
||||
|
||||
|
|
@ -111,6 +121,12 @@ import * as echarts from 'echarts';
|
|||
import warnDetail from "@/components/warnDetail.vue"
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import farmerMap from "../components/farmerMap.vue";
|
||||
|
||||
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
|
||||
|
|
@ -367,7 +383,23 @@ onMounted(() => {
|
|||
margin-top: 1vh;
|
||||
width: 49vw;
|
||||
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 {
|
||||
|
|
|
|||
|
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
Binary file not shown.
|
After Width: | Height: | Size: 12 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 MiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 378 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Loading…
Reference in New Issue