lianmei
/
dc-ui
mirror of https://gitee.com/lmlz_0/dc-ui.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

develop
ljlong_2630 1 year ago
parent
7b3ba63fc9
commit
b3255257de
1 changed files with 254 additions and 346 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 502
      src/views/model/device/index.vue

502
src/views/model/device/index.vue
View File

@ -3,26 +3,12 @@
<el-row> <el-row>
<el-col :span="4" class="card-box"> <el-col :span="4" class="card-box">
<div class="head-container"> <div class="head-container">
<el-input <el-input v-model="deptName" placeholder="请输入部门名称" clearable prefix-icon="Search" style="margin-bottom: 20px" />
v-model="deptName"
placeholder="请输入部门名称"
clearable
prefix-icon="Search"
style="margin-bottom: 20px"
/>
</div> </div>
<div class="head-container"> <div class="head-container">
<el-tree <el-tree :data="deptOptions" :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false"
:data="deptOptions" :filter-node-method="filterNode" ref="deptTreeRef" node-key="id" highlight-current default-expand-all
:props="{ label: 'label', children: 'children' }" @node-click="handleNodeClick" />
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="deptTreeRef"
node-key="id"
highlight-current
default-expand-all
@node-click="handleNodeClick"
/>
</div> </div>
<!-- <el-form-item label="所属组织名称" prop="orgName"> <!-- <el-form-item label="所属组织名称" prop="orgName">
<el-tree-select v-model="queryParams.orgName" :data="deptOptions" <el-tree-select v-model="queryParams.orgName" :data="deptOptions"
@ -31,148 +17,86 @@
</el-form-item> --> </el-form-item> -->
</el-col> </el-col>
<el-col :span="20" class="card-box"> <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-row>
<el-col :span="4"> <el-col :span="4">
<el-form-item label="中台设备编码" prop="centerDeviceCode"> <el-form-item label="中台设备编码" prop="centerDeviceCode">
<el-input <el-input v-model="queryParams.centerDeviceCode" placeholder="请输入中台设备编码" clearable
v-model="queryParams.centerDeviceCode" @keyup.enter="handleQuery" />
placeholder="请输入中台设备编码"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item label="设备名称" prop="deviceName"> <el-form-item label="设备名称" prop="deviceName">
<el-input <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable @keyup.enter="handleQuery" />
v-model="queryParams.deviceName"
placeholder="请输入设备名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item label="通讯来源类型" prop="deviceSourceId"> <el-form-item label="通讯来源类型" prop="deviceSourceId">
<el-select v-model="queryParams.deviceSourceId" placeholder="请选择通讯来源类型" clearable> <el-select v-model="queryParams.deviceSourceId" placeholder="请选择通讯来源类型" clearable>
<el-option <el-option v-for="dict in dc_device_source" :key="dict.value" :label="dict.label" :value="dict.value"
v-for="dict in dc_device_source" @change="deviceSourceChange" />
:key="dict.value"
:label="dict.label"
:value="dict.value"
@change="deviceSourceChange"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item label="是否可用" prop="enabledFlag"> <el-form-item label="是否可用" prop="enabledFlag">
<el-select v-model="queryParams.enabledFlag" placeholder="请选择是否可用" clearable> <el-select v-model="queryParams.enabledFlag" placeholder="请选择是否可用" clearable>
<el-option <el-option v-for="dict in enabledFlag" :key="dict.value" :label="dict.label" :value="dict.value" />
v-for="dict in enabledFlag"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4" v-show="collapseVisible"> <el-col :span="4" v-show="collapseVisible">
<el-form-item label="设备类型" prop="deviceType"> <el-form-item label="设备类型" prop="deviceType">
<el-select v-model="queryParams.deviceType" placeholder="请选择设备类型" clearable> <el-select v-model="queryParams.deviceType" placeholder="请选择设备类型" clearable>
<el-option <el-option v-for="dict in dc_device_type" :key="dict.value" :label="dict.label" :value="dict.value" />
v-for="dict in dc_device_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4" v-show="collapseVisible"> <!-- <el-col :span="4" v-show="collapseVisible">
<el-form-item label="位置编码" prop="locationCode"> <el-form-item label="位置编码" prop="locationCode">
<el-input <el-input v-model="queryParams.locationCode" placeholder="请输入位置编码" clearable @keyup.enter="handleQuery" />
v-model="queryParams.locationCode"
placeholder="请输入位置编码"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4" v-show="collapseVisible"> <el-col :span="4" v-show="collapseVisible">
<el-form-item label="位置名称" prop="locationName"> <el-form-item label="位置名称" prop="locationName">
<el-input <el-input v-model="queryParams.locationName" placeholder="请输入位置名称" clearable @keyup.enter="handleQuery" />
v-model="queryParams.locationName"
placeholder="请输入位置名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4" v-show="collapseVisible"> <el-col :span="4" v-show="collapseVisible">
<el-form-item label="设备应用范围" prop="deviceClass"> <el-form-item label="设备应用范围" prop="deviceClass">
<el-input <el-input v-model="queryParams.deviceClass" placeholder="请输入设备应用范围" clearable
v-model="queryParams.deviceClass" @keyup.enter="handleQuery" />
placeholder="请输入设备应用范围"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4" v-show="collapseVisible"> <el-col :span="4" v-show="collapseVisible">
<el-form-item label="服务器地址" prop="serverIp"> <el-form-item label="服务器地址" prop="serverIp">
<el-input <el-input v-model="queryParams.serverIp" placeholder="请输入服务器地址" clearable @keyup.enter="handleQuery" />
v-model="queryParams.serverIp"
placeholder="请输入服务器地址"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4" v-show="collapseVisible"> <el-col :span="4" v-show="collapseVisible">
<el-form-item label="从属网关ID" prop="gatewayId"> <el-form-item label="从属网关ID" prop="gatewayId">
<el-input <el-input v-model="queryParams.gatewayId" placeholder="请输入从属网关ID" clearable @keyup.enter="handleQuery" />
v-model="queryParams.gatewayId"
placeholder="请输入从属网关ID"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4" v-show="collapseVisible"> <el-col :span="4" v-show="collapseVisible">
<el-form-item label="纬度" prop="latValue"> <el-form-item label="纬度" prop="latValue">
<el-input <el-input v-model="queryParams.latValue" placeholder="请输入纬度" clearable @keyup.enter="handleQuery" />
v-model="queryParams.latValue"
placeholder="请输入纬度"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4" v-show="collapseVisible"> <el-col :span="4" v-show="collapseVisible">
<el-form-item label="经度" prop="lagValue"> <el-form-item label="经度" prop="lagValue">
<el-input <el-input v-model="queryParams.lagValue" placeholder="请输入经度" clearable @keyup.enter="handleQuery" />
v-model="queryParams.lagValue"
placeholder="请输入经度"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item> </el-form-item>
</el-col> </el-col> -->
<el-col :span="4" v-show="collapseVisible"> <el-col :span="4" v-show="collapseVisible">
<el-form-item label="是否告警" prop="alertEnabled"> <el-form-item label="是否告警" prop="alertEnabled">
<el-select v-model="queryParams.alertEnabled" placeholder="请选择设备类型" clearable> <el-select v-model="queryParams.alertEnabled" placeholder="请选择设备类型" clearable>
<el-option <el-option v-for="dict in alertEnabled" :key="dict.value" :label="dict.label" :value="dict.value" />
v-for="dict in alertEnabled"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4" v-show="collapseVisible"> <!-- <el-col :span="4" v-show="collapseVisible">
<el-form-item label="设备模型" prop="deviceModelId"> <el-form-item label="设备模型" prop="deviceModelId">
<el-select v-model="queryParams.deviceModelId" placeholder="请选择设备模型id" clearable> <el-select v-model="queryParams.deviceModelId" placeholder="请选择设备模型id" clearable>
<el-option label="请选择设备模型" value="deviceModelId" /> <el-option label="请选择设备模型" value="deviceModelId" />
@ -185,16 +109,12 @@
<el-option label="请添加设备分组" value="" /> <el-option label="请添加设备分组" value="" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col> -->
<el-col :span="4" v-show="collapseVisible"> <el-col :span="4" v-show="collapseVisible">
<el-form-item label="组态图片名称" prop="imgConfiguration"> <el-form-item label="组态图片名称" prop="imgConfiguration">
<el-select v-model="queryParams.imgConfiguration" placeholder="请选择组态图片名称" clearable> <el-select v-model="queryParams.imgConfiguration" placeholder="请选择组态图片名称" clearable>
<el-option <el-option v-for="dict in dc_img_configuration" :key="dict.value" :label="dict.label"
v-for="dict in dc_img_configuration" :value="dict.value" />
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -204,18 +124,14 @@
<el-form-item class="childTextAlignRight"> <el-form-item class="childTextAlignRight">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="info" plain icon="Refresh" @click="resetQuery">重置</el-button> <el-button type="info" plain icon="Refresh" @click="resetQuery">重置</el-button>
<el-button @click="toggleCollapse">{{editName}}</el-button> <el-button @click="toggleCollapse">{{ editName }}</el-button>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button type="success" icon="Plus" @click="handleAdd">新增</el-button>
type="success"
icon="Plus"
@click="handleAdd"
>新增</el-button>
</el-col> </el-col>
<!-- <el-col :span="1.5"> <!-- <el-col :span="1.5">
<el-button <el-button
@ -225,101 +141,86 @@
>修改</el-button> >修改</el-button>
</el-col> --> </el-col> -->
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button type="success" icon="Delete" @click="handleDelete">删除</el-button>
type="success"
icon="Delete"
@click="handleDelete"
>删除</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button type="warning" icon="Download" @click="handleExport">导出</el-button>
type="warning"
icon="Download"
@click="handleExport"
>导出</el-button>
</el-col> </el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"> <right-toolbar v-model:showSearch="showSearch" @queryTable="getList">
</right-toolbar> </right-toolbar>
</el-row> </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"
<el-table-column type="selection" width="55" align="center" fixed="left"/> @sort-change="sortChange" @filter-change="filterChange" :max-height="tableHeight" :border="true"
<el-table-column label="中台设备编码" align="center" prop="centerDeviceCode" :width="150" sortable/> :column-width-draggable="true">
<el-table-column label="设备名称" align="center" prop="deviceName" :width="150" sortable/> <el-table-column type="selection" width="55" align="center" fixed="left" />
<el-table-column label="通讯来源类型" align="center" prop="deviceSource" :width="150" column-key="deviceSource" filter-placement="bottom-end" <el-table-column label="中台设备编码" align="center" prop="centerDeviceCode" :width="150" sortable />
:filters="getfilterNameItem('deviceSource')" :filter-method="filterMethod" sortable/> <el-table-column label="设备名称" align="center" prop="deviceName" :width="150" sortable />
<el-table-column label="是否可用" align="center" prop="enabledFlag" :width="120" column-key="enabledFlag" filter-placement="bottom-end" <el-table-column label="通讯来源类型" align="center" prop="deviceSource" :width="150" column-key="deviceSource"
:filters="getfilterNameItem('enabledFlag')" :filter-method="filterMethod" sortable> 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"> <template #default="scope">
<dict-tag :options="enabledFlagTable" :value="scope.row.enabledFlag"/> <dict-tag :options="enabledFlagTable" :value="scope.row.enabledFlag" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="设备类型" align="center" prop="deviceType" :width="120" column-key="deviceType" filter-placement="bottom-end" <el-table-column label="设备类型" align="center" prop="deviceType" :width="120" column-key="deviceType"
:filters="getfilterNameItem('deviceType')" :filter-method="filterMethod" sortable> filter-placement="bottom-end" :filters="getfilterNameItem('deviceType')" :filter-method="filterMethod"
sortable>
<template #default="scope"> <template #default="scope">
<dict-tag :options="dc_device_type" :value="scope.row.deviceType"/> <dict-tag :options="dc_device_type" :value="scope.row.deviceType" />
</template> </template>
</el-table-column> </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="locationCode" :width="120" sortable />
<el-table-column label="位置名称" align="center" prop="locationName" :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/> <el-table-column label="设备应用范围" align="center" prop="deviceClass" :width="150" sortable />
<el-table-column label="接口名称" align="center" prop="apiName" :width="120" sortable/> <el-table-column label="接口名称" align="center" prop="apiName" :width="120" sortable />
<el-table-column label="服务器地址" align="center" prop="serverIp" :width="120" sortable/> <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="从属网关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="latValue" :width="120" sortable />
<el-table-column label="经度" align="center" prop="lagValue" :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" <el-table-column label="是否告警" align="center" prop="alertEnabled" :width="120" column-key="alertEnabled"
:filters="getfilterNameItem('alertEnabled')" :filter-method="filterMethod" sortable> filter-placement="bottom-end" :filters="getfilterNameItem('alertEnabled')" :filter-method="filterMethod"
sortable>
<template #default="scope"> <template #default="scope">
<dict-tag :options="alertEnabledTable" :value="scope.row.alertEnabled"/> <dict-tag :options="alertEnabledTable" :value="scope.row.alertEnabled" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="设备模型" align="center" prop="deviceModelId" :width="120" column-key="deviceModelId" filter-placement="bottom-end" <!-- <el-table-column label="设备模型" align="center" prop="deviceModelId" :width="120" column-key="deviceModelId"
:filters="getfilterNameItem('deviceModelId')" :filter-method="filterMethod" sortable> filter-placement="bottom-end" :filters="getfilterNameItem('deviceModelId')" :filter-method="filterMethod"
sortable>
</el-table-column> </el-table-column>
<!-- <el-table-column label="租户号" align="center" prop="tentantId" :width="120" 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" <el-table-column label="设备分组" align="center" prop="deviceGroupName" :width="150" column-key="deviceGroupName"
:filters="getfilterNameItem('deviceGroupName')" :filter-method="filterMethod" sortable/> filter-placement="bottom-end" :filters="getfilterNameItem('deviceGroupName')" :filter-method="filterMethod"
<el-table-column label="设备排序" align="center" prop="sort" :width="120" sortable/> sortable />-->
<el-table-column label="组态图片名称" align="center" prop="imgConfiguration" :width="150" column-key="imgConfiguration" filter-placement="bottom-end" <el-table-column label="组态图片名称" align="center" prop="imgConfiguration" :width="150"
:filters="getfilterNameItem('imgConfiguration')" :filter-method="filterMethod" sortable> column-key="imgConfiguration" filter-placement="bottom-end" :filters="getfilterNameItem('imgConfiguration')"
:filter-method="filterMethod" sortable>
<template #default="scope"> <template #default="scope">
<dict-tag :options="dc_img_configuration" :value="scope.row.imgConfiguration"/> <dict-tag :options="dc_img_configuration" :value="scope.row.imgConfiguration" />
</template> </template>
</el-table-column> </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> <template #header>
<div class="fixed-column-header" style="text-align: center;display: block;" @dblclick="toggleFixedColumns"> <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> </div>
</template> </template>
<template #default="scope"> <template #default="scope">
<el-button <el-button type="text" icon="Edit" @click="handleParams(scope.row)">维护设备参数</el-button>
type="text" <el-button type="text" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
icon="Edit" <el-button type="text" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
@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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination <pagination v-show="total > 0" :total="total" v-model:page="params.pageNum" v-model:limit="params.pageSize"
v-show="total>0" @pagination="getList" class="paddingBothLeftRight" />
:total="total"
v-model:page="params.pageNum"
v-model:limit="params.pageSize"
@pagination="getList"
class="paddingBothLeftRight"
/>
</el-col> </el-col>
</el-row> </el-row>
<!-- 添加或修改设备信息对话框 --> <!-- 添加或修改设备信息对话框 -->
@ -344,12 +245,7 @@
<el-col :span="12"> <el-col :span="12">
<el-form-item label="通讯来源类型" prop="deviceSourceId"> <el-form-item label="通讯来源类型" prop="deviceSourceId">
<el-select v-model="form.deviceSourceId" placeholder="请选择是否可用" @change="deviceSourceChange"> <el-select v-model="form.deviceSourceId" placeholder="请选择是否可用" @change="deviceSourceChange">
<el-option <el-option v-for="dict in dc_device_source" :key="dict.value" :label="dict.label" :value="dict.value" />
v-for="dict in dc_device_source"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -361,23 +257,14 @@
<el-col :span="12"> <el-col :span="12">
<el-form-item label="是否可用" prop="enabledFlag"> <el-form-item label="是否可用" prop="enabledFlag">
<el-select v-model="form.enabledFlag" placeholder="请选择是否可用"> <el-select v-model="form.enabledFlag" placeholder="请选择是否可用">
<el-option <el-option v-for="dict in enabledFlag" :key="dict.value" :label="dict.label" :value="dict.value" />
v-for="dict in enabledFlag"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="设备类型" prop="deviceType"> <el-form-item label="设备类型" prop="deviceType">
<el-select v-model="form.deviceType" placeholder="请选择设备类型"> <el-select v-model="form.deviceType" placeholder="请选择设备类型">
<el-option <el-option v-for="dict in dc_device_type" :key="dict.value" :label="dict.label" :value="dict.value">
v-for="dict in dc_device_type"
:key="dict.value"
:label="dict.label"
:value="dict.value">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -386,12 +273,12 @@
<el-form-item label="所属组织名称" prop="orgName"> <el-form-item label="所属组织名称" prop="orgName">
<el-tree-select v-model="form.orgName" :data="deptOptions" <el-tree-select v-model="form.orgName" :data="deptOptions"
:props="{ value: 'label', label: 'label', children: 'children' }" value-key="id" placeholder="请选择" :props="{ value: 'label', label: 'label', children: 'children' }" value-key="id" placeholder="请选择"
check-strictly :default-expand-all="true" @node-click="selectDept"/> check-strictly :default-expand-all="true" @node-click="selectDept" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" v-show="false"> <el-col :span="12" v-show="false">
<el-form-item label="所属组织编码" prop="orgCode"> <el-form-item label="所属组织编码" prop="orgCode">
<el-input v-model="form.orgCode" placeholder="请选择组织名称" disabled/> <el-input v-model="form.orgCode" placeholder="请选择组织名称" disabled />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
@ -437,12 +324,7 @@
<el-col :span="12"> <el-col :span="12">
<el-form-item label="是否告警" prop="alertEnabled"> <el-form-item label="是否告警" prop="alertEnabled">
<el-select v-model="form.alertEnabled" placeholder="请选择是否告警"> <el-select v-model="form.alertEnabled" placeholder="请选择是否告警">
<el-option <el-option v-for="dict in alertEnabled" :key="dict.value" :label="dict.label" :value="dict.value" />
v-for="dict in alertEnabled"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -468,12 +350,8 @@
<el-col :span="12"> <el-col :span="12">
<el-form-item label="组态图片名称" prop="imgConfiguration"> <el-form-item label="组态图片名称" prop="imgConfiguration">
<el-select v-model="form.imgConfiguration" placeholder="请选择组态图片名称" clearable> <el-select v-model="form.imgConfiguration" placeholder="请选择组态图片名称" clearable>
<el-option <el-option v-for="dict in dc_img_configuration" :key="dict.value" :label="dict.label"
v-for="dict in dc_img_configuration" :value="dict.value" />
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -493,37 +371,41 @@
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<style lang="scss" > <style lang="scss" > @import "@/assets/styles/self-defined.scss";
@import "@/assets/styles/self-defined.scss";
.fixed-column-toggle { .fixed-column-toggle {
position: absolute; position: absolute;
left: 0; left: 0;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
.fixed-column-header { .fixed-column-header {
display: flex; display: flex;
align-items: center; align-items: center;
i { i {
margin-right: 5px; margin-right: 5px;
} }
} }
.my-custom-form .el-form-item { .my-custom-form .el-form-item {
.el-select{ .el-select {
width:100%; width: 100%;
} }
margin-right: 0 !important; margin-right: 0 !important;
width: 96%; width: 96%;
} }
</style> </style>
<script setup name="Device"> <script setup name="Device">
import { getUuid, listDevice, getDevice, delDevice, addDevice, updateDevice, listWithFilterColumn,selectDcBaseDeviceinfoMaxSort } from "@/api/model/device"; import { getUuid, listDevice, getDevice, delDevice, addDevice, updateDevice, listWithFilterColumn, selectDcBaseDeviceinfoMaxSort } from "@/api/model/device";
import { deptTreeSelect } from "@/api/system/user"; import { deptTreeSelect } from "@/api/system/user";
import lock from "@/assets/icons/svg/lock.svg"; import lock from "@/assets/icons/svg/lock.svg";
import { ref,onMounted,onUnmounted } from "vue"; import { ref, onMounted, onUnmounted } from "vue";
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus';
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const {dc_img_configuration, dc_device_type, dc_device_source } = proxy.useDict('dc_img_configuration','dc_device_type','dc_device_source'); const { dc_img_configuration, dc_device_type, dc_device_source } = proxy.useDict('dc_img_configuration', 'dc_device_type', 'dc_device_source');
const router = useRouter(); const router = useRouter();
const deviceList = ref([]); const deviceList = ref([]);
const open = ref(false); const open = ref(false);
@ -540,25 +422,26 @@ const editName = ref("更多筛选项");
const deptOptions = ref([]); const deptOptions = ref([]);
const disabledDeviceCode = ref(false); const disabledDeviceCode = ref(false);
const fixedColumns = ref(false); const fixedColumns = ref(false);
const fixedOrderColumn = ref(false);
const tableHeight = ref("0px"); const tableHeight = ref("0px");
const sortItemMap = ref({}); const sortItemMap = ref({});
const queryParamFilter = ref({}); const queryParamFilter = ref({});
const sortProps = ref([]); const sortProps = ref([]);
const enabledFlag = ref([ const enabledFlag = ref([
{label: '可用', value: true, elTagType: 'default', elTagClass: null}, { label: '可用', value: true, elTagType: 'default', elTagClass: null },
{label: '不可用', value: false, elTagType: 'default', elTagClass: null} { label: '不可用', value: false, elTagType: 'default', elTagClass: null }
]); ]);
const alertEnabled = ref([ const alertEnabled = ref([
{label: '告警', value: true, elTagType: 'default', elTagClass: null}, { label: '告警', value: true, elTagType: 'default', elTagClass: null },
{label: '不告警', value: false, elTagType: 'default', elTagClass: null} { label: '不告警', value: false, elTagType: 'default', elTagClass: null }
]); ]);
const enabledFlagTable = ref([ const enabledFlagTable = ref([
{label: '可用', value: 'true', elTagType: 'default', elTagClass: null}, { label: '可用', value: 'true', elTagType: 'default', elTagClass: null },
{label: '不可用', value: 'false', elTagType: 'default', elTagClass: null} { label: '不可用', value: 'false', elTagType: 'default', elTagClass: null }
]); ]);
const alertEnabledTable = ref([ const alertEnabledTable = ref([
{label: '告警', value: 'true', elTagType: 'default', elTagClass: null}, { label: '告警', value: 'true', elTagType: 'default', elTagClass: null },
{label: '不告警', value: 'false', elTagType: 'default', elTagClass: null} { label: '不告警', value: 'false', elTagType: 'default', elTagClass: null }
]); ]);
const data = reactive({ const data = reactive({
form: {}, form: {},
@ -620,9 +503,9 @@ const { queryParams, form, rules, params } = toRefs(data);
function getList() { function getList() {
loading.value = true; loading.value = true;
let param = { let param = {
"obj":queryParams.value, "obj": queryParams.value,
"params":queryParamFilter.value, "params": queryParamFilter.value,
"sort":sortProps.value, "sort": sortProps.value,
"pageNum": params.value.pageNum, "pageNum": params.value.pageNum,
"pageSize": params.value.pageSize, "pageSize": params.value.pageSize,
} }
@ -707,12 +590,12 @@ function handleSelectionChange(selection) {
function handleAdd() { function handleAdd() {
reset(); reset();
loading.value = true; loading.value = true;
getUuid().then(response=>{ getUuid().then(response => {
form.value.centerDeviceCode = response.msg; form.value.centerDeviceCode = response.msg;
form.value.uuid = response.msg; form.value.uuid = response.msg;
form.value.enabledFlag = true; form.value.enabledFlag = true;
}); });
selectDcBaseDeviceinfoMaxSort().then(response=>{ selectDcBaseDeviceinfoMaxSort().then(response => {
form.value.sort = response.data?.sort + 1; form.value.sort = response.data?.sort + 1;
loading.value = false; loading.value = false;
}) })
@ -725,13 +608,13 @@ function handleAdd() {
function handleUpdate(row) { function handleUpdate(row) {
reset(); reset();
const _id = row.id || ids.value; const _id = row.id || ids.value;
if(_id.length === 0){ if (_id.length === 0) {
ElMessageBox.alert('请选择需要修改的记录', '提示', { ElMessageBox.alert('请选择需要修改的记录', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
center: true, center: true,
}) })
return; return;
}else if(_id.length > 1){ } else if (_id.length > 1) {
ElMessageBox.alert('只能选择一条记录进行修改', '提示', { ElMessageBox.alert('只能选择一条记录进行修改', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
center: true, center: true,
@ -760,37 +643,37 @@ function submitForm() {
} else { } else {
loading.value = true; loading.value = true;
let param = { let param = {
"obj":{"centerDeviceCode":form.value.centerDeviceCode}, "obj": { "centerDeviceCode": form.value.centerDeviceCode },
"params":new Object(), "params": new Object(),
"sort":[], "sort": [],
"pageNum": 1, "pageNum": 1,
"pageSize": 10, "pageSize": 10,
} }
listWithFilterColumn(param).then(response => { listWithFilterColumn(param).then(response => {
let total = response.data.tableData.total; let total = response.data.tableData.total;
if(total > 0){ if (total > 0) {
ElMessageBox.alert('设备中台编号不能重复', '提示', { ElMessageBox.alert('设备中台编号不能重复', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
center: true, center: true,
}) })
return; return;
}else{ } else {
let param = { let param = {
"obj":{"uuid":form.value.uuid}, "obj": { "uuid": form.value.uuid },
"params":new Object(), "params": new Object(),
"sort":[], "sort": [],
"pageNum": 1, "pageNum": 1,
"pageSize": 10, "pageSize": 10,
} }
listWithFilterColumn(param).then(response => { listWithFilterColumn(param).then(response => {
let total = response.data.tableData.total; let total = response.data.tableData.total;
if(total > 0){ if (total > 0) {
ElMessageBox.alert('设备uuid不能重复', '提示', { ElMessageBox.alert('设备uuid不能重复', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
center: true, center: true,
}) })
return; return;
}else{ } else {
addDevice(form.value).then(response => { addDevice(form.value).then(response => {
proxy.$modal.msgSuccess("新增成功"); proxy.$modal.msgSuccess("新增成功");
open.value = false; open.value = false;
@ -809,7 +692,7 @@ function submitForm() {
/** 删除按钮操作 */ /** 删除按钮操作 */
function handleDelete(row) { function handleDelete(row) {
const _ids = row.id || ids.value; const _ids = row.id || ids.value;
if(_ids.length == 0){ if (_ids.length == 0) {
ElMessageBox.alert('请先选择要删除的项', '提示', { ElMessageBox.alert('请先选择要删除的项', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
center: true, center: true,
@ -817,27 +700,27 @@ function handleDelete(row) {
return; return;
} }
const _names = row.deviceName || names.value; const _names = row.deviceName || names.value;
proxy.$modal.confirm('是否确认删除设备信息名称为"' + _names + '"的数据项？').then(function() { proxy.$modal.confirm('是否确认删除设备信息名称为"' + _names + '"的数据项？').then(function () {
return delDevice(_ids); return delDevice(_ids);
}).then(() => { }).then(() => {
getList(); getList();
proxy.$modal.msgSuccess("删除成功"); proxy.$modal.msgSuccess("删除成功");
}).catch(() => {}); }).catch(() => { });
} }
/** 导出按钮操作 */ /** 导出按钮操作 */
function handleExport() { function handleExport() {
let param = { let param = {
"obj":queryParams.value, "obj": queryParams.value,
"params":queryParamFilter.value, "params": queryParamFilter.value,
"sort":sortProps.value, "sort": sortProps.value,
} }
proxy.newDownload('model/dcBaseDeviceinfo/export', { proxy.newDownload('model/dcBaseDeviceinfo/export', {
...param ...param
}, `device_${new Date().getTime()}.xlsx`) }, `device_${new Date().getTime()}.xlsx`)
} }
function handleParams(row){ function handleParams(row) {
router.push({ router.push({
path: "params", path: "params",
query: { query: {
@ -850,9 +733,9 @@ function handleParams(row){
function toggleCollapse() { function toggleCollapse() {
collapseVisible.value = !collapseVisible.value; collapseVisible.value = !collapseVisible.value;
if(collapseVisible.value){ if (collapseVisible.value) {
editName.value = "折叠筛选项"; editName.value = "折叠筛选项";
}else{ } else {
editName.value = "更多筛选项" editName.value = "更多筛选项"
} }
} }
@ -863,14 +746,14 @@ function getDeptTree() {
}); });
}; };
function selectDept(val){ function selectDept(val) {
form.value.orgCode=val.id; form.value.orgCode = val.id;
} }
function deviceSourceChange(val){ function deviceSourceChange(val) {
dc_device_source.value.forEach(item=>{ dc_device_source.value.forEach(item => {
if(item.value==val){ if (item.value == val) {
form.value.deviceSource=item.label; form.value.deviceSource = item.label;
} }
}) })
} }
@ -878,8 +761,11 @@ function deviceSourceChange(val){
function toggleFixedColumns() { function toggleFixedColumns() {
fixedColumns.value = !fixedColumns.value; fixedColumns.value = !fixedColumns.value;
} }
function toggleFixedOrderColumns() {
fixedOrderColumn.value = !fixedOrderColumn.value;
}
onMounted(()=>{ onMounted(() => {
calculateTableHeight(); calculateTableHeight();
window.addEventListener('resize', calculateTableHeight); window.addEventListener('resize', calculateTableHeight);
window.onresize = () => { window.onresize = () => {
@ -893,14 +779,14 @@ onUnmounted(() => {
window.removeEventListener('resize', calculateTableHeight); window.removeEventListener('resize', calculateTableHeight);
}); });
watch( watch(
[collapseVisible,showSearch], [collapseVisible, showSearch],
() => { () => {
calculateTableHeight(); calculateTableHeight();
} }
); );
const calculateTableHeight = () => { const calculateTableHeight = () => {
nextTick(() => { nextTick(() => {
const heightForm = proxy.$refs.queryRef?.$el.clientHeight||0; const heightForm = proxy.$refs.queryRef?.$el.clientHeight || 0;
const windowHeight = window.innerHeight; const windowHeight = window.innerHeight;
const paginationHeight = 60; const paginationHeight = 60;
const tableHeaderHeight = 40; const tableHeaderHeight = 40;
@ -910,52 +796,74 @@ const calculateTableHeight = () => {
}); });
}; };
function getfilterNameItem(value){ function getfilterNameItem(value) {
let result = ''; let result = '';
let resultItem = new Object(); let resultItem = null;
if(value==='enabledFlag'){ if (value === 'enabledFlag') {
if(sortItemMap.value[value]?.length>0){ if (sortItemMap.value[value]?.length > 0) {
result = sortItemMap.value[value].map(element=>{ result = sortItemMap.value[value].map(element => {
enabledFlag.value.forEach(item=>{ enabledFlag.value.forEach(item => {
if(item.value===element.text){ if (item.value === element.text) {
resultItem = item.label;
}
});
if (resultItem != null) {
return {
text: resultItem,
value: element.value,
};
}
});
}
} else if (value === 'alertEnabled') {
if (sortItemMap.value[value]?.length > 0) {
result = sortItemMap.value[value].map(element => {
alertEnabled.value.forEach(item => {
if (item.value === element.text) {
resultItem = item.label; resultItem = item.label;
} }
}); });
if (resultItem != null) {
return { return {
text: resultItem, text: resultItem,
value: element.value, value: element.value,
}; };
}
}); });
} }
}else if(value==='alertEnabled'){ } else if (value === 'deviceType') {
if(sortItemMap.value[value]?.length>0){ if (sortItemMap.value[value]?.length > 0) {
result = sortItemMap.value[value].map(element=>{ result = sortItemMap.value[value].map(element => {
alertEnabled.value.forEach(item=>{ dc_device_type.value.forEach(item => {
if(item.value===element.text){ if (item.value === String(element.text)) {
resultItem = item.label; resultItem = item.label;
} }
}); });
if (resultItem != null) {
return { return {
text: resultItem, text: resultItem,
value: element.value, value: element.value,
}; };
}
}); });
} }
}else if(value==='deviceType'){ } else if (value === 'imgConfiguration') {
if(sortItemMap.value[value]?.length>0){ if (sortItemMap.value[value]?.length > 0) {
result = sortItemMap.value[value].map(element=>{ result = sortItemMap.value[value].map(element => {
dc_device_type.value.forEach(item=>{ dc_img_configuration.value.forEach(item => {
if(item.value===String(element.text)){ if (item.value === String(element.text)) {
resultItem = item.label; resultItem = item.label;
} }
}); });
if (resultItem != null) {
return { return {
text: resultItem, text: resultItem,
value: element.value, value: element.value,
}; };
}
}); });
} }
}else{ } else {
result = sortItemMap.value[value]; result = sortItemMap.value[value];
} }
return result; return result;
@ -964,15 +872,15 @@ function getfilterNameItem(value){
function filterChange(filterItem) { function filterChange(filterItem) {
const outerObjectKeys = Object.keys(filterItem); const outerObjectKeys = Object.keys(filterItem);
if(outerObjectKeys.length===1){ if (outerObjectKeys.length === 1) {
queryParamFilter.value[outerObjectKeys[0]] = filterItem[outerObjectKeys[0]]; queryParamFilter.value[outerObjectKeys[0]] = filterItem[outerObjectKeys[0]];
} }
loading.value = true; loading.value = true;
let param = { let param = {
"obj":queryParams.value, "obj": queryParams.value,
"params":queryParamFilter.value, "params": queryParamFilter.value,
"sort":sortProps.value, "sort": sortProps.value,
"pageNum": params.value.pageNum, "pageNum": params.value.pageNum,
"pageSize": params.value.pageSize, "pageSize": params.value.pageSize,
} }
@ -986,21 +894,21 @@ function filterChange(filterItem) {
} }
function filterMethod(value, row, column){ function filterMethod(value, row, column) {
if(column==null){ if (column == null) {
return; return;
} }
if(queryParamFilter.value[column.property] == null || queryParamFilter.value[column.property].length==0){ if (queryParamFilter.value[column.property] == null || queryParamFilter.value[column.property].length == 0) {
queryParamFilter.value[column.property]=[]; queryParamFilter.value[column.property] = [];
queryParamFilter.value[column.property].push(value); queryParamFilter.value[column.property].push(value);
}else{ } else {
let flag = false; let flag = false;
queryParamFilter.value[column.property].forEach(item=>{ queryParamFilter.value[column.property].forEach(item => {
if(item==value){ if (item == value) {
flag = true; flag = true;
} }
}) })
if(!flag){ if (!flag) {
queryParamFilter.value[column.property].push(value); queryParamFilter.value[column.property].push(value);
} }
@ -1008,13 +916,13 @@ function filterMethod(value, row, column){
} }
function sortChange({column, prop, order }){ function sortChange({ column, prop, order }) {
if(column==null){ if (column == null) {
return; return;
} }
sortProps.value = sortProps.value.filter(item => item.prop !== prop); sortProps.value = sortProps.value.filter(item => item.prop !== prop);
if(order!=null){ if (order != null) {
sortProps.value.push({prop:prop,order:order}); sortProps.value.push({ prop: prop, order: order });
} }
getList(); getList();
} }

Write Preview
Loading…
Cancel
Save