This commit is contained in:
weipengfei 2024-02-28 13:55:55 +08:00
parent 4b5577585c
commit 71a2ee88ff
7 changed files with 99 additions and 292 deletions

View File

@ -10,7 +10,7 @@
font-size: 16px; font-size: 16px;
} }
</style> </style>
<script src="/public/jessibuca.js"></script> <!-- <script src="/public/jessibuca.js"></script> -->
<script type="text/javascript"> <script type="text/javascript">
window._AMapSecurityConfig = { window._AMapSecurityConfig = {
securityJsCode:'e8b6cb44e8e431d68052c8e10db99264', securityJsCode:'e8b6cb44e8e431d68052c8e10db99264',

View File

@ -63,8 +63,7 @@ export default {
mounted () { mounted () {
this.create(); this.create();
window.onerror = (msg) => (this.err = msg); window.onerror = (msg) => (this.err = msg);
if (this.$props.url) this.playUrl = this.$props.url.replace(/\.mp4$/, ".flv");
if (this.$props.url) this.playUrl = this.$props.url;
else console.error('请传入url') else console.error('请传入url')
setTimeout(() => { setTimeout(() => {
this.play() this.play()

View File

@ -5,6 +5,7 @@ import dataV from '@jiaminghi/data-view'
import './assets/font/fonts.css'; import './assets/font/fonts.css';
import router from "./router"; import router from "./router";
import { createPinia } from 'pinia' import { createPinia } from 'pinia'
import '/public/jessibuca.js'
const pinia = createPinia(); const pinia = createPinia();

View File

@ -275,7 +275,7 @@ onMounted(() => {
<div class="c-box"> <div class="c-box">
<videoFlv <videoFlv
class="img" class="img"
:url="farmInfo.video_url" url="http://rtsp.lihaink.cn/live/xumu_user1.live.mp4"
/> />
<div class="name">{{ farmInfo.farm_name }}</div> <div class="name">{{ farmInfo.farm_name }}</div>
</div> </div>

View File

@ -160,9 +160,9 @@ onMounted(() => {
<template> <template>
<div class="c-card"> <div class="c-card">
<div class="left"> <div class="left">
<div>监测正常</div> <!-- <div :style="{ color: !info.status&&info.is_online ? '#fff' : '#dc362e' }"> {{ !info.status&&info.is_online ? '监测正常' : '监测异常' }} </div> -->
<img :src="info.image||'/src/assets/img/icon.png'" /> <img :src="info.image||'/src/assets/img/icon.png'" />
<div>{{ info.name }}</div> <div> {{ info.name }} </div>
</div> </div>
<div class="right" ref="chartsRef"></div> <div class="right" ref="chartsRef"></div>
</div> </div>

View File

@ -1,6 +1,6 @@
<script setup> <script setup>
import { onMounted, reactive, ref, inject, nextTick, onUpdated } from "vue"; import { onMounted, reactive, ref, inject, nextTick, onUpdated } from "vue";
import * as echarts from 'echarts'; import * as echarts from "echarts";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import ani from "@/components/ani.vue"; import ani from "@/components/ani.vue";
import mitt from "@/utils/mitt"; import mitt from "@/utils/mitt";
@ -33,65 +33,66 @@ let geoJson = JSON.parse(JSON.stringify(geoJSON));
const props = defineProps({ const props = defineProps({
list: { list: {
type: Object, type: Object,
default: () => [] default: () => [],
} },
}) });
const mapType = reactive({ const mapType = reactive({
name: '', name: "",
json: '' json: "",
}) });
const changeType = (name = 'luxian') => { const changeType = (name = "luxian") => {
mapType.name = name; mapType.name = name;
if (name == 'luxian') mapType.json = luxian; if (name == "luxian") mapType.json = luxian;
if (name == 'hejiang') mapType.json = hejiang; if (name == "hejiang") mapType.json = hejiang;
if (name == 'xuyong') mapType.json = xuyong; if (name == "xuyong") mapType.json = xuyong;
if (name == 'gulin') mapType.json = gulin; if (name == "gulin") mapType.json = gulin;
if (name == 'jiangyang') mapType.json = jiangyang; if (name == "jiangyang") mapType.json = jiangyang;
if (name == 'longma') mapType.json = longma; if (name == "longma") mapType.json = longma;
if (name == 'naxi') mapType.json = naxi; if (name == "naxi") mapType.json = naxi;
} };
let dataValue = [] 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 '' return "";
} };
const initDataValue = () => { const initDataValue = () => {
dataValue.forEach(item => { dataValue.forEach((item) => {
item.label = { item.label = {
show: true, // show: true, //
formatter: customFormatter, // 使{name}name formatter: customFormatter, // 使{name}name
fontSize: 12, // fontSize: 12, //
fontWeight: 'bold', // fontWeight: "bold", //
color: '#fff', // color: "#fff", //
offset: [-50, -40], // offset: [-50, -40], //
rich: { rich: {
img: { img: {
backgroundColor: { 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, height: 40,
width: 140, width: 140,
color: '#fff', color: "#fff",
fontSize: 14, fontSize: 14,
lineHeight: 14, lineHeight: 14,
fontFamily: 'ifonts', fontFamily: "ifonts",
align: 'center', align: "center",
padding: [0, 0, 20, 0] padding: [0, 0, 20, 0],
}, },
t: { t: {
fontSize: 10, fontSize: 10,
align: 'center' align: "center",
} },
} },
}; };
}) });
} };
const echartsRef = ref(null); const echartsRef = ref(null);
let chart = null; let chart = null;
@ -104,184 +105,6 @@ const initMap = () => {
echarts.registerMap(mapType.name, mapType.json); echarts.registerMap(mapType.name, mapType.json);
let option = { 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: [ geo: [
{ {
type: "map", type: "map",
@ -291,8 +114,8 @@ const initMap = () => {
layoutCenter: ["50%", "51%"], layoutCenter: ["50%", "51%"],
layoutSize: "110%", layoutSize: "110%",
roam: false, roam: false,
label: { emphasis: {
emphasis: { label: {
show: false, show: false,
}, },
}, },
@ -333,7 +156,7 @@ const initMap = () => {
}, },
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
formatter: function (params) { formatter: function (params) {
// console.log(params); // console.log(params);
if (params.data) { if (params.data) {
@ -351,16 +174,16 @@ const initMap = () => {
justify-content: center; justify-content: center;
align-items: center;">${params.data.name}</div> align-items: center;">${params.data.name}</div>
</div>`; </div>`;
} else return ''; } else return "";
}, },
position: 'top', position: "top",
// extraCssText: 'background-color: transparent; border: none;pdding: 0;', // CSS // 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)", borderColor: "rgba(0, 156, 255, 0)",
padding: 0, padding: 0,
textStyle: { textStyle: {
color: '#fff' color: "#fff",
} },
}, },
}, },
@ -461,53 +284,71 @@ const initMap = () => {
}, },
], ],
tooltip: { tooltip: {
show: true show: true,
}, },
color: '#1f7df5', color: "#1f7df5",
series: [ series: [
{ {
name: "", name: "",
type: "scatter", type: "scatter",
coordinateSystem: "geo", coordinateSystem: "geo",
data: dataValue, data: dataValue,
symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/0a86a202312081638007996.png", symbol:
"image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/0a86a202312081638007996.png",
symbolSize: [30, 45], symbolSize: [30, 45],
hoverSymbolSize: [45, 60], hoverSymbolSize: [45, 60],
label: { label: {
formatter: "", formatter: "",
position: "center", position: "center",
show: false show: false,
}, },
emphasis: { emphasis: {
label: { label: {
show: false show: false,
} },
} },
}, },
], ],
}; };
// 使 // 使
chart.setOption(option); chart.setOption(option);
getfarmCount({
areaCode: appStore.address.areaCode,
streetCode: appStore.address.streetCode,
}).then((res) => {
res.data.farmList.forEach((item) => {
if (item.longitude && item.latitude)
dataValue.push({
id: item.id,
name: item.farm_name,
value: [item.longitude, item.latitude],
});
});
initDataValue();
option.series[0].data = dataValue;
chart.setOption(option);
});
// //
chart.on('click', function (params) { chart.on("click", function (params) {
if (params.seriesType === 'scatter') { if (params.seriesType === "scatter") {
// //
console.log('点击了', params.data); console.log("点击了", params.data);
router.push({ router.push({
path: '/delivery', path: "/delivery",
query: { query: {
areaCode: route.query.areaCode, areaCode: route.query.areaCode,
streetCode: route.query.streetCode, streetCode: route.query.streetCode,
name: route.query.name, name: route.query.name,
id: params.data.id, id: params.data.id,
farm_name: params.data.name, farm_name: params.data.name,
address: params.data.value.join(',') address: params.data.value.join(","),
} },
}) });
} }
}); });
} };
const mapInfo = async () => { const mapInfo = async () => {
let area = appStore.area.find( let area = appStore.area.find(
@ -530,8 +371,8 @@ const mapInfo = async () => {
// dataValue = dataValue.filter( // dataValue = dataValue.filter(
// (item) => item.street_code == appStore.address.streetCode // (item) => item.street_code == appStore.address.streetCode
// ); // );
} if (route.query.name) { } else if (route.query.name) {
initStreetMap({name: route.query.name}, map); initStreetMap({ name: route.query.name }, map);
} else { } else {
mapType.name = area.name; mapType.name = area.name;
mapType.json = map; mapType.json = map;
@ -541,65 +382,29 @@ const initStreetMap = (street, map) => {
map.features = map.features.filter( map.features = map.features.filter(
(item) => item?.properties?.name == street?.name (item) => item?.properties?.name == street?.name
); );
mapType.name = street?.name; mapType.name = street?.name || route.query.name || "";
mapType.json = map; mapType.json = map;
}; };
const filterMap = () => { const filterMap = () => {
geoJson.features = geoJson.features.filter((item) => { geoJson.features = geoJson.features.filter((item) => {
return item.properties.name == route.query.name return item.properties.name == route.query.name;
}) });
} };
const initFarmCount = () => {
const initFarmCount = ()=>{ mapInfo();
getfarmCount({ setTimeout(() => {
areaCode: appStore.address.areaCode, initMap();
streetCode: appStore.address.streetCode }, 100);
}).then((res)=>{ };
res.data.farmList.forEach(item=>{
if(item.longitude && item.latitude) dataValue.push({
id: item.id,
name: item.farm_name,
value: [item.longitude, item.latitude]
})
})
nextTick(() => {
mapInfo();
initDataValue();
initMap();
})
})
}
onMounted(() => { onMounted(() => {
if (route.query.name) { if (route.query.name) {
filterMap() filterMap();
} }
// dataValue = props.list; initFarmCount();
// dataValue[0] = { });
// name: '',
// value: [105.36, 29.20]
// }
initFarmCount()
// mapInfo();
// initDataValue();
// initMap();
// nextTick(() => {
// mitt.on('map_info', e => {
// // changeType(e.pinyin);
// mapInfo();
// initDataValue();
// initMap();
// })
// })
})
</script> </script>
<template> <template>
@ -647,12 +452,12 @@ onMounted(() => {
height: 100%; height: 100%;
} }
} }
.map-t{ .map-t {
position: absolute; position: absolute;
top: 2rem; top: 2rem;
left: 2rem; left: 2rem;
color: #fff; color: #fff;
font-family: 'ifonts'; font-family: "ifonts";
font-size: 1.4rem; font-size: 1.4rem;
} }
} }

View File

@ -2,6 +2,7 @@
import leftItme from "../index/components/left.vue"; import leftItme from "../index/components/left.vue";
import rightItme from "../index/components/right.vue"; import rightItme from "../index/components/right.vue";
import center2Itme from "./components/center2.vue"; import center2Itme from "./components/center2.vue";
import centerItme from "../index/components/center.vue";
import bottomItme from "../index/components/bottom.vue"; import bottomItme from "../index/components/bottom.vue";
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { ref } from "vue"; import { ref } from "vue";
@ -18,6 +19,7 @@ const key = ref(Date.now());
<div class="item item_c"> <div class="item item_c">
<div style="height: 61%; display: flex; justify-content: space-between"> <div style="height: 61%; display: flex; justify-content: space-between">
<center2Itme :key="route.query.name+key+'c'" style="width: 64%"></center2Itme> <center2Itme :key="route.query.name+key+'c'" style="width: 64%"></center2Itme>
<!-- <centerItme :key="route.query.name+key+'c'" style="width: 64%"></centerItme> -->
<rightItme :key="route.query.name+key+'r'" style="width: 35%"></rightItme> <rightItme :key="route.query.name+key+'r'" style="width: 35%"></rightItme>
</div> </div>
<div style="height: 36%"> <div style="height: 36%">