This commit is contained in:
parent
3a5209dada
commit
32e3192e17
|
@ -1,4 +1,5 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -1,5 +1,10 @@
|
||||||
import axios from "@/utils/axios.js";
|
import axios from "@/utils/axios.js";
|
||||||
|
|
||||||
|
// 获取街道
|
||||||
|
export const login = (data) => {
|
||||||
|
return axios.post('dataview/login', data);
|
||||||
|
}
|
||||||
|
|
||||||
// 获取街道
|
// 获取街道
|
||||||
export const getStreet = (data) => {
|
export const getStreet = (data) => {
|
||||||
return axios.get('city/get_street', { params: 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%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
#container {
|
#container {
|
||||||
|
position: absolute;
|
||||||
|
top: -10%;
|
||||||
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 130%;
|
||||||
}
|
}
|
||||||
.loading {
|
.loading {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
@ -119,9 +119,13 @@ onUnmounted(() => {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
#container-left {
|
#container-left {
|
||||||
|
position: absolute;
|
||||||
|
top: -10%;
|
||||||
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 130%;
|
||||||
}
|
}
|
||||||
.loading {
|
.loading {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
@ -145,7 +145,7 @@ const initEcahrts = (yData1 = [], yData2 = [], yData3 = [], yData4 = []) => {
|
||||||
y2: 1,
|
y2: 1,
|
||||||
colorStops: [{
|
colorStops: [{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: colorArr[index].start + "0.3)"
|
color: colorArr[index].start + "0.2)"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 0.5,
|
offset: 0.5,
|
||||||
|
@ -157,7 +157,9 @@ const initEcahrts = (yData1 = [], yData2 = [], yData3 = [], yData4 = []) => {
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
globalCoord: false
|
globalCoord: false
|
||||||
}
|
},
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colorArr[index].end,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -40,7 +40,8 @@ let dataValue = []
|
||||||
|
|
||||||
const customFormatter = (params) => {
|
const customFormatter = (params) => {
|
||||||
// console.log(params.data);
|
// 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 = () => {
|
const initDataValue = () => {
|
||||||
|
@ -84,9 +85,6 @@ const initMap = () => {
|
||||||
chart = echarts.init(echartsRef.value);
|
chart = echarts.init(echartsRef.value);
|
||||||
}
|
}
|
||||||
echarts.registerMap(mapType.name, mapType.json);
|
echarts.registerMap(mapType.name, mapType.json);
|
||||||
let piePatternImg = new Image();
|
|
||||||
piePatternImg.src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/35e6b202312021115251405.png';
|
|
||||||
|
|
||||||
|
|
||||||
let option = {
|
let option = {
|
||||||
animation: false,
|
animation: false,
|
||||||
|
@ -97,23 +95,7 @@ const initMap = () => {
|
||||||
zoom: 1.0,
|
zoom: 1.0,
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
disabled: true,
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 25,
|
|
||||||
// 高亮状态下的多边形和标签样式。
|
|
||||||
|
|
||||||
},
|
},
|
||||||
// 选中状态下的多边形和标签样式
|
|
||||||
// emphasis: {
|
|
||||||
// itemStyle: {
|
|
||||||
// // color: '#546686', //地图背景色
|
|
||||||
// borderColor: '#fff', //省市边界线00fcff 516a89
|
|
||||||
// borderWidth: 1,
|
|
||||||
// },
|
|
||||||
// label: {
|
|
||||||
// color: '#fff'
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
emphasis: {
|
emphasis: {
|
||||||
disabled: true
|
disabled: true
|
||||||
},
|
},
|
||||||
|
@ -143,6 +125,12 @@ const initMap = () => {
|
||||||
zoom: 1.01, //当前视角的缩放比例
|
zoom: 1.01, //当前视角的缩放比例
|
||||||
roam: false, //是否开启平游或缩放
|
roam: false, //是否开启平游或缩放
|
||||||
show: true,
|
show: true,
|
||||||
|
tooltip: {
|
||||||
|
show: false // 取消鼠标移上去时的文字提示
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
disabled: true
|
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: [
|
series: [
|
||||||
{
|
{
|
||||||
type: "map",
|
type: "map",
|
||||||
|
@ -173,42 +194,25 @@ const initMap = () => {
|
||||||
label: {
|
label: {
|
||||||
emphasis: {
|
emphasis: {
|
||||||
show: false
|
show: false
|
||||||
}
|
},
|
||||||
|
color: 'rgba(0,0,0,0)'
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
disabled: false,
|
disabled: false,
|
||||||
},
|
},
|
||||||
select: {
|
select: {
|
||||||
disabled: true
|
disabled: false
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
areaColor: "#3f5171",
|
areaColor: "#3f5171",
|
||||||
borderColor: "#fff",
|
borderColor: "#5bdbf6",
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
// shadowColor: "#5bdbf6",
|
},
|
||||||
// shadowOffsetX: 5,
|
emphasis: {
|
||||||
// shadowOffsetY: 10,
|
areaColor: '#0680ca', // 鼠标经过时的背景色
|
||||||
// shadowBlur: 30,
|
|
||||||
// areaColor: {
|
|
||||||
// image: domImg,
|
|
||||||
// repeat: 'no-repeat',
|
|
||||||
// },
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// itemStyle: {
|
|
||||||
// color: {
|
|
||||||
// image: piePatternImg,
|
|
||||||
// repeat: 'no-repeat',
|
|
||||||
// },
|
|
||||||
// areaColor: {
|
|
||||||
// image: piePatternImg,
|
|
||||||
// repeat: 'no-repeat',
|
|
||||||
// },
|
|
||||||
// borderColor: '#bddee6',
|
|
||||||
// borderWidth: 1,
|
|
||||||
// },
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "",
|
name: "",
|
||||||
|
@ -246,20 +250,6 @@ const initMap = () => {
|
||||||
}
|
}
|
||||||
// 使用配置项显示图表
|
// 使用配置项显示图表
|
||||||
chart.setOption(option);
|
chart.setOption(option);
|
||||||
|
|
||||||
// 添加自定义图形,实现地图倾斜效果
|
|
||||||
chart.dispatchAction({
|
|
||||||
type: 'updateLayout',
|
|
||||||
rotation: Math.PI / 4, // 设置旋转角度
|
|
||||||
});
|
|
||||||
|
|
||||||
// 设置3D效果,实现地图立体效果
|
|
||||||
chart.setOption({
|
|
||||||
grid3D: {},
|
|
||||||
xAxis3D: {},
|
|
||||||
yAxis3D: {},
|
|
||||||
zAxis3D: {}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
|
@ -1,14 +1,17 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive } from "vue"
|
import { ref, reactive } from "vue"
|
||||||
import { useRouter } from "vue-router";
|
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 router = useRouter()
|
||||||
const show = ref(false)
|
const show = ref(false)
|
||||||
const account = ref('')
|
const account = ref('叙永镇')
|
||||||
const password = ref('')
|
const password = ref('xuyongzhen')
|
||||||
const isAccount = ref(false)
|
const isAccount = ref(false)
|
||||||
const isPassword = ref(false)
|
const isPassword = ref(false)
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
const submit = () => {
|
const submit = () => {
|
||||||
|
|
||||||
if (!account.value) {
|
if (!account.value) {
|
||||||
|
@ -24,17 +27,16 @@ const submit = () => {
|
||||||
else isPassword.value = false;
|
else isPassword.value = false;
|
||||||
|
|
||||||
|
|
||||||
loginAPI({
|
login({
|
||||||
account: account.value,
|
account: account.value,
|
||||||
password: password.value
|
password: password.value
|
||||||
}).then(res => {
|
}).then((res) => {
|
||||||
console.log(res);
|
userStore.setUserInfo(res.data.user);
|
||||||
// localStorage.setItem("TOKEN", 15455465465465)
|
userStore.setToken(res.data.token);
|
||||||
// router.replace('/')
|
router.push('/');
|
||||||
|
}).catch(e => {
|
||||||
|
console.log(e);
|
||||||
})
|
})
|
||||||
return
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue