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

新增了双屏控制

This commit is contained in:
weipengfei 2024-02-03 16:50:09 +08:00
parent a857ace558
commit 43489b48c2
10 changed files with 585 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/index.js
View File

@ -14,3 +14,8 @@ export const getArea = (data) => {
export const getStreet = (data) => {
return axios.get('city/get_street', { params: data });
}
// 养殖基地
export const getfarmCount = (data) => {
return axios.get('dataview.farm/farmCount ', { params: data });
}

BIN
src/assets/head_img/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
src/assets/head_img/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

2
src/components/areaList.vue
View File

@ -77,7 +77,7 @@ const show = () => {
}
defineExpose({
open, close, show
open, close, show, choseTownFn
})
const addressRef = ref(null);

69
src/components/headView.vue
View File

@ -8,6 +8,7 @@ import axios from "axios";
import { getStreet } from "@/api/index.js";
import { useAppStore } from "@/store/app.js";
import { useUserStore } from "@/store/user.js";
import { sendMsg } from "@/api/sendMsg.js"
const appStore = useAppStore();
const userSotre = useUserStore();
@ -16,6 +17,7 @@ const reload = inject('reload');
const info = reactive({
address: '泸县',
areaName: '泸县',
pinyin: 'luxian'
})
@ -34,8 +36,21 @@ const offAreaList = (e) => {
}
})
info.address = e.name;
mitt.emit('map_info', info);
reload();
// mitt.emit('map_info', info);
// reload();
if(route.query.type=='main') {
sendMsg({ channel: 'user-breed-datav', event: 'changMap', data: {
areaName: info.areaName,
name: e.name
}})
} else {
router.push({
path: '/delivery',
query: {
name: e.name
}
})
}
}
const router = useRouter()
@ -43,7 +58,13 @@ const route = useRoute()
const navToDelivery = () => {
if (route.path == '/') router.push('/delivery');
else router.back();
else {
appStore.setAddress({
areaCode: appStore.address.areaCode,
streetCode: ''
})
router.push('/?areaCode='+appStore.address.areaCode);
}
}
let nowTime = ref([]);
@ -82,6 +103,7 @@ const initList = async () => {
let area = appStore.area;
if (userSotre.userInfo.street_code) {
let data = street.find(item => item.code == appStore.address.streetCode);
info.areaName = data?.name;
info.address = data?.name;
list.value = [];
appStore.setAddress({
@ -90,8 +112,10 @@ const initList = async () => {
})
} else {
let data = area.find(item => item.code == appStore.address.areaCode);
info.areaName = data?.name;
info.address = data?.name;
list.value = [data, ...street];
// list.value = [data, ...street];
list.value = street;
if (appStore.address.streetCode) {
data = street.find(item => item.code == appStore.address.streetCode);
info.address = data?.name;
@ -121,6 +145,12 @@ const changeTime = (e) => {
}
onMounted(() => {
if (route.query.areaCode) {
appStore.setAddress({
areaCode: route.query.areaCode,
streetCode: route.query.streetCode || "",
});
}
initList();
// 每秒钟更新一次时间
@ -130,13 +160,15 @@ onMounted(() => {
mitt.on('changMap', (e)=>{
if(e.areaName==info.pinyin){
router.push({
path: '/delivery',
query: {
name: e.name
}
})
if(e.areaName==info.areaName){
let c = list.value.find(item=>item.name==e.name);
if(c) areaListRef.value.choseTownFn(c);
// router.push({
// path: '/delivery',
// query: {
// name: e.name
// }
// })
}
})
})
@ -147,7 +179,7 @@ onMounted(() => {
<div class="left">
<img
class="logo item"
src="/src/assets/head_img/logo.png"
src="/src/assets/head_img/back.png"
@click="navToDelivery"
/>
<datePicker multiCalendars range @changeTime="changeTime" />
@ -155,7 +187,7 @@ onMounted(() => {
<img class="icon" src="/src/assets/head_img/icon.png" alt="" />
<div class="item">{{ nowTime[1] }}</div>
</div>
<div class="head-title">吟龙养殖溯源系统可视化大屏</div>
<div class="head-title"><img class="logo" src="/src/assets/head_img/logo.png"/> <span>吟龙养殖溯源系统可视化大屏</span></div>
<div class="right">
<div class="item" @click.stop="open" style="position: relative">
<img src="/src/assets/head_img/location.png" alt="" />
@ -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;

6
src/layout/index.vue
View File

@ -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(() => {
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(() => {
<template>
<dv-full-screen-container class="body">
<headView></headView>
<div style="height: calc(100% - 3.75rem)">
<div style="height: calc(100% - 3.75rem);background-color: rgba(0, 0, 0, 0.4);">
<router-view v-slot="{ Component }">
<transition name="scale" mode="out-in">
<component :is="Component"></component>

3
src/store/app.js
View File

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

243
src/view/delivery/components/center.vue
View File

@ -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 `<div
style="background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/34876202312131355137572.png');
background-size: 100% 100%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
width: 180px;
height: 80px;">
<div style="font-size: 20px;font-family: 'ifonts';height: 50px;display: flex;
justify-content: center;
align-items: center;">${params.name}</div>
</div>`;
},
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();
})

284
src/view/index/components/center.vue
View File

@ -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,13 +259,241 @@ 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 `<div
style="background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/34876202312131355137572.png');
background-size: 100% 100%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
width: 180px;
height: 80px;">
<div style="font-size: 20px;font-family: 'ifonts';height: 50px;display: flex;
justify-content: center;
align-items: center;">${params.name}</div>
</div>`;
},
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 `<div
style="background-image: url(\'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/34876202312131355137572.png\');
background-size: 100% 100%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
width: 180px;
height: 80px;">
<div style="font-size: 12px;height: 15px;">基地名称</div>
<div style="font-size: 15px;font-family: 'ifonts';height: 50px;display: flex;
justify-content: center;
align-items: center;">${params.data.name}</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'
}
},
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);
chart.off('click') // 防止单次点击执行多次事件
chart.on('click', function (params) {
if (params.componentType === 'series') {
if (params.seriesType === 'map') {
console.log('点击',params);
if (params.componentType === 'geo') {
if(route.query.type=='main') {
sendMsg({ channel: 'user-breed-datav', event: 'changMap', data: {
areaName: mapType.name,
@ -277,23 +508,52 @@ 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
);
} 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;
};
onMounted(() => {
dataValue = props.list;
changeType('luxian');
// changeType('luxian');
mapInfo();
initDataValue();
initMap();
nextTick(() => {
mitt.on('map_info', e => {
changeType(e.pinyin);
initDataValue();
initMap();
})
})
// nextTick(() => {
// mitt.on('map_info', e => {
// changeType(e.pinyin);
// initDataValue();
// initMap();
// })
// })
})
</script>

1
vite.config.js
View File

@ -6,6 +6,7 @@ import path from 'path';
export default defineConfig({
plugins: [vue()],
server: {
port: '8788',
host: '0.0.0.0',
},
optimizeDeps: {