diff --git a/src/api/dms/shutReason.js b/src/api/dms/shutReason.js
index a9074de..15f26e9 100644
--- a/src/api/dms/shutReason.js
+++ b/src/api/dms/shutReason.js
@@ -51,4 +51,22 @@ export function selectDmsBaseShutReasonList(query) {
     method: 'get',
     params: query
   })
-}
\ No newline at end of file
+}
+
+// 查询停机原因树
+export function getShutReasonTree(query) {
+  return request({
+    url: '/dms/shutReason/tree',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询推荐停机原因
+export function getRecommendShutReasonList(query) {
+  return request({
+    url: '/dms/shutReason/recommend',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/views/dms/shutDownRecord/index.vue b/src/views/dms/shutDownRecord/index.vue
index 3e56625..afef0bc 100644
--- a/src/views/dms/shutDownRecord/index.vue
+++ b/src/views/dms/shutDownRecord/index.vue
@@ -1,30 +1,57 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-<!--      <el-form-item label="设备ID" prop="deviceId">-->
-<!--        <el-input-->
-<!--          v-model="queryParams.deviceId"-->
-<!--          placeholder="请输入设备ID"-->
-<!--          clearable-->
-<!--          @keyup.enter.native="handleQuery"-->
-<!--        />-->
-<!--      </el-form-item>-->
+    <el-form
+      ref="queryForm"
+      :model="queryParams"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="设备" prop="deviceCode">
-        <el-select v-model="queryParams.deviceCode" placeholder="请选择设备" clearable filterable @change="handleQuery">
+        <el-select
+          v-model="queryParams.deviceCode"
+          placeholder="请选择设备"
+          clearable
+          filterable
+          @change="handleQueryDeviceChange"
+        >
           <el-option
             v-for="item in deviceLedgerList"
             :key="item.deviceCode"
             :label="item.deviceCode + ' - ' + item.deviceName"
-            :value="item.deviceCode" />
+            :value="item.deviceCode"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="停机大类" prop="shutType">
+        <el-select
+          v-model="queryParams.shutType"
+          placeholder="请选择停机大类"
+          clearable
+          @change="handleQueryTypeChange"
+        >
+          <el-option
+            v-for="item in queryShutReasonTree"
+            :key="item.shutTypeId"
+            :label="item.shutTypeName"
+            :value="item.shutTypeId"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="停机原因" prop="shutReasonId">
-        <el-select v-model="queryParams.shutReasonId" placeholder="请选择停机原因" clearable @change="handleQuery">
+        <el-select
+          v-model="queryParams.shutReasonId"
+          placeholder="请选择停机原因"
+          clearable
+          @change="handleQuery"
+        >
           <el-option
-            v-for="item in shutReasonList"
+            v-for="item in queryShutReasonList"
             :key="item.shutReasonId"
             :label="item.shutReason"
-            :value="item.shutReasonId" />
+            :value="item.shutReasonId"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="停机时间">
@@ -35,42 +62,9 @@
           start-placeholder="开始时间"
           end-placeholder="结束时间"
           value-format="yyyy-MM-dd HH:mm:ss"
-          @change="handleQuery">
-        </el-date-picker>
+          @change="handleQuery"
+        />
       </el-form-item>
-      <!-- <el-form-item label="停机时间" prop="shutBeginTime">
-        <el-date-picker clearable
-                       v-model="queryParams.shutBeginTime"
-                       type="datetime"
-                       value-format="yyyy-MM-dd HH:mm:ss"
-                       placeholder="请选择停机开始时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item><div>-</div></el-form-item>
-      <el-form-item label="" prop="shutEndTime">
-        <el-date-picker clearable
-                       v-model="queryParams.shutEndTime"
-                       type="datetime"
-                       value-format="yyyy-MM-dd HH:mm:ss"
-                       placeholder="请选择停机结束时间">
-        </el-date-picker>
-      </el-form-item> -->
-<!--      <el-form-item label="停机时长" prop="shutTime">-->
-<!--        <el-input-->
-<!--          v-model="queryParams.shutTime"-->
-<!--          placeholder="请输入停机时长"-->
-<!--          clearable-->
-<!--          @keyup.enter.native="handleQuery"-->
-<!--        />-->
-<!--      </el-form-item>-->
-<!--      <el-form-item label="是否标识：1-是；2-否" prop="isFlag">-->
-<!--        <el-input-->
-<!--          v-model="queryParams.isFlag"-->
-<!--          placeholder="请输入是否标识：1-是；2-否"-->
-<!--          clearable-->
-<!--          @keyup.enter.native="handleQuery"-->
-<!--        />-->
-<!--      </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>
@@ -78,27 +72,6 @@
     </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="['dms:shutDown: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="['dms:shutDown:edit']"-->
-<!--        >修改</el-button>-->
-<!--      </el-col>-->
       <el-col :span="1.5">
         <el-button
           type="warning"
@@ -121,42 +94,17 @@
           v-hasPermi="['dms:shutDown: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="['dms:shutDown:export']"-->
-<!--        >导出</el-button>-->
-<!--      </el-col>-->
     </el-row>
 
     <el-table v-loading="loading" :data="shutDownList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-<!--      <el-table-column label="主键标识;scada上报的记录" align="center" prop="recordShutDownId" />-->
-      <el-table-column label="设备" align="center" prop="deviceName" >
+      <el-table-column label="设备" align="center" prop="deviceName">
         <template slot-scope="{ row }">
           <span v-if="row.deviceName">{{ row.deviceName }}</span>
           <span v-else-if="ledgerMap[row.deviceId]">{{ ledgerMap[row.deviceId].deviceName || ledgerMap[row.deviceId].deviceCode }}</span>
           <span v-else>{{ row.deviceId }}</span>
         </template>
       </el-table-column>
-<!--      <el-table-column label="设备名称" align="center" prop="deviceId" >-->
-<!--        <template slot-scope="scope">-->
-<!--            <span-->
-<!--              v-for="(item, index) in ledgerList"-->
-<!--              :key="index"-->
-<!--              :value="item.ledgerList"-->
-<!--              v-if="scope.row.deviceId == item.deviceId"-->
-<!--            >-->
-<!--              {{ item.deviceName }}-->
-<!--            </span>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
-<!--      <el-table-column label="停机类型ID，关联dm_base_shut_type的shut_type_id" align="center" prop="shutType" />-->
-      <!-- 停机类型后端自动赋值，前端不展示选择 -->
       <el-table-column label="停机原因" align="center" prop="shutReason" />
       <el-table-column label="停机开始时间" align="center" prop="shutBeginTime" width="200">
         <template slot-scope="scope">
@@ -169,7 +117,6 @@
         </template>
       </el-table-column>
       <el-table-column label="停机时长" align="center" prop="shutTime" />
-<!--      <el-table-column label="是否标识：1-是；2-否" align="center" prop="isFlag" />-->
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -192,61 +139,83 @@
     </el-table>
 
     <pagination
-      v-show="total>0"
+      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="120px">
-<!--        <el-form-item label="设备ID，关联dms_base_device_ledger的device_id" prop="deviceId">-->
-<!--          <el-input v-model="form.deviceId" placeholder="请输入设备ID，关联dms_base_device_ledger的device_id" />-->
-<!--        </el-form-item>-->
-        <el-form-item label="设备名称" prop="deviceId" >
-          <el-select v-model="form.deviceId" placeholder="请输入设备类型">
+    <el-dialog :title="title" :visible.sync="open" width="720px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="设备名称" prop="deviceId">
+          <el-select v-model="form.deviceId" placeholder="请选择设备" filterable @change="handleFormDeviceChange">
             <el-option
               v-for="item in ledgerList"
               :key="item.deviceId"
               :label="item.deviceName"
-              :value="item.deviceId">
-            </el-option>
+              :value="item.deviceId"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item label="停机原因" prop="shutReasonId">
-          <el-select v-model="form.shutReasonId" placeholder="请选择停机原因" @change="onReasonChange">
+
+        <el-form-item v-if="recommendReasonList.length" label="常用原因">
+          <div class="recommend-wrapper">
+            <el-button
+              v-for="item in recommendReasonList"
+              :key="item.shutReasonId"
+              size="mini"
+              plain
+              @click="pickFormRecommendReason(item)"
+            >
+              {{ item.shutTypeName }} / {{ item.shutReason }}
+            </el-button>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="停机大类" prop="shutType">
+          <el-select v-model="form.shutType" placeholder="请选择停机大类" @change="handleFormTypeChange">
             <el-option
-              v-for="item in shutReasonList"
+              v-for="item in shutReasonTree"
+              :key="item.shutTypeId"
+              :label="item.shutTypeName"
+              :value="item.shutTypeId"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="停机原因" prop="shutReasonId">
+          <el-select v-model="form.shutReasonId" placeholder="请选择停机原因" @change="handleFormReasonChange">
+            <el-option
+              v-for="item in formShutReasonList"
               :key="item.shutReasonId"
               :label="item.shutReason"
               :value="item.shutReasonId"
             />
           </el-select>
         </el-form-item>
+
         <el-form-item label="停机开始时间" prop="shutBeginTime">
-          <el-date-picker clearable
+          <el-date-picker
+            clearable
             v-model="form.shutBeginTime"
             type="date"
             value-format="yyyy-MM-dd"
-            placeholder="请选择停机开始时间">
-          </el-date-picker>
+            placeholder="请选择停机开始时间"
+          />
         </el-form-item>
         <el-form-item label="停机结束时间" prop="shutEndTime">
-          <el-date-picker clearable
+          <el-date-picker
+            clearable
             v-model="form.shutEndTime"
             type="date"
             value-format="yyyy-MM-dd"
-            placeholder="请选择停机结束时间">
-          </el-date-picker>
+            placeholder="请选择停机结束时间"
+          />
         </el-form-item>
         <el-form-item label="停机时长" prop="shutTime">
           <el-input v-model="form.shutTime" placeholder="请输入停机时长" />
         </el-form-item>
-<!--        <el-form-item label="是否标识：1-是；2-否" prop="isFlag">-->
-<!--          <el-input v-model="form.isFlag" placeholder="请输入是否标识：1-是；2-否" />-->
-<!--        </el-form-item>-->
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
@@ -257,16 +226,42 @@
       </div>
     </el-dialog>
 
-    <!-- 批量维护对话框 -->
-    <el-dialog title="批量维护停机原因" :visible.sync="batchUpdateOpen" width="400px" append-to-body>
+    <el-dialog title="批量维护停机原因" :visible.sync="batchUpdateOpen" width="680px" append-to-body>
       <el-form ref="batchForm" :model="batchForm" :rules="batchRules" label-width="100px">
-        <el-form-item label="停机原因" prop="shutReasonId">
-          <el-select v-model="batchForm.shutReasonId" placeholder="请选择停机原因" style="width: 100%">
+        <el-form-item v-if="batchRecommendReasonList.length" label="常用原因">
+          <div class="recommend-wrapper">
+            <el-button
+              v-for="item in batchRecommendReasonList"
+              :key="item.shutReasonId"
+              size="mini"
+              plain
+              @click="pickBatchRecommendReason(item)"
+            >
+              {{ item.shutTypeName }} / {{ item.shutReason }}
+            </el-button>
+          </div>
+        </el-form-item>
+        <el-form-item v-else-if="batchRecommendHint" label="提示">
+          <span class="batch-hint">{{ batchRecommendHint }}</span>
+        </el-form-item>
+        <el-form-item label="停机大类" prop="shutType">
+          <el-select v-model="batchForm.shutType" placeholder="请选择停机大类" style="width: 100%" @change="handleBatchTypeChange">
             <el-option
-              v-for="item in shutReasonList"
+              v-for="item in batchShutReasonTree"
+              :key="item.shutTypeId"
+              :label="item.shutTypeName"
+              :value="item.shutTypeId"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="停机原因" prop="shutReasonId">
+          <el-select v-model="batchForm.shutReasonId" placeholder="请选择停机原因" style="width: 100%" @change="handleBatchReasonChange">
+            <el-option
+              v-for="item in batchShutReasonList"
               :key="item.shutReasonId"
               :label="item.shutReason"
-              :value="item.shutReasonId" />
+              :value="item.shutReasonId"
+            />
           </el-select>
         </el-form-item>
         <el-form-item>
@@ -283,63 +278,70 @@
 
 <script>
 import { listShutDown, getShutDown, delShutDown, addShutDown, updateShutDown, batchUpdateShutReason } from "@/api/dms/shutDown";
-import { selectDmsBaseShutReasonList } from '@/api/dms/shutReason'
-import { getDeviceLedgerList } from '@/api/base/deviceLedger'
+import { getShutReasonTree, getRecommendShutReasonList } from "@/api/dms/shutReason";
+import { getDeviceLedgerList } from "@/api/base/deviceLedger";
 
 export default {
   name: "ShutDown",
   data() {
     return {
-      ledgerList:[],
-      ledgerMap:{},
+      ledgerList: [],
+      ledgerMap: {},
       deviceLedgerList: [],
-      shutReasonList:[],
+      queryShutReasonTree: [],
+      queryShutReasonList: [],
+      shutReasonTree: [],
+      formShutReasonList: [],
+      batchShutReasonTree: [],
+      batchShutReasonList: [],
+      recommendReasonList: [],
+      batchRecommendReasonList: [],
+      batchRecommendHint: "",
+      selectedRows: [],
       dateRange: [],
-      // 遮罩层
       loading: true,
-      // 选中数组
       ids: [],
-      // 非单个禁用
       single: true,
-      // 非多个禁用
       multiple: true,
-      // 显示搜索条件
       showSearch: true,
-      // 总条数
       total: 0,
-      // 停机记录表格数据
       shutDownList: [],
-      // 弹出层标题
       title: "",
-      // 是否显示弹出层
       open: false,
-      // 批量维护对话框
       batchUpdateOpen: false,
-      // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         deviceId: null,
         deviceCode: null,
+        shutType: null,
         shutReasonId: null,
         shutBeginTime: null,
         shutEndTime: null,
         shutTime: null,
-        isFlag: null,
+        isFlag: null
       },
-      // 表单参数
       form: {},
-      // 批量维护表单
       batchForm: {
-        shutReasonId: null
+        shutType: null,
+        shutReasonId: null,
+        shutReason: null
       },
-      // 表单校验
       rules: {
+        deviceId: [
+          { required: true, message: "请选择设备", trigger: "change" }
+        ],
+        shutType: [
+          { required: true, message: "请选择停机大类", trigger: "change" }
+        ],
         shutReasonId: [
           { required: true, message: "请选择停机原因", trigger: "change" }
         ]
       },
       batchRules: {
+        shutType: [
+          { required: true, message: "请选择停机大类", trigger: "change" }
+        ],
         shutReasonId: [
           { required: true, message: "请选择停机原因", trigger: "change" }
         ]
@@ -349,33 +351,21 @@ export default {
   created() {
     this.getList();
     this.getDevice();
-    this.getShutReason();
+    this.loadQueryReasonTree(null);
   },
   methods: {
-    /** 停机原因列表 */
-    getShutReason() {
-      selectDmsBaseShutReasonList({}).then(res => {
-        this.shutReasonList = res.rows || res.data || [];
-      });
-    },
-    onReasonChange(val) {
-      const found = this.shutReasonList.find(r => r.shutReasonId === val);
-      this.form.shutReason = found ? found.shutReasonName : null;
-    },
-    //查询设备信息
-    getDevice(){
+    getDevice() {
       getDeviceLedgerList({}).then(response => {
-        this.ledgerList = response.data;
-        this.deviceLedgerList = response.data;
+        this.ledgerList = response.data || [];
+        this.deviceLedgerList = response.data || [];
         this.ledgerMap = Array.isArray(response.data)
           ? response.data.reduce((acc, cur) => {
               acc[cur.deviceId] = cur;
               return acc;
             }, {})
           : {};
-      })
+      });
     },
-    /** 查询停机记录列表 */
     getList() {
       this.loading = true;
       this.queryParams.params = {};
@@ -387,18 +377,115 @@ export default {
         this.shutDownList = response.rows;
         this.total = response.total;
         this.loading = false;
+      }).finally(() => {
+        this.loading = false;
       });
     },
-    // 取消按钮
+    getDeviceByCode(deviceCode) {
+      return this.deviceLedgerList.find(item => item.deviceCode === deviceCode);
+    },
+    extractReasonListFromTree(tree, shutTypeId) {
+      if (!shutTypeId) {
+        return [];
+      }
+      const currentType = (tree || []).find(item => item.shutTypeId === shutTypeId);
+      return currentType && currentType.reasonList ? currentType.reasonList : [];
+    },
+    findReasonInTree(shutReasonId, tree) {
+      const typeList = tree || [];
+      for (let i = 0; i < typeList.length; i++) {
+        const reasonList = typeList[i].reasonList || [];
+        const current = reasonList.find(item => item.shutReasonId === shutReasonId);
+        if (current) {
+          return current;
+        }
+      }
+      return null;
+    },
+    ensureReasonVisible(reasonList, reason) {
+      if (!reason || !reason.shutReasonId) {
+        return reasonList;
+      }
+      const exists = reasonList.some(item => item.shutReasonId === reason.shutReasonId);
+      if (exists) {
+        return reasonList;
+      }
+      return reasonList.concat([reason]);
+    },
+    loadQueryReasonTree(deviceId) {
+      const params = deviceId ? { deviceId } : {};
+      return getShutReasonTree(params).then(res => {
+        this.queryShutReasonTree = res.data || [];
+        this.queryShutReasonList = this.extractReasonListFromTree(this.queryShutReasonTree, this.queryParams.shutType);
+        if (this.queryParams.shutReasonId && !this.findReasonInTree(this.queryParams.shutReasonId, this.queryShutReasonTree)) {
+          this.queryParams.shutReasonId = null;
+        }
+      });
+    },
+    loadFormReasonData(deviceId, keepCurrentReason) {
+      const params = deviceId ? { deviceId } : {};
+      const recommendPromise = deviceId ? getRecommendShutReasonList(params) : Promise.resolve({ data: [] });
+      return Promise.all([getShutReasonTree(params), recommendPromise]).then(([treeRes, recommendRes]) => {
+        this.shutReasonTree = treeRes.data || [];
+        this.recommendReasonList = recommendRes.data || [];
+
+        if (keepCurrentReason && this.form.shutReasonId) {
+          const found = this.findReasonInTree(this.form.shutReasonId, this.shutReasonTree);
+          if (found) {
+            this.form.shutType = found.shutTypeId;
+            this.form.shutReason = found.shutReason;
+          }
+        } else {
+          this.form.shutType = null;
+          this.form.shutReasonId = null;
+          this.form.shutReason = null;
+        }
+
+        this.formShutReasonList = this.extractReasonListFromTree(this.shutReasonTree, this.form.shutType);
+        if (keepCurrentReason && this.form.shutReasonId && this.form.shutReason) {
+          this.formShutReasonList = this.ensureReasonVisible(this.formShutReasonList, {
+            shutReasonId: this.form.shutReasonId,
+            shutReason: this.form.shutReason,
+            shutTypeId: this.form.shutType
+          });
+        }
+      });
+    },
+    loadBatchReasonData(deviceId) {
+      const params = deviceId ? { deviceId } : {};
+      const recommendPromise = deviceId ? getRecommendShutReasonList(params) : Promise.resolve({ data: [] });
+      return Promise.all([getShutReasonTree(params), recommendPromise]).then(([treeRes, recommendRes]) => {
+        this.batchShutReasonTree = treeRes.data || [];
+        this.batchRecommendReasonList = recommendRes.data || [];
+        this.batchShutReasonList = this.extractReasonListFromTree(this.batchShutReasonTree, this.batchForm.shutType);
+      });
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    handleQueryDeviceChange(deviceCode) {
+      const currentDevice = this.getDeviceByCode(deviceCode);
+      this.queryParams.shutType = null;
+      this.queryParams.shutReasonId = null;
+      this.loadQueryReasonTree(currentDevice ? currentDevice.deviceId : null).finally(() => {
+        this.handleQuery();
+      });
+    },
+    handleQueryTypeChange() {
+      this.queryParams.shutReasonId = null;
+      this.queryShutReasonList = this.extractReasonListFromTree(this.queryShutReasonTree, this.queryParams.shutType);
+      this.handleQuery();
+    },
     cancel() {
       this.open = false;
       this.reset();
     },
-    // 表单重置
     reset() {
       this.form = {
         recordShutDownId: null,
         deviceId: null,
+        shutType: null,
         shutReasonId: null,
         shutReason: null,
         shutBeginTime: null,
@@ -411,58 +498,82 @@ export default {
         updateBy: null,
         updateTime: null
       };
+      this.shutReasonTree = [];
+      this.formShutReasonList = [];
+      this.recommendReasonList = [];
       this.resetForm("form");
     },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
     resetQuery() {
       this.dateRange = [];
       this.resetForm("queryForm");
-      this.handleQuery();
+      this.queryShutReasonList = [];
+      this.loadQueryReasonTree(null).finally(() => {
+        this.handleQuery();
+      });
     },
-    // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.recordShutDownId)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.selectedRows = selection;
+      this.ids = selection.map(item => item.recordShutDownId);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
-    /** 新增按钮操作 */
     handleAdd() {
       this.reset();
       this.open = true;
       this.title = "添加停机记录";
+      this.loadFormReasonData(null, false);
     },
-    /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      const recordShutDownId = row.recordShutDownId || this.ids
+      const recordShutDownId = row.recordShutDownId || this.ids;
       getShutDown(recordShutDownId).then(response => {
         this.form = response.data;
-        this.open = true;
         this.title = "修改停机记录";
+        return this.loadFormReasonData(this.form.deviceId, true);
+      }).then(() => {
+        this.open = true;
       });
     },
-    /** 提交按钮 */
+    handleFormDeviceChange(deviceId) {
+      // 为什么这样做：设备切换后，设备专属原因和推荐口径都会变化，必须同步清空旧选择避免误提交。
+      this.loadFormReasonData(deviceId, false);
+    },
+    handleFormTypeChange() {
+      this.form.shutReasonId = null;
+      this.form.shutReason = null;
+      this.formShutReasonList = this.extractReasonListFromTree(this.shutReasonTree, this.form.shutType);
+    },
+    handleFormReasonChange(shutReasonId) {
+      const found = this.findReasonInTree(shutReasonId, this.shutReasonTree);
+      this.form.shutReason = found ? found.shutReason : null;
+      this.form.shutType = found ? found.shutTypeId : this.form.shutType;
+      this.formShutReasonList = this.extractReasonListFromTree(this.shutReasonTree, this.form.shutType);
+    },
+    pickFormRecommendReason(item) {
+      this.form.shutType = item.shutTypeId;
+      this.formShutReasonList = this.extractReasonListFromTree(this.shutReasonTree, item.shutTypeId);
+      this.form.shutReasonId = item.shutReasonId;
+      this.form.shutReason = item.shutReason;
+    },
+    normalizeFormReasonFields() {
+      const found = this.findReasonInTree(this.form.shutReasonId, this.shutReasonTree);
+      if (found) {
+        this.form.shutType = found.shutTypeId;
+        this.form.shutReason = found.shutReason;
+      }
+    },
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
-          // 将选择的原因名称写回描述，便于后台使用
-          if (this.form.shutReasonId && !this.form.shutReason) {
-            const found = this.shutReasonList.find(r => r.shutReasonId === this.form.shutReasonId);
-            this.form.shutReason = found ? found.shutReasonName : this.form.shutReason;
-          }
+          this.normalizeFormReasonFields();
           if (this.form.recordShutDownId != null) {
-            updateShutDown(this.form).then(response => {
+            updateShutDown(this.form).then(() => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addShutDown(this.form).then(response => {
+            addShutDown(this.form).then(() => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -471,10 +582,8 @@ export default {
         }
       });
     },
-    /** 删除按钮操作 */
     handleDelete(row) {
       const recordShutDownIds = row.recordShutDownId || this.ids;
-
       this.$modal.confirm('是否确认删除停机记录编号为"' + recordShutDownIds + '"的数据项？').then(function() {
         return delShutDown(recordShutDownIds);
       }).then(() => {
@@ -482,32 +591,62 @@ export default {
         this.$modal.msgSuccess("删除成功");
       }).catch(() => {});
     },
-    /** 导出按钮操作 */
     handleExport() {
       this.download('dms/shutDown/export', {
         ...this.queryParams
-      }, `shutDown_${new Date().getTime()}.xlsx`)
+      }, `shutDown_${new Date().getTime()}.xlsx`);
     },
-    /** 批量维护按钮操作 */
     handleBatchUpdate() {
       if (this.ids.length === 0) {
         this.$modal.msgWarning("请至少选择一条记录");
         return;
       }
       this.batchForm = {
-        shutReasonId: null
+        shutType: null,
+        shutReasonId: null,
+        shutReason: null
       };
-      this.batchUpdateOpen = true;
+      this.batchShutReasonList = [];
+      this.batchRecommendReasonList = [];
+      const selectedDeviceIds = [...new Set(this.selectedRows.map(item => item.deviceId).filter(item => item != null))];
+      const deviceId = selectedDeviceIds.length === 1 ? selectedDeviceIds[0] : null;
+      this.batchRecommendHint = selectedDeviceIds.length > 1
+        ? "已选择多台设备，推荐原因仅在单设备场景展示"
+        : "";
+      this.loadBatchReasonData(deviceId).then(() => {
+        this.batchUpdateOpen = true;
+      });
+    },
+    handleBatchTypeChange() {
+      this.batchForm.shutReasonId = null;
+      this.batchForm.shutReason = null;
+      this.batchShutReasonList = this.extractReasonListFromTree(this.batchShutReasonTree, this.batchForm.shutType);
+    },
+    handleBatchReasonChange(shutReasonId) {
+      const found = this.findReasonInTree(shutReasonId, this.batchShutReasonTree);
+      this.batchForm.shutReason = found ? found.shutReason : null;
+      this.batchForm.shutType = found ? found.shutTypeId : this.batchForm.shutType;
+      this.batchShutReasonList = this.extractReasonListFromTree(this.batchShutReasonTree, this.batchForm.shutType);
+    },
+    pickBatchRecommendReason(item) {
+      this.batchForm.shutType = item.shutTypeId;
+      this.batchForm.shutReasonId = item.shutReasonId;
+      this.batchForm.shutReason = item.shutReason;
+      this.batchShutReasonList = this.extractReasonListFromTree(this.batchShutReasonTree, item.shutTypeId);
     },
-    /** 批量维护提交 */
     submitBatchUpdate() {
       this.$refs["batchForm"].validate(valid => {
         if (valid) {
+          const found = this.findReasonInTree(this.batchForm.shutReasonId, this.batchShutReasonTree);
+          if (found) {
+            this.batchForm.shutType = found.shutTypeId;
+            this.batchForm.shutReason = found.shutReason;
+          }
           const data = {
             recordShutDownIds: this.ids,
             shutReasonId: this.batchForm.shutReasonId
           };
-          batchUpdateShutReason(data).then(response => {
+          batchUpdateShutReason(data).then(() => {
             this.$modal.msgSuccess("批量维护成功");
             this.batchUpdateOpen = false;
             this.getList();
@@ -518,3 +657,16 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.recommend-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.batch-hint {
+  color: #909399;
+  font-size: 12px;
+}
+</style>
diff --git a/src/views/dms/shutReason/index.vue b/src/views/dms/shutReason/index.vue
index 156fc8d..10aedd9 100644
--- a/src/views/dms/shutReason/index.vue
+++ b/src/views/dms/shutReason/index.vue
@@ -1,66 +1,62 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-<!--      <el-form-item label="原因编号" prop="reasonCode">-->
-<!--        <el-input-->
-<!--          v-model="queryParams.reasonCode"-->
-<!--          placeholder="请输入原因编号"-->
-<!--          clearable-->
-<!--          @keyup.enter.native="handleQuery"-->
-<!--        />-->
-<!--      </el-form-item>-->
-<!--      <el-form-item label="设备ID，关联dms_base_device_ledger的device_id" prop="deviceId">-->
-<!--        <el-input-->
-<!--          v-model="queryParams.deviceId"-->
-<!--          placeholder="请输入设备ID，关联dms_base_device_ledger的device_id"-->
-<!--          clearable-->
-<!--          @keyup.enter.native="handleQuery"-->
-<!--        />-->
-<!--      </el-form-item>-->
-      <el-form-item label="设备名称" prop="deviceName">
-        <el-input
-          v-model="queryParams.deviceName"
-          placeholder="请输入设备名称"
+    <el-form
+      v-show="showSearch"
+      ref="queryForm"
+      :model="queryParams"
+      size="small"
+      :inline="true"
+      label-width="84px"
+    >
+      <el-form-item label="适用设备" prop="deviceId">
+        <el-select
+          v-model="queryParams.deviceId"
+          placeholder="请选择设备"
           clearable
-          @keyup.enter.native="handleQuery"
-        />
+          filterable
+          style="width: 260px"
+          @change="handleQuery"
+        >
+          <el-option
+            v-for="item in ledgerList"
+            :key="item.deviceId"
+            :label="item.deviceCode + ' - ' + item.deviceName"
+            :value="item.deviceId"
+          />
+        </el-select>
       </el-form-item>
-<!--      <el-form-item label="停机类型,关联dms_base_shut_type的shut_type_id" prop="shutTypeId">-->
-<!--        <el-input-->
-<!--          v-model="queryParams.shutTypeId"-->
-<!--          placeholder="请输入停机类型,关联dms_base_shut_type的shut_type_id"-->
-<!--          clearable-->
-<!--          @keyup.enter.native="handleQuery"-->
-<!--        />-->
-<!--      </el-form-item>-->
-      <el-form-item label="停机类型" prop="shutTypeId" >
-        <el-select v-model="queryParams.shutTypeId"
-                   placeholder="请输入设备类型"
+      <el-form-item label="停机大类" prop="shutTypeId">
+        <el-select
+          v-model="queryParams.shutTypeId"
+          placeholder="请选择停机大类"
+          clearable
+          style="width: 220px"
+          @change="buildTreeRows"
         >
           <el-option
             v-for="item in shutTypeList"
             :key="item.shutTypeId"
             :label="item.shutTypeName"
-            :value="item.shutTypeId" />
-
+            :value="item.shutTypeId"
+          />
         </el-select>
       </el-form-item>
-<!--      <el-form-item label="停机原因" prop="shutReason">-->
-<!--        <el-input-->
-<!--          v-model="queryParams.shutReason"-->
-<!--          placeholder="请输入停机原因"-->
-<!--          clearable-->
-<!--          @keyup.enter.native="handleQuery"-->
-<!--        />-->
-<!--      </el-form-item>-->
-<!--      <el-form-item label="是否标识：1-是；0-否" prop="isFlag">-->
-<!--        <el-input-->
-<!--          v-model="queryParams.isFlag"-->
-<!--          placeholder="请输入是否标识：1-是；0-否"-->
-<!--          clearable-->
-<!--          @keyup.enter.native="handleQuery"-->
-<!--        />-->
-<!--      </el-form-item>-->
+      <el-form-item label="原因编号" prop="reasonCode">
+        <el-input
+          v-model="queryParams.reasonCode"
+          placeholder="请输入原因编号"
+          clearable
+          @keyup.enter.native="buildTreeRows"
+        />
+      </el-form-item>
+      <el-form-item label="停机原因" prop="shutReason">
+        <el-input
+          v-model="queryParams.shutReason"
+          placeholder="请输入停机原因"
+          clearable
+          @keyup.enter.native="buildTreeRows"
+        />
+      </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>
@@ -70,147 +66,177 @@
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
+          v-hasPermi="['dms:shutReason:add']"
           type="primary"
           plain
           icon="el-icon-plus"
           size="mini"
-          @click="handleAdd"
-          v-hasPermi="['dms:shutReason:add']"
-        >新增</el-button>
+          @click="handleAdd()"
+        >新增小类</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
+          v-hasPermi="['dms:shutReason:edit']"
           type="success"
           plain
           icon="el-icon-edit"
           size="mini"
           :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['dms:shutReason:edit']"
+          @click="handleUpdate()"
         >修改</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
+          v-hasPermi="['dms:shutReason:remove']"
           type="danger"
           plain
           icon="el-icon-delete"
           size="mini"
           :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['dms:shutReason:remove']"
+          @click="handleDelete()"
         >删除</el-button>
       </el-col>
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--          type="warning"-->
-<!--          plain-->
-<!--          icon="el-icon-download"-->
-<!--          size="mini"-->
-<!--          @click="handleExport"-->
-<!--          v-hasPermi="['dms:shutReason:export']"-->
-<!--        >导出</el-button>-->
-<!--      </el-col>-->
     </el-row>
 
-    <el-table v-loading="loading" :data="shutReasonList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-<!--      <el-table-column label="主键标识" align="center" prop="shutReasonId" />-->
-      <el-table-column label="原因编号" align="center" prop="reasonCode" />
-<!--      <el-table-column label="设备ID，关联dms_base_device_ledger的device_id" align="center" prop="deviceId" />-->
-<!--      <el-table-column label="设备名称" align="center" prop="deviceId" >
-        <template slot-scope="scope">
-            <span
-              v-for="(item, index) in ledgerList"
-              :key="index"
-              :value="item.ledgerList"
-              v-if="scope.row.deviceId == item.deviceId"
-            >
-              {{ item.deviceName }}
-            </span>
-        </template>
-      </el-table-column>-->
-<!--      <el-table-column label="停机类型,关联dms_base_shut_type的shut_type_id" align="center" prop="shutTypeId" />-->
-      <el-table-column label="停机类型" align="center" prop="shutTypeId" >
-        <template slot-scope="scope">
-            <span
-              v-for="(item, index) in shutTypeList"
-              :key="index"
-              :value="item.shutTypeList"
-              v-if="scope.row.shutTypeId == item.shutTypeId"
-            >
-              {{ item.shutTypeName }}
-            </span>
-        </template>
-      </el-table-column>
-      <el-table-column label="停机原因" align="center" prop="shutReason" />
-<!--      <el-table-column label="是否标识：1-是；0-否" align="center" prop="isFlag" />-->
-      <el-table-column label="备注" align="center" prop="remark" />
-      <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="handleUpdate(scope.row)"
-            v-hasPermi="['dms:shutReason:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['dms:shutReason:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <div
+      v-loading="loading"
+      class="reason-tree"
+      @wheel.prevent="handleTreeWheel"
+      @mousedown="startTreePan"
+      @mousemove="moveTreePan"
+      @mouseup="endTreePan"
+      @mouseleave="endTreePan"
+      @dblclick="resetTreeView"
+    >
+      <div class="reason-tree__toolbar">
+        <div class="reason-tree__legend">
+          <span class="legend-dot legend-dot--root" />根节点
+          <span class="legend-dot legend-dot--type" />分支大类
+          <span class="legend-dot legend-dot--leaf" />原因叶子
+        </div>
+        <div class="reason-tree__tools">
+          <el-button size="mini" icon="el-icon-minus" @mousedown.stop @click.stop="zoomTree(0.88)">缩小</el-button>
+          <el-button size="mini" icon="el-icon-plus" @mousedown.stop @click.stop="zoomTree(1.12)">放大</el-button>
+          <el-button size="mini" icon="el-icon-refresh-left" @mousedown.stop @click.stop="resetTreeView">重置视图</el-button>
+        </div>
+      </div>
+      <div v-if="!treeNodes.length" class="reason-tree__empty">暂无停机原因数据</div>
+      <svg v-else ref="treeSvg" class="reason-tree__svg">
+        <g :transform="treeTransformText">
+          <path
+            v-for="link in treeLinks"
+            :key="link.id"
+            :d="link.path"
+            class="tree-link"
+            :class="{ 'tree-link--active': isPathLinkActive(link) }"
+          />
+          <g
+            v-for="node in treeNodes"
+            :key="node.id"
+            class="tree-node"
+            :class="getTreeNodeClass(node)"
+            :transform="'translate(' + node.x + ',' + node.y + ')'"
+            @mouseenter="hoveredTreeId = node.id"
+            @mouseleave="hoveredTreeId = null"
+            @mousedown.stop
+            @click.stop="handleTreeNodeClick(node)"
+            @dblclick.stop
+          >
+            <title>{{ node.fullName }}</title>
+            <rect
+              :x="-node.width / 2"
+              :y="-node.height / 2"
+              :width="node.width"
+              :height="node.height"
+              rx="8"
+              ry="8"
+            />
+            <circle
+              v-if="node.type === 'type'"
+              class="tree-node__toggle"
+              :cx="node.width / 2 - 16"
+              cy="-18"
+              r="10"
+            />
+            <text
+              v-if="node.type === 'type'"
+              class="tree-node__toggle-text"
+              :x="node.width / 2 - 16"
+              y="-14"
+            >{{ isTreeNodeCollapsed(node.id) ? '+' : '-' }}</text>
+            <text class="tree-node__name" x="-92" y="-8">{{ node.name }}</text>
+            <text class="tree-node__meta" x="-92" y="15">{{ node.meta }}</text>
+            <text
+              v-if="node.type === 'type'"
+              v-hasPermi="['dms:shutReason:add']"
+              class="tree-node__action"
+              x="54"
+              y="16"
+              @click.stop="handleAdd(node.row)"
+            >+ 小类</text>
+          </g>
+          <circle
+            v-for="particle in treeParticles"
+            :key="particle.id"
+            class="tree-particle"
+            :cx="particle.x"
+            :cy="particle.y"
+            :r="particle.r"
+            :style="{ '--tx': particle.tx + 'px', '--ty': particle.ty + 'px', '--delay': particle.delay + 'ms' }"
+          />
+        </g>
+      </svg>
+    </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-dialog :title="title" :visible.sync="open" width="620px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="96px">
         <el-form-item label="原因编号" prop="reasonCode">
           <el-input v-model="form.reasonCode" placeholder="请输入原因编号" />
         </el-form-item>
-<!--        <el-form-item label="设备ID，关联dms_base_device_ledger的device_id" prop="deviceId">-->
-<!--          <el-input v-model="form.deviceId" placeholder="请输入设备ID，关联dms_base_device_ledger的device_id" />-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="设备名称" prop="deviceId" >
-          <el-select v-model="form.deviceId" placeholder="请输入设备类型">
-            <el-option
-              v-for="item in ledgerList"
-              :key="item.deviceId"
-              :label="item.deviceName"
-              :value="item.deviceId">
-            </el-option>
-          </el-select>
-        </el-form-item>-->
-<!--        <el-form-item label="停机类型,关联dms_base_shut_type的shut_type_id" prop="shutTypeId">-->
-<!--          <el-input v-model="form.shutTypeId" placeholder="请输入停机类型,关联dms_base_shut_type的shut_type_id" />-->
-<!--        </el-form-item>-->
-        <el-form-item label="停机类型" prop="shutTypeId" >
-          <el-select v-model="form.shutTypeId" placeholder="请选择停机类型">
+        <el-form-item label="停机大类" prop="shutTypeId">
+          <el-select v-model="form.shutTypeId" placeholder="请选择停机大类" style="width: 100%">
             <el-option
               v-for="item in shutTypeList"
               :key="item.shutTypeId"
               :label="item.shutTypeName"
-              :value="item.shutTypeId">
-            </el-option>
+              :value="item.shutTypeId"
+            />
           </el-select>
         </el-form-item>
+        <el-form-item label="适用设备" prop="deviceId">
+          <el-select
+            v-model="form.deviceId"
+            placeholder="为空表示通用原因"
+            clearable
+            filterable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in ledgerList"
+              :key="item.deviceId"
+              :label="item.deviceCode + ' - ' + item.deviceName"
+              :value="item.deviceId"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="适用范围说明">
+          <div class="scope-panel" :class="form.deviceId ? 'scope-panel--device' : 'scope-panel--common'">
+            <div class="scope-panel__title">
+              {{ form.deviceId ? '当前为设备专属原因' : '当前为通用原因' }}
+            </div>
+            <div class="scope-panel__text">
+              <span v-if="form.deviceId">
+                仅用于设备：{{ getDeviceDisplayName(form.deviceId) }}
+              </span>
+              <span v-else>
+                不选择设备时，该原因可被所有设备共用。
+              </span>
+            </div>
+          </div>
+        </el-form-item>
         <el-form-item label="停机原因" prop="shutReason">
           <el-input v-model="form.shutReason" placeholder="请输入停机原因" />
         </el-form-item>
-<!--        <el-form-item label="是否标识：1-是；0-否" prop="isFlag">-->
-<!--          <el-input v-model="form.isFlag" placeholder="请输入是否标识：1-是；0-否" />-->
-<!--        </el-form-item>-->
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
@@ -224,97 +250,447 @@
 </template>
 
 <script>
-import { listShutReason, getShutReason, delShutReason, addShutReason, updateShutReason } from "@/api/dms/shutReason";
+import { getShutReasonTree, getShutReason, delShutReason, addShutReason, updateShutReason } from '@/api/dms/shutReason'
 import { getDeviceLedgerList } from '@/api/base/deviceLedger'
 import { listShutType } from '@/api/dms/shutType'
 
 export default {
-  name: "ShutReason",
+  name: 'ShutReason',
   data() {
     return {
-      shutTypeList:[],
-      ledgerList:[],
-      // 遮罩层
+      shutTypeList: [],
+      shutTypeMap: {},
+      ledgerList: [],
+      ledgerMap: {},
       loading: true,
-      // 选中数组
       ids: [],
-      // 非单个禁用
+      selectedReasonRows: [],
       single: true,
-      // 非多个禁用
       multiple: true,
-      // 显示搜索条件
       showSearch: true,
-      // 总条数
-      total: 0,
-      // 停机原因信息表格数据
-      shutReasonList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
+      rawShutReasonTree: [],
+      shutReasonTreeRows: [],
+      collapsedTreeIds: {},
+      hoveredTreeId: null,
+      selectedTreeId: null,
+      treeParticles: [],
+      treeTransform: {
+        x: 24,
+        y: 220,
+        scale: 1
+      },
+      treePanState: {
+        dragging: false,
+        startX: 0,
+        startY: 0,
+        originX: 0,
+        originY: 0
+      },
+      title: '',
       open: false,
-      // 查询参数
       queryParams: {
-        pageNum: 1,
-        pageSize: 10,
         reasonCode: null,
         deviceId: null,
         shutTypeId: null,
-        shutReason: null,
-        isFlag: null,
-        deviceName: null,
+        shutReason: null
       },
-      // 表单参数
       form: {},
-      // 表单校验
       rules: {
-        isFlag: [
-          { required: true, message: "是否标识：1-是；0-否不能为空", trigger: "blur" }
-        ],
-        // deviceId: [
-        //   { required: true, message: "设备类型ID不能为空", trigger: "blur" }
-        // ],
         reasonCode: [
-          { required: true, message: "部位名称不能为空", trigger: "blur" }
+          { required: true, message: '原因编号不能为空', trigger: 'blur' }
+        ],
+        shutTypeId: [
+          { required: true, message: '停机大类不能为空', trigger: 'change' }
         ],
         shutReason: [
-          { required: true, message: "停机原因不能为空", trigger: "blur" }
-        ],
+          { required: true, message: '停机原因不能为空', trigger: 'blur' }
+        ]
       }
-    };
+    }
+  },
+  computed: {
+    treeLayout() {
+      const rootId = 'root-shut-reason'
+      const visibleTypes = this.shutReasonTreeRows || []
+      const nodes = [{
+        id: rootId,
+        type: 'root',
+        row: null,
+        parentId: null,
+        x: 90,
+        y: 0,
+        width: 190,
+        height: 70,
+        name: '停机原因',
+        fullName: '停机原因',
+        meta: `${this.getReasonTotalCount(visibleTypes)} 个小类`
+      }]
+      const links = []
+      let leafIndex = 0
+      visibleTypes.forEach((type, typeIndex) => {
+        const typeId = type.treeId
+        const collapsed = this.isTreeNodeCollapsed(typeId)
+        const children = collapsed ? [] : (type.children || [])
+        const firstLeafIndex = leafIndex
+        const typeY = children.length
+          ? firstLeafIndex * 104 + (children.length - 1) * 52
+          : (leafIndex + typeIndex * 0.45) * 104
+        nodes.push({
+          id: typeId,
+          type: 'type',
+          row: type,
+          parentId: rootId,
+          x: 390,
+          y: typeY,
+          width: 210,
+          height: 74,
+          name: this.formatTreeText(type.displayName, 10),
+          fullName: type.displayName,
+          meta: `${type.reasonCount} 个小类 / ${this.getFrequencyText(type)}`
+        })
+        links.push(this.createTreeLink(rootId, typeId, 185, 285, 0, typeY))
+        children.forEach(reason => {
+          const reasonY = leafIndex * 104
+          nodes.push({
+            id: reason.treeId,
+            type: 'reason',
+            row: reason,
+            parentId: typeId,
+            x: 710,
+            y: reasonY,
+            width: 240,
+            height: 78,
+            name: this.formatTreeText(reason.displayName, 12),
+            fullName: reason.displayName,
+            meta: `${reason.displayCode || '-'} / ${reason.deviceId ? '设备专属' : '通用原因'}`
+          })
+          links.push(this.createTreeLink(typeId, reason.treeId, 495, 590, typeY, reasonY))
+          leafIndex += 1
+        })
+        if (!children.length) {
+          leafIndex += 1
+        }
+      })
+      if (nodes.length > 1) {
+        const typeNodes = nodes.filter(node => node.type === 'type')
+        const minY = Math.min.apply(null, typeNodes.map(node => node.y))
+        const maxY = Math.max.apply(null, typeNodes.map(node => node.y))
+        nodes[0].y = (minY + maxY) / 2
+        links.forEach(link => {
+          if (link.sourceId === rootId) {
+            link.path = this.buildTreePath(185, nodes[0].y, 235, link.targetY, link.targetX, link.targetY)
+          }
+        })
+      }
+      const nodeMap = nodes.reduce((acc, node) => {
+        acc[node.id] = node
+        return acc
+      }, {})
+      return { nodes, links, nodeMap }
+    },
+    treeNodes() {
+      return this.treeLayout.nodes
+    },
+    treeLinks() {
+      return this.treeLayout.links
+    },
+    treeTransformText() {
+      return `translate(${this.treeTransform.x},${this.treeTransform.y}) scale(${this.treeTransform.scale})`
+    },
+    activeTreePathIds() {
+      const currentId = this.hoveredTreeId || this.selectedTreeId
+      const pathIds = []
+      let cursor = this.treeLayout.nodeMap[currentId]
+      while (cursor) {
+        pathIds.push(cursor.id)
+        cursor = this.treeLayout.nodeMap[cursor.parentId]
+      }
+      return pathIds
+    }
   },
   created() {
-    this.getList();
-    this.getDevice();
-    this.getShutType();
+    this.getDevice()
+    this.getShutType()
+    this.loadTree()
   },
   methods: {
-    /** 查询停机类型信息列表 */
+    createTreeLink(sourceId, targetId, sourceX, targetX, sourceY, targetY) {
+      const controlX = sourceX + (targetX - sourceX) * 0.48
+      return {
+        id: `${sourceId}-${targetId}`,
+        sourceId,
+        targetId,
+        targetX,
+        targetY,
+        path: this.buildTreePath(sourceX, sourceY, controlX, targetY, targetX, targetY)
+      }
+    },
+    buildTreePath(sourceX, sourceY, controlX, targetControlY, targetX, targetY) {
+      return `M ${sourceX} ${sourceY} C ${controlX} ${sourceY}, ${controlX} ${targetControlY}, ${targetX} ${targetY}`
+    },
+    getReasonTotalCount(types) {
+      return (types || []).reduce((total, item) => total + this.toNumber(item.reasonCount), 0)
+    },
+    formatTreeText(value, maxLength) {
+      const text = String(value || '-')
+      return text.length > maxLength ? `${text.slice(0, maxLength)}...` : text
+    },
+    isTreeNodeCollapsed(treeId) {
+      return !!this.collapsedTreeIds[treeId]
+    },
+    getTreeNodeClass(node) {
+      return {
+        'tree-node--root': node.type === 'root',
+        'tree-node--type': node.type === 'type',
+        'tree-node--reason': node.type === 'reason',
+        'tree-node--active-path': this.activeTreePathIds.indexOf(node.id) !== -1,
+        'tree-node--selected': this.selectedTreeId === node.id,
+        'tree-node--collapsed': node.type === 'type' && this.isTreeNodeCollapsed(node.id)
+      }
+    },
+    isPathLinkActive(link) {
+      return this.activeTreePathIds.indexOf(link.sourceId) !== -1 &&
+        this.activeTreePathIds.indexOf(link.targetId) !== -1
+    },
+    handleTreeNodeClick(node) {
+      if (node.type === 'type') {
+        this.toggleTreeNode(node.id)
+        return
+      }
+      if (node.type === 'reason') {
+        this.selectedTreeId = node.id
+        this.handleSelectionChange([node.row])
+        this.burstTreeParticles(node)
+      }
+    },
+    toggleTreeNode(treeId) {
+      this.collapsedTreeIds = {
+        ...this.collapsedTreeIds,
+        [treeId]: !this.collapsedTreeIds[treeId]
+      }
+    },
+    burstTreeParticles(node) {
+      const now = Date.now()
+      const particles = Array.from({ length: 18 }).map((_, index) => {
+        const angle = (Math.PI * 2 * index) / 18
+        const distance = 42 + (index % 4) * 11
+        return {
+          id: `${node.id}-${now}-${index}`,
+          x: node.x + node.width / 2 - 14,
+          y: node.y,
+          r: 2 + (index % 3),
+          tx: Math.cos(angle) * distance,
+          ty: Math.sin(angle) * distance,
+          delay: index * 10
+        }
+      })
+      this.treeParticles = this.treeParticles.concat(particles)
+      window.setTimeout(() => {
+        const expiredIds = particles.map(item => item.id)
+        this.treeParticles = this.treeParticles.filter(item => expiredIds.indexOf(item.id) === -1)
+      }, 760)
+    },
+    getTreeLocalPoint(event) {
+      const rect = this.$refs.treeSvg.getBoundingClientRect()
+      return {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top
+      }
+    },
+    handleTreeWheel(event) {
+      if (!this.$refs.treeSvg) {
+        return
+      }
+      const point = this.getTreeLocalPoint(event)
+      const oldScale = this.treeTransform.scale
+      const nextScale = Math.min(1.8, Math.max(0.45, oldScale * (event.deltaY > 0 ? 0.9 : 1.1)))
+      const graphX = (point.x - this.treeTransform.x) / oldScale
+      const graphY = (point.y - this.treeTransform.y) / oldScale
+      this.treeTransform = {
+        x: point.x - graphX * nextScale,
+        y: point.y - graphY * nextScale,
+        scale: nextScale
+      }
+    },
+    zoomTree(rate) {
+      const nextScale = Math.min(1.8, Math.max(0.45, this.treeTransform.scale * rate))
+      this.treeTransform = {
+        ...this.treeTransform,
+        scale: nextScale
+      }
+    },
+    startTreePan(event) {
+      this.treePanState = {
+        dragging: true,
+        startX: event.clientX,
+        startY: event.clientY,
+        originX: this.treeTransform.x,
+        originY: this.treeTransform.y
+      }
+    },
+    moveTreePan(event) {
+      if (!this.treePanState.dragging) {
+        return
+      }
+      this.treeTransform = {
+        ...this.treeTransform,
+        x: this.treePanState.originX + event.clientX - this.treePanState.startX,
+        y: this.treePanState.originY + event.clientY - this.treePanState.startY
+      }
+    },
+    endTreePan() {
+      this.treePanState.dragging = false
+    },
+    resetTreeView() {
+      this.treeTransform = {
+        x: 24,
+        y: 220,
+        scale: 1
+      }
+    },
     getShutType() {
-      listShutType(this.queryParams).then(response => {
-        this.shutTypeList = response.rows;
-      });
+      listShutType({ pageNum: 1, pageSize: 9999, isFlag: '1' }).then(response => {
+        this.shutTypeList = response.rows || []
+        this.shutTypeMap = this.shutTypeList.reduce((acc, item) => {
+          acc[item.shutTypeId] = item
+          return acc
+        }, {})
+      })
     },
-    //查询设备信息
-    getDevice(){
+    getDevice() {
       getDeviceLedgerList({}).then(response => {
-        this.ledgerList = response.data;
-      });
+        this.ledgerList = response.data || []
+        this.ledgerMap = this.ledgerList.reduce((acc, item) => {
+          acc[item.deviceId] = item
+          return acc
+        }, {})
+      })
     },
-    /** 查询停机原因信息列表 */
-    getList() {
-      this.loading = true;
-      listShutReason(this.queryParams).then(response => {
-        this.shutReasonList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
+    loadTree() {
+      this.loading = true
+      const params = this.queryParams.deviceId ? { deviceId: this.queryParams.deviceId } : {}
+      return getShutReasonTree(params).then(response => {
+        this.rawShutReasonTree = response.data || []
+        this.buildTreeRows()
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    buildTreeRows() {
+      const typeId = this.queryParams.shutTypeId
+      const reasonCode = this.normalizeKeyword(this.queryParams.reasonCode)
+      const shutReason = this.normalizeKeyword(this.queryParams.shutReason)
+      const treeRows = (this.rawShutReasonTree || []).map(type => {
+        if (typeId && type.shutTypeId !== typeId) {
+          return null
+        }
+        const children = (type.reasonList || []).filter(reason => {
+          return this.containsKeyword(reason.reasonCode, reasonCode) &&
+            this.containsKeyword(reason.shutReason, shutReason)
+        }).map(reason => {
+          return {
+            ...reason,
+            treeId: `reason-${reason.shutReasonId}`,
+            rowType: 'reason',
+            displayCode: reason.reasonCode,
+            displayName: reason.shutReason
+          }
+        }).sort(this.compareReasonRows)
+        if (!children.length) {
+          return null
+        }
+        // 为什么这样做：前端筛选后重新汇总父节点频次，避免搜索小类时大类仍显示未筛选前的总数。
+        return {
+          ...type,
+          treeId: `type-${type.shutTypeId}`,
+          rowType: 'type',
+          displayCode: type.typeCode,
+          displayName: type.shutTypeName,
+          reasonCount: children.length,
+          deviceFreq: this.sumFrequency(children, 'deviceFreq'),
+          lineFreq: this.sumFrequency(children, 'lineFreq'),
+          globalFreq: this.sumFrequency(children, 'globalFreq'),
+          children
+        }
+      }).filter(item => item)
+      this.shutReasonTreeRows = treeRows.sort(this.compareTypeRows)
+      this.selectedTreeId = null
+      this.handleSelectionChange([])
+    },
+    compareReasonRows(left, right) {
+      const result = this.compareFrequency(left, right)
+      if (result !== 0) {
+        return result
+      }
+      return this.compareText(left.reasonCode, right.reasonCode) ||
+        this.compareNumber(left.shutReasonId, right.shutReasonId)
+    },
+    compareTypeRows(left, right) {
+      const result = this.compareFrequency(left, right)
+      if (result !== 0) {
+        return result
+      }
+      return this.compareText(left.typeCode, right.typeCode) ||
+        this.compareNumber(left.shutTypeId, right.shutTypeId)
+    },
+    compareFrequency(left, right) {
+      if (this.queryParams.deviceId) {
+        const deviceResult = this.compareNumberDesc(left.deviceFreq, right.deviceFreq)
+        if (deviceResult !== 0) {
+          return deviceResult
+        }
+        const lineResult = this.compareNumberDesc(left.lineFreq, right.lineFreq)
+        if (lineResult !== 0) {
+          return lineResult
+        }
+      }
+      return this.compareNumberDesc(left.globalFreq, right.globalFreq)
+    },
+    compareNumberDesc(left, right) {
+      return this.toNumber(right) - this.toNumber(left)
+    },
+    compareNumber(left, right) {
+      return this.toNumber(left) - this.toNumber(right)
+    },
+    compareText(left, right) {
+      return String(left || '').localeCompare(String(right || ''))
+    },
+    sumFrequency(list, field) {
+      return list.reduce((total, item) => total + this.toNumber(item[field]), 0)
+    },
+    toNumber(value) {
+      return Number(value || 0)
+    },
+    normalizeKeyword(value) {
+      return value == null ? '' : String(value).trim().toLowerCase()
+    },
+    containsKeyword(value, keyword) {
+      if (!keyword) {
+        return true
+      }
+      return String(value || '').toLowerCase().indexOf(keyword) !== -1
+    },
+    getFrequencyText(row) {
+      const globalText = `全局 ${this.toNumber(row.globalFreq)}`
+      if (!this.queryParams.deviceId) {
+        return globalText
+      }
+      return `设备 ${this.toNumber(row.deviceFreq)} / 产线 ${this.toNumber(row.lineFreq)} / ${globalText}`
+    },
+    getDeviceDisplayName(deviceId) {
+      if (!deviceId) {
+        return '全部设备可用'
+      }
+      const currentDevice = this.ledgerMap[deviceId]
+      return currentDevice ? `${currentDevice.deviceCode} - ${currentDevice.deviceName}` : String(deviceId)
+    },
+    isSelectableReasonRow(row) {
+      return row && row.rowType === 'reason'
     },
-    // 取消按钮
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
     },
-    // 表单重置
     reset() {
       this.form = {
         shutReasonId: null,
@@ -329,97 +705,303 @@ export default {
         createTime: null,
         updateBy: null,
         updateTime: null
-      };
-      this.resetForm("form");
+      }
+      this.resetForm('form')
     },
-    /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+      this.loadTree()
     },
-    /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+      this.resetForm('queryForm')
+      this.loadTree()
     },
-    // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.shutReasonId)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.selectedReasonRows = selection || []
+      this.ids = this.selectedReasonRows.map(item => item.shutReasonId)
+      this.single = this.selectedReasonRows.length !== 1
+      this.multiple = !this.selectedReasonRows.length
     },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加停机原因信息";
+    handleAdd(row) {
+      this.reset()
+      if (row && row.rowType === 'type') {
+        this.form.shutTypeId = row.shutTypeId
+      } else if (this.queryParams.shutTypeId) {
+        this.form.shutTypeId = this.queryParams.shutTypeId
+      }
+      if (this.queryParams.deviceId) {
+        this.form.deviceId = this.queryParams.deviceId
+      }
+      this.open = true
+      this.title = '添加停机原因小类'
     },
-    /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
-      const shutReasonId = row.shutReasonId || this.ids
+      this.reset()
+      const shutReasonId = row && row.shutReasonId ? row.shutReasonId : this.ids[0]
       getShutReason(shutReasonId).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改停机原因信息";
-      });
+        this.form = response.data
+        this.open = true
+        this.title = '修改停机原因小类'
+      })
     },
-    /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.form.shutReasonId != null) {
-            updateShutReason(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
+            updateShutReason(this.form).then(() => {
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.loadTree()
+            })
           } else {
-            addShutReason(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
+            addShutReason(this.form).then(() => {
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.loadTree()
+            })
           }
         }
-      });
+      })
     },
-    /** 删除按钮操作 */
     handleDelete(row) {
-      const shutReasonIds = row && row.shutReasonId ? [row.shutReasonId] : this.ids;
-      const idsArray = Array.isArray(shutReasonIds) ? shutReasonIds : [shutReasonIds];
-      // 防止删除主键为 1 或固定原因编号 R001
-      if (idsArray.includes(1) || idsArray.includes('1')) {
-        this.$modal.msgWarning('主键为 1 的原因不允许删除');
-        return;
+      const reasonRows = row && row.rowType === 'reason' ? [row] : this.selectedReasonRows
+      const shutReasonIds = reasonRows.map(item => item.shutReasonId)
+      if (shutReasonIds.includes(1) || shutReasonIds.includes('1')) {
+        this.$modal.msgWarning('主键为 1 的原因不允许删除')
+        return
       }
-      if (row && row.reasonCode === 'R001') {
-        this.$modal.msgWarning('原因编号 R001 不允许删除');
-        return;
+      const selectedReasonCodes = reasonRows.map(item => item.reasonCode)
+      if (selectedReasonCodes.includes('R001')) {
+        this.$modal.msgWarning('原因编号 R001 不允许删除')
+        return
       }
-      if (!row && Array.isArray(this.ids) && this.ids.length) {
-        const selectedReasonCodes = this.shutReasonList
-          .filter(item => this.ids.includes(item.shutReasonId))
-          .map(item => item.reasonCode);
-        if (selectedReasonCodes.includes('R001')) {
-          this.$modal.msgWarning('原因编号 R001 不允许删除');
-          return;
-        }
-      }
-      const reasonCode = row && row.reasonCode ? row.reasonCode : this.ids;
-      this.$modal.confirm('是否确认删除停机原因信息编号为"' + reasonCode + '"的数据项？').then(function() {
-        return delShutReason(shutReasonIds);
+      const reasonCode = selectedReasonCodes.join('，')
+      this.$modal.confirm('是否确认删除停机原因小类编号为"' + reasonCode + '"的数据项？').then(function() {
+        return delShutReason(shutReasonIds)
       }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+        this.loadTree()
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {})
     },
-    /** 导出按钮操作 */
     handleExport() {
       this.download('dms/shutReason/export', {
         ...this.queryParams
       }, `shutReason_${new Date().getTime()}.xlsx`)
     }
   }
-};
+}
 </script>
+
+<style scoped>
+.reason-tree {
+  position: relative;
+  height: 620px;
+  overflow: hidden;
+  border: 1px solid #dcdfe6;
+  border-radius: 8px;
+  background:
+    linear-gradient(90deg, rgba(46, 90, 120, 0.06) 1px, transparent 1px),
+    linear-gradient(0deg, rgba(46, 90, 120, 0.06) 1px, transparent 1px),
+    linear-gradient(135deg, #f8fbfc 0%, #eef5f2 56%, #f7f4ee 100%);
+  background-size: 28px 28px, 28px 28px, 100% 100%;
+  cursor: grab;
+  user-select: none;
+}
+
+.reason-tree:active {
+  cursor: grabbing;
+}
+
+.reason-tree__toolbar {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  right: 12px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  pointer-events: none;
+}
+
+.reason-tree__legend,
+.reason-tree__tools {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  pointer-events: auto;
+}
+
+.reason-tree__legend {
+  padding: 7px 10px;
+  border: 1px solid rgba(80, 115, 128, 0.22);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.82);
+  color: #40525c;
+  font-size: 12px;
+  box-shadow: 0 8px 22px rgba(40, 60, 70, 0.08);
+}
+
+.legend-dot {
+  display: inline-block;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+}
+
+.legend-dot--root {
+  background: #2f6f8f;
+}
+
+.legend-dot--type {
+  background: #4f7f62;
+}
+
+.legend-dot--leaf {
+  background: #b98032;
+}
+
+.reason-tree__svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.reason-tree__empty {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  color: #7a8a93;
+  transform: translate(-50%, -50%);
+}
+
+.tree-link {
+  fill: none;
+  stroke: rgba(92, 111, 120, 0.26);
+  stroke-width: 2;
+  transition: stroke 0.18s ease, stroke-width 0.18s ease;
+}
+
+.tree-link--active {
+  stroke: #df8d38;
+  stroke-width: 4;
+}
+
+.tree-node {
+  cursor: pointer;
+}
+
+.tree-node rect {
+  fill: rgba(255, 255, 255, 0.92);
+  stroke: rgba(92, 111, 120, 0.28);
+  stroke-width: 1;
+  filter: drop-shadow(0 8px 16px rgba(40, 61, 73, 0.12));
+  transition: fill 0.18s ease, stroke 0.18s ease, stroke-width 0.18s ease, filter 0.18s ease;
+}
+
+.tree-node--root rect {
+  fill: #2f6f8f;
+  stroke: #255a74;
+}
+
+.tree-node--type rect {
+  fill: #f9fcf8;
+}
+
+.tree-node--reason rect {
+  fill: #fffaf2;
+}
+
+.tree-node--active-path rect,
+.tree-node--selected rect {
+  stroke: #df8d38;
+  stroke-width: 2;
+  filter: drop-shadow(0 10px 22px rgba(150, 100, 36, 0.26));
+}
+
+.tree-node--collapsed rect {
+  fill: #f2f7f0;
+}
+
+.tree-node__name {
+  fill: #263841;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.tree-node__meta {
+  fill: #65777f;
+  font-size: 12px;
+  letter-spacing: 0;
+}
+
+.tree-node--root .tree-node__name,
+.tree-node--root .tree-node__meta {
+  fill: #fff;
+}
+
+.tree-node__toggle {
+  fill: #4f7f62;
+}
+
+.tree-node__toggle-text {
+  fill: #fff;
+  font-size: 16px;
+  font-weight: 700;
+  text-anchor: middle;
+  pointer-events: none;
+}
+
+.tree-node__action {
+  fill: #2f6f8f;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.tree-particle {
+  fill: #df8d38;
+  opacity: 0;
+  animation: particle-burst 720ms ease-out forwards;
+  animation-delay: var(--delay);
+}
+
+@keyframes particle-burst {
+  0% {
+    opacity: 0.95;
+    transform: translate(0, 0) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(var(--tx), var(--ty)) scale(0.2);
+  }
+}
+
+.scope-panel {
+  padding: 10px 12px;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  line-height: 1.6;
+}
+
+.scope-panel--common {
+  background: #f0f9eb;
+  border-color: #c2e7b0;
+  color: #5a7a22;
+}
+
+.scope-panel--device {
+  background: #fdf6ec;
+  border-color: #f5dab1;
+  color: #9a6b16;
+}
+
+.scope-panel__title {
+  font-weight: 600;
+}
+
+.scope-panel__text {
+  margin-top: 4px;
+  font-size: 12px;
+}
+</style>