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