This commit is contained in:
weipengfei 2024-02-19 18:00:20 +08:00
parent 6c6f065cae
commit 493ad1d66c
15 changed files with 1052 additions and 80 deletions

View File

@ -16,7 +16,27 @@ export const getBreedTypeCount = (data) => {
return axios.get('dataview.farm/breedTypeCount', { params: data });
}
// 养殖产品溯源
// 监测设备在线/警告统计
export const getDeviceCount = (data) => {
return axios.get('dataview.device/deviceCount', { params: data });
}
// 基地设备警告
export const getDeviceAlarmCount = (data) => {
return axios.get('dataview.device/deviceAlarmCount', { params: data });
}
// 具体基地监测设备在线/警告统计
export const getFarmDeviceCount = (data) => {
return axios.get('dataview.farm/deviceCount', { params: data });
}
// 具体基地设备警告
export const getFarmDeviceAlarmCount = (data) => {
return axios.get('dataview.farm/deviceAlarmCount', { params: data });
}
// 具体基地设备警告
export const getFarmInfo = (data) => {
return axios.get('dataview.farm/farmInfo', { params: data });
}

View File

@ -56,15 +56,25 @@ const offAreaList = (e) => {
const router = useRouter()
const route = useRoute()
const navToDelivery = () => {
if (route.path == '/') router.push('/delivery');
else {
const navTo = () => {
if (route.path == '/') return location.reload();
else if(route.path == '/indexc'){
appStore.setAddress({
areaCode: appStore.address.areaCode,
streetCode: ''
})
router.push('/?areaCode='+appStore.address.areaCode);
}
else if(route.path == '/delivery') {
router.push({
path: '/indexc',
query: {
areaCode: route.query.areaCode,
streetCode: route.query.streetCode,
name: route.query.name
}
})
}
}
let nowTime = ref([]);
@ -180,7 +190,7 @@ onMounted(() => {
<img
class="logo item"
src="/src/assets/head_img/back.png"
@click="navToDelivery"
@click="navTo"
/>
<datePicker multiCalendars range @changeTime="changeTime" />
<!-- <div class="item">{{ nowTime[0] }}</div> -->

View File

@ -11,6 +11,11 @@ const routes = [
name: '',
component: () => import('../view/index/index.vue')
},
{
path: '/indexc',
name: 'indexc',
component: () => import('../view/indexc/index.vue')
},
{
path: '/delivery',
name: 'delivery',

35
src/utils/gulin_geo.js Normal file

File diff suppressed because one or more lines are too long

38
src/utils/hejiang_geo.js Normal file

File diff suppressed because one or more lines are too long

22
src/utils/longma_geo.js Normal file

File diff suppressed because one or more lines are too long

24
src/utils/naxi_geo.js Normal file

File diff suppressed because one or more lines are too long

View File

@ -1,17 +1,42 @@
<script setup>
import { ref, reactive, onMounted } from "vue"
import { getFarmDeviceCount, getFarmDeviceAlarmCount } from "@/api/api.js"
import { useAppStore } from "@/store/app.js";
import { useRoute } from "vue-router";
const appStore = useAppStore();
const route = useRoute();
const leftInfo = ref({
offline: 0,
online: 0,
total: 0,
todayAlarmCount: 0,
alarmCount: 0
})
const initDeviceCount = ()=>{
getFarmDeviceCount({
areaCode: appStore.address.areaCode,
streetCode: appStore.address.streetCode || route.query.streetCode,
id: route.query.id || undefined
}).then(res=>{
Object.keys(leftInfo.value).forEach(key=>{
if(res.data[key]) leftInfo.value[key] = res.data[key];
})
})
}
const initData = (data) => {
let arr = [];
for (let i = 0; i < 10; i++) {
for (let i = 0; i < data.length; i++) {
arr.push(
[
`${i + 1}`,
`-`,
`-`,
`-`,
`-`,
`-`,
`${data[i].code||'-'}`,
`${data[i].name||'-'}`,
`${data[i].create_time||'-'}`,
`${data[i].alarm_value||'-'}`,
`${data[i].alarm_reason||'-'}`,
`<span class="btn">查看详情></span>`,
]
)
@ -27,7 +52,6 @@ const list = reactive({
`设备名称`,
`警告时间`,
`警告数据`,
`设备图片`,
`警告原因`,
`解决方案`,
],
@ -36,19 +60,35 @@ const list = reactive({
headerBGC: 'rgba(0, 156, 255, 0.4)',
oddRowBGC: 'rgba(91, 219, 246, 0.10)',
evenRowBGC: '',
columnWidth: [100,150,200],
align: 'center',
rowNum: 9
rowNum: 6
})
const show = ref(false);
const showInfo = ref({});
const clickList = (e) => {
console.log(e);
console.log(e.rowIndex);
if(e.columnIndex==5||e.columnIndex==6){
showInfo.value = deviceList.value[e.rowIndex];
show.value = true;
}
}
const deviceList = ref([]);
const initDeviceAlarmCount = ()=>{
getFarmDeviceAlarmCount({
areaCode: appStore.address.areaCode,
streetCode: appStore.address.streetCode || route.query.streetCode,
id: route.query.id || undefined
}).then(res=>{
deviceList.value = res.data.list;
initData(res.data.list);
})
}
onMounted(() => {
initData();
initDeviceCount();
initDeviceAlarmCount();
})
</script>
@ -65,34 +105,34 @@ onMounted(() => {
<img src="/src/assets/index_img/ball.png" />
<div class="count">
<div>设备总数</div>
<div>12</div>
<div>{{ leftInfo.total }}</div>
</div>
</div>
<div class="ball1 ball-item">
<div class="count">
<img src="/src/assets/index_img/ball1.png" />
<span>{{ 6 }}</span>
<span>{{ leftInfo.offline }}</span>
</div>
离线设备
</div>
<div class="ball2 ball-item">
<div class="count">
<img src="/src/assets/index_img/ball2.png" />
<span>{{ 6 }}</span>
<span>{{ leftInfo.todayAlarmCount }}</span>
</div>
今日警告数
</div>
<div class="ball3 ball-item">
<div class="count">
<img src="/src/assets/index_img/ball1.png" />
<span>{{ 6 }}</span>
<span>{{ leftInfo.online }}</span>
</div>
在线设备
</div>
<div class="ball4 ball-item">
<div class="count">
<img src="/src/assets/index_img/ball2.png" />
<span>{{ 6 }}</span>
<span>{{ leftInfo.alarmCount }}</span>
</div>
警告总数
</div>
@ -100,7 +140,7 @@ onMounted(() => {
</div>
<div class="view box2">
<div class="box-title">
<div class="text">养殖基地视频监控</div>
<div class="text">养殖基地设备警告</div>
<div class="bg"></div>
</div>
<div class="c-box">
@ -121,29 +161,30 @@ onMounted(() => {
<div class="info">
<div class="info-item">
<div class="tips">设备编号:</div>
<div>25566333</div>
<div>{{ showInfo.code || '-' }}</div>
</div>
<div class="info-item">
<div class="tips">设备名称:</div>
<div>甲烷监测设备</div>
<div>{{ showInfo.name || '-' }}</div>
</div>
<div class="info-item">
<div class="tips">警告事件:</div>
<div>2023-12-7 12:30</div>
<div class="tips">警告时间:</div>
<div>{{ showInfo.create_time || '-' }}</div>
</div>
</div>
<div class="info">
<div class="info-item">
<div class="tips">设备图片:</div>
<img src="/src/assets/index_img/icon2.png" alt="" />
<img class="img" :src="showInfo.image" alt="" />
</div>
<div class="info-item">
<div class="tips">警告原因:</div>
<div>甲烷含量超标, 同时浓度也超标了</div>
<div>{{ showInfo.alarm_reason || '-' }}</div>
</div>
<div class="info-item" style="flex: 1">
<div class="tips">警告数据:</div>
<div>甲烷含量>1000ppm 浓度>120</div>
<div v-if="(typeof showInfo.alarm_value == 'object')">{{ showInfo.alarm_value.join(', ') || '-' }}</div>
<div v-else>{{ showInfo.alarm_value || '-' }}</div>
</div>
</div>
<div class="info">
@ -151,10 +192,9 @@ onMounted(() => {
<div class="tips">解决方案:</div>
<div class="list">
<div>
确保良好的通风系统提供良好的通风以排除甲烷气体这可以包括安装有效的排气扇通风管道和通风设备以确保空气流动
检修和维护设备定期检查和维护可能产生甲烷泄漏的设备如管道阀门连接件等确保它们的密封性和操作正常及时修复任何泄漏
{{ showInfo.alarm_resolution || '-' }}
</div>
<div>1.优化饲养管理 2.粪便处理设施改</div>
<!-- <div>1.优化饲养管理 2.粪便处理设施改</div> -->
</div>
</div>
</div>
@ -339,6 +379,12 @@ onMounted(() => {
text-align: start;
padding-right: 0.4rem;
box-sizing: border-box;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3; /* 显示的行数 */
line-height: 1.5rem; /* 行高 */
}
.tips {
flex-shrink: 0;
@ -346,6 +392,10 @@ onMounted(() => {
.list {
padding-bottom: 4rem;
}
.img{
height: 4.5rem;
width: 4.5rem;
}
}
}
}

View File

@ -14,6 +14,10 @@ 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 longma_geo from "@/utils/longma_geo.js";
import gulin_geo from "@/utils/gulin_geo.js";
import hejiang_geo from "@/utils/hejiang_geo.js";
import naxi_geo from "@/utils/naxi_geo.js";
import { useAppStore } from "@/store/app.js";
import geoJSON from "@/utils/geo.js";
@ -499,6 +503,10 @@ const mapInfo = () => {
if (area.name == "泸县") map = luxian_geo;
if (area.name == "江阳区") map = jiangyang_geo;
if (area.name == "叙永县") map = xuyong_geo;
if (area.name == "龙马潭区") map = longma_geo;
if (area.name == "纳溪区") map = naxi_geo;
if (area.name == "合江县") map = hejiang_geo;
if (area.name == "古蔺县") map = gulin_geo;
map = JSON.parse(JSON.stringify(map));
if (appStore.address.streetCode) {
let street = appStore.street.find(

View File

@ -1,18 +1,31 @@
<script setup>
import { ref, reactive, onMounted } from "vue"
import { getFarmInfo } from "@/api/api.js"
import * as echarts from "echarts"
import videoFlv from "@/components/videoFlv.vue";
import { useAppStore } from "@/store/app.js";
import { useRoute } from "vue-router";
const appStore = useAppStore();
const route = useRoute();
const circleRef = ref(null);
const initCircle = () => {
const echart = echarts.init(circleRef.value);
let color = ['#00A8FF', '#4B5FDB', '#00FFCB', '#5BDBF6'];
let data = [
{ value: 400, name: '本地鸡' },
{ value: 435, name: '鸭' },
{ value: 580, name: '鹅' },
{ value: 884, name: '猪' },
]
// let data = [
// { value: 400, name: '' },
// { value: 435, name: '' },
// { value: 580, name: '' },
// { value: 884, name: '' },
// ]
let data = breedTypeRows.value.map(item=>{
return {
name: item.name,
value: item.animalCount
}
});
let option = {
tooltip: {
trigger: "item",
@ -109,6 +122,14 @@ const initMap = () => {
return color
}
let dataText = [];
let dataValue = [];
breedTypeRows.value.forEach(item=>{
dataText.push(item.name);
dataValue.push(item.animalCount);
})
let option = {
grid: {
left: '12%',
@ -144,7 +165,7 @@ const initMap = () => {
}
},
xAxis: {
data: ['鸡', '鸭', '鹅', '猪'],
data: dataText,
axisTick: {
show: false
},
@ -215,29 +236,48 @@ const initMap = () => {
opacity: 1
}
},
data: [726, 622, 820, 454],
data: dataValue,
z: 10
}]
};
echart.setOption(option)
}
onMounted(() => {
const farmInfo = ref({});
const breedTypeRows = ref([]);
const getInfo = ()=>{
getFarmInfo({
areaCode: appStore.address.areaCode,
streetCode: appStore.address.streetCode || route.query.streetCode,
id: route.query.id || undefined
}).then(res=>{
farmInfo.value = res.data.farmInfo;
breedTypeRows.value = res.data.breedTypeRows;
initCircle();
initMap();
})
}
onMounted(() => {
getInfo();
// initCircle();
// initMap();
})
</script>
<template>
<div class="box">
<div class="view box1">
<div class="box-title">
<div class="text">泸县原生态养殖基地</div>
<div class="text">{{ farmInfo.farm_name }}</div>
<div class="bg"></div>
</div>
<div class="c-box">
<img src="/src/assets/index_img/video.png" />
<div class="name">泸县原生态养殖基地</div>
<videoFlv
class="img"
:url="farmInfo.video_url"
/>
<div class="name">{{ farmInfo.farm_name }}</div>
</div>
</div>
<div class="view box2">
@ -301,7 +341,7 @@ onMounted(() => {
flex-direction: column;
justify-content: space-evenly;
align-items: center;
img {
.img {
height: 76%;
width: 96%;
}

View File

@ -1,14 +1,18 @@
<script setup>
import { ref, reactive, onMounted } from "vue"
import { getDeviceCount } from "@/api/api.js"
import { getDeviceCount, getDeviceAlarmCount } from "@/api/api.js"
import { useAppStore } from "@/store/app.js";
import { useRoute } from "vue-router";
const appStore = useAppStore();
const route = useRoute();
const leftInfo = ref({
offline: 0,
online: 0,
total: 0
total: 0,
todayAlarmCount: 0,
alarmCount: 0
})
const initDeviceCount = ()=>{
getDeviceCount({
@ -24,15 +28,14 @@ const initDeviceCount = ()=>{
const initData = (data) => {
let arr = [];
for (let i = 0; i < 10; i++) {
for (let i = 0; i < data.length; i++) {
arr.push(
[
`${i + 1}`,
`-`,
`-`,
`-`,
`-`,
`-`,
`${data[i].code||'-'}`,
`${data[i].name||'-'}`,
`${data[i].create_time||'-'}`,
`${data[i].alarm_value||'-'}`,
`${data[i].alarm_reason||'-'}`,
`<span class="btn">查看详情></span>`,
]
)
@ -48,7 +51,6 @@ const list = reactive({
`设备名称`,
`警告时间`,
`警告数据`,
`设备图片`,
`警告原因`,
`解决方案`,
],
@ -57,20 +59,35 @@ const list = reactive({
headerBGC: 'rgba(0, 156, 255, 0.4)',
oddRowBGC: 'rgba(91, 219, 246, 0.10)',
evenRowBGC: '',
columnWidth: [100,150,200],
align: 'center',
rowNum: 9
rowNum: 6
})
const show = ref(false);
const showInfo = ref({});
const clickList = (e) => {
console.log(e);
console.log(e.rowIndex);
if(e.columnIndex==5||e.columnIndex==6){
showInfo.value = deviceList.value[e.rowIndex];
show.value = true;
}
}
const deviceList = ref([]);
const initDeviceAlarmCount = ()=>{
getDeviceAlarmCount({
areaCode: appStore.address.areaCode,
streetCode: appStore.address.streetCode || route.query.streetCode,
id: route.query.id || undefined
}).then(res=>{
deviceList.value = res.data.list;
initData(res.data.list);
})
}
onMounted(() => {
initData();
initDeviceCount();
initDeviceAlarmCount();
})
</script>
@ -100,7 +117,7 @@ onMounted(() => {
<div class="ball2 ball-item">
<div class="count">
<img src="/src/assets/index_img/ball2.png" />
<span>{{ 6 }}</span>
<span>{{ leftInfo.todayAlarmCount }}</span>
</div>
今日警告数
</div>
@ -114,7 +131,7 @@ onMounted(() => {
<div class="ball4 ball-item">
<div class="count">
<img src="/src/assets/index_img/ball2.png" />
<span>{{ 6 }}</span>
<span>{{ leftInfo.alarmCount }}</span>
</div>
警告总数
</div>
@ -122,7 +139,7 @@ onMounted(() => {
</div>
<div class="view box2">
<div class="box-title">
<div class="text">养殖基地视频监控</div>
<div class="text">养殖基地设备警告</div>
<div class="bg"></div>
</div>
<div class="c-box">
@ -143,29 +160,30 @@ onMounted(() => {
<div class="info">
<div class="info-item">
<div class="tips">设备编号:</div>
<div>25566333</div>
<div>{{ showInfo.code || '-' }}</div>
</div>
<div class="info-item">
<div class="tips">设备名称:</div>
<div>甲烷监测设备</div>
<div>{{ showInfo.name || '-' }}</div>
</div>
<div class="info-item">
<div class="tips">警告事件:</div>
<div>2023-12-7 12:30</div>
<div class="tips">警告时间:</div>
<div>{{ showInfo.create_time || '-' }}</div>
</div>
</div>
<div class="info">
<div class="info-item">
<div class="tips">设备图片:</div>
<img src="/src/assets/index_img/icon2.png" alt="" />
<img class="img" :src="showInfo.image" alt="" />
</div>
<div class="info-item">
<div class="tips">警告原因:</div>
<div>甲烷含量超标, 同时浓度也超标了</div>
<div>{{ showInfo.alarm_reason || '-' }}</div>
</div>
<div class="info-item" style="flex: 1">
<div class="tips">警告数据:</div>
<div>甲烷含量>1000ppm 浓度>120</div>
<div v-if="(typeof showInfo.alarm_value == 'object')">{{ showInfo.alarm_value.join(', ') || '-' }}</div>
<div v-else>{{ showInfo.alarm_value || '-' }}</div>
</div>
</div>
<div class="info">
@ -173,10 +191,9 @@ onMounted(() => {
<div class="tips">解决方案:</div>
<div class="list">
<div>
确保良好的通风系统提供良好的通风以排除甲烷气体这可以包括安装有效的排气扇通风管道和通风设备以确保空气流动
检修和维护设备定期检查和维护可能产生甲烷泄漏的设备如管道阀门连接件等确保它们的密封性和操作正常及时修复任何泄漏
{{ showInfo.alarm_resolution || '-' }}
</div>
<div>1.优化饲养管理 2.粪便处理设施改</div>
<!-- <div>1.优化饲养管理 2.粪便处理设施改</div> -->
</div>
</div>
</div>
@ -361,6 +378,12 @@ onMounted(() => {
text-align: start;
padding-right: 0.4rem;
box-sizing: border-box;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3; /* 显示的行数 */
line-height: 1.5rem; /* 行高 */
}
.tips {
flex-shrink: 0;
@ -368,6 +391,10 @@ onMounted(() => {
.list {
padding-bottom: 4rem;
}
.img{
height: 4.5rem;
width: 4.5rem;
}
}
}
}

View File

@ -14,7 +14,10 @@ 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 longma_geo from "@/utils/longma_geo.js";
import gulin_geo from "@/utils/gulin_geo.js";
import hejiang_geo from "@/utils/hejiang_geo.js";
import naxi_geo from "@/utils/naxi_geo.js";
import { useAppStore } from "@/store/app.js";
import { sendMsg } from "@/api/sendMsg.js";
@ -500,9 +503,18 @@ const initMap = () => {
name: params.name
}})
} else {
router.push({
path: '/delivery',
// router.push({
// path: '/delivery',
// query: {
// name: params.name
// }
// })
let obj = appStore.street.find(item=>item.name==params.name);
if(obj) router.push({
path: '/indexc',
query: {
areaCode: appStore.address.areaCode,
streetCode: obj.code,
name: params.name
}
})
@ -519,6 +531,10 @@ const mapInfo = () => {
if (area.name == "泸县") map = luxian_geo;
if (area.name == "江阳区") map = jiangyang_geo;
if (area.name == "叙永县") map = xuyong_geo;
if (area.name == "龙马潭区") map = longma_geo;
if (area.name == "纳溪区") map = naxi_geo;
if (area.name == "合江县") map = hejiang_geo;
if (area.name == "古蔺县") map = gulin_geo;
map = JSON.parse(JSON.stringify(map));
if (appStore.address.streetCode) {
let street = appStore.street.find(

View File

@ -35,6 +35,7 @@ const initBreedTypeCount = ()=>{
streetCode: appStore.address.streetCode
}).then((res)=>{
breedTypeRows.value = res.data.breedTypeRows;
if(res.data.animalList.length>6) res.data.animalList = res.data.animalList.slice(0,6);
animalList.value = res.data.animalList;
animalList.value.forEach(item=>{
QRCode.toDataURL('d_' + item.sn, {
@ -264,7 +265,7 @@ onMounted(() => {
</div>
<div class="tab-item">
<img src="/src/assets/index_img/icon1.png" />
<div>占地规模</div>
<div>养殖规模</div>
<div class="count">{{ farmInfo.totalScale }}</div>
</div>
</div>

View File

@ -0,0 +1,629 @@
<script setup>
import { onMounted, reactive, ref, inject, nextTick } from "vue";
import * as echarts from 'echarts';
import { useRoute, useRouter } from "vue-router";
import ani from "@/components/ani.vue";
import mitt from "@/utils/mitt";
import luxian from "@/assets/json/luxian.json";
import hejiang from "@/assets/json/hejiang.json";
import xuyong from "@/assets/json/xuyong.json";
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 longma_geo from "@/utils/longma_geo.js";
import gulin_geo from "@/utils/gulin_geo.js";
import hejiang_geo from "@/utils/hejiang_geo.js";
import naxi_geo from "@/utils/naxi_geo.js";
import { useAppStore } from "@/store/app.js";
import geoJSON from "@/utils/geo.js";
const appStore = useAppStore();
const route = useRoute();
const router = useRouter();
let geoJson = JSON.parse(JSON.stringify(geoJSON));
const props = defineProps({
list: {
type: Object,
default: () => []
}
})
const mapType = reactive({
name: '',
json: ''
})
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;
}
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 ''
}
const initDataValue = () => {
dataValue.forEach(item => {
item.label = {
show: true, //
formatter: customFormatter, // 使{name}name
fontSize: 12, //
fontWeight: 'bold', //
color: '#fff', //
offset: [-50, -40], //
rich: {
img: {
backgroundColor: {
image: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/205f0202311291015185408.png'
},
height: 40,
width: 140,
color: '#fff',
fontSize: 14,
lineHeight: 14,
fontFamily: 'ifonts',
align: 'center',
padding: [0, 0, 20, 0]
},
t: {
fontSize: 10,
align: 'center'
}
}
};
})
}
const echartsRef = ref(null);
let chart = null;
const initMap = () => {
// DOMecharts
if (chart == null) {
chart = echarts.init(echartsRef.value);
}
echarts.registerMap(mapType.name, mapType.json);
let option = {
animation: false,
title: {
text: route.query.name,
textStyle: {
color: "#fff",
fontSize: 22
},
top: '10%',
left: '10%'
},
//geo
geo: [
{
map: mapType.name,
zoom: 1.0,
label: {
show: false,
},
//
emphasis: {
itemStyle: {
// color: '#546686', //
borderColor: '#fff', //线00fcff 516a89
borderWidth: 1,
},
label: {
color: '#fff'
}
},
emphasis: {
disabled: true
},
select: {
disabled: true
},
// aspectScale:0.75, //
// roam: true, //
itemStyle: {
normal: {
// color: '#546686', //
borderColor: '#fff', //线00fcff 516a89
borderWidth: 1,
areaColor: "#3f5171",
shadowColor: "#5bdbf6",
shadowOffsetX: 5,
shadowOffsetY: 10,
// shadowBlur: 2
shadowBlur: 20,
},
},
},
//
{
map: mapType.name,
zlevel: -1,
zoom: 1.01, //
roam: false, //
show: true,
tooltip: {
show: false //
},
label: {
show: false
},
emphasis: {
disabled: true
},
select: {
disabled: true
},
itemStyle: {
normal: {
borderJoin: "round",
borderColor: "rgba(176,228,252,1)",
borderWidth: 3,
areaColor: "rgba(133,188,232,1)",
shadowColor: "rgba(133,188,232,.7)",
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 25,
},
emphasis: {
show: false,
},
},
},
],
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'
}
},
series: [
{
type: "map",
map: mapType.name,
label: {
emphasis: {
color: 'rgba(0,0,0,0)' //
}
},
emphasis: {
disabled: false,
},
select: {
disabled: true
},
itemStyle: {
normal: {
areaColor: "#3f5171",
borderColor: "#5bdbf6",
borderWidth: 1,
},
emphasis: {
areaColor: '#0680ca', //
}
},
},
{
name: "",
type: "scatter",
coordinateSystem: "geo",
data: dataValue,
symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/0a86a202312081638007996.png",
symbolSize: [30, 45],
hoverSymbolSize: [45, 60],
label: {
formatter: "",
position: "center",
show: false
},
// tooltip: {
// formatter (value) {
// console.log(value);
// return "";
// },
// show: true
// },
// encode: {
// value: 2
// },
// itemStyle: {
// color: "#0efacc"
// },
emphasis: {
label: {
show: false
}
}
},
],
}
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) {
// 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: center;
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: 40px;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'
}
},
},
{
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: "scatter",
coordinateSystem: "geo",
data: dataValue,
symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/0a86a202312081638007996.png",
symbolSize: [30, 45],
hoverSymbolSize: [45, 60],
label: {
formatter: "",
position: "center",
show: false
},
emphasis: {
label: {
show: false
}
}
},
],
};
// 使
chart.setOption(option);
//
chart.on('click', function (params) {
if (params.seriesType === 'scatter') {
//
console.log('点击了', params.data.name);
router.push({
path: '/delivery',
query: {
areaCode: route.query.areaCode,
streetCode: route.query.streetCode,
name: route.query.name
}
})
}
});
}
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;
if (area.name == "龙马潭区") map = longma_geo;
if (area.name == "纳溪区") map = naxi_geo;
if (area.name == "合江县") map = hejiang_geo;
if (area.name == "古蔺县") map = gulin_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
})
}
onMounted(() => {
if (route.query.name) {
filterMap()
}
dataValue = props.list;
dataValue[0] = {
name: '福集镇养殖基地',
value: [105.36, 29.20]
}
// changeType('luxian');
mapInfo();
initDataValue();
initMap();
nextTick(() => {
mitt.on('map_info', e => {
// changeType(e.pinyin);
mapInfo();
initDataValue();
initMap();
})
})
})
</script>
<template>
<div class="map">
<div class="map-a">
<ani class="ani" />
</div>
<div class="map-e">
<div class="echarts" ref="echartsRef"></div>
</div>
<div class="map-t">{{ route.query.name }}</div>
</div>
</template>
<style scoped lang="scss">
.map {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
/* background-color: rgba($color: #fff, $alpha: 0.3); */
.map-a {
position: absolute;
bottom: -24%;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
}
.map-e {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.echarts {
width: 100%;
height: 100%;
}
}
.map-t{
position: absolute;
top: 2rem;
left: 2rem;
color: #fff;
font-family: 'ifonts';
font-size: 1.4rem;
}
}
</style>

47
src/view/indexc/index.vue Normal file
View File

@ -0,0 +1,47 @@
<script setup>
import leftItme from "../index/components/left.vue";
import rightItme from "../index/components/right.vue";
import center2Itme from "./components/center2.vue";
import bottomItme from "../index/components/bottom.vue";
</script>
<template>
<div class="center">
<div class="item">
<leftItme style="height: 98%"></leftItme>
</div>
<div class="item item_c">
<div style="height: 61%; display: flex; justify-content: space-between">
<center2Itme style="width: 64%"></center2Itme>
<rightItme style="width: 35%"></rightItme>
</div>
<div style="height: 36%">
<bottomItme style="width: 100%"></bottomItme>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.center {
display: flex;
height: 100%;
justify-content: space-evenly;
.item {
width: 26%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-content: center;
/* border: 1px solid red; */
& > .div {
box-sizing: border-box;
padding: 10px;
}
}
.item_c {
width: 72%;
}
}
</style>