Merge branch 'master' of http://47.115.223.229:8888/yangjun/nursing_unit_vue

index.html

@@ -27,5 +27,6 @@
     <div id="app">
     </div>
     <script type="module" src="/src/main.ts"></script>
+    <script src="<%= basePublicPath %>/static/tums-player/tums-player.umd.min.js"></script>
   </body>
 </html>

src/views/biz/nuBaseInfo/QyxxList.vue

@@ -36,59 +36,58 @@
                 </a-select>
               </a-form-item>
             </a-col>
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+          <a-col :xl="6" :lg="6" :md="8" :sm="24">
             <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
-              <a-col :lg="6">
                 <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
                 <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
-              </a-col>
             </span>
           </a-col>
         </a-row>
       </a-form>
     </div>
-    <!--引用表格-->
-    <BasicTable @register="registerTable">
-      <!--插槽:table标题-->
-      <template #tableTitle>
-      </template>
-      <!--操作栏-->
-      <template #action="{ record }">
-        <TableAction :actions="getTableAction(record)" />
-      </template>
-      <template v-slot:bodyCell="{ column, record, index, text }">
-         <template v-if="column.key === 'status_dictText'">
-          <a-tag v-if="record.status == '9'"
-            :color="'volcano'"
-          >
-            {{ text }}
-          </a-tag>
-          <span v-else>{{text}}</span>
-        </template>
-         <template v-else-if="column.key === 'nuName'">
-          <a @click="handleWlsb(record)">{{text}}</a>
-        </template>
-         <template v-else-if="column.key === 'ewm'">
-          <QRCodeWithLogo 
-            :text="record.nuId" 
-            :logoUrl="logoUrl" 
-            :size="150" 
-            :logoSize="40"
-          />
-        </template>
-
-      </template>
-    </BasicTable>
+    <a-row>
+      <a-col v-for="(item,index) in tableData" style="padding: 5px" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6">
+        <a-card :title="`NUID：`+item.nuId"
+          :class="['card-3d']"
+          @mouseenter="item.key"
+          @mouseleave="item.key"
+          @click="isSelected = item">
+          <template #extra>
+            <span class="lxClass" v-if="item.status == 5">停用</span>
+            <span class="zxClass" v-if="item.status != 5">启用</span>
+          </template>
+          <p>单元名称：{{item.nuName}}</p>
+          <p>创建时间：{{item.createTime}}</p>
+          <p>单元类型：{{item.areaFlag_dictText}}</p>
+          <div style="text-align: center;">
+              <a-button size="small" @click="handleQiyong(item)" v-if="item.status == 5" style="margin-left:10px" >启用</a-button>
+              <a-button size="small" @click="handleTingyong(item)" v-if="item.status != 5" style="margin-left:10px" >停用</a-button>
+              <a-button size="small" @click="handleEdit(item)" style="margin-left:10px" >更名</a-button>
+              <a-button size="small" @click="handleWlsb(item)" style="margin-left:10px" >设备</a-button>
+              <a-popover title="二维码"  >
+                <template #content>
+                  <QRCodeWithLogo 
+                        :text="item.nuId" 
+                        :logoUrl="logoUrl" 
+                        :size="150" 
+                        :logoSize="40"
+                      />
+                </template>
+                <a-button size="small" style="margin-left:10px">二维码</a-button>
+              </a-popover>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
     <!-- 表单区域 -->
     <NuBaseInfoModal ref="registerModal" @success="handleSuccess"></NuBaseInfoModal>
     <BaseWlsbListModal ref="wlsbModal" ></BaseWlsbListModal>
-    
     <CameraPreviewModal ref="previewModal"></CameraPreviewModal>
   </div>
 </template>
 
 <script lang="ts" name="nuBaseInfo-nuBaseInfo" setup>
-  import { ref, reactive } from 'vue';
+  import { ref, reactive, onMounted } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { useListPage } from '/@/hooks/system/useListPage';
   import { columns, superQuerySchema } from './NuBaseInfo.data';
@@ -103,6 +102,7 @@ import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectT
   import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
 import { useMessage } from '/@/hooks/web/useMessage';
 import QRCodeWithLogo from './EwmImage.vue';
+import { defHttp } from '/@/utils/http/axios';
 
 const logoUrl = 'https://www.focusnu.com/devops/resource/img/logo.png'; // 替换为你的 Logo URL
 
@@ -112,29 +112,10 @@ const { createMessage } = useMessage();
   const previewModal = ref();
   const wlsbModal = ref();
   const queryParam = reactive<any>({});
+  const tableData = ref<any>([]);
   const toggleSearchStatus = ref<boolean>(false);
   const registerModal = ref();
   const userStore = useUserStore();
-  //注册table数据
-  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
-    tableProps: {
-      title: '区域信息',
-      api: qyList,
-      columns,
-      canResize:false,
-      useSearchForm: false,
-      showIndexColumn: true,
-      actionColumn: {
-        width: 160,
-        fixed: 'right',
-      },
-      beforeFetch: async (params) => {
-        params.column = 'status',params.order = 'desc'
-        return Object.assign(params, queryParam);
-      },
-    },
-  });
-  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
   const labelCol = reactive({
     xs:24,
     sm:6,
@@ -170,7 +151,7 @@ const { createMessage } = useMessage();
    * 成功回调
    */
   function handleSuccess() {
-    (selectedRowKeys.value = []) && reload();
+     reload();
   }
    
    /**
@@ -212,37 +193,6 @@ const { createMessage } = useMessage();
     previewModal.value.edit(record);
   }
 
-  /**
-   * 操作栏
-   */
-  function getTableAction(record) {
-    return [
-      {
-        label: '启用',
-        onClick: handleQiyong.bind(null, record),
-        ifShow: record.status == 5,
-        auth: 'nuBaseInfo:nu_base_info:edit'
-      },
-      {
-        label: '停用',
-        onClick: handleTingyong.bind(null, record),
-        ifShow: record.status != 5,
-        auth: 'nuBaseInfo:nu_base_info:edit'
-      },
-      {
-        label: '更名',
-        onClick: handleEdit.bind(null, record),
-        auth: 'nuBaseInfo:nu_base_info:edit'
-      },
-      {
-        label: '预览',
-        onClick: handlePreview.bind(null, record),
-        ifShow: record.deviceMac != null,
-      },
-    ];
-  }
-   
-
   /**
    * 查询
    */
@@ -255,12 +205,27 @@ const { createMessage } = useMessage();
    */
   function searchReset() {
     formRef.value.resetFields();
-    selectedRowKeys.value = [];
     //刷新数据
     reload();
   }
   
+  function reload() {
+    // const list = qyList(queryParam);
+    // console.log("🚀 ~ reload ~ list:", list)
+    // console.log("🚀 ~ reload ~ list:", list.records)
 
+    defHttp.get({url: '/nuBaseInfo/nuBaseInfo/qyList',params:queryParam}).then(res => {
+      console.log("🚀 ~ defHttp.get ~ res:", res)
+      tableData.value = res.records;
+    });
+
+  }
+
+
+  onMounted(() => {
+    //刷新数据
+    reload();
+  })
 
 
 </script>
@@ -289,4 +254,53 @@ const { createMessage } = useMessage();
       width: 100%;
     }
   }
+
+
+  
+.zxClass {
+  font-size: 12px;
+  background: linear-gradient(to right, #1ea0fa, #017de9);
+  border-radius: 8px;
+  height: 25px;
+  color: white;
+  line-height: 25px;
+  padding: 5px;
+}
+
+.lxClass {
+  font-size: 12px;
+  background: linear-gradient(to right, #d1d4d5, #d3d5d6);
+  border-radius: 8px;
+  height: 25px;
+  color: white;
+  line-height: 25px;
+  padding: 5px;
+}
+
+.selected-card {
+  border: 2px solid #1890ff;
+  box-shadow: 0 0 8px rgba(24, 144, 255, 0.3);
+}
+
+.cardContent{
+  margin-top: -10px;background:white;margin:0 10px;border-radius:8px;
+}
+
+/* 基础卡片样式 */
+.card-3d {
+  border-radius: 8px;
+  border: 1px solid #f0f0f0; /* 边框增强立体感 */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  background: white;
+  position: relative;
+}
+
+/* 鼠标悬停：阴影加深 + 轻微上浮 */
+.card-3d:hover {
+  border: 2px solid #1890ff;
+  box-shadow: 0 4px 8px rgba(24, 144, 255, 0.4);
+  transform: translate(-3px,-3px);
+}
+ 
 </style>

src/views/biz/nuBaseInfo/components/BaseWlsbListForm.vue

@@ -1,6 +1,58 @@
 <template>
 <div class="p-2">
   <a-row>
+      <a-col v-for="(item,index) in sxtList.records" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" style="padding: 8px;">
+        <a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '60px', padding: '0 24px' }"  :bodyStyle="{ padding: '24px 24px 4px 24px' }">
+          <template #title>
+              <a-row style="font-weight: normal;">
+                <a-col :span="18" style="font-size: 14px;">
+                      <div>SN：<span style="font-weight: bold;">{{item.sn}}</span></div>
+                      <div style="font-size: 12px;">名称：{{item.deviceName}}</div>
+                </a-col>
+                <a-col :span="6" style="text-align: center;padding-top: 4px;">
+                  <div :class="item.relayState=='1'?'zxClass':'lxClass'">{{item.deviceStatus=='1'?'在线':'离线'}}</div>
+                </a-col>
+              </a-row>
+          </template>
+              <a-row>
+                <a-col :span="12" style="margin-top: -10px;"><a-tag color="purple">摄像头</a-tag></a-col>
+                <a-col :span="12" style="margin-top: -10px;text-align:right;">报修状态：
+                  <span v-if="item.maintainStatus==0">正常</span>
+                  <span v-if="item.maintainStatus==1">维修中</span>
+                  <span v-if="item.maintainStatus==2">报废</span>
+                </a-col>
+                <a-col :span="12" >{{item.nuId_dictText?item.nuId_dictText:'未配置'}}</a-col>
+                <a-col :span="12" style="text-align: right;">
+                  <span style="text-align: right;background:#f6f6f6;padding: 2px 10px;border-radius:5px;">NUID: {{item.nuId?item.nuId:'未配置'}}</span>
+                </a-col>
+                <a-col :span="24" style="text-align: center;font-size: 44px;font-weight: bold;margin-top:18px;">
+                  <span>摄像头</span>
+                </a-col>
+                <!-- <a-col :span="8" style="padding: 12px 0 0 5px;margin-top:18px;">
+                  <div style="font-size: 12px;margin: 5px 0 -5px 2px;padding:2px;">KWH</div>
+                  <div style="margin-top:-3px;"><span style="background:#eeeeee;padding: 2px;border-radius:5px;font-size:11px;">用电量</span></div>
+                </a-col> -->
+              </a-row>
+            <a-divider  />
+            <p style="text-align:center;">
+              
+              <span style="display:inline-block;cursor: pointer;" @click="handlePreview(item)">
+                <span class="tbClass"><img src="../../../../assets/iot/a14.png" style="width:20px;" /></span><br/>
+                <span class="antTitle">预览</span>
+              </span>
+              <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handlePicConfig(item)">
+                <span class="tbClass"><img src="../../../../assets/iot/a12.png" style="width:20px;" /></span><br/>
+                <span class="antTitle">画面配置</span>
+              </span>
+              <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleBaoxiu(item,'1')" v-if="item.maintainStatus==0">
+                <span class="tbClass"><img src="../../../../assets/iot/a6.png" style="width:20px;" /></span><br/>
+                <span class="antTitle">报修</span>
+              </span>
+            </p>
+        </a-card>
+      </a-col>
+
+
       <a-col v-for="(item,index) in zndbList.records" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" style="padding: 8px;">
         <a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '60px', padding: '0 24px' }"  :bodyStyle="{ padding: '24px 24px 4px 24px' }">
           <template #title>
@@ -15,7 +67,12 @@
               </a-row>
           </template>
               <a-row>
-                <a-col :span="24" style="margin-top: -10px;"><a-tag color="red">智能电表</a-tag></a-col>
+                <a-col :span="12" style="margin-top: -10px;"><a-tag color="red">智能电表</a-tag></a-col>
+                <a-col :span="12" style="margin-top: -10px;text-align:right;">报修状态：
+                  <span v-if="item.maintainStatus==0">正常</span>
+                  <span v-if="item.maintainStatus==1">维修中</span>
+                  <span v-if="item.maintainStatus==2">报废</span>
+                </a-col>
                 <a-col :span="12" >{{item.nuId_dictText?item.nuId_dictText:'未配置'}}</a-col>
                 <a-col :span="12" style="text-align: right;">
                   <span style="text-align: right;background:#f6f6f6;padding: 2px 10px;border-radius:5px;">NUID: {{item.nuId?item.nuId:'未配置'}}</span>
@@ -34,22 +91,26 @@
                 <span class="tbClass"><img src="../../../../assets/iot/a1.png" style="width:20px;" /></span><br/>
                 <span class="antTitle">抄表</span>
               </span>
-              <span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="handleControlLz(item)">
+              <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleControlLz(item)">
                 <span class="tbClass"><img src="../../../../assets/iot/a5.png" style="width:20px;" /></span><br/>
                 <span class="antTitle">拉闸</span>
               </span>
-              <span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="handleControlHz(item)">
+              <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleControlHz(item)">
                 <span class="tbClass"><img src="../../../../assets/iot/a2.png" style="width:20px;" /></span><br/>
                 <span class="antTitle">合闸</span>
               </span>
-              <span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="handleReset(item)">
+              <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleReset(item)">
                 <span class="tbClass"><img src="../../../../assets/iot/a3.png" style="width:20px;" /></span><br/>
                 <span class="antTitle">清零</span>
               </span>
-              <span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="showApiLog(item)">
+              <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="showApiLog(item)">
                 <span class="tbClass"><img src="../../../../assets/iot/a4.png" style="width:20px;" /></span><br/>
                 <span class="antTitle">日志</span>
               </span>
+              <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleBaoxiu(item,'2')" v-if="item.maintainStatus==0">
+                <span class="tbClass"><img src="../../../../assets/iot/a6.png" style="width:20px;" /></span><br/>
+                <span class="antTitle">报修</span>
+              </span>
             </p>
         </a-card>
       </a-col>
@@ -69,7 +130,12 @@
               </a-row>
           </template>
               <a-row>
-                <a-col :span="24" style="margin-top: -10px;"><a-tag color="blue">智能水表</a-tag></a-col>
+                <a-col :span="12" style="margin-top: -10px;"><a-tag color="blue">智能水表</a-tag></a-col>
+                <a-col :span="12" style="margin-top: -10px;text-align:right;">报修状态：
+                  <span v-if="item.maintainStatus==0">正常</span>
+                  <span v-if="item.maintainStatus==1">维修中</span>
+                  <span v-if="item.maintainStatus==2">报废</span>
+                </a-col>
                 <a-col :span="12" >{{item.nuId_dictText?item.nuId_dictText:'未配置'}}</a-col>
                 <a-col :span="12" style="text-align: right;">
                   <span style="text-align: right;background:#f6f6f6;padding: 2px 10px;border-radius:5px;">NUID: {{item.nuId?item.nuId:'未配置'}}</span>
@@ -88,22 +154,26 @@
                 <span class="tbClass"><img src="../../../../assets/iot/a1.png" style="width:20px;" /></span><br/>
                 <span class="antTitle">抄表</span>
               </span>
-              <span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="handleSbControlLz(item)">
+              <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleSbControlLz(item)">
                 <span class="tbClass"><img src="../../../../assets/iot/a10.png" style="width:20px;" /></span><br/>
                 <span class="antTitle">开阀</span>
               </span>
-              <span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="handleSbControlHz(item)">
+              <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleSbControlHz(item)">
                 <span class="tbClass"><img src="../../../../assets/iot/a11.png" style="width:20px;" /></span><br/>
                 <span class="antTitle">关阀</span>
               </span>
-              <span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="handleSbReset(item)">
+              <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleSbReset(item)">
                 <span class="tbClass"><img src="../../../../assets/iot/a3.png" style="width:20px;" /></span><br/>
                 <span class="antTitle">清零</span>
               </span>
-              <span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="showApiWaterLog(item)">
+              <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="showApiWaterLog(item)">
                 <span class="tbClass"><img src="../../../../assets/iot/a4.png" style="width:20px;" /></span><br/>
                 <span class="antTitle">日志</span>
               </span>
+              <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleBaoxiu(item,'3')" v-if="item.maintainStatus==0">
+                <span class="tbClass"><img src="../../../../assets/iot/a6.png" style="width:20px;" /></span><br/>
+                <span class="antTitle">报修</span>
+              </span>
             </p>
         </a-card>
       </a-col>
@@ -122,7 +192,12 @@
               </a-row>
           </template>
               <a-row>
-                <a-col :span="24" style="margin-top: -10px;"><a-tag color="green">温湿度计</a-tag></a-col>
+                <a-col :span="12" style="margin-top: -10px;"><a-tag color="green">温湿度计</a-tag></a-col>
+                <a-col :span="12" style="margin-top: -10px;text-align:right;">报修状态：
+                  <span v-if="item.maintainStatus==0">正常</span>
+                  <span v-if="item.maintainStatus==1">维修中</span>
+                  <span v-if="item.maintainStatus==2">报废</span>
+                </a-col>
                 <a-col :span="12" >{{item.nuId_dictText?item.nuId_dictText:'未配置'}}</a-col>
                 <a-col :span="12" style="text-align: right;">
                   <span style="text-align: right;background:#f6f6f6;padding: 2px 10px;border-radius:5px;">NUID: {{item.nuId?item.nuId:'未配置'}}</span>
@@ -151,14 +226,18 @@
                 <span class="tbClass"><img src="../../../../assets/iot/a7.png" style="width:20px;" /></span><br/>
                 <span class="antTitle">抄表</span>
               </span>
-              <span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="handleEdit(item)">
+              <!-- <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleEdit(item)">
                 <span class="tbClass"><img src="../../../../assets/iot/a6.png" style="width:20px;" /></span><br/>
                 <span class="antTitle">配置</span>
-              </span>
-              <span style="display:inline-block;margin-left:10%;cursor: pointer;" @click="showWsdjApiLog(item)">
+              </span> -->
+              <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="showWsdjApiLog(item)">
                 <span class="tbClass"><img src="../../../../assets/iot/a4.png" style="width:20px;" /></span><br/>
                 <span class="antTitle">日志</span>
               </span>
+              <span style="display:inline-block;margin-left:10px;cursor: pointer;" @click="handleBaoxiu(item,'4')" v-if="item.maintainStatus==0">
+                <span class="tbClass"><img src="../../../../assets/iot/a6.png" style="width:20px;" /></span><br/>
+                <span class="antTitle">报修</span>
+              </span>
             </p>
         </a-card>
       </a-col>
@@ -175,6 +254,9 @@
     <ApiLogWaterModal ref="apiLogWaterModal"></ApiLogWaterModal>
     <ApiLogAlarmModal ref="apiLogAlarmModal"></ApiLogAlarmModal>
     <DeviceInfoDrawer @register="registerDrawer" @success="handleSuccess" />
+    
+    <CameraPreviewModal ref="previewModal"></CameraPreviewModal>
+    <CameraPictureConfigModal ref="cameraPictureConfigModal"></CameraPictureConfigModal>
 </div>
 </template>
 
@@ -187,13 +269,19 @@ import ApiLogModal from "@/views/iot/tq/electricity/apilog/ApiLogModal.vue";
 import ApiLogWaterModal from "@/views/iot/tq/electricity/apilog/WaterApiLogModal.vue";
 import ApiLogAlarmModal from '/@/views/iot/yiweilian/components/ApiLogAlarmModal.vue'
 import DeviceInfoDrawer from "/@/views/iot/yiweilian/components/DeviceInfoDrawer.vue";
+  import CameraPreviewModal from '/@/views/iot/tplink/camera/components/CameraPreviewModal.vue'
+  import CameraPictureConfigModal from '/@/views/iot/tplink/camera/components/CameraPictureConfigModal.vue';
 import {useDrawer} from "@/components/Drawer";
 import {updateDeviceRealTime} from '/@/views/iot/yiweilian/humid.api';
 import {eleSbReset, eleSbControl, eleSbRead } from "/@/views/iot/tq/water/water.api";
+import { ReloadOutlined } from '@ant-design/icons-vue';
 const formRef = ref();
 const apiLogModal = ref();
 const apiLogWaterModal = ref();
 const apiLogAlarmModal = ref();
+  const previewModal = ref();
+  const cameraPictureConfigModal = ref();
+const sxtList = ref<any>({records: []});//摄像头
 const zndbList = ref<any>({records: []});//智能电表
 const znsbList = ref<any>({records: []});//智能水表
 const wsdjList = ref<any>({records: []});//温湿度计
@@ -201,11 +289,48 @@ const anyInfo = ref<any>({});//区域信息
   //注册drawer
   const [registerDrawer, { openDrawer }] = useDrawer();
 
+function handleBaoxiu(record,type){
+console.log("🚀 ~ handleBaoxiu ~ record,type:", record,type)
+
+    Modal.confirm({
+      title: '报修',
+      content: '是否进行报修?',
+      closable: true,
+      okText: '确定',
+      cancelText: '取消',
+      async onOk() {
+        var url = "";
+        if(type=='1'){//摄像头报修
+          url = '/iot/tplink/cameraInfo/baoxiu';
+        }else if(type=='2'){ //电表报修
+          url = '/iot/tq/electricityMeter/baoxiu';
+        }else if(type=='3'){ //水表报修
+          url = '/iot/tq/waterMeter/baoxiu';
+        }else if(type=='4'){ //温湿度计报修
+          url = '/iot/yiweilian/humidDevice/baoxiu';
+        }
+        defHttp.post({url: url,params:{id:record.id}}).then(res => { 
+          edit(anyInfo.value);
+        });
+      },
+    });
+}
 function edit(record) {
-anyInfo.value = record;
-getZndb(record);//智能电表
-getZnsb(record);//智能水表
-getWsdj(record);//温湿度计
+  console.log("🚀 ~ edit ~ record:", record)
+  anyInfo.value = record;
+  getSxt(record);//摄像头
+  getZndb(record);//智能电表
+  getZnsb(record);//智能水表
+  getWsdj(record);//温湿度计
+}
+//获取摄像头
+function getSxt(record){
+  var queryParam = {pageSize:-1,nuId:record.nuId}
+  defHttp.get({url: '/iot/tplink/cameraInfo/list',params:queryParam}).then(res => {
+    console.log("🚀 ~ defHttp.get ~ res:", res)
+      sxtList.value = res;
+      console.log("🚀 ~ defHttp.get ~ 获取摄像头:", sxtList)
+  });
 }
 //获取智能电表
 function getZndb(record){
@@ -429,6 +554,31 @@ function getWsdj(record){
   }
 
 
+  
+  /**
+   * 摄像头预览
+   */
+  function handlePreview(record: Recordable) {
+    previewModal.value.disableSubmit = true;
+    previewModal.value.edit(record);
+  }
+
+  /**
+   * 摄像头画面配置
+   */
+  function handlePicConfig(record) {
+    var params = {
+        deviceIndex: record.deviceIndex,
+        parentId: record.parentId,
+        multitrans: record.multitrans,
+        projectId: record.projectId,
+        regionId: record.regionId,
+        ip: record.ip
+      }
+    cameraPictureConfigModal.value.disableSubmit = true;
+    cameraPictureConfigModal.value.edit(params);
+  }
+
 defineExpose({
   edit,
 });

src/views/biz/nuBaseInfo/components/NuBaseInfoForm.vue

@@ -5,7 +5,7 @@
         <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
           name="NuBaseInfoForm">
           <a-row>
-            <a-col :span="24" style="margin-top: 60px;">
+            <a-col :span="24" style="margin-top: 60px;margin-bottom: 60px;">
               <a-form-item label="区域名称" v-bind="validateInfos.nuName" id="NuBaseInfoForm-nuName" name="nuName">
                 <a-input v-model:value="formData.nuName" placeholder="请输入区域名称" allow-clear></a-input>
               </a-form-item>

src/views/biz/nuBaseInfo/components/NuBaseInfoModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <j-modal :title="title" :width="width" :maxHeight="`200px`" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
+  <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
     <NuBaseInfoForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></NuBaseInfoForm>
   </j-modal>
 </template>

src/views/iot/tplink/camera/components/CameraCommonForm.vue

@@ -1,6 +1,6 @@
 <template>
   <a-spin :spinning="confirmLoading">
-    <JFormContainer :disabled="disabled">
+    <JFormContainer>
       <template #detail>
         <a-row>
           <a-col :span="12">
@@ -12,7 +12,7 @@
             <a-row>
               <a-col :span="2"></a-col>
               <a-col :span="20">
-                  <div id="video-container" class="video-container"></div>
+                  <div id="video-container-common" class="video-container"></div>
               </a-col>
             </a-row>
             <a-row style="margin-top: 14px">
@@ -225,24 +225,24 @@ import {
   const useForm = Form.useForm;
   const formData = reactive<Record<string, any>>({
     deviceIndex: '',//设备索引
-    streamType: 0,//码流类型 0 代表主码流，1 代码子码流
+    streamType: 1,//码流类型 0 代表主码流，1 代码子码流
     //视频预览参数
     url: '',//预览通道对应的URL
     backupUrl: '',//备选URL，当流媒体服务器存在内外网IP配置时，该字段不为null
     wsUrl: '',//用于建立ws连接传输视频帧信息
     wssUrl: '',//用于建立wss接传输视频帧信息
 
-    chroma: "0", //色度
-    luma: "0", //亮度
-    sharpness: "0", //锐度
-    saturation: "0", //饱和度
-    contrast: "0", //对比度
-    wd_gain: "0", //宽动态度
-    smartir_level: "0",//防过曝等级
+    chroma: 0, //色度
+    luma: 0, //亮度
+    sharpness: 0, //锐度
+    saturation: 0, //饱和度
+    contrast: 0, //对比度
+    wd_gain: 0, //宽动态度
+    smartir_level: 0,//防过曝等级
     wide_dynamic: "off",  //宽动态   "off"//关闭  "on"//开启
     smartir: "auto_ir",//防红外过曝："auto_ir_ae" //自动-增强模式   "auto_ir" //自动-标准模式   "manual"//手动——防过曝等级
     smartwtl: "auto_wtl",//白光强度："auto_wtl_ae" //智能白光-柔和 ；"auto_wtl" //智能白光-标准 ； "manual" //手动——出现白光等级
-    smartwtl_digital_level: "0",//白光等级
+    smartwtl_digital_level: 0,//白光等级
 
     flip_type: "center",//画面镜像旋转： "off"//关闭 "left_and_right"//左右 "up_and_down"//上下 "center"//中心
     night_vision_mode: "md_night_vision",//照明模式："wtl_night_vision"//白光照明 ；"inf_night_vision"//红外照明 ； "md_night_vision"//移动侦测全彩——出现白光强度
@@ -286,13 +286,20 @@ import {
       formData.wssUrl = res.wssUrl;
       confirmLoading.value=false;
     });
+    if (player.value){
+      player.value.destroy().then(() => {
+      }); // 销毁
+      player.value = null;
+    }
     const TumsPlayer = window['tums-player'].default;
-    player.value = new TumsPlayer('video-container', {
+    player.value = new TumsPlayer('video-container-common', {
       type: "rtsp", // 协议类型，rtsp
       url: formData.url, // 取流地址, getPreviewUrl接口获取
       // url: formData.backupUrl, // 取流地址, getPreviewUrl接口获取
       socket: formData.wssUrl, // websocket地址, getPreviewUrl接口获取
       pluginPath: '/static', // 当sdk资源不在根路径下时，需配置pluginPath
+      talkEnable: true,
+      useMultitrans: true,
     });
     let isPlaying = player.value.isPlaying();
     if (!isPlaying) {
@@ -311,6 +318,7 @@ import {
     if (player){
       player.value.destroy().then(() => {
       }); // 销毁
+      player.value = null;
     }
   }
 
@@ -325,20 +333,28 @@ import {
       "deviceIndex": deviceIndex,
       "type": "common"
     }).then(res=>{
-      formData.chroma = res.chroma; //色度
-      formData.luma = res.luma; //亮度
-      formData.sharpness = res.sharpness; //锐度
-      formData.saturation = res.saturation; //饱和度
-      formData.contrast = res.contrast; //对比度
-      formData.wd_gain = res.wd_gain; //宽动态度
-      formData.smartir_level = res.smartir_level; //防过曝等级
+      formData.chroma = strToInt(res.chroma); //色度
+      formData.luma = strToInt(res.luma); //亮度
+      formData.sharpness = strToInt(res.sharpness); //锐度
+      formData.saturation = strToInt(res.saturation); //饱和度
+      formData.contrast = strToInt(res.contrast); //对比度
+      formData.wd_gain = strToInt(res.wd_gain); //宽动态度
+      formData.smartir_level = strToInt(res.smartir_level); //防过曝等级
       formData.wide_dynamic = res.wide_dynamic;  //宽动态   "off"//关闭  "on"//开启
       formData.smartir = res.smartir; //防红外过曝："auto_ir_ae" //自动-增强模式   "auto_ir" //自动-标准模式   "manual"//手动——防过曝等级
       formData.smartwtl = res.smartwtl; //白光强度："auto_wtl_ae" //智能白光-柔和 ；"auto_wtl" //智能白光-标准 ； "manual" //手动——出现白光等级
-      formData.smartwtl_digital_level = res.smartwtl_digital_level; //白光等级
+      formData.smartwtl_digital_level = strToInt(res.smartwtl_digital_level); //白光等级
     });
   }
 
+function strToInt(val){
+  if(val!=null&&isFinite(val)){
+    return Number(val);
+  }else{
+    return val;
+  }
+}
+
   /**
    * 获取照明设置信息
    */
@@ -415,6 +431,20 @@ import {
       { deep: true, immediate: true }
     );
   });
+
+  function destroyPlayer(){
+    if (player){
+      player.value.destroy().then(() => {
+      }); // 销毁
+      player.value = null;
+    }
+  }
+
+  // 暴露给父组件的方法
+  defineExpose({
+    destroyPlayer
+  });
+
 </script>
 
 <style lang="less" scoped>

src/views/iot/tplink/camera/components/CameraInfoList.vue

@@ -215,8 +215,8 @@ const pageParams = ref({ pageNo: 1, pageSize: 8 })
     watch(
       () => props.data,
       async () => {
-        queryParam.projectId = props.data.projectId;
-        queryParam.regionId = props.data.regionId;
+        // queryParam.projectId = props.data.projectId;
+        // queryParam.regionId = props.data.regionId;
         let record = unref(props.data);
         if (typeof record !== 'object') {
           record = {};

src/views/iot/tplink/camera/components/CameraOsdForm.vue

@@ -1,6 +1,6 @@
 <template>
   <a-spin :spinning="confirmLoading">
-    <JFormContainer :disabled="disabled">
+    <JFormContainer>
       <template #detail>
         <a-row>
           <a-col :span="24">
@@ -13,7 +13,7 @@
             <a-row>
               <a-col :span="1"></a-col>
               <a-col :span="20">
-                <div id="video-container" class="video-container">
+                <div id="video-container-osd" class="video-container">
                   <div class="osd-text-top">
                     <span v-show="formData.dateEnabled">{{formData.dateData}}&nbsp;</span>
                     <span v-show="formData.weekEnabled">{{formData.weekData}}&nbsp;</span>
@@ -108,7 +108,7 @@
     weekEnabled: true,
     labelEnabled: true,
 
-    streamType: 0,//码流类型 0 代表主码流，1 代码子码流
+    streamType: 1,//码流类型 0 代表主码流，1 代码子码流
     //视频预览参数
     url: '',//预览通道对应的URL
     backupUrl: '',//备选URL，当流媒体服务器存在内外网IP配置时，该字段不为null
@@ -220,13 +220,20 @@
       formData.wssUrl = res.wssUrl;
       confirmLoading.value=false;
     });
+    if (player.value){
+      player.value.destroy().then(() => {
+      }); // 销毁
+      player.value = null;
+    }
     const TumsPlayer = window['tums-player'].default;
-    player.value = new TumsPlayer('video-container', {
+    player.value = new TumsPlayer('video-container-osd', {
       type: "rtsp", // 协议类型，rtsp
       url: formData.url, // 取流地址, getPreviewUrl接口获取
       // url: formData.backupUrl, // 取流地址, getPreviewUrl接口获取
       socket: formData.wssUrl, // websocket地址, getPreviewUrl接口获取
       pluginPath: '/static', // 当sdk资源不在根路径下时，需配置pluginPath
+      talkEnable: true,
+      useMultitrans: true,
     });
     let isPlaying = player.value.isPlaying();
     if (!isPlaying) {
@@ -245,6 +252,7 @@
     if (player){
       player.value.destroy().then(() => {
       }); // 销毁
+      player.value = null;
     }
   }
 
@@ -261,6 +269,20 @@
       { deep: true, immediate: true }
     );
   });
+
+  function destroyPlayer(){
+    if (player){
+      player.value.destroy().then(() => {
+      }); // 销毁
+      player.value = null;
+    }
+  }
+
+  // 暴露给父组件的方法
+  defineExpose({
+    destroyPlayer
+  });
+
 </script>
 
 <style lang="less" scoped>

src/views/iot/tplink/camera/components/CameraPictureConfig.vue

@@ -4,42 +4,39 @@
       v-model:activeKey="activeKey"
       tab-position="left"
       :style="{ height: '100%' }"
-      @tabScroll="callback"
     >
-      <a-tab-pane :key="1" tab="画面显示">
+      <a-tab-pane key="A" tab="画面显示">
         <a-tabs
           v-model:activeKey="oneChildActiveKey"
           tab-position="top"
           :style="{ height: '100%' }"
-          @tabScroll="callback"
           type="card"
         >
-          <a-tab-pane :key="1" tab="视频显示">
-            <div class="scrollable" v-if="oneChildActiveKey==1">
-              <CameraCommonForm :data="cameraData"></CameraCommonForm>
+          <a-tab-pane key="A1" tab="视频显示">
+            <div class="scrollable" v-if="oneChildActiveKey=='A1'">
+              <CameraCommonForm ref="commonFormRef" :data="cameraData"></CameraCommonForm>
             </div>
           </a-tab-pane>
-          <a-tab-pane :key="2" tab="OSD">
-            <div class="scrollable" v-if="oneChildActiveKey==2">
-              <CameraOsdForm :data="cameraData"></CameraOsdForm>
+          <a-tab-pane key="A2" tab="OSD">
+            <div class="scrollable" v-if="oneChildActiveKey=='A2'">
+              <CameraOsdForm ref="osdFormRef" :data="cameraData"></CameraOsdForm>
             </div>
           </a-tab-pane>
-          <a-tab-pane :key="3" tab="码流参数">
-            <div class="scrollable" v-if="oneChildActiveKey==3">
+          <a-tab-pane key="A3" tab="码流参数">
+            <div class="scrollable" v-if="oneChildActiveKey=='A3'">
               <CameraBitrateForm :data="cameraData"></CameraBitrateForm>
             </div>
           </a-tab-pane>
         </a-tabs>
       </a-tab-pane>
-      <a-tab-pane :key="2" tab="事件侦测">
+      <a-tab-pane key="B" tab="事件侦测">
         <a-tabs
           v-model:activeKey="twoChildActiveKey"
           tab-position="top"
           :style="{ height: '100%' }"
-          @tabScroll="callback"
           type="card"
         >
-          <a-tab-pane :key="1" tab="镜头遮挡">
+          <a-tab-pane key="B1" tab="镜头遮挡">
             <div class="scrollable">
               <CameraBlockForm :data="cameraData"></CameraBlockForm>
             </div>
@@ -67,40 +64,38 @@
 <!--          </a-tab-pane>-->
         </a-tabs>
       </a-tab-pane>
-      <a-tab-pane :key="3" tab="报警设备">
+      <a-tab-pane key="C" tab="报警设备">
         <a-tabs
           v-model:activeKey="threeChildActiveKey"
           tab-position="top"
           :style="{ height: '100%' }"
-          @tabScroll="callback"
           type="card"
         >
-          <a-tab-pane :key="1" tab="白光报警">
+          <a-tab-pane key="C1" tab="白光报警">
             <div class="scrollable" v-if="threeChildActiveKey==1">
               <CameraLightAlarmForm :data="cameraData"></CameraLightAlarmForm>
             </div>
           </a-tab-pane>
-          <a-tab-pane :key="2" tab="声音报警">
+          <a-tab-pane key="C2" tab="声音报警">
             <div class="scrollable" v-if="threeChildActiveKey==2">
               <CameraSoundAlarmForm :data="cameraData"></CameraSoundAlarmForm>
             </div>
           </a-tab-pane>
         </a-tabs>
       </a-tab-pane>
-      <a-tab-pane :key="4" tab="录像管理">
+      <a-tab-pane key="D" tab="录像管理">
         <a-tabs
           v-model:activeKey="fourChildActiveKey"
           tab-position="top"
           :style="{ height: '100%' }"
-          @tabScroll="callback"
           type="card"
         >
-          <a-tab-pane :key="1" tab="MP4转发FTP">
+          <a-tab-pane key="D1" tab="MP4转发FTP">
             <div class="scrollable">
               <CameraUploadForm :data="cameraData"></CameraUploadForm>
             </div>
           </a-tab-pane>
-          <a-tab-pane :key="2" tab="当天录像">
+          <a-tab-pane key="D2" tab="当天录像">
             <div class="scrollable">
               <CameraRecordList :data="cameraData" />
             </div>
@@ -148,10 +143,12 @@
     ip: '' ,//IP
   });
   const cameraData = ref({});
-  const activeKey = ref(1);
-  const oneChildActiveKey = ref(1);
-  const twoChildActiveKey = ref(1);
-  const threeChildActiveKey = ref(1);
+  const activeKey = ref('A');
+  const oneChildActiveKey = ref('A1');
+  const twoChildActiveKey = ref('B1');
+  const threeChildActiveKey = ref('C1');
+  const commonFormRef = ref();
+  const osdFormRef = ref();
 
   const imageData = reactive<Record<string, any>>({
     //画面显示配置
@@ -206,7 +203,7 @@
   //   cameraData.value.parentId = formData.parentId;
   // })
 
-  function edit(record) { 
+  function edit(record) {
     formData.deviceIndex = record.deviceIndex;
     formData.parentId = record.parentId;
     formData.multitrans = record.multitrans;
@@ -222,10 +219,18 @@
     cameraData.value.parentId = formData.parentId;
   }
 
+  function destroyPlayer(){
+    if(commonFormRef.value){
+      commonFormRef.value.destroyPlayer();
+    }
+    if(osdFormRef.value){
+      osdFormRef.value.destroyPlayer();
+    }
+  }
 
-  
   defineExpose({
     edit,
+    destroyPlayer
   });
 
 </script>

src/views/iot/tplink/camera/components/CameraPictureConfigModal.vue

@@ -1,6 +1,8 @@
 <template>
   <j-modal :title="title" :width="width" :fullscreen="true" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
-    <CameraPictureConfig ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></CameraPictureConfig>
+    <div v-if="showCamera">
+      <CameraPictureConfig ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></CameraPictureConfig>
+    </div>
   </j-modal>
 </template>
 
@@ -8,27 +10,29 @@
   import { ref, nextTick, defineExpose } from 'vue';
   import CameraPictureConfig from './CameraPictureConfig.vue'
   import JModal from '/@/components/Modal/src/JModal/JModal.vue';
-  
+
   const title = ref<string>('');
   const width = ref<string>('100%');
   const visible = ref<boolean>(false);
   const disableSubmit = ref<boolean>(false);
   const registerForm = ref();
+  const showCamera = ref<boolean>(false);
   const emit = defineEmits(['register', 'success']);
 
-  
+
   /**
    * 编辑
    * @param record
    */
   function edit(record) {
     title.value = disableSubmit.value ? '详情' : '编辑';
+    showCamera.value = true;
     visible.value = true;
     nextTick(() => {
       registerForm.value.edit(record);
     });
   }
-  
+
   /**
    * 确定按钮点击事件
    */
@@ -49,6 +53,10 @@
    */
   function handleCancel() {
     visible.value = false;
+    nextTick(() => {
+      registerForm.value.destroyPlayer();
+      showCamera.value = false;
+    });
   }
 
   defineExpose({

src/views/iot/tplink/camera/components/CameraPreviewForm.vue

@@ -2,75 +2,104 @@
   <a-spin :spinning="confirmLoading">
     <a-row>
       <a-col :span="24">
-        <div id="video-container"></div>
+        <div id="video-container-preview"></div>
       </a-col>
-      <a-col :span="24" style="padding: 5px;">
-        <span style="margin-left: 5px;" v-show="!izPlaying">
-          <a-button preIcon="ant-design:play-circle-outlined" @click="play">播放</a-button>
-        </span>
-        <span style="margin-left: 5px;" v-show="izPlaying">
-          <a-button preIcon="ant-design:pause-circle-outlined" @click="pause">暂停</a-button>
-        </span>
-        <span style="margin-left: 5px;">
-          <a-button preIcon="ant-design:swap-outlined" @click="switchResolution">{{ resolution }}</a-button>
-        </span>
-<!--        <span style="margin-left: 5px;">
-          <a-button preIcon="ant-design:phone-outlined" @click="screenshot">巡航*</a-button>
-        </span>-->
-        <span style="margin-left: 5px;" v-show="!izPhone">
-          <a-button preIcon="ant-design:phone-outlined" @click="startPhone">电话</a-button>
-        </span>
-        <span style="margin-left: 5px;" v-show="izPhone">
-          <a-button type="primary" danger ghost preIcon="ant-design:phone-outlined" @click="stopPhone">电话</a-button>
-        </span>
-        <span style="margin-left: 15px;">分屏
-          <a-select
-            ref="select"
-            v-model:value="fishEyeDisplayMode"
-            style="width: 120px"
-            @focus="focus"
-            @change="setFishEyeDisplayMode"
-          >
-            <a-select-option value="ORIGIN">原图</a-select-option>
-            <a-select-option value="FISHEYE_360D">360全景</a-select-option>
-            <a-select-option value="FISHEYE_180D">180全景</a-select-option>
-            <a-select-option value="FISHEYE_WIN_PLANE_TOP_QUAD">四分屏</a-select-option>
-            <a-select-option value="FISHEYE_LONGITUDE">全景拉伸</a-select-option>
-          </a-select>
-        </span>
+      <a-col :span="20">
+        <a-col :span="24" style="padding: 5px;">
+          <span style="margin-left: 5px;" v-show="!izPlaying">
+            <a-button preIcon="ant-design:play-circle-outlined" @click="play">播放</a-button>
+          </span>
+          <span style="margin-left: 5px;" v-show="izPlaying">
+            <a-button preIcon="ant-design:pause-circle-outlined" @click="pause">暂停</a-button>
+          </span>
+          <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:swap-outlined" @click="switchResolution">{{ resolution }}</a-button>
+          </span>
+  <!--        <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:phone-outlined" @click="screenshot">巡航*</a-button>
+          </span>-->
+          <span style="margin-left: 5px;" v-show="!izPhone">
+            <a-button preIcon="ant-design:phone-outlined" @click="startPhone">电话</a-button>
+          </span>
+          <span style="margin-left: 5px;" v-show="izPhone">
+            <a-button type="primary" danger ghost preIcon="ant-design:phone-outlined" @click="stopPhone">电话</a-button>
+          </span>
+          <span style="margin-left: 15px;">分屏
+            <a-select
+              ref="select"
+              v-model:value="fishEyeDisplayMode"
+              style="width: 120px"
+              @focus="focus"
+              @change="setFishEyeDisplayMode"
+            >
+              <a-select-option value="ORIGIN">原图</a-select-option>
+              <a-select-option value="FISHEYE_360D">360全景</a-select-option>
+              <a-select-option value="FISHEYE_180D">180全景</a-select-option>
+              <a-select-option value="FISHEYE_WIN_PLANE_TOP_QUAD">四分屏</a-select-option>
+              <a-select-option value="FISHEYE_LONGITUDE">全景拉伸</a-select-option>
+            </a-select>
+          </span>
+        </a-col>
+        <a-col :span="24" style="padding: 5px;">
+          <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:picture-outlined" @click="screenshot">截图</a-button>
+          </span>
+          <span style="margin-left: 5px;" v-show="!izRecording">
+            <a-button preIcon="ant-design:video-camera-outlined" @click="recordingStart">录制</a-button>
+          </span>
+          <span style="margin-left: 5px;" v-show="izRecording">
+            <a-button type="primary" danger ghost preIcon="ant-design:video-camera-outlined" @click="recordingEnd">录制</a-button>
+          </span>
+          <span style="margin-left: 15px;">画面翻转
+            <a-select v-model:value="formData.flip_type" @change="(value) => changeSwitch('flip_type', value)">
+              <a-select-option value="off">关闭</a-select-option>
+              <a-select-option value="left_and_right">左右</a-select-option>
+              <a-select-option value="up_and_down">上下</a-select-option>
+              <a-select-option value="center">中心</a-select-option>
+            </a-select>
+          </span>
+          <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:alert-outlined" @click="manualAlarm">报警</a-button>
+          </span>
+        </a-col>
+        <a-col :span="24" style="padding: 5px;">
+          <span style="margin-left: 5px;">
+            变焦
+          </span>
+          <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:zoom-out-outlined" @mousedown="moveCtrl(9,1,1)" @mouseup="moveCtrl(9,0,1)" title="缩小">缩小</a-button>
+          </span>
+          <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:zoom-in-outlined" @mousedown="moveCtrl(10,1,1)" @mouseup="moveCtrl(10,0,1)" title="放大">放大</a-button>
+          </span>
+          <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:zoom-out-outlined" @mousedown="moveCtrl(11,1,1)" @mouseup="moveCtrl(11,0,1)">对近焦</a-button>
+          </span>
+          <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:zoom-in-outlined" @mousedown="moveCtrl(11,1,1)" @mouseup="moveCtrl(11,0,1)">对远焦</a-button>
+          </span>
+        </a-col>
       </a-col>
-      <a-col :span="24" style="padding: 5px;">
-        <span style="margin-left: 5px;">
-          <a-button preIcon="ant-design:picture-outlined" @click="screenshot">截图</a-button>
-        </span>
-        <span style="margin-left: 5px;" v-show="!izRecording">
-          <a-button preIcon="ant-design:video-camera-outlined" @click="recordingStart">录制</a-button>
-        </span>
-        <span style="margin-left: 5px;" v-show="izRecording">
-          <a-button type="primary" danger ghost preIcon="ant-design:video-camera-outlined" @click="recordingEnd">录制</a-button>
-        </span>
-        <span style="margin-left: 15px;">画面翻转
-          <a-select v-model:value="formData.flip_type" @change="(value) => changeSwitch('flip_type', value)">
-            <a-select-option value="off">关闭</a-select-option>
-            <a-select-option value="left_and_right">左右</a-select-option>
-            <a-select-option value="up_and_down">上下</a-select-option>
-            <a-select-option value="center">中心</a-select-option>
-          </a-select>
-        </span>
-        <span style="margin-left: 5px;">
-          <a-button preIcon="ant-design:alert-outlined" @click="manualAlarm">报警</a-button>
-        </span>
-      </a-col>
-      <a-col :span="24" style="padding: 5px;">
-        <span style="margin-left: 5px;">
-          变焦
-        </span>
-        <span style="margin-left: 5px;">
-          <a-button preIcon="ant-design:zoom-out-outlined" @click="zoomInOut('out')" title="缩小"></a-button>
-        </span>
-        <span style="margin-left: 5px;">
-          <a-button preIcon="ant-design:zoom-in-outlined" @click="zoomInOut('in')" title="放大"></a-button>
-        </span>
+      <a-col :span="4" v-show="formData.ptz == '1'">
+        <table style="width: 96px;height:96px;margin: 5px 0px 5px 0px;">
+          <tbody>
+          <tr>
+            <td></td>
+            <td><a-button preIcon="ant-design:caret-up-outlined" @mousedown="moveCtrl(1,1,1)" @mouseup="moveCtrl(1,0,1)"></a-button></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td><a-button preIcon="ant-design:caret-left-outlined" @mousedown="moveCtrl(3,1,1)" @mouseup="moveCtrl(3,0,1)"></a-button></td>
+            <td><a-button preIcon="ant-design:compress-outlined"></a-button></td>
+            <td><a-button preIcon="ant-design:caret-right-outlined" @mousedown="moveCtrl(5,1,1)" @mouseup="moveCtrl(5,0,1)"></a-button></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td><a-button preIcon="ant-design:caret-down-outlined" @mousedown="moveCtrl(7,1,1)" @mouseup="moveCtrl(7,0,1)"></a-button></td>
+            <td></td>
+          </tr>
+          </tbody>
+        </table>
       </a-col>
     </a-row>
   </a-spin>
@@ -99,7 +128,7 @@
 
   const formRef = ref();
   const player = ref();
-  const resolution = ref<string>('超清');
+  const resolution = ref<string>('流畅');
   const izPlaying = ref<boolean>(true);
   const izRecording = ref<boolean>(false);
   const izPhone = ref<boolean>(false);
@@ -111,7 +140,7 @@
 
     //预览通道参数
     deviceIndex: '',//设备索引
-    streamType: 0,//码流类型 0 代表主码流，1 代码子码流
+    streamType: 1,//码流类型 0 代表主码流，1 代码子码流
 
     //视频预览参数
     url: '',//预览通道对应的URL
@@ -120,7 +149,10 @@
     wssUrl: '',//用于建立wss接传输视频帧信息
 
     flip_type: '',//画面镜像旋转： "off"//关闭 "left_and_right"//左右 "up_and_down"//上下 "center"//中心
-
+    zoom: 1, //变焦
+    sliderValue : 1,//滑动条的值
+    ptz : 0,//是否有云台
+    smartCode : 0,//是否可变焦
   });
   const { createMessage } = useMessage();
   const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
@@ -160,7 +192,6 @@
       //赋值
       Object.assign(formData, tmpData);
     });
-
     createPreview();
     getSwitch();
   }
@@ -179,9 +210,10 @@
     if (player.value){
       player.value.destroy().then(() => {
       }); // 销毁
+      player.value = null;
     }
     const TumsPlayer = window['tums-player'].default;
-    player.value = new TumsPlayer('video-container', {
+    player.value = new TumsPlayer('video-container-preview', {
       type: "rtsp", // 协议类型，rtsp
       url: formData.url, // 取流地址, getPreviewUrl接口获取
       // url: formData.backupUrl, // 取流地址, getPreviewUrl接口获取
@@ -400,6 +432,7 @@
     if (player){
       player.value.destroy().then(() => {
       }); // 销毁
+      player.value = null;
     }
   }
 

src/views/iot/tplink/camera/components/CameraPreviewModal.vue

@@ -1,6 +1,8 @@
 <template>
   <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
-    <CameraPreviewForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></CameraPreviewForm>
+    <div v-if="showCamera">
+      <CameraPreviewForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></CameraPreviewForm>
+    </div>
   </j-modal>
 </template>
 
@@ -12,6 +14,7 @@
   const title = ref<string>('');
   const width = ref<number>(600);
   const visible = ref<boolean>(false);
+  const showCamera = ref<boolean>(false);
   const disableSubmit = ref<boolean>(false);
   const registerForm = ref();
   const emit = defineEmits(['register', 'success']);
@@ -24,6 +27,7 @@
    */
   function edit(record) {
     title.value = record.deviceName;
+    showCamera.value = true;
     visible.value = true;
     nextTick(() => {
       registerForm.value.edit(record);
@@ -48,8 +52,11 @@
    * 取消按钮回调事件
    */
   function handleCancel() {
-    registerForm.value.destroy();
     visible.value = false;
+    nextTick(() => {
+      registerForm.value.destroy();
+      showCamera.value = false;
+    });
   }
 
   defineExpose({

src/views/iot/tplink/camera/index.vue

@@ -1,6 +1,6 @@
 <template>
-
-  <a-row class="p-2" type="flex" :gutter="10">
+<CameraInfoList :data="cameraData" />
+  <!-- <a-row class="p-2" type="flex" :gutter="10">
     <a-col :xl="4" :lg="24" :md="24" style="margin-bottom: 10px">
       <CameraLeftTree ref="leftTree" @select="onTreeSelect" @rootTreeData="onRootTreeData" />
     </a-col>
@@ -12,7 +12,7 @@
         <a-empty description="请选择区域" />
       </div>
     </a-col>
-  </a-row>
+  </a-row> -->
 </template>
 
 <script lang="ts" name="iot-nuIotCameraInfo" setup>