修改摄像头管理的样式，及画面配置功能改成弹出层

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

@@ -1,19 +1,91 @@
 <template>
-      <div>
+  <div class="p-2">
+        <!--查询区域-->
+    <div class="jeecg-basic-table-form-container">
+      <a-form ref="formRef" @keyup.enter.native="reload" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-row :gutter="24">
+          <a-col :lg="6">
+            <a-form-item name="address">
+              <template #label><span title="SN">SN</span></template>
+              <j-input placeholder="请输入SN" v-model:value="queryParam.address" allow-clear ></j-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6">
+            <a-form-item name="nuId">
+              <template #label><span title="护理单元">护理单元</span></template>
+              <j-dict-select-tag type='list' v-model:value="queryParam.nuId" :dictCode="`nu_base_info,nu_name,nu_id`" placeholder="请选护理单元"  allow-clear />
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+                <a-button type="primary" preIcon="ant-design:search-outlined" @click="reload">查询</a-button>
+                <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <a-row>
+      <a-col v-for="(item,index) in tableData.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 style="font-size: 12px;">设备名称：<span style="font-weight: bold;">{{item.deviceName}}</span></div>
+                      <div style="font-size: 12px;">区域名称：{{item.regionName?item.regionName:'未配置'}}</div>
+                </a-col>
+                <a-col :span="6" style="text-align: center;padding-top: 4px;">
+                  <div :class="item.deviceStatus=='1'?'zxClass':'lxClass'">{{item.deviceStatus =='1'?'在线':'离线'}}</div>
+                </a-col>
+              </a-row>
+          </template>
+          <p style="text-align:center;margin-top: 15px;">
+              <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="handleEdit(item)">
+                <span class="tbClass"><img src="../../../../../assets/iot/a13.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-divider  />
+            <a-row>
+                <a-col :span="12" style="margin-top: -10px;margin-bottom: 10px;">{{item.nuId_dictText?item.nuId_dictText:'未配置'}}</a-col>
+                <a-col :span="12" style="text-align: right;margin-top: -10px;">
+                  <span style="text-align: right;background:#f6f6f6;padding: 2px 10px;border-radius:5px;">NUID: {{item.nuId?item.nuId:'未配置'}}</span>
+                </a-col>
+              </a-row>
+        </a-card>
+      </a-col>
+      <a-col v-if="tableData.total==0" >
+        <div style="margin: 30px auto;">
+          <a-empty />
+        </div>
+      </a-col>
+    </a-row>
+    <div  v-if="tableData.total > 0"
+      style="float:right;bottom: 20px;z-index: 999;padding: 8px 16px;border-radius: 4px;display: flex;align-items: center;">
+      <span style="margin-right: 10px;">共 {{ tableData.total }} 条数据</span>
+      <Pagination showLessItems v-model:current="pageParams.pageNo" :pageSize="pageParams.pageSize" size="small"
+        show-quick-jumper :total="tableData.total" @change="reload" />
+    </div>
         <!--引用表格-->
-        <BasicTable @register="registerTable">
-          <!--插槽:table标题-->
+        <!-- <BasicTable @register="registerTable">
           <template #tableTitle>
           </template>
-          <!--操作栏-->
           <template #action="{ record }">
             <TableAction :actions="getTableAction(record)"/>
           </template>
           <template v-slot:bodyCell="{ column, record, index, text }">
           </template>
-        </BasicTable>
+        </BasicTable> -->
         <!-- 表单区域 -->
         <CameraPreviewModal ref="previewModal"></CameraPreviewModal>
+        <CameraPictureConfigModal ref="cameraPictureConfigModal"></CameraPictureConfigModal>
         <CameraInfoDrawer @register="registerDrawer" @success="handleSuccess" />
       </div>
 </template>
@@ -29,6 +101,11 @@ import {ref, reactive, createVNode, h, onMounted, watch, unref} from 'vue';
   import { useRouter } from 'vue-router';
   import CameraPreviewModal from './CameraPreviewModal.vue'
   import CameraInfoDrawer from './CameraInfoDrawer.vue'
+  import { defHttp } from '/@/utils/http/axios';
+import { JInput } from '/@/components/Form';
+  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+  import CameraPictureConfigModal from '/@/views/iot/tplink/camera/components/CameraPictureConfigModal.vue';
+  
 
   const props = defineProps({
     data: { type: Object, default: () => ({}) },
@@ -41,28 +118,10 @@ import {ref, reactive, createVNode, h, onMounted, watch, unref} from 'vue';
   const registerModal = ref();
   const previewModal = ref();
   const deviceModal = ref();
+  const cameraPictureConfigModal = ref();
   const userStore = useUserStore();
-  //注册table数据
-  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
-    tableProps: {
-      title: '护理单元-物联管理-摄像头信息',
-      api: list,
-      columns,
-      canResize: false,
-      formConfig: {
-        // labelWidth: 200,
-        schemas: searchFormSchema,
-      },
-      actionColumn: {
-        width: 180,
-        fixed: 'right',
-      },
-      beforeFetch: async (params) => {
-        return Object.assign(params, queryParam);
-      },
-    },
-  });
-  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
+  const tableData = ref<any>([]);
+const pageParams = ref({ pageNo: 1, pageSize: 8 })
   const labelCol = reactive({
     xs:24,
     sm:4,
@@ -74,22 +133,6 @@ import {ref, reactive, createVNode, h, onMounted, watch, unref} from 'vue';
     sm: 20,
   });
 
-  onMounted(() => {
-    watch(
-      () => props.data,
-      async () => {
-        queryParam.projectId = props.data.projectId;
-        queryParam.regionId = props.data.regionId;
-        let record = unref(props.data);
-        if (typeof record !== 'object') {
-          record = {};
-        }
-        reload();
-      },
-      { deep: true, immediate: true }
-    );
-  });
-
   /**
    * 编辑
    */
@@ -121,9 +164,7 @@ import {ref, reactive, createVNode, h, onMounted, watch, unref} from 'vue';
    * 画面配置
    */
   function handlePicConfig(record) {
-    router.push({
-      path:'/tplink/cameraConfig',
-      query: {
+    var params = {
         deviceIndex: record.deviceIndex,
         parentId: record.parentId,
         multitrans: record.multitrans,
@@ -131,28 +172,11 @@ import {ref, reactive, createVNode, h, onMounted, watch, unref} from 'vue';
         regionId: record.regionId,
         ip: record.ip
       }
-    })
-  }
+    cameraPictureConfigModal.value.disableSubmit = true;
+    cameraPictureConfigModal.value.edit(params);
 
-  /**
-   * 操作栏
-   */
-  function getTableAction(record) {
-    return [
-      {
-        label: '画面配置',
-        onClick: handlePicConfig.bind(null, record),
-      },
-      {
-        label: '编辑',
-        onClick: handleEdit.bind(null, record),
-      },
-      {
-        label: '预览',
-        onClick: handlePreview.bind(null, record),
-      },
-    ];
   }
+ 
 
   /**
    * 左侧树选择后触发
@@ -168,36 +192,71 @@ import {ref, reactive, createVNode, h, onMounted, watch, unref} from 'vue';
     // rootTreeData.value = data;
   }
 
+  function reload(){
+    queryParam.pageSize = pageParams.value.pageSize;
+    queryParam.pageNo = pageParams.value.pageNo;
+    defHttp.get({url: '/iot/tplink/cameraInfo/list',params:queryParam}).then(res => {
+      console.log("🚀 ~ defHttp.get ~ res:", res)
+      tableData.value = res;
+    });
+  }
+  
+  /**
+   * 重置
+   */
+  function searchReset() {
+    formRef.value.resetFields();
+    //刷新数据
+    reload();
+  }
+  
+
+  onMounted(() => {
+    watch(
+      () => props.data,
+      async () => {
+        queryParam.projectId = props.data.projectId;
+        queryParam.regionId = props.data.regionId;
+        let record = unref(props.data);
+        if (typeof record !== 'object') {
+          record = {};
+        }
+        reload();
+      },
+      { deep: true, immediate: true }
+    );
+  });
 </script>
 
 <style lang="less" scoped>
 
-.jeecg-basic-table-form-container {
-    padding: 0;
-    .table-page-search-submitButtons {
-      display: block;
-      margin-bottom: 24px;
-      white-space: nowrap;
-    }
-    .query-group-cust{
-      min-width: 100px !important;
-    }
-    .query-group-split-cust{
-      width: 30px;
-      display: inline-block;
-      text-align: center
-    }
-    .ant-form-item:not(.ant-form-item-with-help){
-      margin-bottom: 16px;
-      height: 32px;
-    }
-    :deep(.ant-picker),:deep(.ant-input-number){
-      width: 100%;
-    }
-  }
 
-.p-2{
-  height: calc(100vh - 120px);
+.zxClass{
+  font-size:14px;
+  background: linear-gradient(to right, #1ea0fa, #017de9);
+  border-radius: 8px;
+  height: 35px;
+  color: white;
+  line-height: 35px;
+}
+
+.lxClass{
+  font-size:14px;
+  background: linear-gradient(to right, #cccccc, #cccccc);
+  border-radius: 8px;
+  height: 35px;
+  color: white;
+  line-height: 35px;
+}
+.tbClass{
+  background: #f6f6f6;
+  padding: 8px;
+  border-radius: 5px;
+}
+.antTitle{
+  margin-top: 10px;
+  display: block;
+  font-size: 12px;
 }
 
 </style>

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

@@ -190,13 +190,29 @@
   //   getBatchProgress({}).then(res=>{});
   // }
 
-  onMounted(()=>{
-    formData.deviceIndex = router.currentRoute.value.query.deviceIndex;
-    formData.parentId = router.currentRoute.value.query.parentId;
-    formData.multitrans = router.currentRoute.value.query.multitrans;
-    formData.projectId = router.currentRoute.value.query.projectId;
-    formData.regionId = router.currentRoute.value.query.regionId;
-    formData.ip = router.currentRoute.value.query.ip;
+  // onMounted(()=>{
+  //   formData.deviceIndex = router.currentRoute.value.query.deviceIndex;
+  //   formData.parentId = router.currentRoute.value.query.parentId;
+  //   formData.multitrans = router.currentRoute.value.query.multitrans;
+  //   formData.projectId = router.currentRoute.value.query.projectId;
+  //   formData.regionId = router.currentRoute.value.query.regionId;
+  //   formData.ip = router.currentRoute.value.query.ip;
+
+  //   cameraData.value.deviceIndex = formData.deviceIndex;
+  //   cameraData.value.projectId = formData.projectId;
+  //   cameraData.value.regionId = formData.regionId;
+  //   cameraData.value.multitrans = formData.multitrans;
+  //   cameraData.value.scale = formData.scale;
+  //   cameraData.value.parentId = formData.parentId;
+  // })
+
+  function edit(record) { 
+    formData.deviceIndex = record.deviceIndex;
+    formData.parentId = record.parentId;
+    formData.multitrans = record.multitrans;
+    formData.projectId = record.projectId;
+    formData.regionId = record.regionId;
+    formData.ip = record.ip;
 
     cameraData.value.deviceIndex = formData.deviceIndex;
     cameraData.value.projectId = formData.projectId;
@@ -204,7 +220,13 @@
     cameraData.value.multitrans = formData.multitrans;
     cameraData.value.scale = formData.scale;
     cameraData.value.parentId = formData.parentId;
-  })
+  }
+
+
+  
+  defineExpose({
+    edit,
+  });
 
 </script>
 

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

@@ -0,0 +1,66 @@
+<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>
+  </j-modal>
+</template>
+
+<script lang="ts" setup>
+  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 emit = defineEmits(['register', 'success']);
+
+  
+  /**
+   * 编辑
+   * @param record
+   */
+  function edit(record) {
+    title.value = disableSubmit.value ? '详情' : '编辑';
+    visible.value = true;
+    nextTick(() => {
+      registerForm.value.edit(record);
+    });
+  }
+  
+  /**
+   * 确定按钮点击事件
+   */
+  function handleOk() {
+    registerForm.value.submitForm();
+  }
+
+  /**
+   * form保存回调事件
+   */
+  function submitCallback() {
+    handleCancel();
+    emit('success');
+  }
+
+  /**
+   * 取消按钮回调事件
+   */
+  function handleCancel() {
+    visible.value = false;
+  }
+
+  defineExpose({
+    edit,
+    disableSubmit,
+  });
+</script>
+
+<style lang="less">
+  /**隐藏样式-modal确定按钮 */
+  .jee-hidden {
+    display: none !important;
+  }
+</style>
+<style lang="less" scoped></style>