This commit is contained in:
parent
3a5209dada
commit
32e3192e17
|
@ -1,4 +1,5 @@
|
|||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
@ -1,5 +1,10 @@
|
|||
import axios from "@/utils/axios.js";
|
||||
|
||||
// 获取街道
|
||||
export const login = (data) => {
|
||||
return axios.post('dataview/login', data);
|
||||
}
|
||||
|
||||
// 获取街道
|
||||
export const getStreet = (data) => {
|
||||
return axios.get('city/get_street', { params: data });
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 12 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,26 @@
|
|||
import { defineStore } from "pinia"
|
||||
import { ref } from "vue"
|
||||
|
||||
export const useUserStore = defineStore('user', () => {
|
||||
|
||||
const userInfo = ref(JSON.parse(localStorage.getItem('userInfo') || '{}'));
|
||||
|
||||
const setUserInfo = (data) => {
|
||||
userInfo.value = data;
|
||||
localStorage.setItem('userInfo', JSON.stringify(data));
|
||||
}
|
||||
|
||||
const token = ref(localStorage.getItem('token') || '');
|
||||
|
||||
const setToken = (data) => {
|
||||
token.value = data;
|
||||
localStorage.setItem('token', data);
|
||||
}
|
||||
|
||||
return {
|
||||
userInfo,
|
||||
token,
|
||||
setUserInfo,
|
||||
setToken
|
||||
}
|
||||
})
|
|
@ -193,9 +193,13 @@ onUnmounted(() => {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
#container {
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 130%;
|
||||
}
|
||||
.loading {
|
||||
width: 100%;
|
||||
|
|
|
@ -119,9 +119,13 @@ onUnmounted(() => {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
#container-left {
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 130%;
|
||||
}
|
||||
.loading {
|
||||
width: 100%;
|
||||
|
|
|
@ -145,7 +145,7 @@ const initEcahrts = (yData1 = [], yData2 = [], yData3 = [], yData4 = []) => {
|
|||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: colorArr[index].start + "0.3)"
|
||||
color: colorArr[index].start + "0.2)"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
|
@ -157,7 +157,9 @@ const initEcahrts = (yData1 = [], yData2 = [], yData3 = [], yData4 = []) => {
|
|||
}
|
||||
],
|
||||
globalCoord: false
|
||||
}
|
||||
},
|
||||
borderWidth: 1,
|
||||
borderColor: colorArr[index].end,
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -40,7 +40,8 @@ let dataValue = []
|
|||
|
||||
const customFormatter = (params) => {
|
||||
// console.log(params.data);
|
||||
return `{img|${params.data.street_name}}\n{t|店铺${params.data.mer_count}个, 团队${params.data.service_group_count}个}`
|
||||
// return `{img|${params.data.street_name}}\n{t|店铺${params.data.mer_count}个, 团队${params.data.service_group_count}个}`
|
||||
return ''
|
||||
}
|
||||
|
||||
const initDataValue = () => {
|
||||
|
@ -84,9 +85,6 @@ const initMap = () => {
|
|||
chart = echarts.init(echartsRef.value);
|
||||
}
|
||||
echarts.registerMap(mapType.name, mapType.json);
|
||||
let piePatternImg = new Image();
|
||||
piePatternImg.src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/35e6b202312021115251405.png';
|
||||
|
||||
|
||||
let option = {
|
||||
animation: false,
|
||||
|
@ -97,23 +95,7 @@ const initMap = () => {
|
|||
zoom: 1.0,
|
||||
label: {
|
||||
show: false,
|
||||
disabled: true,
|
||||
color: '#fff',
|
||||
fontSize: 25,
|
||||
// 高亮状态下的多边形和标签样式。
|
||||
|
||||
},
|
||||
// 选中状态下的多边形和标签样式
|
||||
// emphasis: {
|
||||
// itemStyle: {
|
||||
// // color: '#546686', //地图背景色
|
||||
// borderColor: '#fff', //省市边界线00fcff 516a89
|
||||
// borderWidth: 1,
|
||||
// },
|
||||
// label: {
|
||||
// color: '#fff'
|
||||
// }
|
||||
// },
|
||||
emphasis: {
|
||||
disabled: true
|
||||
},
|
||||
|
@ -143,6 +125,12 @@ const initMap = () => {
|
|||
zoom: 1.01, //当前视角的缩放比例
|
||||
roam: false, //是否开启平游或缩放
|
||||
show: true,
|
||||
tooltip: {
|
||||
show: false // 取消鼠标移上去时的文字提示
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
disabled: true
|
||||
},
|
||||
|
@ -166,6 +154,39 @@ const initMap = () => {
|
|||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params) {
|
||||
let obj = dataValue.find(item => item.street_name == params.name);
|
||||
if (!obj) {
|
||||
obj = params.data
|
||||
}
|
||||
if (obj) {
|
||||
return `<div
|
||||
style="background-image: url(\'/src/assets/img/item-box.png\');
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
width: 180px;
|
||||
height: 80px;">
|
||||
<div style="font-size: 15px;font-family: 'ifonts';">${obj?.street_name || ''}</div>
|
||||
<div style="font-size: 12px;">
|
||||
<p style="padding: 0;margin: 0">店铺:${obj?.mer_count || '0'}个</p>
|
||||
<p style="padding: 0;margin: 0">团队:${obj?.service_group_count || '0'}个</p>
|
||||
</div>
|
||||
</div>`;
|
||||
} else return '';
|
||||
},
|
||||
position: 'top',
|
||||
// extraCssText: 'background-color: transparent; border: none;pdding: 0;', // 设置额外的 CSS 样式
|
||||
backgroundColor: 'rgba(0, 156, 255, 0)', //设置背景颜色
|
||||
borderColor: "rgba(0, 156, 255, 0)",
|
||||
padding: 0,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "map",
|
||||
|
@ -173,42 +194,25 @@ const initMap = () => {
|
|||
label: {
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
color: 'rgba(0,0,0,0)'
|
||||
},
|
||||
emphasis: {
|
||||
disabled: false,
|
||||
},
|
||||
select: {
|
||||
disabled: true
|
||||
disabled: false
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: "#3f5171",
|
||||
borderColor: "#fff",
|
||||
borderColor: "#5bdbf6",
|
||||
borderWidth: 1,
|
||||
// shadowColor: "#5bdbf6",
|
||||
// shadowOffsetX: 5,
|
||||
// shadowOffsetY: 10,
|
||||
// shadowBlur: 30,
|
||||
// areaColor: {
|
||||
// image: domImg,
|
||||
// repeat: 'no-repeat',
|
||||
// },
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#0680ca', // 鼠标经过时的背景色
|
||||
}
|
||||
},
|
||||
|
||||
// itemStyle: {
|
||||
// color: {
|
||||
// image: piePatternImg,
|
||||
// repeat: 'no-repeat',
|
||||
// },
|
||||
// areaColor: {
|
||||
// image: piePatternImg,
|
||||
// repeat: 'no-repeat',
|
||||
// },
|
||||
// borderColor: '#bddee6',
|
||||
// borderWidth: 1,
|
||||
// },
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
|
@ -246,20 +250,6 @@ const initMap = () => {
|
|||
}
|
||||
// 使用配置项显示图表
|
||||
chart.setOption(option);
|
||||
|
||||
// 添加自定义图形,实现地图倾斜效果
|
||||
chart.dispatchAction({
|
||||
type: 'updateLayout',
|
||||
rotation: Math.PI / 4, // 设置旋转角度
|
||||
});
|
||||
|
||||
// 设置3D效果,实现地图立体效果
|
||||
chart.setOption({
|
||||
grid3D: {},
|
||||
xAxis3D: {},
|
||||
yAxis3D: {},
|
||||
zAxis3D: {}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
|
|
@ -1,14 +1,17 @@
|
|||
<script setup>
|
||||
import { ref, reactive } from "vue"
|
||||
import { useRouter } from "vue-router";
|
||||
import { loginAPI } from "@/api/api.js"
|
||||
import { login } from "@/api/index.js";
|
||||
import { useUserStore } from "@/store/user.js";
|
||||
const router = useRouter()
|
||||
const show = ref(false)
|
||||
const account = ref('')
|
||||
const password = ref('')
|
||||
const account = ref('叙永镇')
|
||||
const password = ref('xuyongzhen')
|
||||
const isAccount = ref(false)
|
||||
const isPassword = ref(false)
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
const submit = () => {
|
||||
|
||||
if (!account.value) {
|
||||
|
@ -24,17 +27,16 @@ const submit = () => {
|
|||
else isPassword.value = false;
|
||||
|
||||
|
||||
loginAPI({
|
||||
login({
|
||||
account: account.value,
|
||||
password: password.value
|
||||
}).then(res => {
|
||||
console.log(res);
|
||||
// localStorage.setItem("TOKEN", 15455465465465)
|
||||
// router.replace('/')
|
||||
}).then((res) => {
|
||||
userStore.setUserInfo(res.data.user);
|
||||
userStore.setToken(res.data.token);
|
||||
router.push('/');
|
||||
}).catch(e => {
|
||||
console.log(e);
|
||||
})
|
||||
return
|
||||
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue