weipengfei
/
trike-datav
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新

This commit is contained in:
weipengfei 2023-12-18 17:56:09 +08:00
parent 021d1d8376
commit 4b2a661487
11 changed files with 348 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
package-lock.json generated
View File

@ -15,6 +15,7 @@
"echarts-gl": "^2.0.9",
"mitt": "^3.0.1",
"pinia": "^2.1.7",
"v-click-outside": "^3.2.0",
"vue": "^3.3.8",
"vue-router": "^4.2.5"
},
@ -1229,6 +1230,14 @@
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
},
"node_modules/v-click-outside": {
"version": "3.2.0",
"resolved": "https://registry.npmmirror.com/v-click-outside/-/v-click-outside-3.2.0.tgz",
"integrity": "sha512-QD0bDy38SHJXQBjgnllmkI/rbdiwmq9RC+/+pvrFjYJKTn8dtp7Penf9q1lLBta280fYG2q53mgLhQ+3l3z74w==",
"engines": {
"node": ">=6"
}
},
"node_modules/vite": {
"version": "5.0.2",
"resolved": "https://registry.npmmirror.com/vite/-/vite-5.0.2.tgz",

1
package.json
View File

@ -16,6 +16,7 @@
"echarts-gl": "^2.0.9",
"mitt": "^3.0.1",
"pinia": "^2.1.7",
"v-click-outside": "^3.2.0",
"vue": "^3.3.8",
"vue-router": "^4.2.5"
},

29
src/components/areaList.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { defineProps, defineEmits, ref, nextTick, onMounted, } from "vue"
import { defineProps, defineEmits, ref, nextTick, onMounted, onUnmounted, } from "vue"
import { useRouter } from 'vue-router'
import { useAppStore } from "@/store/app.js";
@ -80,19 +80,28 @@ defineExpose({
open, close, show
})
const addressRef = ref(null);
const onClickOutside = (event) => {
const componentElement = addressRef.value;
if (!componentElement?.contains(event.target)) {
choseArea.value = false;
}
}
onMounted(() => {
// list.value.forEach(item => {
// if (item.pinyin == appStore.map_info) {
// choseTownFn(item)
// }
// })
document.addEventListener('click', onClickOutside);
})
onUnmounted(() => {
document.removeEventListener('click', onClickOutside);
})
</script>
<template>
<transition name="fade">
<div class="address" v-show="choseArea == true">
<transition name="fade" mode="out-in">
<div ref="addressRef" class="address" v-if="choseArea == true">
<div
class="address-li"
@click="choseTownFn(item)"
@ -110,8 +119,8 @@ onMounted(() => {
left: 1vw;
top: 18px;
position: absolute;
width: 10vw;
height: 18vh;
width: 8rem;
height: 15rem;
background-color: #001e32;
color: #c7dbe3;
z-index: 9999;

2
src/components/headView.vue
View File

@ -142,7 +142,7 @@ onMounted(() => {
</div>
<div class="head-title">吟龙物流信息监控溯源可视化大屏</div>
<div class="right">
<div class="item" @click="open" style="position: relative">
<div class="item" @click.stop="open" style="position: relative">
<img src="/src/assets/head_img/location.png" alt="" />
{{ info.address }}  
<areaList

2
src/main.js
View File

@ -4,7 +4,7 @@ import App from './App.vue'
import dataV from '@jiaminghi/data-view'
import './assets/font/fonts.css';
import router from "./router";
import { createPinia } from 'pinia'
import { createPinia } from 'pinia';
const pinia = createPinia();

2
src/view/delivery/components/bottom.vue
View File

@ -366,6 +366,7 @@ const initInfo = () => {
dateCangeCrderCount({
areaCode: appStore.delivery_address.areaCode,
streetCode: appStore.delivery_address.streetCode,
courier_id: appStore.delivery_address.courier_id
}).then(({ data }) => {
let y1 = [], y2 = [], y3 = [], y4 = [];
data.forEach((item) => {
@ -383,6 +384,7 @@ const initInfo = () => {
const pages = ref({
areaCode: appStore.delivery_address.areaCode,
streetCode: appStore.delivery_address.streetCode,
courier_id: appStore.delivery_address.courier_id,
page: 1,
limit: 30
})

5
src/view/delivery/components/left.vue
View File

@ -145,12 +145,14 @@ const loadInfo = () => {
latestLogistics({
areaCode: appStore.delivery_address.areaCode,
streetCode: appStore.delivery_address.streetCode,
courier_id: appStore.delivery_address.courier_id
}).then(res => {
info.value = res.data;
})
logisticsCount({
areaCode: appStore.delivery_address.areaCode,
streetCode: appStore.delivery_address.streetCode
streetCode: appStore.delivery_address.streetCode,
courier_id: appStore.delivery_address.courier_id
}).then(res => {
delivery.value = res.data;
datas.dataArr[0].value = res.data.pending_order_count;
@ -434,6 +436,7 @@ onMounted(() => {
height: 100%;
box-shadow: inset 1px 1px 40px rgba(91, 219, 246, 0.5);
pointer-events: none;
overflow: hidden;
}
}
.delivery {

5
src/view/delivery/components/right.vue
View File

@ -28,8 +28,9 @@ const max = ref(0)
const loadList = () => {
deliveredProductRanking({
areaCode: appStore.address.areaCode,
streetCode: appStore.address.streetCode,
areaCode: appStore.delivery_address.areaCode,
streetCode: appStore.delivery_address.streetCode,
courier_id: appStore.delivery_address.courier_id
}).then((res) => {
items.value = res.data;
res.data.forEach(e => {

4
src/view/index/components/centerItem1.vue
View File

@ -33,9 +33,9 @@ onMounted(() => {
<template>
<div class="box">
<div class="ball">
<!-- <div class="ball">
<ball class="ball1"></ball>
</div>
</div> -->
<centerMap v-if="list.length > 0" class="c-map" :list="list"></centerMap>
</div>
</template>

380
src/view/index/components/centerMap.vue
View File

@ -1,6 +1,6 @@
<script setup>
import { onMounted, reactive, ref, inject, nextTick } from "vue";
import * as echarts from 'echarts';
import * as echarts from "echarts";
import mitt from "@/utils/mitt";
import luxian from "@/assets/json/luxian.json";
import hejiang from "@/assets/json/hejiang.json";
@ -21,65 +21,66 @@ const userStore = useUserStore();
const props = defineProps({
list: {
type: Object,
default: () => []
}
})
default: () => [],
},
});
const mapType = reactive({
name: '',
json: ''
})
name: "",
json: "",
});
const changeType = (name = 'luxian') => {
const changeType = (name = "luxian") => {
mapType.name = name;
if (name == 'luxian') mapType.json = luxian;
if (name == 'hejiang') mapType.json = hejiang;
if (name == 'xuyong') mapType.json = xuyong;
if (name == 'gulin') mapType.json = gulin;
if (name == 'jiangyang') mapType.json = jiangyang;
if (name == 'longma') mapType.json = longma;
if (name == 'naxi') mapType.json = naxi;
}
if (name == "luxian") mapType.json = luxian;
if (name == "hejiang") mapType.json = hejiang;
if (name == "xuyong") mapType.json = xuyong;
if (name == "gulin") mapType.json = gulin;
if (name == "jiangyang") mapType.json = jiangyang;
if (name == "longma") mapType.json = longma;
if (name == "naxi") mapType.json = naxi;
};
let dataValue = []
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 ''
}
return "";
};
const initDataValue = () => {
dataValue.forEach(item => {
dataValue.forEach((item) => {
item.label = {
show: true, // 显示标签
formatter: customFormatter, // 标签内容，这里使用{name}表示数据项的name属性
fontSize: 12, // 字体大小
fontWeight: 'bold', // 字体粗细
color: '#fff', // 字体颜色
fontWeight: "bold", // 字体粗细
color: "#fff", // 字体颜色
offset: [-50, -40], // 标签偏移量，可根据需要调整
rich: {
img: {
backgroundColor: {
image: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/205f0202311291015185408.png'
image:
"https://lihai001.oss-cn-chengdu.aliyuncs.com/def/205f0202311291015185408.png",
},
height: 40,
width: 140,
color: '#fff',
color: "#fff",
fontSize: 14,
lineHeight: 14,
fontFamily: 'ifonts',
align: 'center',
padding: [0, 0, 20, 0]
fontFamily: "ifonts",
align: "center",
padding: [0, 0, 20, 0],
},
t: {
fontSize: 10,
align: 'center'
}
}
align: "center",
},
},
};
})
}
});
};
const echartsRef = ref(null);
let chart = null;
@ -96,11 +97,11 @@ const initMap = () => {
title: {
text: mapType.name,
textStyle: {
color: '#fff',
fontSize: 20
color: "#fff",
fontSize: 20,
},
top: '10%',
left: '10%'
top: "10%",
left: "10%",
},
//geo方式地理坐标系组件。
geo: [
@ -111,17 +112,17 @@ const initMap = () => {
show: false,
},
emphasis: {
disabled: true
disabled: true,
},
select: {
disabled: true
disabled: true,
},
// aspectScale:0.75, //长宽比
// roam: true, //是否允许缩放
itemStyle: {
normal: {
// color: '#546686', //地图背景色
borderColor: '#fff', //省市边界线00fcff 516a89
borderColor: "#fff", //省市边界线00fcff 516a89
borderWidth: 1,
areaColor: "#3f5171",
shadowColor: "#5bdbf6",
@ -140,16 +141,16 @@ const initMap = () => {
roam: false, //是否开启平游或缩放
show: true,
tooltip: {
show: false // 取消鼠标移上去时的文字提示
show: false, // 取消鼠标移上去时的文字提示
},
label: {
show: false
show: false,
},
emphasis: {
disabled: true
disabled: true,
},
select: {
disabled: true
disabled: true,
},
itemStyle: {
normal: {
@ -169,11 +170,11 @@ const initMap = () => {
},
],
tooltip: {
trigger: 'item',
trigger: "item",
formatter: function (params) {
let obj = dataValue.find(item => item.street_name == params.name);
let obj = dataValue.find((item) => item.street_name == params.name);
if (!obj) {
obj = params.data
obj = params.data;
}
if (obj) {
return `<div
@ -184,22 +185,28 @@ const initMap = () => {
align-items: center;
width: 180px;
height: 80px;">
<div style="font-size: 15px;font-family: 'ifonts';">${obj?.street_name || ''}</div>
<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>
<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 '';
} else return "";
},
position: 'top',
position: "top",
// extraCssText: 'background-color: transparent; border: none;pdding: 0;', // 设置额外的 CSS 样式
backgroundColor: 'rgba(0, 156, 255, 0)', //设置背景颜色
backgroundColor: "rgba(0, 156, 255, 0)", //设置背景颜色
borderColor: "rgba(0, 156, 255, 0)",
padding: 0,
textStyle: {
color: '#fff'
}
color: "#fff",
},
},
series: [
{
@ -207,15 +214,15 @@ const initMap = () => {
map: mapType.name,
label: {
emphasis: {
show: false
show: false,
},
color: 'rgba(0,0,0,0)'
color: "rgba(0,0,0,0)",
},
emphasis: {
disabled: false,
},
select: {
disabled: true
disabled: true,
},
itemStyle: {
normal: {
@ -224,8 +231,8 @@ const initMap = () => {
borderWidth: 1,
},
emphasis: {
areaColor: '#0680ca', // 鼠标经过时的背景色
}
areaColor: "#0680ca", // 鼠标经过时的背景色
},
},
},
{
@ -233,58 +240,279 @@ const initMap = () => {
type: "scatter",
coordinateSystem: "geo",
data: dataValue,
symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6eb37202311281655342626.png",
symbol:
"image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6eb37202311281655342626.png",
symbolSize: [40, 30],
hoverSymbolSize: [60, 45],
label: {
formatter: "",
position: "center",
show: false
show: false,
},
emphasis: {
label: {
show: false
}
}
show: false,
},
},
},
],
}
};
option = {
geo: [
{
type: "map",
map: mapType.name,
aspectScale: 1,
zoom: 1,
layoutCenter: ["50%", "51%"],
layoutSize: "110%",
roam: false,
label: {
emphasis: {
show: false,
},
},
show: true,
map: mapType.name,
zoom: 1,
aspectScale: 1,
roam: false,
itemStyle: {
normal: {
areaColor: "transparent",
},
emphasis: {
areaColor: {
type: "radial", // linear 线性渐变 radial径向渐变
x: 0.5, // 0.5为正中心，如果小于渐变中心靠左
y: 0.5, // 0.5为正中心，如果小于渐变中心靠上
r: 1,
colorStops: [
{
offset: 0,
color: "#A46759", // 0% 处的颜色
},
{
offset: 0.1,
color: "#A46759", // 0% 处的颜色
},
{
offset: 1,
color: "#FFB821", // 100% 处的颜色
},
],
},
// borderWidth: 0
},
},
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",
},
},
},
{
type: "map",
map: mapType.name,
zlevel: -1,
aspectScale: 1,
zoom: 1,
layoutCenter: ["50%", "51%"],
layoutSize: "110%",
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: mapType.name,
zlevel: -1,
aspectScale: 1,
zoom: 1,
layoutCenter: ["50%", "52%"],
layoutSize: "110%",
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: mapType.name,
zlevel: -2,
aspectScale: 1,
zoom: 1,
layoutCenter: ["50%", "53%"],
layoutSize: "110%",
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: mapType.name,
zlevel: -4,
aspectScale: 1,
zoom: 1,
layoutCenter: ["50%", "54%"],
layoutSize: "110%",
roam: false,
silent: true,
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)",
},
},
},
],
tooltip: {
show: true
},
color: '#1f7df5',
series: [
{
name: "地点名称",
type: "effectScatter",
coordinateSystem: "geo",
colorBy: 'series',
rippleEffect: {
period: 4, //动画时间，值越小速度越快
brushType: "fill", //波纹绘制方式 stroke, fill
scale: 12, //波纹圆环最大限制，值越大波纹越大
number: 2,
},
// 发散点的大小
symbolSize: function (val) {
return 4;
// return val[2] / 10;
},
data: dataValue,
},
],
};
// 使用配置项显示图表
chart.setOption(option);
}
};
const mapInfo = () => {
let area = appStore.area.find(item => item.code == appStore.address.areaCode);
let area = appStore.area.find(
(item) => item.code == appStore.address.areaCode
);
let map;
if (area.name == "泸县") map = luxian_geo;
if (area.name == "江阳区") map = jiangyang_geo;
if (area.name == "叙永县") map = xuyong_geo;
map = JSON.parse(JSON.stringify(map));
if (appStore.address.streetCode) {
let street = appStore.street.find(item => item.code == appStore.address.streetCode);
let street = appStore.street.find(
(item) => item.code == appStore.address.streetCode
);
initStreetMap(street, map);
dataValue = dataValue.filter(
(item) => item.street_code == appStore.address.streetCode
);
} else {
mapType.name = area.name;
mapType.json = map;
}
}
};
const initStreetMap = (street, map) => {
map.features = map.features.filter(item => item.properties.name == street.name);
map.features = map.features.filter(
(item) => item.properties.name == street.name
);
mapType.name = street.name;
mapType.json = map;
}
};
onMounted(() => {
dataValue = props.list;
changeType('xuyong');
changeType("xuyong");
mapInfo();
initDataValue();
// initDataValue();
setTimeout(() => {
initMap();
})
})
});
});
</script>
<template>

2
src/view/login/index.vue
View File

@ -123,7 +123,7 @@ const submit = () => {
.login-box {
width: 100%;
height: 100%;
background-image: url(../../assets/login_img/bg.png);
background-image: url(https://lihai001.oss-cn-chengdu.aliyuncs.com/def/a0732202312131402421186.png);
background-size: 100% 100%;
overflow: hidden;
position: relative;