功能更新
This commit is contained in:
parent
d76f29a5a2
commit
ea2fa75c4d
|
@ -45,8 +45,10 @@ const offAreaList = (e) => {
|
||||||
}})
|
}})
|
||||||
} else {
|
} else {
|
||||||
router.push({
|
router.push({
|
||||||
path: '/delivery',
|
path: '/indexc',
|
||||||
query: {
|
query: {
|
||||||
|
areaCode: route.query.areaCode,
|
||||||
|
streetCode: e.code,
|
||||||
name: e.name
|
name: e.name
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -64,6 +66,10 @@ const navTo = () => {
|
||||||
streetCode: ''
|
streetCode: ''
|
||||||
})
|
})
|
||||||
router.push('/?areaCode='+appStore.address.areaCode);
|
router.push('/?areaCode='+appStore.address.areaCode);
|
||||||
|
let area = appStore.area;
|
||||||
|
let data = area.find(item => item.code == appStore.address.areaCode);
|
||||||
|
info.areaName = data?.name;
|
||||||
|
info.address = data?.name;
|
||||||
}
|
}
|
||||||
else if(route.path == '/delivery') {
|
else if(route.path == '/delivery') {
|
||||||
router.push({
|
router.push({
|
||||||
|
@ -161,8 +167,23 @@ onMounted(() => {
|
||||||
streetCode: route.query.streetCode || "",
|
streetCode: route.query.streetCode || "",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
else if(route.path=='/'){
|
||||||
|
appStore.setAddress({
|
||||||
|
areaCode: appStore.address.areaCode,
|
||||||
|
streetCode: "",
|
||||||
|
});
|
||||||
|
}
|
||||||
initList();
|
initList();
|
||||||
|
|
||||||
|
mitt.on('push_to', (e)=>{
|
||||||
|
appStore.setAddress({
|
||||||
|
areaCode: e.areaCode,
|
||||||
|
streetCode: e.streetCode,
|
||||||
|
});
|
||||||
|
initList();
|
||||||
|
info.address = e.name
|
||||||
|
})
|
||||||
|
|
||||||
// 每秒钟更新一次时间
|
// 每秒钟更新一次时间
|
||||||
setInterval(updateClock, 1000);
|
setInterval(updateClock, 1000);
|
||||||
|
|
||||||
|
|
|
@ -513,9 +513,9 @@ const mapInfo = () => {
|
||||||
(item) => item.code == appStore.address.streetCode
|
(item) => item.code == appStore.address.streetCode
|
||||||
);
|
);
|
||||||
initStreetMap(street, map);
|
initStreetMap(street, map);
|
||||||
dataValue = dataValue.filter(
|
// dataValue = dataValue.filter(
|
||||||
(item) => item.street_code == appStore.address.streetCode
|
// (item) => item.street_code == appStore.address.streetCode
|
||||||
);
|
// );
|
||||||
} if (route.query.name) {
|
} if (route.query.name) {
|
||||||
initStreetMap({name: route.query.name}, map);
|
initStreetMap({name: route.query.name}, map);
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -60,11 +60,7 @@ const initMap = () => {
|
||||||
let str = "";
|
let str = "";
|
||||||
for (let i = 0; i < params.length; i++) {
|
for (let i = 0; i < params.length; i++) {
|
||||||
if (params[i].seriesName !== "") {
|
if (params[i].seriesName !== "") {
|
||||||
str +=
|
str += `${params[i].name} ${props.info.name}: ${params[i].value||0}<br/>`;
|
||||||
params[i].name +
|
|
||||||
'甲烷: ' +
|
|
||||||
params[i].value +
|
|
||||||
"<br/>";
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return str;
|
return str;
|
||||||
|
|
|
@ -14,15 +14,15 @@ const key = ref(Date.now());
|
||||||
<div class="center">
|
<div class="center">
|
||||||
<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">
|
||||||
<leftItme :key="route.query.name+key" style="width: 35%"></leftItme>
|
<leftItme :key="route.query.name+key+'f'" style="width: 35%"></leftItme>
|
||||||
<centerItme :key="route.query.name+key" style="width: 64%"></centerItme>
|
<centerItme :key="route.query.name+key+'c'" style="width: 64%"></centerItme>
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 36%">
|
<div style="height: 36%">
|
||||||
<bottomItme :key="route.query.name+key" style="width: 100%"></bottomItme>
|
<bottomItme :key="route.query.name+key+'b'" style="width: 100%"></bottomItme>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<rightItme :key="route.query.name+key" style="height: 98%"></rightItme>
|
<rightItme :key="route.query.name+key+'r'" style="height: 98%"></rightItme>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -503,21 +503,22 @@ const initMap = () => {
|
||||||
name: params.name
|
name: params.name
|
||||||
}})
|
}})
|
||||||
} else {
|
} else {
|
||||||
// router.push({
|
|
||||||
// path: '/delivery',
|
|
||||||
// query: {
|
|
||||||
// name: params.name
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
let obj = appStore.street.find(item=>item.name==params.name);
|
let obj = appStore.street.find(item=>item.name==params.name);
|
||||||
if(obj) router.push({
|
if(obj) {
|
||||||
path: '/indexc',
|
mitt.emit('push_to', {
|
||||||
query: {
|
areaCode: appStore.address.areaCode,
|
||||||
areaCode: appStore.address.areaCode,
|
streetCode: obj.code,
|
||||||
streetCode: obj.code,
|
name: params.name
|
||||||
name: params.name
|
})
|
||||||
}
|
router.push({
|
||||||
})
|
path: '/indexc',
|
||||||
|
query: {
|
||||||
|
areaCode: appStore.address.areaCode,
|
||||||
|
streetCode: obj.code,
|
||||||
|
name: params.name
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -35,8 +35,10 @@ const initBreedTypeCount = ()=>{
|
||||||
streetCode: appStore.address.streetCode
|
streetCode: appStore.address.streetCode
|
||||||
}).then((res)=>{
|
}).then((res)=>{
|
||||||
breedTypeRows.value = res.data.breedTypeRows;
|
breedTypeRows.value = res.data.breedTypeRows;
|
||||||
if(res.data.animalList.length>6) res.data.animalList = res.data.animalList.slice(0,6);
|
initMap();
|
||||||
animalList.value = res.data.animalList;
|
let randomNumber = 0;
|
||||||
|
if(res.data.animalList.length>6) randomNumber = Math.floor(Math.random() * (res.data.animalList.length-6));
|
||||||
|
animalList.value = res.data.animalList.slice(randomNumber,randomNumber+6);
|
||||||
animalList.value.forEach(item=>{
|
animalList.value.forEach(item=>{
|
||||||
QRCode.toDataURL('d_' + item.sn, {
|
QRCode.toDataURL('d_' + item.sn, {
|
||||||
margin: 1.5
|
margin: 1.5
|
||||||
|
@ -95,16 +97,16 @@ const echarts2Ref = ref(null);
|
||||||
const initMap = () => {
|
const initMap = () => {
|
||||||
// 基于DOM元素初始化echarts实例
|
// 基于DOM元素初始化echarts实例
|
||||||
const chart1 = echarts.init(echarts1Ref.value);
|
const chart1 = echarts.init(echarts1Ref.value);
|
||||||
const chart2 = echarts.init(echarts2Ref.value);
|
// const chart2 = echarts.init(echarts2Ref.value);
|
||||||
|
|
||||||
let color = ['#00A8FF', '#4B5FDB', '#00FFCB', '#5BDBF6'];
|
let color = ['#00A8FF', '#4B5FDB', '#00FFCB', '#5BDBF6'];
|
||||||
|
let data1 = breedTypeRows.value.map(item=>{
|
||||||
let data1 = [
|
return {
|
||||||
{ value: 400, name: '本地鸡' },
|
name: item.name,
|
||||||
{ value: 435, name: '本地鸭' },
|
value: item.animalCount,
|
||||||
{ value: 580, name: '本地鹅' },
|
id: item.value
|
||||||
{ value: 884, name: '本地猪' },
|
}
|
||||||
]
|
})
|
||||||
let option1 = {
|
let option1 = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
|
@ -130,25 +132,28 @@ const initMap = () => {
|
||||||
legend: {
|
legend: {
|
||||||
show: true,
|
show: true,
|
||||||
// icon: "rect",
|
// icon: "rect",
|
||||||
orient: 'vertical', // 将图例竖直布局
|
// orient: 'vertical', // 将图例竖直布局
|
||||||
itemWidth: 8,
|
itemWidth: 20,
|
||||||
itemHeight: 8,
|
itemHeight: 20,
|
||||||
right: "5%",
|
right: "5%",
|
||||||
top: "10%",
|
top: "25%",
|
||||||
|
left: "40%",
|
||||||
// bottom: "center",
|
// bottom: "center",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff"
|
color: "#fff",
|
||||||
|
fontSize: "0.75rem"
|
||||||
},
|
},
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
return '种类: ' + params;
|
let total = data1.find(item=>item.name==params)?.value || 0;
|
||||||
|
return '种类: ' + params + ' --- ' + total + '只';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: 'Access From',
|
name: '养殖数据',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: ['40%', '70%'],
|
radius: ['50%', '80%'],
|
||||||
center: ['30%', '50%'], // 设置左半部分饼图的位置
|
center: ['20%', '50%'], // 设置左半部分饼图的位置
|
||||||
avoidLabelOverlap: false,
|
avoidLabelOverlap: false,
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
|
@ -168,77 +173,8 @@ const initMap = () => {
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
let data2 = [
|
|
||||||
{ value: 500, name: '本地鸡' },
|
|
||||||
{ value: 735, name: '本地鸭' },
|
|
||||||
{ value: 580, name: '本地鹅' },
|
|
||||||
{ value: 484, name: '本地猪' },
|
|
||||||
]
|
|
||||||
let option2 = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
},
|
|
||||||
color: color,
|
|
||||||
tooltip: {
|
|
||||||
trigger: "item",
|
|
||||||
backgroundColor: 'rgba(0, 156, 255, 0.6)', //设置背景颜色
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff'
|
|
||||||
},
|
|
||||||
borderColor: "rgba(0, 156, 255, 1)",
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow',
|
|
||||||
shadowStyle: {
|
|
||||||
color: 'rgba(255,255,255, .2)',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
formatter: function (params) {
|
|
||||||
return params.data.name + ': ' + params.data.value;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
show: true,
|
|
||||||
// icon: "rect",
|
|
||||||
orient: 'vertical', // 将图例竖直布局
|
|
||||||
itemWidth: 8,
|
|
||||||
itemHeight: 8,
|
|
||||||
right: "5%",
|
|
||||||
top: "10%",
|
|
||||||
// bottom: "center",
|
|
||||||
textStyle: {
|
|
||||||
color: "#fff"
|
|
||||||
},
|
|
||||||
formatter: function (params) {
|
|
||||||
return '种类: ' + params;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: 'Access From',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['40%', '70%'],
|
|
||||||
center: ['30%', '50%'], // 设置左半部分饼图的位置
|
|
||||||
avoidLabelOverlap: false,
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
position: 'center'
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
fontSize: 10,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
data: data2
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
chart1.setOption(option1);
|
if(data1.length>0) chart1.setOption(option1);
|
||||||
chart2.setOption(option2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const show = ref(false);
|
const show = ref(false);
|
||||||
|
@ -246,7 +182,7 @@ const show = ref(false);
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initFarmCount();
|
initFarmCount();
|
||||||
initBreedTypeCount();
|
initBreedTypeCount();
|
||||||
initMap();
|
// initMap();
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -334,7 +270,6 @@ onMounted(() => {
|
||||||
</div>
|
</div>
|
||||||
<div class="chart">
|
<div class="chart">
|
||||||
<div ref="echarts1Ref"></div>
|
<div ref="echarts1Ref"></div>
|
||||||
<div ref="echarts2Ref"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="qr">
|
<div class="qr">
|
||||||
<div class="qr_card" v-for="(item, index) in animalList" :key="index">
|
<div class="qr_card" v-for="(item, index) in animalList" :key="index">
|
||||||
|
|
|
@ -3,21 +3,25 @@ import leftItme from "./components/left.vue";
|
||||||
import rightItme from "./components/right.vue";
|
import rightItme from "./components/right.vue";
|
||||||
import centerItme from "./components/center.vue";
|
import centerItme from "./components/center.vue";
|
||||||
import bottomItme from "./components/bottom.vue";
|
import bottomItme from "./components/bottom.vue";
|
||||||
import test from "./components/test.vue";
|
import { useRoute } from 'vue-router';
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const key = ref(Date.now());
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="center">
|
<div class="center">
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<leftItme style="height: 98%"></leftItme>
|
<leftItme :key="route.query.name+key+'f'" style="height: 98%"></leftItme>
|
||||||
</div>
|
</div>
|
||||||
<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">
|
||||||
<centerItme style="width: 64%"></centerItme>
|
<centerItme :key="route.query.name+key+'c'" style="width: 64%"></centerItme>
|
||||||
<rightItme 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%">
|
||||||
<bottomItme style="width: 100%"></bottomItme>
|
<bottomItme :key="route.query.name+key+'b'" style="width: 100%"></bottomItme>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -526,9 +526,9 @@ const mapInfo = () => {
|
||||||
(item) => item.code == appStore.address.streetCode
|
(item) => item.code == appStore.address.streetCode
|
||||||
);
|
);
|
||||||
initStreetMap(street, map);
|
initStreetMap(street, map);
|
||||||
dataValue = dataValue.filter(
|
// dataValue = dataValue.filter(
|
||||||
(item) => item.street_code == appStore.address.streetCode
|
// (item) => item.street_code == appStore.address.streetCode
|
||||||
);
|
// );
|
||||||
} if (route.query.name) {
|
} if (route.query.name) {
|
||||||
initStreetMap({name: route.query.name}, map);
|
initStreetMap({name: route.query.name}, map);
|
||||||
} else {
|
} else {
|
||||||
|
@ -585,17 +585,17 @@ onMounted(() => {
|
||||||
|
|
||||||
initFarmCount()
|
initFarmCount()
|
||||||
|
|
||||||
mapInfo();
|
// mapInfo();
|
||||||
initDataValue();
|
// initDataValue();
|
||||||
initMap();
|
// initMap();
|
||||||
nextTick(() => {
|
// nextTick(() => {
|
||||||
mitt.on('map_info', e => {
|
// mitt.on('map_info', e => {
|
||||||
// changeType(e.pinyin);
|
// // changeType(e.pinyin);
|
||||||
mapInfo();
|
// mapInfo();
|
||||||
initDataValue();
|
// initDataValue();
|
||||||
initMap();
|
// initMap();
|
||||||
})
|
// })
|
||||||
})
|
// })
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
@ -3,20 +3,25 @@ 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 bottomItme from "../index/components/bottom.vue";
|
import bottomItme from "../index/components/bottom.vue";
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const key = ref(Date.now());
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="center">
|
<div class="center">
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<leftItme style="height: 98%"></leftItme>
|
<leftItme :key="route.query.name+key+'f'" style="height: 98%"></leftItme>
|
||||||
</div>
|
</div>
|
||||||
<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 style="width: 64%"></center2Itme>
|
<center2Itme :key="route.query.name+key+'c'" style="width: 64%"></center2Itme>
|
||||||
<rightItme 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%">
|
||||||
<bottomItme style="width: 100%"></bottomItme>
|
<bottomItme :key="route.query.name+key+'b'" style="width: 100%"></bottomItme>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue