weipengfei
/
breed-datav
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

功能更新

This commit is contained in:
weipengfei 2024-02-22 17:04:53 +08:00
parent d76f29a5a2
commit ea2fa75c4d
9 changed files with 104 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/headView.vue
View File

@ -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);

6
src/view/delivery/components/center.vue
View File

@ -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 {

6
src/view/delivery/components/rightCard.vue
View File

@ -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;

8
src/view/delivery/index.vue
View File

@ -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>

29
src/view/index/components/center.vue
View File

@ -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
}
})
}
} }
} }
}); });

119
src/view/index/components/left.vue
View File

@ -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: '本地鸡' }, if(data1.length>0) chart1.setOption(option1);
{ 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);
} }
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">

14
src/view/index/index.vue
View File

@ -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>

28
src/view/indexc/components/center2.vue
View File

@ -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();
}) // })
}) // })
}) })

13
src/view/indexc/index.vue
View File

@ -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>