This commit is contained in:
parent
4b5577585c
commit
71a2ee88ff
|
|
@ -10,7 +10,7 @@
|
|||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
<script src="/public/jessibuca.js"></script>
|
||||
<!-- <script src="/public/jessibuca.js"></script> -->
|
||||
<script type="text/javascript">
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode:'e8b6cb44e8e431d68052c8e10db99264',
|
||||
|
|
|
|||
|
|
@ -63,8 +63,7 @@ export default {
|
|||
mounted () {
|
||||
this.create();
|
||||
window.onerror = (msg) => (this.err = msg);
|
||||
|
||||
if (this.$props.url) this.playUrl = this.$props.url;
|
||||
if (this.$props.url) this.playUrl = this.$props.url.replace(/\.mp4$/, ".flv");
|
||||
else console.error('请传入url')
|
||||
setTimeout(() => {
|
||||
this.play()
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import dataV from '@jiaminghi/data-view'
|
|||
import './assets/font/fonts.css';
|
||||
import router from "./router";
|
||||
import { createPinia } from 'pinia'
|
||||
import '/public/jessibuca.js'
|
||||
|
||||
const pinia = createPinia();
|
||||
|
||||
|
|
|
|||
|
|
@ -275,7 +275,7 @@ onMounted(() => {
|
|||
<div class="c-box">
|
||||
<videoFlv
|
||||
class="img"
|
||||
:url="farmInfo.video_url"
|
||||
url="http://rtsp.lihaink.cn/live/xumu_user1.live.mp4"
|
||||
/>
|
||||
<div class="name">{{ farmInfo.farm_name }}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -160,9 +160,9 @@ onMounted(() => {
|
|||
<template>
|
||||
<div class="c-card">
|
||||
<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'" />
|
||||
<div>{{ info.name }}</div>
|
||||
<div> {{ info.name }} </div>
|
||||
</div>
|
||||
<div class="right" ref="chartsRef"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup>
|
||||
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 ani from "@/components/ani.vue";
|
||||
import mitt from "@/utils/mitt";
|
||||
|
|
@ -33,65 +33,66 @@ let geoJson = JSON.parse(JSON.stringify(geoJSON));
|
|||
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;
|
||||
|
|
@ -104,184 +105,6 @@ const initMap = () => {
|
|||
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",
|
||||
|
|
@ -291,8 +114,8 @@ const initMap = () => {
|
|||
layoutCenter: ["50%", "51%"],
|
||||
layoutSize: "110%",
|
||||
roam: false,
|
||||
label: {
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
|
|
@ -333,7 +156,7 @@ const initMap = () => {
|
|||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
trigger: "item",
|
||||
formatter: function (params) {
|
||||
// console.log(params);
|
||||
if (params.data) {
|
||||
|
|
@ -351,16 +174,16 @@ const initMap = () => {
|
|||
justify-content: center;
|
||||
align-items: center;">${params.data.name}</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",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
|
|
@ -461,53 +284,71 @@ const initMap = () => {
|
|||
},
|
||||
],
|
||||
tooltip: {
|
||||
show: true
|
||||
show: true,
|
||||
},
|
||||
color: '#1f7df5',
|
||||
color: "#1f7df5",
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "scatter",
|
||||
coordinateSystem: "geo",
|
||||
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],
|
||||
hoverSymbolSize: [45, 60],
|
||||
label: {
|
||||
formatter: "",
|
||||
position: "center",
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
// 使用配置项显示图表
|
||||
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) {
|
||||
if (params.seriesType === 'scatter') {
|
||||
chart.on("click", function (params) {
|
||||
if (params.seriesType === "scatter") {
|
||||
// 处理你的点击事件逻辑
|
||||
console.log('点击了', params.data);
|
||||
console.log("点击了", params.data);
|
||||
router.push({
|
||||
path: '/delivery',
|
||||
path: "/delivery",
|
||||
query: {
|
||||
areaCode: route.query.areaCode,
|
||||
streetCode: route.query.streetCode,
|
||||
name: route.query.name,
|
||||
id: params.data.id,
|
||||
farm_name: params.data.name,
|
||||
address: params.data.value.join(',')
|
||||
}
|
||||
})
|
||||
address: params.data.value.join(","),
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const mapInfo = async () => {
|
||||
let area = appStore.area.find(
|
||||
|
|
@ -530,8 +371,8 @@ const mapInfo = async () => {
|
|||
// dataValue = dataValue.filter(
|
||||
// (item) => item.street_code == appStore.address.streetCode
|
||||
// );
|
||||
} if (route.query.name) {
|
||||
initStreetMap({name: route.query.name}, map);
|
||||
} else if (route.query.name) {
|
||||
initStreetMap({ name: route.query.name }, map);
|
||||
} else {
|
||||
mapType.name = area.name;
|
||||
mapType.json = map;
|
||||
|
|
@ -541,65 +382,29 @@ const initStreetMap = (street, map) => {
|
|||
map.features = map.features.filter(
|
||||
(item) => item?.properties?.name == street?.name
|
||||
);
|
||||
mapType.name = street?.name;
|
||||
mapType.name = street?.name || route.query.name || "";
|
||||
mapType.json = map;
|
||||
};
|
||||
|
||||
const filterMap = () => {
|
||||
geoJson.features = geoJson.features.filter((item) => {
|
||||
return item.properties.name == route.query.name
|
||||
})
|
||||
}
|
||||
return item.properties.name == route.query.name;
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const initFarmCount = ()=>{
|
||||
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]
|
||||
})
|
||||
})
|
||||
|
||||
nextTick(() => {
|
||||
const initFarmCount = () => {
|
||||
mapInfo();
|
||||
initDataValue();
|
||||
setTimeout(() => {
|
||||
initMap();
|
||||
})
|
||||
})
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
if (route.query.name) {
|
||||
filterMap()
|
||||
filterMap();
|
||||
}
|
||||
// dataValue = props.list;
|
||||
// dataValue[0] = {
|
||||
// name: '福集镇养殖基地',
|
||||
// value: [105.36, 29.20]
|
||||
// }
|
||||
|
||||
initFarmCount()
|
||||
|
||||
// mapInfo();
|
||||
// initDataValue();
|
||||
// initMap();
|
||||
// nextTick(() => {
|
||||
// mitt.on('map_info', e => {
|
||||
// // changeType(e.pinyin);
|
||||
// mapInfo();
|
||||
// initDataValue();
|
||||
// initMap();
|
||||
// })
|
||||
// })
|
||||
|
||||
})
|
||||
|
||||
initFarmCount();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -647,12 +452,12 @@ onMounted(() => {
|
|||
height: 100%;
|
||||
}
|
||||
}
|
||||
.map-t{
|
||||
.map-t {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
left: 2rem;
|
||||
color: #fff;
|
||||
font-family: 'ifonts';
|
||||
font-family: "ifonts";
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import leftItme from "../index/components/left.vue";
|
||||
import rightItme from "../index/components/right.vue";
|
||||
import center2Itme from "./components/center2.vue";
|
||||
import centerItme from "../index/components/center.vue";
|
||||
import bottomItme from "../index/components/bottom.vue";
|
||||
import { useRoute } from 'vue-router';
|
||||
import { ref } from "vue";
|
||||
|
|
@ -18,6 +19,7 @@ const key = ref(Date.now());
|
|||
<div class="item item_c">
|
||||
<div style="height: 61%; display: flex; justify-content: space-between">
|
||||
<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>
|
||||
</div>
|
||||
<div style="height: 36%">
|
||||
|
|
|
|||
Loading…
Reference in New Issue