This commit is contained in:
weipengfei 2023-12-08 18:42:43 +08:00
parent 3a5209dada
commit 32e3192e17
11 changed files with 165 additions and 6541 deletions

View File

@ -1,4 +1,5 @@
<script setup> <script setup>
</script> </script>
<template> <template>

View File

@ -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 });

BIN
src/assets/img/item-box.png Normal file

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

26
src/store/user.js Normal file
View File

@ -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
}
})

View File

@ -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%;

View File

@ -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%;

View File

@ -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,
} }
} }
}; };

View File

@ -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(() => {

View File

@ -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>