From c8144e10bec6e1e8084fac656acd58c315e1e183 Mon Sep 17 00:00:00 2001
From: yangjun <1173114630@qq.com>
Date: Thu, 14 Aug 2025 10:00:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8A=A4=E7=90=86=E5=8C=BA?=
 =?UTF-8?q?=E5=9F=9F=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/biz/nuBaseInfo/QyxxList.vue         | 194 ++++++++++--------
 .../components/BaseWlsbListForm.vue           |  94 ++++++++-
 .../nuBaseInfo/components/NuBaseInfoForm.vue  |   2 +-
 .../nuBaseInfo/components/NuBaseInfoModal.vue |   2 +-
 .../camera/components/CameraInfoList.vue      |   4 +-
 src/views/iot/tplink/camera/index.vue         |   6 +-
 6 files changed, 201 insertions(+), 101 deletions(-)

diff --git a/src/views/biz/nuBaseInfo/QyxxList.vue b/src/views/biz/nuBaseInfo/QyxxList.vue
index 3b55272..18ebde8 100644
--- a/src/views/biz/nuBaseInfo/QyxxList.vue
+++ b/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>
diff --git a/src/views/biz/nuBaseInfo/components/BaseWlsbListForm.vue b/src/views/biz/nuBaseInfo/components/BaseWlsbListForm.vue
index aa80434..58c8e5d 100644
--- a/src/views/biz/nuBaseInfo/components/BaseWlsbListForm.vue
+++ b/src/views/biz/nuBaseInfo/components/BaseWlsbListForm.vue
@@ -1,6 +1,49 @@
 <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="24" style="margin-top: -10px;"><a-tag color="purple">摄像头</a-tag></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:10%;cursor: pointer;" @click="handlePicConfig(item)">
+                <span class="tbClass"><img src="../../../../assets/iot/a12.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>
@@ -175,6 +218,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,6 +233,8 @@ 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";
@@ -194,6 +242,9 @@ 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: []});//温湿度计
@@ -202,10 +253,20 @@ const anyInfo = ref<any>({});//区域信息
   const [registerDrawer, { openDrawer }] = useDrawer();
 
 function edit(record) {
-anyInfo.value = record;
-getZndb(record);//智能电表
-getZnsb(record);//智能水表
-getWsdj(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 +490,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,
 });
diff --git a/src/views/biz/nuBaseInfo/components/NuBaseInfoForm.vue b/src/views/biz/nuBaseInfo/components/NuBaseInfoForm.vue
index 1c0e377..d21c0b7 100644
--- a/src/views/biz/nuBaseInfo/components/NuBaseInfoForm.vue
+++ b/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>
diff --git a/src/views/biz/nuBaseInfo/components/NuBaseInfoModal.vue b/src/views/biz/nuBaseInfo/components/NuBaseInfoModal.vue
index 9833fd6..0641e05 100644
--- a/src/views/biz/nuBaseInfo/components/NuBaseInfoModal.vue
+++ b/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>
diff --git a/src/views/iot/tplink/camera/components/CameraInfoList.vue b/src/views/iot/tplink/camera/components/CameraInfoList.vue
index 3fe1159..b76c7d5 100644
--- a/src/views/iot/tplink/camera/components/CameraInfoList.vue
+++ b/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 = {};
diff --git a/src/views/iot/tplink/camera/index.vue b/src/views/iot/tplink/camera/index.vue
index c19471b..09025ca 100644
--- a/src/views/iot/tplink/camera/index.vue
+++ b/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>