监控

.env.development

@@ -6,7 +6,8 @@ VITE_PUBLIC_PATH = /
 
 # Cross-domain proxy, you can configure multiple
 # Please note that no line breaks
-VITE_PROXY = [["/basic-api","http://36.133.205.221:81"],["/upload","https://lcny.sk797.cn/api/web/upload"],['/live','https://open.ys7.com']]
+# http://36.133.205.221:81
+VITE_PROXY = [["/basic-api","https://lcny.sk797.cn"],["/upload","https://lcny.sk797.cn/api/web/upload"],['/live','https://open.ys7.com']]
 
 # Delete console
 VITE_DROP_CONSOLE = false

src/views/visualization/MapModal.vue

@@ -108,7 +108,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 JK from './components/JK1.vue'
   import BasicChart from './components/BasicChart.vue'
   import { useVisualizationStore } from '/@/store/modules/visualization'
   import { getAgriculturalBasicDetails } from '/@/api/sys/other'

src/views/visualization/components/JK.vue

@@ -213,8 +213,6 @@
         }
 
         Data.list = list
-        console.log('======')
-        console.log(Data.list.length)
 
         if (Data.list.length > 0) currentVido.value = Data.list[0]
 

src/views/visualization/components/JK1.vue

@@ -0,0 +1,239 @@
+<template>
+  <Box title="监控">
+    <div class="h-full flex flex-col">
+      <div class="py-10px relative">
+        <div
+          v-if="listBig"
+          class="text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-14px font-bold"
+        >
+          {{ listBig.monitoring_point }}
+        </div>
+        <div
+          class="absolute right-18px top-1/2 transform -translate-y-1/2"
+          v-if="listSmall.length > 1"
+        >
+          <Dropdown
+            overlayClassName="dropdownClass"
+            placement="bottomRight"
+            trigger="click"
+            :style="{ height: '300px' }"
+          >
+            <div class="cursor-pointer">
+              <span class="text-white text-12px">更多</span>
+              <DownOutlined :style="{ fontSize: '12px', color: '#FFF' }" />
+            </div>
+            <template #overlay>
+              <Menu @click="onMenuClick">
+                <menu-item v-for="item in listSmall" :key="item.id">
+                  <div>{{ item.monitoring_point }}</div>
+                </menu-item>
+              </Menu>
+            </template>
+          </Dropdown>
+        </div>
+      </div>
+      <div class="flex-1 flex flex-col py-0px box-content" :class="{ 'pt-0': !isBase }">
+        <div class="flex-1">
+          <div v-if="listBig" class="h-130px" :class="{ '!h-full': isBase }">
+            <VideoFlv
+              @onScreen="onScreenClick"
+              class="cursor-pointer"
+              :url="listBig.url"
+              :key="listBig.url"
+              :name="listBig.monitoring_point"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <LinkModal
+      v-model:visible="visibleModal"
+      :footer="null"
+      :title1="currentModelVideo && currentModelVideo.name"
+      :width="1100"
+    >
+      <template #content>
+        <div class="w-full">
+          <VideoFlv
+            v-if="currentModelVideo.url"
+            :url="currentModelVideo.url"
+            :screen="false"
+            :name="currentModelVideo.name"
+          />
+        </div>
+      </template>
+    </LinkModal>
+  </Box>
+</template>
+
+<script lang="ts">
+  import {
+    defineComponent,
+    reactive,
+    ref,
+    onBeforeMount,
+    computed,
+    toRefs,
+    toRaw,
+    onBeforeUnmount,
+  } from 'vue'
+  import { DownOutlined } from '@ant-design/icons-vue'
+  import { Dropdown, Menu } from 'ant-design-vue'
+  import { getDevices, getffmpegip } from '/@/api/sys/other'
+  import Box from './Box.vue'
+  import VideoFlv from './VideoFlv.vue'
+  import v01 from '../../../assets/images/v01.png'
+  import v02 from '../../../assets/images/v02.png'
+  import v03 from '../../../assets/images/v03.png'
+  import LinkModal from '../LinkModal.vue'
+  import axios from 'axios'
+  export default defineComponent({
+    components: {
+      Box,
+      Dropdown,
+      DownOutlined,
+      Menu,
+      MenuItem: Menu.Item,
+      VideoFlv,
+      LinkModal,
+    },
+    props: ['baseId'],
+    setup(props) {
+      console.log('===JK')
+      console.log(props.baseId)
+      const Data = reactive({
+        tabList: ref<any>([]),
+        currentTab: ref<number | string>(''),
+        list: ref<any[]>([]),
+      })
+
+      const visibleModal = ref(false)
+
+      const chartRef = ref<HTMLDivElement | null>(null)
+
+      const currentVido = ref<any>(null)
+
+      const currentModelVideo = ref<any>(null)
+
+      const listSmall = computed(() => {
+        return Data.list ?? []
+      })
+
+      const listBig = computed(() => Data.list.find((e) => e.id == Data.currentTab))
+
+      function onMenuClick({ key }) {
+        Data.currentTab = key
+      }
+
+      async function getData() {
+        const { ip, port } = await getffmpegip()
+
+        const resData = await getDevices({
+          base_id: props.baseId ?? Data.currentTab,
+          type: 1,
+          status: 1,
+          is_recommend: props.baseId ? null : 1,
+        })
+        Data.list = []
+
+        currentVido.value = null
+
+        const arr = resData
+        const list: any = []
+
+        for (let index = 0; index < arr.length; index++) {
+          const e = arr[index]
+
+          const option = toRaw(e)
+          const { supplier, extends: extend, sn } = option
+
+          const { rtsp_url } = extend
+          const url = rtsp_url
+          let playUrl: any = `ws://${ip}:${port}/rtsp?url=${window.btoa(url)}`
+          if (supplier?.id == 'device-supplier-biang') {
+            try {
+              playUrl = await getSeedingLive({
+                username: extend.username,
+                password: extend.password,
+                equipmentCode: sn,
+                channelNo: extend.passage,
+              })
+            } catch (error) {}
+          }
+          list.push(
+            Object.assign(
+              {},
+              {
+                ...e,
+                img: index == 0 ? v01 : index == 1 ? v02 : index == 2 ? v03 : v01,
+                url: playUrl,
+              },
+            ),
+          )
+        }
+
+        Data.list = list
+        if (Data.list.length > 0) {
+          currentVido.value = Data.list[0]
+          Data.currentTab = Data.list[0].id
+        }
+      }
+
+      function getSeedingLive(params) {
+        return new Promise(async (resolve, reject) => {
+          try {
+            const { data } = await axios.get(
+              'https://yun.bigdata5s.com/api/open-api/open/getSeedingLive',
+              {
+                params,
+              },
+            )
+            if (data.code == 200) resolve(data.data)
+            else reject(data)
+          } catch (error) {
+            reject(error)
+          }
+        })
+      }
+
+      let timer: any = null
+
+      function onChangeVideo(e) {
+        if (currentVido.value.url == e.url) return
+        currentVido.value = e
+      }
+
+      function onScreenClick(e) {
+        currentModelVideo.value = e
+        visibleModal.value = true
+      }
+
+      const isBase = computed(() => !!props.baseId)
+
+      onBeforeMount(() => {
+        if (isBase.value) {
+          getData()
+        }
+      })
+
+      onBeforeUnmount(() => {
+        timer && clearInterval(timer)
+      })
+
+      return {
+        isBase,
+        listBig,
+        listSmall,
+        onChangeVideo,
+        currentVido,
+        currentModelVideo,
+        ...toRefs(Data),
+        chartRef,
+        onMenuClick,
+        visibleModal,
+        onScreenClick,
+      }
+    },
+  })
+</script>