Browse Source

修复机构树不能点子节点问题,和多余字段去掉

develop
ljlong_2630 1 year ago
parent
commit
b3255257de
  1. 306
      src/views/model/device/index.vue

306
src/views/model/device/index.vue

@ -3,26 +3,12 @@
<el-row>
<el-col :span="4" class="card-box">
<div class="head-container">
<el-input
v-model="deptName"
placeholder="请输入部门名称"
clearable
prefix-icon="Search"
style="margin-bottom: 20px"
/>
<el-input v-model="deptName" placeholder="请输入部门名称" clearable prefix-icon="Search" style="margin-bottom: 20px" />
</div>
<div class="head-container">
<el-tree
:data="deptOptions"
:props="{ label: 'label', children: 'children' }"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="deptTreeRef"
node-key="id"
highlight-current
default-expand-all
@node-click="handleNodeClick"
/>
<el-tree :data="deptOptions" :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false"
:filter-node-method="filterNode" ref="deptTreeRef" node-key="id" highlight-current default-expand-all
@node-click="handleNodeClick" />
</div>
<!-- <el-form-item label="所属组织名称" prop="orgName">
<el-tree-select v-model="queryParams.orgName" :data="deptOptions"
@ -31,148 +17,86 @@
</el-form-item> -->
</el-col>
<el-col :span="20" class="card-box">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px" class="my-custom-form">
<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="centerDeviceCode">
<el-input
v-model="queryParams.centerDeviceCode"
placeholder="请输入中台设备编码"
clearable
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.centerDeviceCode" placeholder="请输入中台设备编码" clearable
@keyup.enter="handleQuery" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="设备名称" prop="deviceName">
<el-input
v-model="queryParams.deviceName"
placeholder="请输入设备名称"
clearable
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="通讯来源类型" prop="deviceSourceId">
<el-select v-model="queryParams.deviceSourceId" placeholder="请选择通讯来源类型" clearable>
<el-option
v-for="dict in dc_device_source"
:key="dict.value"
:label="dict.label"
:value="dict.value"
@change="deviceSourceChange"
/>
<el-option v-for="dict in dc_device_source" :key="dict.value" :label="dict.label" :value="dict.value"
@change="deviceSourceChange" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="是否可用" prop="enabledFlag">
<el-select v-model="queryParams.enabledFlag" placeholder="请选择是否可用" clearable>
<el-option
v-for="dict in enabledFlag"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
<el-option v-for="dict in enabledFlag" :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="deviceType">
<el-select v-model="queryParams.deviceType" placeholder="请选择设备类型" clearable>
<el-option
v-for="dict in dc_device_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
<el-option v-for="dict in dc_device_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-col :span="4" v-show="collapseVisible">
<el-form-item label="位置编码" prop="locationCode">
<el-input
v-model="queryParams.locationCode"
placeholder="请输入位置编码"
clearable
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.locationCode" placeholder="请输入位置编码" clearable @keyup.enter="handleQuery" />
</el-form-item>
</el-col>
<el-col :span="4" v-show="collapseVisible">
<el-form-item label="位置名称" prop="locationName">
<el-input
v-model="queryParams.locationName"
placeholder="请输入位置名称"
clearable
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.locationName" placeholder="请输入位置名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
</el-col>
<el-col :span="4" v-show="collapseVisible">
<el-form-item label="设备应用范围" prop="deviceClass">
<el-input
v-model="queryParams.deviceClass"
placeholder="请输入设备应用范围"
clearable
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.deviceClass" placeholder="请输入设备应用范围" clearable
@keyup.enter="handleQuery" />
</el-form-item>
</el-col>
<el-col :span="4" v-show="collapseVisible">
<el-form-item label="服务器地址" prop="serverIp">
<el-input
v-model="queryParams.serverIp"
placeholder="请输入服务器地址"
clearable
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.serverIp" placeholder="请输入服务器地址" clearable @keyup.enter="handleQuery" />
</el-form-item>
</el-col>
<el-col :span="4" v-show="collapseVisible">
<el-form-item label="从属网关ID" prop="gatewayId">
<el-input
v-model="queryParams.gatewayId"
placeholder="请输入从属网关ID"
clearable
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.gatewayId" placeholder="请输入从属网关ID" clearable @keyup.enter="handleQuery" />
</el-form-item>
</el-col>
<el-col :span="4" v-show="collapseVisible">
<el-form-item label="纬度" prop="latValue">
<el-input
v-model="queryParams.latValue"
placeholder="请输入纬度"
clearable
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.latValue" placeholder="请输入纬度" clearable @keyup.enter="handleQuery" />
</el-form-item>
</el-col>
<el-col :span="4" v-show="collapseVisible">
<el-form-item label="经度" prop="lagValue">
<el-input
v-model="queryParams.lagValue"
placeholder="请输入经度"
clearable
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.lagValue" placeholder="请输入经度" clearable @keyup.enter="handleQuery" />
</el-form-item>
</el-col>
</el-col> -->
<el-col :span="4" v-show="collapseVisible">
<el-form-item label="是否告警" prop="alertEnabled">
<el-select v-model="queryParams.alertEnabled" placeholder="请选择设备类型" clearable>
<el-option
v-for="dict in alertEnabled"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
<el-option v-for="dict in alertEnabled" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="4" v-show="collapseVisible">
<!-- <el-col :span="4" v-show="collapseVisible">
<el-form-item label="设备模型" prop="deviceModelId">
<el-select v-model="queryParams.deviceModelId" placeholder="请选择设备模型id" clearable>
<el-option label="请选择设备模型" value="deviceModelId" />
@ -185,16 +109,12 @@
<el-option label="请添加设备分组" value="" />
</el-select>
</el-form-item>
</el-col>
</el-col> -->
<el-col :span="4" v-show="collapseVisible">
<el-form-item label="组态图片名称" prop="imgConfiguration">
<el-select v-model="queryParams.imgConfiguration" placeholder="请选择组态图片名称" clearable>
<el-option
v-for="dict in dc_img_configuration"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
<el-option v-for="dict in dc_img_configuration" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
</el-col>
@ -211,11 +131,7 @@
</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
@ -225,41 +141,38 @@
>修改</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 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 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" 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"
:filters="getfilterNameItem('enabledFlag')" :filter-method="filterMethod" 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" :filters="getfilterNameItem('enabledFlag')" :filter-method="filterMethod"
sortable>
<template #default="scope">
<dict-tag :options="enabledFlagTable" :value="scope.row.enabledFlag" />
</template>
</el-table-column>
<el-table-column label="设备类型" align="center" prop="deviceType" :width="120" column-key="deviceType" filter-placement="bottom-end"
:filters="getfilterNameItem('deviceType')" :filter-method="filterMethod" sortable>
<el-table-column label="设备类型" align="center" prop="deviceType" :width="120" column-key="deviceType"
filter-placement="bottom-end" :filters="getfilterNameItem('deviceType')" :filter-method="filterMethod"
sortable>
<template #default="scope">
<dict-tag :options="dc_device_type" :value="scope.row.deviceType" />
</template>
</el-table-column>
<el-table-column label="所属组织名称" align="center" prop="orgName" :width="150" sortable/>
<!-- <el-table-column label="所属组织名称" align="center" prop="orgName" :width="150" sortable />
<el-table-column label="位置编码" align="center" prop="locationCode" :width="120" sortable />
<el-table-column label="位置名称" align="center" prop="locationName" :width="120" sortable />
<el-table-column label="设备应用范围" align="center" prop="deviceClass" :width="150" sortable />
@ -267,59 +180,47 @@
<el-table-column label="服务器地址" align="center" prop="serverIp" :width="120" sortable />
<el-table-column label="从属网关ID" align="center" prop="gatewayId" :width="120" sortable />
<el-table-column label="纬度" align="center" prop="latValue" :width="120" sortable />
<el-table-column label="经度" align="center" prop="lagValue" :width="120" sortable/>
<el-table-column label="是否告警" align="center" prop="alertEnabled" :width="120" column-key="alertEnabled" filter-placement="bottom-end"
:filters="getfilterNameItem('alertEnabled')" :filter-method="filterMethod" sortable>
<el-table-column label="经度" align="center" prop="lagValue" :width="120" sortable /> -->
<el-table-column label="是否告警" align="center" prop="alertEnabled" :width="120" column-key="alertEnabled"
filter-placement="bottom-end" :filters="getfilterNameItem('alertEnabled')" :filter-method="filterMethod"
sortable>
<template #default="scope">
<dict-tag :options="alertEnabledTable" :value="scope.row.alertEnabled" />
</template>
</el-table-column>
<el-table-column label="设备模型" align="center" prop="deviceModelId" :width="120" column-key="deviceModelId" filter-placement="bottom-end"
:filters="getfilterNameItem('deviceModelId')" :filter-method="filterMethod" sortable>
<!-- <el-table-column label="设备模型" align="center" prop="deviceModelId" :width="120" column-key="deviceModelId"
filter-placement="bottom-end" :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="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" prop="imgConfiguration" :width="150" column-key="imgConfiguration" filter-placement="bottom-end"
:filters="getfilterNameItem('imgConfiguration')" :filter-method="filterMethod" sortable>
<el-table-column label="租户号" align="center" prop="tentantId" :width="120" sortable/>
<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="imgConfiguration" :width="150"
column-key="imgConfiguration" filter-placement="bottom-end" :filters="getfilterNameItem('imgConfiguration')"
:filter-method="filterMethod" sortable>
<template #default="scope">
<dict-tag :options="dc_img_configuration" :value="scope.row.imgConfiguration" />
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" :width="300" :fixed="fixedColumns?'right':false">
<el-table-column label="设备排序" align="center" prop="sort" :width="130" sortable />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" :width="300"
:fixed="fixedColumns ? 'right' : false" :src="lock">
<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>
<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="handleParams(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>
<el-button type="text" icon="Edit" @click="handleParams(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="params.pageNum"
v-model:limit="params.pageSize"
@pagination="getList"
class="paddingBothLeftRight"
/>
<pagination v-show="total > 0" :total="total" v-model:page="params.pageNum" v-model:limit="params.pageSize"
@pagination="getList" class="paddingBothLeftRight" />
</el-col>
</el-row>
<!-- 添加或修改设备信息对话框 -->
@ -344,12 +245,7 @@
<el-col :span="12">
<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"
:label="dict.label"
:value="dict.value"
/>
<el-option v-for="dict in dc_device_source" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
@ -361,23 +257,14 @@
<el-col :span="12">
<el-form-item label="是否可用" prop="enabledFlag">
<el-select v-model="form.enabledFlag" placeholder="请选择是否可用">
<el-option
v-for="dict in enabledFlag"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
<el-option v-for="dict in enabledFlag" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备类型" prop="deviceType">
<el-select v-model="form.deviceType" placeholder="请选择设备类型">
<el-option
v-for="dict in dc_device_type"
:key="dict.value"
:label="dict.label"
:value="dict.value">
<el-option v-for="dict in dc_device_type" :key="dict.value" :label="dict.label" :value="dict.value">
</el-option>
</el-select>
</el-form-item>
@ -437,12 +324,7 @@
<el-col :span="12">
<el-form-item label="是否告警" prop="alertEnabled">
<el-select v-model="form.alertEnabled" placeholder="请选择是否告警">
<el-option
v-for="dict in alertEnabled"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
<el-option v-for="dict in alertEnabled" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
@ -468,12 +350,8 @@
<el-col :span="12">
<el-form-item label="组态图片名称" prop="imgConfiguration">
<el-select v-model="form.imgConfiguration" placeholder="请选择组态图片名称" clearable>
<el-option
v-for="dict in dc_img_configuration"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
<el-option v-for="dict in dc_img_configuration" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
</el-col>
@ -493,25 +371,29 @@
</el-dialog>
</div>
</template>
<style lang="scss" >
@import "@/assets/styles/self-defined.scss";
<style lang="scss" > @import "@/assets/styles/self-defined.scss";
.fixed-column-toggle {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.fixed-column-header {
display: flex;
align-items: center;
i {
margin-right: 5px;
}
}
.my-custom-form .el-form-item {
.el-select {
width: 100%;
}
margin-right: 0 !important;
width: 96%;
}
@ -540,6 +422,7 @@ const editName = ref("更多筛选项");
const deptOptions = ref([]);
const disabledDeviceCode = ref(false);
const fixedColumns = ref(false);
const fixedOrderColumn = ref(false);
const tableHeight = ref("0px");
const sortItemMap = ref({});
const queryParamFilter = ref({});
@ -878,6 +761,9 @@ function deviceSourceChange(val){
function toggleFixedColumns() {
fixedColumns.value = !fixedColumns.value;
}
function toggleFixedOrderColumns() {
fixedOrderColumn.value = !fixedOrderColumn.value;
}
onMounted(() => {
calculateTableHeight();
@ -912,7 +798,7 @@ const calculateTableHeight = () => {
function getfilterNameItem(value) {
let result = '';
let resultItem = new Object();
let resultItem = null;
if (value === 'enabledFlag') {
if (sortItemMap.value[value]?.length > 0) {
result = sortItemMap.value[value].map(element => {
@ -921,10 +807,12 @@ function getfilterNameItem(value){
resultItem = item.label;
}
});
if (resultItem != null) {
return {
text: resultItem,
value: element.value,
};
}
});
}
} else if (value === 'alertEnabled') {
@ -935,10 +823,12 @@ function getfilterNameItem(value){
resultItem = item.label;
}
});
if (resultItem != null) {
return {
text: resultItem,
value: element.value,
};
}
});
}
} else if (value === 'deviceType') {
@ -949,10 +839,28 @@ function getfilterNameItem(value){
resultItem = item.label;
}
});
if (resultItem != null) {
return {
text: resultItem,
value: element.value,
};
}
});
}
} else if (value === 'imgConfiguration') {
if (sortItemMap.value[value]?.length > 0) {
result = sortItemMap.value[value].map(element => {
dc_img_configuration.value.forEach(item => {
if (item.value === String(element.text)) {
resultItem = item.label;
}
});
if (resultItem != null) {
return {
text: resultItem,
value: element.value,
};
}
});
}
} else {

Loading…
Cancel
Save