新增截图功能

src/store/index.ts

@@ -17,7 +17,9 @@ export const useStore = defineStore('Index', {
             //当前选中的树节点
             curTreeKey: "",
             //标签组类
-            labelGroupList: []
+            labelGroupList: [],
+            //是否截图
+            screenshot:<boolean>false,
         }
     },
 
@@ -52,6 +54,9 @@ export const useStore = defineStore('Index', {
         },
         updateLabelGroupList(arr: any) {
             this.labelGroupList = arr
-        }
+        },
+        updateScreenshot(screenshot: any) {
+            this.screenshot = screenshot
+        },
     },
 })

src/views/page/Aside/cameraRightMenu.vue

@@ -9,23 +9,23 @@
                     <!-- <p></p> -->
                 </ul>
             </template>
-            <div class="buttomItem">
+            <div class="buttomItem" title="标签标志">
                 <div class="buttomName">标签标志</div>
             </div>
         </Popover>
-        <div class="buttomItem">
+        <div class="buttomItem" title="截图" @click="clickScreenshot">
             <div class="buttomName">截图</div>
         </div>
-        <div class="buttomItem">
+        <div class="buttomItem" title="录像">
             <div class="buttomName">录像</div>
         </div>
-        <div class="buttomItem">
+        <div class="buttomItem" title="3D缩放">
             <div class="buttomName">3D缩放</div>
         </div>
-        <div class="buttomItem">
+        <div class="buttomItem" title="设备标记">
             <div class="buttomName">设备标记</div>
         </div>
-        <div class="buttomItem">
+        <div class="buttomItem" title="工具箱">
             <div class="buttomName">工具箱</div>
         </div>
         <!-- <div class="buttomItem" @click="openUserEdit">
@@ -65,7 +65,6 @@ import { useStore } from '@/store/index';
 import * as markGroupApi from '@/axios/cameraMark/markGroupApi';
 import CameraEdit from './rightMenuItem/cameraEdit.vue';
 
-
 const visible = ref(false)
 const labelList :any=ref([])
 const type = ref('')    //设置类型
@@ -77,6 +76,9 @@ let piniaStore = useStore();
 function addLabelFn(str: string,id:number) {
     piniaStore.updateIsAddLabel({ cmMarkGroupId:id,labelType: str, isAddLabel: true })
 }
+function clickScreenshot(){
+    piniaStore.updateScreenshot(true)
+}
 function init() {
     markGroupApi.GetList().then((res: any) => {
         console.log(res, 'markGroupApi');

src/views/page/aside/cameraLeftMenu.vue

@@ -29,7 +29,7 @@
             </a-tree>
         </div>
     </div>
-    <a-modal v-model:visible="visible" title="设置表单" width="40%" @ok="handleOk" @cancel="handelCancel"
+    <a-modal v-model:visible="visible" title="新增节点" width="40%" @ok="handleOk" okText="确定" cancelText="取消" @cancel="handelCancel"
         :maskClosable="false" destroyOnClose>
         <cameraNodeModal ref="childRef" :editData="NodeTreeItem"></cameraNodeModal>
     </a-modal>
@@ -97,7 +97,6 @@ function handleOk() {
 function handelCancel() { visible.value = false }
 //右键点击事件    
 function onRightClick({ node }: any) {
-
     NodeTreeItem.value = {
         cbCameraId: node.cbCameraId,
         isGroup: node.isGroup,

src/views/page/cameraCenter.vue

@@ -7,11 +7,9 @@
         </video> -->
         <div id="videoPlayer" @mousedown="mouseDownVideo"></div>
         <div v-for="item in labelList" :class="`labels ${item.groupName == '视频标签' ? 'lavels-video' : 'lavels-build'}`"
-            :key="item.id" 
+            :key="item.id" :id="item.id"
-            :id="item.id"
             :style="`top:${canvasHeight * item.canvasTopRatio}px;left:${canvasWidth * item.canvasLeftRatio}px`"
-            @click="itemClick(item)"
+            @click="itemClick(item)">
-            >
             <a-dropdown :trigger="['contextmenu']">
                 <div class="labels-item" v-if="item.groupName == '视频标签'">
                     <!-- <div class="labels-item" v-if="item.inFlag"> -->
@@ -104,6 +102,7 @@ let cameraMap = storeToRefs(piniaStore).cameraMap
 let isActiveChoose = ref(false)
 let labelList = ref<any[]>([])
 let addLabel = storeToRefs(piniaStore).addLabel
+let screenshot = storeToRefs(piniaStore).screenshot
 let addLabelLeft = ref(0);
 let addLabelTop = ref(0);
 var jessibuca = ref();
@@ -119,7 +118,21 @@ onMounted(() => {
 })
 
 
+watch(screenshot, (newVal, oldVal) => {
+    if (newVal) {
+        console.log(123);
+        
+        //jessibuca.value.player._playing 判断是否正在播放
+        if (!jessibuca.value.player._playing) {
+            Msg.info("请先选择监控画面")
+            piniaStore.updateScreenshot(false)
+            return
+         }
+        jessibuca.value.screenshot("", "png", 1)
+        piniaStore.updateScreenshot(false)
 
+    }
+})
 watch(curSelectKey, (newVal, oldVal) => {
     switchCamera(newVal)
 })
@@ -199,7 +212,7 @@ function deleteLabel(id: number) {
 }
 
 //标签点击事件
-function itemClick(item:any){
+function itemClick(item: any) {
     // console.log("点击",item);
     // popup("监控画面", [h(cameraWindow, { windowData: item })], "cameraWindow");
     //打开小窗
@@ -268,6 +281,7 @@ function changeVideoCanvasSize() {
 
 function mouseDownVideo(e: MouseEvent) {
 
+
     if (!isActiveChoose.value) return;
     //鼠标左键 e.buttons == 1
     if (e.buttons == 1) {