点位管理

src/App.vue

@@ -5,11 +5,16 @@
 <script setup>
 import useSettingsStore from '@/store/modules/settings'
 import { handleThemeStyle } from '@/utils/theme'
-
+const screenHeight = ref(window.innerHeight-145);
 onMounted(() => {
   nextTick(() => {
     // 初始化主题样式
     handleThemeStyle(useSettingsStore().theme)
+    window.addEventListener('resize', handleResize);
   })
 })
+function handleResize() {
+  screenHeight.value = window.innerHeight-145;
+}
+provide('globalScreenHeight', screenHeight);
 </script>

src/api/videoControl/videoPreview.js

@@ -9,6 +9,23 @@ export function listAiRegionManage(query) {
     })
   }
   
+
+// 获取左侧树
+export function videoTreeListManage(query) {
+  return request({
+    url: '/yunshou/aiRegionManage/videoTreeList',
+    method: 'get',
+    params: query
+  })
+}
+// 获取根据点位ID获取设备
+export function idDevice(id) {
+  return request({
+    url: `/yunshou/aiRegionManage/getVideoInfoById/${id}`,
+    method: 'get',
+  })
+}
+
 // 查询设备列表x详情
 export function detailDevice(id) {
     return request({
@@ -62,3 +79,4 @@ export function exportDevice(data) {
     data: data
   })
 }
+

src/components/Breadcrumb/index.vue

@@ -2,8 +2,8 @@
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
-        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
-        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect" >{{ item.meta.title }}</span>
+        <a v-else @click.prevent="handleLink(item)" style="color: #fff;">{{ item.meta.title }}</a>
       </el-breadcrumb-item>
     </transition-group>
   </el-breadcrumb>
@@ -52,14 +52,17 @@ getBreadcrumb();
 </script>
 
 <style lang='scss' scoped>
+.el-breadcrumb__separator{
+  color: #fff;
+}
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
   font-size: 14px;
   line-height: 50px;
   margin-left: 8px;
-
+  color: #fff;
   .no-redirect {
-    color: #97a8be;
+    color: #fff;
     cursor: text;
   }
 }

src/components/Hamburger/index.vue

@@ -3,12 +3,13 @@
     <svg
       :class="{'is-active':isActive}"
       class="hamburger"
+      style="color: #fff;"
       viewBox="0 0 1024 1024"
       xmlns="http://www.w3.org/2000/svg"
       width="64"
       height="64"
     >
-      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+      <path id="mySvg" d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
     </svg>
   </div>
 </template>
@@ -25,6 +26,13 @@ const emit = defineEmits()
 const toggleClick = () => {
   emit('toggleClick');
 }
+
+onMounted(() => {
+  const element = document.getElementById('mySvg');
+  element.style.fill = '#fff';
+})
+
+
 </script>
 
 <style scoped>

src/components/ImageUpload/index.vue

@@ -103,7 +103,6 @@ watch(() => props.modelValue, val => {
       if (typeof item === "string") {
         if (item.indexOf(baseUrl) === -1) {
           item = { name: baseUrl + item, url: baseUrl + item };
-          console.log("🚀 ~ watch ~ item:", item)
         } else {
           item = { name: item, url: item };
         }

src/components/ImgVideoUpload/index.vue

@@ -33,6 +33,7 @@
       :before-remove="handleDelete"
       :show-file-list="false"
       :headers="headers"
+      :file-list="fileList"
       :on-preview="handlePictureCardPreview"
       :class="{ hide: fileList.length >= limit }"
     >
@@ -61,6 +62,7 @@
       append-to-body
     >
       <video
+        width="100%"
         v-if="getFileType(dialogImageUrl)=='video'"
         :src="dialogImageUrl"
         controls
@@ -151,6 +153,7 @@ watch(() => props.modelValue, val => {
 
 // 上传前loading加载
 function handleBeforeUpload(file) {
+  console.log("🚀 ~ handleBeforeUpload ~ file:", file)
   let isImg = false;
   if (props.fileType.length) {
     let fileExtension = "";

src/layout/components/Navbar.vue

@@ -12,15 +12,15 @@
           <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
         </el-tooltip> -->
 
-        <el-tooltip content="文档地址" effect="dark" placement="bottom">
+        <!-- <el-tooltip content="文档地址" effect="dark" placement="bottom">
           <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
-        </el-tooltip>
+        </el-tooltip> -->
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
-        <el-tooltip content="布局大小" effect="dark" placement="bottom">
+        <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
+        </el-tooltip> -->
       </template>
       <div class="avatar-container">
         <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">

src/router/index.js

@@ -57,19 +57,19 @@ export const constantRoutes = [
     component: () => import('@/views/error/401'),
     hidden: true
   },
-  {
-    path: '',
-    component: Layout,
-    redirect: '/index',
-    children: [
-      {
-        path: '/index',
-        component: () => import('@/views/index'),
-        name: 'Index',
-        meta: { title: '工作台', icon: 'dashboard', affix: true }
-      }
-    ]
-  },
+  // {
+  //   path: '',
+  //   component: Layout,
+  //   redirect: '/index',
+  //   children: [
+  //     {
+  //       path: '/index',
+  //       component: () => import('@/views/index'),
+  //       name: 'Index',
+  //       meta: { title: '工作台', icon: 'dashboard', affix: true }
+  //     }
+  //   ]
+  // },
   {
     path: '/user',
     component: Layout,

src/views/alarmControl/index.vue

@@ -3,7 +3,7 @@
       <TabTitle :text="nowText" />
       <el-row :gutter="10">
         <el-col :xs="24" :sm="24" :md="24" :lg="24">
-          <el-scrollbar height="730px">
+          <el-scrollbar :height="globalScreenHeight+'px'">
             <el-card class="right-list">
             <template v-slot:header>
               <el-form :model="queryParams" ref="queryRef" :inline="true" >
@@ -113,6 +113,7 @@
   import alarmDetial from './components/form.vue'
   import { ArrowDown } from '@element-plus/icons-vue'
   import { Search } from '@element-plus/icons-vue'
+  const globalScreenHeight = inject('globalScreenHeight');
   const router = useRouter();
   const alarmDetialRef = ref(null)
   const nowText=ref('告警管理')

src/views/algorithmControl/components/form.vue

 <template>
+  <div>
     <el-dialog
       v-model="open"
       :title="title"
@@ -274,7 +275,7 @@
               </el-row>
               <el-row :gutter="10" class="mb8">
                 <el-col :span="24">
-                  <el-form-item label-width="130px" label="在线体验案例图片/视频" prop="algorithmBannerVideo">
+                  <el-form-item label-width="130px" label="在线体验案例图片/视频" prop="imgVideoData">
                     <ImgVideoUpload 
                     :modelValue="imgVideoData"
                      :fileType="['png', 'jpg', 'mp4']"
@@ -457,6 +458,8 @@
         </div>
       </template>
     </el-dialog>
+  </div>
+  
 </template>
 
 <script setup>
@@ -512,6 +515,7 @@ function getImageUrl(url){
     form.value.cardImg=url
 }
 function getAlgorithmBannerVideo(url){
+  console.log("🚀 ~ getAlgorithmBanner ~ url:", url)
     form.value.algorithmBannerVideo=url
 }
 function getAlgorithmBanner(url){

src/views/algorithmControl/index.vue

@@ -2,7 +2,7 @@
     <div class="app-container">
        <TabTitle :text="nowText" />
 
-       <el-card class="left-list">
+       <el-card class="left-list" :style="{height:globalScreenHeight+'px'}">
         <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
           <el-form-item label="算法名称" prop="algorithmName">
              <el-input
@@ -110,7 +110,7 @@
           @pagination="getList"
        />
        </el-card>
-       <algForm ref="algFormRef"  @getList="getList"/>
+       <algForm ref="algFormRef"  @getList1="getList"/>
     </div>
  </template>
  
@@ -120,7 +120,7 @@
  const router = useRouter();
  const { proxy } = getCurrentInstance();
  const { algorithm_scen, sys_job_status } = proxy.useDict("algorithm_scen", "sys_job_status");
- 
+ const globalScreenHeight = inject('globalScreenHeight');
  const algFormRef = ref(null)
  const nowText = ref("算法管理");
  const algList = ref([]);

src/views/algorithmList/components/details.vue

@@ -20,8 +20,8 @@
                   {{form.cardCopywriting}}
                 </p>
               </div> 
-              <div style="width: 400px;height: 225px;" >
-                <video  v-if="videoLoading" controls ref="videoEle" class="drawImg">
+              <div style="width: 400px;height: 225px;overflow: hidden;" >
+                <video  v-if="videoLoading" controls ref="videoEle" class="drawImg" width="100%" style="border-radius: 10px;">
                   <source :src="backVideo" type="video/mp4" />
                 </video>
               </div> 
@@ -69,6 +69,7 @@
                        </video>
                     </div>
                     <ImgVideoUpload 
+                      v-if="form.algorithmStatus=='0'"
                       style="position: absolute;bottom: 5px;left: 26%;" 
                       :modelValue="uploadUrl" 
                       :fileType="['png', 'jpg', 'mp4']"
@@ -77,6 +78,9 @@
                       :isShowTip="false"
                       @update:modelObj="getImgObj"
                      />
+                     <div  v-else style="position: absolute;bottom: 5px;left: 26%;" class="text-style">
+                      请开启算法
+                     </div>
                     <!-- <ImageUpload :limit='1' :fileSize="5" :isShowTip="false" @update:modelObj="getImgObj"/> -->
                   </div>
                 </el-card>
@@ -93,7 +97,7 @@
                         <source :src="'http://192.168.3.82'+nowImg" type="video/mp4" />
                     </video>
                   </div>
-                  <el-button type="primary" plain @click="openIdentify" style="margin: 10px 0;">开始识别</el-button>
+                  <el-button v-if="form.algorithmStatus=='0'" type="primary" plain @click="openIdentify" style="margin: 10px 0;">开始识别</el-button>
                 </el-card>
                 <el-card >
                   <div class="text-style" style="margin: 10px 0;">
@@ -110,8 +114,10 @@
                     </video>
                   </div>
                   <div style="display: flex;justify-content: space-between;margin: 10px 0;">
-                    <el-button type="primary" plain>重置区域</el-button>
-                    <el-button type="primary" plain>下载识别视频</el-button>
+                    <!-- <el-button type="primary" plain>重置区域</el-button> -->
+                     <div></div>
+                    <el-button type="primary" plain @click="downVideo">下载识别视频</el-button>
+                    <!-- <el-button v-if="getFileType(outFilePath)=='1'" type="primary" plain @click="downVideo">下载识别视频</el-button> -->
                   </div>
                 </el-card>
           </div>
@@ -269,6 +275,12 @@ function getFileType(fileName) {
       return "0";
     }
 }
+
+function downVideo(){
+  window.open(baseUrl+'/algorithm/images/ResDir/2024/9/2/1830503463524630529/Safety helmet wearing detection/1725261009531_1.mp4')
+
+}
+
 getDetials()
 
 </script>

src/views/algorithmList/index.vue

@@ -22,7 +22,7 @@
       </div>
       <el-row :gutter="10">
         <el-col :xs="0" :sm="2" :md="3" :lg="4">
-          <el-card class="left-list">
+          <el-card class="left-list" style="height: 100%;">
             <el-menu
               default-active="2"
               class="el-menu-vertical-demo"
@@ -41,7 +41,7 @@
           </el-card>
         </el-col>
         <el-col :xs="24" :sm="20" :md="20" :lg="20">
-          <el-scrollbar height="710px">
+          <el-scrollbar :height="globalScreenHeight+'px'">
             <el-card class="right-list">
             <template v-slot:header>
               <div class="cleartitle" style="justify-content: flex-start">
@@ -53,30 +53,35 @@
                   <el-button
                      type="primary"
                      plain
+                     @click="handState('')"
                   >全部</el-button>
                </el-col>
                <el-col :span="1.5">
                   <el-button
                      type="primary"
                      plain
+                    @click="handState('0')"
                   >运行中</el-button>
                </el-col>
                <el-col :span="1.5">
                   <el-button
                      type="primary"
                      plain
+                     @click="handState('1')"
                   >已禁用</el-button>
                </el-col>
                <el-col :span="1.5">
                   <el-button
                      type="primary"
                      plain
+                     @click="handState('2')"
                   >已下载</el-button>
                </el-col>
                <el-col :span="1.5">
                   <el-button
                      type="primary"
                      plain
+                     @click="handState('3')"
                   >已删除</el-button>
                </el-col>
             </el-row>
@@ -146,53 +151,13 @@
   const { algorithm_scen, sys_job_status } = proxy.useDict("algorithm_scen", "sys_job_status");
   import { ArrowDown } from '@element-plus/icons-vue'
   import { Search } from '@element-plus/icons-vue'
+  const globalScreenHeight = inject('globalScreenHeight');
   const router = useRouter();
   const algorithmDownRef = ref(null)
   const nowText=ref('算法管理')
   const nowTopTitle=ref('算法管理')
   const ids = ref([]);
-  const algorithmList=reactive([
-    {
-      name:"我的算法",
-      value:1
-    },
-    {
-      name:"最新算法",
-      value:2
-    },
-    {
-      name:"基础算法",
-      value:3
-    },
-    {
-      name:"智慧煤矿",
-      value:4
-    },
-    {
-      name:"智慧能源",
-      value:5
-    },
-    {
-      name:"智慧校园",
-      value:6
-    },
-    {
-      name:"智慧港口",
-      value:7
-    },
-    {
-      name:"智慧煤矿",
-      value:8
-    },
-    {
-      name:"智慧能源",
-      value:9
-    },
-    {
-      name:"智慧校园",
-      value:10
-    },
-  ])
+  const algorithmList=reactive([])
   const algList = ref([]);
   const data = reactive({
     form: {},
@@ -211,7 +176,6 @@
   });
   const { queryParams, form, rules } = toRefs(data);
 
-  
   /** 查询算法列表 */
   function getList() {
     // loading.value = true;
@@ -228,14 +192,9 @@
     // console.log("🚀 ~ handDetails ~ row:", row)
     router.push("/algorithmList/details/info/" + row.id);
   }
-  function handleSetSize(row) {
-    // reset();
-    // const postId = row.postId || ids.value;
-    // getPost(postId).then(response => {
-    //   form.value = response.data;
-    //   open.value = true;
-    //   title.value = "修改岗位";
-    // });
+  function handState(state) {
+    queryParams.value.algorithmStatus=state
+    getList()
   }
   function handleUpdate(row) {
     algorithmDownRef.value.handleUpdate(row)

src/views/deviceControl/index.vue

@@ -2,7 +2,7 @@
     <div class="app-container">
        <TabTitle :text="nowText" />
 
-       <el-card class="left-list">
+       <el-card class="left-list" :style="{height:globalScreenHeight+'px'}">
         <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
           <el-form-item label="设备名称" prop="deviceName">
              <el-input
@@ -183,7 +183,7 @@
  const router = useRouter();
  const { proxy } = getCurrentInstance();
  const { sys_job_group, sys_job_status } = proxy.useDict("sys_job_group", "sys_job_status");
- 
+ const globalScreenHeight = inject('globalScreenHeight');
  const nowText = ref("设备管理");
  const deviceList = ref([]);
  const open = ref(false);

src/views/login.vue

@@ -125,7 +125,7 @@ function handleLogin() {
           }
           return acc;
         }, {});
-        router.push({ path: redirect.value || "/", query: otherQueryParams });
+        router.push({ path: redirect.value || "/deviceControl", query: otherQueryParams });
       }).catch(() => {
         loading.value = false;
         // 重新获取验证码

src/views/videoControl/pointControl/index.vue

@@ -65,7 +65,7 @@
         </el-card>
       </el-col>
       <el-col :xs="24" :sm="16" :md="16" :lg="20">
-        <el-scrollbar height="700px">
+        <el-scrollbar :height="globalScreenHeight+'px'">
           <el-card class="right-list">
             <template v-slot:header>
               <div class="cleartitle" style="justify-content: flex-start">
@@ -305,6 +305,7 @@ import { onMounted, reactive, ref, unref, watch, watchEffect } from "vue";
 import request from "@/utils/request";
 import { useIndex } from "./hooks";
 const { proxy } = getCurrentInstance();
+const globalScreenHeight = inject('globalScreenHeight');
 const drawPointRef = ref(null);
 const nowText = ref("点位管理");
 const deptName = ref("");

src/views/videoControl/videoPreview/index.vue

@@ -3,7 +3,7 @@
     <TabTitle :text="nowText" />
     <el-row :gutter="10">
       <el-col :xs="0" :sm="2" :md="3" :lg="4">
-        <el-card class="left-list">
+        <el-card class="left-list" :style="{height:globalScreenHeight+'px'}">
           <div class="head-container">
             <el-input
               v-model="deptName"
@@ -29,8 +29,7 @@
         </el-card>
       </el-col>
       <el-col :xs="24" :sm="16" :md="16" :lg="14">
-        <el-scrollbar height="700px">
-          <el-card class="right-list">
+          <el-card class="right-list" :style="{height:globalScreenHeight+'px'}">
             <template v-slot:header>
               <div class="cleartitle" style="justify-content: flex-start">
                 <img src="@/assets/images/logo_video.png" width="25px" alt />
@@ -60,10 +59,9 @@
               </el-card>
             </div>
           </el-card>
-        </el-scrollbar>
       </el-col>
       <el-col :xs="0" :sm="2" :md="3" :lg="6">
-        <el-scrollbar height="700px">
+        <el-scrollbar :height="globalScreenHeight+'px'">
         <el-card class="danger-list">
           <template v-slot:header>
             <div class="cleartitle" style="justify-content: flex-start">
@@ -102,57 +100,18 @@
 import { ArrowDown } from "@element-plus/icons-vue";
 import { Search } from "@element-plus/icons-vue";
 import '@/utils/jsmpeg.min'
-import { listAiRegionManage } from "@/api/videoControl/videoPreview";
+import { listAiRegionManage,videoTreeListManage,idDevice } from "@/api/videoControl/videoPreview";
 import { listAlarm } from "@/api/alarmControl/index.js";
 import { onMounted, reactive, ref, } from "vue";
 const { proxy } = getCurrentInstance();
+const globalScreenHeight = inject('globalScreenHeight');
 const algFormRef = ref(null);
 const nowText = ref("视频预览");
 const deptTreeRef = ref(null);
 const deptName = ref("");
 const deptOptions = ref(undefined);
-const algorithmList = ref([
-  {
-    name: "我的算法",
-    value: 1,
-  },
-  {
-    name: "最新算法",
-    value: 2,
-  },
-  {
-    name: "基础算法",
-    value: 3,
-  },
-  {
-    name: "智慧煤矿",
-    value: 4,
-  },
-  {
-    name: "智慧能源",
-    value: 5,
-  },
-  {
-    name: "智慧校园",
-    value: 6,
-  },
-  {
-    name: "智慧港口",
-    value: 7,
-  },
-  {
-    name: "智慧煤矿",
-    value: 8,
-  },
-  {
-    name: "智慧能源",
-    value: 9,
-  },
-  {
-    name: "智慧校园",
-    value: 10,
-  },
-]);
+const algorithmList = ref([]);
+const player=ref(null);
 const data = reactive({
   form: {
     title:'测试测试测试'
@@ -181,7 +140,8 @@ const filterNode = (value, data) => {
   return data.label.indexOf(value) !== -1;
 };
 function getTreeData() {
-  listAiRegionManage().then((res) => {
+  videoTreeListManage().then((res) => {
+      console.log("🚀 ~ videoTreeListManage ~ res:", res)
       deptOptions.value=res.data
   })
 }
@@ -192,12 +152,26 @@ function getWaringData() {
 }
 getTreeData()
 getWaringData()
-function getVideos(){
+function getVideos(str){
     let canvas = document.getElementById('video')
-    let url = 'rtsp://192.168.20.211:554/av0_0'
-    let player = new JSMpeg.Player("ws://192.168.4.232:9999/rtsp?url="+btoa(url), {canvas: canvas})
+    let url = str?str:'rtsp://192.168.20.211:554/av0_0'
+    player.value = new JSMpeg.Player("ws://192.168.4.232:9999/rtsp?url="+btoa(url), {canvas: canvas})
+    player.value.play()
 }
+
+// // 当需要重新加载视频流时，可以调用以下函数
+// function reloadVideoStream(str) {
+//     let canvas = document.getElementById('video')
+//     var ctx = canvas.getContext('2d');
+//     ctx.clearRect(0, 0, canvas.width, canvas.height);
+//     // 更新视频流URL
+//     player.value = new JSMpeg.Player("ws://192.168.4.232:9999/rtsp?url="+btoa(str), {canvas: canvas})
+ 
+//     // 开始解码新的视频流
+//     player.value.play();
+// }
 onMounted(() => {
+  // player.value.play()//播放
   getVideos()
 })
 
@@ -206,6 +180,11 @@ watch(deptName, (val) => {
 })
 
 function handleNodeClick(row) {
+  const treeType = row.id.split("-")[0];
+  const treeID = row.id.split("-")[1];
+  if(treeType=='点位'){
+    handlvideoPath(treeID)
+  }
 }
 
 function handAdd(row) {
@@ -217,9 +196,10 @@ function handleSetSize(row) {
 function handleUpdate(row) {
 }
 
-/** 删除按钮操作 */
-function handleDelete(row) {
-
+function handlvideoPath(id) {
+  idDevice(id).then((res) => {
+    getVideos(res.data.videoUrl)
+  })
 }
 </script>