基地监控

src/views/visualization/MapModal.vue

@@ -53,7 +53,7 @@
                 :index="index"
               />
             </div>
-            <div class="write-normal inline-block m-5px" v-if="isJK">
+            <div class="write-normal inline-block m-5px" v-if="isSB">
               <SBYXZT
                 v-bind="getBindValue"
                 headHeight="34.5px"
@@ -85,6 +85,14 @@
                 v-bind="getBindValue"
               />
             </div>
+            <div class="write-normal inline-block m-5px" v-if="isJK">
+              <JK
+                headHeight="34.5px"
+                :width="`${boxWidth}px`"
+                :height="`${boxHeight}px`"
+                v-bind="getBindValue"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -99,6 +107,7 @@
   import QXSZ from './components/QXSZ.vue'
   import SZJCSJ from './components/SZJCSJ.vue'
   import TRJCSJ from './components/TRJCSJ.vue'
+  import JK from './components/JK.vue'
   import BasicChart from './components/BasicChart.vue'
   import { useVisualizationStore } from '/@/store/modules/visualization'
   import { getAgriculturalBasicDetails } from '/@/api/sys/other'
@@ -111,6 +120,7 @@
       QXSZ,
       SZJCSJ,
       TRJCSJ,
+      JK,
       BasicChart,
     },
     props: {
@@ -136,10 +146,13 @@
       const cropsList = ref<any[]>([])
       const deviceList = ref<any[]>([])
 
-      const isJK = computed(() => deviceList.value.findIndex((e) => e.type == '监控设备') >= 0)
+      const isJK = computed(
+        () => deviceList.value.findIndex((e) => e.type == '监控设备' && e.is_recommend == 1) >= 0,
+      )
       const isTR = computed(() => deviceList.value.findIndex((e) => e.type == '土壤设备') >= 0)
       const isQX = computed(() => deviceList.value.findIndex((e) => e.type == '气象设备') >= 0)
       const isSZ = computed(() => deviceList.value.findIndex((e) => e.type == '水质设备') >= 0)
+      const isSB = computed(() => deviceList.value.length)
 
       const modelWidth = computed(
         () => (boxWidth + 10) * Math.ceil((cropsList.value.length + 4) / 2) + 60,
@@ -149,6 +162,8 @@
         const resData = await getAgriculturalBasicDetails(props.baseId)
         cropsList.value = resData.crops
         deviceList.value = resData.devices
+        console.log(resData.devices)
+
         Data.data = resData
       }
       const year = computed(() => visualizationStore.getYear)
@@ -184,6 +199,7 @@
         isTR,
         isQX,
         isSZ,
+        isSB,
         getContainer,
         cropsList,
         deviceList,

src/views/visualization/components/JK.vue

@@ -1,7 +1,7 @@
 <template>
   <Box title="监控">
     <div class="h-full flex flex-col">
-      <div class="py-10px relative">
+      <div class="py-10px relative" v-if="!isBase">
         <div
           class="text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-14px font-bold"
         >
@@ -31,16 +31,18 @@
           </Dropdown>
         </div>
       </div>
-      <div class="flex-1 px-11px flex flex-col">
+      <div class="flex-1 px-11px flex flex-col py-10px box-content" :class="{ 'pt-0': !isBase }">
         <div class="flex-1">
-          <VideoFlv
+          <div class="bg-light-600 h-full" :class="{ 'h-140px': isBase }">
-            class="cursor-pointer"
+            <VideoFlv
-            v-if="currentVido"
+              class="cursor-pointer"
-            :url="currentVido.url"
+              v-if="currentVido"
-            :name="currentVido.base_name"
+              :url="currentVido.url"
-          />
+              :name="currentVido.base_name"
+            />
+          </div>
         </div>
-        <div class="grid grid-cols-3 gap-x-6px my-10px">
+        <div class="grid grid-cols-3 gap-x-6px pt-10px">
           <div class="h-66px" v-for="item in list" :key="item.id">
             <VideoFlv
               class="cursor-pointer"
@@ -82,7 +84,10 @@
       MenuItem: Menu.Item,
       VideoFlv,
     },
-    setup() {
+    props: ['baseId'],
+    setup(props) {
+      console.log('===JK')
+      console.log(props.baseId)
       const Data = reactive({
         tabList: ref<any>([]),
         currentTab: ref<number | string>(''),
@@ -115,7 +120,7 @@
       async function getData() {
         const { ip, port } = await getffmpegip()
         const resData = await getDevices({
-          base: Data.currentTab,
+          base_id: props.baseId ?? Data.currentTab,
           type: 1,
           status: 1,
           is_recommend: 1,
@@ -140,12 +145,18 @@
         if (currentVido.value.url == e.url) return
         currentVido.value = e
       }
+      const isBase = computed(() => !!props.baseId)
 
       onBeforeMount(() => {
-        getTabs()
+        if (isBase.value) {
+          getData()
+        } else {
+          getTabs()
+        }
       })
 
       return {
+        isBase,
         onChangeVideo,
         currentVido,
         ...toRefs(Data),