Browse Source

后台各界面的调整部分代码

pull/1/head
ljlong_2630 1 year ago
parent
commit
d645d08af5
  1. 2
      src/api/model/paramclass.js
  2. 9
      src/api/model/params.js
  3. 29
      src/assets/styles/self-defined.scss
  4. 67
      src/views/model/alert/deviceparamalert.vue
  5. 120
      src/views/model/alert/logicconfig.vue
  6. 62
      src/views/model/alert/method.vue
  7. 98
      src/views/model/alert/model.vue
  8. 113
      src/views/model/alert/policy.vue
  9. 65
      src/views/model/device/index.vue
  10. 243
      src/views/model/paramclass/index.vue
  11. 350
      src/views/model/params/index.vue
  12. 86
      src/views/transerver/kingcodetransform/index.vue
  13. 130
      src/views/transerver/viewConfig/index.vue

2
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
})

9
src/api/model/params.js

@ -59,3 +59,12 @@ export function exportParams(query) {
params: query
})
}
//获取列表带筛选值
export function listWithFilterColumn(data){
return request({
url: '/model/dcBaseDeviceParam/listWithFilterColumn',
method: 'post',
data: data
});
}

29
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;
}
}

67
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();

120
src/views/model/alert/logicconfig.vue

@ -1,26 +1,32 @@
<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-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_alert_logic"
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="paramValueType">
<el-select v-model="queryParams.paramValueType" placeholder="请选择参数变量类型" clearable>
</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_param_value_type"
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"
@ -29,12 +35,15 @@
@keyup.enter="handleQuery"
/>
</el-form-item>
<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>

62
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>

98
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">
@ -15,21 +15,6 @@
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="代码" prop="code">
<el-input
v-model="queryParams.code"
placeholder="请输入代码"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="4">
</el-col>
</el-row>
<el-form-item label="是否有效" prop="flagEnabled">
<el-select v-model="queryParams.flagEnabled" placeholder="请选择是否有效" clearable>
<el-option
@ -40,6 +25,18 @@
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="代码" prop="code">
<el-input
v-model="queryParams.code"
placeholder="请输入代码"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="级别" prop="level">
<el-select v-model="form.level" placeholder="请选择告警级别">
<el-option
@ -50,6 +47,8 @@
/>
</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
@ -60,6 +59,8 @@
/>
</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"
@ -68,6 +69,8 @@
@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"
@ -76,10 +79,15 @@
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item class="childTextAlignCenter">
</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">
@ -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>

113
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();

65
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,7 +235,7 @@
: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">
@ -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'){

243
src/views/model/paramclass/index.vue

@ -1,96 +1,179 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
<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-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-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-form-item>
</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-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-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-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-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 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" />
<dict-tag :options="dc_class_type" :value="scope.row.classType"/>
</template>
</el-table-column>
<!-- <el-table-column label="分区" align="center" prop="devicePartion">
<el-table-column label="单位" align="center" prop="paramUnit">
<template #default="scope">
<dict-tag :options="dc_device_partion" :value="scope.row.devicePartion" />
<dict-tag :options="dc_param_uint_type" :value="scope.row.paramUnit"/>
</template>
</el-table-column> -->
</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" 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>
<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" />
<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="24">
<el-row>
<el-col :span="12">
<el-form-item label="参数名称" prop="paramClassName">
<el-input v-model="form.paramClassName" placeholder="请输入参数名称" maxlength="30" />
<el-input v-model="form.paramClassName" placeholder="请输入参数名称" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-col :span="12">
<el-form-item label="参数编码" prop="paramClassCode">
<el-input v-model="form.paramClassCode" placeholder="请输入参数编码" maxlength="30" />
<el-input v-model="form.paramClassCode" placeholder="请输入参数编码" />
</el-form-item>
</el-col>
<el-col :span="24">
<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-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-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-col>
</el-row>
</el-form>
@ -103,12 +186,14 @@
</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_device_partion } = proxy.useDict('dc_class_type', 'dc_device_partion');
const { dc_class_type, dc_param_uint_type } = proxy.useDict('dc_class_type', 'dc_param_uint_type');
const paramclassList = ref([]);
const open = ref(false);
@ -119,18 +204,22 @@ 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,
createBy: null,
createTime: null,
paramClassName: null,
paramClassCode: null,
classType: null,
devicePartion: null,
paramUnit: null,
note: null,
},
rules: {
}
@ -157,18 +246,22 @@ function cancel() {
//
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
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");
}
@ -234,20 +327,58 @@ function submitForm() {
/** 删除按钮操作 */
function handleDelete(row) {
const _ids = row.id || ids.value;
proxy.$modal.confirm('是否确认删除参数模型信息编号为"' + _ids + '"的数据项?').then(function () {
proxy.$modal.confirm('是否确认删除参数模型信息编号为"' + _ids + '"的数据项?').then(function() {
return delParamclass(_ids);
}).then(() => {
getList();
proxy.$modal.msgSuccess("删除成功");
}).catch(() => { });
}).catch(() => {});
}
/** 导出按钮操作 */
function handleExport() {
proxy.download('system/paramclass/export', {
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>

350
src/views/model/params/index.vue

@ -1,6 +1,8 @@
<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="120px" class="my-custom-form">
<el-row>
<el-col :span="4">
<el-form-item label="中台设备UUID" prop="deviceUuid">
<el-input
v-model="queryParams.deviceUuid"
@ -9,6 +11,8 @@
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="参数名称" prop="paramName">
<el-input
v-model="queryParams.paramName"
@ -17,6 +21,8 @@
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="参数编码" prop="paramCode">
<el-input
v-model="queryParams.paramCode"
@ -25,8 +31,18 @@
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-collapse-transition>
<div v-show="collapseVisible">
</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-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();

86
src/views/transerver/kingcodetransform/index.vue

@ -1,6 +1,8 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="auto">
<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"
@ -9,6 +11,8 @@
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="工程名称" prop="issPrjName">
<el-input
v-model="queryParams.issPrjName"
@ -17,6 +21,8 @@
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="中台设备号" prop="centerDeviceuuid">
<el-input
v-model="queryParams.centerDeviceuuid"
@ -25,6 +31,8 @@
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="中台参数码" prop="centerParamcode">
<el-input
v-model="queryParams.centerParamcode"
@ -33,10 +41,19 @@
@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,13 +126,14 @@
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-row>
<el-col :span="24">
<el-form-item label="工程名称" width="150" prop="issPrjName">
<el-input v-model="form.issPrjName" placeholder="请输入工程名称" required="true"/>
@ -156,8 +179,6 @@
<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>

130
src/views/transerver/viewConfig/index.vue

@ -1,11 +1,15 @@
<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="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"
@ -14,6 +18,8 @@
@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
@ -24,6 +30,8 @@
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="字段宽度" prop="colWidth">
<el-input
v-model="queryParams.colWidth"
@ -32,6 +40,8 @@
@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"
@ -40,6 +50,8 @@
@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
@ -50,6 +62,8 @@
/>
</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
@ -60,6 +74,8 @@
/>
</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
@ -70,6 +86,20 @@
/>
</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
@ -80,6 +110,8 @@
/>
</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"
@ -88,6 +120,8 @@
@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"
@ -96,6 +130,8 @@
@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"
@ -104,6 +140,8 @@
@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
@ -114,10 +152,15 @@
/>
</el-select>
</el-form-item>
<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,13 +258,14 @@
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-row>
<el-col :span="12">
<el-form-item label="模型编码" prop="colCode">
<el-select v-model="form.colCode" placeholder="请选择模型编码">
@ -236,7 +285,7 @@
v-for="dict in dc_param_value_type"
:key="dict.value"
:label="dict.label"
:value="dict.value" ></el-option>
:value="dict.value" ></el-option>
</el-select>
</el-form-item>
</el-col>
@ -256,7 +305,7 @@
<el-radio
v-for="dict in sys_yes_no"
:key="dict.value"
:label="dict.label"
:label="dict.label"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
@ -267,7 +316,7 @@
<el-radio
v-for="dict in sys_yes_no"
:key="dict.value"
:label="dict.label"
:label="dict.label"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
@ -278,7 +327,7 @@
<el-radio
v-for="dict in sys_yes_no"
:key="dict.value"
:label="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
@ -290,7 +339,7 @@
v-for="dict in dc_param_control_type"
:key="dict.value"
:label="dict.label"
:value="dict.value" ></el-option>
:value="dict.value" ></el-option>
</el-select>
</el-form-item>
</el-col>
@ -321,7 +370,7 @@
v-for="dict in dc_monitor_view_type"
:key="dict.value"
:label="dict.label"
:value="dict.value" ></el-option>
:value="dict.value" ></el-option>
</el-select>
</el-form-item>
</el-col>
@ -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>

Loading…
Cancel
Save