更新

src/api/api.js

@@ -40,3 +40,13 @@ export const getFarmDeviceAlarmCount = (data) => {
 export const getFarmInfo = (data) => {
     return axios.get('dataview.farm/farmInfo', { params: data });
 }
+
+// 硬件产品
+export const getDeviceDesc = (data) => {
+    return axios.get('dataview.device/deviceDesc', { params: data });
+}
+
+// 智能监测数据
+export const getAlarmRangeList = (data) => {
+    return axios.get('dataview.farm/alarmRangeList', { params: data });
+}

src/view/delivery/components/center.vue

@@ -542,10 +542,17 @@ onMounted(() => {
   if (route.query.name) {
     filterMap()
   }
-  dataValue = props.list;
+  // dataValue = props.list;
+  // dataValue[0] = {
+  //   name: '福集镇养殖基地',
+  //   value: [105.36, 29.20]
+  // }
+  if(route.query.local){
     dataValue[0] = {
-    name: '福集镇养殖基地',
+      name: route.query.farm_name,
-    value: [105.36, 29.20]
+      value: route.query.local.split(',')
+    };
+    console.log(dataValue);
   }
   // changeType('luxian');
   mapInfo();
@@ -571,6 +578,7 @@ onMounted(() => {
     <div class="map-e">
       <div class="echarts" ref="echartsRef"></div>
     </div>
+    <div class="map-t">{{ route.query.farm_name }}</div>
   </div>
 </template>
 
@@ -607,5 +615,13 @@ onMounted(() => {
       height: 100%;
     }
   }
+  .map-t{
+    position: absolute;
+    top: 2rem;
+    left: 2rem;
+    color: #fff;
+    font-family: 'ifonts';
+    font-size: 1.4rem;
+  }
 }
 </style>

src/view/delivery/components/right.vue

@@ -1,10 +1,26 @@
 <script setup>
 import { ref, reactive, onMounted } from "vue"
-
+import { getAlarmRangeList } from "@/api/api.js"
 import rightCard from "./rightCard.vue"
+import { useAppStore } from "@/store/app.js";
+import { useRoute } from "vue-router";
+
+const appStore = useAppStore();
+const route = useRoute();
+
+const dataList = ref([]);
+const initAlarmRangeList = ()=>{
+  getAlarmRangeList({
+    areaCode: appStore.address.areaCode,
+    streetCode: appStore.address.streetCode,
+    id: route.query.id
+  }).then(res=>{
+    dataList.value = res.data;
+  })
+}
 
 onMounted(() => {
-
+  initAlarmRangeList()
 })
 </script>
 
@@ -18,8 +34,9 @@ onMounted(() => {
       <div class="c-box">
         <rightCard
           class="box-card"
-          v-for="(item, index) in 6"
+          v-for="(item, index) in dataList"
           :key="index"
+          :info="item"
         ></rightCard>
       </div>
     </div>

src/view/delivery/components/rightCard.vue

@@ -2,13 +2,38 @@
 import { ref, reactive, onMounted } from "vue"
 import * as echarts from "echarts"
 
+const props = defineProps({
+  info: {
+    type: Object,
+    default: ()=>{}
+  }
+})
+
+function getRecentSevenDays() {
+  const dates = [];
+  
+  for (let i = 6; i >= 0; i--) {
+    const date = new Date();
+    date.setDate(date.getDate() - i);
+    
+    const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
+    const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+    
+    const formattedDate = month + '-' + day;
+    dates.push(formattedDate);
+  }
+  
+  return dates;
+}
+
+
 const chartsRef = ref(null)
 const initMap = () => {
   const charts = echarts.init(chartsRef.value);
   let option = {
     title: {
       show: true,
-      text: '甲烷',
+      text: props.info.name,
       top: "10%",
       left: "12%",
       textStyle: {
@@ -62,7 +87,7 @@ const initMap = () => {
             color: '#fff',
           },
         },
-        data: ['12.01', '12.02', '12.03', '12.04', '12.05', '12.06', '12.07'],
+        data: getRecentSevenDays(),
       },
     ],
     yAxis: [
@@ -91,7 +116,7 @@ const initMap = () => {
     ],
     series: [
       {
-        name: '工厂1',
+        name: '线',
         type: 'line',
         smooth: true,
         // showSymbol: false,/
@@ -124,7 +149,7 @@ const initMap = () => {
             shadowBlur: 10,
           },
         },
-        data: [100, 138, 350, 173, 180, 150, 180],
+        data: props.info.RangeMonitorData,
       },
     ],
   }
@@ -140,8 +165,8 @@ onMounted(() => {
   <div class="c-card">
     <div class="left">
       <div>监测正常</div>
-      <img src="/src/assets/img/icon.png" />
+      <img :src="info.image||'/src/assets/img/icon.png'" />
-      <div>甲烷监测设备</div>
+      <div>{{ info.name }}</div>
     </div>
     <div class="right" ref="chartsRef"></div>
   </div>
@@ -155,6 +180,7 @@ onMounted(() => {
   justify-content: space-evenly;
   .left {
     height: 100%;
+    width: 6rem;
     display: flex;
     flex-direction: column;
     justify-content: center;

src/view/delivery/index.vue

@@ -4,22 +4,25 @@ import leftItme from "./components/left.vue";
 import centerItme from "./components/center.vue";
 import bottomItme from "./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 item_c">
       <div style="height: 61%; display: flex; justify-content: space-between">
-        <leftItme :key="route.query.name" style="width: 35%"></leftItme>
+        <leftItme :key="route.query.name+key" style="width: 35%"></leftItme>
-        <centerItme  :key="route.query.name" style="width: 64%"></centerItme>
+        <centerItme  :key="route.query.name+key" style="width: 64%"></centerItme>
       </div>
       <div style="height: 36%">
-        <bottomItme :key="route.query.name"  style="width: 100%"></bottomItme>
+        <bottomItme :key="route.query.name+key"  style="width: 100%"></bottomItme>
       </div>
     </div>
     <div class="item">
-      <rightItme :key="route.query.name"  style="height: 98%"></rightItme>
+      <rightItme :key="route.query.name+key"  style="height: 98%"></rightItme>
     </div>
   </div>
 </template>

src/view/index/components/left.vue

@@ -266,7 +266,7 @@ onMounted(() => {
         <div class="tab-item">
           <img src="/src/assets/index_img/icon1.png" />
           <div>养殖规模</div>
-          <div class="count">{{ farmInfo.totalScale }}亩</div>
+          <div class="count">{{ farmInfo.totalScale }}只</div>
         </div>
       </div>
       <dv-scroll-board
@@ -284,36 +284,44 @@ onMounted(() => {
         <div class="left">
           <!-- <img src="/src/assets/index_img/video.png" /> -->
           <videoFlv
+            v-if="farmList[0]?.video_url"
             style="width: 100%; height: 100%"
             :url="farmList[0].video_url||''"
           />
-          <div class="title">{{ farmList[0].farm_name }}</div>
+          <div v-else style="width: 100%; height: 100%; background-color: #0c1122;"></div>
+          <div class="title">{{ farmList[0]?.farm_name || "" }}</div>
         </div>
         <div class="right">
           <div class="item">
             <videoFlv
+              v-if="farmList[1]?.video_url"
               style="width: 100%; height: 100%"
               :url="farmList[1].video_url||''"
             />
-            <div class="title">{{ farmList[1].farm_name }}</div>
+            <div v-else style="width: 100%; height: 100%; background-color: #0c1122;"></div>
+            <div class="title">{{ farmList[1]?.farm_name || "" }}</div>
           </div>
           <div class="item">
             <videoFlv
+              v-if="farmList[2]?.video_url"
               style="width: 100%; height: 100%"
               :url="farmList[2].video_url||''"
             />
-            <div class="title">{{ farmList[2].farm_name }}</div>
+            <div v-else style="width: 100%; height: 100%; background-color: #0c1122;"></div>
+            <div class="title">{{ farmList[2]?.farm_name || "" }}</div>
           </div>
           <div class="item">
             <videoFlv
+              v-if="farmList[3]?.video_url"
               style="width: 100%; height: 100%"
               :url="farmList[3].video_url||''"
             />
-            <div class="title">{{ farmList[3].farm_name }}</div>
+            <div v-else style="width: 100%; height: 100%; background-color: #0c1122;"></div>
+            <div class="title">{{ farmList[3]?.farm_name || "" }}</div>
           </div>
           <div class="item">
-            <img src="/src/assets/index_img/video.png" />
+            <!-- <img src="/src/assets/index_img/video.png" /> -->
-            <!-- <div class="title">泸县原生态养殖基地</div> -->
+            <div style="width: 100%; height: 100%; background-color: #0c1122;"></div>
             <div class="btn" @click="show = true">查看全部</div>
           </div>
         </div>

src/view/index/components/right.vue

@@ -1,5 +1,9 @@
 <script setup>
-import { ref, reactive, onMounted } from "vue"
+import { ref, reactive, onMounted } from "vue";
+import { getDeviceDesc } from "@/api/api.js";
+import { useAppStore } from "@/store/app.js";
+
+const appStore = useAppStore();
 
 const dataList = ref([
   {
@@ -28,8 +32,18 @@ const dataList = ref([
   },
 ])
 
-onMounted(() => {
+const hardwareList = ref([])
+const initDeviceDesc = ()=>{
+  getDeviceDesc({
+    areaCode: appStore.address.areaCode,
+    streetCode: appStore.address.streetCode
+  }).then(res=>{
+    hardwareList.value = res.data;
+  })
+}
 
+onMounted(() => {
+  initDeviceDesc();
 })
 </script>
 
@@ -41,13 +55,13 @@ onMounted(() => {
         <div class="bg"></div>
       </div>
       <div class="c-box">
-        <div class="c-item" v-for="(item, index) in 6" :key="index">
+        <div class="c-item" v-for="(item, index) in hardwareList" :key="index">
           <div class="name">
-            <img src="/src/assets/index_img/icon2.png" />
+            <img :src="item.icon" />
-            <div>4G中转站</div>
+            <div>{{item.name}}</div>
           </div>
           <div class="tip">
-            主要功能详细介绍,主要功能详细介绍,主要功能详细介绍,主要功能详细介绍,主要功能详细介绍,主要功能详细介绍,主要功能详细介绍,主要功能详细介绍,
+            {{ item.desc }}
           </div>
         </div>
       </div>

src/view/indexc/components/center2.vue

@@ -1,9 +1,10 @@
 <script setup>
-import { onMounted, reactive, ref, inject, nextTick } from "vue";
+import { onMounted, reactive, ref, inject, nextTick, onUpdated } from "vue";
 import * as echarts from 'echarts';
 import { useRoute, useRouter } from "vue-router";
 import ani from "@/components/ani.vue";
 import mitt from "@/utils/mitt";
+import { getfarmCount } from "@/api/api.js";
 import luxian from "@/assets/json/luxian.json";
 import hejiang from "@/assets/json/hejiang.json";
 import xuyong from "@/assets/json/xuyong.json";
@@ -491,13 +492,16 @@ const initMap = () => {
   chart.on('click', function (params) {
     if (params.seriesType === 'scatter') {
       // 处理你的点击事件逻辑
-      console.log('点击了', params.data.name);
+      console.log('点击了', params.data);
       router.push({
         path: '/delivery',
         query: {
           areaCode: route.query.areaCode,
           streetCode: route.query.streetCode,
-          name: route.query.name
+          name: route.query.name,
+          id: params.data.id,
+          farm_name: params.data.name,
+          local: params.data.value.join(',')
         }
       })
     }
@@ -546,17 +550,41 @@ const filterMap = () => {
   })
 }
 
+
+const initFarmCount = ()=>{
+  getfarmCount({
+    areaCode: appStore.address.areaCode,
+    streetCode: appStore.address.streetCode
+  }).then((res)=>{
+    res.data.farmList.forEach(item=>{
+      if(item.longitude && item.latitude) dataValue.push({
+        id: item.id,
+        name: item.farm_name,
+        value: [item.longitude, item.latitude]
+      })
+    })
+    
+    nextTick(() => {
+      mapInfo();
+      initDataValue();
+      initMap();
+    })
+  })
+}
+
 onMounted(() => {
 
   if (route.query.name) {
     filterMap()
   }
-  dataValue = props.list;
+  // dataValue = props.list;
-  dataValue[0] = {
+  // dataValue[0] = {
-    name: '福集镇养殖基地',
+  //   name: '福集镇养殖基地',
-    value: [105.36, 29.20]
+  //   value: [105.36, 29.20]
-  }
+  // }
-  // changeType('luxian');
+
+  initFarmCount()
+  
   mapInfo();
   initDataValue();
   initMap();
@@ -568,6 +596,7 @@ onMounted(() => {
       initMap();
     })
   })
+  
 })
 
 </script>