@@ -211,7 +243,16 @@ onMounted(() => {
font-family: "ifonts", sans-serif;
font-size: 2rem;
height: 100%;
- line-height: 50rpx;
+ display: flex;
+ align-items: center;
+ .logo{
+ height: 2.5rem;
+ width: 2.5rem;
+ }
+ span{
+ padding-bottom: 0.5rem;
+ padding-left: 0.5rem;
+ }
}
.left {
align-self: flex-end;
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 01b8227..2d4249a 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -2,6 +2,7 @@
import headView from "@/components/headView.vue";
import Businesses from "@/components/Businesses.vue";
import { ref, nextTick, provide, onMounted, onUnmounted } from "vue";
+import mitt from "@/utils/mitt";
const show = ref(true);
const reload = () => {
@@ -23,10 +24,13 @@ const startReLoad = () => {
}
onMounted(() => {
- startReLoad();
- window.addEventListener('mousemove', startReLoad);
- window.addEventListener('keypress', startReLoad);
- window.addEventListener('click', startReLoad);
+ mitt.on('map_info', e => {
+ reload();
+ startReLoad();
+ window.addEventListener('mousemove', startReLoad);
+ window.addEventListener('keypress', startReLoad);
+ window.addEventListener('click', startReLoad);
+ })
})
onUnmounted(() => {
@@ -40,7 +44,7 @@ onUnmounted(() => {
-
+
diff --git a/src/store/app.js b/src/store/app.js
index d2915a2..0dd8681 100644
--- a/src/store/app.js
+++ b/src/store/app.js
@@ -12,14 +12,13 @@ export const useAppStore = defineStore('app', () => {
const address = ref(JSON.parse(localStorage.getItem('address') || '{}'));
if (!address.value.areaCode) {
- address.value = { areaCode: 510524, streetCode: 510524100 };
+ address.value = { areaCode: 510521, streetCode: '' };
}
// 测试使用的初始化配置
// address.value = { areaCode: 510524, streetCode: 510524100 };
const setAddress = (e) => {
- console.log('更新', e);
address.value.areaCode = e.areaCode;
address.value.streetCode = e.streetCode;
localStorage.setItem('address', JSON.stringify(e));
diff --git a/src/view/delivery/components/center.vue b/src/view/delivery/components/center.vue
index b11e540..a6767d6 100644
--- a/src/view/delivery/components/center.vue
+++ b/src/view/delivery/components/center.vue
@@ -11,6 +11,9 @@ import gulin from "@/assets/json/gulin.json";
import jiangyang from "@/assets/json/jiangyang.json";
import longma from "@/assets/json/longma.json";
import naxi from "@/assets/json/naxi.json";
+import luxian_geo from "@/utils/luxian_geo.js";
+import xuyong_geo from "@/utils/xuyong_geo.js";
+import jiangyang_geo from "@/utils/jiangyang_geo.js";
import { useAppStore } from "@/store/app.js";
import geoJSON from "@/utils/geo.js";
@@ -91,7 +94,7 @@ const initMap = () => {
if (chart == null) {
chart = echarts.init(echartsRef.value);
}
- echarts.registerMap(mapType.name, geoJson);
+ echarts.registerMap(mapType.name, mapType.json);
let option = {
animation: false,
@@ -271,6 +274,206 @@ const initMap = () => {
},
],
}
+ option = {
+ geo: [
+ {
+ type: "map",
+ map: mapType.name,
+ aspectScale: 1,
+ zoom: 0.9,
+ layoutCenter: ["50%", "51%"],
+ layoutSize: "110%",
+ roam: false,
+ label: {
+ emphasis: {
+ show: false,
+ },
+ },
+ show: true,
+ map: mapType.name,
+ zoom: 0.9,
+ aspectScale: 1,
+ roam: false,
+ itemStyle: {
+ normal: {
+ areaColor: "transparent",
+ borderColor: "#5AD0E0",
+ },
+ 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) {
+ 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: 0.9,
+ 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: 0.9,
+ layoutCenter: ["50%", "52%"],
+ layoutSize: "110%",
+ roam: false,
+ silent: true,
+
+ itemStyle: {
+ normal: {
+ borderWidth: 1,
+ borderColor: "rgba(17, 149, 216,0.6)",
+ borderColor: "rgba(90, 208, 224,0.5)",
+ 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: 0.9,
+ layoutCenter: ["50%", "53%"],
+ layoutSize: "110%",
+ roam: false,
+ silent: true,
+
+ itemStyle: {
+ normal: {
+ borderWidth: 5,
+ borderColor: "rgba(11, 43, 97,0.8)",
+ // borderColor: "rgba(5,9,57,0.6)",
+ shadowColor: "rgba(29, 111, 165,1)",
+ shadowOffsetY: 10,
+ 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);
@@ -283,6 +486,38 @@ const initMap = () => {
});
}
+const mapInfo = () => {
+ 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
+ );
+ initStreetMap(street, map);
+ dataValue = dataValue.filter(
+ (item) => item.street_code == appStore.address.streetCode
+ );
+ } if (route.query.name) {
+ initStreetMap({name: route.query.name}, map);
+ } else {
+ mapType.name = area.name;
+ mapType.json = map;
+ }
+};
+const initStreetMap = (street, map) => {
+ map.features = map.features.filter(
+ (item) => item?.properties?.name == street?.name
+ );
+ mapType.name = street?.name;
+ mapType.json = map;
+};
+
const filterMap = () => {
geoJson.features = geoJson.features.filter((item) => {
return item.properties.name == route.query.name
@@ -299,12 +534,14 @@ onMounted(() => {
name: '福集镇养殖基地',
value: [105.36, 29.20]
}
- changeType('luxian');
+ // changeType('luxian');
+ mapInfo();
initDataValue();
initMap();
nextTick(() => {
mitt.on('map_info', e => {
- changeType(e.pinyin);
+ // changeType(e.pinyin);
+ mapInfo();
initDataValue();
initMap();
})
diff --git a/src/view/index/components/center.vue b/src/view/index/components/center.vue
index 14c8a8f..3706ef1 100644
--- a/src/view/index/components/center.vue
+++ b/src/view/index/components/center.vue
@@ -11,6 +11,9 @@ import gulin from "@/assets/json/gulin.json";
import jiangyang from "@/assets/json/jiangyang.json";
import longma from "@/assets/json/longma.json";
import naxi from "@/assets/json/naxi.json";
+import luxian_geo from "@/utils/luxian_geo.js";
+import xuyong_geo from "@/utils/xuyong_geo.js";
+import jiangyang_geo from "@/utils/jiangyang_geo.js";
import geoJSON from "@/utils/geo.js";
import { useAppStore } from "@/store/app.js";
import { sendMsg } from "@/api/sendMsg.js";
@@ -91,7 +94,7 @@ const initMap = () => {
if (chart == null) {
chart = echarts.init(echartsRef.value);
}
- echarts.registerMap(mapType.name, geoJSON);
+ echarts.registerMap(mapType.name, mapType.json);
let option = {
animation: false,
@@ -256,14 +259,242 @@ const initMap = () => {
},
],
}
+ 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",
+ borderColor: "#5AD0E0",
+ },
+ 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) {
+ 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: "rgba(90, 208, 224,0.5)",
+ 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%", "53%"],
+ layoutSize: "110%",
+ roam: false,
+ silent: true,
+
+ itemStyle: {
+ normal: {
+ borderWidth: 5,
+ borderColor: "rgba(11, 43, 97,0.8)",
+ // borderColor: "rgba(5,9,57,0.6)",
+ shadowColor: "rgba(29, 111, 165,1)",
+ shadowOffsetY: 10,
+ shadowBlur: 10,
+ areaColor: "rgba(5,21,35,0.1)",
+ },
+ },
+ },
+ ],
+ tooltip: {
+ trigger: 'item',
+ formatter: function (params) {
+ // console.log(params);
+ if (params.data) {
+ return `
+
基地名称
+
${params.data.name}
+
