diff --git a/src/api/model/paramclass.js b/src/api/model/paramclass.js
index 1f2f0f2..b1ffda2 100644
--- a/src/api/model/paramclass.js
+++ b/src/api/model/paramclass.js
@@ -46,7 +46,7 @@ export function delParamclass(id) {
// 导出参数模型信息
export function exportParamclass(query) {
return request({
- url: '/${baseUrl}/export',
+ url: '/model/dcModelParamclass/export',
method: 'get',
params: query
})
diff --git a/src/api/model/params.js b/src/api/model/params.js
index 0ce93c9..254902b 100644
--- a/src/api/model/params.js
+++ b/src/api/model/params.js
@@ -58,4 +58,13 @@ export function exportParams(query) {
method: 'get',
params: query
})
+}
+
+//获取列表带筛选值
+export function listWithFilterColumn(data){
+ return request({
+ url: '/model/dcBaseDeviceParam/listWithFilterColumn',
+ method: 'post',
+ data: data
+ });
}
\ No newline at end of file
diff --git a/src/assets/styles/self-defined.scss b/src/assets/styles/self-defined.scss
index 694dba6..be08790 100644
--- a/src/assets/styles/self-defined.scss
+++ b/src/assets/styles/self-defined.scss
@@ -205,3 +205,32 @@
text-align: right!important;
}
}
+
+.fixed-column-toggle {
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+ .fixed-column-header {
+ display: flex;
+ align-items: center;
+ i {
+ margin-right: 5px;
+ }
+ }
+ .my-custom-form .el-form-item {
+ .el-select{
+ width:100%;
+ }
+ margin-right: 0 !important;
+ width: 96%;
+ }
+
+ .paddingBothLeftRight{
+ >div{
+ padding: 0 20px;
+ }
+ }
+
+
diff --git a/src/views/model/alert/deviceparamalert.vue b/src/views/model/alert/deviceparamalert.vue
index 2977b1f..f1c8e55 100644
--- a/src/views/model/alert/deviceparamalert.vue
+++ b/src/views/model/alert/deviceparamalert.vue
@@ -1,6 +1,6 @@
<template>
<div class="app-container">
- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="120px">
+ <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="90px" class="my-custom-form">
<el-row>
<el-col :span="4">
<el-form-item label="中台设备ID" prop="deviceUuid">
@@ -83,10 +83,16 @@
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
- <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 ref="deviceParamsTable" v-loading="loading" :data="alertList" @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="id" /> -->
- <el-table-column label="中台设备ID" align="center" prop="deviceUuid"/>
+ <el-table-column label="中台设备ID" align="center" prop="deviceUuid" :fixed="fixedColumns?'left':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>
+ </el-table-column>
<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">
@@ -100,7 +106,12 @@
<el-switch v-model="scope.row.enabled" :active-value="1" :inactive-value="0" @change="changeEnabled(scope.row)"/>
</template>
</el-table-column>
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+ <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"
@@ -122,6 +133,7 @@
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
+ class="paddingBothLeftRight"
/>
<!-- 添加或修改设备告警对话框 -->
@@ -251,7 +263,7 @@
<el-row v-show="tableVisiable">
<el-col>
<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 type="selection" reserve-selection="true" width="55" align="center" fixed="left" />
<el-table-column label="名称" align="center" prop="name"/>
<el-table-column label="符号" align="center" prop="code" :width="120"/>
<el-table-column label="运算符" align="center" prop="operator" :width="120">
@@ -330,6 +342,7 @@ import { listMethod } from "@/api/model/method";
import { listModelEnabledNoPage } from "@/api/model/alertmodel";
import { ElMessageBox } from 'element-plus';
import {listPolicyInfo,updatePolicy,updatePolicyBatch,addPolicy,addPolicyBatch,listAlertParamSelect } from "@/api/model/policy";
+import lock from "@/assets/icons/svg/lock.svg";
const { proxy } = getCurrentInstance();
const router = useRouter();
const { operator_sign,dc_param_value_type,dc_alert_level } = proxy.useDict('operator_sign','dc_param_value_type','dc_alert_level');
@@ -368,6 +381,12 @@ const dialogWidth = ref('1600px');
const queryModel = ref({});
const levelVisiable = ref(false);
const nameVisiable = ref(false);
+const fixedColumns = ref(false);
+const tableHeight = ref("0px");
+const sortItemMap = ref({});
+const queryParamFilter = ref({});
+const sortProps = ref([]);
+const collapseVisible = ref(false);
const alert_value = ref([
{label: '1', value: true, elTagType: 'default', elTagClass: null},
{label: '0', value: false, elTagType: 'default', elTagClass: null}
@@ -1089,6 +1108,42 @@ function levelChange(value){
}
+function toggleFixedColumns() {
+ fixedColumns.value = !fixedColumns.value;
+}
+
+
+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';
+ });
+};
+
getList();
diff --git a/src/views/model/alert/logicconfig.vue b/src/views/model/alert/logicconfig.vue
index b01c83d..833f0ab 100644
--- a/src/views/model/alert/logicconfig.vue
+++ b/src/views/model/alert/logicconfig.vue
@@ -1,40 +1,49 @@
<template>
<div class="app-container">
- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="120px">
- <el-form-item label="逻辑编码" prop="logicCode">
- <el-select v-model="queryParams.logicCode" placeholder="请选择逻辑编码" clearable>
- <el-option
- v-for="dict in dc_alert_logic"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="参数变量类型" prop="paramValueType">
- <el-select v-model="queryParams.paramValueType" 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="note">
- <el-input
- v-model="queryParams.note"
- placeholder="请输入备注"
- clearable
- @keyup.enter="handleQuery"
- />
- </el-form-item>
- <el-form-item>
- <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-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="120px" class="my-custom-form">
+ <el-row>
+ <el-col :span="4">
+ <el-form-item label="参数变量类型" prop="paramValueType">
+ <el-select v-model="queryParams.paramValueType" 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="logicCode">
+ <el-select v-model="queryParams.logicCode" placeholder="请选择逻辑编码" clearable>
+ <el-option
+ v-for="dict in dc_alert_logic"
+ :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="note">
+ <el-input
+ v-model="queryParams.note"
+ placeholder="请输入备注"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ </el-col>
+ <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-form-item>
+ </el-col>
+ </el-row>
</el-form>
-
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
@@ -66,9 +75,8 @@
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
-
- <el-table v-loading="loading" :data="logicconfigList" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55" align="center" />
+ <el-table v-loading="loading" :data="logicconfigList" @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="id" />
<el-table-column label="逻辑编码" align="center" prop="logicCode">
<template #default="scope">
@@ -81,7 +89,12 @@
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="note" />
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width" :width="200" :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"
@@ -103,42 +116,13 @@
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
+ class="paddingBothLeftRight"
/>
<!-- 添加或修改告警逻辑对话框 -->
<el-dialog :title="title" v-model="open" width="800px" append-to-body>
<el-form ref="logicconfigRef" :model="form" :rules="rules" label-width="120px">
-<el-row>
- <el-col :span="12">
- <el-form-item label="逻辑编码" prop="logicCode">
- <el-select v-model="form.logicCode" placeholder="请选择逻辑编码">
- <el-option
- v-for="dict in dc_alert_logic"
- :key="dict.value"
- :label="dict.label"
-:value="dict.value" ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="参数变量类型" prop="paramValueType">
- <el-select v-model="form.paramValueType" placeholder="请选择参数变量类型">
- <el-option
- v-for="dict in dc_param_value_type"
- :key="dict.value"
- :label="dict.label"
-:value="dict.value" ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="备注" prop="note">
- <el-input v-model="form.note" placeholder="请输入备注" />
- </el-form-item>
- </el-col>
-
- </el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
@@ -149,10 +133,12 @@
</el-dialog>
</div>
</template>
-
+<style lang="scss" >
+ @import "@/assets/styles/self-defined.scss";
+</style>
<script setup name="Logicconfig">
import { listLogicconfig, getLogicconfig, delLogicconfig, addLogicconfig, updateLogicconfig } from "@/api/model/logicconfig";
-
+import lock from "@/assets/icons/svg/lock.svg";
const { proxy } = getCurrentInstance();
const { dc_alert_logic, dc_param_value_type } = proxy.useDict('dc_alert_logic', 'dc_param_value_type');
@@ -165,7 +151,13 @@ const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
-
+const fixedColumns = ref(false);
+const tableHeight = ref("0px");
+const sortItemMap = ref({});
+const queryParamFilter = ref({});
+const sortProps = ref([]);
+const collapseVisible = ref(false);
+const editName = ref("更多筛选项");
const data = reactive({
form: {},
queryParams: {
@@ -294,5 +286,41 @@ function handleExport() {
}, `logicconfig_${new Date().getTime()}.xlsx`)
}
+
+function toggleFixedColumns() {
+ fixedColumns.value = !fixedColumns.value;
+}
+
+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';
+ });
+};
+
getList();
</script>
diff --git a/src/views/model/alert/method.vue b/src/views/model/alert/method.vue
index 19c8254..d1bf495 100644
--- a/src/views/model/alert/method.vue
+++ b/src/views/model/alert/method.vue
@@ -1,6 +1,6 @@
<template>
<div class="app-container">
- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
+ <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px" class="my-custom-form">
<el-row>
<el-col :span="4">
<el-form-item label="策略名称" prop="methodName">
@@ -24,7 +24,7 @@
</el-select>
</el-form-item>
</el-col>
- <el-col :span="4">
+ <el-col :span="6">
<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>
@@ -64,8 +64,8 @@
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
- <el-table v-loading="loading" :data="methodList" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55" align="center" />
+ <el-table v-loading="loading" :data="methodList" @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="id" />
<el-table-column label="策略名称" align="center" prop="methodName" />
<el-table-column label="是否有效" align="center" prop="flagEnabled" >
@@ -73,7 +73,12 @@
<dict-tag :options="flagEnabledTable" :value="scope.row.flagEnabled"/>
</template>
</el-table-column>
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width" :width="200" :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"
@@ -95,6 +100,7 @@
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
+ class="paddingBothLeftRight"
/>
<!-- 添加或修改告警方式对话框 -->
@@ -136,9 +142,8 @@
</style>
<script setup name="Method">
import { listMethod, getMethod, delMethod, addMethod, updateMethod } from "@/api/model/method";
-
+import lock from "@/assets/icons/svg/lock.svg";
const { proxy } = getCurrentInstance();
-
const methodList = ref([]);
const open = ref(false);
const loading = ref(true);
@@ -148,6 +153,13 @@ const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
+const fixedColumns = ref(false);
+const tableHeight = ref("0px");
+const sortItemMap = ref({});
+const queryParamFilter = ref({});
+const sortProps = ref([]);
+const collapseVisible = ref(false);
+const editName = ref("更多筛选项");
const flagEnabledTable = ref([
{label: '可用', value: 'true', elTagType: 'default', elTagClass: null},
{label: '不可用', value: 'false', elTagType: 'default', elTagClass: null}
@@ -282,5 +294,41 @@ function handleExport() {
}, `method_${new Date().getTime()}.xlsx`)
}
+function toggleFixedColumns() {
+ fixedColumns.value = !fixedColumns.value;
+}
+
+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';
+ });
+};
+
+
getList();
</script>
diff --git a/src/views/model/alert/model.vue b/src/views/model/alert/model.vue
index 203e682..3d3d38e 100644
--- a/src/views/model/alert/model.vue
+++ b/src/views/model/alert/model.vue
@@ -1,6 +1,6 @@
<template>
<div class="app-container">
- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="120px">
+ <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px" class="my-custom-form">
<el-row>
<el-col :span="4">
<el-form-item label="参数数据类型" prop="paramType">
@@ -14,6 +14,18 @@
</el-select>
</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="dict in flagEnabled"
+ :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
@@ -25,61 +37,57 @@
</el-form-item>
</el-col>
<el-col :span="4">
-
+ <el-form-item label="级别" prop="level">
+ <el-select v-model="form.level" placeholder="请选择告警级别">
+ <el-option
+ v-for="dict in dc_alert_level"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
+ <el-form-item label="运算符" prop="operator">
+ <el-select v-model="queryParams.operator" placeholder="请选择运算符" clearable>
+ <el-option
+ v-for="dict in operator_sign"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
+ <el-form-item label="名称" prop="name">
+ <el-input
+ v-model="queryParams.name"
+ placeholder="请输入名称"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
+ <el-form-item label="值" prop="value">
+ <el-input
+ v-model="queryParams.value"
+ placeholder="请输入值"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ </el-col>
+ <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-form-item>
</el-col>
</el-row>
-
-
- <el-form-item label="是否有效" prop="flagEnabled">
- <el-select v-model="queryParams.flagEnabled" placeholder="请选择是否有效" clearable>
- <el-option
- v-for="dict in flagEnabled"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="级别" prop="level">
- <el-select v-model="form.level" placeholder="请选择告警级别">
- <el-option
- v-for="dict in dc_alert_level"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="运算符" prop="operator">
- <el-select v-model="queryParams.operator" placeholder="请选择运算符" clearable>
- <el-option
- v-for="dict in operator_sign"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="名称" prop="name">
- <el-input
- v-model="queryParams.name"
- placeholder="请输入名称"
- clearable
- @keyup.enter="handleQuery"
- />
- </el-form-item>
- <el-form-item label="值" prop="value">
- <el-input
- v-model="queryParams.value"
- placeholder="请输入值"
- clearable
- @keyup.enter="handleQuery"
- />
- </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-form>
<el-row :gutter="10" class="mb8">
@@ -114,8 +122,8 @@
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
- <el-table ref="modelTable" v-loading="loading" :data="modelList" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55" align="center" />
+ <el-table ref="modelTable" v-loading="loading" :data="modelList" @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="id" />
<el-table-column label="参数数据类型" align="center" prop="paramType" >
<template #default="scope">
@@ -141,7 +149,12 @@
</el-table-column>
<el-table-column label="名称" align="center" prop="name" />
<el-table-column label="值" align="center" prop="value" />
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width" :width="200" :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"
@@ -163,6 +176,7 @@
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
+ class="paddingBothLeftRight"
/>
<!-- 添加或修改告警模版对话框 -->
@@ -266,6 +280,7 @@
<script setup name="Model">
import { listModel,listModelEnabledNoPage, getModel, delModel, addModel, updateModel } from "@/api/model/alertmodel";
import { ElMessageBox } from 'element-plus';
+import lock from "@/assets/icons/svg/lock.svg";
const { proxy } = getCurrentInstance();
const { dc_param_value_type,operator_sign,dc_alert_level } = proxy.useDict('dc_param_value_type','operator_sign','dc_alert_level');
const modelList = ref([]);
@@ -284,6 +299,13 @@ const codeVisiable = ref(true);
const sortVisiable = ref(true);
const operatorVisiable = ref(true);
const operatorDisabled = ref(false);
+const fixedColumns = ref(false);
+const tableHeight = ref("0px");
+const sortItemMap = ref({});
+const queryParamFilter = ref({});
+const sortProps = ref([]);
+const collapseVisible = ref(false);
+const editName = ref("更多筛选项");
const flagEnabled = ref([
{label: '有效', value: 1, elTagType: 'default', elTagClass: null},
{label: '无效', value: 0, elTagType: 'default', elTagClass: null}
@@ -598,6 +620,42 @@ function handleBlurFlagEnabled(value){
}
+function toggleFixedColumns() {
+ fixedColumns.value = !fixedColumns.value;
+}
+
+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';
+ });
+};
+
+
getList();
</script>
diff --git a/src/views/model/alert/policy.vue b/src/views/model/alert/policy.vue
index a45a946..2edac93 100644
--- a/src/views/model/alert/policy.vue
+++ b/src/views/model/alert/policy.vue
@@ -1,6 +1,6 @@
<template>
<div class="app-container">
- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
+ <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px" class="my-custom-form" >
<el-row>
<el-col :span="4">
<el-form-item label="数据类型" prop="paramType">
@@ -15,10 +15,10 @@
</el-form-item>
</el-col>
<el-col :span="4">
- <el-form-item label="开始值" prop="beginValue">
+ <el-form-item label="界限值" prop="beginValue">
<el-input
v-model="queryParams.beginValue"
- placeholder="请输入开始值"
+ placeholder="请输入界限值"
clearable
@keyup.enter="handleQuery"
/>
@@ -36,7 +36,7 @@
</el-select>
</el-form-item>
</el-col>
- <el-col :span="4">
+ <el-col :span="4" v-show="collapseVisible">
<el-form-item label="策略ID" prop="alertId">
<el-input
v-model="queryParams.alertId"
@@ -46,7 +46,7 @@
/>
</el-form-item>
</el-col>
- <el-col :span="4">
+ <el-col :span="4" v-show="collapseVisible">
<el-form-item label="状态值" prop="statusValue">
<el-input
v-model="queryParams.statusValue"
@@ -56,16 +56,14 @@
/>
</el-form-item>
</el-col>
- <el-col :span="4">
+ <el-col :span="4" v-show="collapseVisible">
<el-form-item label="状态类型" prop="statusType">
<el-select v-model="queryParams.statusType" placeholder="请选择状态类型" clearable>
<el-option label="请选择字典生成" value="" />
</el-select>
</el-form-item>
</el-col>
- </el-row>
- <el-row>
- <el-col :span="4">
+ <el-col :span="4" v-show="collapseVisible">
<el-form-item label="中台设备ID" prop="deviceId">
<el-input
v-model="queryParams.deviceId"
@@ -75,12 +73,12 @@
/>
</el-form-item>
</el-col>
- <el-col :span="4">
+ <el-col :span="4" v-show="collapseVisible">
<el-form-item label="排序" prop="sortId">
<el-input-number v-model="queryParams.sortId" :min="1" :max="1000" />
</el-form-item>
</el-col>
- <el-col :span="4">
+ <el-col :span="4" v-show="collapseVisible">
<el-form-item label="告警方式" prop="methodId">
<el-select v-model="queryParams.methodId" placeholder="请选择告警方式ID" clearable>
<el-option
@@ -92,10 +90,11 @@
</el-select>
</el-form-item>
</el-col>
- <el-col :span="4" class="textaligncenter">
+ <el-col :span="6" class="childTextAlignRight">
<el-form-item>
<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-form-item>
</el-col>
</el-row>
@@ -112,8 +111,8 @@
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
- <el-table v-loading="loading" :data="policyList" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55" align="center" />
+ <el-table v-loading="loading" :data="policyList" @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="id" />
<el-table-column label="设备名称" align="center" prop="deviceName" :width="120"/>
<el-table-column label="中台设备ID" align="center" prop="deviceId" />
@@ -144,20 +143,6 @@
<span>{{ getMethodName(scope.row.methodId) }}</span>
</template>
</el-table-column>
- <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
- <template #default="scope">
- <el-button
- type="text"
- icon="Edit"
- @click="handleUpdate(scope.row)"
- >修改</el-button>
- <el-button
- type="text"
- icon="Delete"
- @click="handleDelete(scope.row)"
- >删除</el-button>
- </template>
- </el-table-column> -->
</el-table>
<pagination
@@ -166,6 +151,7 @@
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
+ class="paddingBothLeftRight"
/>
<!-- 添加或修改参数值状态策略对话框 -->
@@ -255,6 +241,13 @@ const total = ref(0);
const title = ref("");
const methodList = ref([]);
const deviceUuid = ref("");
+const fixedColumns = ref(false);
+const tableHeight = ref("0px");
+const sortItemMap = ref({});
+const queryParamFilter = ref({});
+const sortProps = ref([]);
+const collapseVisible = ref(false);
+const editName = ref("更多筛选项");
const alertFlag = ref([
{label: '告警', value: 'true', elTagType: 'default', elTagClass: null},
{label: '不告警', value: 'false', elTagType: 'default', elTagClass: null}
@@ -347,23 +340,6 @@ function handleSelectionChange(selection) {
multiple.value = !selection.length;
}
-// /** 新增按钮操作 */
-// function handleAdd() {
-// reset();
-// open.value = true;
-// title.value = "添加参数值状态策略";
-// }
-
-// /** 修改按钮操作 */
-// function handleUpdate(row) {
-// reset();
-// const _id = row.id || ids.value
-// getPolicy(_id).then(response => {
-// form.value = response.data;
-// open.value = true;
-// title.value = "修改参数值状态策略";
-// });
-// }
/** 提交按钮 */
function submitForm() {
@@ -386,16 +362,6 @@ function submitForm() {
});
}
-// /** 删除按钮操作 */
-// function handleDelete(row) {
-// const _ids = row.id || ids.value;
-// proxy.$modal.confirm('是否确认删除参数值状态策略编号为"' + _ids + '"的数据项？').then(function() {
-// return delPolicy(_ids);
-// }).then(() => {
-// getList();
-// proxy.$modal.msgSuccess("删除成功");
-// }).catch(() => {});
-// }
/** 导出按钮操作 */
function handleExport() {
@@ -425,6 +391,43 @@ function getMethodName(methodId){
return methodNameTable;
}
+
+function toggleFixedColumns() {
+ fixedColumns.value = !fixedColumns.value;
+}
+
+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';
+ });
+};
+
+
initializeDeviceUuid();
getList();
getMethodList();
diff --git a/src/views/model/device/index.vue b/src/views/model/device/index.vue
index 306a1fc..8d097b3 100644
--- a/src/views/model/device/index.vue
+++ b/src/views/model/device/index.vue
@@ -23,7 +23,7 @@
</el-form-item>
</el-col>
<el-col :span="4">
- <el-form-item label="通讯来源类型" prop="deviceSource">
+ <el-form-item label="通讯来源类型" prop="deviceSourceId">
<el-select v-model="queryParams.deviceSourceId" placeholder="请选择通讯来源类型" clearable>
<el-option
v-for="dict in dc_device_source"
@@ -42,8 +42,6 @@
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>
@@ -128,8 +126,6 @@
/>
</el-form-item>
</el-col>
- <!-- </el-row>
- <el-row> -->
<el-col :span="4" v-show="collapseVisible">
<el-form-item label="经度" prop="lagValue">
<el-input
@@ -168,8 +164,6 @@
</el-col>
<el-col :span="2">
</el-col>
- <!-- </div>
- </el-collapse-transition> -->
<el-col :span="6">
<el-form-item class="childTextAlignRight">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -179,7 +173,6 @@
</el-col>
</el-row>
</el-form>
-
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
@@ -188,13 +181,6 @@
@click="handleAdd"
>新增</el-button>
</el-col>
- <!-- <el-col :span="1.5">
- <el-button
- type="success"
- icon="Edit"
- @click="handleUpdate"
- >修改</el-button>
- </el-col> -->
<el-col :span="1.5">
<el-button
type="success"
@@ -214,8 +200,8 @@
</el-row>
<el-table ref="deviceTable" v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange" @sort-change="sortChange" @filter-change="filterChange" :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="150"/>
- <el-table-column label="设备名称" align="center" prop="deviceName" :width="120" sortable/>
+ <el-table-column label="中台设备编码" align="center" prop="centerDeviceCode" :width="150" sortable/>
+ <el-table-column label="设备名称" align="center" prop="deviceName" :width="150" sortable/>
<el-table-column label="通讯来源类型" align="center" prop="deviceSource" :width="150" column-key="deviceSource" filter-placement="bottom-end"
:filters="getfilterNameItem('deviceSource')" :filter-method="filterMethod" sortable/>
<el-table-column label="是否可用" align="center" prop="enabledFlag" :width="120" column-key="enabledFlag" filter-placement="bottom-end"
@@ -249,10 +235,10 @@
:filters="getfilterNameItem('deviceModelId')" :filter-method="filterMethod" sortable>
</el-table-column>
<el-table-column label="租户号" align="center" prop="tentantId" :width="120" sortable/>
- <el-table-column label="设备分组" align="center" prop="deviceGroupName" :width="120" column-key="deviceGroupName" filter-placement="bottom-end"
+ <el-table-column label="设备分组" align="center" prop="deviceGroupName" :width="150" column-key="deviceGroupName" filter-placement="bottom-end"
:filters="getfilterNameItem('deviceGroupName')" :filter-method="filterMethod" sortable/>
<el-table-column label="设备排序" align="center" prop="sort" :width="120" sortable/>
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" :width="300" :fixed="fixedColumns?'right':false">
+ <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>
@@ -283,8 +269,8 @@
v-model:page="params.pageNum"
v-model:limit="params.pageSize"
@pagination="getList"
+ class="paddingBothLeftRight"
/>
-
<!-- 添加或修改设备信息对话框 -->
<el-dialog :title="title" v-model="open" width="800px" append-to-body>
<el-form ref="deviceRef" :model="form" :rules="rules" label-width="125px">
@@ -305,8 +291,8 @@
</el-form-item>
</el-col>
<el-col :span="12">
- <el-form-item label="通讯来源类型" prop="deviceSource">
- <el-select v-model="form.deviceSource" placeholder="请选择是否可用" @change="deviceSourceChange">
+ <el-form-item label="通讯来源类型" prop="deviceSourceId">
+ <el-select v-model="form.deviceSourceId" placeholder="请选择是否可用" @change="deviceSourceChange">
<el-option
v-for="dict in dc_device_source"
:key="dict.value"
@@ -488,12 +474,11 @@ const collapseVisible = ref(false);
const editName = ref("更多筛选项");
const deptOptions = ref([]);
const disabled = ref(false);
-const fixedColumns = ref(true);
+const fixedColumns = ref(false);
const tableHeight = ref("0px");
const sortItemMap = ref({});
const queryParamFilter = ref({});
const sortProps = ref([]);
-
const enabledFlag = ref([
{label: '可用', value: true, elTagType: 'default', elTagClass: null},
{label: '不可用', value: false, elTagType: 'default', elTagClass: null}
@@ -510,7 +495,6 @@ const alertEnabledTable = ref([
{label: '告警', value: 'true', elTagType: 'default', elTagClass: null},
{label: '不告警', value: 'false', elTagType: 'default', elTagClass: null}
]);
-
const data = reactive({
form: {},
params: {
@@ -750,30 +734,25 @@ function selectDept(val){
function deviceSourceChange(val){
form.value.deviceSourceId=val;
+ dc_device_source.value.forEach(item=>{
+ form.value.deviceSource=item.label;
+ })
+}
+
+function deviceTypeChange(val){
+ let flag = false;
+ dc_device_type.value.forEach(item=>{
+ if(item.value==val){
+ flag = true;
+ form.value.deviceType=item.label;
+ }
+ })
}
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);
@@ -806,8 +785,6 @@ const calculateTableHeight = () => {
};
function getfilterNameItem(value){
- console.log("sortItemMap");
- console.log(sortItemMap);
let result = '';
let resultItem = new Object();
if(value==='enabledFlag'){
diff --git a/src/views/model/paramclass/index.vue b/src/views/model/paramclass/index.vue
index f38176d..2371e9e 100644
--- a/src/views/model/paramclass/index.vue
+++ b/src/views/model/paramclass/index.vue
@@ -1,253 +1,384 @@
-<template>
- <div class="app-container">
- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
- <el-form-item label="类别" prop="classType">
- <el-select v-model="queryParams.classType" placeholder="请选择类别" clearable>
- <el-option v-for="dict in dc_class_type" :key="dict.value" :label="dict.label" :value="dict.value" />
- </el-select>
- </el-form-item>
- <!-- <el-form-item label="分区" prop="devicePartion">
- <el-select v-model="queryParams.devicePartion" placeholder="请选择分区" clearable>
- <el-option v-for="dict in dc_device_partion" :key="dict.value" :label="dict.label" :value="dict.value" />
- </el-select>
- </el-form-item> -->
- <el-form-item>
- <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-form>
-
- <el-row :gutter="10" class="mb8">
- <el-col :span="1.5">
- <el-button type="success" icon="Plus" @click="handleAdd">新增</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button type="success" icon="Edit" @click="handleUpdate">修改</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button type="success" icon="Delete" @click="handleDelete">删除</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button type="warning" icon="Download" @click="handleExport">导出</el-button>
- </el-col>
- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
- </el-row>
-
- <el-table v-loading="loading" :data="paramclassList" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55" align="center" />
- <el-table-column label="ID" align="center" width="55" prop="id" />
- <el-table-column label="参数名称" align="center" prop="paramClassName" />
- <el-table-column label="参数编码" align="center" prop="paramClassCode" />
- <el-table-column label="类别" align="center" prop="classType">
- <template #default="scope">
- <dict-tag :options="dc_class_type" :value="scope.row.classType" />
- </template>
- </el-table-column>
- <!-- <el-table-column label="分区" align="center" prop="devicePartion">
- <template #default="scope">
- <dict-tag :options="dc_device_partion" :value="scope.row.devicePartion" />
- </template>
- </el-table-column> -->
- <el-table-column label="备注" align="center" prop="note" />
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
- <template #default="scope">
- <el-button type="text" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
- <el-button type="text" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
- </template>
- </el-table-column>
- </el-table>
-
- <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
- @pagination="getList" />
-
- <!-- 添加或修改参数模型信息对话框 -->
- <el-dialog :title="title" v-model="open" width="500px" append-to-body>
- <el-form ref="paramclassRef" :model="form" :rules="rules" label-width="80px">
-
- <el-row>
- <el-col :span="24">
- <el-form-item label="参数名称" prop="paramClassName">
- <el-input v-model="form.paramClassName" placeholder="请输入参数名称" maxlength="30" />
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="参数编码" prop="paramClassCode">
- <el-input v-model="form.paramClassCode" placeholder="请输入参数编码" maxlength="30" />
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="类别" prop="classType">
- <el-select v-model="form.classType" placeholder="请选择类别">
- <el-option v-for="dict in dc_class_type" :key="dict.value" :label="dict.label"
- :value="dict.value"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <!-- <el-col :span="24">
- <el-form-item label="分区" prop="devicePartion">
- <el-select v-model="form.devicePartion" placeholder="请选择分区">
- <el-option v-for="dict in dc_device_partion" :key="dict.value" :label="dict.label"
- :value="dict.value"></el-option>
- </el-select>
- </el-form-item>
- </el-col> -->
-
- </el-row>
- </el-form>
- <template #footer>
- <div class="dialog-footer">
- <el-button type="primary" @click="submitForm">确 定</el-button>
- <el-button @click="cancel">取 消</el-button>
- </div>
- </template>
- </el-dialog>
- </div>
-</template>
-
-<script setup name="Paramclass">
-import { listParamclass, getParamclass, delParamclass, addParamclass, updateParamclass } from "@/api/model/paramclass";
-
-const { proxy } = getCurrentInstance();
-const { dc_class_type, dc_device_partion } = proxy.useDict('dc_class_type', 'dc_device_partion');
-
-const paramclassList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-
-const data = reactive({
- form: {},
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- createBy: null,
- createTime: null,
- paramClassName: null,
- paramClassCode: null,
- classType: null,
- devicePartion: null,
- },
- rules: {
- }
-});
-
-const { queryParams, form, rules } = toRefs(data);
-
-/** 查询参数模型信息列表 */
-function getList() {
- loading.value = true;
- listParamclass(queryParams.value).then(response => {
- paramclassList.value = response.rows;
- total.value = response.total;
- loading.value = false;
- });
-}
-
-// 取消按钮
-function cancel() {
- open.value = false;
- reset();
-}
-
-// 表单重置
-function reset() {
- form.value = {
- tentantId: null,
- revision: null,
- createBy: null,
- createTime: null,
- updatedBy: null,
- updatedTime: null,
- id: null,
- paramClassName: null,
- paramClassCode: null,
- classType: null,
- devicePartion: null,
- note: null
- };
- proxy.resetForm("paramclassRef");
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
- queryParams.value.pageNum = 1;
- getList();
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
- proxy.resetForm("queryRef");
- handleQuery();
-}
-
-// 多选框选中数据
-function handleSelectionChange(selection) {
- ids.value = selection.map(item => item.id);
- single.value = selection.length != 1;
- multiple.value = !selection.length;
-}
-
-/** 新增按钮操作 */
-function handleAdd() {
- reset();
- open.value = true;
- title.value = "添加参数模型信息";
-}
-
-/** 修改按钮操作 */
-function handleUpdate(row) {
- reset();
- const _id = row.id || ids.value
- getParamclass(_id).then(response => {
- form.value = response.data;
- open.value = true;
- title.value = "修改参数模型信息";
- });
-}
-
-/** 提交按钮 */
-function submitForm() {
- proxy.$refs["paramclassRef"].validate(valid => {
- if (valid) {
- if (form.value.id != null) {
- updateParamclass(form.value).then(response => {
- proxy.$modal.msgSuccess("修改成功");
- open.value = false;
- getList();
- });
- } else {
- addParamclass(form.value).then(response => {
- proxy.$modal.msgSuccess("新增成功");
- open.value = false;
- getList();
- });
- }
- }
- });
-}
-
-/** 删除按钮操作 */
-function handleDelete(row) {
- const _ids = row.id || ids.value;
- proxy.$modal.confirm('是否确认删除参数模型信息编号为"' + _ids + '"的数据项？').then(function () {
- return delParamclass(_ids);
- }).then(() => {
- getList();
- proxy.$modal.msgSuccess("删除成功");
- }).catch(() => { });
-}
-
-/** 导出按钮操作 */
-function handleExport() {
- proxy.download('system/paramclass/export', {
- ...queryParams.value
- }, `paramclass_${new Date().getTime()}.xlsx`)
-}
-
-getList();
-</script>
+<template>
+ <div class="app-container">
+ <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px" class="my-custom-form">
+ <el-row>
+ <el-col :span="4">
+ <el-form-item label="参数名称" prop="paramClassName">
+ <el-input
+ v-model="queryParams.paramClassName"
+ placeholder="请输入参数名称"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4">
+ <el-form-item label="参数编码" prop="paramClassCode">
+ <el-input
+ v-model="queryParams.paramClassCode"
+ placeholder="请输入参数编码"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4">
+ <el-form-item label="类别" prop="classType">
+ <el-select v-model="queryParams.classType" placeholder="请选择类别" clearable>
+ <el-option
+ v-for="dict in dc_class_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="paramUnit">
+ <el-select v-model="queryParams.paramUnit" placeholder="请选择单位" clearable>
+ <el-option
+ v-for="dict in dc_param_uint_type"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.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
+ type="success"
+ icon="Plus"
+ @click="handleAdd"
+ >新增</el-button>
+ </el-col>
+ <el-col :span="1.5">
+ <el-button
+ type="success"
+ icon="Edit"
+ @click="handleUpdate"
+ >修改</el-button>
+ </el-col>
+ <el-col :span="1.5">
+ <el-button
+ type="success"
+ icon="Delete"
+ @click="handleDelete"
+ >删除</el-button>
+ </el-col>
+ <el-col :span="1.5">
+ <el-button
+ type="warning"
+ icon="Download"
+ @click="handleExport"
+ >导出</el-button>
+ </el-col>
+ <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+ </el-row>
+
+ <el-table v-loading="loading" :data="paramclassList" @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="paramClassName" />
+ <el-table-column label="参数编码" align="center" prop="paramClassCode" />
+ <el-table-column label="类别" align="center" prop="classType">
+ <template #default="scope">
+ <dict-tag :options="dc_class_type" :value="scope.row.classType"/>
+ </template>
+ </el-table-column>
+ <el-table-column label="单位" align="center" prop="paramUnit">
+ <template #default="scope">
+ <dict-tag :options="dc_param_uint_type" :value="scope.row.paramUnit"/>
+ </template>
+ </el-table-column>
+ <el-table-column label="备注" align="center" prop="note" />
+ <el-table-column label="主键" align="center" prop="id" />
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width" :width="200" :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"
+ icon="Edit"
+ @click="handleUpdate(scope.row)"
+ >修改</el-button>
+ <el-button
+ type="text"
+ icon="Delete"
+ @click="handleDelete(scope.row)"
+ >删除</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <pagination
+ v-show="total>0"
+ :total="total"
+ v-model:page="queryParams.pageNum"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ class="paddingBothLeftRight"
+ />
+
+ <!-- 添加或修改参数模型信息对话框 -->
+ <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+ <el-form ref="paramclassRef" :model="form" :rules="rules" label-width="80px">
+
+<el-row>
+ <el-col :span="12">
+ <el-form-item label="参数名称" prop="paramClassName">
+ <el-input v-model="form.paramClassName" placeholder="请输入参数名称" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="参数编码" prop="paramClassCode">
+ <el-input v-model="form.paramClassCode" placeholder="请输入参数编码" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="类别" prop="classType">
+ <el-select v-model="form.classType" placeholder="请选择类别">
+ <el-option
+ v-for="dict in dc_class_type"
+ :key="dict.value"
+ :label="dict.label"
+:value="dict.value" ></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="单位" prop="paramUnit">
+ <el-select v-model="form.paramUnit" placeholder="请选择单位">
+ <el-option
+ v-for="dict in dc_param_uint_type"
+ :key="dict.value"
+ :label="dict.label"
+:value="dict.value" ></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+
+ </el-row>
+ </el-form>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button type="primary" @click="submitForm">确 定</el-button>
+ <el-button @click="cancel">取 消</el-button>
+ </div>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+<style lang="scss" >
+ @import "@/assets/styles/self-defined.scss";
+</style>
+<script setup name="Paramclass">
+import { listParamclass, getParamclass, delParamclass, addParamclass, updateParamclass } from "@/api/model/paramclass";
+import lock from "@/assets/icons/svg/lock.svg";
+const { proxy } = getCurrentInstance();
+const { dc_class_type, dc_param_uint_type } = proxy.useDict('dc_class_type', 'dc_param_uint_type');
+
+const paramclassList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+const fixedColumns = ref(false);
+const tableHeight = ref("0px");
+const sortItemMap = ref({});
+const queryParamFilter = ref({});
+const sortProps = ref([]);
+const collapseVisible = ref(false);
+const data = reactive({
+ form: {},
+ queryParams: {
+ pageNum: 1,
+ pageSize: 10,
+ paramClassName: null,
+ paramClassCode: null,
+ classType: null,
+ paramUnit: null,
+ note: null,
+ },
+ rules: {
+ }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询参数模型信息列表 */
+function getList() {
+ loading.value = true;
+ listParamclass(queryParams.value).then(response => {
+ paramclassList.value = response.rows;
+ total.value = response.total;
+ loading.value = false;
+ });
+}
+
+// 取消按钮
+function cancel() {
+ open.value = false;
+ reset();
+}
+
+// 表单重置
+function reset() {
+ form.value = {
+ paramClassName: null,
+ paramClassCode: null,
+ classType: null,
+ paramUnit: null,
+ note: null,
+ tentantId: null,
+ version: null,
+ createBy: null,
+ createTime: null,
+ updateBy: null,
+ updateTime: null,
+ deptId: null,
+ userId: null,
+ deleteBy: null,
+ deleteTime: null,
+ id: null
+ };
+ proxy.resetForm("paramclassRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+ queryParams.value.pageNum = 1;
+ getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+ proxy.resetForm("queryRef");
+ handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+ ids.value = selection.map(item => item.id);
+ single.value = selection.length != 1;
+ multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+ reset();
+ open.value = true;
+ title.value = "添加参数模型信息";
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+ reset();
+ const _id = row.id || ids.value
+ getParamclass(_id).then(response => {
+ form.value = response.data;
+ open.value = true;
+ title.value = "修改参数模型信息";
+ });
+}
+
+/** 提交按钮 */
+function submitForm() {
+ proxy.$refs["paramclassRef"].validate(valid => {
+ if (valid) {
+ if (form.value.id != null) {
+ updateParamclass(form.value).then(response => {
+ proxy.$modal.msgSuccess("修改成功");
+ open.value = false;
+ getList();
+ });
+ } else {
+ addParamclass(form.value).then(response => {
+ proxy.$modal.msgSuccess("新增成功");
+ open.value = false;
+ getList();
+ });
+ }
+ }
+ });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+ const _ids = row.id || ids.value;
+ proxy.$modal.confirm('是否确认删除参数模型信息编号为"' + _ids + '"的数据项？').then(function() {
+ return delParamclass(_ids);
+ }).then(() => {
+ getList();
+ proxy.$modal.msgSuccess("删除成功");
+ }).catch(() => {});
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+ proxy.download('model/dcModelParamclass/export', {
+ ...queryParams.value
+ }, `paramclass_${new Date().getTime()}.xlsx`)
+}
+
+
+
+function toggleFixedColumns() {
+ fixedColumns.value = !fixedColumns.value;
+}
+
+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';
+ });
+};
+
+
+getList();
+</script>
diff --git a/src/views/model/params/index.vue b/src/views/model/params/index.vue
index 2656065..2a27039 100644
--- a/src/views/model/params/index.vue
+++ b/src/views/model/params/index.vue
@@ -1,32 +1,48 @@
<template>
<div class="app-container">
- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="120px">
- <el-form-item label="中台设备UUID" prop="deviceUuid">
- <el-input
- v-model="queryParams.deviceUuid"
- placeholder="请输入中台设备UUID"
- :disabled="uuidDisabled"
- @keyup.enter="handleQuery"
- />
- </el-form-item>
- <el-form-item label="参数名称" prop="paramName">
- <el-input
- v-model="queryParams.paramName"
- placeholder="请输入参数名称"
- clearable
- @keyup.enter="handleQuery"
- />
- </el-form-item>
- <el-form-item label="参数编码" prop="paramCode">
- <el-input
- v-model="queryParams.paramCode"
- placeholder="请输入参数编码"
- clearable
- @keyup.enter="handleQuery"
- />
- </el-form-item>
- <el-collapse-transition>
- <div v-show="collapseVisible">
+ <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="120px" class="my-custom-form">
+ <el-row>
+ <el-col :span="4">
+ <el-form-item label="中台设备UUID" prop="deviceUuid">
+ <el-input
+ v-model="queryParams.deviceUuid"
+ placeholder="请输入中台设备UUID"
+ :disabled="uuidDisabled"
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4">
+ <el-form-item label="参数名称" prop="paramName">
+ <el-input
+ v-model="queryParams.paramName"
+ placeholder="请输入参数名称"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4">
+ <el-form-item label="参数编码" prop="paramCode">
+ <el-input
+ v-model="queryParams.paramCode"
+ placeholder="请输入参数编码"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4">
+ <el-form-item label="参数编码" prop="paramCode">
+ <el-input
+ v-model="queryParams.paramCode"
+ placeholder="请输入参数编码"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
<el-form-item label="数据类型" prop="paramType">
<el-select v-model="queryParams.paramType" placeholder="请选择数据类型" clearable>
<el-option
@@ -37,11 +53,15 @@
/>
</el-select>
</el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
<el-form-item label="是否可控" prop="contrlFlag">
<el-select v-model="queryParams.contrlFlag" placeholder="请选择是否可控" clearable>
<el-option label="请选择字典生成" value="" />
</el-select>
</el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
<el-form-item label="参数单位" prop="contrlType">
<el-select v-model="queryParams.contrlType" placeholder="请选择参数单位" clearable>
<el-option
@@ -52,11 +72,15 @@
/>
</el-select>
</el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
<el-form-item label="是否有效" prop="enabled">
<el-select v-model="queryParams.enabled" placeholder="请选择是否有效" clearable>
<el-option label="请选择字典生成" value="" />
</el-select>
</el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
<el-form-item label="设置值" prop="setDefautvalue">
<el-input
v-model="queryParams.setDefautvalue"
@@ -65,6 +89,8 @@
@keyup.enter="handleQuery"
/>
</el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
<el-form-item label="偏移量" prop="setAdjustvalue">
<el-input
v-model="queryParams.setAdjustvalue"
@@ -73,6 +99,8 @@
@keyup.enter="handleQuery"
/>
</el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
<el-form-item label="验证范围" prop="validateScope">
<el-input
v-model="queryParams.validateScope"
@@ -81,6 +109,8 @@
@keyup.enter="handleQuery"
/>
</el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
<el-form-item label="全局统一编码" prop="globalCode">
<el-input
v-model="queryParams.globalCode"
@@ -89,16 +119,22 @@
@keyup.enter="handleQuery"
/>
</el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
<el-form-item label="参数模版ID" prop="paramModelId">
<el-select v-model="queryParams.paramModelId" placeholder="请选择参数模版ID" clearable>
<el-option label="请选择字典生成" value="" />
</el-select>
</el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
<el-form-item label="分区(字典)" prop="partion">
<el-select v-model="queryParams.partion" placeholder="请选择分区(字典)" clearable>
<el-option label="请选择字典生成" value="" />
</el-select>
</el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
<el-form-item label="plc地址" prop="plcAdr">
<el-input
v-model="queryParams.plcAdr"
@@ -107,15 +143,16 @@
@keyup.enter="handleQuery"
/>
</el-form-item>
- </div>
- </el-collapse-transition>
- <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-button @click="toggleCollapse">{{editName}}</el-button>
- </el-form-item>
+ </el-col>
+ <el-col :span="6">
+ <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-button @click="toggleCollapse">{{editName}}</el-button>
+ </el-form-item>
+ </el-col>
+ </el-row>
</el-form>
-
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
@@ -148,48 +185,53 @@
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
- <el-table v-loading="loading" :data="paramsList" @selection-change="handleSelectionChange">
+ <el-table ref="deviceParamTable" v-loading="loading" :data="paramsList" @selection-change="handleSelectionChange" @sort-change="sortChange" @filter-change="filterChange" :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="id" />
<el-table-column label="中台设备UUID" align="center" prop="deviceUuid" :width="120"/> -->
- <el-table-column label="参数名称" align="center" prop="paramName" :width="120"/>
- <el-table-column label="参数编码" align="center" prop="paramCode" :width="120"/>
- <el-table-column label="数据类型" align="center" prop="paramType" :width="120">
+ <el-table-column label="参数名称" align="center" prop="paramName" :width="130" sortable/>
+ <el-table-column label="参数编码" align="center" prop="paramCode" :width="120" sortable/>
+ <el-table-column label="数据类型" align="center" prop="paramType" column-key="paramType" filter-placement="bottom-end"
+ :filters="getfilterNameItem('paramType')" :filter-method="filterMethod" :width="120" sortable>
<template #default="scope">
<dict-tag :options="dc_param_value_type" :value="scope.row.paramType"/>
</template>
</el-table-column>
- <el-table-column label="是否可控" align="center" prop="contrlFlag" :width="120">
+ <el-table-column label="是否可控" align="center" prop="contrlFlag" column-key="contrlFlag" filter-placement="bottom-end"
+ :filters="getfilterNameItem('contrlFlag')" :filter-method="filterMethod" :width="120" sortable>
<template #default="scope">
<dict-tag :options="contrlFlagTable" :value="scope.row.contrlFlag"/>
</template>
</el-table-column>
- <el-table-column label="参数单位" align="center" prop="contrlType" :width="120">
- <template #default="scope">
- <dict-tag :options="dc_param_uint_type" :value="scope.row.contrlType"/>
- </template>
- </el-table-column>
- <el-table-column label="是否有效" align="center" prop="enabled" :width="120">
+ <el-table-column label="是否有效" align="center" prop="enabled" column-key="enabled" filter-placement="bottom-end"
+ :filters="getfilterNameItem('enabled')" :filter-method="filterMethod" :width="120" sortable>
<template #default="scope">
<dict-tag :options="enabledTable" :value="scope.row.enabled"/>
</template>
</el-table-column>
- <el-table-column label="设置值" align="center" prop="setDefautvalue" :width="120"/>
- <el-table-column label="偏移量" align="center" prop="setAdjustvalue" :width="120"/>
- <el-table-column label="验证范围" align="center" prop="validateScope" :width="120"/>
- <el-table-column label="全局统一编码" align="center" prop="globalCode" :width="120"/>
- <el-table-column label="参数模版" align="center" prop="paramModelId" :width="120">
+ <el-table-column label="设置值" align="center" prop="setDefautvalue" :width="120" sortable/>
+ <el-table-column label="偏移量" align="center" prop="setAdjustvalue" :width="120" sortable/>
+ <el-table-column label="验证范围" align="center" prop="validateScope" :width="120" sortable/>
+ <el-table-column label="全局统一编码" align="center" prop="globalCode" :width="150" sortable/>
+ <el-table-column label="参数模版" align="center" prop="paramModelId" column-key="paramModelId" filter-placement="bottom-end"
+ :filters="getfilterNameItem('paramModelId')" :filter-method="filterMethod" :width="120" sortable>
<template #default="scope">
<span>{{ getParamModelName(scope.row.paramModelId) }}</span>
</template>
</el-table-column>
- <el-table-column label="分区(字典)" align="center" prop="partion" :width="120">
+ <el-table-column label="分区(字典)" align="center" prop="partion" column-key="partion" filter-placement="bottom-end"
+ :filters="getfilterNameItem('partion')" :filter-method="filterMethod" :width="130" sortable>
<template #default="scope">
<dict-tag :options="dc_device_partion" :value="scope.row.partion"/>
</template>
</el-table-column>
- <el-table-column label="plc地址" align="center" prop="plcAdr" :width="120"/>
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" :width="200" fixed="right">
+ <el-table-column label="plc地址" align="center" prop="plcAdr" :width="120" sortable/>
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width" :width="200" :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"
@@ -208,9 +250,10 @@
<pagination
v-show="total>0"
:total="total"
- v-model:page="queryParams.pageNum"
- v-model:limit="queryParams.pageSize"
+ v-model:page="params.pageNum"
+ v-model:limit="params.pageSize"
@pagination="getList"
+ class="paddingBothLeftRight"
/>
<!-- 添加或修改设备参数明细对话框 -->
@@ -268,18 +311,6 @@
</el-select>
</el-form-item>
</el-col>
- <el-col :span="12">
- <el-form-item label="参数单位" prop="contrlType">
- <el-select v-model="form.contrlType" placeholder="请选择参数单位">
- <el-option
- v-for="dict in dc_param_uint_type"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value">
- </el-option>
- </el-select>
- </el-form-item>
- </el-col>
<el-col :span="12">
<el-form-item label="是否有效" prop="enabled">
<el-select v-model="form.enabled" placeholder="请选择是否有效">
@@ -343,8 +374,9 @@
@import "@/assets/styles/self-defined.scss";
</style>
<script setup name="Params">
-import { listParams, getParams, delParams, addParams, updateParams } from "@/api/model/params";
+import { listParams, getParams, delParams, addParams, updateParams,listWithFilterColumn } from "@/api/model/params";
import { listParamclass } from "@/api/model/paramclass";
+import lock from "@/assets/icons/svg/lock.svg";
const { proxy } = getCurrentInstance();
const router = useRouter();
const { dc_param_uint_type, dc_param_value_type, dc_device_partion } = proxy.useDict('dc_param_uint_type', 'dc_param_value_type', 'dc_device_partion');
@@ -366,8 +398,12 @@ const paramModelDisabled = ref(false);
const partionDisabled = ref(false);
const paramClassCodeSeleted = ref("");
const deviceUuid = router.currentRoute._value.query.deviceUuid;
-const deviceCode = router.currentRoute._value.query.deviceCode;
const deviceUuidDisabled = ref(true);
+const fixedColumns = ref(false);
+const tableHeight = ref("0px");
+const sortItemMap = ref({});
+const queryParamFilter = ref({});
+const sortProps = ref([]);
const contrlFlag = ref([
{label: '可控', value: true, elTagType: 'default', elTagClass: null},
{label: '不可控', value: false, elTagType: 'default', elTagClass: null}
@@ -389,9 +425,11 @@ const data = reactive({
contrlFlag:contrlFlag,
enabled:enabled,
},
- queryParams: {
+ params: {
pageNum: 1,
pageSize: 10,
+ },
+ queryParams: {
deviceUuid: null,
paramName: null,
paramCode: null,
@@ -405,8 +443,7 @@ const data = reactive({
globalCode: null,
paramModelId: null,
partion: null,
- plcAdr: null,
- controllab: null
+ plcAdr: null
},
rules: {
deviceUuid: [
@@ -445,27 +482,57 @@ const data = reactive({
},
});
-const { queryParams, form, rules } = toRefs(data);
+const { queryParams, form, rules, params } = toRefs(data);
/** 查询设备参数明细列表 */
function getList() {
loading.value = true;
if(deviceUuid != null && deviceUuid != undefined && deviceUuid != ""){
queryParams.value.deviceUuid = deviceUuid;
- listParams(queryParams.value).then(response => {
- paramsList.value = response.rows;
- total.value = response.total;
+ let param = {
+ "obj":queryParams.value,
+ "params":queryParamFilter.value,
+ "sort":sortProps.value,
+ "pageNum": params.value.pageNum,
+ "pageSize": params.value.pageSize,
+ }
+ listWithFilterColumn(param).then(response => {
+ paramsList.value = response.data.tableData.rows;
+ total.value = response.data.tableData.total;
+ sortItemMap.value = response.data.filter;
+ queryParamFilter.value = new Object();
loading.value = false;
});
+ // listParams(queryParams.value).then(response => {
+ // paramsList.value = response.rows;
+ // total.value = response.total;
+ // loading.value = false;
+ // });
}else{
- listParams(queryParams.value).then(response => {
- paramsList.value = response.rows;
- total.value = response.total;
+ let param = {
+ "obj":queryParams.value,
+ "params":queryParamFilter.value,
+ "sort":sortProps.value,
+ "pageNum": params.value.pageNum,
+ "pageSize": params.value.pageSize,
+ }
+ listWithFilterColumn(param).then(response => {
+ paramsList.value = response.data.tableData.rows;
+ total.value = response.data.tableData.total;
+ sortItemMap.value = response.data.filter;
+ queryParamFilter.value = new Object();
loading.value = false;
});
+ // listParams(queryParams.value).then(response => {
+ // paramsList.value = response.rows;
+ // total.value = response.total;
+ // loading.value = false;
+ // });
}
+
}
+
// 取消按钮
function cancel() {
open.value = false;
@@ -499,21 +566,24 @@ function reset() {
globalCode: null,
paramModelId: null,
partion: null,
- plcAdr: null,
- controllab: null
+ plcAdr: null
};
proxy.resetForm("paramsRef");
}
/** 搜索按钮操作 */
function handleQuery() {
- queryParams.value.pageNum = 1;
+ params.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef");
+ proxy.$refs.deviceParamTable.clearSort();
+ proxy.$refs.deviceParamTable.clearFilter();
+ queryParamFilter.value = new Object();
+ sortProps.value = new Array();
handleQuery();
}
@@ -529,6 +599,8 @@ function handleAdd() {
reset();
form.value.deviceUuid = deviceUuid;
paramClassCodeSeleted.value = "";
+ paramModelDisabled.value = false;
+ partionDisabled.value = false;
open.value = true;
title.value = "添加设备参数明细";
}
@@ -638,6 +710,176 @@ function avilileEdit(){
}
}
+function toggleFixedColumns() {
+ fixedColumns.value = !fixedColumns.value;
+}
+
+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';
+ });
+};
+
+function getfilterNameItem(value){
+ let result = '';
+ let resultItem = new Object();
+ if(value==='paramType'){
+ if(sortItemMap.value[value]?.length>0){
+ result = sortItemMap.value[value].map(element=>{
+ dc_param_value_type.value.forEach(item=>{
+ if(item.value===element.text){
+ resultItem = item.label;
+ }
+ });
+ return {
+ text: resultItem,
+ value: element.value,
+ };
+ });
+ }
+ }else if(value==='contrlFlag'){
+ if(sortItemMap.value[value]?.length>0 && sortItemMap.value[value].value != undefined && sortItemMap.value[value].value != null){
+ result = sortItemMap.value[value].map(element=>{
+ contrlFlag.value.forEach(item=>{
+ if(item.value===element.text){
+ resultItem = item.label;
+ }
+ });
+ return {
+ text: resultItem,
+ value: element.value,
+ };
+ });
+ }
+ }else if(value==='enabled'){
+ if(sortItemMap.value[value]?.length>0){
+ result = sortItemMap.value[value].map(element=>{
+ enabled.value.forEach(item=>{
+ if(item.value===element.text){
+ resultItem = item.label;
+ }
+ });
+ return {
+ text: resultItem,
+ value: element.value,
+ };
+ });
+ }
+ }else if(value==='paramModelId'){
+ if(sortItemMap.value[value]?.length>0 && sortItemMap.value[value].value != undefined && sortItemMap.value[value].value != null){
+ result = sortItemMap.value[value].map(element=>{
+ debugger
+ return {
+ text: getParamModelName(element.value),
+ value: element.value,
+ };
+ });
+ }
+ }else if(value==='partion'){
+ if(sortItemMap.value[value]?.length>0){
+ result = sortItemMap.value[value].map(element=>{
+ dc_device_partion.value.forEach(item=>{
+ if(item.value===String(element.text)){
+ resultItem = item.label;
+ }
+ });
+ return {
+ text: resultItem,
+ value: element.value,
+ };
+ });
+ }
+ }else{
+ result = sortItemMap.value[value];
+ }
+ return result;
+}
+
+
+function filterChange(filterItem) {
+ const outerObjectKeys = Object.keys(filterItem);
+ if(outerObjectKeys.length===1){
+ queryParamFilter.value[outerObjectKeys[0]] = filterItem[outerObjectKeys[0]];
+ }
+
+ loading.value = true;
+ let param = {
+ "obj":queryParams.value,
+ "params":queryParamFilter.value,
+ "sort":sortProps.value,
+ "pageNum": params.value.pageNum,
+ "pageSize": params.value.pageSize,
+ }
+ listWithFilterColumn(param).then(response => {
+ paramsList.value = response.data.tableData.rows;
+ total.value = response.data.tableData.total;
+ sortItemMap.value = response.data.filter;
+ queryParamFilter.value = new Object();
+ loading.value = false;
+ });
+
+}
+
+function filterMethod(value, row, column){
+ if(column==null){
+ return;
+ }
+ if(queryParamFilter.value[column.property] == null || queryParamFilter.value[column.property].length==0){
+ queryParamFilter.value[column.property]=[];
+ queryParamFilter.value[column.property].push(value);
+ }else{
+ let flag = false;
+ queryParamFilter.value[column.property].forEach(item=>{
+ if(item==value){
+ flag = true;
+ }
+ })
+ if(!flag){
+ queryParamFilter.value[column.property].push(value);
+ }
+
+ }
+
+}
+
+function sortChange({column, prop, order }){
+ if(column==null){
+ return;
+ }
+ sortProps.value = sortProps.value.filter(item => item.prop !== prop);
+ if(order!=null){
+ sortProps.value.push({prop:prop,order:order});
+ }
+ getList();
+}
+
+
+
getList();
getParamModel();
avilileEdit();
diff --git a/src/views/transerver/kingcodetransform/index.vue b/src/views/transerver/kingcodetransform/index.vue
index 780fd6e..8665a1d 100644
--- a/src/views/transerver/kingcodetransform/index.vue
+++ b/src/views/transerver/kingcodetransform/index.vue
@@ -1,42 +1,59 @@
<template>
<div class="app-container">
- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="auto">
- <el-form-item label="变量名称" prop="issVarName">
- <el-input
- v-model="queryParams.issVarName"
- placeholder="请输入变量名称"
- clearable
- @keyup.enter="handleQuery"
- />
- </el-form-item>
- <el-form-item label="工程名称" prop="issPrjName">
- <el-input
- v-model="queryParams.issPrjName"
- placeholder="请输入工程名称"
- clearable
- @keyup.enter="handleQuery"
- />
- </el-form-item>
- <el-form-item label="中台设备号" prop="centerDeviceuuid">
- <el-input
- v-model="queryParams.centerDeviceuuid"
- placeholder="请输入中台设备号"
- clearable
- @keyup.enter="handleQuery"
- />
- </el-form-item>
- <el-form-item label="中台参数码" prop="centerParamcode">
- <el-input
- v-model="queryParams.centerParamcode"
- placeholder="请输入中台参数码"
- clearable
- @keyup.enter="handleQuery"
- />
- </el-form-item>
- <el-form-item>
- <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-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="auto" class="my-custom-form">
+ <el-row>
+ <el-col :span="4">
+ <el-form-item label="变量名称" prop="issVarName">
+ <el-input
+ v-model="queryParams.issVarName"
+ placeholder="请输入变量名称"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4">
+ <el-form-item label="工程名称" prop="issPrjName">
+ <el-input
+ v-model="queryParams.issPrjName"
+ placeholder="请输入工程名称"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4">
+ <el-form-item label="中台设备号" prop="centerDeviceuuid">
+ <el-input
+ v-model="queryParams.centerDeviceuuid"
+ placeholder="请输入中台设备号"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4">
+ <el-form-item label="中台参数码" prop="centerParamcode">
+ <el-input
+ v-model="queryParams.centerParamcode"
+ placeholder="请输入中台参数码"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4">
+ <el-form-item>
+ <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">
@@ -71,8 +88,8 @@
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
- <el-table v-loading="loading" :data="kingcodetransformList" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55" align="center" />
+ <el-table v-loading="loading" :data="kingcodetransformList" @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="id" />
<el-table-column label="工程名称" align="center" prop="issPrjName" />
<el-table-column label="服务地址" align="center" prop="issResturl" />
@@ -82,7 +99,12 @@
<el-table-column label="变量类型" align="center" prop="issVarType" />
<el-table-column label="中台设备" align="center" prop="centerDeviceuuid" />
<el-table-column label="中台参数" align="center" prop="centerParamcode" />
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+ <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"
@@ -104,60 +126,59 @@
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
+ class="paddingBothLeftRight"
/>
<!-- 添加或修改IOServer变量转换对话框 -->
<el-dialog :title="title" v-model="open" width="800px" append-to-body>
<el-form ref="kingcodetransformRef" :model="form" :rules="rules" label-width="140px">
-<el-row>
- <el-col :span="24">
- <el-form-item label="工程名称" width="150" prop="issPrjName">
- <el-input v-model="form.issPrjName" placeholder="请输入工程名称" required="true"/>
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="服务地址" prop="issResturl">
- <el-input v-model="form.issResturl" placeholder="请输入服务地址" />
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="服务端口号" prop="issRestport">
- <el-input v-model="form.issRestport" placeholder="请输入服务端口号" />
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="变量名称" prop="issVarName">
- <el-input v-model="form.issVarName" placeholder="请输入变量名称" required="true" />
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="变量类型" prop="issVarType">
- <el-select v-model="form.issVarType" placeholder="请选择变量类型">
- <el-option v-for="dict in dc_param_value_type"
- :key="dict.value"
- :label="dict.label" />
-
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="组名称" prop="issGroupName">
- <el-input v-model="form.issGroupName" placeholder="请输入组名称" />
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="中台设备号" prop="centerDeviceuuid">
- <el-input v-model="form.centerDeviceuuid" placeholder="请输入中台设备号" />
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="中台参数码" prop="centerParamcode">
- <el-input v-model="form.centerParamcode" placeholder="请输入中台参数码" />
- </el-form-item>
- </el-col>
-
-
+ <el-row>
+ <el-col :span="24">
+ <el-form-item label="工程名称" width="150" prop="issPrjName">
+ <el-input v-model="form.issPrjName" placeholder="请输入工程名称" required="true"/>
+ </el-form-item>
+ </el-col>
+ <el-col :span="24">
+ <el-form-item label="服务地址" prop="issResturl">
+ <el-input v-model="form.issResturl" placeholder="请输入服务地址" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="24">
+ <el-form-item label="服务端口号" prop="issRestport">
+ <el-input v-model="form.issRestport" placeholder="请输入服务端口号" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="24">
+ <el-form-item label="变量名称" prop="issVarName">
+ <el-input v-model="form.issVarName" placeholder="请输入变量名称" required="true" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="24">
+ <el-form-item label="变量类型" prop="issVarType">
+ <el-select v-model="form.issVarType" placeholder="请选择变量类型">
+ <el-option v-for="dict in dc_param_value_type"
+ :key="dict.value"
+ :label="dict.label" />
+
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="24">
+ <el-form-item label="组名称" prop="issGroupName">
+ <el-input v-model="form.issGroupName" placeholder="请输入组名称" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="24">
+ <el-form-item label="中台设备号" prop="centerDeviceuuid">
+ <el-input v-model="form.centerDeviceuuid" placeholder="请输入中台设备号" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="24">
+ <el-form-item label="中台参数码" prop="centerParamcode">
+ <el-input v-model="form.centerParamcode" placeholder="请输入中台参数码" />
+ </el-form-item>
+ </el-col>
</el-row>
</el-form>
<template #footer>
@@ -169,10 +190,12 @@
</el-dialog>
</div>
</template>
-
+<style lang="scss" >
+ @import "@/assets/styles/self-defined.scss";
+</style>
<script setup name="Kingcodetransform">
import { listKingcodetransform, getKingcodetransform, delKingcodetransform, addKingcodetransform, updateKingcodetransform } from "@/api/transerver/kingcodetransform";
-
+import lock from "@/assets/icons/svg/lock.svg";
const { proxy } = getCurrentInstance();
const { dc_param_value_type } = proxy.useDict("dc_param_value_type");
const kingcodetransformList = ref([]);
@@ -184,6 +207,13 @@ const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
+const fixedColumns = ref(false);
+const tableHeight = ref("0px");
+const sortItemMap = ref({});
+const queryParamFilter = ref({});
+const sortProps = ref([]);
+const collapseVisible = ref(false);
+const editName = ref("更多筛选项");
const data = reactive({
form: {},
@@ -307,10 +337,46 @@ function handleDelete(row) {
/** 导出按钮操作 */
function handleExport() {
- proxy.download('transerver/kingcodetransform/export', {
+ proxy.download('dc/dcBusiKingcodetransform/export', {
...queryParams.value
}, `kingcodetransform_${new Date().getTime()}.xlsx`)
}
+function toggleFixedColumns() {
+ fixedColumns.value = !fixedColumns.value;
+}
+
+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';
+ });
+};
+
+
getList();
</script>
diff --git a/src/views/transerver/viewConfig/index.vue b/src/views/transerver/viewConfig/index.vue
index 09e4921..d533f07 100644
--- a/src/views/transerver/viewConfig/index.vue
+++ b/src/views/transerver/viewConfig/index.vue
@@ -1,123 +1,166 @@
<template>
<div class="app-container">
- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="120px">
- <el-form-item label="模型编码" prop="colCode">
- <el-select v-model="queryParams.colCode" placeholder="请选择模型编码" clearable>
- <el-option label="请选择字典生成" value="" />
- </el-select>
- </el-form-item>
- <el-form-item label="显示名称" prop="colName">
- <el-input
- v-model="queryParams.colName"
- placeholder="请输入显示名称"
- clearable
- @keyup.enter="handleQuery"
- />
- </el-form-item>
- <el-form-item label="字段类型" prop="colType">
- <el-select v-model="queryParams.colType" 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="colWidth">
- <el-input
- v-model="queryParams.colWidth"
- placeholder="请输入字段宽度"
- clearable
- @keyup.enter="handleQuery"
- />
- </el-form-item>
- <el-form-item label="字段顺序" prop="colSort">
- <el-input
- v-model="queryParams.colSort"
- placeholder="请输入字段顺序"
- clearable
- @keyup.enter="handleQuery"
- />
- </el-form-item>
- <el-form-item label="显示状态" prop="flagVisible">
- <el-select v-model="queryParams.flagVisible" placeholder="请选择是否显示" clearable>
- <el-option
- v-for="dict in sys_yes_no"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="固定位置" prop="flagLocked">
- <el-select v-model="queryParams.flagLocked" placeholder="请选择是否固定位置" clearable>
- <el-option
- v-for="dict in sys_yes_no"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="是否可控" prop="flagControl">
- <el-select v-model="queryParams.flagControl" placeholder="请选择是否可控" clearable>
- <el-option
- v-for="dict in sys_yes_no"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="控制类型" prop="controlType">
- <el-select v-model="queryParams.controlType" placeholder="请选择控制类型" clearable>
- <el-option
- v-for="dict in dc_param_control_type"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="控制标签地址" prop="controlAddress">
- <el-input
- v-model="queryParams.controlAddress"
- placeholder="请输入控制标签地址"
- clearable
- @keyup.enter="handleQuery"
- />
- </el-form-item>
- <el-form-item label="默认写入值" prop="controlValue">
- <el-input
- v-model="queryParams.controlValue"
- placeholder="请输入默认写入值"
- clearable
- @keyup.enter="handleQuery"
- />
- </el-form-item>
- <el-form-item label="一级标题" prop="groupTittle">
- <el-input
- v-model="queryParams.groupTittle"
- placeholder="请输入一级标题"
- clearable
- @keyup.enter="handleQuery"
- />
- </el-form-item>
- <el-form-item label="视图表类别" prop="viewType">
- <el-select v-model="queryParams.viewType" 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>
- <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-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px" class="my-custom-form">
+ <el-row>
+ <el-col :span="4">
+ <el-form-item label="模型编码" prop="colCode">
+ <el-select v-model="queryParams.colCode" placeholder="请选择模型编码" clearable>
+ <el-option label="请选择字典生成" value="" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="4">
+ <el-form-item label="显示名称" prop="colName">
+ <el-input
+ v-model="queryParams.colName"
+ placeholder="请输入显示名称"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4">
+ <el-form-item label="字段类型" prop="colType">
+ <el-select v-model="queryParams.colType" 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="colWidth">
+ <el-input
+ v-model="queryParams.colWidth"
+ placeholder="请输入字段宽度"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
+ <el-form-item label="字段顺序" prop="colSort">
+ <el-input
+ v-model="queryParams.colSort"
+ placeholder="请输入字段顺序"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
+ <el-form-item label="显示状态" prop="flagVisible">
+ <el-select v-model="queryParams.flagVisible" placeholder="请选择是否显示" clearable>
+ <el-option
+ v-for="dict in sys_yes_no"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
+ <el-form-item label="固定位置" prop="flagLocked">
+ <el-select v-model="queryParams.flagLocked" placeholder="请选择是否固定位置" clearable>
+ <el-option
+ v-for="dict in sys_yes_no"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
+ <el-form-item label="是否可控" prop="flagControl">
+ <el-select v-model="queryParams.flagControl" placeholder="请选择是否可控" clearable>
+ <el-option
+ v-for="dict in sys_yes_no"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
+ <el-form-item label="控制类型" prop="controlType">
+ <el-select v-model="queryParams.controlType" placeholder="请选择控制类型" clearable>
+ <el-option
+ v-for="dict in dc_param_control_type"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
+ <el-form-item label="控制类型" prop="controlType">
+ <el-select v-model="queryParams.controlType" placeholder="请选择控制类型" clearable>
+ <el-option
+ v-for="dict in dc_param_control_type"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
+ <el-form-item label="控制标签地址" prop="controlAddress">
+ <el-input
+ v-model="queryParams.controlAddress"
+ placeholder="请输入控制标签地址"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
+ <el-form-item label="默认写入值" prop="controlValue">
+ <el-input
+ v-model="queryParams.controlValue"
+ placeholder="请输入默认写入值"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
+ <el-form-item label="一级标题" prop="groupTittle">
+ <el-input
+ v-model="queryParams.groupTittle"
+ placeholder="请输入一级标题"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="4" v-show="collapseVisible">
+ <el-form-item label="视图表类别" prop="viewType">
+ <el-select v-model="queryParams.viewType" 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="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-form-item>
+ </el-col>
+ </el-row>
</el-form>
<el-row :gutter="10" class="mb8">
@@ -152,8 +195,8 @@
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
- <el-table v-loading="loading" :data="viewConfigList" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55" align="center" />
+ <el-table v-loading="loading" :data="viewConfigList" @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="id" />
<el-table-column label="模型编码" align="center" prop="colCode" />
<el-table-column label="显示名称" align="center" prop="colName" />
@@ -188,7 +231,12 @@
<dict-tag :options="dc_param_value_type" :value="scope.row.viewType"/>
</template>
</el-table-column>
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+ <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"
@@ -210,121 +258,122 @@
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
+ class="paddingBothLeftRight"
/>
<!-- 添加或修改运维监视视图配置对话框 -->
<el-dialog :title="title" v-model="open" width="1200px" append-to-body>
<el-form ref="viewConfigRef" :model="form" :rules="rules" label-width="140px">
-<el-row>
- <el-col :span="12">
- <el-form-item label="模型编码" prop="colCode">
- <el-select v-model="form.colCode" placeholder="请选择模型编码">
- <el-option label="请选择字典生成" value="" />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="显示名称" prop="colName">
- <el-input v-model="form.colName" placeholder="请输入显示名称" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="字段类型" prop="colType">
- <el-select v-model="form.colType" placeholder="请选择字段类型">
- <el-option
- v-for="dict in dc_param_value_type"
- :key="dict.value"
- :label="dict.label"
-:value="dict.value" ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="字段宽度" prop="colWidth">
- <el-input v-model="form.colWidth" placeholder="请输入字段宽度" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="字段顺序" prop="colSort">
- <el-input v-model="form.colSort" placeholder="请输入字段顺序" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="是否显示">
- <el-radio-group v-model="form.flagVisible">
- <el-radio
- v-for="dict in sys_yes_no"
- :key="dict.value"
-:label="dict.label"
- >{{dict.label}}</el-radio>
- </el-radio-group>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="固定位置">
- <el-radio-group v-model="form.flagLocked">
- <el-radio
- v-for="dict in sys_yes_no"
- :key="dict.value"
-:label="dict.label"
- >{{dict.label}}</el-radio>
- </el-radio-group>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="是否可控">
- <el-radio-group v-model="form.flagControl">
- <el-radio
- v-for="dict in sys_yes_no"
- :key="dict.value"
-:label="dict.value"
- >{{dict.label}}</el-radio>
- </el-radio-group>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="控制类型" prop="controlType">
- <el-select v-model="form.controlType" placeholder="请选择控制类型">
- <el-option
- v-for="dict in dc_param_control_type"
- :key="dict.value"
- :label="dict.label"
-:value="dict.value" ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="控制标签地址" prop="controlAddress">
- <el-input v-model="form.controlAddress" placeholder="请输入控制标签地址" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="默认写入值" prop="controlValue">
- <el-input v-model="form.controlValue" placeholder="请输入默认写入值" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="一级标题" prop="groupTittle">
- <el-input v-model="form.groupTittle" placeholder="请输入一级标题" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="一级标题编码" prop="groupCode">
- <el-input v-model="form.groupCode" placeholder="请输入一级标题编码" value="0" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="视图表类别" prop="viewType">
- <el-select v-model="form.viewType" placeholder="请选择视图表类别">
- <el-option
- v-for="dict in dc_monitor_view_type"
- :key="dict.value"
- :label="dict.label"
-:value="dict.value" ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="模型编码" prop="colCode">
+ <el-select v-model="form.colCode" placeholder="请选择模型编码">
+ <el-option label="请选择字典生成" value="" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="显示名称" prop="colName">
+ <el-input v-model="form.colName" placeholder="请输入显示名称" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="字段类型" prop="colType">
+ <el-select v-model="form.colType" placeholder="请选择字段类型">
+ <el-option
+ v-for="dict in dc_param_value_type"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value" ></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="字段宽度" prop="colWidth">
+ <el-input v-model="form.colWidth" placeholder="请输入字段宽度" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="字段顺序" prop="colSort">
+ <el-input v-model="form.colSort" placeholder="请输入字段顺序" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="是否显示">
+ <el-radio-group v-model="form.flagVisible">
+ <el-radio
+ v-for="dict in sys_yes_no"
+ :key="dict.value"
+ :label="dict.label"
+ >{{dict.label}}</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="固定位置">
+ <el-radio-group v-model="form.flagLocked">
+ <el-radio
+ v-for="dict in sys_yes_no"
+ :key="dict.value"
+ :label="dict.label"
+ >{{dict.label}}</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="是否可控">
+ <el-radio-group v-model="form.flagControl">
+ <el-radio
+ v-for="dict in sys_yes_no"
+ :key="dict.value"
+ :label="dict.value"
+ >{{dict.label}}</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="控制类型" prop="controlType">
+ <el-select v-model="form.controlType" placeholder="请选择控制类型">
+ <el-option
+ v-for="dict in dc_param_control_type"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value" ></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="控制标签地址" prop="controlAddress">
+ <el-input v-model="form.controlAddress" placeholder="请输入控制标签地址" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="默认写入值" prop="controlValue">
+ <el-input v-model="form.controlValue" placeholder="请输入默认写入值" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="一级标题" prop="groupTittle">
+ <el-input v-model="form.groupTittle" placeholder="请输入一级标题" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="一级标题编码" prop="groupCode">
+ <el-input v-model="form.groupCode" placeholder="请输入一级标题编码" value="0" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="视图表类别" prop="viewType">
+ <el-select v-model="form.viewType" placeholder="请选择视图表类别">
+ <el-option
+ v-for="dict in dc_monitor_view_type"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value" ></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
</el-row>
</el-form>
@@ -337,10 +386,12 @@
</el-dialog>
</div>
</template>
-
+<style lang="scss" >
+ @import "@/assets/styles/self-defined.scss";
+</style>
<script setup name="ViewConfig">
import { listViewConfig, getViewConfig, delViewConfig, addViewConfig, updateViewConfig } from "@/api/transerver/viewConfig";
-
+import lock from "@/assets/icons/svg/lock.svg";
const { proxy } = getCurrentInstance();
const { sys_yes_no, dc_param_value_type,dc_monitor_view_type,dc_param_control_type} = proxy.useDict('sys_yes_no', 'dc_param_value_type', 'dc_monitor_view_type', 'dc_param_control_type');
@@ -353,6 +404,13 @@ const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
+const fixedColumns = ref(false);
+const tableHeight = ref("0px");
+const sortItemMap = ref({});
+const queryParamFilter = ref({});
+const sortProps = ref([]);
+const collapseVisible = ref(false);
+const editName = ref("更多筛选项");
const data = reactive({
form: {},
@@ -499,5 +557,49 @@ function handleExport() {
}, `viewConfig_${new Date().getTime()}.xlsx`)
}
+function toggleFixedColumns() {
+ fixedColumns.value = !fixedColumns.value;
+}
+
+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';
+ });
+};
+
+function toggleCollapse() {
+ collapseVisible.value = !collapseVisible.value;
+ if(collapseVisible.value){
+ editName.value = "折叠筛选项";
+ }else{
+ editName.value = "更多筛选项"
+ }
+}
+
getList();
</script>