功能更新

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

src/view/delivery/components/center.vue

@@ -513,9 +513,9 @@ const mapInfo = () => {
       (item) => item.code == appStore.address.streetCode
     );
     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) {
     initStreetMap({name: route.query.name}, map);
   } else {

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 +=
+            str += `${params[i].name} ${props.info.name}: ${params[i].value||0}<br/>`;
-              params[i].name +
-              '甲烷: ' +
-              params[i].value +
-              "<br/>";
           }
         }
         return str;

src/view/delivery/index.vue

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

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({
+          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
+              }
+            })
+          }
         }
     }
   });

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);
+    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=>{
       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 = 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 = {
     tooltip: {
       trigger: 'item',
@@ -130,25 +132,28 @@ const initMap = () => {
     legend: {
       show: true,
       // icon: "rect",
-      orient: 'vertical', // 将图例竖直布局
+      // orient: 'vertical', // 将图例竖直布局
-      itemWidth: 8,
+      itemWidth: 20,
-      itemHeight: 8,
+      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%'],
+        radius: ['50%', '80%'],
-        center: ['30%', '50%'], // 设置左半部分饼图的位置
+        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);
+  if(data1.length>0) chart1.setOption(option1);
-  chart2.setOption(option2);
 }
 
 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">

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());
 </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>
+        <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 style="height: 36%">
-        <bottomItme style="width: 100%"></bottomItme>
+        <bottomItme :key="route.query.name+key+'b'" style="width: 100%"></bottomItme>
       </div>
     </div>
   </div>

src/view/indexc/components/center2.vue

@@ -526,9 +526,9 @@ const mapInfo = () => {
       (item) => item.code == appStore.address.streetCode
     );
     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) {
     initStreetMap({name: route.query.name}, map);
   } else {
@@ -585,17 +585,17 @@ onMounted(() => {
 
   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();
-    })
+  //   })
-  })
+  // })
   
 })
 

src/view/indexc/index.vue

@@ -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>
+        <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 style="height: 36%">
-        <bottomItme style="width: 100%"></bottomItme>
+        <bottomItme :key="route.query.name+key+'b'" style="width: 100%"></bottomItme>
       </div>
     </div>
   </div>