From b3255257de991bf1f48aa85fd0a69bf8faf4c03d Mon Sep 17 00:00:00 2001
From: ljlong_2630 <ljlong_2630@yeah.net>
Date: Thu, 2 Nov 2023 08:39:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=9C=BA=E6=9E=84=E6=A0=91?=
 =?UTF-8?q?=E4=B8=8D=E8=83=BD=E7=82=B9=E5=AD=90=E8=8A=82=E7=82=B9=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=EF=BC=8C=E5=92=8C=E5=A4=9A=E4=BD=99=E5=AD=97=E6=AE=B5?=
 =?UTF-8?q?=E5=8E=BB=E6=8E=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/model/device/index.vue | 600 +++++++++++++------------------
 1 file changed, 254 insertions(+), 346 deletions(-)

diff --git a/src/views/model/device/index.vue b/src/views/model/device/index.vue
index 403d67b..2ba210f 100644
--- a/src/views/model/device/index.vue
+++ b/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,37 +109,29 @@
                   <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>
             <el-col :span="2">
             </el-col>
             <el-col :span="6">
-              <el-form-item  class="childTextAlignRight">
+              <el-form-item class="childTextAlignRight">
                 <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                 <el-button type="info" plain icon="Refresh" @click="resetQuery">重置</el-button>
-                <el-button @click="toggleCollapse">{{editName}}</el-button>
+                <el-button @click="toggleCollapse">{{ editName }}</el-button>
               </el-form-item>
             </el-col>
           </el-row>
         </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,107 +141,92 @@
             >修改</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-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 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>
             <template #default="scope">
-              <dict-tag :options="enabledFlagTable" :value="scope.row.enabledFlag"/>
+              <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"/>
+              <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="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/>
-          <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="从属网关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="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 />
+          <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="从属网关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>
             <template #default="scope">
-              <dict-tag :options="alertEnabledTable" :value="scope.row.alertEnabled"/>
+              <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"/>
+              <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>
+              <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="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>
     <!-- 添加或修改设备信息对话框 -->
     <el-dialog :title="title" v-model="open" width="800px" append-to-body>
       <el-form ref="deviceRef" :model="form" :rules="rules" label-width="125px">
-        <el-row>  
+        <el-row>
           <el-col :span="12">
             <el-form-item label="中台设备编码" prop="centerDeviceCode">
               <el-input :disabled="disabledDeviceCode" v-model="form.centerDeviceCode" placeholder="请输入中台设备编码" />
@@ -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>
@@ -385,13 +272,13 @@
           <el-col :span="12">
             <el-form-item label="所属组织名称" prop="orgName">
               <el-tree-select v-model="form.orgName" :data="deptOptions"
-                  :props="{ value: 'label', label: 'label', children: 'children' }" value-key="id" placeholder="请选择"
-                  check-strictly :default-expand-all="true"  @node-click="selectDept"/>
+                :props="{ value: 'label', label: 'label', children: 'children' }" value-key="id" placeholder="请选择"
+                check-strictly :default-expand-all="true" @node-click="selectDept" />
             </el-form-item>
           </el-col>
           <el-col :span="12" v-show="false">
             <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-col>
           <el-col :span="12">
@@ -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,13 +350,9 @@
           <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-select>
+                <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>
           <el-col :span="12">
@@ -493,37 +371,41 @@
     </el-dialog>
   </div>
 </template>
-<style lang="scss" > 
-  @import "@/assets/styles/self-defined.scss";
-  .fixed-column-toggle {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-  .fixed-column-header {
-    display: flex;
-    align-items: center;
-    i {
-      margin-right: 5px;
-    }
-  }
-  .my-custom-form .el-form-item {
-      .el-select{
-        width:100%;
-      }
-      margin-right: 0 !important;
-      width: 96%;
-  }
+<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%;
+ }
 </style>
 <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 lock from "@/assets/icons/svg/lock.svg";
-import { ref,onMounted,onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import { ElMessageBox } from 'element-plus';
 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 deviceList = ref([]);
 const open = ref(false);
@@ -540,25 +422,26 @@ 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({});
 const sortProps = ref([]);
 const enabledFlag = ref([
-  {label: '可用', value: true, elTagType: 'default', elTagClass: null}, 
-  {label: '不可用', value: false, elTagType: 'default', elTagClass: null}
+  { label: '可用', value: true, elTagType: 'default', elTagClass: null },
+  { label: '不可用', value: false, elTagType: 'default', elTagClass: null }
 ]);
 const alertEnabled = ref([
-  {label: '告警', value: true, elTagType: 'default', elTagClass: null}, 
-  {label: '不告警', value: false, elTagType: 'default', elTagClass: null}
+  { label: '告警', value: true, elTagType: 'default', elTagClass: null },
+  { label: '不告警', value: false, elTagType: 'default', elTagClass: null }
 ]);
 const enabledFlagTable = ref([
-  {label: '可用', value: 'true', elTagType: 'default', elTagClass: null}, 
-  {label: '不可用', value: 'false', elTagType: 'default', elTagClass: null}
+  { label: '可用', value: 'true', elTagType: 'default', elTagClass: null },
+  { label: '不可用', value: 'false', elTagType: 'default', elTagClass: null }
 ]);
 const alertEnabledTable = ref([
-  {label: '告警', value: 'true', elTagType: 'default', elTagClass: null}, 
-  {label: '不告警', value: 'false', elTagType: 'default', elTagClass: null}
+  { label: '告警', value: 'true', elTagType: 'default', elTagClass: null },
+  { label: '不告警', value: 'false', elTagType: 'default', elTagClass: null }
 ]);
 const data = reactive({
   form: {},
@@ -620,9 +503,9 @@ const { queryParams, form, rules, params } = toRefs(data);
 function getList() {
   loading.value = true;
   let param = {
-    "obj":queryParams.value,
-    "params":queryParamFilter.value,
-    "sort":sortProps.value,
+    "obj": queryParams.value,
+    "params": queryParamFilter.value,
+    "sort": sortProps.value,
     "pageNum": params.value.pageNum,
     "pageSize": params.value.pageSize,
   }
@@ -707,12 +590,12 @@ function handleSelectionChange(selection) {
 function handleAdd() {
   reset();
   loading.value = true;
-  getUuid().then(response=>{
+  getUuid().then(response => {
     form.value.centerDeviceCode = response.msg;
     form.value.uuid = response.msg;
     form.value.enabledFlag = true;
   });
-  selectDcBaseDeviceinfoMaxSort().then(response=>{
+  selectDcBaseDeviceinfoMaxSort().then(response => {
     form.value.sort = response.data?.sort + 1;
     loading.value = false;
   })
@@ -725,17 +608,17 @@ function handleAdd() {
 function handleUpdate(row) {
   reset();
   const _id = row.id || ids.value;
-  if(_id.length === 0){
+  if (_id.length === 0) {
     ElMessageBox.alert('请选择需要修改的记录', '提示', {
-            confirmButtonText: '确定',
-            center: true,
-          })
+      confirmButtonText: '确定',
+      center: true,
+    })
     return;
-  }else if(_id.length > 1){
+  } else if (_id.length > 1) {
     ElMessageBox.alert('只能选择一条记录进行修改', '提示', {
-            confirmButtonText: '确定',
-            center: true,
-          })
+      confirmButtonText: '确定',
+      center: true,
+    })
     return;
   }
   getDevice(_id).then(response => {
@@ -744,7 +627,7 @@ function handleUpdate(row) {
     disabledDeviceCode.value = true;
     title.value = "修改设备信息";
   });
-  
+
 }
 
 /** 提交按钮 */
@@ -760,37 +643,37 @@ function submitForm() {
       } else {
         loading.value = true;
         let param = {
-          "obj":{"centerDeviceCode":form.value.centerDeviceCode},
-          "params":new Object(),
-          "sort":[],
+          "obj": { "centerDeviceCode": form.value.centerDeviceCode },
+          "params": new Object(),
+          "sort": [],
           "pageNum": 1,
           "pageSize": 10,
         }
         listWithFilterColumn(param).then(response => {
           let total = response.data.tableData.total;
-          if(total > 0){
+          if (total > 0) {
             ElMessageBox.alert('设备中台编号不能重复', '提示', {
               confirmButtonText: '确定',
               center: true,
             })
             return;
-          }else{
+          } else {
             let param = {
-              "obj":{"uuid":form.value.uuid},
-              "params":new Object(),
-              "sort":[],
+              "obj": { "uuid": form.value.uuid },
+              "params": new Object(),
+              "sort": [],
               "pageNum": 1,
               "pageSize": 10,
             }
             listWithFilterColumn(param).then(response => {
               let total = response.data.tableData.total;
-              if(total > 0){
+              if (total > 0) {
                 ElMessageBox.alert('设备uuid不能重复', '提示', {
                   confirmButtonText: '确定',
                   center: true,
                 })
                 return;
-              }else{
+              } else {
                 addDevice(form.value).then(response => {
                   proxy.$modal.msgSuccess("新增成功");
                   open.value = false;
@@ -809,35 +692,35 @@ function submitForm() {
 /** 删除按钮操作 */
 function handleDelete(row) {
   const _ids = row.id || ids.value;
-  if(_ids.length == 0){
+  if (_ids.length == 0) {
     ElMessageBox.alert('请先选择要删除的项', '提示', {
-              confirmButtonText: '确定',
-              center: true,
-            })
+      confirmButtonText: '确定',
+      center: true,
+    })
     return;
   }
   const _names = row.deviceName || names.value;
-  proxy.$modal.confirm('是否确认删除设备信息名称为"' + _names + '"的数据项？').then(function() {
+  proxy.$modal.confirm('是否确认删除设备信息名称为"' + _names + '"的数据项？').then(function () {
     return delDevice(_ids);
   }).then(() => {
     getList();
     proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
+  }).catch(() => { });
 }
 
 /** 导出按钮操作 */
 function handleExport() {
   let param = {
-    "obj":queryParams.value,
-    "params":queryParamFilter.value,
-    "sort":sortProps.value,
+    "obj": queryParams.value,
+    "params": queryParamFilter.value,
+    "sort": sortProps.value,
   }
   proxy.newDownload('model/dcBaseDeviceinfo/export', {
     ...param
   }, `device_${new Date().getTime()}.xlsx`)
 }
 
-function handleParams(row){
+function handleParams(row) {
   router.push({
     path: "params",
     query: {
@@ -850,9 +733,9 @@ function handleParams(row){
 
 function toggleCollapse() {
   collapseVisible.value = !collapseVisible.value;
-  if(collapseVisible.value){
+  if (collapseVisible.value) {
     editName.value = "折叠筛选项";
-  }else{
+  } else {
     editName.value = "更多筛选项"
   }
 }
@@ -863,14 +746,14 @@ function getDeptTree() {
   });
 };
 
-function selectDept(val){
-  form.value.orgCode=val.id;
+function selectDept(val) {
+  form.value.orgCode = val.id;
 }
 
-function deviceSourceChange(val){
-  dc_device_source.value.forEach(item=>{
-    if(item.value==val){
-      form.value.deviceSource=item.label;
+function deviceSourceChange(val) {
+  dc_device_source.value.forEach(item => {
+    if (item.value == val) {
+      form.value.deviceSource = item.label;
     }
   })
 }
@@ -878,8 +761,11 @@ function deviceSourceChange(val){
 function toggleFixedColumns() {
   fixedColumns.value = !fixedColumns.value;
 }
+function toggleFixedOrderColumns() {
+  fixedOrderColumn.value = !fixedOrderColumn.value;
+}
 
-onMounted(()=>{
+onMounted(() => {
   calculateTableHeight();
   window.addEventListener('resize', calculateTableHeight);
   window.onresize = () => {
@@ -893,14 +779,14 @@ onUnmounted(() => {
   window.removeEventListener('resize', calculateTableHeight);
 });
 watch(
-  [collapseVisible,showSearch],
+  [collapseVisible, showSearch],
   () => {
     calculateTableHeight();
   }
 );
 const calculateTableHeight = () => {
   nextTick(() => {
-    const heightForm = proxy.$refs.queryRef?.$el.clientHeight||0;
+    const heightForm = proxy.$refs.queryRef?.$el.clientHeight || 0;
     const windowHeight = window.innerHeight;
     const paginationHeight = 60;
     const tableHeaderHeight = 40;
@@ -910,52 +796,74 @@ const calculateTableHeight = () => {
   });
 };
 
-function getfilterNameItem(value){
+function getfilterNameItem(value) {
   let result = '';
-  let resultItem = new Object();
-  if(value==='enabledFlag'){
-    if(sortItemMap.value[value]?.length>0){
-      result = sortItemMap.value[value].map(element=>{
-        enabledFlag.value.forEach(item=>{
-          if(item.value===element.text){
+  let resultItem = null;
+  if (value === 'enabledFlag') {
+    if (sortItemMap.value[value]?.length > 0) {
+      result = sortItemMap.value[value].map(element => {
+        enabledFlag.value.forEach(item => {
+          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;
           }
         });
-        return {
-          text: resultItem,
-          value: element.value,
-        };
+        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){
+  } else if (value === 'deviceType') {
+    if (sortItemMap.value[value]?.length > 0) {
+      result = sortItemMap.value[value].map(element => {
+        dc_device_type.value.forEach(item => {
+          if (item.value === String(element.text)) {
             resultItem = item.label;
           }
         });
-        return {
-          text: resultItem,
-          value: element.value,
-        };
+        if (resultItem != null) {
+          return {
+            text: resultItem,
+            value: element.value,
+          };
+        }
       });
     }
-  }else if(value==='deviceType'){
-    if(sortItemMap.value[value]?.length>0){
-      result = sortItemMap.value[value].map(element=>{
-        dc_device_type.value.forEach(item=>{
-          if(item.value===String(element.text)){
+  } 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;
           }
         });
-        return {
-          text: resultItem,
-          value: element.value,
-        };
+        if (resultItem != null) {
+          return {
+            text: resultItem,
+            value: element.value,
+          };
+        }
       });
     }
-  }else{
+  } else {
     result = sortItemMap.value[value];
   }
   return result;
@@ -964,15 +872,15 @@ function getfilterNameItem(value){
 
 function filterChange(filterItem) {
   const outerObjectKeys = Object.keys(filterItem);
-  if(outerObjectKeys.length===1){
+  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,
+    "obj": queryParams.value,
+    "params": queryParamFilter.value,
+    "sort": sortProps.value,
     "pageNum": params.value.pageNum,
     "pageSize": params.value.pageSize,
   }
@@ -986,35 +894,35 @@ function filterChange(filterItem) {
 
 }
 
-function filterMethod(value, row, column){
-  if(column==null){
+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]=[];
+  if (queryParamFilter.value[column.property] == null || queryParamFilter.value[column.property].length == 0) {
+    queryParamFilter.value[column.property] = [];
     queryParamFilter.value[column.property].push(value);
-  }else{
+  } else {
     let flag = false;
-    queryParamFilter.value[column.property].forEach(item=>{
-      if(item==value){
+    queryParamFilter.value[column.property].forEach(item => {
+      if (item == value) {
         flag = true;
       }
     })
-    if(!flag){
-      queryParamFilter.value[column.property].push(value);    
+    if (!flag) {
+      queryParamFilter.value[column.property].push(value);
     }
-    
+
   }
-  
+
 }
 
-function sortChange({column, prop, order }){
-  if(column==null){
+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});
+  if (order != null) {
+    sortProps.value.push({ prop: prop, order: order });
   }
   getList();
 }