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

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

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

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

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

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

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

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

@ -503,21 +503,22 @@ 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({
path: '/indexc',
query: {
areaCode: appStore.address.areaCode,
streetCode: obj.code,
name: params.name
}
})
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,
streetCode: obj.code,
name: params.name
}
})
}
}
}
});

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

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

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

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

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

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