From ea2fa75c4dbd63c6ba37b065a298337a299b10e0 Mon Sep 17 00:00:00 2001 From: weipengfei <2187978347@qq.com> Date: Thu, 22 Feb 2024 17:04:53 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8A=9F=E8=83=BD=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/headView.vue | 23 +++- src/view/delivery/components/center.vue | 6 +- src/view/delivery/components/rightCard.vue | 6 +- src/view/delivery/index.vue | 8 +- src/view/index/components/center.vue | 29 ++--- src/view/index/components/left.vue | 119 +++++---------------- src/view/index/index.vue | 14 ++- src/view/indexc/components/center2.vue | 28 ++--- src/view/indexc/index.vue | 13 ++- 9 files changed, 104 insertions(+), 142 deletions(-) diff --git a/src/components/headView.vue b/src/components/headView.vue index 9cb191d..21497ea 100644 --- a/src/components/headView.vue +++ b/src/components/headView.vue @@ -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); diff --git a/src/view/delivery/components/center.vue b/src/view/delivery/components/center.vue index fb464aa..1022263 100644 --- a/src/view/delivery/components/center.vue +++ b/src/view/delivery/components/center.vue @@ -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 { diff --git a/src/view/delivery/components/rightCard.vue b/src/view/delivery/components/rightCard.vue index f3ebd13..55a771e 100644 --- a/src/view/delivery/components/rightCard.vue +++ b/src/view/delivery/components/rightCard.vue @@ -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 + - "
"; + str += `${params[i].name} ${props.info.name}: ${params[i].value||0}
`; } } return str; diff --git a/src/view/delivery/index.vue b/src/view/delivery/index.vue index 31d12ac..1e4bc10 100644 --- a/src/view/delivery/index.vue +++ b/src/view/delivery/index.vue @@ -14,15 +14,15 @@ const key = ref(Date.now());
- - + +
- +
- +
diff --git a/src/view/index/components/center.vue b/src/view/index/components/center.vue index 6e32cf3..51b11a2 100644 --- a/src/view/index/components/center.vue +++ b/src/view/index/components/center.vue @@ -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 + } + }) + } } } }); diff --git a/src/view/index/components/left.vue b/src/view/index/components/left.vue index edbd00a..d2a6098 100644 --- a/src/view/index/components/left.vue +++ b/src/view/index/components/left.vue @@ -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(); }) @@ -334,7 +270,6 @@ onMounted(() => {
-
diff --git a/src/view/index/index.vue b/src/view/index/index.vue index 45b3f2d..b08036c 100644 --- a/src/view/index/index.vue +++ b/src/view/index/index.vue @@ -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());