This commit is contained in:
parent
4b5577585c
commit
71a2ee88ff
|
@ -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',
|
||||||
|
|
|
@ -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()
|
||||||
|
|
|
@ -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();
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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%">
|
||||||
|
|
Loading…
Reference in New Issue