设备-修改点

Signed-off-by: hsshuxian <3049816743@qq.com>

ems-ui-cloud/src/api/basecfg/area.js

@@ -67,6 +67,13 @@ export function areaTreeSelect(areaCode, recursion) {
   })
 }
 
+export function getAreaTreeSelect(rootCode, layer) {
+  return request({
+    url: '/ems/basecfg/area/getAreaTree?rootCode=' + rootCode + '&layer=' + layer,
+    method: 'get'
+  })
+}
+
 // 查询区域树（根据设施类型过滤）
 export function areaTreeByFacsCategory(category, subCategory, recursion) {
   return request({

ems-ui-cloud/src/api/device/meterDevice.js

@@ -8,6 +8,14 @@ export function listDevice(query) {
     params: query
   })
 }
+//递归查询 区域 下的设备(分页)
+export function listAreaDevice(query) {
+  return request({
+    url: '/ems/meterDevice/listRecursionByArea',
+    method: 'get',
+    params: query
+  })
+}
 
 // 查询计量设备详细
 export function getDevice(id) {

ems-ui-cloud/src/views/basecfg/device/index.vue

@@ -60,22 +60,26 @@
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
             <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                       v-hasPermi="['ems:device:add']">新增
+                       v-hasPermi="['ems:device:add']"
+            >新增
             </el-button>
           </el-col>
           <el-col :span="1.5">
             <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
-                       v-hasPermi="['ems:device:edit']">修改
+                       v-hasPermi="['ems:device:edit']"
+            >修改
             </el-button>
           </el-col>
           <el-col :span="1.5">
             <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
-                       v-hasPermi="['ems:device:remove']">删除
+                       v-hasPermi="['ems:device:remove']"
+            >删除
             </el-button>
           </el-col>
           <el-col :span="1.5">
             <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
-                       v-hasPermi="['ems:device:export']">导出
+                       v-hasPermi="['ems:device:export']"
+            >导出
             </el-button>
           </el-col>
           <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
@@ -91,32 +95,13 @@
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
             <template slot-scope="scope">
               <el-button size="mini" type="text" icon="el-icon-info" @click="handleDevProcess(scope.row)"
-                         v-hasPermi="['basecfg:device:edit']" v-if="shouldShowDevProcessButton(scope.row)">器件
+                         v-hasPermi="['basecfg:device:edit']" v-if="shouldShowDevProcessButton(scope.row)"
+              >器件
               </el-button>
-              <el-button size="mini" type="text" icon="el-icon-info" @click="handleDetail(scope.row)"
-                         v-hasPermi="['basecfg:device:edit']">详情
+              <el-button size="mini" type="text" icon="el-icon-s-tools" @click="handleDetail(scope.row)"
+                         v-hasPermi="['basecfg:device:edit']"
+              >管理
               </el-button>
-              <!-- 下拉菜单 -->
-              <el-dropdown trigger="click" >
-                <el-button type="text" size="mini" @click="loadAbilities(scope.row)">
-                  操作<i class="el-icon-arrow-down el-icon--right"></i>
-                </el-button>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item
-                    v-for="ability in abilityDevice"
-                    :key="ability.abilityKey"
-                    @click.native="handleDeviceOperate(ability,scope.row)"
-                  >
-                    {{ ability.abilityName }}
-                  </el-dropdown-item>
-                  <el-dropdown-item @click.native="showCallLog(scope.row)">
-                    调用日志
-                  </el-dropdown-item>
-                  <el-dropdown-item @click.native="showReportLog(scope.row)">
-                    设备日志
-                  </el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
             </template>
           </el-table-column>
         </el-table>
@@ -142,7 +127,7 @@
             <el-form-item label="能力标识">
               <el-select v-model="callLogQueryParams.abilityKey" placeholder="请选择能力标识" clearable>
                 <el-option
-                  v-for="item in abilityDevice"
+                  v-for="item in abilityData"
                   :key="item.abilityKey"
                   :label="item.abilityName"
                   :value="item.abilityKey"
@@ -166,13 +151,18 @@
           </el-form>
           <el-table :data="callLogData" style="width: 100%" :show-header="true" :empty-text="'暂无数据'">
             <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
-            <el-table-column label="对象代码" prop="objCode"></el-table-column>
-            <el-table-column label="模型代码" prop="modelCode"></el-table-column>
-            <el-table-column label="能力标识" prop="abilityKey"></el-table-column>
+            <el-table-column label="对象编号" prop="objCode"></el-table-column>
+            <el-table-column label="对象名称" prop="objName"></el-table-column>
+            <el-table-column label="对象能力" prop="abilityName"></el-table-column>
             <el-table-column label="调用时间" prop="callTime"></el-table-column>
-            <el-table-column label="操作" align="center" width="100">
+            <el-table-column label="调用结果" align="center" width="100">
+              <template slot-scope="scope">
+                <span>{{ formatCallStatus(scope.row.callStatus) }}</span>
+              </template>
+            </el-table-column>            <el-table-column label="操作" align="center" width="100">
               <template slot-scope="scope">
-                <el-button type="text" size="mini" icon="el-icon-info" @click="handleCallLogDetail(scope.row)">详情</el-button>
+                <el-button type="text" size="mini" icon="el-icon-info" @click="handleCallLogDetail(scope.row)">详情
+                </el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -181,17 +171,21 @@
         <!-- 调用日志详情弹窗 -->
         <el-dialog :visible.sync="callLogDetailDialog" title="调用日志详情" width="50%">
           <div v-if="callLogDetailData">
-            <p><strong>对象代码：</strong>{{ callLogDetailData.objCode }}</p>
+            <p><strong>对象编号：</strong>{{ callLogDetailData.objCode }}</p>
+            <p><strong>对象名称：</strong>{{ callLogDetailData.objName }}</p>
             <p><strong>对象类型：</strong>{{ formatObjType(callLogDetailData.objType) }}</p>
             <p><strong>模型代码：</strong>{{ callLogDetailData.modelCode }}</p>
             <p><strong>能力标识：</strong>{{ callLogDetailData.abilityKey }}</p>
+            <p><strong>对象能力：</strong>{{ callLogDetailData.abilityName }}</p>
             <p><strong>调用时间：</strong>{{ callLogDetailData.callTime }}</p>
             <p><strong>响应时间：</strong>{{ callLogDetailData.resTime }}</p>
             <p><strong>调用结果：</strong>{{ formatCallStatus(callLogDetailData.callStatus) }}</p>
             <p><strong>调用载体：</strong></p>
-            <pre style="white-space: pre-wrap; background-color: #f5f5f5; padding: 10px; border-radius: 4px;">{{ callLogDetailData.callPayload }}</pre>
+            <pre style="white-space: pre-wrap; background-color: #f5f5f5; padding: 10px; border-radius: 4px;"
+            >{{ callLogDetailData.callPayload }}</pre>
             <p><strong>响应载体：</strong></p>
-            <pre style="white-space: pre-wrap; background-color: #f5f5f5; padding: 10px; border-radius: 4px;">{{ callLogDetailData.resPayload  }}</pre>
+            <pre style="white-space: pre-wrap; background-color: #f5f5f5; padding: 10px; border-radius: 4px;"
+            >{{ callLogDetailData.resPayload }}</pre>
           </div>
         </el-dialog>
 
@@ -216,12 +210,14 @@
           </el-form>
           <el-table :data="reportLogData" style="width: 100%" :show-header="true" :empty-text="'暂无数据'">
             <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
-            <el-table-column label="对象代码" prop="objCode"></el-table-column>
-            <el-table-column label="消息描述" prop="msgDesc"></el-table-column>
+            <el-table-column label="对象编号" prop="objCode"></el-table-column>
+            <el-table-column label="对象名称" prop="objName"></el-table-column>
+            <el-table-column label="消息类型" prop="msgDesc"></el-table-column>
             <el-table-column label="上报时间" prop="reportTime" width="180"></el-table-column>
             <el-table-column label="操作" align="center" width="100">
               <template slot-scope="scope">
-                <el-button type="text" size="mini" icon="el-icon-info" @click="handleReportLogDetail(scope.row)">详情</el-button>
+                <el-button type="text" size="mini" icon="el-icon-info" @click="handleReportLogDetail(scope.row)">详情
+                </el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -230,12 +226,14 @@
         <!-- 设备日志详情弹窗 -->
         <el-dialog :visible.sync="reportDetailDialog" title="设备日志详情" width="50%">
           <div v-if="reportDetailData">
-            <p><strong>对象代码：</strong>{{ reportDetailData.objCode }}</p>
+            <p><strong>对象编号：</strong>{{ reportDetailData.objCode }}</p>
+            <p><strong>对象名称：</strong>{{ reportDetailData.objName }}</p>
             <p><strong>对象类型：</strong>{{ formatObjType(reportDetailData.objType) }}</p>
-            <p><strong>消息描述：</strong>{{ reportDetailData.msgDesc }}</p>
+            <p><strong>消息类型：</strong>{{ reportDetailData.msgDesc }}</p>
             <p><strong>上报时间：</strong>{{ reportDetailData.reportTime }}</p>
             <p><strong>上报载体：</strong></p>
-            <pre style="white-space: pre-wrap; background-color: #f5f5f5; padding: 10px; border-radius: 4px;">{{ reportDetailData.reportPayload }}</pre>
+            <pre style="white-space: pre-wrap; background-color: #f5f5f5; padding: 10px; border-radius: 4px;"
+            >{{ reportDetailData.reportPayload }}</pre>
           </div>
         </el-dialog>
 
@@ -243,93 +241,104 @@
         <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
           <el-form ref="form" :model="form" :rules="rules" label-width="80px">
             <div>
-            <el-form-item label="归属设施" prop="refFacs">
-              <el-select v-model="form.refFacs">
-                <el-option v-for="item in facsOptions" :label="item.facsName" :value="item.facsCode"
-                           :key="item.facsCode"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="设备代码" prop="deviceCode">
-              <el-input v-model="form.deviceCode" placeholder="请输入设备代码"/>
-            </el-form-item>
-            <el-form-item label="设备名称" prop="deviceName">
-              <el-input v-model="form.deviceName" placeholder="请输入设备名称"/>
-            </el-form-item>
-            <el-form-item label="设备工艺" prop="psCode" v-if="queryParams.deviceCategory === 'W'">
-              <el-select v-model="form.psCode">
-                <el-option v-for="item in devOptions" :label="item.psName" :value="item.psCode"
-                           :key="item.psCode"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="设备模型" prop="deviceModel">
-              <el-select v-model="form.deviceModel" style="width:100%" @change="handleModelChange"   clearable>
-                <el-option
-                  v-for="item in modelList"
-                  :label="item.modelName"
-                  :value="item.modelCode"
-                  :key="item.modelCode"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="子系统" prop="subsystemCode">
-              <el-select v-model="form.subsystemCode" clearable>
-                <el-option v-for="item in subsystemOptions" :label="item.systemName" :value="item.systemCode"
-                           :key="item.systemCode"
-                />
-              </el-select>
-            </el-form-item>
+              <el-form-item label="归属设施" prop="refFacs">
+                <el-select v-model="form.refFacs" placeholder="请选择归属设施" @change="handleFacilityChange">
+                  <el-option v-for="item in facsOptions" :key="item.facsCode" :label="item.facsName" :value="item.facsCode"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="归属区域" prop="areaCode">
+                <el-select v-model="form.areaCode" placeholder="请选择归属区域" @change="handleAreaChange">
+                  <el-option v-for="item in areaOptions" :key="item.id" :label="item.label" :value="item.id"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="归属子区" prop="locationRef">
+                <el-select v-model="form.locationRef" placeholder="请选择归属子区">
+                  <el-option v-for="item in subAreaOptions" :key="item.id" :label="item.label" :value="item.id"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="安装位置" prop="location">
+                <el-input v-model="form.location" placeholder="请输入安装位置"></el-input>
+              </el-form-item>
+              <el-form-item label="设备代码" prop="deviceCode">
+                <el-input v-model="form.deviceCode" placeholder="请输入设备代码"/>
+              </el-form-item>
+              <el-form-item label="设备名称" prop="deviceName">
+                <el-input v-model="form.deviceName" placeholder="请输入设备名称"/>
+              </el-form-item>
+              <el-form-item label="设备工艺" prop="psCode" v-if="queryParams.deviceCategory === 'W'">
+                <el-select v-model="form.psCode">
+                  <el-option v-for="item in devOptions" :label="item.psName" :value="item.psCode"
+                             :key="item.psCode"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="设备模型" prop="deviceModel">
+                <el-select v-model="form.deviceModel" style="width:100%" @change="handleModelChange" clearable>
+                  <el-option
+                    v-for="item in modelList"
+                    :label="item.modelName"
+                    :value="item.modelCode"
+                    :key="item.modelCode"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="子系统" prop="subsystemCode">
+                <el-select v-model="form.subsystemCode" clearable>
+                  <el-option v-for="item in subsystemOptions" :label="item.systemName" :value="item.systemCode"
+                             :key="item.systemCode"
+                  />
+                </el-select>
+              </el-form-item>
             </div>
             <!-- 属性名称、属性值 -->
-              <div v-if="attrList.length > 0" class="attr-list-container">设备参数:
-                <ul>
-                  <li v-for="attr in attrList" :key="attr.attrKey" class="attr-item">
-                    <span class="attr-name">{{ attr.attrName }} ({{ attr.attrUnit }}): </span>
-                    <el-input
-                      v-model="attrValuesMap[attr.attrKey]"
-                      placeholder="点击编辑"
-                      size="small"
-                      @blur="updateAttrValue(attr.attrKey, attrValuesMap[attr.attrKey])"
-                      class="attr-input"
-                    />
-                  </li>
-                </ul>
-              </div>
+            <div v-if="attrList.length > 0" class="attr-list-container">设备参数:
+              <ul>
+                <li v-for="attr in attrList" :key="attr.attrKey" class="attr-item">
+                  <span class="attr-name">{{ attr.attrName }} ({{ attr.attrUnit }}): </span>
+                  <el-input
+                    v-model="attrValuesMap[attr.attrKey]"
+                    placeholder="点击编辑"
+                    size="small"
+                    @blur="updateAttrValue(attr.attrKey, attrValuesMap[attr.attrKey])"
+                    class="attr-input"
+                  />
+                </li>
+              </ul>
+            </div>
 
-              <div  v-if="attrList.length > 0" class="attr-list-container">设备自定义参数：
-                <el-form-item label="" prop="attrList">
-                  <el-table class="attr-table" v-loading="loading" :data="form.customAttrs" max-height="280px"
-                            key="'customAttrs'"
-                  >
-                    <el-table-column label="标识" align="center" prop="attrKey">
-                      <template slot-scope="scope">
-                        <el-input size="mini" v-model="scope.row.attrKey" placeholder="请输入标识"/>
-                      </template>
-                    </el-table-column>
-                    <el-table-column label="属性名" align="center" prop="attrName">
-                      <template slot-scope="scope">
-                        <el-input size="mini" v-model="scope.row.attrName" placeholder="请输入属性名"/>
-                      </template>
-                    </el-table-column>
-                    <el-table-column label="属性值" align="center" prop="attrValue">
-                      <template slot-scope="scope">
-                        <el-input size="mini" v-model="scope.row.attrValue" placeholder="请输入属性值"/>
-                      </template>
-                    </el-table-column>
-                    <el-table-column align="center" label="操作">
-                      <template slot="header">
-                        <div class="operateBtns" @click="addCustomAttr">
-                          <span>添加</span><i class="el-icon-circle-plus-outline"></i>
-                        </div>
-                      </template>
-                      <template slot-scope="scope">
-                        <i class="el-icon-delete" @click="deleteCustomAttr(scope.$index)"></i>
-                      </template>
-                    </el-table-column>
-                  </el-table>
-                </el-form-item>
-              </div>
+            <div v-if="attrList.length > 0" class="attr-list-container">设备自定义参数：
+              <el-form-item label="" prop="attrList">
+                <el-table class="attr-table" v-loading="loading" :data="form.customAttrs" max-height="280px"
+                          key="'customAttrs'"
+                >
+                  <el-table-column label="标识" align="center" prop="attrKey">
+                    <template slot-scope="scope">
+                      <el-input size="mini" v-model="scope.row.attrKey" placeholder="请输入标识"/>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="属性名" align="center" prop="attrName">
+                    <template slot-scope="scope">
+                      <el-input size="mini" v-model="scope.row.attrName" placeholder="请输入属性名"/>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="属性值" align="center" prop="attrValue">
+                    <template slot-scope="scope">
+                      <el-input size="mini" v-model="scope.row.attrValue" placeholder="请输入属性值"/>
+                    </template>
+                  </el-table-column>
+                  <el-table-column align="center" label="操作">
+                    <template slot="header">
+                      <div class="operateBtns" @click="addCustomAttr">
+                        <span>添加</span><i class="el-icon-circle-plus-outline"></i>
+                      </div>
+                    </template>
+                    <template slot-scope="scope">
+                      <i class="el-icon-delete" @click="deleteCustomAttr(scope.$index)"></i>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-form-item>
+            </div>
           </el-form>
           <div slot="footer" class="dialog-footer">
             <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -343,7 +352,8 @@
             <el-row :gutter="10" class="mb8">
               <el-col :span="1.5">
                 <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleComponentAdd"
-                           v-hasPermi="['ems:component:add']">新增
+                           v-hasPermi="['ems:component:add']"
+                >新增
                 </el-button>
               </el-col>
             </el-row>
@@ -438,8 +448,18 @@
         <!-- 详情弹框 -->
         <el-dialog :visible.sync="showDrawer" title="设备状态详情" custom-class="detail-dialog">
           <div class="button-group">
-            <el-button type="primary" plain icon="el-icon-edit" size="mini" @click="handleUpdate(curRow)" v-hasPermi="['ems:device:edit']">修改</el-button>
-            <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDelete(curRow)" v-hasPermi="['ems:device:remove']">删除</el-button>
+            <el-button type="primary" plain icon="el-icon-edit" size="mini" @click="handleUpdate(curRow)"
+                       v-hasPermi="['ems:device:edit']"
+            >修改
+            </el-button>
+            <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDelete(curRow)"
+                       v-hasPermi="['ems:device:remove']"
+            >删除
+            </el-button>
+            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="showCallLog(curRow)">调用日志
+            </el-button>
+            <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="showReportLog(curRow)">设备日志
+            </el-button>
           </div>
           <div v-if="curRow">
             <!-- 分页导航 -->
@@ -500,36 +520,38 @@
                   <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                   <el-table-column label="能力名称" prop="abilityName"></el-table-column>
                   <el-table-column label="能力键" prop="abilityKey"></el-table-column>
-                  <el-table-column label="能力参数" prop="abilityParam"></el-table-column>
                   <el-table-column label="能力描述" prop="abilityDesc"></el-table-column>
                   <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                     <template slot-scope="scope">
-                      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleAbilityEdit(scope.row)">执行</el-button>
+                      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleAbilityEdit(scope.row)">
+                        执行
+                      </el-button>
                     </template>
                   </el-table-column>
                 </el-table>
               </el-card>
             </div>
-            <el-dialog title="编辑能力信息" :visible.sync="abilityDialogVisible" width="60%" append-to-body >
-                <el-form ref="abilityForm" :model="abilityForm" label-width="120px">
-                  <el-form-item label="能力名称">
-                    <el-input v-model="abilityForm.abilityName" placeholder="请输入能力名称" />
-                  </el-form-item>
-                  <el-form-item label="能力键">
-                    <el-input v-model="abilityForm.abilityKey" placeholder="请输入能力键" />
-                  </el-form-item>
-                  <el-form-item label="能力参数">
-                    <el-input type="textarea" v-model="abilityForm.abilityParam" placeholder="请输入能力参数" />
-                  </el-form-item>
-                  <el-form-item label="能力描述">
-                    <el-input type="textarea" v-model="abilityForm.abilityDesc" placeholder="请输入能力描述" />
-                  </el-form-item>
-                </el-form>
-                <div slot="footer" class="dialog-footer">
-                  <el-button type="primary" @click="saveAbilityEdit">执行</el-button>
-                  <el-button @click="cancelAbilityEdit">取消</el-button>
-                </div>
-              </el-dialog>
+            <el-dialog title="设备能力执行" :visible.sync="abilityDialogVisible" width="60%" append-to-body>
+              <el-form ref="abilityForm" :model="abilityForm" label-width="120px">
+                <el-form-item label="能力名称">
+                  <el-input v-model="abilityForm.abilityName" placeholder="请输入能力名称" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="能力键">
+                  <el-input v-model="abilityForm.abilityKey" placeholder="请输入能力键" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="能力描述">
+                  <el-input type="textarea" v-model="abilityForm.abilityDesc" placeholder="请输入能力描述" disabled
+                  ></el-input>
+                </el-form-item>
+                <el-form-item label="能力参数">
+                  <el-input type="textarea" v-model="abilityForm.abilityParam" placeholder="请输入能力参数"></el-input>
+                </el-form-item>
+              </el-form>
+              <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="saveAbilityEdit">执行</el-button>
+                <el-button @click="cancelAbilityEdit">取消</el-button>
+              </div>
+            </el-dialog>
             <!-- 设备事件= -->
             <div v-if="activeTab === 'event'">
               <el-card class="box-card">
@@ -554,7 +576,7 @@
 
 <script>
 import { listDevRecursionByArea, getDevice, delDevice, addDevice, updateDevice } from '@/api/device/device'
-import { areaTreeSelect } from '@/api/basecfg/area'
+import { areaTreeSelect,getAreaTreeSelect} from '@/api/basecfg/area'
 import { getFacsCategorygetByCode, listAllFacs } from '@/api/basecfg/emsfacs'
 import { listSubsystemAll } from '@/api/adapter/subsystem'
 import { getModelByCode, listAllModel } from '@/api/basecfg/objModel'
@@ -564,15 +586,18 @@ import { getDevProcess } from '@/api/commonApi'
 import { addComponent, delComponent, getComponent, listByDevice, updateComponent } from '@/api/basecfg/component'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-import {listcallAbility} from '@/api/basecfg/objAbility'
+import { listcallAbility } from '@/api/basecfg/objAbility'
 import { getCallLog, getReportLog, listCallLog, listReportLog } from '@/api/basecfg/objLog'
 
-
 export default {
   name: 'Device',
   components: { Treeselect },
   data() {
     return {
+      // 归属区域下拉选项
+      areaOptions: [],
+      // 归属子区下拉选项
+      subAreaOptions: [],
       abilityDialogVisible: false,
       abilityForm: {
         abilityName: '',
@@ -589,7 +614,7 @@ export default {
       attrList: [],
       attrValues: [],
       ComponentList: [],
-      abilityDevice:[],
+      abilityDevice: [],
       attrValuesMap: {},
       modelList: [],
       showDrawer: false,
@@ -636,9 +661,9 @@ export default {
       },
       callLogQueryParams: {
         abilityKey: '',
-        callStatus:  '' ,
-        startTime:  '',
-        endTime:  ''
+        callStatus: '',
+        startTime: '',
+        endTime: ''
       },
       callStatusOptions: {
         0: '成功',
@@ -662,8 +687,11 @@ export default {
         deviceSubCategory: '',
         deviceCategory: 'E',
         locationRef: null,
+        locationRefName:null,
         refFacs: null,
-        customAttrs: null
+        customAttrs: null,
+        areaCode: null,
+        location: null
       },
       queryComponentParams: {
         pageNum: 1,
@@ -695,8 +723,9 @@ export default {
       },
       // 表单参数
       form: {
-        customAttrs: []
+        customAttrs: [],
       },
+
       // 表单校验
       rules: {
         refFacs: [
@@ -733,24 +762,61 @@ export default {
   },
   created() {
     this.getList()
-    this.getAreaTree('0', false)
+    this.getAreaTree('0', 2)
     this.getFacsOptions()
     this.getSubsystem()
     this.getSubCategorygetByCode()
     this.getFacsModel()
     this.getAllDevProcess(this.subcategoryCode)
-    const now = new Date();
-    const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
-    const endOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
-    this.logQueryParams.startTime = this.formatDate(startOfDay);
-    this.logQueryParams.endTime = this.formatDate(endOfDay);
-    this.callLogQueryParams.startTime = this.formatDate(startOfDay);
-    this.callLogQueryParams.endTime = this.formatDate(endOfDay);
+    const now = new Date()
+    const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0)
+    const endOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59)
+    this.logQueryParams.startTime = this.formatDate(startOfDay)
+    this.logQueryParams.endTime = this.formatDate(endOfDay)
+    this.callLogQueryParams.startTime = this.formatDate(startOfDay)
+    this.callLogQueryParams.endTime = this.formatDate(endOfDay)
     // 设置默认日期范围
     this.callDaterangeTime = [this.formatDate(startOfDay), this.formatDate(endOfDay)]
     this.logDaterangeTime = [this.formatDate(startOfDay), this.formatDate(endOfDay)]
+    this.loadAreaOptions(); // 加载归属区域数据
   },
   methods: {
+    /** 归属设施*/
+    handleFacilityChange(selectedFacilityCode) {
+      const selectedFacility = this.facsOptions.find(f => f.facsCode === selectedFacilityCode);
+      if (selectedFacility) {
+        this.form.areaName = selectedFacility.refAreaName;
+        this.form.areaCode = selectedFacility.refArea;
+        this.loadSubAreaOptions(selectedFacility.refArea);
+      }
+    },
+    /** 归属设施*/
+    handleAreaChange(value) {
+      this.form.locationRef = null;
+      this.loadSubAreaOptions(value);
+    },
+    /**下拉归属区域*/
+    loadAreaOptions() {
+      getAreaTreeSelect('0', 1 ).then(response => {
+        this.areaOptions = response.data || [];
+      });
+    },
+    /**下拉归属子区*/
+    loadSubAreaOptions(rootCode) {
+      getAreaTreeSelect(rootCode,  2 ).then(response => {
+        this.subAreaOptions = response.data || [];
+      });
+    },
+    getFacsOptions() {
+      const getFacsParams = {
+        facsCategory: this.queryParams.deviceCategory,
+        subCategory: this.queryParams.deviceSubCategory
+      }
+      listAllFacs(getFacsParams).then(response => {
+        this.facsOptions = response.data
+      })
+    },
+
     formatDate(date) {
       if (!date) return ''
       const year = date.getFullYear()
@@ -784,7 +850,8 @@ export default {
     },
     showReportLog(row) {
       this.curRow = row
-      this.getReportLog(row.deviceCode, this.logQueryParams.startTime, this.logQueryParams.endTime) // 加载设备日志数据
+      // 加载设备日志数据
+      this.getReportLog(row.deviceCode, this.logQueryParams.startTime, this.logQueryParams.endTime)
       this.reportLog = true
     },
     /**重置调用日志*/
@@ -807,7 +874,7 @@ export default {
     /**调用日志表格*/
     getCallLog(deviceCode, startTime, endTime, abilityKey, callStatus) {
       const query = {
-        obj_code: deviceCode,
+        objCode: deviceCode,
         objType: '2',
         startRecTime: startTime,
         endRecTime: endTime,
@@ -815,7 +882,7 @@ export default {
         callStatus: callStatus
       }
       listCallLog(query).then(response => {
-        this.callLogData = response.data || []
+        this.callLogData = response.rows || []
       })
     },
     /**调用日志详情*/
@@ -846,13 +913,13 @@ export default {
         objType: '2',
         startRecTime: startTime,
         endRecTime: endTime,
-        pageNum: 1,
-        pageSize: 10
+
       }
       listReportLog(query).then(response => {
-        this.reportLogData = response.data || []
+        this.reportLogData = response.rows || []
       })
     },
+
     /**设备日志详情*/
     handleReportLogDetail(row) {
       getReportLog(row.id).then(response => {
@@ -861,40 +928,17 @@ export default {
 
       })
     },
-    loadAbilities(row) {
-      if (!this.curRow) {
-        this.$message.warning('请选择一条设备记录');
-        return;
-      }
-      getModelByCode(row.deviceModel).then(response => {
-        this.abilityDevice = response.data.abilityList|| [];
-      })
-    },
-
-    /**设备能力-执行按钮*/
-    handleDeviceOperate(row ,curRow) {
-      listcallAbility({
-        abilityKey:row.abilityKey,
-        objCode: curRow.deviceCode,
-        objType:'2',
-        modeCode:row.modeCode,
-        abilityParam:row.abilityParam,
-      }).then(response => {
-        this.$message({ message: '设备能力执行成功', type: 'success' });
-
-      })
-    },
 
     formatEventType(row, column, cellValue) {
-      return cellValue === 1 ? '消息上报' : '异常告警';
+      return cellValue === 1 ? '消息上报' : '异常告警'
     },
     getAttrValueText(attrValue) {
       const valueMap = {
         0: '关闭',
         1: '开启',
         2: '通电'
-      };
-      return valueMap[attrValue] || attrValue;
+      }
+      return valueMap[attrValue] || attrValue
     },
     /** 查询能源设备列表 */
     getList() {
@@ -962,9 +1006,9 @@ export default {
       })
     },
     /** 查询区域树结构 */
-    getAreaTree(areaCode, recursion) {
-      areaTreeSelect(areaCode, recursion).then(response => {
-        this.treeAreaOptions =  [{
+    getAreaTree(areaCode, layer) {
+      getAreaTreeSelect(areaCode, layer).then(response => {
+        this.treeAreaOptions = [{
           id: null,
           label: '全部',
           children: response.data
@@ -989,29 +1033,29 @@ export default {
     /** 执行弹框 */
     handleAbilityEdit(row) {
       // 复制当前行记录的值到弹框表单中
-      this.abilityForm = JSON.parse(JSON.stringify(row));
-      this.currentAbilityIndex = this.abilityData.indexOf(row);
-      this.abilityDialogVisible = true;
+      this.abilityForm = JSON.parse(JSON.stringify(row))
+      this.currentAbilityIndex = this.abilityData.indexOf(row)
+      this.abilityDialogVisible = true
     },
-    /**执行按钮*/
+    /**设备能力-执行按钮*/
     saveAbilityEdit() {
       if (this.currentAbilityIndex !== -1) {
-        const updatedAbility = { ...this.abilityForm };
+        const updatedAbility = { ...this.abilityForm }
         const abilityParams = {
           objCode: this.curRow.deviceCode,
           objType: 2,
           modeCode: updatedAbility.modelCode,
           abilityKey: updatedAbility.abilityKey,
-          abilityParam:  updatedAbility.abilityParam
-        };
+          abilityParam: updatedAbility.abilityParam
+        }
         listcallAbility(abilityParams)
           .then((response) => {
             if (response.code === 200) {
-              this.$message.success('保存成功');
-              this.abilityData.splice(this.currentAbilityIndex, 1, updatedAbility);
+              this.$message.success('保存成功')
+              this.abilityData.splice(this.currentAbilityIndex, 1, updatedAbility)
             }
           })
-        this.abilityDialogVisible = false;
+        this.abilityDialogVisible = false
       }
     },
     /** 取消执行按钮 */
@@ -1029,6 +1073,9 @@ export default {
     reset() {
       this.form = {
         id: null,
+        areaCode:null,
+        location:null,
+        locationRef:null,
         deviceCode: null,
         deviceName: null,
         deviceType: null,
@@ -1042,8 +1089,8 @@ export default {
         updateTime: null,
         customAttrs: []
       }
-      this.attrList = [];
-      this.attrValuesMap = {};
+      this.attrList = []
+      this.attrValuesMap = {}
       this.resetForm('form')
     },
     componentReset() {
@@ -1084,9 +1131,11 @@ export default {
       this.reset()
       this.open = true
       this.title = '添加能源设备'
-      this.attrList = [];
-      this.form.customAttrs = [];
-      this.attrValuesMap = {};
+      this.attrList = []
+      this.form.customAttrs = []
+      this.attrValuesMap = {}
+      // 加载归属子区
+      this.loadSubAreaOptions(this.form.areaCode);
     },
     /**设备器件按钮*/
     handleDevProcess(row) {
@@ -1103,22 +1152,23 @@ export default {
       // 只有当设备分类为输能设备且设备工艺代码有效时，才返回true
       return categoryIsW && psCodeIsValid
     },
-    /**设备详情按钮*/
+    /**设备管理按钮*/
     handleDetail(row) {
       this.showDrawer = true
       this.curRow = row
+      console.log("设备详情",this.curRow)
       this.subKey = this.$options.data().subKey
       getModelByCode(this.curRow.deviceModel).then(response => {
-        this.eventData = response.data?.eventList || [];
-        this.abilityData = response.data?.abilityList || [];
+        this.eventData = response.data?.eventList || []
+        this.abilityData = response.data?.abilityList || []
       })
       getObjAttr(2, this.curRow.deviceCode).then(response => {
-        this.attrTables.Base.data = response.data?.Base || [];
-        this.attrTables.Protocol.data = response.data?.Protocol || [];
-        this.attrTables.State.data = response.data?.State || [];
-        this.attrTables.Measure.data = response.data?.Measure || [];
-      });
-      this.activeTab = 'basic';
+        this.attrTables.Base.data = response.data?.Base || []
+        this.attrTables.Protocol.data = response.data?.Protocol || []
+        this.attrTables.State.data = response.data?.State || []
+        this.attrTables.Measure.data = response.data?.Measure || []
+      })
+      this.activeTab = 'basic'
     },
 
     /** 修改按钮操作 */
@@ -1127,18 +1177,15 @@ export default {
       const id = row.id || this.ids
       getDevice(id).then(response => {
         this.form = response.data
-        console.log("this.form",this.form)
+        // 加载归属子区
+        this.loadSubAreaOptions(this.form.areaCode);
+        console.log('this.form', this.form)
         this.open = true
         this.title = '修改能源设备'
-        this.attrList = [];
-        this.form.customAttrs = [];
-        this.attrValuesMap = {};
-        this.getObjAttr(2, this.form.deviceCode);
-      })
-      const recursion = true
-      const areaCode = '0'
-      areaTreeSelect(areaCode, recursion).then(response => {
-        this.totalAreaOptions = response.data
+        this.attrList = []
+        this.form.customAttrs = []
+        this.attrValuesMap = {}
+        this.getObjAttr(2, this.form.deviceCode)
       })
     },
     /** 提交按钮 */
@@ -1191,10 +1238,13 @@ export default {
             updateDevice(this.form).then(response => {
               this.$modal.msgSuccess('修改成功')
               this.open = false
+              this.showDrawer=false
               this.getList()
               if (this.showDrawer && this.curRow && this.curRow.id === this.form.id) {
                 this.handleDetail(this.form)
               }
+
+
             })
 
             if (dataToSubmit.length > 0) {
@@ -1241,15 +1291,7 @@ export default {
         ...this.queryParams
       }, `device_${new Date().getTime()}.xlsx`)
     },
-    getFacsOptions() {
-      const getFacsParams = {
-        facsCategory: this.queryParams.deviceCategory,
-        subCategory: this.queryParams.deviceSubCategory
-      }
-      listAllFacs(getFacsParams).then(response => {
-        this.facsOptions = response.data
-      })
-    },
+
     getSubCategorygetByCode() {
       getFacsCategorygetByCode(this.queryParams.deviceCategory).then(response => {
         this.subCategoryOptions = response.data.subtypeList || []
@@ -1269,9 +1311,9 @@ export default {
       this.queryParams.deviceSubCategory = ''
       if (this.queryParams.deviceCategory === 'E' || this.queryParams.deviceCategory === 'W'
         || this.queryParams.deviceCategory === 'T' || this.queryParams.deviceCategory === 'C') {
-        this.getAreaTree('0', false)
+        this.getAreaTree('0', 2)
       } else if (this.queryParams.deviceCategory === 'Z') {
-        this.getAreaTree('0', true)
+        this.getAreaTree('0', 2)
       }
       this.getSubCategorygetByCode()
       this.getFacsOptions()
@@ -1380,7 +1422,7 @@ export default {
   font-weight: bold;
 }
 
-.attr-list-container  ul {
+.attr-list-container ul {
   padding: 0;
   list-style: none;
 }
@@ -1395,6 +1437,7 @@ export default {
   min-width: 100px;
   flex: 1;
 }
+
 .status-online {
   color: #00FF00; /* 在线状态颜色 */
   background-color: #DDFFDD;
@@ -1408,9 +1451,11 @@ export default {
   padding: 2px 6px;
   border-radius: 4px;
 }
+
 .detail-dialog .el-dialog {
   width: 80%;
 }
+
 .section-title {
   font-size: 16px;
   font-weight: bold;
@@ -1418,6 +1463,7 @@ export default {
   padding: 5px 0;
   border-bottom: 1px solid #ebeef5;
 }
+
 .dialog-header {
   display: flex;
   justify-content: space-between;
@@ -1429,4 +1475,12 @@ export default {
   display: flex;
   gap: 10px;
 }
+
+/* 禁用状态的输入框样式 */
+.el-input.is-disabled .el-input__inner,
+.el-textarea.is-disabled .el-textarea__inner {
+  background-color: #f5f7fa;
+  border-color: #e4e7ed;
+  color: #c0c4cc;
+}
 </style>

ems-ui-cloud/src/views/basecfg/emsfacs/index.vue

@@ -154,7 +154,6 @@
               <ul>
                 <li v-for="attr in attrList" :key="attr.attrKey" class="attr-item">
                   <span class="attr-name">{{ attr.attrName }} ({{ attr.attrUnit }}):</span>
-                  <!-- 使用 el-input 组件允许用户编辑属性值 -->
                   <el-input
                     v-model="attrValuesMap[attr.attrKey]"
                     placeholder="点击编辑"
@@ -294,7 +293,7 @@ import {
   getFacsCategorygetByCode
 } from '@/api/basecfg/emsfacs'
 import { listAllFacsCategory } from '@/api/basecfg/facscategory'
-import { areaTreeSelect } from '@/api/basecfg/area'
+import { areaTreeSelect, getAreaTreeSelect } from '@/api/basecfg/area'
 import { getModelByCode, listAllModel } from '@/api/basecfg/objModel'
 import { getObjAttr } from '@/api/basecfg/objAttribute'
 import { addAttrValueBatch } from '@/api/basecfg/objAttributeValue'
@@ -409,7 +408,7 @@ export default {
         attr: '属性',
         ability: '能力',
         event: '事件'
-      },
+      }
 
     }
   },
@@ -422,14 +421,14 @@ export default {
   },
   created() {
     this.getList()
-    this.getAreaTree('0', false)
+    this.getAreaTree('0', 1)
     this.getAllFacsCategory()
     this.getSubCategorygetByCode()
     this.getFacsModel()
     this.$set(this.form, 'customAttrs', [])
   },
   methods: {
-    /** 查询能源设施/系统列表 */
+    /** 查询能源列表 */
     getList() {
       this.loading = true
       listFacs(this.queryParams).then(response => {
@@ -438,7 +437,6 @@ export default {
         this.loading = false
       })
     },
-    // 取消按钮
     cancel() {
       this.open = false
       this.reset()
@@ -446,9 +444,9 @@ export default {
     // 表单重置
     reset() {
       this.form = this.$options.data().form
-      this.attrList = [] // 重置属性列表
-      this.attrValuesMap = {} // 重置属性值映射
-      this.form.customAttrs = [] // 重置自定义属性
+      this.attrList = []
+      this.attrValuesMap = {}
+      this.form.customAttrs = []
       this.resetForm('form')
     },
     /** 搜索按钮操作 */
@@ -462,7 +460,6 @@ export default {
       this.resetForm('queryForm')
       this.handleQuery()
     },
-    // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
       this.single = selection.length !== 1
@@ -487,16 +484,13 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      // 重置 attrList 和 form.customAttrs
       if (!this.attrList) {
         this.attrList = []
       }
       if (!this.form.customAttrs) {
         this.form.customAttrs = []
       }
-      // 准备要发送的数据
       let dataToSubmit = []
-      // 添加模型属性数据
       this.attrList.forEach(attr => {
         const attrName = attr.attrName
         const attrKey = attr.attrKey
@@ -505,9 +499,9 @@ export default {
         if (existingIndex === -1) {
           // 如果attrKey不存在于dataToSubmit中，则添加
           dataToSubmit.push({
-            modelCode: this.form.facsModel, // 这里填写模型代码
-            objCode: this.form.facsCode, // 这里填写设备代码
-            objType: 1, // 这里填写对象类型
+            modelCode: this.form.facsModel,
+            objCode: this.form.facsCode,
+            objType: 1,
             attrKey: attrKey,
             attrValue: attrValue,
             attrName: attrName
@@ -525,9 +519,9 @@ export default {
         if (existingIndex === -1) {
           // 如果attrKey不存在于dataToSubmit中，则添加
           dataToSubmit.push({
-            modelCode: '', // 这里填写模型代码
-            objCode: this.form.facsCode, // 这里填写设备代码
-            objType: 1, // 这里填写对象类型
+            modelCode: '',
+            objCode: this.form.facsCode,
+            objType: 1,
             attrKey: attrKey,
             attrValue: attrValue,
             attrName: attrName
@@ -542,9 +536,6 @@ export default {
               this.$modal.msgSuccess('修改成功')
               this.open = false
               this.getList()
-            }).catch(error => {
-              console.error('修改失败:', error)
-              this.$message.error('修改失败')
             })
 
             if (dataToSubmit.length > 0) {
@@ -555,10 +546,7 @@ export default {
                   } else {
                     this.$message.error('属性添加失败')
                   }
-                }).catch(error => {
-                console.error('属性添加失败:', error)
-                this.$message.error('属性添加失败')
-              })
+                })
             } else {
               // this.$message.info('没有属性需要添加');
             }
@@ -567,9 +555,6 @@ export default {
               this.$modal.msgSuccess('新增成功')
               this.open = false
               this.getList()
-            }).catch(error => {
-              console.error('新增失败:', error)
-              this.$message.error('新增失败')
             })
 
             if (dataToSubmit.length > 0) {
@@ -584,29 +569,24 @@ export default {
                 console.error('属性添加失败:', error)
                 this.$message.error('属性添加失败')
               })
-            } else {
-              // this.$message.info('没有属性需要添加');
             }
           }
         }
       })
     },
-    // 设配详情
+    /** 设配详情*/
     handleDetail(row) {
       this.showDrawer = true
       this.curRow = row
-      console.log('data', this.curRow)
       this.subKey = this.$options.data().subKey
       getModelByCode(this.curRow.facsModel).then(response => {
         const code = response.data
-        console.log('code', code)
         this.eventData = response.data.eventList
         this.abilityData = response.data.abilityList
 
       })
 
       getObjAttr(1, this.curRow.facsCode).then(response => {
-        console.log('response值', response.data)
         const attrs = response.data.attrs
         const attrValues = response.data.attrValues
 
@@ -649,10 +629,10 @@ export default {
       )
     },
     /** 查询区域树结构 */
-    getAreaTree(areaCode, recursion) {
-      areaTreeSelect(areaCode, recursion).then(response => {
+    getAreaTree(areaCode, layer) {
+      getAreaTreeSelect(areaCode, layer).then(response => {
         this.areaOptions = [{
-          id: '-1',
+          id: null,
           label: '全部',
           children: response.data
         }]
@@ -687,7 +667,6 @@ export default {
 
     /**自定义属性表格*/
     addCustomAttr() {
-      // 添加一个新的自定义属性
       if (!Array.isArray(this.form.customAttrs)) {
         this.form.customAttrs = []
       }

ems-ui-cloud/src/views/basecfg/meterdevc/index.vue

@@ -64,7 +64,7 @@
           <el-table-column type="selection" width="55" align="center" />
           <el-table-column label="设备编号" align="left" prop="deviceCode" />
           <el-table-column label="设备名称" align="left" prop="deviceName" width="200px"/>
-          <el-table-column label="安装位置" align="left" prop="deviceLocation" width="200px"/>
+          <el-table-column label="安装位置" align="left" prop="location" width="200px"/>
           <el-table-column label="计量标签" align="center" prop="objTag">
             <template slot-scope="scope">
               {{formatDict(scope.row.objTag,'objTagOptions')}}
@@ -97,19 +97,25 @@
         <!-- 添加或修改计量设备对话框 -->
         <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
           <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-            <el-form-item label="设备归属" prop="deviceCode">
-              <el-select v-model="form.areaCode" :disabled="isAreaCodeMod()">
+            <!-- 归属区域 -->
+            <el-form-item label="归属区域" prop="areaCode">
+              <el-select v-model="form.areaCode" placeholder="请选择归属区域" @change="handleAreaChange">
                 <el-option v-for="item in areaOptions" :label="item.label" :value="item.id" :key="item.id" />
               </el-select>
             </el-form-item>
+            <el-form-item label="归属子区" prop="locationRef">
+              <el-select v-model="form.locationRef" placeholder="请选择归属子区">
+                <el-option v-for="item in subAreaOptions" :label="item.label" :value="item.id" :key="item.id" />
+              </el-select>
+            </el-form-item>
             <el-form-item label="设备编号" prop="deviceCode">
               <el-input v-model="form.deviceCode" placeholder="请输入设备编号" />
             </el-form-item>
             <el-form-item label="设备名称" prop="deviceName">
               <el-input v-model="form.deviceName" placeholder="请输入设备代码" />
             </el-form-item>
-            <el-form-item label="安装位置" prop="deviceLocation">
-              <el-input v-model="form.deviceLocation" placeholder="请输入设备安装位置" />
+            <el-form-item label="安装位置" prop="location">
+              <el-input v-model="form.location" placeholder="请输入设备安装位置" />
             </el-form-item>
             <el-form-item label="计量标签" prop="objTag">
               <el-radio-group v-model="form.objTag" size="medium">
@@ -117,18 +123,6 @@
                 </el-radio>
               </el-radio-group>
             </el-form-item>
-<!--            <el-form-item label="采集方式" prop="colMode">-->
-<!--              <el-radio-group v-model="form.colMode" size="medium" @change="colModeChange">-->
-<!--                <el-radio v-for="(item, index) in colModeOptions" :key="index" :label="item.code" :disabled="item.disabled">{{item.name}}-->
-<!--                </el-radio>-->
-<!--              </el-radio-group>-->
-<!--            </el-form-item>-->
-<!--            <el-form-item label="周期时长（s）" prop="colCycle">-->
-<!--              <el-select v-model="form.colCycle" :disabled="form.colMode === 1">-->
-<!--                <el-option v-for="item in colCycleOptions" :label="item.name" :value="item.code" :key="item.code" />-->
-<!--              </el-select>-->
-<!--            </el-form-item>-->
-            <!-- 采集方式 -->
             <el-form-item label="采集方式" prop="colMode">
               <el-radio-group v-model="form.colMode" size="medium" @change="colModeChange">
                 <el-radio v-for="(item, index) in colModeOptions" :key="index" :label="item.code" :disabled="item.disabled">{{item.name}}
@@ -139,11 +133,9 @@
             <!-- 周期时长 -->
             <el-form-item v-if="form.colMode !== 1" label="周期时长" prop="colCycle">
               <template v-if="form.colMode === 0">
-                <!-- 自动抄表时，显示输入框 -->
                 <el-input v-model="form.colCycle" :min="1" :max="86400" placeholder="请输入周期时长（秒）" />
               </template>
               <template v-else>
-                <!-- 手动抄表时，不显示任何内容 -->
               </template>
             </el-form-item>
             <el-form-item label="倍率" prop="magnification">
@@ -164,9 +156,8 @@
 </template>
 
 <script>
-import { listDevice, getDevice, delDevice, addDevice, updateDevice } from '@/api/device/meterDevice'
-import { devTreeByFacs } from '@/api/device/device'
-import { areaTreeSelect } from '@/api/basecfg/area'
+import { listDevice, getDevice, delDevice, addDevice, updateDevice, listAreaDevice } from '@/api/device/meterDevice'
+import { areaTreeSelect, getAreaTreeSelect } from '@/api/basecfg/area'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
@@ -199,6 +190,7 @@ export default {
       areaName: undefined,
       objCodeOptions: [],
       areaOptions: [],
+      subAreaOptions: [],
       selectObjCode: null,
       defaultProps: {
         children: 'children',
@@ -231,6 +223,7 @@ export default {
         areaCode: null,
         bldgCode: null,
         deviceCode: null,
+        locationRef:null,
         meterCls: null,
         objTag: null,
         colCycle: null,
@@ -251,20 +244,31 @@ export default {
     }
   },
   watch: {
-    // 根据名称筛选区域树
     areaName(val) {
       this.$refs.tree.filter(val)
     }
   },
+
   created() {
-    this.getAreaTree('0', false)
+    this.getAreaTree('0', 2)
     this.getList()
 
   },
+
   methods: {
+    /**归属子区*/
+    loadSubAreaOptions(areaCode) {
+      getAreaTreeSelect(areaCode, 2).then((response) => {
+        this.subAreaOptions = response.data || [];
+      })
+    },
+    /**归属区域*/
+    handleAreaChange() {
+      this.loadSubAreaOptions(this.form.areaCode);
+    },
     handleTabClick(tab) {
       this.activeTab = tab.name;
-      this.getList(); // 重新获取数据
+      this.getList();
     },
     colModeChange(val) {
       if (val === 1) {
@@ -282,11 +286,19 @@ export default {
       } else if (this.activeTab === '水表') {
         meterCls = 70;
       }
-      listDevice({ ...this.queryParams, meterCls }).then(response => {
+      const params = {
+        locationRef: this.$refs.tree.getCurrentNode()?.id,
+        meterCls,
+        objTag: this.queryParams.objTag,
+        colMode: this.queryParams.colMode,
+        pageNum: this.queryParams.pageNum,
+        pageSize: this.queryParams.pageSize
+      };
+      listAreaDevice(params).then(response => {
         this.deviceList = response.rows;
         this.total = response.total;
         this.loading = false;
-      });
+      })
     },
     // 取消按钮
     cancel() {
@@ -300,6 +312,8 @@ export default {
         deviceCode: null,
         deviceName: null,
         deviceLocation:null,
+        locationRef:null,
+        location:null,
         meterCls: null,
         colCycle: null,
         colMode: null,
@@ -320,7 +334,6 @@ export default {
       this.resetForm('queryForm')
       this.handleQuery()
     },
-    // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
       this.single = selection.length !== 1
@@ -332,6 +345,8 @@ export default {
       this.open = true;
       this.areaMod = true;
       this.form.magnification = 1;
+      /** 加载归属子区*/
+      this.loadSubAreaOptions(this.form.areaCode);
       if (this.activeTab === '电表') {
         this.title = '添加电表';
         this.form.meterCls = 45;
@@ -346,6 +361,8 @@ export default {
       const id = row.id || this.ids
       getDevice(id).then(response => {
         this.form = response.data;
+        /** 加载归属子区*/
+        this.loadSubAreaOptions(this.form.areaCode);
         this.open = true;
         if (this.activeTab === '电表') {
           this.title = '修改电表';
@@ -354,13 +371,6 @@ export default {
         }
       })
     },
-    isAreaCodeMod() {
-      return !this.areaMod;
-    },
-    getAreaLabelById(id) {
-      const item = this.areaOptions.find(item => item.id === id);
-      return item ? item.label : 'default';
-    },
     /** 提交按钮 */
     submitForm() {
       this.$refs['form'].validate(valid => {
@@ -404,7 +414,6 @@ export default {
       })
       return name
     },
-
     getColModeName(colMode) {
       const modeMap = {
         0: '自动抄表',
@@ -413,11 +422,24 @@ export default {
       return modeMap[colMode] || '未知'
     },
     /** 查询区域树结构 */
-    getAreaTree(areaCode, recursion) {
-      areaTreeSelect(areaCode, recursion).then(response => {
-        this.areaOptions = response.data
+    getAreaTree(areaCode, layer) {
+      getAreaTreeSelect(areaCode, layer).then(response => {
+        this.areaOptions = response.data || [];
+        this.$nextTick(() => {
+          //触发第一个节点
+          this.triggerFirstNodeClick();
+        });
       })
     },
+    triggerFirstNodeClick() {
+      const tree = this.$refs.tree;
+      const firstNode = this.areaOptions[0];
+      if (firstNode) {
+        tree.setCurrentKey(firstNode.id);
+        this.handleNodeClick(firstNode);
+      }
+    },
+
     // 筛选节点
     filterNode(value, data) {
       if (!value) return true
@@ -425,8 +447,9 @@ export default {
     },
     // 节点单击事件
     handleNodeClick(data) {
-      this.queryParams.areaCode = data.id
-      this.handleQuery()
+      this.queryParams.areaCode = data.id;
+      this.queryParams.locationRef = data.id;
+      this.handleQuery();
     }
   }
 }