+ 汇报缺失页面

ems-ui-cloud/src/views/adapter/cdz/index.vue

@@ -0,0 +1,1225 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small" prefix-icon="el-icon-search"
+                    style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container" style="height: 100vh; overflow: hidden; position: relative;">
+          <el-tree :data="treeAreaOptions" :props="defaultProps" :expand-on-click-node="false"
+                   :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
+                   @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;"
+          />
+        </div>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <div class="contents">
+          <div class="other-content">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+                     label-width="68px"
+            >
+              <el-form-item label="设备分类" prop="deviceSubCategory">
+                <el-select v-model="queryParams.deviceSubCategory">
+                  <el-option v-for="item in subCategoryOptions" placeholder="设备分类" :label="item.name" :value="item.code"
+                             :key="item.code"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="归属设施" prop="refFacs">
+                <el-select v-model="queryParams.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="subsystemCode">
+                <el-select v-model="queryParams.subsystemCode">
+                  <el-option v-for="item in subsystemOptions" :label="item.systemName" :value="item.systemCode"
+                             :key="item.systemCode"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+
+            <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']"
+                >新增
+                </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']"
+                >修改
+                </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']"
+                >删除
+                </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']"
+                >导出
+                </el-button>
+              </el-col>
+              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+          </div>
+
+          <div class="table-content">
+            <!--分页-->
+            <div class="button-group-container">
+              <el-button-group>
+                <el-button :type="primary1" icon="el-icon-s-fold" @click="switchData(1)" />
+                <el-button :type="primary2" icon="el-icon-menu" @click="switchData(2)" />
+              </el-button-group>
+            </div>
+
+            <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange" v-if="istable === 1">
+              <el-table-column type="selection" width="55" align="center"/>
+              <el-table-column label="设备名称" align="left" prop="deviceName"/>
+              <el-table-column label="安装位置" align="left" prop="areaPath" width="220px"/>
+              <el-table-column label="归属设施" align="center" prop="refFacsName"/>
+              <el-table-column label="设备分类" align="center" prop="deviceCategoryName"/>
+              <el-table-column label="子系统" align="center" prop="subsystemName"/>
+              <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)"
+                  >
+                    器件
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-info" @click="handleDetail(scope.row)"
+                             v-hasPermi="['basecfg:device:edit']"
+                  >
+                    详情
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                             v-hasPermi="['basecfg:device:edit']"
+                  >
+                    修改
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                             @click="handleDelete(scope.row)" v-hasPermi="['basecfg:device:remove']"
+                  >
+                    删除
+                  </el-button>
+
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div v-else-if="istable === 2" >
+              <el-row :gutter="20" class="device-list">
+                <el-col v-for="device in deviceList" :key="device.id" :span="6">
+                  <div :class="`device-card ${backStyle(device.areaPath)}`">
+                    <div class="device-header">
+                      <i class="el-icon-s-operation" style="margin-right: 8px;"></i>
+                      {{ device.deviceName }}
+                    </div>
+                    <div class="device-body">
+                      <p>设备代码：<span class="device-code">{{ device.deviceCode }}</span></p>
+                      <p>安装位置：<span class="deviceOthers">{{ device.areaPath }}</span></p>
+                      <p>归属设施：<span class="deviceOthers">{{ device.refFacsName }}</span></p>
+                      <p>设备分类：<span class="deviceOthers">{{ device.deviceCategoryName }}</span></p>
+                      <p>子系统：<span class="deviceOthers">{{ device.subsystemName }}</span></p>
+                    </div>
+                    <div class="device-footer">
+                      <el-button size="mini" plain icon=" el-icon-document"  @click="handleDetail(device)">详情</el-button>
+                      <el-button size="mini" plain icon="el-icon-edit" @click="handleUpdate(device)">修改</el-button>
+                      <el-button size="mini" plain icon="el-icon-delete"  type="danger" @click="handleDelete(device)">删除</el-button>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+
+
+            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+                        :limit.sync="queryParams.pageSize"
+                        @pagination="getList"
+            />
+
+            <!-- 添加或修改能源设备对话框 -->
+            <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="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="deviceType">
+                  <el-select v-model="form.deviceCategory">
+                    <el-option v-for="item in subCategoryOptions" :label="item.name" :value="item.code"
+                               :key="item.code"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="设备模型" prop="deviceModel">
+                  <el-select v-model="form.deviceModel" style="width:100%" @change="handleModelChange">
+                    <el-option
+                      v-for="item in modelList"
+                      :label="item.modelName"
+                      :value="item.modelCode"
+                      :key="item.modelCode"
+                    />
+                  </el-select>
+                </el-form-item>
+                <!-- 这里可以展示属性名称和属性值 -->
+                <div v-if="attrList.length > 0" class="attr-list-container">
+                  <h3>模型属性:</h3>
+                  <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="点击编辑"
+                        size="small"
+                        @blur="updateAttrValue(attr.attrKey, attrValuesMap[attr.attrKey])"
+                      >
+                      </el-input>
+                    </li>
+                  </ul>
+                </div>
+                <h3 class="attr-list-container" v-if="attrList.length > 0">自定义属性
+                  <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>
+                </h3>
+                <el-form-item label="子系统" prop="subsystemCode">
+                  <el-select v-model="form.subsystemCode">
+                    <el-option v-for="item in subsystemOptions" :label="item.systemName" :value="item.systemCode"
+                               :key="item.systemCode"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-form>
+              <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+              </div>
+            </el-dialog>
+
+            <!--设备器件-->
+            <el-drawer :title=ComponentRow.deviceName size="80%" :visible.sync="showDevProcessDrawer" direction="rtl">
+              <div class="drawer-content" style="padding-left:50px">
+                <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']"
+                    >新增
+                    </el-button>
+                  </el-col>
+                </el-row>
+                <el-table v-loading="loading" :data="ComponentList">
+                  <el-table-column type="selection" width="55" align="center"/>
+                  <el-table-column label="部件编码" align="center" prop="compoCode"/>
+                  <el-table-column label="部件标签" align="center" prop="compoTag">
+                    <template slot-scope="scope">
+                      {{ objComTypeMapping[scope.row.compoTag] }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="工艺标识代码" align="center" prop="psCode"/>
+                  <el-table-column label="外系统部件编码" align="center" prop="extCompoCode"/>
+                  <el-table-column label="部件模型" align="center" prop="compoModel"/>
+                  <el-table-column label="部件品牌" align="center" prop="compoBrand"/>
+                  <el-table-column label="部件型号" align="center" prop="compoSpec"/>
+                  <el-table-column label="祖籍列表" align="center" prop="ancestors"/>
+                  <el-table-column label="上级部件" align="center" prop="parentEqpt"/>
+
+                  <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="handleComponentUpdate(scope.row)"
+                                 v-hasPermi="['ems:component:edit']"
+                      >
+                        修改
+                      </el-button>
+                      <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                                 @click="handleComponentDelete(scope.row)" v-hasPermi="['ems:component:remove']"
+                      >
+                        删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <pagination v-show="total>0" :total="total" :page.sync="queryComponentParams.pageNum"
+                            :limit.sync="queryComponentParams.pageSize"
+                            @pagination="getComponentList"
+                />
+
+                <!-- 添加或修改设备器件对话框 -->
+                <el-dialog :title="title" :visible.sync="componentOpen" width="500px" append-to-body>
+                  <el-form ref="componentForm" :model="componentForm" :rules="componentRules" label-width="150px">
+                    <!--                <el-form-item label="设备code" prop="deviceCode">-->
+                    <!--                  <el-input v-model="componentForm.deviceCode" placeholder="请输入设备code" />-->
+                    <!--                </el-form-item>-->
+                    <el-form-item label="部件编码" prop="compoCode">
+                      <el-input v-model="componentForm.compoCode" placeholder="请输入部件编码"/>
+                    </el-form-item>
+                    <el-form-item label="部件标签" prop="compoTag">
+                      <el-select v-model="componentForm.compoTag" placeholder="请输入部件标签">
+                        <el-option v-for="item in objComTypeOptions"
+                                   :label="item.name"
+                                   :value="item.code"
+                                   :key="item.code"
+                        />
+
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="工艺标签代码" prop="psCode">
+                      <el-select v-model="componentForm.psCode" placeholder="请输入工艺标签代码">
+                        <el-option v-for="item in devOptions" :label="item.psCode" :value="item.psCode" :key="item.psCode"/>
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="外系统部件编码" prop="extCompoCode">
+                      <el-input v-model="componentForm.extCompoCode" placeholder="请输入外系统部件编码"/>
+                    </el-form-item>
+                    <el-form-item label="部件模型" prop="compoModel">
+                      <el-select v-model="componentForm.compoModel" placeholder="请输入部件模型">
+                        <el-option v-for="item in this.modelList" :label="item.modelCode" :value="item.modelCode"
+                                   :key="item.modelCode"
+                        />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="部件品牌" prop="compoBrand">
+                      <el-input v-model="componentForm.compoBrand" placeholder="请输入部件品牌"/>
+                    </el-form-item>
+                    <el-form-item label="部件型号" prop="compoSpec">
+                      <el-input v-model="componentForm.compoSpec" placeholder="请输入部件型号"/>
+                    </el-form-item>
+                    <el-form-item label="祖籍列表" prop="ancestors">
+                      <el-input v-model="componentForm.ancestors" placeholder="请输入祖籍列表"/>
+                    </el-form-item>
+                    <el-form-item label="上级列表" prop="parentCompo">
+                      <el-input v-model="componentForm.parentCompo" placeholder="请输入上级列表"/>
+                    </el-form-item>
+
+                  </el-form>
+                  <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitComponentForm">确 定</el-button>
+                    <el-button @click="ComponentCancel">取 消</el-button>
+                  </div>
+                </el-dialog>
+              </div>
+            </el-drawer>
+
+            <!-- 详情弹框 -->
+            <el-dialog :visible.sync="showDrawer" title="设备详情">
+              <div v-if="curRow">
+                <!-- 设备基本信息 -->
+                <el-card class="box-card">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">设备基本信息</span>
+                  </div>
+                  <div>
+                    <p>设备代码：{{ curRow.deviceCode }}</p>
+                    <p>设备名称：{{ curRow.deviceName }}</p>
+                    <p>设备类型：{{ curRow.deviceCategoryName }}</p>
+                    <p>子系统：{{ curRow.subsystemName }}</p>
+                    <p>归属区域：{{ curRow.areaPath }}</p>
+                    <p>归属设施：{{ curRow.refFacsName }}</p>
+                  </div>
+                </el-card>
+
+                <!-- 属性信息 -->
+                <el-card class="box-card" v-if="attrData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">属性定义</span>
+                  </div>
+                  <div v-for="(item, index) in attrData" :key="index">
+                    <p>属性名称：{{ item.attrName }}</p>
+                    <p>属性值：{{ item.attrValue }}</p>
+                    <p>属性单位：{{ item.attrUnit }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < attrData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+                <!-- 能力信息 -->
+                <el-card class="box-card" v-if="abilityData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">能力定义</span>
+                  </div>
+                  <div v-for="(item, index) in abilityData" :key="index">
+                    <p>能力名称：{{ item.abilityName }}</p>
+                    <p>能力键：{{ item.abilityKey }}</p>
+                    <p>能力参数：{{ item.abilityParam }}</p>
+                    <p>能力描述：{{ item.abilityDesc }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < abilityData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+                <!-- 事件信息 -->
+                <el-card class="box-card" v-if="eventData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">事件定义</span>
+                  </div>
+                  <div v-for="(item, index) in eventData" :key="index">
+                    <p>事件名称：{{ item.eventKey }}</p>
+                    <p>事件类型：{{ item.eventType === 1 ? '消息上报' : '异常告警' }}</p>
+                    <p>事件代码：{{ item.eventCode }}</p>
+                    <p>外部事件代码：{{ item.extEventCode }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < eventData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+              </div>
+            </el-dialog>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { listDevRecursionByArea, getDevice, delDevice, addDevice, updateDevice } from '@/api/device/device'
+import { areaTreeSelect } from '@/api/basecfg/area'
+import { getFacsCategorygetByCode, listAllFacs } from '@/api/basecfg/emsfacs'
+import { listSubsystemAll } from '@/api/adapter/subsystem'
+import { getModelByCode, listAllModel } from '@/api/basecfg/objModel'
+import { getObjAttr } from '@/api/basecfg/objAttribute'
+import { addAttrValueBatch } from '@/api/basecfg/objAttributeValue'
+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'
+
+export default {
+  name: 'Device',
+  components: { Treeselect },
+  data() {
+    return {
+      primary1: 'primary',
+      primary2: '',
+      ComponentRow: [],
+      componentForm: {},
+      subcategoryCode: '',
+      attrList: [], // 属性模板数组
+      attrValues: [],
+      ComponentList: [],
+      attrValuesMap: {},
+      modelList: [],
+      showDrawer: false,
+      showDevProcessDrawer: false,
+      componentOpen: false,
+      istable: 2,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 能源设备表格数据
+      deviceList: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 区域名称
+      areaName: undefined,
+      // 区域树选项
+      treeAreaOptions: undefined,
+      totalAreaOptions: undefined,
+      // 设施选项
+      facsOptions: undefined,
+      // 设备分类
+      subCategoryOptions: undefined,
+      subsystemOptions: undefined,
+      devOptions: undefined,
+
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      // 查询参数
+      queryParams: {
+        psCode: null,
+        pageNum: 1,
+        pageSize: 10,
+        deviceCode: null,
+        deviceSubCategory: '',
+        deviceCategory: 'E',
+        locationType: null,
+        locationRef: null,
+        refFacs: null,
+        customAttrs: null
+      },
+      queryComponentParams: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      objComTypeMapping: {
+        1: '总开',
+        2: '照明',
+        3: '风机'
+      },
+      objComTypeOptions: [
+        { code: 1, name: '总开' },
+        { code: 2, name: '照明' },
+        { code: 3, name: '风机' }
+
+      ],
+      curRow: {},
+      attrData: [],
+      abilityData: [],
+      eventData: [],
+
+      // 表单参数
+      form: {
+        customAttrs: [] // 自定义属性数组
+      },
+      // 表单校验
+      rules: {
+        refFacs: [
+          { required: true, message: '归属设施', trigger: 'blur' }
+        ],
+        refArea: [
+          { required: true, message: '安装位置', trigger: 'blur' }
+        ],
+        deviceCode: [
+          { required: true, message: '设备代码不能为空', trigger: 'blur' }
+        ],
+        deviceName: [
+          { required: true, message: '设备名称不能为空', trigger: 'blur' }
+        ]
+      },
+      componentRules: {
+        deviceCode: [
+          { required: true, message: '设备code不能为空', trigger: 'blur' }
+        ],
+        compoCode: [
+          { required: true, message: '部件编码不能为空', trigger: 'blur' }
+        ],
+        psCode: [
+          { required: true, message: '工艺标签代码不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    // 根据名称筛选区域树
+    areaName(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created() {
+    this.queryParams.deviceCategory = 'Charge'; // 确保初始加载时就设置为 'Charge'
+    this.getList()
+    this.getAreaTree('0', 1)
+    this.getFacsOptions()
+    this.getSubsystem()
+    this.getSubCategorygetByCode()
+    this.getFacsModel()
+    // this.getAllDevProcess(this.subcategoryCode)
+  },
+  methods: {
+    /**分页切换*/
+    switchData(v) {
+      if (v === 1) {
+        this.primary1 = "primary";
+        this.primary2 = "";
+      } else {
+        this.primary1 = "";
+        this.primary2 = "primary";
+      }
+      this.istable = v;
+    },
+    /** 查询能源设备列表 */
+    getList() {
+      this.loading = true
+      listDevRecursionByArea(this.queryParams).then(response => {
+        console.log('参数', JSON.stringify(this.queryParams))
+        this.deviceList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    /**新增、修改、删除*/
+    handleComponentAdd() {
+      this.componentReset()
+      this.componentOpen = true
+      this.title = '添加设备器件属性'
+      this.componentForm.deviceCode = this.ComponentRow.deviceCode // 设置默认设备代码
+
+    },
+    handleComponentUpdate(row) {
+      this.componentReset()
+      const id = row.id || this.ids
+      getComponent(id).then(response => {
+        this.componentForm = response.data
+        this.componentOpen = true
+        this.title = '修改设备器件属性'
+        this.componentForm.deviceCode = this.ComponentRow.deviceCode // 设置默认设备代码
+      })
+    },
+    handleComponentDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除能源对象属性编号为"' + ids + '"的数据项？').then(function() {
+        return delComponent(ids)
+      }).then(() => {
+        console.log('删除row', row.deviceCode)
+        this.getComponentList(row.deviceCode)
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {
+      })
+    },
+    submitComponentForm() {
+      this.$refs['componentForm'].validate(valid => {
+        if (valid) {
+          if (this.componentForm.id != null) {
+            updateComponent(this.componentForm).then(response => {
+              this.$modal.msgSuccess('修改成功')
+              this.componentOpen = false
+              this.getComponentList(this.componentForm.deviceCode)
+            })
+          } else {
+            addComponent(this.componentForm).then(response => {
+              this.$modal.msgSuccess('新增成功')
+              this.componentOpen = false
+              this.getComponentList(this.componentForm.deviceCode)
+            })
+          }
+        }
+      })
+    },
+    ComponentCancel() {
+      this.componentOpen = false
+      this.componentReset()
+    },
+    /**查询部件列表*/
+    getComponentList(deviceCode) {
+      listByDevice(deviceCode).then(response => {
+        this.ComponentList = response.data
+      })
+    },
+    /** 查询区域树结构 */
+    getAreaTree(areaCode, layer) {
+      areaTreeSelect(areaCode, layer).then(response => {
+        this.treeAreaOptions =  [{
+          id: '-1',
+          label: '全部',
+          children: response.data
+        }]
+      })
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      if (data.id === '-1') {
+        this.queryParams.locationType = null;
+        this.queryParams.locationRef = null;
+      } else {
+        this.queryParams.locationType = data.tier;
+        this.queryParams.locationRef = data.id;
+      }
+      this.handleQuery();
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        deviceCode: null,
+        deviceName: null,
+        deviceType: null,
+        deviceStatus: null,
+        deviceModel: null,
+        refArea: null,
+        refFacs: null,
+        subsystemCode: null,
+        psCode: null,
+        createTime: null,
+        updateTime: null
+
+      }
+      this.resetForm('form')
+    },
+    componentReset() {
+      this.componentForm = {
+        id: null,
+        deviceCode: this.ComponentRow.deviceCode || '', // 使用ComponentRow的deviceCode，或者空字符串
+        compoCode: null,
+        compoTag: null,
+        psCode: null,
+        extCompoCode: null,
+        compoModel: null,
+        compoBrand: null,
+        compoSpec: null,
+        ancestors: null,
+        parentCompo: null
+
+      }
+      this.resetForm('componentForm')
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      console.log('搜索按钮this.queryParams', JSON.stringify(this.queryParams))
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams.locationType = null
+      this.queryParams.locationRef = null
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = '添加能源设备'
+    },
+    /**设备器件按钮*/
+    handleDevProcess(row) {
+      this.showDevProcessDrawer = true
+      this.ComponentRow = row
+      console.log('row', row)
+      listByDevice(this.ComponentRow.deviceCode).then(response => {
+        this.ComponentList = response.data
+      })
+
+    },
+    shouldShowDevProcessButton(row) {
+      const categoryIsW = this.queryParams.deviceCategory === 'W'
+      const validPsCodes = ['AA', 'AH', 'AJ', 'AM', 'AP', 'AL', 'APE', 'ALE', 'AF', 'ACC']
+      const psCodeIsValid = validPsCodes.includes(row.psCode)
+      // 只有当设备分类为输能设备且设备工艺代码有效时，才返回true
+      return categoryIsW && psCodeIsValid
+    },
+    backStyle(areaPath) {
+      const firstLevel = areaPath.split('/')[0];
+      switch (firstLevel) {
+        case '北区':
+          return 'north';
+        case '南区':
+          return 'south';
+        case '主路':
+          return 'main';
+        default:
+          return '';
+      }
+    },
+    /**设备详情按钮*/
+    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(2, this.curRow.deviceCode).then(response => {
+        console.log('response值', response.data)
+        const attrs = response.data.attrs
+        const attrValues = response.data.attrValues
+
+        // 合并 attrs 和 attrValues 数组
+        const mergedData = attrValues.map(attrValue => {
+          const attr = attrs.find(a => a.attrKey === attrValue.attrKey)
+          return {
+            ...attrValue,
+            attrName: attr ? attr.attrName : attrValue.attrName,
+            attrUnit: attr ? attr.attrUnit : ''
+          }
+        })
+        this.attrData = mergedData
+      })
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const id = row.id || this.ids
+      getDevice(id).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = '修改能源设备'
+      })
+      const layer = 1
+      const areaCode = '0'
+      areaTreeSelect(areaCode, layer).then(response => {
+        this.totalAreaOptions = response.data
+      })
+    },
+    /** 提交按钮 */
+    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
+        const attrValue = this.attrValuesMap[attrKey]
+        const existingIndex = dataToSubmit.findIndex(item => item.attrKey === attrKey)
+        if (existingIndex === -1) {
+          // 如果attrKey不存在于dataToSubmit中，则添加
+          dataToSubmit.push({
+            modelCode: this.form.deviceModel, // 模型代码
+            objCode: this.form.deviceCode, // 设备代码
+            objType: 2, // 对象类型
+            attrKey: attrKey,
+            attrValue: attrValue,
+            attrName: attrName
+
+          })
+        }
+      })
+
+      // 添加自定义属性数据
+      this.form.customAttrs.forEach(customAttr => {
+        const attrName = customAttr.attrName
+        const attrKey = customAttr.attrKey
+        const attrValue = customAttr.attrValue
+        const existingIndex = dataToSubmit.findIndex(item => item.attrKey === attrKey)
+        if (existingIndex === -1) {
+          // 如果attrKey不存在于dataToSubmit中，则添加
+          dataToSubmit.push({
+            modelCode: '', // 模型代码
+            objCode: this.form.deviceCode, // 设备代码
+            objType: 2, // 对象类型
+            attrKey: attrKey,
+            attrValue: attrValue,
+            attrName: attrName
+          })
+        }
+      })
+
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateDevice(this.form).then(response => {
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            }).catch(error => {
+              console.error('修改失败:', error)
+              this.$message.error('修改失败')
+            })
+
+            if (dataToSubmit.length > 0) {
+              addAttrValueBatch(dataToSubmit)
+                .then(response => {
+                  if (response.code === 200) {
+                    this.$message.success('属性添加成功')
+                  } else {
+                    this.$message.error('属性添加失败')
+                  }
+                }).catch(error => {
+                console.error('属性添加失败:', error)
+                this.$message.error('属性添加失败')
+              })
+            }
+          } else {
+            addDevice(this.form).then(response => {
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            }).catch(error => {
+              console.error('新增失败:', error)
+              this.$message.error('新增失败')
+            })
+
+            if (dataToSubmit.length > 0) {
+              addAttrValueBatch(dataToSubmit)
+                .then(response => {
+                  if (response.code === 200) {
+                    this.$message.success('属性添加成功')
+                  } else {
+                    this.$message.error('属性添加失败')
+                  }
+                }).catch(error => {
+                console.error('属性添加失败:', error)
+                this.$message.error('属性添加失败')
+              })
+            } else {
+              // this.$message.info('没有属性需要添加');
+            }
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除能源设备编号为"' + ids + '"的数据项？').then(function() {
+        return delDevice(ids)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('ems/basecfg/device/export', {
+        ...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 || []
+      })
+    },
+    getSubsystem() {
+      listSubsystemAll().then(response => {
+        this.subsystemOptions = response.data
+      })
+    },
+    /**自定义属性表格*/
+    addCustomAttr() {
+      // 添加一个新的自定义属性
+      if (!Array.isArray(this.form.customAttrs)) {
+        this.form.customAttrs = []
+      }
+      this.form.customAttrs.push({
+        attrKey: '',
+        attrName: '',
+        attrValue: ''
+      })
+      // 强制更新视图
+      this.$forceUpdate()
+
+    },
+    deleteCustomAttr(index) {
+      // 删除指定索引的自定义属性
+      if (this.form.customAttrs.length > 0) {
+        this.form.customAttrs.splice(index, 1)
+      }
+
+    },
+    /**设备模型*/
+    updateAttrValue(attrKey, newValue) {
+      this.attrValuesMap[attrKey] = newValue
+    },
+
+    getFacsModel() {
+      listAllModel(2).then(response => {
+        this.modelList = response.data
+        console.log('this.modelList', this.modelList)
+        this.modelList.forEach(model => {
+          console.log(model.modelCode)
+        })
+      })
+    },
+    handleModelChange(modelCode) {
+      if (modelCode) {
+        this.getModelByCode(modelCode)
+        console.log('设备代码', this.form.deviceCode)
+        this.getObjAttr(2, this.form.deviceCode)
+      }
+    },
+    getModelByCode(modelCode) {
+      getModelByCode(modelCode).then(response => {
+        // this.attrList = response.data.attrList;
+        const filteredAttrList = response.data.attrList.filter(attr => attr.attrType === 0)
+        this.attrList = filteredAttrList
+
+      })
+    },
+    getObjAttr(objType, deviceCode) {
+      getObjAttr(objType, deviceCode).then(response => {
+        // const attrs = response.data.attrs;
+        const attrs = response.data.attrs.filter(attr => attr.attrType === 0)
+        console.log('attrs', attrs)
+        const attrValues = response.data.attrValues || [] // 确保是一个数组
+        console.log('attrValues', attrValues)
+
+        // 创建一个映射对象，用于存储 attrKey 与对应的 attrValue
+        const attrValuesMap = {}
+
+        // 遍历 attrs 数组
+        attrs.forEach(attr => {
+          // 查找 attrValues 数组中是否有匹配的 attrKey
+          const attrValueObj = attrValues.find(value => value.attrKey === attr.attrKey)
+          // 如果找到匹配的 attrValue，更新 attrValuesMap
+          if (attrValueObj) {
+            attrValuesMap[attr.attrKey] = attrValueObj.attrValue
+          } else {
+            // 如果没有找到匹配的 attrValue，则设置为 '暂无数据'
+            attrValuesMap[attr.attrKey] = ''
+          }
+        })
+
+        // 更新 attrValuesMap 到组件的数据中
+        this.attrValuesMap = attrValuesMap
+        // 打印更新后的 attrValuesMap，用于调试
+        console.log('Updated attrValuesMap', this.attrValuesMap)
+
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+.divider {
+  border-bottom: 2px solid #ebeef5;
+  margin: 10px 0;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.drawer-content {
+  padding: 0 20px;
+}
+
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.attr-list-container {
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin: 10px 0;
+  font-weight: bold;
+}
+
+.attr-list-container h3 {
+  font-weight: bold;
+}
+
+.attr-item {
+  list-style-type: none;
+  margin-bottom: 5px;
+}
+
+.attr-name {
+  font-weight: bold;
+}
+
+
+.contents{
+  border: 20px solid #f2f2f5;
+  background-color: #f2f2f5;
+}
+
+
+.other-content {
+  background-color: #ffffff; /* 白色背景 */
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.table-content {
+  background-color: #ffffff; /* 白色背景 */
+  padding: 20px;
+}
+
+.pagination-container {
+  margin-bottom: 20px;
+}
+
+.button-group-container {
+  display: flex;
+  justify-content: flex-end;
+  min-width: 200px;
+  padding: 5px;
+}
+
+.device-list {
+  margin-top: 20px;
+}
+
+.device-card {
+  background-color: #fff;
+  border: 1px solid #bfcbd9;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+  transition: 0.3s;
+  padding: 10px;
+  font-size: 14px;
+  height: 200px;
+  width: 350px;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.device-header {
+  //background-color: #f2f2f5;
+  //padding: 10px;
+  color: #545353;
+  font-size: 20px;
+  font-weight: bold;
+}
+.device-code{
+  color:cornflowerblue;
+}
+.deviceOthers{
+  color: black;
+}
+
+.device-body {
+  padding: 10px;
+  color: #666666;
+  flex: 1; /* 使设备主体内容占据剩余空间 */
+  overflow-y: auto; /* 如果内容过多，允许滚动 */
+}
+
+.device-footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 5px;
+  // background-color: #f9f9f9;
+}
+
+.device-footer .el-button {
+  padding: 5px 15px;
+  border: none; /* 移除默认边框 */
+  color: #5a5e66;
+  transition: background-color 0.3s; /* 平滑过渡背景色变化 */
+}
+
+/* 为按钮分配不同的颜色 */
+.device-footer .el-button:first-child {
+  background-color: #d5f1d5; /* 淡绿色 */
+  border: 1px solid lightgreen;
+  color: #71e2aa;
+
+}
+
+.device-footer .el-button:nth-child(2) {
+  background-color: #ffe5b4; /* 淡橙色 */
+  border: 1px solid #ffba00;
+  color: #faad14;
+}
+
+.device-footer .el-button:last-child {
+  background-color: #ffd5d5; /* 淡红色 */
+  border: 1px solid lightpink;
+  color: #f5222d;
+}
+
+/* 鼠标悬停时加深颜色 */
+.device-footer .el-button:hover {
+  filter: brightness(0.5); /* 颜色加深效果 */
+}
+
+/* 背景色样式 */
+.north {
+  background: linear-gradient(to right, #e1f3d8, #fafafa);
+}
+
+.south {
+  background: linear-gradient(to right, #fff7e8, #fafafa);
+}
+
+.main {
+  background: linear-gradient(to right, #e0e0e0, #fafafa);
+}
+
+
+.el-table {
+  background-color: #ffffff; /* 白色背景 */
+}
+
+.el-card {
+  background-color: #ffffff; /* 白色背景 */
+}
+</style>

ems-ui-cloud/src/views/adapter/devc/index.vue

@@ -0,0 +1,1225 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small" prefix-icon="el-icon-search"
+                    style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container" style="height: 100vh; overflow: hidden; position: relative;">
+          <el-tree :data="treeAreaOptions" :props="defaultProps" :expand-on-click-node="false"
+                   :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
+                   @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;"
+          />
+        </div>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <div class="contents">
+          <div class="other-content">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+                     label-width="68px"
+            >
+              <el-form-item label="设备分类" prop="deviceSubCategory">
+                <el-select v-model="queryParams.deviceSubCategory">
+                  <el-option v-for="item in subCategoryOptions" placeholder="设备分类" :label="item.name" :value="item.code"
+                             :key="item.code"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="归属设施" prop="refFacs">
+                <el-select v-model="queryParams.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="subsystemCode">
+                <el-select v-model="queryParams.subsystemCode">
+                  <el-option v-for="item in subsystemOptions" :label="item.systemName" :value="item.systemCode"
+                             :key="item.systemCode"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+
+            <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']"
+                >新增
+                </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']"
+                >修改
+                </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']"
+                >删除
+                </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']"
+                >导出
+                </el-button>
+              </el-col>
+              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+          </div>
+
+          <div class="table-content">
+            <!--分页-->
+            <div class="button-group-container">
+              <el-button-group>
+                <el-button :type="primary1" icon="el-icon-s-fold" @click="switchData(1)" />
+                <el-button :type="primary2" icon="el-icon-menu" @click="switchData(2)" />
+              </el-button-group>
+            </div>
+
+            <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange" v-if="istable === 1">
+              <el-table-column type="selection" width="55" align="center"/>
+              <el-table-column label="设备名称" align="left" prop="deviceName"/>
+              <el-table-column label="安装位置" align="left" prop="areaPath" width="220px"/>
+              <el-table-column label="归属设施" align="center" prop="refFacsName"/>
+              <el-table-column label="设备分类" align="center" prop="deviceCategoryName"/>
+              <el-table-column label="子系统" align="center" prop="subsystemName"/>
+              <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)"
+                  >
+                    器件
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-info" @click="handleDetail(scope.row)"
+                             v-hasPermi="['basecfg:device:edit']"
+                  >
+                    详情
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                             v-hasPermi="['basecfg:device:edit']"
+                  >
+                    修改
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                             @click="handleDelete(scope.row)" v-hasPermi="['basecfg:device:remove']"
+                  >
+                    删除
+                  </el-button>
+
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div v-else-if="istable === 2" >
+              <el-row :gutter="20" class="device-list">
+                <el-col v-for="device in deviceList" :key="device.id" :span="6">
+                  <div :class="`device-card ${backStyle(device.areaPath)}`">
+                    <div class="device-header">
+                      <i class="el-icon-s-operation" style="margin-right: 8px;"></i>
+                      {{ device.deviceName }}
+                    </div>
+                    <div class="device-body">
+                      <p>设备代码：<span class="device-code">{{ device.deviceCode }}</span></p>
+                      <p>安装位置：<span class="deviceOthers">{{ device.areaPath }}</span></p>
+                      <p>归属设施：<span class="deviceOthers">{{ device.refFacsName }}</span></p>
+                      <p>设备分类：<span class="deviceOthers">{{ device.deviceCategoryName }}</span></p>
+                      <p>子系统：<span class="deviceOthers">{{ device.subsystemName }}</span></p>
+                    </div>
+                    <div class="device-footer">
+                      <el-button size="mini" plain icon=" el-icon-document"  @click="handleDetail(device)">详情</el-button>
+                      <el-button size="mini" plain icon="el-icon-edit" @click="handleUpdate(device)">修改</el-button>
+                      <el-button size="mini" plain icon="el-icon-delete"  type="danger" @click="handleDelete(device)">删除</el-button>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+
+
+            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+                        :limit.sync="queryParams.pageSize"
+                        @pagination="getList"
+            />
+
+            <!-- 添加或修改能源设备对话框 -->
+            <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="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="deviceType">
+                  <el-select v-model="form.deviceCategory">
+                    <el-option v-for="item in subCategoryOptions" :label="item.name" :value="item.code"
+                               :key="item.code"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="设备模型" prop="deviceModel">
+                  <el-select v-model="form.deviceModel" style="width:100%" @change="handleModelChange">
+                    <el-option
+                      v-for="item in modelList"
+                      :label="item.modelName"
+                      :value="item.modelCode"
+                      :key="item.modelCode"
+                    />
+                  </el-select>
+                </el-form-item>
+                <!-- 这里可以展示属性名称和属性值 -->
+                <div v-if="attrList.length > 0" class="attr-list-container">
+                  <h3>模型属性:</h3>
+                  <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="点击编辑"
+                        size="small"
+                        @blur="updateAttrValue(attr.attrKey, attrValuesMap[attr.attrKey])"
+                      >
+                      </el-input>
+                    </li>
+                  </ul>
+                </div>
+                <h3 class="attr-list-container" v-if="attrList.length > 0">自定义属性
+                  <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>
+                </h3>
+                <el-form-item label="子系统" prop="subsystemCode">
+                  <el-select v-model="form.subsystemCode">
+                    <el-option v-for="item in subsystemOptions" :label="item.systemName" :value="item.systemCode"
+                               :key="item.systemCode"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-form>
+              <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+              </div>
+            </el-dialog>
+
+            <!--设备器件-->
+            <el-drawer :title=ComponentRow.deviceName size="80%" :visible.sync="showDevProcessDrawer" direction="rtl">
+              <div class="drawer-content" style="padding-left:50px">
+                <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']"
+                    >新增
+                    </el-button>
+                  </el-col>
+                </el-row>
+                <el-table v-loading="loading" :data="ComponentList">
+                  <el-table-column type="selection" width="55" align="center"/>
+                  <el-table-column label="部件编码" align="center" prop="compoCode"/>
+                  <el-table-column label="部件标签" align="center" prop="compoTag">
+                    <template slot-scope="scope">
+                      {{ objComTypeMapping[scope.row.compoTag] }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="工艺标识代码" align="center" prop="psCode"/>
+                  <el-table-column label="外系统部件编码" align="center" prop="extCompoCode"/>
+                  <el-table-column label="部件模型" align="center" prop="compoModel"/>
+                  <el-table-column label="部件品牌" align="center" prop="compoBrand"/>
+                  <el-table-column label="部件型号" align="center" prop="compoSpec"/>
+                  <el-table-column label="祖籍列表" align="center" prop="ancestors"/>
+                  <el-table-column label="上级部件" align="center" prop="parentEqpt"/>
+
+                  <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="handleComponentUpdate(scope.row)"
+                                 v-hasPermi="['ems:component:edit']"
+                      >
+                        修改
+                      </el-button>
+                      <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                                 @click="handleComponentDelete(scope.row)" v-hasPermi="['ems:component:remove']"
+                      >
+                        删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <pagination v-show="total>0" :total="total" :page.sync="queryComponentParams.pageNum"
+                            :limit.sync="queryComponentParams.pageSize"
+                            @pagination="getComponentList"
+                />
+
+                <!-- 添加或修改设备器件对话框 -->
+                <el-dialog :title="title" :visible.sync="componentOpen" width="500px" append-to-body>
+                  <el-form ref="componentForm" :model="componentForm" :rules="componentRules" label-width="150px">
+                    <!--                <el-form-item label="设备code" prop="deviceCode">-->
+                    <!--                  <el-input v-model="componentForm.deviceCode" placeholder="请输入设备code" />-->
+                    <!--                </el-form-item>-->
+                    <el-form-item label="部件编码" prop="compoCode">
+                      <el-input v-model="componentForm.compoCode" placeholder="请输入部件编码"/>
+                    </el-form-item>
+                    <el-form-item label="部件标签" prop="compoTag">
+                      <el-select v-model="componentForm.compoTag" placeholder="请输入部件标签">
+                        <el-option v-for="item in objComTypeOptions"
+                                   :label="item.name"
+                                   :value="item.code"
+                                   :key="item.code"
+                        />
+
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="工艺标签代码" prop="psCode">
+                      <el-select v-model="componentForm.psCode" placeholder="请输入工艺标签代码">
+                        <el-option v-for="item in devOptions" :label="item.psCode" :value="item.psCode" :key="item.psCode"/>
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="外系统部件编码" prop="extCompoCode">
+                      <el-input v-model="componentForm.extCompoCode" placeholder="请输入外系统部件编码"/>
+                    </el-form-item>
+                    <el-form-item label="部件模型" prop="compoModel">
+                      <el-select v-model="componentForm.compoModel" placeholder="请输入部件模型">
+                        <el-option v-for="item in this.modelList" :label="item.modelCode" :value="item.modelCode"
+                                   :key="item.modelCode"
+                        />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="部件品牌" prop="compoBrand">
+                      <el-input v-model="componentForm.compoBrand" placeholder="请输入部件品牌"/>
+                    </el-form-item>
+                    <el-form-item label="部件型号" prop="compoSpec">
+                      <el-input v-model="componentForm.compoSpec" placeholder="请输入部件型号"/>
+                    </el-form-item>
+                    <el-form-item label="祖籍列表" prop="ancestors">
+                      <el-input v-model="componentForm.ancestors" placeholder="请输入祖籍列表"/>
+                    </el-form-item>
+                    <el-form-item label="上级列表" prop="parentCompo">
+                      <el-input v-model="componentForm.parentCompo" placeholder="请输入上级列表"/>
+                    </el-form-item>
+
+                  </el-form>
+                  <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitComponentForm">确 定</el-button>
+                    <el-button @click="ComponentCancel">取 消</el-button>
+                  </div>
+                </el-dialog>
+              </div>
+            </el-drawer>
+
+            <!-- 详情弹框 -->
+            <el-dialog :visible.sync="showDrawer" title="设备详情">
+              <div v-if="curRow">
+                <!-- 设备基本信息 -->
+                <el-card class="box-card">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">设备基本信息</span>
+                  </div>
+                  <div>
+                    <p>设备代码：{{ curRow.deviceCode }}</p>
+                    <p>设备名称：{{ curRow.deviceName }}</p>
+                    <p>设备类型：{{ curRow.deviceCategoryName }}</p>
+                    <p>子系统：{{ curRow.subsystemName }}</p>
+                    <p>归属区域：{{ curRow.areaPath }}</p>
+                    <p>归属设施：{{ curRow.refFacsName }}</p>
+                  </div>
+                </el-card>
+
+                <!-- 属性信息 -->
+                <el-card class="box-card" v-if="attrData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">属性定义</span>
+                  </div>
+                  <div v-for="(item, index) in attrData" :key="index">
+                    <p>属性名称：{{ item.attrName }}</p>
+                    <p>属性值：{{ item.attrValue }}</p>
+                    <p>属性单位：{{ item.attrUnit }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < attrData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+                <!-- 能力信息 -->
+                <el-card class="box-card" v-if="abilityData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">能力定义</span>
+                  </div>
+                  <div v-for="(item, index) in abilityData" :key="index">
+                    <p>能力名称：{{ item.abilityName }}</p>
+                    <p>能力键：{{ item.abilityKey }}</p>
+                    <p>能力参数：{{ item.abilityParam }}</p>
+                    <p>能力描述：{{ item.abilityDesc }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < abilityData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+                <!-- 事件信息 -->
+                <el-card class="box-card" v-if="eventData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">事件定义</span>
+                  </div>
+                  <div v-for="(item, index) in eventData" :key="index">
+                    <p>事件名称：{{ item.eventKey }}</p>
+                    <p>事件类型：{{ item.eventType === 1 ? '消息上报' : '异常告警' }}</p>
+                    <p>事件代码：{{ item.eventCode }}</p>
+                    <p>外部事件代码：{{ item.extEventCode }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < eventData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+              </div>
+            </el-dialog>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { listDevRecursionByArea, getDevice, delDevice, addDevice, updateDevice } from '@/api/device/device'
+import { areaTreeSelect } from '@/api/basecfg/area'
+import { getFacsCategorygetByCode, listAllFacs } from '@/api/basecfg/emsfacs'
+import { listSubsystemAll } from '@/api/adapter/subsystem'
+import { getModelByCode, listAllModel } from '@/api/basecfg/objModel'
+import { getObjAttr } from '@/api/basecfg/objAttribute'
+import { addAttrValueBatch } from '@/api/basecfg/objAttributeValue'
+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'
+
+export default {
+  name: 'Device',
+  components: { Treeselect },
+  data() {
+    return {
+      primary1: 'primary',
+      primary2: '',
+      ComponentRow: [],
+      componentForm: {},
+      subcategoryCode: '',
+      attrList: [], // 属性模板数组
+      attrValues: [],
+      ComponentList: [],
+      attrValuesMap: {},
+      modelList: [],
+      showDrawer: false,
+      showDevProcessDrawer: false,
+      componentOpen: false,
+      istable: 2,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 能源设备表格数据
+      deviceList: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 区域名称
+      areaName: undefined,
+      // 区域树选项
+      treeAreaOptions: undefined,
+      totalAreaOptions: undefined,
+      // 设施选项
+      facsOptions: undefined,
+      // 设备分类
+      subCategoryOptions: undefined,
+      subsystemOptions: undefined,
+      devOptions: undefined,
+
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      // 查询参数
+      queryParams: {
+        psCode: null,
+        pageNum: 1,
+        pageSize: 10,
+        deviceCode: null,
+        deviceSubCategory: '',
+        deviceCategory: 'E',
+        locationType: null,
+        locationRef: null,
+        refFacs: null,
+        customAttrs: null
+      },
+      queryComponentParams: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      objComTypeMapping: {
+        1: '总开',
+        2: '照明',
+        3: '风机'
+      },
+      objComTypeOptions: [
+        { code: 1, name: '总开' },
+        { code: 2, name: '照明' },
+        { code: 3, name: '风机' }
+
+      ],
+      curRow: {},
+      attrData: [],
+      abilityData: [],
+      eventData: [],
+
+      // 表单参数
+      form: {
+        customAttrs: [] // 自定义属性数组
+      },
+      // 表单校验
+      rules: {
+        refFacs: [
+          { required: true, message: '归属设施', trigger: 'blur' }
+        ],
+        refArea: [
+          { required: true, message: '安装位置', trigger: 'blur' }
+        ],
+        deviceCode: [
+          { required: true, message: '设备代码不能为空', trigger: 'blur' }
+        ],
+        deviceName: [
+          { required: true, message: '设备名称不能为空', trigger: 'blur' }
+        ]
+      },
+      componentRules: {
+        deviceCode: [
+          { required: true, message: '设备code不能为空', trigger: 'blur' }
+        ],
+        compoCode: [
+          { required: true, message: '部件编码不能为空', trigger: 'blur' }
+        ],
+        psCode: [
+          { required: true, message: '工艺标签代码不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    // 根据名称筛选区域树
+    areaName(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created() {
+    this.queryParams.deviceCategory = 'Devc'; // 确保初始加载时就设置为 'Devc'
+    this.getList()
+    this.getAreaTree('0', 1)
+    this.getFacsOptions()
+    this.getSubsystem()
+    this.getSubCategorygetByCode()
+    this.getFacsModel()
+    // this.getAllDevProcess(this.subcategoryCode)
+  },
+  methods: {
+    /**分页切换*/
+    switchData(v) {
+      if (v === 1) {
+        this.primary1 = "primary";
+        this.primary2 = "";
+      } else {
+        this.primary1 = "";
+        this.primary2 = "primary";
+      }
+      this.istable = v;
+    },
+    /** 查询能源设备列表 */
+    getList() {
+      this.loading = true
+      listDevRecursionByArea(this.queryParams).then(response => {
+        console.log('参数', JSON.stringify(this.queryParams))
+        this.deviceList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    /**新增、修改、删除*/
+    handleComponentAdd() {
+      this.componentReset()
+      this.componentOpen = true
+      this.title = '添加设备器件属性'
+      this.componentForm.deviceCode = this.ComponentRow.deviceCode // 设置默认设备代码
+
+    },
+    handleComponentUpdate(row) {
+      this.componentReset()
+      const id = row.id || this.ids
+      getComponent(id).then(response => {
+        this.componentForm = response.data
+        this.componentOpen = true
+        this.title = '修改设备器件属性'
+        this.componentForm.deviceCode = this.ComponentRow.deviceCode // 设置默认设备代码
+      })
+    },
+    handleComponentDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除能源对象属性编号为"' + ids + '"的数据项？').then(function() {
+        return delComponent(ids)
+      }).then(() => {
+        console.log('删除row', row.deviceCode)
+        this.getComponentList(row.deviceCode)
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {
+      })
+    },
+    submitComponentForm() {
+      this.$refs['componentForm'].validate(valid => {
+        if (valid) {
+          if (this.componentForm.id != null) {
+            updateComponent(this.componentForm).then(response => {
+              this.$modal.msgSuccess('修改成功')
+              this.componentOpen = false
+              this.getComponentList(this.componentForm.deviceCode)
+            })
+          } else {
+            addComponent(this.componentForm).then(response => {
+              this.$modal.msgSuccess('新增成功')
+              this.componentOpen = false
+              this.getComponentList(this.componentForm.deviceCode)
+            })
+          }
+        }
+      })
+    },
+    ComponentCancel() {
+      this.componentOpen = false
+      this.componentReset()
+    },
+    /**查询部件列表*/
+    getComponentList(deviceCode) {
+      listByDevice(deviceCode).then(response => {
+        this.ComponentList = response.data
+      })
+    },
+    /** 查询区域树结构 */
+    getAreaTree(areaCode, layer) {
+      areaTreeSelect(areaCode, layer).then(response => {
+        this.treeAreaOptions =  [{
+          id: '-1',
+          label: '全部',
+          children: response.data
+        }]
+      })
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      if (data.id === '-1') {
+        this.queryParams.locationType = null;
+        this.queryParams.locationRef = null;
+      } else {
+        this.queryParams.locationType = data.tier;
+        this.queryParams.locationRef = data.id;
+      }
+      this.handleQuery();
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        deviceCode: null,
+        deviceName: null,
+        deviceType: null,
+        deviceStatus: null,
+        deviceModel: null,
+        refArea: null,
+        refFacs: null,
+        subsystemCode: null,
+        psCode: null,
+        createTime: null,
+        updateTime: null
+
+      }
+      this.resetForm('form')
+    },
+    componentReset() {
+      this.componentForm = {
+        id: null,
+        deviceCode: this.ComponentRow.deviceCode || '', // 使用ComponentRow的deviceCode，或者空字符串
+        compoCode: null,
+        compoTag: null,
+        psCode: null,
+        extCompoCode: null,
+        compoModel: null,
+        compoBrand: null,
+        compoSpec: null,
+        ancestors: null,
+        parentCompo: null
+
+      }
+      this.resetForm('componentForm')
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      console.log('搜索按钮this.queryParams', JSON.stringify(this.queryParams))
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams.locationType = null
+      this.queryParams.locationRef = null
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = '添加能源设备'
+    },
+    /**设备器件按钮*/
+    handleDevProcess(row) {
+      this.showDevProcessDrawer = true
+      this.ComponentRow = row
+      console.log('row', row)
+      listByDevice(this.ComponentRow.deviceCode).then(response => {
+        this.ComponentList = response.data
+      })
+
+    },
+    shouldShowDevProcessButton(row) {
+      const categoryIsW = this.queryParams.deviceCategory === 'W'
+      const validPsCodes = ['AA', 'AH', 'AJ', 'AM', 'AP', 'AL', 'APE', 'ALE', 'AF', 'ACC']
+      const psCodeIsValid = validPsCodes.includes(row.psCode)
+      // 只有当设备分类为输能设备且设备工艺代码有效时，才返回true
+      return categoryIsW && psCodeIsValid
+    },
+    backStyle(areaPath) {
+      const firstLevel = areaPath.split('/')[0];
+      switch (firstLevel) {
+        case '北区':
+          return 'north';
+        case '南区':
+          return 'south';
+        case '主路':
+          return 'main';
+        default:
+          return '';
+      }
+    },
+    /**设备详情按钮*/
+    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(2, this.curRow.deviceCode).then(response => {
+        console.log('response值', response.data)
+        const attrs = response.data.attrs
+        const attrValues = response.data.attrValues
+
+        // 合并 attrs 和 attrValues 数组
+        const mergedData = attrValues.map(attrValue => {
+          const attr = attrs.find(a => a.attrKey === attrValue.attrKey)
+          return {
+            ...attrValue,
+            attrName: attr ? attr.attrName : attrValue.attrName,
+            attrUnit: attr ? attr.attrUnit : ''
+          }
+        })
+        this.attrData = mergedData
+      })
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const id = row.id || this.ids
+      getDevice(id).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = '修改能源设备'
+      })
+      const layer = 1
+      const areaCode = '0'
+      areaTreeSelect(areaCode, layer).then(response => {
+        this.totalAreaOptions = response.data
+      })
+    },
+    /** 提交按钮 */
+    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
+        const attrValue = this.attrValuesMap[attrKey]
+        const existingIndex = dataToSubmit.findIndex(item => item.attrKey === attrKey)
+        if (existingIndex === -1) {
+          // 如果attrKey不存在于dataToSubmit中，则添加
+          dataToSubmit.push({
+            modelCode: this.form.deviceModel, // 模型代码
+            objCode: this.form.deviceCode, // 设备代码
+            objType: 2, // 对象类型
+            attrKey: attrKey,
+            attrValue: attrValue,
+            attrName: attrName
+
+          })
+        }
+      })
+
+      // 添加自定义属性数据
+      this.form.customAttrs.forEach(customAttr => {
+        const attrName = customAttr.attrName
+        const attrKey = customAttr.attrKey
+        const attrValue = customAttr.attrValue
+        const existingIndex = dataToSubmit.findIndex(item => item.attrKey === attrKey)
+        if (existingIndex === -1) {
+          // 如果attrKey不存在于dataToSubmit中，则添加
+          dataToSubmit.push({
+            modelCode: '', // 模型代码
+            objCode: this.form.deviceCode, // 设备代码
+            objType: 2, // 对象类型
+            attrKey: attrKey,
+            attrValue: attrValue,
+            attrName: attrName
+          })
+        }
+      })
+
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateDevice(this.form).then(response => {
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            }).catch(error => {
+              console.error('修改失败:', error)
+              this.$message.error('修改失败')
+            })
+
+            if (dataToSubmit.length > 0) {
+              addAttrValueBatch(dataToSubmit)
+                .then(response => {
+                  if (response.code === 200) {
+                    this.$message.success('属性添加成功')
+                  } else {
+                    this.$message.error('属性添加失败')
+                  }
+                }).catch(error => {
+                console.error('属性添加失败:', error)
+                this.$message.error('属性添加失败')
+              })
+            }
+          } else {
+            addDevice(this.form).then(response => {
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            }).catch(error => {
+              console.error('新增失败:', error)
+              this.$message.error('新增失败')
+            })
+
+            if (dataToSubmit.length > 0) {
+              addAttrValueBatch(dataToSubmit)
+                .then(response => {
+                  if (response.code === 200) {
+                    this.$message.success('属性添加成功')
+                  } else {
+                    this.$message.error('属性添加失败')
+                  }
+                }).catch(error => {
+                console.error('属性添加失败:', error)
+                this.$message.error('属性添加失败')
+              })
+            } else {
+              // this.$message.info('没有属性需要添加');
+            }
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除能源设备编号为"' + ids + '"的数据项？').then(function() {
+        return delDevice(ids)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('ems/basecfg/device/export', {
+        ...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 || []
+      })
+    },
+    getSubsystem() {
+      listSubsystemAll().then(response => {
+        this.subsystemOptions = response.data
+      })
+    },
+    /**自定义属性表格*/
+    addCustomAttr() {
+      // 添加一个新的自定义属性
+      if (!Array.isArray(this.form.customAttrs)) {
+        this.form.customAttrs = []
+      }
+      this.form.customAttrs.push({
+        attrKey: '',
+        attrName: '',
+        attrValue: ''
+      })
+      // 强制更新视图
+      this.$forceUpdate()
+
+    },
+    deleteCustomAttr(index) {
+      // 删除指定索引的自定义属性
+      if (this.form.customAttrs.length > 0) {
+        this.form.customAttrs.splice(index, 1)
+      }
+
+    },
+    /**设备模型*/
+    updateAttrValue(attrKey, newValue) {
+      this.attrValuesMap[attrKey] = newValue
+    },
+
+    getFacsModel() {
+      listAllModel(2).then(response => {
+        this.modelList = response.data
+        console.log('this.modelList', this.modelList)
+        this.modelList.forEach(model => {
+          console.log(model.modelCode)
+        })
+      })
+    },
+    handleModelChange(modelCode) {
+      if (modelCode) {
+        this.getModelByCode(modelCode)
+        console.log('设备代码', this.form.deviceCode)
+        this.getObjAttr(2, this.form.deviceCode)
+      }
+    },
+    getModelByCode(modelCode) {
+      getModelByCode(modelCode).then(response => {
+        // this.attrList = response.data.attrList;
+        const filteredAttrList = response.data.attrList.filter(attr => attr.attrType === 0)
+        this.attrList = filteredAttrList
+
+      })
+    },
+    getObjAttr(objType, deviceCode) {
+      getObjAttr(objType, deviceCode).then(response => {
+        // const attrs = response.data.attrs;
+        const attrs = response.data.attrs.filter(attr => attr.attrType === 0)
+        console.log('attrs', attrs)
+        const attrValues = response.data.attrValues || [] // 确保是一个数组
+        console.log('attrValues', attrValues)
+
+        // 创建一个映射对象，用于存储 attrKey 与对应的 attrValue
+        const attrValuesMap = {}
+
+        // 遍历 attrs 数组
+        attrs.forEach(attr => {
+          // 查找 attrValues 数组中是否有匹配的 attrKey
+          const attrValueObj = attrValues.find(value => value.attrKey === attr.attrKey)
+          // 如果找到匹配的 attrValue，更新 attrValuesMap
+          if (attrValueObj) {
+            attrValuesMap[attr.attrKey] = attrValueObj.attrValue
+          } else {
+            // 如果没有找到匹配的 attrValue，则设置为 '暂无数据'
+            attrValuesMap[attr.attrKey] = ''
+          }
+        })
+
+        // 更新 attrValuesMap 到组件的数据中
+        this.attrValuesMap = attrValuesMap
+        // 打印更新后的 attrValuesMap，用于调试
+        console.log('Updated attrValuesMap', this.attrValuesMap)
+
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+.divider {
+  border-bottom: 2px solid #ebeef5;
+  margin: 10px 0;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.drawer-content {
+  padding: 0 20px;
+}
+
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.attr-list-container {
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin: 10px 0;
+  font-weight: bold;
+}
+
+.attr-list-container h3 {
+  font-weight: bold;
+}
+
+.attr-item {
+  list-style-type: none;
+  margin-bottom: 5px;
+}
+
+.attr-name {
+  font-weight: bold;
+}
+
+
+.contents{
+  border: 20px solid #f2f2f5;
+  background-color: #f2f2f5;
+}
+
+
+.other-content {
+  background-color: #ffffff; /* 白色背景 */
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.table-content {
+  background-color: #ffffff; /* 白色背景 */
+  padding: 20px;
+}
+
+.pagination-container {
+  margin-bottom: 20px;
+}
+
+.button-group-container {
+  display: flex;
+  justify-content: flex-end;
+  min-width: 200px;
+  padding: 5px;
+}
+
+.device-list {
+  margin-top: 20px;
+}
+
+.device-card {
+  background-color: #fff;
+  border: 1px solid #bfcbd9;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+  transition: 0.3s;
+  padding: 10px;
+  font-size: 14px;
+  height: 200px;
+  width: 350px;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.device-header {
+  //background-color: #f2f2f5;
+  //padding: 10px;
+  color: #545353;
+  font-size: 20px;
+  font-weight: bold;
+}
+.device-code{
+  color:cornflowerblue;
+}
+.deviceOthers{
+  color: black;
+}
+
+.device-body {
+  padding: 10px;
+  color: #666666;
+  flex: 1; /* 使设备主体内容占据剩余空间 */
+  overflow-y: auto; /* 如果内容过多，允许滚动 */
+}
+
+.device-footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 5px;
+  // background-color: #f9f9f9;
+}
+
+.device-footer .el-button {
+  padding: 5px 15px;
+  border: none; /* 移除默认边框 */
+  color: #5a5e66;
+  transition: background-color 0.3s; /* 平滑过渡背景色变化 */
+}
+
+/* 为按钮分配不同的颜色 */
+.device-footer .el-button:first-child {
+  background-color: #d5f1d5; /* 淡绿色 */
+  border: 1px solid lightgreen;
+  color: #71e2aa;
+
+}
+
+.device-footer .el-button:nth-child(2) {
+  background-color: #ffe5b4; /* 淡橙色 */
+  border: 1px solid #ffba00;
+  color: #faad14;
+}
+
+.device-footer .el-button:last-child {
+  background-color: #ffd5d5; /* 淡红色 */
+  border: 1px solid lightpink;
+  color: #f5222d;
+}
+
+/* 鼠标悬停时加深颜色 */
+.device-footer .el-button:hover {
+  filter: brightness(0.5); /* 颜色加深效果 */
+}
+
+/* 背景色样式 */
+.north {
+  background: linear-gradient(to right, #e1f3d8, #fafafa);
+}
+
+.south {
+  background: linear-gradient(to right, #fff7e8, #fafafa);
+}
+
+.main {
+  background: linear-gradient(to right, #e0e0e0, #fafafa);
+}
+
+
+.el-table {
+  background-color: #ffffff; /* 白色背景 */
+}
+
+.el-card {
+  background-color: #ffffff; /* 白色背景 */
+}
+</style>

ems-ui-cloud/src/views/adapter/gcc/index.vue

@@ -0,0 +1,1225 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small" prefix-icon="el-icon-search"
+                    style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container" style="height: 100vh; overflow: hidden; position: relative;">
+          <el-tree :data="treeAreaOptions" :props="defaultProps" :expand-on-click-node="false"
+                   :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
+                   @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;"
+          />
+        </div>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <div class="contents">
+          <div class="other-content">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+                     label-width="68px"
+            >
+              <el-form-item label="设备分类" prop="deviceSubCategory">
+                <el-select v-model="queryParams.deviceSubCategory">
+                  <el-option v-for="item in subCategoryOptions" placeholder="设备分类" :label="item.name" :value="item.code"
+                             :key="item.code"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="归属设施" prop="refFacs">
+                <el-select v-model="queryParams.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="subsystemCode">
+                <el-select v-model="queryParams.subsystemCode">
+                  <el-option v-for="item in subsystemOptions" :label="item.systemName" :value="item.systemCode"
+                             :key="item.systemCode"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+
+            <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']"
+                >新增
+                </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']"
+                >修改
+                </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']"
+                >删除
+                </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']"
+                >导出
+                </el-button>
+              </el-col>
+              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+          </div>
+
+          <div class="table-content">
+            <!--分页-->
+            <div class="button-group-container">
+              <el-button-group>
+                <el-button :type="primary1" icon="el-icon-s-fold" @click="switchData(1)" />
+                <el-button :type="primary2" icon="el-icon-menu" @click="switchData(2)" />
+              </el-button-group>
+            </div>
+
+            <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange" v-if="istable === 1">
+              <el-table-column type="selection" width="55" align="center"/>
+              <el-table-column label="设备名称" align="left" prop="deviceName"/>
+              <el-table-column label="安装位置" align="left" prop="areaPath" width="220px"/>
+              <el-table-column label="归属设施" align="center" prop="refFacsName"/>
+              <el-table-column label="设备分类" align="center" prop="deviceCategoryName"/>
+              <el-table-column label="子系统" align="center" prop="subsystemName"/>
+              <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)"
+                  >
+                    器件
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-info" @click="handleDetail(scope.row)"
+                             v-hasPermi="['basecfg:device:edit']"
+                  >
+                    详情
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                             v-hasPermi="['basecfg:device:edit']"
+                  >
+                    修改
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                             @click="handleDelete(scope.row)" v-hasPermi="['basecfg:device:remove']"
+                  >
+                    删除
+                  </el-button>
+
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div v-else-if="istable === 2" >
+              <el-row :gutter="20" class="device-list">
+                <el-col v-for="device in deviceList" :key="device.id" :span="6">
+                  <div :class="`device-card ${backStyle(device.areaPath)}`">
+                    <div class="device-header">
+                      <i class="el-icon-s-operation" style="margin-right: 8px;"></i>
+                      {{ device.deviceName }}
+                    </div>
+                    <div class="device-body">
+                      <p>设备代码：<span class="device-code">{{ device.deviceCode }}</span></p>
+                      <p>安装位置：<span class="deviceOthers">{{ device.areaPath }}</span></p>
+                      <p>归属设施：<span class="deviceOthers">{{ device.refFacsName }}</span></p>
+                      <p>设备分类：<span class="deviceOthers">{{ device.deviceCategoryName }}</span></p>
+                      <p>子系统：<span class="deviceOthers">{{ device.subsystemName }}</span></p>
+                    </div>
+                    <div class="device-footer">
+                      <el-button size="mini" plain icon=" el-icon-document"  @click="handleDetail(device)">详情</el-button>
+                      <el-button size="mini" plain icon="el-icon-edit" @click="handleUpdate(device)">修改</el-button>
+                      <el-button size="mini" plain icon="el-icon-delete"  type="danger" @click="handleDelete(device)">删除</el-button>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+
+
+            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+                        :limit.sync="queryParams.pageSize"
+                        @pagination="getList"
+            />
+
+            <!-- 添加或修改能源设备对话框 -->
+            <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="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="deviceType">
+                  <el-select v-model="form.deviceCategory">
+                    <el-option v-for="item in subCategoryOptions" :label="item.name" :value="item.code"
+                               :key="item.code"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="设备模型" prop="deviceModel">
+                  <el-select v-model="form.deviceModel" style="width:100%" @change="handleModelChange">
+                    <el-option
+                        v-for="item in modelList"
+                        :label="item.modelName"
+                        :value="item.modelCode"
+                        :key="item.modelCode"
+                    />
+                  </el-select>
+                </el-form-item>
+                <!-- 这里可以展示属性名称和属性值 -->
+                <div v-if="attrList.length > 0" class="attr-list-container">
+                  <h3>模型属性:</h3>
+                  <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="点击编辑"
+                          size="small"
+                          @blur="updateAttrValue(attr.attrKey, attrValuesMap[attr.attrKey])"
+                      >
+                      </el-input>
+                    </li>
+                  </ul>
+                </div>
+                <h3 class="attr-list-container" v-if="attrList.length > 0">自定义属性
+                  <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>
+                </h3>
+                <el-form-item label="子系统" prop="subsystemCode">
+                  <el-select v-model="form.subsystemCode">
+                    <el-option v-for="item in subsystemOptions" :label="item.systemName" :value="item.systemCode"
+                               :key="item.systemCode"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-form>
+              <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+              </div>
+            </el-dialog>
+
+            <!--设备器件-->
+            <el-drawer :title=ComponentRow.deviceName size="80%" :visible.sync="showDevProcessDrawer" direction="rtl">
+              <div class="drawer-content" style="padding-left:50px">
+                <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']"
+                    >新增
+                    </el-button>
+                  </el-col>
+                </el-row>
+                <el-table v-loading="loading" :data="ComponentList">
+                  <el-table-column type="selection" width="55" align="center"/>
+                  <el-table-column label="部件编码" align="center" prop="compoCode"/>
+                  <el-table-column label="部件标签" align="center" prop="compoTag">
+                    <template slot-scope="scope">
+                      {{ objComTypeMapping[scope.row.compoTag] }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="工艺标识代码" align="center" prop="psCode"/>
+                  <el-table-column label="外系统部件编码" align="center" prop="extCompoCode"/>
+                  <el-table-column label="部件模型" align="center" prop="compoModel"/>
+                  <el-table-column label="部件品牌" align="center" prop="compoBrand"/>
+                  <el-table-column label="部件型号" align="center" prop="compoSpec"/>
+                  <el-table-column label="祖籍列表" align="center" prop="ancestors"/>
+                  <el-table-column label="上级部件" align="center" prop="parentEqpt"/>
+
+                  <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="handleComponentUpdate(scope.row)"
+                                 v-hasPermi="['ems:component:edit']"
+                      >
+                        修改
+                      </el-button>
+                      <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                                 @click="handleComponentDelete(scope.row)" v-hasPermi="['ems:component:remove']"
+                      >
+                        删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <pagination v-show="total>0" :total="total" :page.sync="queryComponentParams.pageNum"
+                            :limit.sync="queryComponentParams.pageSize"
+                            @pagination="getComponentList"
+                />
+
+                <!-- 添加或修改设备器件对话框 -->
+                <el-dialog :title="title" :visible.sync="componentOpen" width="500px" append-to-body>
+                  <el-form ref="componentForm" :model="componentForm" :rules="componentRules" label-width="150px">
+                    <!--                <el-form-item label="设备code" prop="deviceCode">-->
+                    <!--                  <el-input v-model="componentForm.deviceCode" placeholder="请输入设备code" />-->
+                    <!--                </el-form-item>-->
+                    <el-form-item label="部件编码" prop="compoCode">
+                      <el-input v-model="componentForm.compoCode" placeholder="请输入部件编码"/>
+                    </el-form-item>
+                    <el-form-item label="部件标签" prop="compoTag">
+                      <el-select v-model="componentForm.compoTag" placeholder="请输入部件标签">
+                        <el-option v-for="item in objComTypeOptions"
+                                   :label="item.name"
+                                   :value="item.code"
+                                   :key="item.code"
+                        />
+
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="工艺标签代码" prop="psCode">
+                      <el-select v-model="componentForm.psCode" placeholder="请输入工艺标签代码">
+                        <el-option v-for="item in devOptions" :label="item.psCode" :value="item.psCode" :key="item.psCode"/>
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="外系统部件编码" prop="extCompoCode">
+                      <el-input v-model="componentForm.extCompoCode" placeholder="请输入外系统部件编码"/>
+                    </el-form-item>
+                    <el-form-item label="部件模型" prop="compoModel">
+                      <el-select v-model="componentForm.compoModel" placeholder="请输入部件模型">
+                        <el-option v-for="item in this.modelList" :label="item.modelCode" :value="item.modelCode"
+                                   :key="item.modelCode"
+                        />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="部件品牌" prop="compoBrand">
+                      <el-input v-model="componentForm.compoBrand" placeholder="请输入部件品牌"/>
+                    </el-form-item>
+                    <el-form-item label="部件型号" prop="compoSpec">
+                      <el-input v-model="componentForm.compoSpec" placeholder="请输入部件型号"/>
+                    </el-form-item>
+                    <el-form-item label="祖籍列表" prop="ancestors">
+                      <el-input v-model="componentForm.ancestors" placeholder="请输入祖籍列表"/>
+                    </el-form-item>
+                    <el-form-item label="上级列表" prop="parentCompo">
+                      <el-input v-model="componentForm.parentCompo" placeholder="请输入上级列表"/>
+                    </el-form-item>
+
+                  </el-form>
+                  <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitComponentForm">确 定</el-button>
+                    <el-button @click="ComponentCancel">取 消</el-button>
+                  </div>
+                </el-dialog>
+              </div>
+            </el-drawer>
+
+            <!-- 详情弹框 -->
+            <el-dialog :visible.sync="showDrawer" title="设备详情">
+              <div v-if="curRow">
+                <!-- 设备基本信息 -->
+                <el-card class="box-card">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">设备基本信息</span>
+                  </div>
+                  <div>
+                    <p>设备代码：{{ curRow.deviceCode }}</p>
+                    <p>设备名称：{{ curRow.deviceName }}</p>
+                    <p>设备类型：{{ curRow.deviceCategoryName }}</p>
+                    <p>子系统：{{ curRow.subsystemName }}</p>
+                    <p>归属区域：{{ curRow.areaPath }}</p>
+                    <p>归属设施：{{ curRow.refFacsName }}</p>
+                  </div>
+                </el-card>
+
+                <!-- 属性信息 -->
+                <el-card class="box-card" v-if="attrData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">属性定义</span>
+                  </div>
+                  <div v-for="(item, index) in attrData" :key="index">
+                    <p>属性名称：{{ item.attrName }}</p>
+                    <p>属性值：{{ item.attrValue }}</p>
+                    <p>属性单位：{{ item.attrUnit }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < attrData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+                <!-- 能力信息 -->
+                <el-card class="box-card" v-if="abilityData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">能力定义</span>
+                  </div>
+                  <div v-for="(item, index) in abilityData" :key="index">
+                    <p>能力名称：{{ item.abilityName }}</p>
+                    <p>能力键：{{ item.abilityKey }}</p>
+                    <p>能力参数：{{ item.abilityParam }}</p>
+                    <p>能力描述：{{ item.abilityDesc }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < abilityData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+                <!-- 事件信息 -->
+                <el-card class="box-card" v-if="eventData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">事件定义</span>
+                  </div>
+                  <div v-for="(item, index) in eventData" :key="index">
+                    <p>事件名称：{{ item.eventKey }}</p>
+                    <p>事件类型：{{ item.eventType === 1 ? '消息上报' : '异常告警' }}</p>
+                    <p>事件代码：{{ item.eventCode }}</p>
+                    <p>外部事件代码：{{ item.extEventCode }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < eventData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+              </div>
+            </el-dialog>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { listDevRecursionByArea, getDevice, delDevice, addDevice, updateDevice } from '@/api/device/device'
+import { areaTreeSelect } from '@/api/basecfg/area'
+import { getFacsCategorygetByCode, listAllFacs } from '@/api/basecfg/emsfacs'
+import { listSubsystemAll } from '@/api/adapter/subsystem'
+import { getModelByCode, listAllModel } from '@/api/basecfg/objModel'
+import { getObjAttr } from '@/api/basecfg/objAttribute'
+import { addAttrValueBatch } from '@/api/basecfg/objAttributeValue'
+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'
+
+export default {
+  name: 'Device',
+  components: { Treeselect },
+  data() {
+    return {
+      primary1: 'primary',
+      primary2: '',
+      ComponentRow: [],
+      componentForm: {},
+      subcategoryCode: '',
+      attrList: [], // 属性模板数组
+      attrValues: [],
+      ComponentList: [],
+      attrValuesMap: {},
+      modelList: [],
+      showDrawer: false,
+      showDevProcessDrawer: false,
+      componentOpen: false,
+      istable: 2,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 能源设备表格数据
+      deviceList: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 区域名称
+      areaName: undefined,
+      // 区域树选项
+      treeAreaOptions: undefined,
+      totalAreaOptions: undefined,
+      // 设施选项
+      facsOptions: undefined,
+      // 设备分类
+      subCategoryOptions: undefined,
+      subsystemOptions: undefined,
+      devOptions: undefined,
+
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      // 查询参数
+      queryParams: {
+        psCode: null,
+        pageNum: 1,
+        pageSize: 10,
+        deviceCode: null,
+        deviceSubCategory: '',
+        deviceCategory: 'E',
+        locationType: null,
+        locationRef: null,
+        refFacs: null,
+        customAttrs: null
+      },
+      queryComponentParams: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      objComTypeMapping: {
+        1: '总开',
+        2: '照明',
+        3: '风机'
+      },
+      objComTypeOptions: [
+        { code: 1, name: '总开' },
+        { code: 2, name: '照明' },
+        { code: 3, name: '风机' }
+
+      ],
+      curRow: {},
+      attrData: [],
+      abilityData: [],
+      eventData: [],
+
+      // 表单参数
+      form: {
+        customAttrs: [] // 自定义属性数组
+      },
+      // 表单校验
+      rules: {
+        refFacs: [
+          { required: true, message: '归属设施', trigger: 'blur' }
+        ],
+        refArea: [
+          { required: true, message: '安装位置', trigger: 'blur' }
+        ],
+        deviceCode: [
+          { required: true, message: '设备代码不能为空', trigger: 'blur' }
+        ],
+        deviceName: [
+          { required: true, message: '设备名称不能为空', trigger: 'blur' }
+        ]
+      },
+      componentRules: {
+        deviceCode: [
+          { required: true, message: '设备code不能为空', trigger: 'blur' }
+        ],
+        compoCode: [
+          { required: true, message: '部件编码不能为空', trigger: 'blur' }
+        ],
+        psCode: [
+          { required: true, message: '工艺标签代码不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    // 根据名称筛选区域树
+    areaName(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created() {
+    this.queryParams.deviceCategory = 'GCC'; // 确保初始加载时就设置为 'GCZR'
+    this.getList()
+    this.getAreaTree('0', 1)
+    this.getFacsOptions()
+    this.getSubsystem()
+    this.getSubCategorygetByCode()
+    this.getFacsModel()
+    // this.getAllDevProcess(this.subcategoryCode)
+  },
+  methods: {
+    /**分页切换*/
+    switchData(v) {
+      if (v === 1) {
+        this.primary1 = "primary";
+        this.primary2 = "";
+      } else {
+        this.primary1 = "";
+        this.primary2 = "primary";
+      }
+      this.istable = v;
+    },
+    /** 查询能源设备列表 */
+    getList() {
+      this.loading = true
+      listDevRecursionByArea(this.queryParams).then(response => {
+        console.log('参数', JSON.stringify(this.queryParams))
+        this.deviceList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    /**新增、修改、删除*/
+    handleComponentAdd() {
+      this.componentReset()
+      this.componentOpen = true
+      this.title = '添加设备器件属性'
+      this.componentForm.deviceCode = this.ComponentRow.deviceCode // 设置默认设备代码
+
+    },
+    handleComponentUpdate(row) {
+      this.componentReset()
+      const id = row.id || this.ids
+      getComponent(id).then(response => {
+        this.componentForm = response.data
+        this.componentOpen = true
+        this.title = '修改设备器件属性'
+        this.componentForm.deviceCode = this.ComponentRow.deviceCode // 设置默认设备代码
+      })
+    },
+    handleComponentDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除能源对象属性编号为"' + ids + '"的数据项？').then(function() {
+        return delComponent(ids)
+      }).then(() => {
+        console.log('删除row', row.deviceCode)
+        this.getComponentList(row.deviceCode)
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {
+      })
+    },
+    submitComponentForm() {
+      this.$refs['componentForm'].validate(valid => {
+        if (valid) {
+          if (this.componentForm.id != null) {
+            updateComponent(this.componentForm).then(response => {
+              this.$modal.msgSuccess('修改成功')
+              this.componentOpen = false
+              this.getComponentList(this.componentForm.deviceCode)
+            })
+          } else {
+            addComponent(this.componentForm).then(response => {
+              this.$modal.msgSuccess('新增成功')
+              this.componentOpen = false
+              this.getComponentList(this.componentForm.deviceCode)
+            })
+          }
+        }
+      })
+    },
+    ComponentCancel() {
+      this.componentOpen = false
+      this.componentReset()
+    },
+    /**查询部件列表*/
+    getComponentList(deviceCode) {
+      listByDevice(deviceCode).then(response => {
+        this.ComponentList = response.data
+      })
+    },
+    /** 查询区域树结构 */
+    getAreaTree(areaCode, layer) {
+      areaTreeSelect(areaCode, layer).then(response => {
+        this.treeAreaOptions =  [{
+          id: '-1',
+          label: '全部',
+          children: response.data
+        }]
+      })
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      if (data.id === '-1') {
+        this.queryParams.locationType = null;
+        this.queryParams.locationRef = null;
+      } else {
+        this.queryParams.locationType = data.tier;
+        this.queryParams.locationRef = data.id;
+      }
+      this.handleQuery();
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        deviceCode: null,
+        deviceName: null,
+        deviceType: null,
+        deviceStatus: null,
+        deviceModel: null,
+        refArea: null,
+        refFacs: null,
+        subsystemCode: null,
+        psCode: null,
+        createTime: null,
+        updateTime: null
+
+      }
+      this.resetForm('form')
+    },
+    componentReset() {
+      this.componentForm = {
+        id: null,
+        deviceCode: this.ComponentRow.deviceCode || '', // 使用ComponentRow的deviceCode，或者空字符串
+        compoCode: null,
+        compoTag: null,
+        psCode: null,
+        extCompoCode: null,
+        compoModel: null,
+        compoBrand: null,
+        compoSpec: null,
+        ancestors: null,
+        parentCompo: null
+
+      }
+      this.resetForm('componentForm')
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      console.log('搜索按钮this.queryParams', JSON.stringify(this.queryParams))
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams.locationType = null
+      this.queryParams.locationRef = null
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = '添加能源设备'
+    },
+    /**设备器件按钮*/
+    handleDevProcess(row) {
+      this.showDevProcessDrawer = true
+      this.ComponentRow = row
+      console.log('row', row)
+      listByDevice(this.ComponentRow.deviceCode).then(response => {
+        this.ComponentList = response.data
+      })
+
+    },
+    shouldShowDevProcessButton(row) {
+      const categoryIsW = this.queryParams.deviceCategory === 'W'
+      const validPsCodes = ['AA', 'AH', 'AJ', 'AM', 'AP', 'AL', 'APE', 'ALE', 'AF', 'ACC']
+      const psCodeIsValid = validPsCodes.includes(row.psCode)
+      // 只有当设备分类为输能设备且设备工艺代码有效时，才返回true
+      return categoryIsW && psCodeIsValid
+    },
+    backStyle(areaPath) {
+      const firstLevel = areaPath.split('/')[0];
+      switch (firstLevel) {
+        case '北区':
+          return 'north';
+        case '南区':
+          return 'south';
+        case '主路':
+          return 'main';
+        default:
+          return '';
+      }
+    },
+    /**设备详情按钮*/
+    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(2, this.curRow.deviceCode).then(response => {
+        console.log('response值', response.data)
+        const attrs = response.data.attrs
+        const attrValues = response.data.attrValues
+
+        // 合并 attrs 和 attrValues 数组
+        const mergedData = attrValues.map(attrValue => {
+          const attr = attrs.find(a => a.attrKey === attrValue.attrKey)
+          return {
+            ...attrValue,
+            attrName: attr ? attr.attrName : attrValue.attrName,
+            attrUnit: attr ? attr.attrUnit : ''
+          }
+        })
+        this.attrData = mergedData
+      })
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const id = row.id || this.ids
+      getDevice(id).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = '修改能源设备'
+      })
+      const layer = 1
+      const areaCode = '0'
+      areaTreeSelect(areaCode, layer).then(response => {
+        this.totalAreaOptions = response.data
+      })
+    },
+    /** 提交按钮 */
+    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
+        const attrValue = this.attrValuesMap[attrKey]
+        const existingIndex = dataToSubmit.findIndex(item => item.attrKey === attrKey)
+        if (existingIndex === -1) {
+          // 如果attrKey不存在于dataToSubmit中，则添加
+          dataToSubmit.push({
+            modelCode: this.form.deviceModel, // 模型代码
+            objCode: this.form.deviceCode, // 设备代码
+            objType: 2, // 对象类型
+            attrKey: attrKey,
+            attrValue: attrValue,
+            attrName: attrName
+
+          })
+        }
+      })
+
+      // 添加自定义属性数据
+      this.form.customAttrs.forEach(customAttr => {
+        const attrName = customAttr.attrName
+        const attrKey = customAttr.attrKey
+        const attrValue = customAttr.attrValue
+        const existingIndex = dataToSubmit.findIndex(item => item.attrKey === attrKey)
+        if (existingIndex === -1) {
+          // 如果attrKey不存在于dataToSubmit中，则添加
+          dataToSubmit.push({
+            modelCode: '', // 模型代码
+            objCode: this.form.deviceCode, // 设备代码
+            objType: 2, // 对象类型
+            attrKey: attrKey,
+            attrValue: attrValue,
+            attrName: attrName
+          })
+        }
+      })
+
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateDevice(this.form).then(response => {
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            }).catch(error => {
+              console.error('修改失败:', error)
+              this.$message.error('修改失败')
+            })
+
+            if (dataToSubmit.length > 0) {
+              addAttrValueBatch(dataToSubmit)
+                  .then(response => {
+                    if (response.code === 200) {
+                      this.$message.success('属性添加成功')
+                    } else {
+                      this.$message.error('属性添加失败')
+                    }
+                  }).catch(error => {
+                console.error('属性添加失败:', error)
+                this.$message.error('属性添加失败')
+              })
+            }
+          } else {
+            addDevice(this.form).then(response => {
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            }).catch(error => {
+              console.error('新增失败:', error)
+              this.$message.error('新增失败')
+            })
+
+            if (dataToSubmit.length > 0) {
+              addAttrValueBatch(dataToSubmit)
+                  .then(response => {
+                    if (response.code === 200) {
+                      this.$message.success('属性添加成功')
+                    } else {
+                      this.$message.error('属性添加失败')
+                    }
+                  }).catch(error => {
+                console.error('属性添加失败:', error)
+                this.$message.error('属性添加失败')
+              })
+            } else {
+              // this.$message.info('没有属性需要添加');
+            }
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除能源设备编号为"' + ids + '"的数据项？').then(function() {
+        return delDevice(ids)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('ems/basecfg/device/export', {
+        ...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 || []
+      })
+    },
+    getSubsystem() {
+      listSubsystemAll().then(response => {
+        this.subsystemOptions = response.data
+      })
+    },
+    /**自定义属性表格*/
+    addCustomAttr() {
+      // 添加一个新的自定义属性
+      if (!Array.isArray(this.form.customAttrs)) {
+        this.form.customAttrs = []
+      }
+      this.form.customAttrs.push({
+        attrKey: '',
+        attrName: '',
+        attrValue: ''
+      })
+      // 强制更新视图
+      this.$forceUpdate()
+
+    },
+    deleteCustomAttr(index) {
+      // 删除指定索引的自定义属性
+      if (this.form.customAttrs.length > 0) {
+        this.form.customAttrs.splice(index, 1)
+      }
+
+    },
+    /**设备模型*/
+    updateAttrValue(attrKey, newValue) {
+      this.attrValuesMap[attrKey] = newValue
+    },
+
+    getFacsModel() {
+      listAllModel(2).then(response => {
+        this.modelList = response.data
+        console.log('this.modelList', this.modelList)
+        this.modelList.forEach(model => {
+          console.log(model.modelCode)
+        })
+      })
+    },
+    handleModelChange(modelCode) {
+      if (modelCode) {
+        this.getModelByCode(modelCode)
+        console.log('设备代码', this.form.deviceCode)
+        this.getObjAttr(2, this.form.deviceCode)
+      }
+    },
+    getModelByCode(modelCode) {
+      getModelByCode(modelCode).then(response => {
+        // this.attrList = response.data.attrList;
+        const filteredAttrList = response.data.attrList.filter(attr => attr.attrType === 0)
+        this.attrList = filteredAttrList
+
+      })
+    },
+    getObjAttr(objType, deviceCode) {
+      getObjAttr(objType, deviceCode).then(response => {
+        // const attrs = response.data.attrs;
+        const attrs = response.data.attrs.filter(attr => attr.attrType === 0)
+        console.log('attrs', attrs)
+        const attrValues = response.data.attrValues || [] // 确保是一个数组
+        console.log('attrValues', attrValues)
+
+        // 创建一个映射对象，用于存储 attrKey 与对应的 attrValue
+        const attrValuesMap = {}
+
+        // 遍历 attrs 数组
+        attrs.forEach(attr => {
+          // 查找 attrValues 数组中是否有匹配的 attrKey
+          const attrValueObj = attrValues.find(value => value.attrKey === attr.attrKey)
+          // 如果找到匹配的 attrValue，更新 attrValuesMap
+          if (attrValueObj) {
+            attrValuesMap[attr.attrKey] = attrValueObj.attrValue
+          } else {
+            // 如果没有找到匹配的 attrValue，则设置为 '暂无数据'
+            attrValuesMap[attr.attrKey] = ''
+          }
+        })
+
+        // 更新 attrValuesMap 到组件的数据中
+        this.attrValuesMap = attrValuesMap
+        // 打印更新后的 attrValuesMap，用于调试
+        console.log('Updated attrValuesMap', this.attrValuesMap)
+
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+.divider {
+  border-bottom: 2px solid #ebeef5;
+  margin: 10px 0;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.drawer-content {
+  padding: 0 20px;
+}
+
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.attr-list-container {
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin: 10px 0;
+  font-weight: bold;
+}
+
+.attr-list-container h3 {
+  font-weight: bold;
+}
+
+.attr-item {
+  list-style-type: none;
+  margin-bottom: 5px;
+}
+
+.attr-name {
+  font-weight: bold;
+}
+
+
+.contents{
+  border: 20px solid #f2f2f5;
+  background-color: #f2f2f5;
+}
+
+
+.other-content {
+  background-color: #ffffff; /* 白色背景 */
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.table-content {
+  background-color: #ffffff; /* 白色背景 */
+  padding: 20px;
+}
+
+.pagination-container {
+  margin-bottom: 20px;
+}
+
+.button-group-container {
+  display: flex;
+  justify-content: flex-end;
+  min-width: 200px;
+  padding: 5px;
+}
+
+.device-list {
+  margin-top: 20px;
+}
+
+.device-card {
+  background-color: #fff;
+  border: 1px solid #bfcbd9;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+  transition: 0.3s;
+  padding: 10px;
+  font-size: 14px;
+  height: 200px;
+  width: 350px;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.device-header {
+  //background-color: #f2f2f5;
+  //padding: 10px;
+  color: #545353;
+  font-size: 20px;
+  font-weight: bold;
+}
+.device-code{
+  color:cornflowerblue;
+}
+.deviceOthers{
+  color: black;
+}
+
+.device-body {
+  padding: 10px;
+  color: #666666;
+  flex: 1; /* 使设备主体内容占据剩余空间 */
+  overflow-y: auto; /* 如果内容过多，允许滚动 */
+}
+
+.device-footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 5px;
+  // background-color: #f9f9f9;
+}
+
+.device-footer .el-button {
+  padding: 5px 15px;
+  border: none; /* 移除默认边框 */
+  color: #5a5e66;
+  transition: background-color 0.3s; /* 平滑过渡背景色变化 */
+}
+
+/* 为按钮分配不同的颜色 */
+.device-footer .el-button:first-child {
+  background-color: #d5f1d5; /* 淡绿色 */
+  border: 1px solid lightgreen;
+  color: #71e2aa;
+
+}
+
+.device-footer .el-button:nth-child(2) {
+  background-color: #ffe5b4; /* 淡橙色 */
+  border: 1px solid #ffba00;
+  color: #faad14;
+}
+
+.device-footer .el-button:last-child {
+  background-color: #ffd5d5; /* 淡红色 */
+  border: 1px solid lightpink;
+  color: #f5222d;
+}
+
+/* 鼠标悬停时加深颜色 */
+.device-footer .el-button:hover {
+  filter: brightness(0.5); /* 颜色加深效果 */
+}
+
+/* 背景色样式 */
+.north {
+  background: linear-gradient(to right, #e1f3d8, #fafafa);
+}
+
+.south {
+  background: linear-gradient(to right, #fff7e8, #fafafa);
+}
+
+.main {
+  background: linear-gradient(to right, #e0e0e0, #fafafa);
+}
+
+
+.el-table {
+  background-color: #ffffff; /* 白色背景 */
+}
+
+.el-card {
+  background-color: #ffffff; /* 白色背景 */
+}
+</style>

ems-ui-cloud/src/views/adapter/gczr/index.vue

@@ -0,0 +1,1225 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small" prefix-icon="el-icon-search"
+                    style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container" style="height: 100vh; overflow: hidden; position: relative;">
+          <el-tree :data="treeAreaOptions" :props="defaultProps" :expand-on-click-node="false"
+                   :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
+                   @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;"
+          />
+        </div>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <div class="contents">
+          <div class="other-content">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+                     label-width="68px"
+            >
+              <el-form-item label="设备分类" prop="deviceSubCategory">
+                <el-select v-model="queryParams.deviceSubCategory">
+                  <el-option v-for="item in subCategoryOptions" placeholder="设备分类" :label="item.name" :value="item.code"
+                             :key="item.code"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="归属设施" prop="refFacs">
+                <el-select v-model="queryParams.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="subsystemCode">
+                <el-select v-model="queryParams.subsystemCode">
+                  <el-option v-for="item in subsystemOptions" :label="item.systemName" :value="item.systemCode"
+                             :key="item.systemCode"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+
+            <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']"
+                >新增
+                </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']"
+                >修改
+                </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']"
+                >删除
+                </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']"
+                >导出
+                </el-button>
+              </el-col>
+              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+          </div>
+
+          <div class="table-content">
+            <!--分页-->
+            <div class="button-group-container">
+              <el-button-group>
+                <el-button :type="primary1" icon="el-icon-s-fold" @click="switchData(1)" />
+                <el-button :type="primary2" icon="el-icon-menu" @click="switchData(2)" />
+              </el-button-group>
+            </div>
+
+            <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange" v-if="istable === 1">
+              <el-table-column type="selection" width="55" align="center"/>
+              <el-table-column label="设备名称" align="left" prop="deviceName"/>
+              <el-table-column label="安装位置" align="left" prop="areaPath" width="220px"/>
+              <el-table-column label="归属设施" align="center" prop="refFacsName"/>
+              <el-table-column label="设备分类" align="center" prop="deviceCategoryName"/>
+              <el-table-column label="子系统" align="center" prop="subsystemName"/>
+              <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)"
+                  >
+                    器件
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-info" @click="handleDetail(scope.row)"
+                             v-hasPermi="['basecfg:device:edit']"
+                  >
+                    详情
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                             v-hasPermi="['basecfg:device:edit']"
+                  >
+                    修改
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                             @click="handleDelete(scope.row)" v-hasPermi="['basecfg:device:remove']"
+                  >
+                    删除
+                  </el-button>
+
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div v-else-if="istable === 2" >
+              <el-row :gutter="20" class="device-list">
+                <el-col v-for="device in deviceList" :key="device.id" :span="6">
+                  <div :class="`device-card ${backStyle(device.areaPath)}`">
+                    <div class="device-header">
+                      <i class="el-icon-s-operation" style="margin-right: 8px;"></i>
+                      {{ device.deviceName }}
+                    </div>
+                    <div class="device-body">
+                      <p>设备代码：<span class="device-code">{{ device.deviceCode }}</span></p>
+                      <p>安装位置：<span class="deviceOthers">{{ device.areaPath }}</span></p>
+                      <p>归属设施：<span class="deviceOthers">{{ device.refFacsName }}</span></p>
+                      <p>设备分类：<span class="deviceOthers">{{ device.deviceCategoryName }}</span></p>
+                      <p>子系统：<span class="deviceOthers">{{ device.subsystemName }}</span></p>
+                    </div>
+                    <div class="device-footer">
+                      <el-button size="mini" plain icon=" el-icon-document"  @click="handleDetail(device)">详情</el-button>
+                      <el-button size="mini" plain icon="el-icon-edit" @click="handleUpdate(device)">修改</el-button>
+                      <el-button size="mini" plain icon="el-icon-delete"  type="danger" @click="handleDelete(device)">删除</el-button>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+
+
+            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+                        :limit.sync="queryParams.pageSize"
+                        @pagination="getList"
+            />
+
+            <!-- 添加或修改能源设备对话框 -->
+            <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="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="deviceType">
+                  <el-select v-model="form.deviceCategory">
+                    <el-option v-for="item in subCategoryOptions" :label="item.name" :value="item.code"
+                               :key="item.code"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="设备模型" prop="deviceModel">
+                  <el-select v-model="form.deviceModel" style="width:100%" @change="handleModelChange">
+                    <el-option
+                        v-for="item in modelList"
+                        :label="item.modelName"
+                        :value="item.modelCode"
+                        :key="item.modelCode"
+                    />
+                  </el-select>
+                </el-form-item>
+                <!-- 这里可以展示属性名称和属性值 -->
+                <div v-if="attrList.length > 0" class="attr-list-container">
+                  <h3>模型属性:</h3>
+                  <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="点击编辑"
+                          size="small"
+                          @blur="updateAttrValue(attr.attrKey, attrValuesMap[attr.attrKey])"
+                      >
+                      </el-input>
+                    </li>
+                  </ul>
+                </div>
+                <h3 class="attr-list-container" v-if="attrList.length > 0">自定义属性
+                  <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>
+                </h3>
+                <el-form-item label="子系统" prop="subsystemCode">
+                  <el-select v-model="form.subsystemCode">
+                    <el-option v-for="item in subsystemOptions" :label="item.systemName" :value="item.systemCode"
+                               :key="item.systemCode"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-form>
+              <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+              </div>
+            </el-dialog>
+
+            <!--设备器件-->
+            <el-drawer :title=ComponentRow.deviceName size="80%" :visible.sync="showDevProcessDrawer" direction="rtl">
+              <div class="drawer-content" style="padding-left:50px">
+                <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']"
+                    >新增
+                    </el-button>
+                  </el-col>
+                </el-row>
+                <el-table v-loading="loading" :data="ComponentList">
+                  <el-table-column type="selection" width="55" align="center"/>
+                  <el-table-column label="部件编码" align="center" prop="compoCode"/>
+                  <el-table-column label="部件标签" align="center" prop="compoTag">
+                    <template slot-scope="scope">
+                      {{ objComTypeMapping[scope.row.compoTag] }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="工艺标识代码" align="center" prop="psCode"/>
+                  <el-table-column label="外系统部件编码" align="center" prop="extCompoCode"/>
+                  <el-table-column label="部件模型" align="center" prop="compoModel"/>
+                  <el-table-column label="部件品牌" align="center" prop="compoBrand"/>
+                  <el-table-column label="部件型号" align="center" prop="compoSpec"/>
+                  <el-table-column label="祖籍列表" align="center" prop="ancestors"/>
+                  <el-table-column label="上级部件" align="center" prop="parentEqpt"/>
+
+                  <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="handleComponentUpdate(scope.row)"
+                                 v-hasPermi="['ems:component:edit']"
+                      >
+                        修改
+                      </el-button>
+                      <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                                 @click="handleComponentDelete(scope.row)" v-hasPermi="['ems:component:remove']"
+                      >
+                        删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <pagination v-show="total>0" :total="total" :page.sync="queryComponentParams.pageNum"
+                            :limit.sync="queryComponentParams.pageSize"
+                            @pagination="getComponentList"
+                />
+
+                <!-- 添加或修改设备器件对话框 -->
+                <el-dialog :title="title" :visible.sync="componentOpen" width="500px" append-to-body>
+                  <el-form ref="componentForm" :model="componentForm" :rules="componentRules" label-width="150px">
+                    <!--                <el-form-item label="设备code" prop="deviceCode">-->
+                    <!--                  <el-input v-model="componentForm.deviceCode" placeholder="请输入设备code" />-->
+                    <!--                </el-form-item>-->
+                    <el-form-item label="部件编码" prop="compoCode">
+                      <el-input v-model="componentForm.compoCode" placeholder="请输入部件编码"/>
+                    </el-form-item>
+                    <el-form-item label="部件标签" prop="compoTag">
+                      <el-select v-model="componentForm.compoTag" placeholder="请输入部件标签">
+                        <el-option v-for="item in objComTypeOptions"
+                                   :label="item.name"
+                                   :value="item.code"
+                                   :key="item.code"
+                        />
+
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="工艺标签代码" prop="psCode">
+                      <el-select v-model="componentForm.psCode" placeholder="请输入工艺标签代码">
+                        <el-option v-for="item in devOptions" :label="item.psCode" :value="item.psCode" :key="item.psCode"/>
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="外系统部件编码" prop="extCompoCode">
+                      <el-input v-model="componentForm.extCompoCode" placeholder="请输入外系统部件编码"/>
+                    </el-form-item>
+                    <el-form-item label="部件模型" prop="compoModel">
+                      <el-select v-model="componentForm.compoModel" placeholder="请输入部件模型">
+                        <el-option v-for="item in this.modelList" :label="item.modelCode" :value="item.modelCode"
+                                   :key="item.modelCode"
+                        />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="部件品牌" prop="compoBrand">
+                      <el-input v-model="componentForm.compoBrand" placeholder="请输入部件品牌"/>
+                    </el-form-item>
+                    <el-form-item label="部件型号" prop="compoSpec">
+                      <el-input v-model="componentForm.compoSpec" placeholder="请输入部件型号"/>
+                    </el-form-item>
+                    <el-form-item label="祖籍列表" prop="ancestors">
+                      <el-input v-model="componentForm.ancestors" placeholder="请输入祖籍列表"/>
+                    </el-form-item>
+                    <el-form-item label="上级列表" prop="parentCompo">
+                      <el-input v-model="componentForm.parentCompo" placeholder="请输入上级列表"/>
+                    </el-form-item>
+
+                  </el-form>
+                  <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitComponentForm">确 定</el-button>
+                    <el-button @click="ComponentCancel">取 消</el-button>
+                  </div>
+                </el-dialog>
+              </div>
+            </el-drawer>
+
+            <!-- 详情弹框 -->
+            <el-dialog :visible.sync="showDrawer" title="设备详情">
+              <div v-if="curRow">
+                <!-- 设备基本信息 -->
+                <el-card class="box-card">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">设备基本信息</span>
+                  </div>
+                  <div>
+                    <p>设备代码：{{ curRow.deviceCode }}</p>
+                    <p>设备名称：{{ curRow.deviceName }}</p>
+                    <p>设备类型：{{ curRow.deviceCategoryName }}</p>
+                    <p>子系统：{{ curRow.subsystemName }}</p>
+                    <p>归属区域：{{ curRow.areaPath }}</p>
+                    <p>归属设施：{{ curRow.refFacsName }}</p>
+                  </div>
+                </el-card>
+
+                <!-- 属性信息 -->
+                <el-card class="box-card" v-if="attrData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">属性定义</span>
+                  </div>
+                  <div v-for="(item, index) in attrData" :key="index">
+                    <p>属性名称：{{ item.attrName }}</p>
+                    <p>属性值：{{ item.attrValue }}</p>
+                    <p>属性单位：{{ item.attrUnit }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < attrData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+                <!-- 能力信息 -->
+                <el-card class="box-card" v-if="abilityData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">能力定义</span>
+                  </div>
+                  <div v-for="(item, index) in abilityData" :key="index">
+                    <p>能力名称：{{ item.abilityName }}</p>
+                    <p>能力键：{{ item.abilityKey }}</p>
+                    <p>能力参数：{{ item.abilityParam }}</p>
+                    <p>能力描述：{{ item.abilityDesc }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < abilityData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+                <!-- 事件信息 -->
+                <el-card class="box-card" v-if="eventData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">事件定义</span>
+                  </div>
+                  <div v-for="(item, index) in eventData" :key="index">
+                    <p>事件名称：{{ item.eventKey }}</p>
+                    <p>事件类型：{{ item.eventType === 1 ? '消息上报' : '异常告警' }}</p>
+                    <p>事件代码：{{ item.eventCode }}</p>
+                    <p>外部事件代码：{{ item.extEventCode }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < eventData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+              </div>
+            </el-dialog>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { listDevRecursionByArea, getDevice, delDevice, addDevice, updateDevice } from '@/api/device/device'
+import { areaTreeSelect } from '@/api/basecfg/area'
+import { getFacsCategorygetByCode, listAllFacs } from '@/api/basecfg/emsfacs'
+import { listSubsystemAll } from '@/api/adapter/subsystem'
+import { getModelByCode, listAllModel } from '@/api/basecfg/objModel'
+import { getObjAttr } from '@/api/basecfg/objAttribute'
+import { addAttrValueBatch } from '@/api/basecfg/objAttributeValue'
+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'
+
+export default {
+  name: 'Device',
+  components: { Treeselect },
+  data() {
+    return {
+      primary1: 'primary',
+      primary2: '',
+      ComponentRow: [],
+      componentForm: {},
+      subcategoryCode: '',
+      attrList: [], // 属性模板数组
+      attrValues: [],
+      ComponentList: [],
+      attrValuesMap: {},
+      modelList: [],
+      showDrawer: false,
+      showDevProcessDrawer: false,
+      componentOpen: false,
+      istable: 2,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 能源设备表格数据
+      deviceList: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 区域名称
+      areaName: undefined,
+      // 区域树选项
+      treeAreaOptions: undefined,
+      totalAreaOptions: undefined,
+      // 设施选项
+      facsOptions: undefined,
+      // 设备分类
+      subCategoryOptions: undefined,
+      subsystemOptions: undefined,
+      devOptions: undefined,
+
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      // 查询参数
+      queryParams: {
+        psCode: null,
+        pageNum: 1,
+        pageSize: 10,
+        deviceCode: null,
+        deviceSubCategory: '',
+        deviceCategory: 'E',
+        locationType: null,
+        locationRef: null,
+        refFacs: null,
+        customAttrs: null
+      },
+      queryComponentParams: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      objComTypeMapping: {
+        1: '总开',
+        2: '照明',
+        3: '风机'
+      },
+      objComTypeOptions: [
+        { code: 1, name: '总开' },
+        { code: 2, name: '照明' },
+        { code: 3, name: '风机' }
+
+      ],
+      curRow: {},
+      attrData: [],
+      abilityData: [],
+      eventData: [],
+
+      // 表单参数
+      form: {
+        customAttrs: [] // 自定义属性数组
+      },
+      // 表单校验
+      rules: {
+        refFacs: [
+          { required: true, message: '归属设施', trigger: 'blur' }
+        ],
+        refArea: [
+          { required: true, message: '安装位置', trigger: 'blur' }
+        ],
+        deviceCode: [
+          { required: true, message: '设备代码不能为空', trigger: 'blur' }
+        ],
+        deviceName: [
+          { required: true, message: '设备名称不能为空', trigger: 'blur' }
+        ]
+      },
+      componentRules: {
+        deviceCode: [
+          { required: true, message: '设备code不能为空', trigger: 'blur' }
+        ],
+        compoCode: [
+          { required: true, message: '部件编码不能为空', trigger: 'blur' }
+        ],
+        psCode: [
+          { required: true, message: '工艺标签代码不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    // 根据名称筛选区域树
+    areaName(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created() {
+    this.queryParams.deviceCategory = 'GCZR'; // 确保初始加载时就设置为 'GCZR'
+    this.getList()
+    this.getAreaTree('0', 1)
+    this.getFacsOptions()
+    this.getSubsystem()
+    this.getSubCategorygetByCode()
+    this.getFacsModel()
+    // this.getAllDevProcess(this.subcategoryCode)
+  },
+  methods: {
+    /**分页切换*/
+    switchData(v) {
+      if (v === 1) {
+        this.primary1 = "primary";
+        this.primary2 = "";
+      } else {
+        this.primary1 = "";
+        this.primary2 = "primary";
+      }
+      this.istable = v;
+    },
+    /** 查询能源设备列表 */
+    getList() {
+      this.loading = true
+      listDevRecursionByArea(this.queryParams).then(response => {
+        console.log('参数', JSON.stringify(this.queryParams))
+        this.deviceList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    /**新增、修改、删除*/
+    handleComponentAdd() {
+      this.componentReset()
+      this.componentOpen = true
+      this.title = '添加设备器件属性'
+      this.componentForm.deviceCode = this.ComponentRow.deviceCode // 设置默认设备代码
+
+    },
+    handleComponentUpdate(row) {
+      this.componentReset()
+      const id = row.id || this.ids
+      getComponent(id).then(response => {
+        this.componentForm = response.data
+        this.componentOpen = true
+        this.title = '修改设备器件属性'
+        this.componentForm.deviceCode = this.ComponentRow.deviceCode // 设置默认设备代码
+      })
+    },
+    handleComponentDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除能源对象属性编号为"' + ids + '"的数据项？').then(function() {
+        return delComponent(ids)
+      }).then(() => {
+        console.log('删除row', row.deviceCode)
+        this.getComponentList(row.deviceCode)
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {
+      })
+    },
+    submitComponentForm() {
+      this.$refs['componentForm'].validate(valid => {
+        if (valid) {
+          if (this.componentForm.id != null) {
+            updateComponent(this.componentForm).then(response => {
+              this.$modal.msgSuccess('修改成功')
+              this.componentOpen = false
+              this.getComponentList(this.componentForm.deviceCode)
+            })
+          } else {
+            addComponent(this.componentForm).then(response => {
+              this.$modal.msgSuccess('新增成功')
+              this.componentOpen = false
+              this.getComponentList(this.componentForm.deviceCode)
+            })
+          }
+        }
+      })
+    },
+    ComponentCancel() {
+      this.componentOpen = false
+      this.componentReset()
+    },
+    /**查询部件列表*/
+    getComponentList(deviceCode) {
+      listByDevice(deviceCode).then(response => {
+        this.ComponentList = response.data
+      })
+    },
+    /** 查询区域树结构 */
+    getAreaTree(areaCode, layer) {
+      areaTreeSelect(areaCode, layer).then(response => {
+        this.treeAreaOptions =  [{
+          id: '-1',
+          label: '全部',
+          children: response.data
+        }]
+      })
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      if (data.id === '-1') {
+        this.queryParams.locationType = null;
+        this.queryParams.locationRef = null;
+      } else {
+        this.queryParams.locationType = data.tier;
+        this.queryParams.locationRef = data.id;
+      }
+      this.handleQuery();
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        deviceCode: null,
+        deviceName: null,
+        deviceType: null,
+        deviceStatus: null,
+        deviceModel: null,
+        refArea: null,
+        refFacs: null,
+        subsystemCode: null,
+        psCode: null,
+        createTime: null,
+        updateTime: null
+
+      }
+      this.resetForm('form')
+    },
+    componentReset() {
+      this.componentForm = {
+        id: null,
+        deviceCode: this.ComponentRow.deviceCode || '', // 使用ComponentRow的deviceCode，或者空字符串
+        compoCode: null,
+        compoTag: null,
+        psCode: null,
+        extCompoCode: null,
+        compoModel: null,
+        compoBrand: null,
+        compoSpec: null,
+        ancestors: null,
+        parentCompo: null
+
+      }
+      this.resetForm('componentForm')
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      console.log('搜索按钮this.queryParams', JSON.stringify(this.queryParams))
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams.locationType = null
+      this.queryParams.locationRef = null
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = '添加能源设备'
+    },
+    /**设备器件按钮*/
+    handleDevProcess(row) {
+      this.showDevProcessDrawer = true
+      this.ComponentRow = row
+      console.log('row', row)
+      listByDevice(this.ComponentRow.deviceCode).then(response => {
+        this.ComponentList = response.data
+      })
+
+    },
+    shouldShowDevProcessButton(row) {
+      const categoryIsW = this.queryParams.deviceCategory === 'W'
+      const validPsCodes = ['AA', 'AH', 'AJ', 'AM', 'AP', 'AL', 'APE', 'ALE', 'AF', 'ACC']
+      const psCodeIsValid = validPsCodes.includes(row.psCode)
+      // 只有当设备分类为输能设备且设备工艺代码有效时，才返回true
+      return categoryIsW && psCodeIsValid
+    },
+    backStyle(areaPath) {
+      const firstLevel = areaPath.split('/')[0];
+      switch (firstLevel) {
+        case '北区':
+          return 'north';
+        case '南区':
+          return 'south';
+        case '主路':
+          return 'main';
+        default:
+          return '';
+      }
+    },
+    /**设备详情按钮*/
+    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(2, this.curRow.deviceCode).then(response => {
+        console.log('response值', response.data)
+        const attrs = response.data.attrs
+        const attrValues = response.data.attrValues
+
+        // 合并 attrs 和 attrValues 数组
+        const mergedData = attrValues.map(attrValue => {
+          const attr = attrs.find(a => a.attrKey === attrValue.attrKey)
+          return {
+            ...attrValue,
+            attrName: attr ? attr.attrName : attrValue.attrName,
+            attrUnit: attr ? attr.attrUnit : ''
+          }
+        })
+        this.attrData = mergedData
+      })
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const id = row.id || this.ids
+      getDevice(id).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = '修改能源设备'
+      })
+      const layer = 1
+      const areaCode = '0'
+      areaTreeSelect(areaCode, layer).then(response => {
+        this.totalAreaOptions = response.data
+      })
+    },
+    /** 提交按钮 */
+    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
+        const attrValue = this.attrValuesMap[attrKey]
+        const existingIndex = dataToSubmit.findIndex(item => item.attrKey === attrKey)
+        if (existingIndex === -1) {
+          // 如果attrKey不存在于dataToSubmit中，则添加
+          dataToSubmit.push({
+            modelCode: this.form.deviceModel, // 模型代码
+            objCode: this.form.deviceCode, // 设备代码
+            objType: 2, // 对象类型
+            attrKey: attrKey,
+            attrValue: attrValue,
+            attrName: attrName
+
+          })
+        }
+      })
+
+      // 添加自定义属性数据
+      this.form.customAttrs.forEach(customAttr => {
+        const attrName = customAttr.attrName
+        const attrKey = customAttr.attrKey
+        const attrValue = customAttr.attrValue
+        const existingIndex = dataToSubmit.findIndex(item => item.attrKey === attrKey)
+        if (existingIndex === -1) {
+          // 如果attrKey不存在于dataToSubmit中，则添加
+          dataToSubmit.push({
+            modelCode: '', // 模型代码
+            objCode: this.form.deviceCode, // 设备代码
+            objType: 2, // 对象类型
+            attrKey: attrKey,
+            attrValue: attrValue,
+            attrName: attrName
+          })
+        }
+      })
+
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateDevice(this.form).then(response => {
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            }).catch(error => {
+              console.error('修改失败:', error)
+              this.$message.error('修改失败')
+            })
+
+            if (dataToSubmit.length > 0) {
+              addAttrValueBatch(dataToSubmit)
+                  .then(response => {
+                    if (response.code === 200) {
+                      this.$message.success('属性添加成功')
+                    } else {
+                      this.$message.error('属性添加失败')
+                    }
+                  }).catch(error => {
+                console.error('属性添加失败:', error)
+                this.$message.error('属性添加失败')
+              })
+            }
+          } else {
+            addDevice(this.form).then(response => {
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            }).catch(error => {
+              console.error('新增失败:', error)
+              this.$message.error('新增失败')
+            })
+
+            if (dataToSubmit.length > 0) {
+              addAttrValueBatch(dataToSubmit)
+                  .then(response => {
+                    if (response.code === 200) {
+                      this.$message.success('属性添加成功')
+                    } else {
+                      this.$message.error('属性添加失败')
+                    }
+                  }).catch(error => {
+                console.error('属性添加失败:', error)
+                this.$message.error('属性添加失败')
+              })
+            } else {
+              // this.$message.info('没有属性需要添加');
+            }
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除能源设备编号为"' + ids + '"的数据项？').then(function() {
+        return delDevice(ids)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('ems/basecfg/device/export', {
+        ...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 || []
+      })
+    },
+    getSubsystem() {
+      listSubsystemAll().then(response => {
+        this.subsystemOptions = response.data
+      })
+    },
+    /**自定义属性表格*/
+    addCustomAttr() {
+      // 添加一个新的自定义属性
+      if (!Array.isArray(this.form.customAttrs)) {
+        this.form.customAttrs = []
+      }
+      this.form.customAttrs.push({
+        attrKey: '',
+        attrName: '',
+        attrValue: ''
+      })
+      // 强制更新视图
+      this.$forceUpdate()
+
+    },
+    deleteCustomAttr(index) {
+      // 删除指定索引的自定义属性
+      if (this.form.customAttrs.length > 0) {
+        this.form.customAttrs.splice(index, 1)
+      }
+
+    },
+    /**设备模型*/
+    updateAttrValue(attrKey, newValue) {
+      this.attrValuesMap[attrKey] = newValue
+    },
+
+    getFacsModel() {
+      listAllModel(2).then(response => {
+        this.modelList = response.data
+        console.log('this.modelList', this.modelList)
+        this.modelList.forEach(model => {
+          console.log(model.modelCode)
+        })
+      })
+    },
+    handleModelChange(modelCode) {
+      if (modelCode) {
+        this.getModelByCode(modelCode)
+        console.log('设备代码', this.form.deviceCode)
+        this.getObjAttr(2, this.form.deviceCode)
+      }
+    },
+    getModelByCode(modelCode) {
+      getModelByCode(modelCode).then(response => {
+        // this.attrList = response.data.attrList;
+        const filteredAttrList = response.data.attrList.filter(attr => attr.attrType === 0)
+        this.attrList = filteredAttrList
+
+      })
+    },
+    getObjAttr(objType, deviceCode) {
+      getObjAttr(objType, deviceCode).then(response => {
+        // const attrs = response.data.attrs;
+        const attrs = response.data.attrs.filter(attr => attr.attrType === 0)
+        console.log('attrs', attrs)
+        const attrValues = response.data.attrValues || [] // 确保是一个数组
+        console.log('attrValues', attrValues)
+
+        // 创建一个映射对象，用于存储 attrKey 与对应的 attrValue
+        const attrValuesMap = {}
+
+        // 遍历 attrs 数组
+        attrs.forEach(attr => {
+          // 查找 attrValues 数组中是否有匹配的 attrKey
+          const attrValueObj = attrValues.find(value => value.attrKey === attr.attrKey)
+          // 如果找到匹配的 attrValue，更新 attrValuesMap
+          if (attrValueObj) {
+            attrValuesMap[attr.attrKey] = attrValueObj.attrValue
+          } else {
+            // 如果没有找到匹配的 attrValue，则设置为 '暂无数据'
+            attrValuesMap[attr.attrKey] = ''
+          }
+        })
+
+        // 更新 attrValuesMap 到组件的数据中
+        this.attrValuesMap = attrValuesMap
+        // 打印更新后的 attrValuesMap，用于调试
+        console.log('Updated attrValuesMap', this.attrValuesMap)
+
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+.divider {
+  border-bottom: 2px solid #ebeef5;
+  margin: 10px 0;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.drawer-content {
+  padding: 0 20px;
+}
+
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.attr-list-container {
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin: 10px 0;
+  font-weight: bold;
+}
+
+.attr-list-container h3 {
+  font-weight: bold;
+}
+
+.attr-item {
+  list-style-type: none;
+  margin-bottom: 5px;
+}
+
+.attr-name {
+  font-weight: bold;
+}
+
+
+.contents{
+  border: 20px solid #f2f2f5;
+  background-color: #f2f2f5;
+}
+
+
+.other-content {
+  background-color: #ffffff; /* 白色背景 */
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.table-content {
+  background-color: #ffffff; /* 白色背景 */
+  padding: 20px;
+}
+
+.pagination-container {
+  margin-bottom: 20px;
+}
+
+.button-group-container {
+  display: flex;
+  justify-content: flex-end;
+  min-width: 200px;
+  padding: 5px;
+}
+
+.device-list {
+  margin-top: 20px;
+}
+
+.device-card {
+  background-color: #fff;
+  border: 1px solid #bfcbd9;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+  transition: 0.3s;
+  padding: 10px;
+  font-size: 14px;
+  height: 200px;
+  width: 350px;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.device-header {
+  //background-color: #f2f2f5;
+  //padding: 10px;
+  color: #545353;
+  font-size: 20px;
+  font-weight: bold;
+}
+.device-code{
+  color:cornflowerblue;
+}
+.deviceOthers{
+  color: black;
+}
+
+.device-body {
+  padding: 10px;
+  color: #666666;
+  flex: 1; /* 使设备主体内容占据剩余空间 */
+  overflow-y: auto; /* 如果内容过多，允许滚动 */
+}
+
+.device-footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 5px;
+  // background-color: #f9f9f9;
+}
+
+.device-footer .el-button {
+  padding: 5px 15px;
+  border: none; /* 移除默认边框 */
+  color: #5a5e66;
+  transition: background-color 0.3s; /* 平滑过渡背景色变化 */
+}
+
+/* 为按钮分配不同的颜色 */
+.device-footer .el-button:first-child {
+  background-color: #d5f1d5; /* 淡绿色 */
+  border: 1px solid lightgreen;
+  color: #71e2aa;
+
+}
+
+.device-footer .el-button:nth-child(2) {
+  background-color: #ffe5b4; /* 淡橙色 */
+  border: 1px solid #ffba00;
+  color: #faad14;
+}
+
+.device-footer .el-button:last-child {
+  background-color: #ffd5d5; /* 淡红色 */
+  border: 1px solid lightpink;
+  color: #f5222d;
+}
+
+/* 鼠标悬停时加深颜色 */
+.device-footer .el-button:hover {
+  filter: brightness(0.5); /* 颜色加深效果 */
+}
+
+/* 背景色样式 */
+.north {
+  background: linear-gradient(to right, #e1f3d8, #fafafa);
+}
+
+.south {
+  background: linear-gradient(to right, #fff7e8, #fafafa);
+}
+
+.main {
+  background: linear-gradient(to right, #e0e0e0, #fafafa);
+}
+
+
+.el-table {
+  background-color: #ffffff; /* 白色背景 */
+}
+
+.el-card {
+  background-color: #ffffff; /* 白色背景 */
+}
+</style>

ems-ui-cloud/src/views/adapter/hm/index.vue

@@ -0,0 +1,1225 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small" prefix-icon="el-icon-search"
+                    style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container" style="height: 100vh; overflow: hidden; position: relative;">
+          <el-tree :data="treeAreaOptions" :props="defaultProps" :expand-on-click-node="false"
+                   :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
+                   @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;"
+          />
+        </div>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <div class="contents">
+          <div class="other-content">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+                     label-width="68px"
+            >
+              <el-form-item label="设备分类" prop="deviceSubCategory">
+                <el-select v-model="queryParams.deviceSubCategory">
+                  <el-option v-for="item in subCategoryOptions" placeholder="设备分类" :label="item.name" :value="item.code"
+                             :key="item.code"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="归属设施" prop="refFacs">
+                <el-select v-model="queryParams.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="subsystemCode">
+                <el-select v-model="queryParams.subsystemCode">
+                  <el-option v-for="item in subsystemOptions" :label="item.systemName" :value="item.systemCode"
+                             :key="item.systemCode"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+
+            <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']"
+                >新增
+                </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']"
+                >修改
+                </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']"
+                >删除
+                </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']"
+                >导出
+                </el-button>
+              </el-col>
+              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+          </div>
+
+          <div class="table-content">
+            <!--分页-->
+            <div class="button-group-container">
+              <el-button-group>
+                <el-button :type="primary1" icon="el-icon-s-fold" @click="switchData(1)" />
+                <el-button :type="primary2" icon="el-icon-menu" @click="switchData(2)" />
+              </el-button-group>
+            </div>
+
+            <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange" v-if="istable === 1">
+              <el-table-column type="selection" width="55" align="center"/>
+              <el-table-column label="设备名称" align="left" prop="deviceName"/>
+              <el-table-column label="安装位置" align="left" prop="areaPath" width="220px"/>
+              <el-table-column label="归属设施" align="center" prop="refFacsName"/>
+              <el-table-column label="设备分类" align="center" prop="deviceCategoryName"/>
+              <el-table-column label="子系统" align="center" prop="subsystemName"/>
+              <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)"
+                  >
+                    器件
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-info" @click="handleDetail(scope.row)"
+                             v-hasPermi="['basecfg:device:edit']"
+                  >
+                    详情
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                             v-hasPermi="['basecfg:device:edit']"
+                  >
+                    修改
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                             @click="handleDelete(scope.row)" v-hasPermi="['basecfg:device:remove']"
+                  >
+                    删除
+                  </el-button>
+
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div v-else-if="istable === 2" >
+              <el-row :gutter="20" class="device-list">
+                <el-col v-for="device in deviceList" :key="device.id" :span="6">
+                  <div :class="`device-card ${backStyle(device.areaPath)}`">
+                    <div class="device-header">
+                      <i class="el-icon-s-operation" style="margin-right: 8px;"></i>
+                      {{ device.deviceName }}
+                    </div>
+                    <div class="device-body">
+                      <p>设备代码：<span class="device-code">{{ device.deviceCode }}</span></p>
+                      <p>安装位置：<span class="deviceOthers">{{ device.areaPath }}</span></p>
+                      <p>归属设施：<span class="deviceOthers">{{ device.refFacsName }}</span></p>
+                      <p>设备分类：<span class="deviceOthers">{{ device.deviceCategoryName }}</span></p>
+                      <p>子系统：<span class="deviceOthers">{{ device.subsystemName }}</span></p>
+                    </div>
+                    <div class="device-footer">
+                      <el-button size="mini" plain icon=" el-icon-document"  @click="handleDetail(device)">详情</el-button>
+                      <el-button size="mini" plain icon="el-icon-edit" @click="handleUpdate(device)">修改</el-button>
+                      <el-button size="mini" plain icon="el-icon-delete"  type="danger" @click="handleDelete(device)">删除</el-button>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+
+
+            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+                        :limit.sync="queryParams.pageSize"
+                        @pagination="getList"
+            />
+
+            <!-- 添加或修改能源设备对话框 -->
+            <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="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="deviceType">
+                  <el-select v-model="form.deviceCategory">
+                    <el-option v-for="item in subCategoryOptions" :label="item.name" :value="item.code"
+                               :key="item.code"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="设备模型" prop="deviceModel">
+                  <el-select v-model="form.deviceModel" style="width:100%" @change="handleModelChange">
+                    <el-option
+                      v-for="item in modelList"
+                      :label="item.modelName"
+                      :value="item.modelCode"
+                      :key="item.modelCode"
+                    />
+                  </el-select>
+                </el-form-item>
+                <!-- 这里可以展示属性名称和属性值 -->
+                <div v-if="attrList.length > 0" class="attr-list-container">
+                  <h3>模型属性:</h3>
+                  <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="点击编辑"
+                        size="small"
+                        @blur="updateAttrValue(attr.attrKey, attrValuesMap[attr.attrKey])"
+                      >
+                      </el-input>
+                    </li>
+                  </ul>
+                </div>
+                <h3 class="attr-list-container" v-if="attrList.length > 0">自定义属性
+                  <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>
+                </h3>
+                <el-form-item label="子系统" prop="subsystemCode">
+                  <el-select v-model="form.subsystemCode">
+                    <el-option v-for="item in subsystemOptions" :label="item.systemName" :value="item.systemCode"
+                               :key="item.systemCode"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-form>
+              <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+              </div>
+            </el-dialog>
+
+            <!--设备器件-->
+            <el-drawer :title=ComponentRow.deviceName size="80%" :visible.sync="showDevProcessDrawer" direction="rtl">
+              <div class="drawer-content" style="padding-left:50px">
+                <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']"
+                    >新增
+                    </el-button>
+                  </el-col>
+                </el-row>
+                <el-table v-loading="loading" :data="ComponentList">
+                  <el-table-column type="selection" width="55" align="center"/>
+                  <el-table-column label="部件编码" align="center" prop="compoCode"/>
+                  <el-table-column label="部件标签" align="center" prop="compoTag">
+                    <template slot-scope="scope">
+                      {{ objComTypeMapping[scope.row.compoTag] }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="工艺标识代码" align="center" prop="psCode"/>
+                  <el-table-column label="外系统部件编码" align="center" prop="extCompoCode"/>
+                  <el-table-column label="部件模型" align="center" prop="compoModel"/>
+                  <el-table-column label="部件品牌" align="center" prop="compoBrand"/>
+                  <el-table-column label="部件型号" align="center" prop="compoSpec"/>
+                  <el-table-column label="祖籍列表" align="center" prop="ancestors"/>
+                  <el-table-column label="上级部件" align="center" prop="parentEqpt"/>
+
+                  <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="handleComponentUpdate(scope.row)"
+                                 v-hasPermi="['ems:component:edit']"
+                      >
+                        修改
+                      </el-button>
+                      <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                                 @click="handleComponentDelete(scope.row)" v-hasPermi="['ems:component:remove']"
+                      >
+                        删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <pagination v-show="total>0" :total="total" :page.sync="queryComponentParams.pageNum"
+                            :limit.sync="queryComponentParams.pageSize"
+                            @pagination="getComponentList"
+                />
+
+                <!-- 添加或修改设备器件对话框 -->
+                <el-dialog :title="title" :visible.sync="componentOpen" width="500px" append-to-body>
+                  <el-form ref="componentForm" :model="componentForm" :rules="componentRules" label-width="150px">
+                    <!--                <el-form-item label="设备code" prop="deviceCode">-->
+                    <!--                  <el-input v-model="componentForm.deviceCode" placeholder="请输入设备code" />-->
+                    <!--                </el-form-item>-->
+                    <el-form-item label="部件编码" prop="compoCode">
+                      <el-input v-model="componentForm.compoCode" placeholder="请输入部件编码"/>
+                    </el-form-item>
+                    <el-form-item label="部件标签" prop="compoTag">
+                      <el-select v-model="componentForm.compoTag" placeholder="请输入部件标签">
+                        <el-option v-for="item in objComTypeOptions"
+                                   :label="item.name"
+                                   :value="item.code"
+                                   :key="item.code"
+                        />
+
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="工艺标签代码" prop="psCode">
+                      <el-select v-model="componentForm.psCode" placeholder="请输入工艺标签代码">
+                        <el-option v-for="item in devOptions" :label="item.psCode" :value="item.psCode" :key="item.psCode"/>
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="外系统部件编码" prop="extCompoCode">
+                      <el-input v-model="componentForm.extCompoCode" placeholder="请输入外系统部件编码"/>
+                    </el-form-item>
+                    <el-form-item label="部件模型" prop="compoModel">
+                      <el-select v-model="componentForm.compoModel" placeholder="请输入部件模型">
+                        <el-option v-for="item in this.modelList" :label="item.modelCode" :value="item.modelCode"
+                                   :key="item.modelCode"
+                        />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="部件品牌" prop="compoBrand">
+                      <el-input v-model="componentForm.compoBrand" placeholder="请输入部件品牌"/>
+                    </el-form-item>
+                    <el-form-item label="部件型号" prop="compoSpec">
+                      <el-input v-model="componentForm.compoSpec" placeholder="请输入部件型号"/>
+                    </el-form-item>
+                    <el-form-item label="祖籍列表" prop="ancestors">
+                      <el-input v-model="componentForm.ancestors" placeholder="请输入祖籍列表"/>
+                    </el-form-item>
+                    <el-form-item label="上级列表" prop="parentCompo">
+                      <el-input v-model="componentForm.parentCompo" placeholder="请输入上级列表"/>
+                    </el-form-item>
+
+                  </el-form>
+                  <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitComponentForm">确 定</el-button>
+                    <el-button @click="ComponentCancel">取 消</el-button>
+                  </div>
+                </el-dialog>
+              </div>
+            </el-drawer>
+
+            <!-- 详情弹框 -->
+            <el-dialog :visible.sync="showDrawer" title="设备详情">
+              <div v-if="curRow">
+                <!-- 设备基本信息 -->
+                <el-card class="box-card">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">设备基本信息</span>
+                  </div>
+                  <div>
+                    <p>设备代码：{{ curRow.deviceCode }}</p>
+                    <p>设备名称：{{ curRow.deviceName }}</p>
+                    <p>设备类型：{{ curRow.deviceCategoryName }}</p>
+                    <p>子系统：{{ curRow.subsystemName }}</p>
+                    <p>归属区域：{{ curRow.areaPath }}</p>
+                    <p>归属设施：{{ curRow.refFacsName }}</p>
+                  </div>
+                </el-card>
+
+                <!-- 属性信息 -->
+                <el-card class="box-card" v-if="attrData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">属性定义</span>
+                  </div>
+                  <div v-for="(item, index) in attrData" :key="index">
+                    <p>属性名称：{{ item.attrName }}</p>
+                    <p>属性值：{{ item.attrValue }}</p>
+                    <p>属性单位：{{ item.attrUnit }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < attrData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+                <!-- 能力信息 -->
+                <el-card class="box-card" v-if="abilityData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">能力定义</span>
+                  </div>
+                  <div v-for="(item, index) in abilityData" :key="index">
+                    <p>能力名称：{{ item.abilityName }}</p>
+                    <p>能力键：{{ item.abilityKey }}</p>
+                    <p>能力参数：{{ item.abilityParam }}</p>
+                    <p>能力描述：{{ item.abilityDesc }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < abilityData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+                <!-- 事件信息 -->
+                <el-card class="box-card" v-if="eventData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">事件定义</span>
+                  </div>
+                  <div v-for="(item, index) in eventData" :key="index">
+                    <p>事件名称：{{ item.eventKey }}</p>
+                    <p>事件类型：{{ item.eventType === 1 ? '消息上报' : '异常告警' }}</p>
+                    <p>事件代码：{{ item.eventCode }}</p>
+                    <p>外部事件代码：{{ item.extEventCode }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < eventData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+              </div>
+            </el-dialog>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { listDevRecursionByArea, getDevice, delDevice, addDevice, updateDevice } from '@/api/device/device'
+import { areaTreeSelect } from '@/api/basecfg/area'
+import { getFacsCategorygetByCode, listAllFacs } from '@/api/basecfg/emsfacs'
+import { listSubsystemAll } from '@/api/adapter/subsystem'
+import { getModelByCode, listAllModel } from '@/api/basecfg/objModel'
+import { getObjAttr } from '@/api/basecfg/objAttribute'
+import { addAttrValueBatch } from '@/api/basecfg/objAttributeValue'
+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'
+
+export default {
+  name: 'Device',
+  components: { Treeselect },
+  data() {
+    return {
+      primary1: 'primary',
+      primary2: '',
+      ComponentRow: [],
+      componentForm: {},
+      subcategoryCode: '',
+      attrList: [], // 属性模板数组
+      attrValues: [],
+      ComponentList: [],
+      attrValuesMap: {},
+      modelList: [],
+      showDrawer: false,
+      showDevProcessDrawer: false,
+      componentOpen: false,
+      istable: 2,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 能源设备表格数据
+      deviceList: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 区域名称
+      areaName: undefined,
+      // 区域树选项
+      treeAreaOptions: undefined,
+      totalAreaOptions: undefined,
+      // 设施选项
+      facsOptions: undefined,
+      // 设备分类
+      subCategoryOptions: undefined,
+      subsystemOptions: undefined,
+      devOptions: undefined,
+
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      // 查询参数
+      queryParams: {
+        psCode: null,
+        pageNum: 1,
+        pageSize: 10,
+        deviceCode: null,
+        deviceSubCategory: '',
+        deviceCategory: 'E',
+        locationType: null,
+        locationRef: null,
+        refFacs: null,
+        customAttrs: null
+      },
+      queryComponentParams: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      objComTypeMapping: {
+        1: '总开',
+        2: '照明',
+        3: '风机'
+      },
+      objComTypeOptions: [
+        { code: 1, name: '总开' },
+        { code: 2, name: '照明' },
+        { code: 3, name: '风机' }
+
+      ],
+      curRow: {},
+      attrData: [],
+      abilityData: [],
+      eventData: [],
+
+      // 表单参数
+      form: {
+        customAttrs: [] // 自定义属性数组
+      },
+      // 表单校验
+      rules: {
+        refFacs: [
+          { required: true, message: '归属设施', trigger: 'blur' }
+        ],
+        refArea: [
+          { required: true, message: '安装位置', trigger: 'blur' }
+        ],
+        deviceCode: [
+          { required: true, message: '设备代码不能为空', trigger: 'blur' }
+        ],
+        deviceName: [
+          { required: true, message: '设备名称不能为空', trigger: 'blur' }
+        ]
+      },
+      componentRules: {
+        deviceCode: [
+          { required: true, message: '设备code不能为空', trigger: 'blur' }
+        ],
+        compoCode: [
+          { required: true, message: '部件编码不能为空', trigger: 'blur' }
+        ],
+        psCode: [
+          { required: true, message: '工艺标签代码不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    // 根据名称筛选区域树
+    areaName(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created() {
+    this.queryParams.deviceCategory = 'ZHHM'; // 确保初始加载时就设置为 'ZHHM'
+    this.getList()
+    this.getAreaTree('0', 1)
+    this.getFacsOptions()
+    this.getSubsystem()
+    this.getSubCategorygetByCode()
+    this.getFacsModel()
+    // this.getAllDevProcess(this.subcategoryCode)
+  },
+  methods: {
+    /**分页切换*/
+    switchData(v) {
+      if (v === 1) {
+        this.primary1 = "primary";
+        this.primary2 = "";
+      } else {
+        this.primary1 = "";
+        this.primary2 = "primary";
+      }
+      this.istable = v;
+    },
+    /** 查询能源设备列表 */
+    getList() {
+      this.loading = true
+      listDevRecursionByArea(this.queryParams).then(response => {
+        console.log('参数', JSON.stringify(this.queryParams))
+        this.deviceList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    /**新增、修改、删除*/
+    handleComponentAdd() {
+      this.componentReset()
+      this.componentOpen = true
+      this.title = '添加设备器件属性'
+      this.componentForm.deviceCode = this.ComponentRow.deviceCode // 设置默认设备代码
+
+    },
+    handleComponentUpdate(row) {
+      this.componentReset()
+      const id = row.id || this.ids
+      getComponent(id).then(response => {
+        this.componentForm = response.data
+        this.componentOpen = true
+        this.title = '修改设备器件属性'
+        this.componentForm.deviceCode = this.ComponentRow.deviceCode // 设置默认设备代码
+      })
+    },
+    handleComponentDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除能源对象属性编号为"' + ids + '"的数据项？').then(function() {
+        return delComponent(ids)
+      }).then(() => {
+        console.log('删除row', row.deviceCode)
+        this.getComponentList(row.deviceCode)
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {
+      })
+    },
+    submitComponentForm() {
+      this.$refs['componentForm'].validate(valid => {
+        if (valid) {
+          if (this.componentForm.id != null) {
+            updateComponent(this.componentForm).then(response => {
+              this.$modal.msgSuccess('修改成功')
+              this.componentOpen = false
+              this.getComponentList(this.componentForm.deviceCode)
+            })
+          } else {
+            addComponent(this.componentForm).then(response => {
+              this.$modal.msgSuccess('新增成功')
+              this.componentOpen = false
+              this.getComponentList(this.componentForm.deviceCode)
+            })
+          }
+        }
+      })
+    },
+    ComponentCancel() {
+      this.componentOpen = false
+      this.componentReset()
+    },
+    /**查询部件列表*/
+    getComponentList(deviceCode) {
+      listByDevice(deviceCode).then(response => {
+        this.ComponentList = response.data
+      })
+    },
+    /** 查询区域树结构 */
+    getAreaTree(areaCode, layer) {
+      areaTreeSelect(areaCode, layer).then(response => {
+        this.treeAreaOptions =  [{
+          id: '-1',
+          label: '全部',
+          children: response.data
+        }]
+      })
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      if (data.id === '-1') {
+        this.queryParams.locationType = null;
+        this.queryParams.locationRef = null;
+      } else {
+        this.queryParams.locationType = data.tier;
+        this.queryParams.locationRef = data.id;
+      }
+      this.handleQuery();
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        deviceCode: null,
+        deviceName: null,
+        deviceType: null,
+        deviceStatus: null,
+        deviceModel: null,
+        refArea: null,
+        refFacs: null,
+        subsystemCode: null,
+        psCode: null,
+        createTime: null,
+        updateTime: null
+
+      }
+      this.resetForm('form')
+    },
+    componentReset() {
+      this.componentForm = {
+        id: null,
+        deviceCode: this.ComponentRow.deviceCode || '', // 使用ComponentRow的deviceCode，或者空字符串
+        compoCode: null,
+        compoTag: null,
+        psCode: null,
+        extCompoCode: null,
+        compoModel: null,
+        compoBrand: null,
+        compoSpec: null,
+        ancestors: null,
+        parentCompo: null
+
+      }
+      this.resetForm('componentForm')
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      console.log('搜索按钮this.queryParams', JSON.stringify(this.queryParams))
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams.locationType = null
+      this.queryParams.locationRef = null
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = '添加能源设备'
+    },
+    /**设备器件按钮*/
+    handleDevProcess(row) {
+      this.showDevProcessDrawer = true
+      this.ComponentRow = row
+      console.log('row', row)
+      listByDevice(this.ComponentRow.deviceCode).then(response => {
+        this.ComponentList = response.data
+      })
+
+    },
+    shouldShowDevProcessButton(row) {
+      const categoryIsW = this.queryParams.deviceCategory === 'W'
+      const validPsCodes = ['AA', 'AH', 'AJ', 'AM', 'AP', 'AL', 'APE', 'ALE', 'AF', 'ACC']
+      const psCodeIsValid = validPsCodes.includes(row.psCode)
+      // 只有当设备分类为输能设备且设备工艺代码有效时，才返回true
+      return categoryIsW && psCodeIsValid
+    },
+    backStyle(areaPath) {
+      const firstLevel = areaPath.split('/')[0];
+      switch (firstLevel) {
+        case '北区':
+          return 'north';
+        case '南区':
+          return 'south';
+        case '主路':
+          return 'main';
+        default:
+          return '';
+      }
+    },
+    /**设备详情按钮*/
+    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(2, this.curRow.deviceCode).then(response => {
+        console.log('response值', response.data)
+        const attrs = response.data.attrs
+        const attrValues = response.data.attrValues
+
+        // 合并 attrs 和 attrValues 数组
+        const mergedData = attrValues.map(attrValue => {
+          const attr = attrs.find(a => a.attrKey === attrValue.attrKey)
+          return {
+            ...attrValue,
+            attrName: attr ? attr.attrName : attrValue.attrName,
+            attrUnit: attr ? attr.attrUnit : ''
+          }
+        })
+        this.attrData = mergedData
+      })
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const id = row.id || this.ids
+      getDevice(id).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = '修改能源设备'
+      })
+      const layer = 1
+      const areaCode = '0'
+      areaTreeSelect(areaCode, layer).then(response => {
+        this.totalAreaOptions = response.data
+      })
+    },
+    /** 提交按钮 */
+    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
+        const attrValue = this.attrValuesMap[attrKey]
+        const existingIndex = dataToSubmit.findIndex(item => item.attrKey === attrKey)
+        if (existingIndex === -1) {
+          // 如果attrKey不存在于dataToSubmit中，则添加
+          dataToSubmit.push({
+            modelCode: this.form.deviceModel, // 模型代码
+            objCode: this.form.deviceCode, // 设备代码
+            objType: 2, // 对象类型
+            attrKey: attrKey,
+            attrValue: attrValue,
+            attrName: attrName
+
+          })
+        }
+      })
+
+      // 添加自定义属性数据
+      this.form.customAttrs.forEach(customAttr => {
+        const attrName = customAttr.attrName
+        const attrKey = customAttr.attrKey
+        const attrValue = customAttr.attrValue
+        const existingIndex = dataToSubmit.findIndex(item => item.attrKey === attrKey)
+        if (existingIndex === -1) {
+          // 如果attrKey不存在于dataToSubmit中，则添加
+          dataToSubmit.push({
+            modelCode: '', // 模型代码
+            objCode: this.form.deviceCode, // 设备代码
+            objType: 2, // 对象类型
+            attrKey: attrKey,
+            attrValue: attrValue,
+            attrName: attrName
+          })
+        }
+      })
+
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateDevice(this.form).then(response => {
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            }).catch(error => {
+              console.error('修改失败:', error)
+              this.$message.error('修改失败')
+            })
+
+            if (dataToSubmit.length > 0) {
+              addAttrValueBatch(dataToSubmit)
+                .then(response => {
+                  if (response.code === 200) {
+                    this.$message.success('属性添加成功')
+                  } else {
+                    this.$message.error('属性添加失败')
+                  }
+                }).catch(error => {
+                console.error('属性添加失败:', error)
+                this.$message.error('属性添加失败')
+              })
+            }
+          } else {
+            addDevice(this.form).then(response => {
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            }).catch(error => {
+              console.error('新增失败:', error)
+              this.$message.error('新增失败')
+            })
+
+            if (dataToSubmit.length > 0) {
+              addAttrValueBatch(dataToSubmit)
+                .then(response => {
+                  if (response.code === 200) {
+                    this.$message.success('属性添加成功')
+                  } else {
+                    this.$message.error('属性添加失败')
+                  }
+                }).catch(error => {
+                console.error('属性添加失败:', error)
+                this.$message.error('属性添加失败')
+              })
+            } else {
+              // this.$message.info('没有属性需要添加');
+            }
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除能源设备编号为"' + ids + '"的数据项？').then(function() {
+        return delDevice(ids)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('ems/basecfg/device/export', {
+        ...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 || []
+      })
+    },
+    getSubsystem() {
+      listSubsystemAll().then(response => {
+        this.subsystemOptions = response.data
+      })
+    },
+    /**自定义属性表格*/
+    addCustomAttr() {
+      // 添加一个新的自定义属性
+      if (!Array.isArray(this.form.customAttrs)) {
+        this.form.customAttrs = []
+      }
+      this.form.customAttrs.push({
+        attrKey: '',
+        attrName: '',
+        attrValue: ''
+      })
+      // 强制更新视图
+      this.$forceUpdate()
+
+    },
+    deleteCustomAttr(index) {
+      // 删除指定索引的自定义属性
+      if (this.form.customAttrs.length > 0) {
+        this.form.customAttrs.splice(index, 1)
+      }
+
+    },
+    /**设备模型*/
+    updateAttrValue(attrKey, newValue) {
+      this.attrValuesMap[attrKey] = newValue
+    },
+
+    getFacsModel() {
+      listAllModel(2).then(response => {
+        this.modelList = response.data
+        console.log('this.modelList', this.modelList)
+        this.modelList.forEach(model => {
+          console.log(model.modelCode)
+        })
+      })
+    },
+    handleModelChange(modelCode) {
+      if (modelCode) {
+        this.getModelByCode(modelCode)
+        console.log('设备代码', this.form.deviceCode)
+        this.getObjAttr(2, this.form.deviceCode)
+      }
+    },
+    getModelByCode(modelCode) {
+      getModelByCode(modelCode).then(response => {
+        // this.attrList = response.data.attrList;
+        const filteredAttrList = response.data.attrList.filter(attr => attr.attrType === 0)
+        this.attrList = filteredAttrList
+
+      })
+    },
+    getObjAttr(objType, deviceCode) {
+      getObjAttr(objType, deviceCode).then(response => {
+        // const attrs = response.data.attrs;
+        const attrs = response.data.attrs.filter(attr => attr.attrType === 0)
+        console.log('attrs', attrs)
+        const attrValues = response.data.attrValues || [] // 确保是一个数组
+        console.log('attrValues', attrValues)
+
+        // 创建一个映射对象，用于存储 attrKey 与对应的 attrValue
+        const attrValuesMap = {}
+
+        // 遍历 attrs 数组
+        attrs.forEach(attr => {
+          // 查找 attrValues 数组中是否有匹配的 attrKey
+          const attrValueObj = attrValues.find(value => value.attrKey === attr.attrKey)
+          // 如果找到匹配的 attrValue，更新 attrValuesMap
+          if (attrValueObj) {
+            attrValuesMap[attr.attrKey] = attrValueObj.attrValue
+          } else {
+            // 如果没有找到匹配的 attrValue，则设置为 '暂无数据'
+            attrValuesMap[attr.attrKey] = ''
+          }
+        })
+
+        // 更新 attrValuesMap 到组件的数据中
+        this.attrValuesMap = attrValuesMap
+        // 打印更新后的 attrValuesMap，用于调试
+        console.log('Updated attrValuesMap', this.attrValuesMap)
+
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+.divider {
+  border-bottom: 2px solid #ebeef5;
+  margin: 10px 0;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.drawer-content {
+  padding: 0 20px;
+}
+
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.attr-list-container {
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin: 10px 0;
+  font-weight: bold;
+}
+
+.attr-list-container h3 {
+  font-weight: bold;
+}
+
+.attr-item {
+  list-style-type: none;
+  margin-bottom: 5px;
+}
+
+.attr-name {
+  font-weight: bold;
+}
+
+
+.contents{
+  border: 20px solid #f2f2f5;
+  background-color: #f2f2f5;
+}
+
+
+.other-content {
+  background-color: #ffffff; /* 白色背景 */
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.table-content {
+  background-color: #ffffff; /* 白色背景 */
+  padding: 20px;
+}
+
+.pagination-container {
+  margin-bottom: 20px;
+}
+
+.button-group-container {
+  display: flex;
+  justify-content: flex-end;
+  min-width: 200px;
+  padding: 5px;
+}
+
+.device-list {
+  margin-top: 20px;
+}
+
+.device-card {
+  background-color: #fff;
+  border: 1px solid #bfcbd9;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+  transition: 0.3s;
+  padding: 10px;
+  font-size: 14px;
+  height: 200px;
+  width: 350px;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.device-header {
+  //background-color: #f2f2f5;
+  //padding: 10px;
+  color: #545353;
+  font-size: 20px;
+  font-weight: bold;
+}
+.device-code{
+  color:cornflowerblue;
+}
+.deviceOthers{
+  color: black;
+}
+
+.device-body {
+  padding: 10px;
+  color: #666666;
+  flex: 1; /* 使设备主体内容占据剩余空间 */
+  overflow-y: auto; /* 如果内容过多，允许滚动 */
+}
+
+.device-footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 5px;
+  // background-color: #f9f9f9;
+}
+
+.device-footer .el-button {
+  padding: 5px 15px;
+  border: none; /* 移除默认边框 */
+  color: #5a5e66;
+  transition: background-color 0.3s; /* 平滑过渡背景色变化 */
+}
+
+/* 为按钮分配不同的颜色 */
+.device-footer .el-button:first-child {
+  background-color: #d5f1d5; /* 淡绿色 */
+  border: 1px solid lightgreen;
+  color: #71e2aa;
+
+}
+
+.device-footer .el-button:nth-child(2) {
+  background-color: #ffe5b4; /* 淡橙色 */
+  border: 1px solid #ffba00;
+  color: #faad14;
+}
+
+.device-footer .el-button:last-child {
+  background-color: #ffd5d5; /* 淡红色 */
+  border: 1px solid lightpink;
+  color: #f5222d;
+}
+
+/* 鼠标悬停时加深颜色 */
+.device-footer .el-button:hover {
+  filter: brightness(0.5); /* 颜色加深效果 */
+}
+
+/* 背景色样式 */
+.north {
+  background: linear-gradient(to right, #e1f3d8, #fafafa);
+}
+
+.south {
+  background: linear-gradient(to right, #fff7e8, #fafafa);
+}
+
+.main {
+  background: linear-gradient(to right, #e0e0e0, #fafafa);
+}
+
+
+.el-table {
+  background-color: #ffffff; /* 白色背景 */
+}
+
+.el-card {
+  background-color: #ffffff; /* 白色背景 */
+}
+</style>

ems-ui-cloud/src/views/adapter/ljcy/index.vue

@@ -0,0 +1,1225 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small" prefix-icon="el-icon-search"
+                    style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container" style="height: 100vh; overflow: hidden; position: relative;">
+          <el-tree :data="treeAreaOptions" :props="defaultProps" :expand-on-click-node="false"
+                   :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
+                   @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;"
+          />
+        </div>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <div class="contents">
+          <div class="other-content">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+                     label-width="68px"
+            >
+              <el-form-item label="设备分类" prop="deviceSubCategory">
+                <el-select v-model="queryParams.deviceSubCategory">
+                  <el-option v-for="item in subCategoryOptions" placeholder="设备分类" :label="item.name" :value="item.code"
+                             :key="item.code"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="归属设施" prop="refFacs">
+                <el-select v-model="queryParams.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="subsystemCode">
+                <el-select v-model="queryParams.subsystemCode">
+                  <el-option v-for="item in subsystemOptions" :label="item.systemName" :value="item.systemCode"
+                             :key="item.systemCode"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+
+            <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']"
+                >新增
+                </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']"
+                >修改
+                </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']"
+                >删除
+                </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']"
+                >导出
+                </el-button>
+              </el-col>
+              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+          </div>
+
+          <div class="table-content">
+            <!--分页-->
+            <div class="button-group-container">
+              <el-button-group>
+                <el-button :type="primary1" icon="el-icon-s-fold" @click="switchData(1)" />
+                <el-button :type="primary2" icon="el-icon-menu" @click="switchData(2)" />
+              </el-button-group>
+            </div>
+
+            <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange" v-if="istable === 1">
+              <el-table-column type="selection" width="55" align="center"/>
+              <el-table-column label="设备名称" align="left" prop="deviceName"/>
+              <el-table-column label="安装位置" align="left" prop="areaPath" width="220px"/>
+              <el-table-column label="归属设施" align="center" prop="refFacsName"/>
+              <el-table-column label="设备分类" align="center" prop="deviceCategoryName"/>
+              <el-table-column label="子系统" align="center" prop="subsystemName"/>
+              <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)"
+                  >
+                    器件
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-info" @click="handleDetail(scope.row)"
+                             v-hasPermi="['basecfg:device:edit']"
+                  >
+                    详情
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                             v-hasPermi="['basecfg:device:edit']"
+                  >
+                    修改
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                             @click="handleDelete(scope.row)" v-hasPermi="['basecfg:device:remove']"
+                  >
+                    删除
+                  </el-button>
+
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div v-else-if="istable === 2" >
+              <el-row :gutter="20" class="device-list">
+                <el-col v-for="device in deviceList" :key="device.id" :span="6">
+                  <div :class="`device-card ${backStyle(device.areaPath)}`">
+                    <div class="device-header">
+                      <i class="el-icon-s-operation" style="margin-right: 8px;"></i>
+                      {{ device.deviceName }}
+                    </div>
+                    <div class="device-body">
+                      <p>设备代码：<span class="device-code">{{ device.deviceCode }}</span></p>
+                      <p>安装位置：<span class="deviceOthers">{{ device.areaPath }}</span></p>
+                      <p>归属设施：<span class="deviceOthers">{{ device.refFacsName }}</span></p>
+                      <p>设备分类：<span class="deviceOthers">{{ device.deviceCategoryName }}</span></p>
+                      <p>子系统：<span class="deviceOthers">{{ device.subsystemName }}</span></p>
+                    </div>
+                    <div class="device-footer">
+                      <el-button size="mini" plain icon=" el-icon-document"  @click="handleDetail(device)">详情</el-button>
+                      <el-button size="mini" plain icon="el-icon-edit" @click="handleUpdate(device)">修改</el-button>
+                      <el-button size="mini" plain icon="el-icon-delete"  type="danger" @click="handleDelete(device)">删除</el-button>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+
+
+            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+                        :limit.sync="queryParams.pageSize"
+                        @pagination="getList"
+            />
+
+            <!-- 添加或修改能源设备对话框 -->
+            <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="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="deviceType">
+                  <el-select v-model="form.deviceCategory">
+                    <el-option v-for="item in subCategoryOptions" :label="item.name" :value="item.code"
+                               :key="item.code"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="设备模型" prop="deviceModel">
+                  <el-select v-model="form.deviceModel" style="width:100%" @change="handleModelChange">
+                    <el-option
+                      v-for="item in modelList"
+                      :label="item.modelName"
+                      :value="item.modelCode"
+                      :key="item.modelCode"
+                    />
+                  </el-select>
+                </el-form-item>
+                <!-- 这里可以展示属性名称和属性值 -->
+                <div v-if="attrList.length > 0" class="attr-list-container">
+                  <h3>模型属性:</h3>
+                  <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="点击编辑"
+                        size="small"
+                        @blur="updateAttrValue(attr.attrKey, attrValuesMap[attr.attrKey])"
+                      >
+                      </el-input>
+                    </li>
+                  </ul>
+                </div>
+                <h3 class="attr-list-container" v-if="attrList.length > 0">自定义属性
+                  <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>
+                </h3>
+                <el-form-item label="子系统" prop="subsystemCode">
+                  <el-select v-model="form.subsystemCode">
+                    <el-option v-for="item in subsystemOptions" :label="item.systemName" :value="item.systemCode"
+                               :key="item.systemCode"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-form>
+              <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+              </div>
+            </el-dialog>
+
+            <!--设备器件-->
+            <el-drawer :title=ComponentRow.deviceName size="80%" :visible.sync="showDevProcessDrawer" direction="rtl">
+              <div class="drawer-content" style="padding-left:50px">
+                <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']"
+                    >新增
+                    </el-button>
+                  </el-col>
+                </el-row>
+                <el-table v-loading="loading" :data="ComponentList">
+                  <el-table-column type="selection" width="55" align="center"/>
+                  <el-table-column label="部件编码" align="center" prop="compoCode"/>
+                  <el-table-column label="部件标签" align="center" prop="compoTag">
+                    <template slot-scope="scope">
+                      {{ objComTypeMapping[scope.row.compoTag] }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="工艺标识代码" align="center" prop="psCode"/>
+                  <el-table-column label="外系统部件编码" align="center" prop="extCompoCode"/>
+                  <el-table-column label="部件模型" align="center" prop="compoModel"/>
+                  <el-table-column label="部件品牌" align="center" prop="compoBrand"/>
+                  <el-table-column label="部件型号" align="center" prop="compoSpec"/>
+                  <el-table-column label="祖籍列表" align="center" prop="ancestors"/>
+                  <el-table-column label="上级部件" align="center" prop="parentEqpt"/>
+
+                  <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="handleComponentUpdate(scope.row)"
+                                 v-hasPermi="['ems:component:edit']"
+                      >
+                        修改
+                      </el-button>
+                      <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                                 @click="handleComponentDelete(scope.row)" v-hasPermi="['ems:component:remove']"
+                      >
+                        删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <pagination v-show="total>0" :total="total" :page.sync="queryComponentParams.pageNum"
+                            :limit.sync="queryComponentParams.pageSize"
+                            @pagination="getComponentList"
+                />
+
+                <!-- 添加或修改设备器件对话框 -->
+                <el-dialog :title="title" :visible.sync="componentOpen" width="500px" append-to-body>
+                  <el-form ref="componentForm" :model="componentForm" :rules="componentRules" label-width="150px">
+                    <!--                <el-form-item label="设备code" prop="deviceCode">-->
+                    <!--                  <el-input v-model="componentForm.deviceCode" placeholder="请输入设备code" />-->
+                    <!--                </el-form-item>-->
+                    <el-form-item label="部件编码" prop="compoCode">
+                      <el-input v-model="componentForm.compoCode" placeholder="请输入部件编码"/>
+                    </el-form-item>
+                    <el-form-item label="部件标签" prop="compoTag">
+                      <el-select v-model="componentForm.compoTag" placeholder="请输入部件标签">
+                        <el-option v-for="item in objComTypeOptions"
+                                   :label="item.name"
+                                   :value="item.code"
+                                   :key="item.code"
+                        />
+
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="工艺标签代码" prop="psCode">
+                      <el-select v-model="componentForm.psCode" placeholder="请输入工艺标签代码">
+                        <el-option v-for="item in devOptions" :label="item.psCode" :value="item.psCode" :key="item.psCode"/>
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="外系统部件编码" prop="extCompoCode">
+                      <el-input v-model="componentForm.extCompoCode" placeholder="请输入外系统部件编码"/>
+                    </el-form-item>
+                    <el-form-item label="部件模型" prop="compoModel">
+                      <el-select v-model="componentForm.compoModel" placeholder="请输入部件模型">
+                        <el-option v-for="item in this.modelList" :label="item.modelCode" :value="item.modelCode"
+                                   :key="item.modelCode"
+                        />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="部件品牌" prop="compoBrand">
+                      <el-input v-model="componentForm.compoBrand" placeholder="请输入部件品牌"/>
+                    </el-form-item>
+                    <el-form-item label="部件型号" prop="compoSpec">
+                      <el-input v-model="componentForm.compoSpec" placeholder="请输入部件型号"/>
+                    </el-form-item>
+                    <el-form-item label="祖籍列表" prop="ancestors">
+                      <el-input v-model="componentForm.ancestors" placeholder="请输入祖籍列表"/>
+                    </el-form-item>
+                    <el-form-item label="上级列表" prop="parentCompo">
+                      <el-input v-model="componentForm.parentCompo" placeholder="请输入上级列表"/>
+                    </el-form-item>
+
+                  </el-form>
+                  <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitComponentForm">确 定</el-button>
+                    <el-button @click="ComponentCancel">取 消</el-button>
+                  </div>
+                </el-dialog>
+              </div>
+            </el-drawer>
+
+            <!-- 详情弹框 -->
+            <el-dialog :visible.sync="showDrawer" title="设备详情">
+              <div v-if="curRow">
+                <!-- 设备基本信息 -->
+                <el-card class="box-card">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">设备基本信息</span>
+                  </div>
+                  <div>
+                    <p>设备代码：{{ curRow.deviceCode }}</p>
+                    <p>设备名称：{{ curRow.deviceName }}</p>
+                    <p>设备类型：{{ curRow.deviceCategoryName }}</p>
+                    <p>子系统：{{ curRow.subsystemName }}</p>
+                    <p>归属区域：{{ curRow.areaPath }}</p>
+                    <p>归属设施：{{ curRow.refFacsName }}</p>
+                  </div>
+                </el-card>
+
+                <!-- 属性信息 -->
+                <el-card class="box-card" v-if="attrData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">属性定义</span>
+                  </div>
+                  <div v-for="(item, index) in attrData" :key="index">
+                    <p>属性名称：{{ item.attrName }}</p>
+                    <p>属性值：{{ item.attrValue }}</p>
+                    <p>属性单位：{{ item.attrUnit }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < attrData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+                <!-- 能力信息 -->
+                <el-card class="box-card" v-if="abilityData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">能力定义</span>
+                  </div>
+                  <div v-for="(item, index) in abilityData" :key="index">
+                    <p>能力名称：{{ item.abilityName }}</p>
+                    <p>能力键：{{ item.abilityKey }}</p>
+                    <p>能力参数：{{ item.abilityParam }}</p>
+                    <p>能力描述：{{ item.abilityDesc }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < abilityData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+                <!-- 事件信息 -->
+                <el-card class="box-card" v-if="eventData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">事件定义</span>
+                  </div>
+                  <div v-for="(item, index) in eventData" :key="index">
+                    <p>事件名称：{{ item.eventKey }}</p>
+                    <p>事件类型：{{ item.eventType === 1 ? '消息上报' : '异常告警' }}</p>
+                    <p>事件代码：{{ item.eventCode }}</p>
+                    <p>外部事件代码：{{ item.extEventCode }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < eventData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+              </div>
+            </el-dialog>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { listDevRecursionByArea, getDevice, delDevice, addDevice, updateDevice } from '@/api/device/device'
+import { areaTreeSelect } from '@/api/basecfg/area'
+import { getFacsCategorygetByCode, listAllFacs } from '@/api/basecfg/emsfacs'
+import { listSubsystemAll } from '@/api/adapter/subsystem'
+import { getModelByCode, listAllModel } from '@/api/basecfg/objModel'
+import { getObjAttr } from '@/api/basecfg/objAttribute'
+import { addAttrValueBatch } from '@/api/basecfg/objAttributeValue'
+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'
+
+export default {
+  name: 'Device',
+  components: { Treeselect },
+  data() {
+    return {
+      primary1: 'primary',
+      primary2: '',
+      ComponentRow: [],
+      componentForm: {},
+      subcategoryCode: '',
+      attrList: [], // 属性模板数组
+      attrValues: [],
+      ComponentList: [],
+      attrValuesMap: {},
+      modelList: [],
+      showDrawer: false,
+      showDevProcessDrawer: false,
+      componentOpen: false,
+      istable: 2,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 能源设备表格数据
+      deviceList: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 区域名称
+      areaName: undefined,
+      // 区域树选项
+      treeAreaOptions: undefined,
+      totalAreaOptions: undefined,
+      // 设施选项
+      facsOptions: undefined,
+      // 设备分类
+      subCategoryOptions: undefined,
+      subsystemOptions: undefined,
+      devOptions: undefined,
+
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      // 查询参数
+      queryParams: {
+        psCode: null,
+        pageNum: 1,
+        pageSize: 10,
+        deviceCode: null,
+        deviceSubCategory: '',
+        deviceCategory: 'E',
+        locationType: null,
+        locationRef: null,
+        refFacs: null,
+        customAttrs: null
+      },
+      queryComponentParams: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      objComTypeMapping: {
+        1: '总开',
+        2: '照明',
+        3: '风机'
+      },
+      objComTypeOptions: [
+        { code: 1, name: '总开' },
+        { code: 2, name: '照明' },
+        { code: 3, name: '风机' }
+
+      ],
+      curRow: {},
+      attrData: [],
+      abilityData: [],
+      eventData: [],
+
+      // 表单参数
+      form: {
+        customAttrs: [] // 自定义属性数组
+      },
+      // 表单校验
+      rules: {
+        refFacs: [
+          { required: true, message: '归属设施', trigger: 'blur' }
+        ],
+        refArea: [
+          { required: true, message: '安装位置', trigger: 'blur' }
+        ],
+        deviceCode: [
+          { required: true, message: '设备代码不能为空', trigger: 'blur' }
+        ],
+        deviceName: [
+          { required: true, message: '设备名称不能为空', trigger: 'blur' }
+        ]
+      },
+      componentRules: {
+        deviceCode: [
+          { required: true, message: '设备code不能为空', trigger: 'blur' }
+        ],
+        compoCode: [
+          { required: true, message: '部件编码不能为空', trigger: 'blur' }
+        ],
+        psCode: [
+          { required: true, message: '工艺标签代码不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    // 根据名称筛选区域树
+    areaName(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created() {
+    this.queryParams.deviceCategory = 'LG'; // 确保初始加载时就设置为 'LG'
+    this.getList()
+    this.getAreaTree('0', 1)
+    this.getFacsOptions()
+    this.getSubsystem()
+    this.getSubCategorygetByCode()
+    this.getFacsModel()
+    // this.getAllDevProcess(this.subcategoryCode)
+  },
+  methods: {
+    /**分页切换*/
+    switchData(v) {
+      if (v === 1) {
+        this.primary1 = "primary";
+        this.primary2 = "";
+      } else {
+        this.primary1 = "";
+        this.primary2 = "primary";
+      }
+      this.istable = v;
+    },
+    /** 查询能源设备列表 */
+    getList() {
+      this.loading = true
+      listDevRecursionByArea(this.queryParams).then(response => {
+        console.log('参数', JSON.stringify(this.queryParams))
+        this.deviceList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    /**新增、修改、删除*/
+    handleComponentAdd() {
+      this.componentReset()
+      this.componentOpen = true
+      this.title = '添加设备器件属性'
+      this.componentForm.deviceCode = this.ComponentRow.deviceCode // 设置默认设备代码
+
+    },
+    handleComponentUpdate(row) {
+      this.componentReset()
+      const id = row.id || this.ids
+      getComponent(id).then(response => {
+        this.componentForm = response.data
+        this.componentOpen = true
+        this.title = '修改设备器件属性'
+        this.componentForm.deviceCode = this.ComponentRow.deviceCode // 设置默认设备代码
+      })
+    },
+    handleComponentDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除能源对象属性编号为"' + ids + '"的数据项？').then(function() {
+        return delComponent(ids)
+      }).then(() => {
+        console.log('删除row', row.deviceCode)
+        this.getComponentList(row.deviceCode)
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {
+      })
+    },
+    submitComponentForm() {
+      this.$refs['componentForm'].validate(valid => {
+        if (valid) {
+          if (this.componentForm.id != null) {
+            updateComponent(this.componentForm).then(response => {
+              this.$modal.msgSuccess('修改成功')
+              this.componentOpen = false
+              this.getComponentList(this.componentForm.deviceCode)
+            })
+          } else {
+            addComponent(this.componentForm).then(response => {
+              this.$modal.msgSuccess('新增成功')
+              this.componentOpen = false
+              this.getComponentList(this.componentForm.deviceCode)
+            })
+          }
+        }
+      })
+    },
+    ComponentCancel() {
+      this.componentOpen = false
+      this.componentReset()
+    },
+    /**查询部件列表*/
+    getComponentList(deviceCode) {
+      listByDevice(deviceCode).then(response => {
+        this.ComponentList = response.data
+      })
+    },
+    /** 查询区域树结构 */
+    getAreaTree(areaCode, layer) {
+      areaTreeSelect(areaCode, layer).then(response => {
+        this.treeAreaOptions =  [{
+          id: '-1',
+          label: '全部',
+          children: response.data
+        }]
+      })
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      if (data.id === '-1') {
+        this.queryParams.locationType = null;
+        this.queryParams.locationRef = null;
+      } else {
+        this.queryParams.locationType = data.tier;
+        this.queryParams.locationRef = data.id;
+      }
+      this.handleQuery();
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        deviceCode: null,
+        deviceName: null,
+        deviceType: null,
+        deviceStatus: null,
+        deviceModel: null,
+        refArea: null,
+        refFacs: null,
+        subsystemCode: null,
+        psCode: null,
+        createTime: null,
+        updateTime: null
+
+      }
+      this.resetForm('form')
+    },
+    componentReset() {
+      this.componentForm = {
+        id: null,
+        deviceCode: this.ComponentRow.deviceCode || '', // 使用ComponentRow的deviceCode，或者空字符串
+        compoCode: null,
+        compoTag: null,
+        psCode: null,
+        extCompoCode: null,
+        compoModel: null,
+        compoBrand: null,
+        compoSpec: null,
+        ancestors: null,
+        parentCompo: null
+
+      }
+      this.resetForm('componentForm')
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      console.log('搜索按钮this.queryParams', JSON.stringify(this.queryParams))
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams.locationType = null
+      this.queryParams.locationRef = null
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = '添加能源设备'
+    },
+    /**设备器件按钮*/
+    handleDevProcess(row) {
+      this.showDevProcessDrawer = true
+      this.ComponentRow = row
+      console.log('row', row)
+      listByDevice(this.ComponentRow.deviceCode).then(response => {
+        this.ComponentList = response.data
+      })
+
+    },
+    shouldShowDevProcessButton(row) {
+      const categoryIsW = this.queryParams.deviceCategory === 'W'
+      const validPsCodes = ['AA', 'AH', 'AJ', 'AM', 'AP', 'AL', 'APE', 'ALE', 'AF', 'ACC']
+      const psCodeIsValid = validPsCodes.includes(row.psCode)
+      // 只有当设备分类为输能设备且设备工艺代码有效时，才返回true
+      return categoryIsW && psCodeIsValid
+    },
+    backStyle(areaPath) {
+      const firstLevel = areaPath.split('/')[0];
+      switch (firstLevel) {
+        case '北区':
+          return 'north';
+        case '南区':
+          return 'south';
+        case '主路':
+          return 'main';
+        default:
+          return '';
+      }
+    },
+    /**设备详情按钮*/
+    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(2, this.curRow.deviceCode).then(response => {
+        console.log('response值', response.data)
+        const attrs = response.data.attrs
+        const attrValues = response.data.attrValues
+
+        // 合并 attrs 和 attrValues 数组
+        const mergedData = attrValues.map(attrValue => {
+          const attr = attrs.find(a => a.attrKey === attrValue.attrKey)
+          return {
+            ...attrValue,
+            attrName: attr ? attr.attrName : attrValue.attrName,
+            attrUnit: attr ? attr.attrUnit : ''
+          }
+        })
+        this.attrData = mergedData
+      })
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const id = row.id || this.ids
+      getDevice(id).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = '修改能源设备'
+      })
+      const layer = 1
+      const areaCode = '0'
+      areaTreeSelect(areaCode, layer).then(response => {
+        this.totalAreaOptions = response.data
+      })
+    },
+    /** 提交按钮 */
+    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
+        const attrValue = this.attrValuesMap[attrKey]
+        const existingIndex = dataToSubmit.findIndex(item => item.attrKey === attrKey)
+        if (existingIndex === -1) {
+          // 如果attrKey不存在于dataToSubmit中，则添加
+          dataToSubmit.push({
+            modelCode: this.form.deviceModel, // 模型代码
+            objCode: this.form.deviceCode, // 设备代码
+            objType: 2, // 对象类型
+            attrKey: attrKey,
+            attrValue: attrValue,
+            attrName: attrName
+
+          })
+        }
+      })
+
+      // 添加自定义属性数据
+      this.form.customAttrs.forEach(customAttr => {
+        const attrName = customAttr.attrName
+        const attrKey = customAttr.attrKey
+        const attrValue = customAttr.attrValue
+        const existingIndex = dataToSubmit.findIndex(item => item.attrKey === attrKey)
+        if (existingIndex === -1) {
+          // 如果attrKey不存在于dataToSubmit中，则添加
+          dataToSubmit.push({
+            modelCode: '', // 模型代码
+            objCode: this.form.deviceCode, // 设备代码
+            objType: 2, // 对象类型
+            attrKey: attrKey,
+            attrValue: attrValue,
+            attrName: attrName
+          })
+        }
+      })
+
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateDevice(this.form).then(response => {
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            }).catch(error => {
+              console.error('修改失败:', error)
+              this.$message.error('修改失败')
+            })
+
+            if (dataToSubmit.length > 0) {
+              addAttrValueBatch(dataToSubmit)
+                .then(response => {
+                  if (response.code === 200) {
+                    this.$message.success('属性添加成功')
+                  } else {
+                    this.$message.error('属性添加失败')
+                  }
+                }).catch(error => {
+                console.error('属性添加失败:', error)
+                this.$message.error('属性添加失败')
+              })
+            }
+          } else {
+            addDevice(this.form).then(response => {
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            }).catch(error => {
+              console.error('新增失败:', error)
+              this.$message.error('新增失败')
+            })
+
+            if (dataToSubmit.length > 0) {
+              addAttrValueBatch(dataToSubmit)
+                .then(response => {
+                  if (response.code === 200) {
+                    this.$message.success('属性添加成功')
+                  } else {
+                    this.$message.error('属性添加失败')
+                  }
+                }).catch(error => {
+                console.error('属性添加失败:', error)
+                this.$message.error('属性添加失败')
+              })
+            } else {
+              // this.$message.info('没有属性需要添加');
+            }
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除能源设备编号为"' + ids + '"的数据项？').then(function() {
+        return delDevice(ids)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('ems/basecfg/device/export', {
+        ...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 || []
+      })
+    },
+    getSubsystem() {
+      listSubsystemAll().then(response => {
+        this.subsystemOptions = response.data
+      })
+    },
+    /**自定义属性表格*/
+    addCustomAttr() {
+      // 添加一个新的自定义属性
+      if (!Array.isArray(this.form.customAttrs)) {
+        this.form.customAttrs = []
+      }
+      this.form.customAttrs.push({
+        attrKey: '',
+        attrName: '',
+        attrValue: ''
+      })
+      // 强制更新视图
+      this.$forceUpdate()
+
+    },
+    deleteCustomAttr(index) {
+      // 删除指定索引的自定义属性
+      if (this.form.customAttrs.length > 0) {
+        this.form.customAttrs.splice(index, 1)
+      }
+
+    },
+    /**设备模型*/
+    updateAttrValue(attrKey, newValue) {
+      this.attrValuesMap[attrKey] = newValue
+    },
+
+    getFacsModel() {
+      listAllModel(2).then(response => {
+        this.modelList = response.data
+        console.log('this.modelList', this.modelList)
+        this.modelList.forEach(model => {
+          console.log(model.modelCode)
+        })
+      })
+    },
+    handleModelChange(modelCode) {
+      if (modelCode) {
+        this.getModelByCode(modelCode)
+        console.log('设备代码', this.form.deviceCode)
+        this.getObjAttr(2, this.form.deviceCode)
+      }
+    },
+    getModelByCode(modelCode) {
+      getModelByCode(modelCode).then(response => {
+        // this.attrList = response.data.attrList;
+        const filteredAttrList = response.data.attrList.filter(attr => attr.attrType === 0)
+        this.attrList = filteredAttrList
+
+      })
+    },
+    getObjAttr(objType, deviceCode) {
+      getObjAttr(objType, deviceCode).then(response => {
+        // const attrs = response.data.attrs;
+        const attrs = response.data.attrs.filter(attr => attr.attrType === 0)
+        console.log('attrs', attrs)
+        const attrValues = response.data.attrValues || [] // 确保是一个数组
+        console.log('attrValues', attrValues)
+
+        // 创建一个映射对象，用于存储 attrKey 与对应的 attrValue
+        const attrValuesMap = {}
+
+        // 遍历 attrs 数组
+        attrs.forEach(attr => {
+          // 查找 attrValues 数组中是否有匹配的 attrKey
+          const attrValueObj = attrValues.find(value => value.attrKey === attr.attrKey)
+          // 如果找到匹配的 attrValue，更新 attrValuesMap
+          if (attrValueObj) {
+            attrValuesMap[attr.attrKey] = attrValueObj.attrValue
+          } else {
+            // 如果没有找到匹配的 attrValue，则设置为 '暂无数据'
+            attrValuesMap[attr.attrKey] = ''
+          }
+        })
+
+        // 更新 attrValuesMap 到组件的数据中
+        this.attrValuesMap = attrValuesMap
+        // 打印更新后的 attrValuesMap，用于调试
+        console.log('Updated attrValuesMap', this.attrValuesMap)
+
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+.divider {
+  border-bottom: 2px solid #ebeef5;
+  margin: 10px 0;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.drawer-content {
+  padding: 0 20px;
+}
+
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.attr-list-container {
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin: 10px 0;
+  font-weight: bold;
+}
+
+.attr-list-container h3 {
+  font-weight: bold;
+}
+
+.attr-item {
+  list-style-type: none;
+  margin-bottom: 5px;
+}
+
+.attr-name {
+  font-weight: bold;
+}
+
+
+.contents{
+  border: 20px solid #f2f2f5;
+  background-color: #f2f2f5;
+}
+
+
+.other-content {
+  background-color: #ffffff; /* 白色背景 */
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.table-content {
+  background-color: #ffffff; /* 白色背景 */
+  padding: 20px;
+}
+
+.pagination-container {
+  margin-bottom: 20px;
+}
+
+.button-group-container {
+  display: flex;
+  justify-content: flex-end;
+  min-width: 200px;
+  padding: 5px;
+}
+
+.device-list {
+  margin-top: 20px;
+}
+
+.device-card {
+  background-color: #fff;
+  border: 1px solid #bfcbd9;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+  transition: 0.3s;
+  padding: 10px;
+  font-size: 14px;
+  height: 200px;
+  width: 350px;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.device-header {
+  //background-color: #f2f2f5;
+  //padding: 10px;
+  color: #545353;
+  font-size: 20px;
+  font-weight: bold;
+}
+.device-code{
+  color:cornflowerblue;
+}
+.deviceOthers{
+  color: black;
+}
+
+.device-body {
+  padding: 10px;
+  color: #666666;
+  flex: 1; /* 使设备主体内容占据剩余空间 */
+  overflow-y: auto; /* 如果内容过多，允许滚动 */
+}
+
+.device-footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 5px;
+  // background-color: #f9f9f9;
+}
+
+.device-footer .el-button {
+  padding: 5px 15px;
+  border: none; /* 移除默认边框 */
+  color: #5a5e66;
+  transition: background-color 0.3s; /* 平滑过渡背景色变化 */
+}
+
+/* 为按钮分配不同的颜色 */
+.device-footer .el-button:first-child {
+  background-color: #d5f1d5; /* 淡绿色 */
+  border: 1px solid lightgreen;
+  color: #71e2aa;
+
+}
+
+.device-footer .el-button:nth-child(2) {
+  background-color: #ffe5b4; /* 淡橙色 */
+  border: 1px solid #ffba00;
+  color: #faad14;
+}
+
+.device-footer .el-button:last-child {
+  background-color: #ffd5d5; /* 淡红色 */
+  border: 1px solid lightpink;
+  color: #f5222d;
+}
+
+/* 鼠标悬停时加深颜色 */
+.device-footer .el-button:hover {
+  filter: brightness(0.5); /* 颜色加深效果 */
+}
+
+/* 背景色样式 */
+.north {
+  background: linear-gradient(to right, #e1f3d8, #fafafa);
+}
+
+.south {
+  background: linear-gradient(to right, #fff7e8, #fafafa);
+}
+
+.main {
+  background: linear-gradient(to right, #e0e0e0, #fafafa);
+}
+
+
+.el-table {
+  background-color: #ffffff; /* 白色背景 */
+}
+
+.el-card {
+  background-color: #ffffff; /* 白色背景 */
+}
+</style>

ems-ui-cloud/src/views/adapter/nhjc/index.vue

@@ -0,0 +1,1225 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small" prefix-icon="el-icon-search"
+                    style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container" style="height: 100vh; overflow: hidden; position: relative;">
+          <el-tree :data="treeAreaOptions" :props="defaultProps" :expand-on-click-node="false"
+                   :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
+                   @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;"
+          />
+        </div>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <div class="contents">
+          <div class="other-content">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+                     label-width="68px"
+            >
+              <el-form-item label="设备分类" prop="deviceSubCategory">
+                <el-select v-model="queryParams.deviceSubCategory">
+                  <el-option v-for="item in subCategoryOptions" placeholder="设备分类" :label="item.name" :value="item.code"
+                             :key="item.code"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="归属设施" prop="refFacs">
+                <el-select v-model="queryParams.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="subsystemCode">
+                <el-select v-model="queryParams.subsystemCode">
+                  <el-option v-for="item in subsystemOptions" :label="item.systemName" :value="item.systemCode"
+                             :key="item.systemCode"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+
+            <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']"
+                >新增
+                </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']"
+                >修改
+                </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']"
+                >删除
+                </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']"
+                >导出
+                </el-button>
+              </el-col>
+              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+          </div>
+
+          <div class="table-content">
+            <!--分页-->
+            <div class="button-group-container">
+              <el-button-group>
+                <el-button :type="primary1" icon="el-icon-s-fold" @click="switchData(1)" />
+                <el-button :type="primary2" icon="el-icon-menu" @click="switchData(2)" />
+              </el-button-group>
+            </div>
+
+            <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange" v-if="istable === 1">
+              <el-table-column type="selection" width="55" align="center"/>
+              <el-table-column label="设备名称" align="left" prop="deviceName"/>
+              <el-table-column label="安装位置" align="left" prop="areaPath" width="220px"/>
+              <el-table-column label="归属设施" align="center" prop="refFacsName"/>
+              <el-table-column label="设备分类" align="center" prop="deviceCategoryName"/>
+              <el-table-column label="子系统" align="center" prop="subsystemName"/>
+              <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)"
+                  >
+                    器件
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-info" @click="handleDetail(scope.row)"
+                             v-hasPermi="['basecfg:device:edit']"
+                  >
+                    详情
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                             v-hasPermi="['basecfg:device:edit']"
+                  >
+                    修改
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                             @click="handleDelete(scope.row)" v-hasPermi="['basecfg:device:remove']"
+                  >
+                    删除
+                  </el-button>
+
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div v-else-if="istable === 2" >
+              <el-row :gutter="20" class="device-list">
+                <el-col v-for="device in deviceList" :key="device.id" :span="6">
+                  <div :class="`device-card ${backStyle(device.areaPath)}`">
+                    <div class="device-header">
+                      <i class="el-icon-s-operation" style="margin-right: 8px;"></i>
+                      {{ device.deviceName }}
+                    </div>
+                    <div class="device-body">
+                      <p>设备代码：<span class="device-code">{{ device.deviceCode }}</span></p>
+                      <p>安装位置：<span class="deviceOthers">{{ device.areaPath }}</span></p>
+                      <p>归属设施：<span class="deviceOthers">{{ device.refFacsName }}</span></p>
+                      <p>设备分类：<span class="deviceOthers">{{ device.deviceCategoryName }}</span></p>
+                      <p>子系统：<span class="deviceOthers">{{ device.subsystemName }}</span></p>
+                    </div>
+                    <div class="device-footer">
+                      <el-button size="mini" plain icon=" el-icon-document"  @click="handleDetail(device)">详情</el-button>
+                      <el-button size="mini" plain icon="el-icon-edit" @click="handleUpdate(device)">修改</el-button>
+                      <el-button size="mini" plain icon="el-icon-delete"  type="danger" @click="handleDelete(device)">删除</el-button>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+
+
+            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+                        :limit.sync="queryParams.pageSize"
+                        @pagination="getList"
+            />
+
+            <!-- 添加或修改能源设备对话框 -->
+            <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="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="deviceType">
+                  <el-select v-model="form.deviceCategory">
+                    <el-option v-for="item in subCategoryOptions" :label="item.name" :value="item.code"
+                               :key="item.code"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="设备模型" prop="deviceModel">
+                  <el-select v-model="form.deviceModel" style="width:100%" @change="handleModelChange">
+                    <el-option
+                      v-for="item in modelList"
+                      :label="item.modelName"
+                      :value="item.modelCode"
+                      :key="item.modelCode"
+                    />
+                  </el-select>
+                </el-form-item>
+                <!-- 这里可以展示属性名称和属性值 -->
+                <div v-if="attrList.length > 0" class="attr-list-container">
+                  <h3>模型属性:</h3>
+                  <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="点击编辑"
+                        size="small"
+                        @blur="updateAttrValue(attr.attrKey, attrValuesMap[attr.attrKey])"
+                      >
+                      </el-input>
+                    </li>
+                  </ul>
+                </div>
+                <h3 class="attr-list-container" v-if="attrList.length > 0">自定义属性
+                  <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>
+                </h3>
+                <el-form-item label="子系统" prop="subsystemCode">
+                  <el-select v-model="form.subsystemCode">
+                    <el-option v-for="item in subsystemOptions" :label="item.systemName" :value="item.systemCode"
+                               :key="item.systemCode"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-form>
+              <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+              </div>
+            </el-dialog>
+
+            <!--设备器件-->
+            <el-drawer :title=ComponentRow.deviceName size="80%" :visible.sync="showDevProcessDrawer" direction="rtl">
+              <div class="drawer-content" style="padding-left:50px">
+                <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']"
+                    >新增
+                    </el-button>
+                  </el-col>
+                </el-row>
+                <el-table v-loading="loading" :data="ComponentList">
+                  <el-table-column type="selection" width="55" align="center"/>
+                  <el-table-column label="部件编码" align="center" prop="compoCode"/>
+                  <el-table-column label="部件标签" align="center" prop="compoTag">
+                    <template slot-scope="scope">
+                      {{ objComTypeMapping[scope.row.compoTag] }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="工艺标识代码" align="center" prop="psCode"/>
+                  <el-table-column label="外系统部件编码" align="center" prop="extCompoCode"/>
+                  <el-table-column label="部件模型" align="center" prop="compoModel"/>
+                  <el-table-column label="部件品牌" align="center" prop="compoBrand"/>
+                  <el-table-column label="部件型号" align="center" prop="compoSpec"/>
+                  <el-table-column label="祖籍列表" align="center" prop="ancestors"/>
+                  <el-table-column label="上级部件" align="center" prop="parentEqpt"/>
+
+                  <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="handleComponentUpdate(scope.row)"
+                                 v-hasPermi="['ems:component:edit']"
+                      >
+                        修改
+                      </el-button>
+                      <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                                 @click="handleComponentDelete(scope.row)" v-hasPermi="['ems:component:remove']"
+                      >
+                        删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <pagination v-show="total>0" :total="total" :page.sync="queryComponentParams.pageNum"
+                            :limit.sync="queryComponentParams.pageSize"
+                            @pagination="getComponentList"
+                />
+
+                <!-- 添加或修改设备器件对话框 -->
+                <el-dialog :title="title" :visible.sync="componentOpen" width="500px" append-to-body>
+                  <el-form ref="componentForm" :model="componentForm" :rules="componentRules" label-width="150px">
+                    <!--                <el-form-item label="设备code" prop="deviceCode">-->
+                    <!--                  <el-input v-model="componentForm.deviceCode" placeholder="请输入设备code" />-->
+                    <!--                </el-form-item>-->
+                    <el-form-item label="部件编码" prop="compoCode">
+                      <el-input v-model="componentForm.compoCode" placeholder="请输入部件编码"/>
+                    </el-form-item>
+                    <el-form-item label="部件标签" prop="compoTag">
+                      <el-select v-model="componentForm.compoTag" placeholder="请输入部件标签">
+                        <el-option v-for="item in objComTypeOptions"
+                                   :label="item.name"
+                                   :value="item.code"
+                                   :key="item.code"
+                        />
+
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="工艺标签代码" prop="psCode">
+                      <el-select v-model="componentForm.psCode" placeholder="请输入工艺标签代码">
+                        <el-option v-for="item in devOptions" :label="item.psCode" :value="item.psCode" :key="item.psCode"/>
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="外系统部件编码" prop="extCompoCode">
+                      <el-input v-model="componentForm.extCompoCode" placeholder="请输入外系统部件编码"/>
+                    </el-form-item>
+                    <el-form-item label="部件模型" prop="compoModel">
+                      <el-select v-model="componentForm.compoModel" placeholder="请输入部件模型">
+                        <el-option v-for="item in this.modelList" :label="item.modelCode" :value="item.modelCode"
+                                   :key="item.modelCode"
+                        />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="部件品牌" prop="compoBrand">
+                      <el-input v-model="componentForm.compoBrand" placeholder="请输入部件品牌"/>
+                    </el-form-item>
+                    <el-form-item label="部件型号" prop="compoSpec">
+                      <el-input v-model="componentForm.compoSpec" placeholder="请输入部件型号"/>
+                    </el-form-item>
+                    <el-form-item label="祖籍列表" prop="ancestors">
+                      <el-input v-model="componentForm.ancestors" placeholder="请输入祖籍列表"/>
+                    </el-form-item>
+                    <el-form-item label="上级列表" prop="parentCompo">
+                      <el-input v-model="componentForm.parentCompo" placeholder="请输入上级列表"/>
+                    </el-form-item>
+
+                  </el-form>
+                  <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitComponentForm">确 定</el-button>
+                    <el-button @click="ComponentCancel">取 消</el-button>
+                  </div>
+                </el-dialog>
+              </div>
+            </el-drawer>
+
+            <!-- 详情弹框 -->
+            <el-dialog :visible.sync="showDrawer" title="设备详情">
+              <div v-if="curRow">
+                <!-- 设备基本信息 -->
+                <el-card class="box-card">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">设备基本信息</span>
+                  </div>
+                  <div>
+                    <p>设备代码：{{ curRow.deviceCode }}</p>
+                    <p>设备名称：{{ curRow.deviceName }}</p>
+                    <p>设备类型：{{ curRow.deviceCategoryName }}</p>
+                    <p>子系统：{{ curRow.subsystemName }}</p>
+                    <p>归属区域：{{ curRow.areaPath }}</p>
+                    <p>归属设施：{{ curRow.refFacsName }}</p>
+                  </div>
+                </el-card>
+
+                <!-- 属性信息 -->
+                <el-card class="box-card" v-if="attrData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">属性定义</span>
+                  </div>
+                  <div v-for="(item, index) in attrData" :key="index">
+                    <p>属性名称：{{ item.attrName }}</p>
+                    <p>属性值：{{ item.attrValue }}</p>
+                    <p>属性单位：{{ item.attrUnit }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < attrData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+                <!-- 能力信息 -->
+                <el-card class="box-card" v-if="abilityData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">能力定义</span>
+                  </div>
+                  <div v-for="(item, index) in abilityData" :key="index">
+                    <p>能力名称：{{ item.abilityName }}</p>
+                    <p>能力键：{{ item.abilityKey }}</p>
+                    <p>能力参数：{{ item.abilityParam }}</p>
+                    <p>能力描述：{{ item.abilityDesc }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < abilityData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+                <!-- 事件信息 -->
+                <el-card class="box-card" v-if="eventData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">事件定义</span>
+                  </div>
+                  <div v-for="(item, index) in eventData" :key="index">
+                    <p>事件名称：{{ item.eventKey }}</p>
+                    <p>事件类型：{{ item.eventType === 1 ? '消息上报' : '异常告警' }}</p>
+                    <p>事件代码：{{ item.eventCode }}</p>
+                    <p>外部事件代码：{{ item.extEventCode }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < eventData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+              </div>
+            </el-dialog>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { listDevRecursionByArea, getDevice, delDevice, addDevice, updateDevice } from '@/api/device/device'
+import { areaTreeSelect } from '@/api/basecfg/area'
+import { getFacsCategorygetByCode, listAllFacs } from '@/api/basecfg/emsfacs'
+import { listSubsystemAll } from '@/api/adapter/subsystem'
+import { getModelByCode, listAllModel } from '@/api/basecfg/objModel'
+import { getObjAttr } from '@/api/basecfg/objAttribute'
+import { addAttrValueBatch } from '@/api/basecfg/objAttributeValue'
+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'
+
+export default {
+  name: 'Device',
+  components: { Treeselect },
+  data() {
+    return {
+      primary1: 'primary',
+      primary2: '',
+      ComponentRow: [],
+      componentForm: {},
+      subcategoryCode: '',
+      attrList: [], // 属性模板数组
+      attrValues: [],
+      ComponentList: [],
+      attrValuesMap: {},
+      modelList: [],
+      showDrawer: false,
+      showDevProcessDrawer: false,
+      componentOpen: false,
+      istable: 2,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 能源设备表格数据
+      deviceList: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 区域名称
+      areaName: undefined,
+      // 区域树选项
+      treeAreaOptions: undefined,
+      totalAreaOptions: undefined,
+      // 设施选项
+      facsOptions: undefined,
+      // 设备分类
+      subCategoryOptions: undefined,
+      subsystemOptions: undefined,
+      devOptions: undefined,
+
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      // 查询参数
+      queryParams: {
+        psCode: null,
+        pageNum: 1,
+        pageSize: 10,
+        deviceCode: null,
+        deviceSubCategory: '',
+        deviceCategory: 'E',
+        locationType: null,
+        locationRef: null,
+        refFacs: null,
+        customAttrs: null
+      },
+      queryComponentParams: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      objComTypeMapping: {
+        1: '总开',
+        2: '照明',
+        3: '风机'
+      },
+      objComTypeOptions: [
+        { code: 1, name: '总开' },
+        { code: 2, name: '照明' },
+        { code: 3, name: '风机' }
+
+      ],
+      curRow: {},
+      attrData: [],
+      abilityData: [],
+      eventData: [],
+
+      // 表单参数
+      form: {
+        customAttrs: [] // 自定义属性数组
+      },
+      // 表单校验
+      rules: {
+        refFacs: [
+          { required: true, message: '归属设施', trigger: 'blur' }
+        ],
+        refArea: [
+          { required: true, message: '安装位置', trigger: 'blur' }
+        ],
+        deviceCode: [
+          { required: true, message: '设备代码不能为空', trigger: 'blur' }
+        ],
+        deviceName: [
+          { required: true, message: '设备名称不能为空', trigger: 'blur' }
+        ]
+      },
+      componentRules: {
+        deviceCode: [
+          { required: true, message: '设备code不能为空', trigger: 'blur' }
+        ],
+        compoCode: [
+          { required: true, message: '部件编码不能为空', trigger: 'blur' }
+        ],
+        psCode: [
+          { required: true, message: '工艺标签代码不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    // 根据名称筛选区域树
+    areaName(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created() {
+    this.queryParams.deviceCategory = 'NHJC'; // 确保初始加载时就设置为 'NHJC'
+    this.getList()
+    this.getAreaTree('0', 1)
+    this.getFacsOptions()
+    this.getSubsystem()
+    this.getSubCategorygetByCode()
+    this.getFacsModel()
+    // this.getAllDevProcess(this.subcategoryCode)
+  },
+  methods: {
+    /**分页切换*/
+    switchData(v) {
+      if (v === 1) {
+        this.primary1 = "primary";
+        this.primary2 = "";
+      } else {
+        this.primary1 = "";
+        this.primary2 = "primary";
+      }
+      this.istable = v;
+    },
+    /** 查询能源设备列表 */
+    getList() {
+      this.loading = true
+      listDevRecursionByArea(this.queryParams).then(response => {
+        console.log('参数', JSON.stringify(this.queryParams))
+        this.deviceList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    /**新增、修改、删除*/
+    handleComponentAdd() {
+      this.componentReset()
+      this.componentOpen = true
+      this.title = '添加设备器件属性'
+      this.componentForm.deviceCode = this.ComponentRow.deviceCode // 设置默认设备代码
+
+    },
+    handleComponentUpdate(row) {
+      this.componentReset()
+      const id = row.id || this.ids
+      getComponent(id).then(response => {
+        this.componentForm = response.data
+        this.componentOpen = true
+        this.title = '修改设备器件属性'
+        this.componentForm.deviceCode = this.ComponentRow.deviceCode // 设置默认设备代码
+      })
+    },
+    handleComponentDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除能源对象属性编号为"' + ids + '"的数据项？').then(function() {
+        return delComponent(ids)
+      }).then(() => {
+        console.log('删除row', row.deviceCode)
+        this.getComponentList(row.deviceCode)
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {
+      })
+    },
+    submitComponentForm() {
+      this.$refs['componentForm'].validate(valid => {
+        if (valid) {
+          if (this.componentForm.id != null) {
+            updateComponent(this.componentForm).then(response => {
+              this.$modal.msgSuccess('修改成功')
+              this.componentOpen = false
+              this.getComponentList(this.componentForm.deviceCode)
+            })
+          } else {
+            addComponent(this.componentForm).then(response => {
+              this.$modal.msgSuccess('新增成功')
+              this.componentOpen = false
+              this.getComponentList(this.componentForm.deviceCode)
+            })
+          }
+        }
+      })
+    },
+    ComponentCancel() {
+      this.componentOpen = false
+      this.componentReset()
+    },
+    /**查询部件列表*/
+    getComponentList(deviceCode) {
+      listByDevice(deviceCode).then(response => {
+        this.ComponentList = response.data
+      })
+    },
+    /** 查询区域树结构 */
+    getAreaTree(areaCode, layer) {
+      areaTreeSelect(areaCode, layer).then(response => {
+        this.treeAreaOptions =  [{
+          id: '-1',
+          label: '全部',
+          children: response.data
+        }]
+      })
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      if (data.id === '-1') {
+        this.queryParams.locationType = null;
+        this.queryParams.locationRef = null;
+      } else {
+        this.queryParams.locationType = data.tier;
+        this.queryParams.locationRef = data.id;
+      }
+      this.handleQuery();
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        deviceCode: null,
+        deviceName: null,
+        deviceType: null,
+        deviceStatus: null,
+        deviceModel: null,
+        refArea: null,
+        refFacs: null,
+        subsystemCode: null,
+        psCode: null,
+        createTime: null,
+        updateTime: null
+
+      }
+      this.resetForm('form')
+    },
+    componentReset() {
+      this.componentForm = {
+        id: null,
+        deviceCode: this.ComponentRow.deviceCode || '', // 使用ComponentRow的deviceCode，或者空字符串
+        compoCode: null,
+        compoTag: null,
+        psCode: null,
+        extCompoCode: null,
+        compoModel: null,
+        compoBrand: null,
+        compoSpec: null,
+        ancestors: null,
+        parentCompo: null
+
+      }
+      this.resetForm('componentForm')
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      console.log('搜索按钮this.queryParams', JSON.stringify(this.queryParams))
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams.locationType = null
+      this.queryParams.locationRef = null
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = '添加能源设备'
+    },
+    /**设备器件按钮*/
+    handleDevProcess(row) {
+      this.showDevProcessDrawer = true
+      this.ComponentRow = row
+      console.log('row', row)
+      listByDevice(this.ComponentRow.deviceCode).then(response => {
+        this.ComponentList = response.data
+      })
+
+    },
+    shouldShowDevProcessButton(row) {
+      const categoryIsW = this.queryParams.deviceCategory === 'W'
+      const validPsCodes = ['AA', 'AH', 'AJ', 'AM', 'AP', 'AL', 'APE', 'ALE', 'AF', 'ACC']
+      const psCodeIsValid = validPsCodes.includes(row.psCode)
+      // 只有当设备分类为输能设备且设备工艺代码有效时，才返回true
+      return categoryIsW && psCodeIsValid
+    },
+    backStyle(areaPath) {
+      const firstLevel = areaPath.split('/')[0];
+      switch (firstLevel) {
+        case '北区':
+          return 'north';
+        case '南区':
+          return 'south';
+        case '主路':
+          return 'main';
+        default:
+          return '';
+      }
+    },
+    /**设备详情按钮*/
+    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(2, this.curRow.deviceCode).then(response => {
+        console.log('response值', response.data)
+        const attrs = response.data.attrs
+        const attrValues = response.data.attrValues
+
+        // 合并 attrs 和 attrValues 数组
+        const mergedData = attrValues.map(attrValue => {
+          const attr = attrs.find(a => a.attrKey === attrValue.attrKey)
+          return {
+            ...attrValue,
+            attrName: attr ? attr.attrName : attrValue.attrName,
+            attrUnit: attr ? attr.attrUnit : ''
+          }
+        })
+        this.attrData = mergedData
+      })
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const id = row.id || this.ids
+      getDevice(id).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = '修改能源设备'
+      })
+      const layer = 1
+      const areaCode = '0'
+      areaTreeSelect(areaCode, layer).then(response => {
+        this.totalAreaOptions = response.data
+      })
+    },
+    /** 提交按钮 */
+    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
+        const attrValue = this.attrValuesMap[attrKey]
+        const existingIndex = dataToSubmit.findIndex(item => item.attrKey === attrKey)
+        if (existingIndex === -1) {
+          // 如果attrKey不存在于dataToSubmit中，则添加
+          dataToSubmit.push({
+            modelCode: this.form.deviceModel, // 模型代码
+            objCode: this.form.deviceCode, // 设备代码
+            objType: 2, // 对象类型
+            attrKey: attrKey,
+            attrValue: attrValue,
+            attrName: attrName
+
+          })
+        }
+      })
+
+      // 添加自定义属性数据
+      this.form.customAttrs.forEach(customAttr => {
+        const attrName = customAttr.attrName
+        const attrKey = customAttr.attrKey
+        const attrValue = customAttr.attrValue
+        const existingIndex = dataToSubmit.findIndex(item => item.attrKey === attrKey)
+        if (existingIndex === -1) {
+          // 如果attrKey不存在于dataToSubmit中，则添加
+          dataToSubmit.push({
+            modelCode: '', // 模型代码
+            objCode: this.form.deviceCode, // 设备代码
+            objType: 2, // 对象类型
+            attrKey: attrKey,
+            attrValue: attrValue,
+            attrName: attrName
+          })
+        }
+      })
+
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateDevice(this.form).then(response => {
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            }).catch(error => {
+              console.error('修改失败:', error)
+              this.$message.error('修改失败')
+            })
+
+            if (dataToSubmit.length > 0) {
+              addAttrValueBatch(dataToSubmit)
+                .then(response => {
+                  if (response.code === 200) {
+                    this.$message.success('属性添加成功')
+                  } else {
+                    this.$message.error('属性添加失败')
+                  }
+                }).catch(error => {
+                console.error('属性添加失败:', error)
+                this.$message.error('属性添加失败')
+              })
+            }
+          } else {
+            addDevice(this.form).then(response => {
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            }).catch(error => {
+              console.error('新增失败:', error)
+              this.$message.error('新增失败')
+            })
+
+            if (dataToSubmit.length > 0) {
+              addAttrValueBatch(dataToSubmit)
+                .then(response => {
+                  if (response.code === 200) {
+                    this.$message.success('属性添加成功')
+                  } else {
+                    this.$message.error('属性添加失败')
+                  }
+                }).catch(error => {
+                console.error('属性添加失败:', error)
+                this.$message.error('属性添加失败')
+              })
+            } else {
+              // this.$message.info('没有属性需要添加');
+            }
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除能源设备编号为"' + ids + '"的数据项？').then(function() {
+        return delDevice(ids)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('ems/basecfg/device/export', {
+        ...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 || []
+      })
+    },
+    getSubsystem() {
+      listSubsystemAll().then(response => {
+        this.subsystemOptions = response.data
+      })
+    },
+    /**自定义属性表格*/
+    addCustomAttr() {
+      // 添加一个新的自定义属性
+      if (!Array.isArray(this.form.customAttrs)) {
+        this.form.customAttrs = []
+      }
+      this.form.customAttrs.push({
+        attrKey: '',
+        attrName: '',
+        attrValue: ''
+      })
+      // 强制更新视图
+      this.$forceUpdate()
+
+    },
+    deleteCustomAttr(index) {
+      // 删除指定索引的自定义属性
+      if (this.form.customAttrs.length > 0) {
+        this.form.customAttrs.splice(index, 1)
+      }
+
+    },
+    /**设备模型*/
+    updateAttrValue(attrKey, newValue) {
+      this.attrValuesMap[attrKey] = newValue
+    },
+
+    getFacsModel() {
+      listAllModel(2).then(response => {
+        this.modelList = response.data
+        console.log('this.modelList', this.modelList)
+        this.modelList.forEach(model => {
+          console.log(model.modelCode)
+        })
+      })
+    },
+    handleModelChange(modelCode) {
+      if (modelCode) {
+        this.getModelByCode(modelCode)
+        console.log('设备代码', this.form.deviceCode)
+        this.getObjAttr(2, this.form.deviceCode)
+      }
+    },
+    getModelByCode(modelCode) {
+      getModelByCode(modelCode).then(response => {
+        // this.attrList = response.data.attrList;
+        const filteredAttrList = response.data.attrList.filter(attr => attr.attrType === 0)
+        this.attrList = filteredAttrList
+
+      })
+    },
+    getObjAttr(objType, deviceCode) {
+      getObjAttr(objType, deviceCode).then(response => {
+        // const attrs = response.data.attrs;
+        const attrs = response.data.attrs.filter(attr => attr.attrType === 0)
+        console.log('attrs', attrs)
+        const attrValues = response.data.attrValues || [] // 确保是一个数组
+        console.log('attrValues', attrValues)
+
+        // 创建一个映射对象，用于存储 attrKey 与对应的 attrValue
+        const attrValuesMap = {}
+
+        // 遍历 attrs 数组
+        attrs.forEach(attr => {
+          // 查找 attrValues 数组中是否有匹配的 attrKey
+          const attrValueObj = attrValues.find(value => value.attrKey === attr.attrKey)
+          // 如果找到匹配的 attrValue，更新 attrValuesMap
+          if (attrValueObj) {
+            attrValuesMap[attr.attrKey] = attrValueObj.attrValue
+          } else {
+            // 如果没有找到匹配的 attrValue，则设置为 '暂无数据'
+            attrValuesMap[attr.attrKey] = ''
+          }
+        })
+
+        // 更新 attrValuesMap 到组件的数据中
+        this.attrValuesMap = attrValuesMap
+        // 打印更新后的 attrValuesMap，用于调试
+        console.log('Updated attrValuesMap', this.attrValuesMap)
+
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+.divider {
+  border-bottom: 2px solid #ebeef5;
+  margin: 10px 0;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.drawer-content {
+  padding: 0 20px;
+}
+
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.attr-list-container {
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin: 10px 0;
+  font-weight: bold;
+}
+
+.attr-list-container h3 {
+  font-weight: bold;
+}
+
+.attr-item {
+  list-style-type: none;
+  margin-bottom: 5px;
+}
+
+.attr-name {
+  font-weight: bold;
+}
+
+
+.contents{
+  border: 20px solid #f2f2f5;
+  background-color: #f2f2f5;
+}
+
+
+.other-content {
+  background-color: #ffffff; /* 白色背景 */
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.table-content {
+  background-color: #ffffff; /* 白色背景 */
+  padding: 20px;
+}
+
+.pagination-container {
+  margin-bottom: 20px;
+}
+
+.button-group-container {
+  display: flex;
+  justify-content: flex-end;
+  min-width: 200px;
+  padding: 5px;
+}
+
+.device-list {
+  margin-top: 20px;
+}
+
+.device-card {
+  background-color: #fff;
+  border: 1px solid #bfcbd9;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+  transition: 0.3s;
+  padding: 10px;
+  font-size: 14px;
+  height: 200px;
+  width: 350px;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.device-header {
+  //background-color: #f2f2f5;
+  //padding: 10px;
+  color: #545353;
+  font-size: 20px;
+  font-weight: bold;
+}
+.device-code{
+  color:cornflowerblue;
+}
+.deviceOthers{
+  color: black;
+}
+
+.device-body {
+  padding: 10px;
+  color: #666666;
+  flex: 1; /* 使设备主体内容占据剩余空间 */
+  overflow-y: auto; /* 如果内容过多，允许滚动 */
+}
+
+.device-footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 5px;
+  // background-color: #f9f9f9;
+}
+
+.device-footer .el-button {
+  padding: 5px 15px;
+  border: none; /* 移除默认边框 */
+  color: #5a5e66;
+  transition: background-color 0.3s; /* 平滑过渡背景色变化 */
+}
+
+/* 为按钮分配不同的颜色 */
+.device-footer .el-button:first-child {
+  background-color: #d5f1d5; /* 淡绿色 */
+  border: 1px solid lightgreen;
+  color: #71e2aa;
+
+}
+
+.device-footer .el-button:nth-child(2) {
+  background-color: #ffe5b4; /* 淡橙色 */
+  border: 1px solid #ffba00;
+  color: #faad14;
+}
+
+.device-footer .el-button:last-child {
+  background-color: #ffd5d5; /* 淡红色 */
+  border: 1px solid lightpink;
+  color: #f5222d;
+}
+
+/* 鼠标悬停时加深颜色 */
+.device-footer .el-button:hover {
+  filter: brightness(0.5); /* 颜色加深效果 */
+}
+
+/* 背景色样式 */
+.north {
+  background: linear-gradient(to right, #e1f3d8, #fafafa);
+}
+
+.south {
+  background: linear-gradient(to right, #fff7e8, #fafafa);
+}
+
+.main {
+  background: linear-gradient(to right, #e0e0e0, #fafafa);
+}
+
+
+.el-table {
+  background-color: #ffffff; /* 白色背景 */
+}
+
+.el-card {
+  background-color: #ffffff; /* 白色背景 */
+}
+</style>

ems-ui-cloud/src/views/adapter/pv/index.vue

@@ -17,13 +17,6 @@
       <el-col :span="20" :xs="24">
         <div class="contents">
         <div class="other-content">
-<!--        <el-tabs v-model="queryParams.deviceCategory" @tab-click="deviceCategoryChange">-->
-<!--          <el-tab-pane label="产能设备" name="E"></el-tab-pane>-->
-<!--          <el-tab-pane label="储能设备" name="C"></el-tab-pane>-->
-<!--          <el-tab-pane label="输能设备" name="W"></el-tab-pane>-->
-<!--          <el-tab-pane label="用能设备" name="Z"></el-tab-pane>-->
-<!--        </el-tabs>-->
-
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                  label-width="68px"
         >
@@ -48,14 +41,6 @@
               />
             </el-select>
           </el-form-item>
-
-<!--          <el-form-item label="设备工艺" prop="psCode" v-if="queryParams.deviceCategory === 'W'">-->
-<!--            <el-select v-model="queryParams.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>
             <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
             <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -286,7 +271,6 @@
             </el-row>
             <el-table v-loading="loading" :data="ComponentList">
               <el-table-column type="selection" width="55" align="center"/>
-              <!--              <el-table-column label="设备代码" align="center" prop="deviceCode" />-->
               <el-table-column label="部件编码" align="center" prop="compoCode"/>
               <el-table-column label="部件标签" align="center" prop="compoTag">
                 <template slot-scope="scope">
@@ -463,6 +447,8 @@ export default {
   components: { Treeselect },
   data() {
     return {
+      primary1: 'primary',
+      primary2: '',
       ComponentRow: [],
       componentForm: {},
       subcategoryCode: '',
@@ -668,7 +654,6 @@ export default {
     getComponentList(deviceCode) {
       listByDevice(deviceCode).then(response => {
         this.ComponentList = response.data
-        console.log('查询部件列表', this.ComponentList)
       })
     },
     /** 查询区域树结构 */
@@ -688,9 +673,14 @@ export default {
     },
     // 节点单击事件
     handleNodeClick(data) {
-      this.queryParams.locationType = data.tier
-      this.queryParams.locationRef = data.id
-      this.handleQuery()
+      if (data.id === '-1') {
+        this.queryParams.locationType = null;
+        this.queryParams.locationRef = null;
+      } else {
+        this.queryParams.locationType = data.tier;
+        this.queryParams.locationRef = data.id;
+      }
+      this.handleQuery();
     },
     // 取消按钮
     cancel() {

ems-ui-cloud/src/views/adapter/zm/index.vue

@@ -0,0 +1,1225 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small" prefix-icon="el-icon-search"
+                    style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container" style="height: 100vh; overflow: hidden; position: relative;">
+          <el-tree :data="treeAreaOptions" :props="defaultProps" :expand-on-click-node="false"
+                   :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
+                   @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;"
+          />
+        </div>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <div class="contents">
+          <div class="other-content">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+                     label-width="68px"
+            >
+              <el-form-item label="设备分类" prop="deviceSubCategory">
+                <el-select v-model="queryParams.deviceSubCategory">
+                  <el-option v-for="item in subCategoryOptions" placeholder="设备分类" :label="item.name" :value="item.code"
+                             :key="item.code"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="归属设施" prop="refFacs">
+                <el-select v-model="queryParams.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="subsystemCode">
+                <el-select v-model="queryParams.subsystemCode">
+                  <el-option v-for="item in subsystemOptions" :label="item.systemName" :value="item.systemCode"
+                             :key="item.systemCode"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+
+            <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']"
+                >新增
+                </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']"
+                >修改
+                </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']"
+                >删除
+                </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']"
+                >导出
+                </el-button>
+              </el-col>
+              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+          </div>
+
+          <div class="table-content">
+            <!--分页-->
+            <div class="button-group-container">
+              <el-button-group>
+                <el-button :type="primary1" icon="el-icon-s-fold" @click="switchData(1)" />
+                <el-button :type="primary2" icon="el-icon-menu" @click="switchData(2)" />
+              </el-button-group>
+            </div>
+
+            <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange" v-if="istable === 1">
+              <el-table-column type="selection" width="55" align="center"/>
+              <el-table-column label="设备名称" align="left" prop="deviceName"/>
+              <el-table-column label="安装位置" align="left" prop="areaPath" width="220px"/>
+              <el-table-column label="归属设施" align="center" prop="refFacsName"/>
+              <el-table-column label="设备分类" align="center" prop="deviceCategoryName"/>
+              <el-table-column label="子系统" align="center" prop="subsystemName"/>
+              <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)"
+                  >
+                    器件
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-info" @click="handleDetail(scope.row)"
+                             v-hasPermi="['basecfg:device:edit']"
+                  >
+                    详情
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                             v-hasPermi="['basecfg:device:edit']"
+                  >
+                    修改
+                  </el-button>
+                  <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                             @click="handleDelete(scope.row)" v-hasPermi="['basecfg:device:remove']"
+                  >
+                    删除
+                  </el-button>
+
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div v-else-if="istable === 2" >
+              <el-row :gutter="20" class="device-list">
+                <el-col v-for="device in deviceList" :key="device.id" :span="6">
+                  <div :class="`device-card ${backStyle(device.areaPath)}`">
+                    <div class="device-header">
+                      <i class="el-icon-s-operation" style="margin-right: 8px;"></i>
+                      {{ device.deviceName }}
+                    </div>
+                    <div class="device-body">
+                      <p>设备代码：<span class="device-code">{{ device.deviceCode }}</span></p>
+                      <p>安装位置：<span class="deviceOthers">{{ device.areaPath }}</span></p>
+                      <p>归属设施：<span class="deviceOthers">{{ device.refFacsName }}</span></p>
+                      <p>设备分类：<span class="deviceOthers">{{ device.deviceCategoryName }}</span></p>
+                      <p>子系统：<span class="deviceOthers">{{ device.subsystemName }}</span></p>
+                    </div>
+                    <div class="device-footer">
+                      <el-button size="mini" plain icon=" el-icon-document"  @click="handleDetail(device)">详情</el-button>
+                      <el-button size="mini" plain icon="el-icon-edit" @click="handleUpdate(device)">修改</el-button>
+                      <el-button size="mini" plain icon="el-icon-delete"  type="danger" @click="handleDelete(device)">删除</el-button>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+
+
+            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+                        :limit.sync="queryParams.pageSize"
+                        @pagination="getList"
+            />
+
+            <!-- 添加或修改能源设备对话框 -->
+            <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="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="deviceType">
+                  <el-select v-model="form.deviceCategory">
+                    <el-option v-for="item in subCategoryOptions" :label="item.name" :value="item.code"
+                               :key="item.code"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="设备模型" prop="deviceModel">
+                  <el-select v-model="form.deviceModel" style="width:100%" @change="handleModelChange">
+                    <el-option
+                      v-for="item in modelList"
+                      :label="item.modelName"
+                      :value="item.modelCode"
+                      :key="item.modelCode"
+                    />
+                  </el-select>
+                </el-form-item>
+                <!-- 这里可以展示属性名称和属性值 -->
+                <div v-if="attrList.length > 0" class="attr-list-container">
+                  <h3>模型属性:</h3>
+                  <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="点击编辑"
+                        size="small"
+                        @blur="updateAttrValue(attr.attrKey, attrValuesMap[attr.attrKey])"
+                      >
+                      </el-input>
+                    </li>
+                  </ul>
+                </div>
+                <h3 class="attr-list-container" v-if="attrList.length > 0">自定义属性
+                  <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>
+                </h3>
+                <el-form-item label="子系统" prop="subsystemCode">
+                  <el-select v-model="form.subsystemCode">
+                    <el-option v-for="item in subsystemOptions" :label="item.systemName" :value="item.systemCode"
+                               :key="item.systemCode"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-form>
+              <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+              </div>
+            </el-dialog>
+
+            <!--设备器件-->
+            <el-drawer :title=ComponentRow.deviceName size="80%" :visible.sync="showDevProcessDrawer" direction="rtl">
+              <div class="drawer-content" style="padding-left:50px">
+                <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']"
+                    >新增
+                    </el-button>
+                  </el-col>
+                </el-row>
+                <el-table v-loading="loading" :data="ComponentList">
+                  <el-table-column type="selection" width="55" align="center"/>
+                  <el-table-column label="部件编码" align="center" prop="compoCode"/>
+                  <el-table-column label="部件标签" align="center" prop="compoTag">
+                    <template slot-scope="scope">
+                      {{ objComTypeMapping[scope.row.compoTag] }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="工艺标识代码" align="center" prop="psCode"/>
+                  <el-table-column label="外系统部件编码" align="center" prop="extCompoCode"/>
+                  <el-table-column label="部件模型" align="center" prop="compoModel"/>
+                  <el-table-column label="部件品牌" align="center" prop="compoBrand"/>
+                  <el-table-column label="部件型号" align="center" prop="compoSpec"/>
+                  <el-table-column label="祖籍列表" align="center" prop="ancestors"/>
+                  <el-table-column label="上级部件" align="center" prop="parentEqpt"/>
+
+                  <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="handleComponentUpdate(scope.row)"
+                                 v-hasPermi="['ems:component:edit']"
+                      >
+                        修改
+                      </el-button>
+                      <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                                 @click="handleComponentDelete(scope.row)" v-hasPermi="['ems:component:remove']"
+                      >
+                        删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <pagination v-show="total>0" :total="total" :page.sync="queryComponentParams.pageNum"
+                            :limit.sync="queryComponentParams.pageSize"
+                            @pagination="getComponentList"
+                />
+
+                <!-- 添加或修改设备器件对话框 -->
+                <el-dialog :title="title" :visible.sync="componentOpen" width="500px" append-to-body>
+                  <el-form ref="componentForm" :model="componentForm" :rules="componentRules" label-width="150px">
+                    <!--                <el-form-item label="设备code" prop="deviceCode">-->
+                    <!--                  <el-input v-model="componentForm.deviceCode" placeholder="请输入设备code" />-->
+                    <!--                </el-form-item>-->
+                    <el-form-item label="部件编码" prop="compoCode">
+                      <el-input v-model="componentForm.compoCode" placeholder="请输入部件编码"/>
+                    </el-form-item>
+                    <el-form-item label="部件标签" prop="compoTag">
+                      <el-select v-model="componentForm.compoTag" placeholder="请输入部件标签">
+                        <el-option v-for="item in objComTypeOptions"
+                                   :label="item.name"
+                                   :value="item.code"
+                                   :key="item.code"
+                        />
+
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="工艺标签代码" prop="psCode">
+                      <el-select v-model="componentForm.psCode" placeholder="请输入工艺标签代码">
+                        <el-option v-for="item in devOptions" :label="item.psCode" :value="item.psCode" :key="item.psCode"/>
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="外系统部件编码" prop="extCompoCode">
+                      <el-input v-model="componentForm.extCompoCode" placeholder="请输入外系统部件编码"/>
+                    </el-form-item>
+                    <el-form-item label="部件模型" prop="compoModel">
+                      <el-select v-model="componentForm.compoModel" placeholder="请输入部件模型">
+                        <el-option v-for="item in this.modelList" :label="item.modelCode" :value="item.modelCode"
+                                   :key="item.modelCode"
+                        />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="部件品牌" prop="compoBrand">
+                      <el-input v-model="componentForm.compoBrand" placeholder="请输入部件品牌"/>
+                    </el-form-item>
+                    <el-form-item label="部件型号" prop="compoSpec">
+                      <el-input v-model="componentForm.compoSpec" placeholder="请输入部件型号"/>
+                    </el-form-item>
+                    <el-form-item label="祖籍列表" prop="ancestors">
+                      <el-input v-model="componentForm.ancestors" placeholder="请输入祖籍列表"/>
+                    </el-form-item>
+                    <el-form-item label="上级列表" prop="parentCompo">
+                      <el-input v-model="componentForm.parentCompo" placeholder="请输入上级列表"/>
+                    </el-form-item>
+
+                  </el-form>
+                  <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitComponentForm">确 定</el-button>
+                    <el-button @click="ComponentCancel">取 消</el-button>
+                  </div>
+                </el-dialog>
+              </div>
+            </el-drawer>
+
+            <!-- 详情弹框 -->
+            <el-dialog :visible.sync="showDrawer" title="设备详情">
+              <div v-if="curRow">
+                <!-- 设备基本信息 -->
+                <el-card class="box-card">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">设备基本信息</span>
+                  </div>
+                  <div>
+                    <p>设备代码：{{ curRow.deviceCode }}</p>
+                    <p>设备名称：{{ curRow.deviceName }}</p>
+                    <p>设备类型：{{ curRow.deviceCategoryName }}</p>
+                    <p>子系统：{{ curRow.subsystemName }}</p>
+                    <p>归属区域：{{ curRow.areaPath }}</p>
+                    <p>归属设施：{{ curRow.refFacsName }}</p>
+                  </div>
+                </el-card>
+
+                <!-- 属性信息 -->
+                <el-card class="box-card" v-if="attrData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">属性定义</span>
+                  </div>
+                  <div v-for="(item, index) in attrData" :key="index">
+                    <p>属性名称：{{ item.attrName }}</p>
+                    <p>属性值：{{ item.attrValue }}</p>
+                    <p>属性单位：{{ item.attrUnit }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < attrData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+                <!-- 能力信息 -->
+                <el-card class="box-card" v-if="abilityData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">能力定义</span>
+                  </div>
+                  <div v-for="(item, index) in abilityData" :key="index">
+                    <p>能力名称：{{ item.abilityName }}</p>
+                    <p>能力键：{{ item.abilityKey }}</p>
+                    <p>能力参数：{{ item.abilityParam }}</p>
+                    <p>能力描述：{{ item.abilityDesc }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < abilityData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+                <!-- 事件信息 -->
+                <el-card class="box-card" v-if="eventData.length > 0">
+                  <div slot="header" class="clearfix">
+                    <span class="section-title">事件定义</span>
+                  </div>
+                  <div v-for="(item, index) in eventData" :key="index">
+                    <p>事件名称：{{ item.eventKey }}</p>
+                    <p>事件类型：{{ item.eventType === 1 ? '消息上报' : '异常告警' }}</p>
+                    <p>事件代码：{{ item.eventCode }}</p>
+                    <p>外部事件代码：{{ item.extEventCode }}</p>
+                    <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+                    <div v-if="index < eventData.length - 1" class="divider"></div>
+                  </div>
+                </el-card>
+              </div>
+            </el-dialog>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { listDevRecursionByArea, getDevice, delDevice, addDevice, updateDevice } from '@/api/device/device'
+import { areaTreeSelect } from '@/api/basecfg/area'
+import { getFacsCategorygetByCode, listAllFacs } from '@/api/basecfg/emsfacs'
+import { listSubsystemAll } from '@/api/adapter/subsystem'
+import { getModelByCode, listAllModel } from '@/api/basecfg/objModel'
+import { getObjAttr } from '@/api/basecfg/objAttribute'
+import { addAttrValueBatch } from '@/api/basecfg/objAttributeValue'
+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'
+
+export default {
+  name: 'Device',
+  components: { Treeselect },
+  data() {
+    return {
+      primary1: 'primary',
+      primary2: '',
+      ComponentRow: [],
+      componentForm: {},
+      subcategoryCode: '',
+      attrList: [], // 属性模板数组
+      attrValues: [],
+      ComponentList: [],
+      attrValuesMap: {},
+      modelList: [],
+      showDrawer: false,
+      showDevProcessDrawer: false,
+      componentOpen: false,
+      istable: 2,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 能源设备表格数据
+      deviceList: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 区域名称
+      areaName: undefined,
+      // 区域树选项
+      treeAreaOptions: undefined,
+      totalAreaOptions: undefined,
+      // 设施选项
+      facsOptions: undefined,
+      // 设备分类
+      subCategoryOptions: undefined,
+      subsystemOptions: undefined,
+      devOptions: undefined,
+
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      // 查询参数
+      queryParams: {
+        psCode: null,
+        pageNum: 1,
+        pageSize: 10,
+        deviceCode: null,
+        deviceSubCategory: '',
+        deviceCategory: 'E',
+        locationType: null,
+        locationRef: null,
+        refFacs: null,
+        customAttrs: null
+      },
+      queryComponentParams: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      objComTypeMapping: {
+        1: '总开',
+        2: '照明',
+        3: '风机'
+      },
+      objComTypeOptions: [
+        { code: 1, name: '总开' },
+        { code: 2, name: '照明' },
+        { code: 3, name: '风机' }
+
+      ],
+      curRow: {},
+      attrData: [],
+      abilityData: [],
+      eventData: [],
+
+      // 表单参数
+      form: {
+        customAttrs: [] // 自定义属性数组
+      },
+      // 表单校验
+      rules: {
+        refFacs: [
+          { required: true, message: '归属设施', trigger: 'blur' }
+        ],
+        refArea: [
+          { required: true, message: '安装位置', trigger: 'blur' }
+        ],
+        deviceCode: [
+          { required: true, message: '设备代码不能为空', trigger: 'blur' }
+        ],
+        deviceName: [
+          { required: true, message: '设备名称不能为空', trigger: 'blur' }
+        ]
+      },
+      componentRules: {
+        deviceCode: [
+          { required: true, message: '设备code不能为空', trigger: 'blur' }
+        ],
+        compoCode: [
+          { required: true, message: '部件编码不能为空', trigger: 'blur' }
+        ],
+        psCode: [
+          { required: true, message: '工艺标签代码不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    // 根据名称筛选区域树
+    areaName(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created() {
+    this.queryParams.deviceCategory = 'ZHZM'; // 确保初始加载时就设置为 'ZHZM'
+    this.getList()
+    this.getAreaTree('0', 1)
+    this.getFacsOptions()
+    this.getSubsystem()
+    this.getSubCategorygetByCode()
+    this.getFacsModel()
+    // this.getAllDevProcess(this.subcategoryCode)
+  },
+  methods: {
+    /**分页切换*/
+    switchData(v) {
+      if (v === 1) {
+        this.primary1 = "primary";
+        this.primary2 = "";
+      } else {
+        this.primary1 = "";
+        this.primary2 = "primary";
+      }
+      this.istable = v;
+    },
+    /** 查询能源设备列表 */
+    getList() {
+      this.loading = true
+      listDevRecursionByArea(this.queryParams).then(response => {
+        console.log('参数', JSON.stringify(this.queryParams))
+        this.deviceList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    /**新增、修改、删除*/
+    handleComponentAdd() {
+      this.componentReset()
+      this.componentOpen = true
+      this.title = '添加设备器件属性'
+      this.componentForm.deviceCode = this.ComponentRow.deviceCode // 设置默认设备代码
+
+    },
+    handleComponentUpdate(row) {
+      this.componentReset()
+      const id = row.id || this.ids
+      getComponent(id).then(response => {
+        this.componentForm = response.data
+        this.componentOpen = true
+        this.title = '修改设备器件属性'
+        this.componentForm.deviceCode = this.ComponentRow.deviceCode // 设置默认设备代码
+      })
+    },
+    handleComponentDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除能源对象属性编号为"' + ids + '"的数据项？').then(function() {
+        return delComponent(ids)
+      }).then(() => {
+        console.log('删除row', row.deviceCode)
+        this.getComponentList(row.deviceCode)
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {
+      })
+    },
+    submitComponentForm() {
+      this.$refs['componentForm'].validate(valid => {
+        if (valid) {
+          if (this.componentForm.id != null) {
+            updateComponent(this.componentForm).then(response => {
+              this.$modal.msgSuccess('修改成功')
+              this.componentOpen = false
+              this.getComponentList(this.componentForm.deviceCode)
+            })
+          } else {
+            addComponent(this.componentForm).then(response => {
+              this.$modal.msgSuccess('新增成功')
+              this.componentOpen = false
+              this.getComponentList(this.componentForm.deviceCode)
+            })
+          }
+        }
+      })
+    },
+    ComponentCancel() {
+      this.componentOpen = false
+      this.componentReset()
+    },
+    /**查询部件列表*/
+    getComponentList(deviceCode) {
+      listByDevice(deviceCode).then(response => {
+        this.ComponentList = response.data
+      })
+    },
+    /** 查询区域树结构 */
+    getAreaTree(areaCode, layer) {
+      areaTreeSelect(areaCode, layer).then(response => {
+        this.treeAreaOptions =  [{
+          id: '-1',
+          label: '全部',
+          children: response.data
+        }]
+      })
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      if (data.id === '-1') {
+        this.queryParams.locationType = null;
+        this.queryParams.locationRef = null;
+      } else {
+        this.queryParams.locationType = data.tier;
+        this.queryParams.locationRef = data.id;
+      }
+      this.handleQuery();
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        deviceCode: null,
+        deviceName: null,
+        deviceType: null,
+        deviceStatus: null,
+        deviceModel: null,
+        refArea: null,
+        refFacs: null,
+        subsystemCode: null,
+        psCode: null,
+        createTime: null,
+        updateTime: null
+
+      }
+      this.resetForm('form')
+    },
+    componentReset() {
+      this.componentForm = {
+        id: null,
+        deviceCode: this.ComponentRow.deviceCode || '', // 使用ComponentRow的deviceCode，或者空字符串
+        compoCode: null,
+        compoTag: null,
+        psCode: null,
+        extCompoCode: null,
+        compoModel: null,
+        compoBrand: null,
+        compoSpec: null,
+        ancestors: null,
+        parentCompo: null
+
+      }
+      this.resetForm('componentForm')
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      console.log('搜索按钮this.queryParams', JSON.stringify(this.queryParams))
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams.locationType = null
+      this.queryParams.locationRef = null
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = '添加能源设备'
+    },
+    /**设备器件按钮*/
+    handleDevProcess(row) {
+      this.showDevProcessDrawer = true
+      this.ComponentRow = row
+      console.log('row', row)
+      listByDevice(this.ComponentRow.deviceCode).then(response => {
+        this.ComponentList = response.data
+      })
+
+    },
+    shouldShowDevProcessButton(row) {
+      const categoryIsW = this.queryParams.deviceCategory === 'W'
+      const validPsCodes = ['AA', 'AH', 'AJ', 'AM', 'AP', 'AL', 'APE', 'ALE', 'AF', 'ACC']
+      const psCodeIsValid = validPsCodes.includes(row.psCode)
+      // 只有当设备分类为输能设备且设备工艺代码有效时，才返回true
+      return categoryIsW && psCodeIsValid
+    },
+    backStyle(areaPath) {
+      const firstLevel = areaPath.split('/')[0];
+      switch (firstLevel) {
+        case '北区':
+          return 'north';
+        case '南区':
+          return 'south';
+        case '主路':
+          return 'main';
+        default:
+          return '';
+      }
+    },
+    /**设备详情按钮*/
+    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(2, this.curRow.deviceCode).then(response => {
+        console.log('response值', response.data)
+        const attrs = response.data.attrs
+        const attrValues = response.data.attrValues
+
+        // 合并 attrs 和 attrValues 数组
+        const mergedData = attrValues.map(attrValue => {
+          const attr = attrs.find(a => a.attrKey === attrValue.attrKey)
+          return {
+            ...attrValue,
+            attrName: attr ? attr.attrName : attrValue.attrName,
+            attrUnit: attr ? attr.attrUnit : ''
+          }
+        })
+        this.attrData = mergedData
+      })
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const id = row.id || this.ids
+      getDevice(id).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = '修改能源设备'
+      })
+      const layer = 1
+      const areaCode = '0'
+      areaTreeSelect(areaCode, layer).then(response => {
+        this.totalAreaOptions = response.data
+      })
+    },
+    /** 提交按钮 */
+    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
+        const attrValue = this.attrValuesMap[attrKey]
+        const existingIndex = dataToSubmit.findIndex(item => item.attrKey === attrKey)
+        if (existingIndex === -1) {
+          // 如果attrKey不存在于dataToSubmit中，则添加
+          dataToSubmit.push({
+            modelCode: this.form.deviceModel, // 模型代码
+            objCode: this.form.deviceCode, // 设备代码
+            objType: 2, // 对象类型
+            attrKey: attrKey,
+            attrValue: attrValue,
+            attrName: attrName
+
+          })
+        }
+      })
+
+      // 添加自定义属性数据
+      this.form.customAttrs.forEach(customAttr => {
+        const attrName = customAttr.attrName
+        const attrKey = customAttr.attrKey
+        const attrValue = customAttr.attrValue
+        const existingIndex = dataToSubmit.findIndex(item => item.attrKey === attrKey)
+        if (existingIndex === -1) {
+          // 如果attrKey不存在于dataToSubmit中，则添加
+          dataToSubmit.push({
+            modelCode: '', // 模型代码
+            objCode: this.form.deviceCode, // 设备代码
+            objType: 2, // 对象类型
+            attrKey: attrKey,
+            attrValue: attrValue,
+            attrName: attrName
+          })
+        }
+      })
+
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateDevice(this.form).then(response => {
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            }).catch(error => {
+              console.error('修改失败:', error)
+              this.$message.error('修改失败')
+            })
+
+            if (dataToSubmit.length > 0) {
+              addAttrValueBatch(dataToSubmit)
+                .then(response => {
+                  if (response.code === 200) {
+                    this.$message.success('属性添加成功')
+                  } else {
+                    this.$message.error('属性添加失败')
+                  }
+                }).catch(error => {
+                console.error('属性添加失败:', error)
+                this.$message.error('属性添加失败')
+              })
+            }
+          } else {
+            addDevice(this.form).then(response => {
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            }).catch(error => {
+              console.error('新增失败:', error)
+              this.$message.error('新增失败')
+            })
+
+            if (dataToSubmit.length > 0) {
+              addAttrValueBatch(dataToSubmit)
+                .then(response => {
+                  if (response.code === 200) {
+                    this.$message.success('属性添加成功')
+                  } else {
+                    this.$message.error('属性添加失败')
+                  }
+                }).catch(error => {
+                console.error('属性添加失败:', error)
+                this.$message.error('属性添加失败')
+              })
+            } else {
+              // this.$message.info('没有属性需要添加');
+            }
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除能源设备编号为"' + ids + '"的数据项？').then(function() {
+        return delDevice(ids)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('ems/basecfg/device/export', {
+        ...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 || []
+      })
+    },
+    getSubsystem() {
+      listSubsystemAll().then(response => {
+        this.subsystemOptions = response.data
+      })
+    },
+    /**自定义属性表格*/
+    addCustomAttr() {
+      // 添加一个新的自定义属性
+      if (!Array.isArray(this.form.customAttrs)) {
+        this.form.customAttrs = []
+      }
+      this.form.customAttrs.push({
+        attrKey: '',
+        attrName: '',
+        attrValue: ''
+      })
+      // 强制更新视图
+      this.$forceUpdate()
+
+    },
+    deleteCustomAttr(index) {
+      // 删除指定索引的自定义属性
+      if (this.form.customAttrs.length > 0) {
+        this.form.customAttrs.splice(index, 1)
+      }
+
+    },
+    /**设备模型*/
+    updateAttrValue(attrKey, newValue) {
+      this.attrValuesMap[attrKey] = newValue
+    },
+
+    getFacsModel() {
+      listAllModel(2).then(response => {
+        this.modelList = response.data
+        console.log('this.modelList', this.modelList)
+        this.modelList.forEach(model => {
+          console.log(model.modelCode)
+        })
+      })
+    },
+    handleModelChange(modelCode) {
+      if (modelCode) {
+        this.getModelByCode(modelCode)
+        console.log('设备代码', this.form.deviceCode)
+        this.getObjAttr(2, this.form.deviceCode)
+      }
+    },
+    getModelByCode(modelCode) {
+      getModelByCode(modelCode).then(response => {
+        // this.attrList = response.data.attrList;
+        const filteredAttrList = response.data.attrList.filter(attr => attr.attrType === 0)
+        this.attrList = filteredAttrList
+
+      })
+    },
+    getObjAttr(objType, deviceCode) {
+      getObjAttr(objType, deviceCode).then(response => {
+        // const attrs = response.data.attrs;
+        const attrs = response.data.attrs.filter(attr => attr.attrType === 0)
+        console.log('attrs', attrs)
+        const attrValues = response.data.attrValues || [] // 确保是一个数组
+        console.log('attrValues', attrValues)
+
+        // 创建一个映射对象，用于存储 attrKey 与对应的 attrValue
+        const attrValuesMap = {}
+
+        // 遍历 attrs 数组
+        attrs.forEach(attr => {
+          // 查找 attrValues 数组中是否有匹配的 attrKey
+          const attrValueObj = attrValues.find(value => value.attrKey === attr.attrKey)
+          // 如果找到匹配的 attrValue，更新 attrValuesMap
+          if (attrValueObj) {
+            attrValuesMap[attr.attrKey] = attrValueObj.attrValue
+          } else {
+            // 如果没有找到匹配的 attrValue，则设置为 '暂无数据'
+            attrValuesMap[attr.attrKey] = ''
+          }
+        })
+
+        // 更新 attrValuesMap 到组件的数据中
+        this.attrValuesMap = attrValuesMap
+        // 打印更新后的 attrValuesMap，用于调试
+        console.log('Updated attrValuesMap', this.attrValuesMap)
+
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+.divider {
+  border-bottom: 2px solid #ebeef5;
+  margin: 10px 0;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.drawer-content {
+  padding: 0 20px;
+}
+
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.attr-list-container {
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin: 10px 0;
+  font-weight: bold;
+}
+
+.attr-list-container h3 {
+  font-weight: bold;
+}
+
+.attr-item {
+  list-style-type: none;
+  margin-bottom: 5px;
+}
+
+.attr-name {
+  font-weight: bold;
+}
+
+
+.contents{
+  border: 20px solid #f2f2f5;
+  background-color: #f2f2f5;
+}
+
+
+.other-content {
+  background-color: #ffffff; /* 白色背景 */
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.table-content {
+  background-color: #ffffff; /* 白色背景 */
+  padding: 20px;
+}
+
+.pagination-container {
+  margin-bottom: 20px;
+}
+
+.button-group-container {
+  display: flex;
+  justify-content: flex-end;
+  min-width: 200px;
+  padding: 5px;
+}
+
+.device-list {
+  margin-top: 20px;
+}
+
+.device-card {
+  background-color: #fff;
+  border: 1px solid #bfcbd9;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+  transition: 0.3s;
+  padding: 10px;
+  font-size: 14px;
+  height: 200px;
+  width: 350px;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.device-header {
+  //background-color: #f2f2f5;
+  //padding: 10px;
+  color: #545353;
+  font-size: 20px;
+  font-weight: bold;
+}
+.device-code{
+  color:cornflowerblue;
+}
+.deviceOthers{
+  color: black;
+}
+
+.device-body {
+  padding: 10px;
+  color: #666666;
+  flex: 1; /* 使设备主体内容占据剩余空间 */
+  overflow-y: auto; /* 如果内容过多，允许滚动 */
+}
+
+.device-footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 5px;
+  // background-color: #f9f9f9;
+}
+
+.device-footer .el-button {
+  padding: 5px 15px;
+  border: none; /* 移除默认边框 */
+  color: #5a5e66;
+  transition: background-color 0.3s; /* 平滑过渡背景色变化 */
+}
+
+/* 为按钮分配不同的颜色 */
+.device-footer .el-button:first-child {
+  background-color: #d5f1d5; /* 淡绿色 */
+  border: 1px solid lightgreen;
+  color: #71e2aa;
+
+}
+
+.device-footer .el-button:nth-child(2) {
+  background-color: #ffe5b4; /* 淡橙色 */
+  border: 1px solid #ffba00;
+  color: #faad14;
+}
+
+.device-footer .el-button:last-child {
+  background-color: #ffd5d5; /* 淡红色 */
+  border: 1px solid lightpink;
+  color: #f5222d;
+}
+
+/* 鼠标悬停时加深颜色 */
+.device-footer .el-button:hover {
+  filter: brightness(0.5); /* 颜色加深效果 */
+}
+
+/* 背景色样式 */
+.north {
+  background: linear-gradient(to right, #e1f3d8, #fafafa);
+}
+
+.south {
+  background: linear-gradient(to right, #fff7e8, #fafafa);
+}
+
+.main {
+  background: linear-gradient(to right, #e0e0e0, #fafafa);
+}
+
+
+.el-table {
+  background-color: #ffffff; /* 白色背景 */
+}
+
+.el-card {
+  background-color: #ffffff; /* 白色背景 */
+}
+</style>