设备管理样式调整

src/assets/styles/self-defined.scss

@@ -197,3 +197,11 @@
     }
 }
 
+.childTextAlignRight{
+    display: block!important;
+    text-align: right!important;
+    div{
+        display: block!important;
+        text-align: right!important;
+    }
+}

src/views/model/alert/deviceparamalert.vue

@@ -83,10 +83,10 @@
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table ref="deviceParamsTable" v-loading="loading" :data="alertList">
+    <el-table ref="deviceParamsTable" v-loading="loading" :data="alertList" :border="true" :column-width-draggable="true">
       <el-table-column type="selection" width="55" align="center" />
       <!-- <el-table-column label="主键" align="center" prop="id" /> -->
-      <el-table-column label="中台设备ID" align="center" prop="deviceUuid" />
+      <el-table-column label="中台设备ID" align="center" prop="deviceUuid"/>
       <el-table-column label="设备名称" align="center" prop="deviceName" :width="120"/>
       <el-table-column label="参数名称" align="center" prop="paramName" :width="120"/>
       <el-table-column label="参数类型" align="center" prop="paramType" :width="120">
@@ -250,7 +250,7 @@
         </el-row>
         <el-row v-show="tableVisiable">
           <el-col>
-              <el-table ref="policyTable" v-loading="loading" :data="modelList" :row-key="getRowKey" @selection-change="handleSelectionChange">
+              <el-table ref="policyTable" v-loading="loading" :data="modelList" :row-key="getRowKey" @selection-change="handleSelectionChange" >
                 <el-table-column type="selection" reserve-selection="true" width="55" align="center" />
                 <el-table-column label="名称" align="center" prop="name"/>
                 <el-table-column label="符号" align="center" prop="code" :width="120"/>
@@ -712,6 +712,14 @@ function submitFormPolicy() {
             })
             return;
           };
+          const policyTableRows = proxy.$refs.policyTable.getSelectionRows();
+          if(!(policyTableRows?.length>0)){
+            ElMessageBox.alert('请勾选需要告警的规则项', '提示', {
+                      confirmButtonText: '确定',
+                      center: true,
+                    });
+            return;
+          }
           mapFormTable();
           addPolicyBatch(policyParams.value).then(response => {
             proxy.$modal.msgSuccess("新增成功");

src/views/model/alert/method.vue

@@ -1,30 +1,37 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
-      <el-form-item label="策略名称" prop="methodName">
-        <el-input
-          v-model="queryParams.methodName"
-          placeholder="请输入策略名称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="是否有效" prop="flagEnabled">
-        <el-select v-model="queryParams.flagEnabled" placeholder="请选择是否有效" clearable>
-          <el-option
-            v-for="item in flagEnabled"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item class="childTextAlignCenter">
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button type="info" plain icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
+      <el-row>  
+        <el-col :span="4">
+          <el-form-item label="策略名称" prop="methodName">
+            <el-input
+              v-model="queryParams.methodName"
+              placeholder="请输入策略名称"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="是否有效" prop="flagEnabled">
+            <el-select v-model="queryParams.flagEnabled" placeholder="请选择是否有效" clearable>
+              <el-option
+                v-for="item in flagEnabled"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item class="childTextAlignCenter">
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button type="info" plain icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
-
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button

src/views/model/alert/model.vue

@@ -1,24 +1,35 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="120px">
-      <el-form-item label="参数数据类型" prop="paramType">
-        <el-select v-model="queryParams.paramType" placeholder="请选择参数数据类型" clearable>
-          <el-option
-            v-for="dict in dc_param_value_type"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="代码" prop="code">
-        <el-input
-          v-model="queryParams.code"
-          placeholder="请输入代码"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
+      <el-row>
+        <el-col :span="4">
+          <el-form-item label="参数数据类型" prop="paramType">
+            <el-select v-model="queryParams.paramType" placeholder="请选择参数数据类型" clearable>
+              <el-option
+                v-for="dict in dc_param_value_type"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label="代码" prop="code">
+            <el-input
+              v-model="queryParams.code"
+              placeholder="请输入代码"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          
+        </el-col>
+      </el-row>
+      
+      
       <el-form-item label="是否有效" prop="flagEnabled">
         <el-select v-model="queryParams.flagEnabled" placeholder="请选择是否有效" clearable>
           <el-option

src/views/model/device/index.vue

@@ -36,6 +36,15 @@
           </el-form-item>
         </el-col>
         <el-col :span="4">
+          <el-form-item label="所属组织名称" prop="orgName">
+            <el-tree-select v-model="queryParams.orgName" :data="deptOptions"
+                  :props="{ value: 'label', label: 'label', children: 'children' }" value-key="id" placeholder="请选择组织名称"
+                  check-strictly :default-expand-all="true" clearable/>
+          </el-form-item>
+        </el-col>
+        <!-- <el-collapse-transition>
+        <div v-show="collapseVisible"> -->
+        <el-col :span="4" v-show="collapseVisible">
           <el-form-item label="是否可用" prop="enabledFlag">
             <el-select v-model="queryParams.enabledFlag" placeholder="请选择是否可用" clearable>
               <el-option
@@ -47,7 +56,7 @@
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="4">
+        <el-col :span="4" v-show="collapseVisible">
           <el-form-item label="设备类型" prop="deviceType">
             <el-select v-model="queryParams.deviceType" placeholder="请选择设备类型" clearable>
               <el-option
@@ -59,19 +68,7 @@
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="4">
-          <el-form-item label="所属组织名称" prop="orgName">
-            <el-tree-select v-model="queryParams.orgName" :data="deptOptions"
-                  :props="{ value: 'label', label: 'label', children: 'children' }" value-key="id" placeholder="请选择组织名称"
-                  check-strictly :default-expand-all="true" clearable/>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      
-      <!-- <el-collapse-transition> -->
-        <!-- <div v-show="collapseVisible"> -->
-          <el-row>
-        <el-col :span="4">
+        <el-col :span="4" v-show="collapseVisible">
           <el-form-item label="位置编码" prop="locationCode">
             <el-input
               v-model="queryParams.locationCode"
@@ -81,7 +78,7 @@
             />
           </el-form-item>
         </el-col>
-        <el-col :span="4">
+        <el-col :span="4" v-show="collapseVisible">
           <el-form-item label="位置名称" prop="locationName">
             <el-input
               v-model="queryParams.locationName"
@@ -91,7 +88,7 @@
             />
           </el-form-item>
         </el-col>
-        <el-col :span="4">
+        <el-col :span="4" v-show="collapseVisible">
           <el-form-item label="设备应用范围" prop="deviceClass">
             <el-input
               v-model="queryParams.deviceClass"
@@ -101,7 +98,7 @@
             />
           </el-form-item>
         </el-col>
-        <el-col :span="4">
+        <el-col :span="4" v-show="collapseVisible">
           <el-form-item label="服务器地址" prop="serverIp">
             <el-input
               v-model="queryParams.serverIp"
@@ -111,7 +108,7 @@
             />
           </el-form-item>
         </el-col>
-        <el-col :span="4">
+        <el-col :span="4" v-show="collapseVisible">
           <el-form-item label="从属网关ID" prop="gatewayId">
             <el-input
               v-model="queryParams.gatewayId"
@@ -121,7 +118,7 @@
             />
           </el-form-item>
         </el-col>
-        <el-col :span="4">
+        <el-col :span="4" v-show="collapseVisible">
           <el-form-item label="纬度" prop="latValue">
             <el-input
               v-model="queryParams.latValue"
@@ -131,9 +128,9 @@
             />
           </el-form-item>
         </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="4">
+      <!-- </el-row>
+      <el-row> -->
+        <el-col :span="4" v-show="collapseVisible">
           <el-form-item label="经度" prop="lagValue">
             <el-input
               v-model="queryParams.lagValue"
@@ -143,7 +140,7 @@
             />
           </el-form-item>
         </el-col>
-        <el-col :span="4">
+        <el-col :span="4" v-show="collapseVisible">
           <el-form-item label="是否告警" prop="alertEnabled">
             <el-select v-model="queryParams.alertEnabled" placeholder="请选择设备类型" clearable>
               <el-option
@@ -155,41 +152,32 @@
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="4">
+        <el-col :span="4" v-show="collapseVisible">
           <el-form-item label="设备模型" prop="deviceModelId">
             <el-select v-model="queryParams.deviceModelId" placeholder="请选择设备模型id" clearable>
               <el-option label="请选择设备模型" value="deviceModelId" />
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="4">
+        <el-col :span="4" v-show="collapseVisible">
           <el-form-item label="设备分组" prop="deviceGroupId">
             <el-select v-model="queryParams.deviceGroupId" placeholder="请选择设备分组ID" clearable>
               <el-option label="请添加设备分组" value="" />
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="4">
-          <!-- <el-form-item label="租户号" prop="tentantId">
-            <el-input
-              v-model="queryParams.tentantId"
-              placeholder="请输入租户号"
-              clearable
-              @keyup.enter="handleQuery"
-            />
-          </el-form-item> -->
+        <el-col :span="2">
         </el-col>
-        <el-col :span="4">
-          <el-form-item  class="childTextAlignCenter">
+      <!-- </div>
+      </el-collapse-transition> -->
+        <el-col :span="6">
+          <el-form-item  class="childTextAlignRight">
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button type="info" plain icon="Refresh" @click="resetQuery">重置</el-button>
-            <!-- <el-button @click="toggleCollapse">{{editName}}</el-button> -->
+            <el-button @click="toggleCollapse">{{editName}}</el-button>
           </el-form-item>
         </el-col>
       </el-row>
-        <!-- </div> -->
-      <!-- </el-collapse-transition> -->
-      
     </el-form>
 
     <el-row :gutter="10" class="mb8">
@@ -224,8 +212,7 @@
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList">
       </right-toolbar>
     </el-row>
-
-    <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange" :max-height="tableHeight" :border="true" :column-width-draggable="true">
       <el-table-column type="selection" width="55" align="center" fixed="left"/>
       <el-table-column label="中台设备编码" align="center" prop="centerDeviceCode" :width="120"/>
       <el-table-column label="设备名称" align="center" prop="deviceName" :width="120"/>
@@ -258,7 +245,12 @@
       </el-table-column>
       <el-table-column label="租户号" align="center" prop="tentantId" :width="120"/>
       <el-table-column label="设备分组" align="center" prop="deviceGroupId" :width="120"/>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" :width="300">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  :width="300" :fixed="fixedColumns?'right':false">
+        <template #header>
+          <div class="fixed-column-header"  style="text-align: center;display: block;" @dblclick="toggleFixedColumns">
+            <span style="text-align: center;display: block;">操作<img style="width:10px;margin-left:5px" v-show="fixedColumns" :src="lock" alt="Image"/></span>
+          </div>
+        </template>
         <template #default="scope">
           <el-button
             type="text"
@@ -278,7 +270,6 @@
         </template>
       </el-table-column>
     </el-table>
-    
     <pagination
       v-show="total>0"
       :total="total"
@@ -443,14 +434,28 @@
 </template>
 <style lang="scss" > 
   @import "@/assets/styles/self-defined.scss";
+  .fixed-column-toggle {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  .fixed-column-header {
+    display: flex;
+    align-items: center;
+    i {
+      margin-right: 5px;
+    }
+  }
 </style>
 <script setup name="Device">
 import { getUuid, listDevice, getDevice, delDevice, addDevice, updateDevice } from "@/api/model/device";
 import { deptTreeSelect } from "@/api/system/user";
+import lock from "@/assets/icons/svg/lock.svg";
+import { ref,onMounted,onUnmounted } from "vue";
 const { proxy } = getCurrentInstance();
 const { dc_device_type, dc_device_source } = proxy.useDict('dc_device_type','dc_device_source');
 const router = useRouter();
-
 const deviceList = ref([]);
 const open = ref(false);
 const loading = ref(true);
@@ -464,6 +469,9 @@ const collapseVisible = ref(false);
 const editName = ref("更多筛选项");
 const deptOptions = ref([]);
 const disabled = ref(false);
+const fixedColumns = ref(true);
+const tableHeight = ref("0px");
+const pageSize = ref(10);
 const enabledFlag = ref([
   {label: '可用', value: true, elTagType: 'default', elTagClass: null}, 
   {label: '不可用', value: false, elTagType: 'default', elTagClass: null}
@@ -673,15 +681,6 @@ function handleExport() {
   }, `device_${new Date().getTime()}.xlsx`)
 }
 
-// onMounted(() => {
-//     // debugger
-//     // console.log("-------------"+queryParams.deviceType);
-//     // queryParams.deviceType = queryParams.deviceType;
-//     // 在组件首次加载完成后执行的逻辑
-//     // 可以在这里给组件复制
-//     // form.value.pid=tempPid;
-//   });
-
 function handleParams(row){
   router.push({
     path: "params",
@@ -716,6 +715,59 @@ function deviceSourceChange(val){
   form.value.deviceSourceId=val;
 }
 
+function toggleFixedColumns() {
+  fixedColumns.value = !fixedColumns.value;
+}
+
+// tableHeight.value = computed(() => {
+//   const windowHeight = window.innerHeight;
+//   const paginationHeight = 60;
+//   const tableHeaderHeight = 40;
+//   const tableMargin = 20;
+//   const remainingHeight = windowHeight - paginationHeight - tableHeaderHeight - tableMargin;
+//   debugger
+//   return remainingHeight + 'px';
+// });
+// const pageSizeRef = toRef(props, 'pageSize');
+// watch(pageSizeRef, (newSize) => {
+//   // 当分页条数变化时，重新计算表格高度
+//   tableHeight.value = calculateTableHeight();
+//   debugger;
+// });
+
+
+
+onMounted(()=>{
+  calculateTableHeight();
+  window.addEventListener('resize', calculateTableHeight);
+  window.onresize = () => {
+    return (() => {
+      calculateTableHeight();
+    })()
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', calculateTableHeight);
+});
+watch(
+  [collapseVisible,showSearch],
+  () => {
+    calculateTableHeight();
+  }
+);
+const calculateTableHeight = () => {
+  nextTick(() => {
+    const heightForm = proxy.$refs.queryRef?.$el.clientHeight||0;
+    const windowHeight = window.innerHeight;
+    const paginationHeight = 60;
+    const tableHeaderHeight = 40;
+    const tableMargin = 20;
+    const remainingHeight = windowHeight - paginationHeight - tableHeaderHeight - tableMargin - heightForm - 100;
+    tableHeight.value = remainingHeight + 'px';
+  });
+};
+
 getDeptTree();
 getList();
 </script>