feat(*): 添加测试标识点

src/components/Hamburger/index.vue

 <template >
-  <div class="hamburger" @click="toggleClick">
+  <div class="hamburger" @click="toggleClick" data-testid="hamburger-menu">
     <svg
         :class="{'is-active':isActive}"
         class="hamburger-icon"

src/components/commonTable/index.vue

 <template>
-  <div class="common-table">
+  <div class="common-table" data-testid="common-table">
     <el-table
       ref="tableRef"
       :data="currentPageData"
       v-bind="$attrs"
       :resizable="false"
       :height="tableHeight"
+      data-testid="el-table"
     >
       <template v-for="column in columns" :key="column.prop">
         <el-table-column v-bind="column" :align="align">
@@ -23,7 +24,7 @@
       </template>
     </el-table>
 
-    <div class="pagination-container" v-if="showPagination">
+    <div class="pagination-container" v-if="showPagination" data-testid="pagination-container">
       <el-pagination
         v-model:current-page="currentPage"
         v-model:page-size="pageSize"
@@ -35,6 +36,7 @@
         :total-text="paginationTexts.total || '总计'"
         :size-change-text="paginationTexts.sizeChange || '条/页'"
         :jumper-text="paginationTexts.jumper || '前往'"
+        data-testid="el-pagination"
       >
       </el-pagination>
     </div>

src/layout/index.vue

 <template>
-  <div class="layout-box">
-    <div class="left" :class="{ colWidth: sidebar }">
+  <div class="layout-box" data-testid="layout-container">
+    <div class="left" :class="{ colWidth: sidebar }" data-testid="layout-sidebar">
       <menuCom></menuCom>
     </div>
-    <div class="right" :class="{ extend: sidebar }">
-      <div class="header">
+    <div class="right" :class="{ extend: sidebar }" data-testid="layout-main">
+      <div class="header" data-testid="layout-header">
         <hamburger
           class="hamburger-container"
           @toggleClick="toggleSideBar"
           :is-active="sidebar"
         />
         <h3>E-Core / DC-TOM 管理平台</h3>
-        <div class="go-tom" @click="goTom" v-if="!currentDomain.includes('screen.bmetech.com')">EcoTOM 三流合一</div>
-        <div class="right-block">
+        <div class="go-tom" @click="goTom" v-if="!currentDomain.includes('screen.bmetech.com')" data-testid="go-tom-button">EcoTOM 三流合一</div>
+        <div class="right-block" data-testid="header-right-block">
           <el-dropdown class="right-menu-item" trigger="click">
-            <div class="user-info">
+            <div class="user-info" data-testid="user-info">
               <svg
                 color="red"
                 data-icon-name="user-circle"
@@ -54,8 +54,8 @@
           </el-dropdown>
         </div>
       </div>
-      <div class="content">
-        <div class="breadcrumb-container">
+      <div class="content" data-testid="layout-content">
+        <div class="breadcrumb-container" data-testid="breadcrumb-container">
           <el-breadcrumb separator="/">
             <el-breadcrumb-item
               v-for="(item, index) in breadcrumbList"

src/layout/menuCom.vue

@@ -3,6 +3,7 @@
     <el-col :span="24">
       <el-menu
         class="el-menu-vertical-demo"
+        data-testid="sidebar-menu"
         @open="handleOpen"
         @close="handleClose"
         :collapse="sidebar"
@@ -16,6 +17,7 @@
             :index="item.path"
             v-if="item.children && item.children.length > 0"
             class="submenu-box"
+            :data-testid="`menu-submenu-${item.path.replace('/', '')}`"
           >
             <template #title>
               <!-- <el-icon><location /></el-icon> -->
@@ -27,6 +29,7 @@
               :key="item_son.path"
               :index="item_son.path"
               class="submenu-title-noDropdown"
+              :data-testid="`menu-item-${item_son.path.replace('/', '')}`"
             >
               <span>{{getMenuTitle(item_son)}}</span>
             </el-menu-item>
@@ -35,6 +38,7 @@
             v-else 
             :index="item.path"  
             class="submenu-box"
+            :data-testid="`menu-item-${item.path.replace('/', '')}`"
           >
             <!-- <el-icon><setting /></el-icon> -->
             <img class="menu-icon" :src="getIcon(item.meta.icon)" alt="">

src/views/AboutView/AboutView.vue

 <template>
-  <div class="page-container collectorList all-select-btn">
-    <div class="content-box">
-      <div class="search">
-        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+  <div class="page-container collectorList all-select-btn" data-testid="about-view-container">
+    <div class="content-box" data-testid="content-box">
+      <div class="search" data-testid="search-area">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline" data-testid="search-form">
           <el-form-item label="事件名称">
             <el-input
               v-model="formInline.eventName"
               placeholder="请输入事件名称"
               style="width: 200px"
               clearable
+              data-testid="event-name-input"
             />
           </el-form-item>
           <el-form-item label="发生位置">
@@ -17,6 +18,7 @@
               placeholder="请输入发生位置"
               style="width: 200px"
               clearable
+              data-testid="location-input"
             />
           </el-form-item>
           <el-form-item label="除尘器名称">
@@ -25,15 +27,17 @@
               placeholder="请输入除尘器名称"
               style="width: 200px"
               clearable
+              data-testid="duster-name-input"
             />
           </el-form-item>
           <el-form-item label="设备类型">
-            <el-select v-model="formInline.deviceType" style="width: 200px">
+            <el-select v-model="formInline.deviceType" style="width: 200px" data-testid="device-type-select">
               <el-option
                 v-for="i in typeList.list"
                 :key="i"
                 :label="`${i.desc}`"
                 :value="i.code"
+                :data-testid="`device-type-option-${i.code}`"
               />
             </el-select>
           </el-form-item>
@@ -46,13 +50,14 @@
               end-placeholder="结束时间"
               popper-class="date-picker-popper"
               :teleported="false"
+              data-testid="alarm-date-picker"
             />
           </el-form-item>
           <el-form-item>
-            <el-button type="default" class="reset-btn-balck-theme" @click="onReset"
+            <el-button type="default" class="reset-btn-balck-theme" @click="onReset" data-testid="reset-button"
               >重置</el-button
             >
-            <el-button type="default" class="search-btn-balck-theme" @click="onSubmit"
+            <el-button type="default" class="search-btn-balck-theme" @click="onSubmit" data-testid="search-button"
               >查询</el-button
             >
             <el-button
@@ -60,20 +65,21 @@
               style="width: 140px"
               class="export-btn-balck-theme"
               @click="openRound()"
+              data-testid="suspend-device-button"
               >挂起设备</el-button
             >
           </el-form-item>
           <br />
           <el-form-item>
-            <el-radio-group v-model="formInline.suspendFlag" @change="onSubmit">
-              <el-radio value="1">挂起期间告警</el-radio>
-              <el-radio value="0">非挂起期间告警</el-radio>
-              <el-radio value="2">全部告警</el-radio>
+            <el-radio-group v-model="formInline.suspendFlag" @change="onSubmit" data-testid="suspend-flag-radio-group">
+              <el-radio value="1" data-testid="suspend-flag-radio-during">挂起期间告警</el-radio>
+              <el-radio value="0" data-testid="suspend-flag-radio-normal">非挂起期间告警</el-radio>
+              <el-radio value="2" data-testid="suspend-flag-radio-all">全部告警</el-radio>
             </el-radio-group>
           </el-form-item>
         </el-form>
       </div>
-      <div class="table-box">
+      <div class="table-box" data-testid="table-container">
         <common-table
           ref="pageRef"
           :data="tableData.list"
@@ -88,12 +94,13 @@
             next: '后一页',
             jumper: '跳至',
           }"
+          data-testid="alarm-table"
         >
           <template #index="{ $index }">
             {{ getIndex($index) }}
           </template>
           <template #operate="{ row }">
-            <span class="health-score green-color" @click="openDialog(row)">暂挂起</span>
+            <span class="health-score green-color" @click="openDialog(row)" data-testid="suspend-action-link">暂挂起</span>
           </template>
         </common-table>
       </div>
@@ -106,22 +113,24 @@
       width="500px"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
+      data-testid="suspend-dialog"
     >
-      <div class="equd_body">
+      <div class="equd_body" data-testid="dialog-body">
         <el-form
           ref="ruleFormRef"
           :model="equSubmitInfo"
           :rules="rules"
           class="equd_form"
+          data-testid="suspend-form"
         >
           <span
             >是否要对<span class="bold">{{ clickItem.name }}</span
             >不再告警：</span
           >
           <el-form-item>
-            <el-radio-group v-model="equSubmitInfo.noAlarm" @change="onSubmit">
-              <el-radio value="1">是</el-radio>
-              <el-radio value="0">否</el-radio>
+            <el-radio-group v-model="equSubmitInfo.noAlarm" @change="onSubmit" data-testid="no-alarm-radio-group">
+              <el-radio value="1" data-testid="no-alarm-radio-yes">是</el-radio>
+              <el-radio value="0" data-testid="no-alarm-radio-no">否</el-radio>
             </el-radio-group>
           </el-form-item>
           <el-form-item label="开始时间" prop="startTime">
@@ -130,6 +139,7 @@
               type="datetime"
               placeholder="选择开始时间"
               popper-class="date-picker-popper"
+              data-testid="start-time-picker"
             />
           </el-form-item>
           <el-form-item label="结束时间" prop="endTime">
@@ -138,23 +148,24 @@
               type="datetime"
               placeholder="选择结束时间"
               popper-class="date-picker-popper"
+              data-testid="end-time-picker"
             />
           </el-form-item>
           <el-form-item label="原因分类" prop="reasonCategory">
-            <el-select v-model="equSubmitInfo.reasonCategory" style="width: 220px;">
-              <el-option v-for="item in reasonCategoryList" :key="item.key" :value="item.key" :label="item.value"></el-option>
+            <el-select v-model="equSubmitInfo.reasonCategory" style="width: 220px;" data-testid="reason-category-select">
+              <el-option v-for="item in reasonCategoryList" :key="item.key" :value="item.key" :label="item.value" :data-testid="`reason-category-option-${item.key}`"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="原因描述" prop="reasonDescription" style="padding-left: 10px;">
-            <el-input v-model="equSubmitInfo.reasonDescription" type="textarea" style="width: 220px;"></el-input>
+            <el-input v-model="equSubmitInfo.reasonDescription" type="textarea" style="width: 220px;" data-testid="reason-description-textarea"></el-input>
           </el-form-item>
         </el-form>
       </div>
 
       <template #footer>
-        <span class="dialog-footer ">
-          <el-button type="default" class="cancel-btn-balck-theme" @click="equDialog = false">取消</el-button>
-          <el-button type="default" class="search-btn-balck-theme" @click="equPending(ruleFormRef)">
+        <span class="dialog-footer " data-testid="dialog-footer">
+          <el-button type="default" class="cancel-btn-balck-theme" @click="equDialog = false" data-testid="cancel-button">取消</el-button>
+          <el-button type="default" class="search-btn-balck-theme" @click="equPending(ruleFormRef)" data-testid="confirm-button">
             确认
           </el-button>
         </span>

src/views/closeManage/components/dialog.vue

@@ -4,15 +4,16 @@
       :title="title"
       :width="width"
       @close="closeDialog"
+      data-testid="custom-dialog"
   >
-    <div>
+    <div data-testid="dialog-content">
       <slot name="content"></slot>
       <slot></slot>
     </div>
     <template #footer>
-      <div class="dialog-footer all-select-btn">
-        <el-button type="default" @click="closeDialog" class="search-btn-balck-theme">关闭</el-button>
-        <el-button type="default" v-if="btnGroup.length" v-for="item in btnGroup" class="reset-btn-balck-theme" :key="item.attrKey" @click="handleBtn(item.attrKey)">
+      <div class="dialog-footer all-select-btn" data-testid="dialog-footer">
+        <el-button type="default" @click="closeDialog" class="search-btn-balck-theme" data-testid="close-button">关闭</el-button>
+        <el-button type="default" v-if="btnGroup.length" v-for="item in btnGroup" class="reset-btn-balck-theme" :key="item.attrKey" @click="handleBtn(item.attrKey)" :data-testid="`dialog-button-${item.attrKey}`">
           {{item.label}}
         </el-button>
       </div>

src/views/closeManage/myAgency.vue

 <template>
-  <div class="my-agency all-select-btn">
-    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+  <div class="my-agency all-select-btn" data-testid="my-agency-container">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline" data-testid="my-agency-search-form">
       <el-form-item label="事件名称：">
-        <el-input v-model="formInline.eventName"> </el-input>
+        <el-input v-model="formInline.eventName" data-testid="my-agency-event-name-input"> </el-input>
       </el-form-item>
       <el-form-item label="发生位置：">
-        <el-input v-model="formInline.keyword" placeholder="请输入"></el-input>
+        <el-input v-model="formInline.keyword" placeholder="请输入" data-testid="my-agency-keyword-input"></el-input>
       </el-form-item>
       <el-form-item label="所属工序：">
         <el-select
           v-model="formInline.productionLineId"
           placeholder="请选择"
           style="width: 180px"
+          data-testid="my-agency-production-line-select"
         >
           <el-option
             v-for="(item, index) in basicConfiguration.productLineList"
             :key="item.productionLineId"
             :label="item.productionLineName"
             :value="item.productionLineId"
+            :data-testid="`production-line-option-${item.productionLineId}`"
           />
         </el-select>
       </el-form-item>
@@ -26,13 +28,15 @@
           v-model="formInline.deviceType"
           style="width: 180px"
           placeholder="请选择"
+          data-testid="my-agency-device-type-select"
         >
-          <el-option label="全部" value="" />
+          <el-option label="全部" value="" data-testid="device-type-option-all" />
           <el-option
             v-for="(item, index) in basicConfiguration.deviceList"
             index="item.id"
             :label="item.desc"
             :value="item.code"
+            :data-testid="`device-type-option-${item.code}`"
           >
           </el-option>
         </el-select>
@@ -47,21 +51,23 @@
           format="YYYY-MM-DD HH:mm:ss"
           value-format="YYYY-MM-DD HH:mm:ss"
           popper-class="date-picker-popper"
+          data-testid="my-agency-date-picker"
         />
       </el-form-item>
       <el-form-item>
-        <el-button class="default-btn reset-btn-balck-theme" @click="onReset"
+        <el-button class="default-btn reset-btn-balck-theme" @click="onReset" data-testid="my-agency-reset-button"
           >重置</el-button
         >
         <el-button
           type="default"
           class="default-btn search-btn-balck-theme"
           @click="onSearch"
+          data-testid="my-agency-search-button"
           >查询</el-button
         >
       </el-form-item>
     </el-form>
-    <div class="table-box">
+    <div class="table-box" data-testid="my-agency-table-container">
       <common-table
         ref="pageRef"
         :data="tableData"
@@ -76,6 +82,7 @@
           next: '后一页',
           jumper: '跳至',
         }"
+        data-testid="my-agency-common-table"
       >
         <template #index="{ $index }">
           {{ getIndex($index) }}
@@ -86,15 +93,15 @@
           </span>
         </template>
         <template #operation="{ row }">
-          <span class="view-btn green-color" @click="handleDone(row)">
+          <span class="view-btn green-color" @click="handleDone(row)" data-testid="my-agency-process-button">
             处理
           </span>
           <span class="table-btn">|</span>
-          <span class="view-btn green-color" @click="handleDispatch(row)">
+          <span class="view-btn green-color" @click="handleDispatch(row)" data-testid="my-agency-dispatch-button">
             分派
           </span>
           <span class="table-btn">|</span>
-          <span class="view-btn green-color" @click="changeBag(row)">
+          <span class="view-btn green-color" @click="changeBag(row)" data-testid="my-agency-change-bag-button">
             更换布袋
           </span>
         </template>
@@ -107,17 +114,19 @@
       :btn-group="doneDialog.btnGroup"
       @handleBtn="saveDeal"
       @close:showDialog="doneDialog.show = false"
+      data-testid="done-dialog"
     >
-      <div class="form-box">
-        <el-form ref="form" :model="formModel">
+      <div class="form-box" data-testid="done-dialog-form-box">
+        <el-form ref="form" :model="formModel" data-testid="done-dialog-form">
           <el-row :gutter="24">
             <el-col :span="24">
-              <div class="label-title">闭环控制分派</div>
-              <el-form-item label="已分派人:">
+              <div class="label-title" data-testid="loop-control-dispatch-title">闭环控制分派</div>
+              <el-form-item label="已分派人:" data-testid="assigned-person-form-item">
                 <el-tag
                   v-for="(ele, eIndex) in personTag"
                   :key="ele.name"
                   :type="ele.type"
+                  :data-testid="`assigned-person-tag-${eIndex}`"
                 >
                   {{ ele.name }}
                 </el-tag>
@@ -126,17 +135,17 @@
           </el-row>
           <el-row :gutter="24">
             <el-col :span="24">
-              <div class="label-title">闭环控制信息</div>
-              <div class="alarm-content">
-                <div class="content-item">
+              <div class="label-title" data-testid="loop-control-info-title">闭环控制信息</div>
+              <div class="alarm-content" data-testid="loop-control-info-content">
+                <div class="content-item" data-testid="ticket-number-item">
                   <span class="name">编号:</span>
                   <span class="value">{{ workSheetDetail?.workTicketNo }}</span>
                 </div>
-                <div class="content-item">
+                <div class="content-item" data-testid="create-time-item">
                   <span class="name">创建时间:</span>
                   <span class="value">{{ workSheetDetail?.createTime }}</span>
                 </div>
-                <div class="content-item">
+                <div class="content-item" data-testid="loop-control-status-item">
                   <span class="name">闭环控制状态:</span>
                   <span class="value work-status">{{
                     workSheetDetail?.desc
@@ -147,8 +156,8 @@
           </el-row>
           <el-row :gutter="24" v-if="workSheetDetail?.warnType !== 5">
             <el-col :span="24">
-              <div class="label-title">告警信息</div>
-              <div class="alarm-content">
+              <div class="label-title" data-testid="alarm-info-title">告警信息</div>
+              <div class="alarm-content" data-testid="alarm-info-content">
                 <div class="content-item">
                   <span class="name">所属工序:</span>
                   <span class="value">{{
@@ -282,8 +291,8 @@
           </el-row>
           <el-row :gutter="24" v-if="workSheetDetail?.relationAnalysis">
             <el-col :span="24">
-              <div class="label-title">数据异常定位分析</div>
-              <div class="alarm-content">
+              <div class="label-title" data-testid="data-exception-analysis-title">数据异常定位分析</div>
+              <div class="alarm-content" data-testid="data-exception-analysis-content">
                 <div class="content-item">
                   <span class="name">离线原因:</span>
                   <span class="value">{{
@@ -296,6 +305,7 @@
                     style="margin-left: 80px"
                     class="led-btn"
                     @click="openPage(workSheetDetail)"
+                    data-testid="related-ledger-button"
                     >关联台账</el-button
                   >
                 </div>
@@ -304,8 +314,8 @@
           </el-row>
           <el-row :gutter="24" v-if="workSheetDetail?.warnType === 5">
             <el-col :span="24">
-              <div class="label-title">道路信息</div>
-              <div class="alarm-content">
+              <div class="label-title" data-testid="road-info-title">道路信息</div>
+              <div class="alarm-content" data-testid="road-info-content">
                 <div class="content-item">
                   <span class="name">发生位置:</span>
                   <span class="value">
@@ -399,8 +409,8 @@
 
           <el-row :gutter="24" v-if="workSheetDetail?.alarmImags">
             <el-col>
-              <div class="label-title">告警图片</div>
-              <div class="demo-image__preview">
+              <div class="label-title" data-testid="alarm-images-title">告警图片</div>
+              <div class="demo-image__preview" data-testid="alarm-images-preview">
                 <div
                   class="image-preview"
                   v-for="(item, index) in alarmImg"
@@ -553,20 +563,21 @@
 
           <el-row :gutter="24">
             <el-col :span="24">
-              <div class="label-title">原因分析</div>
+              <div class="label-title" data-testid="reason-analysis-title">原因分析</div>
               <el-input
                 class="input-style"
                 v-model="dialogReason"
                 type="textarea"
                 :rows="3"
                 placeholder="请输入内容"
+                data-testid="reason-analysis-textarea"
               />
             </el-col>
           </el-row>
 
           <el-row :gutter="24">
             <el-col :span="24">
-              <div class="label-title">处理措施</div>
+              <div class="label-title" data-testid="handle-measures-title">处理措施</div>
               <div>
                 <el-input
                   class="input-style"
@@ -574,6 +585,7 @@
                   type="textarea"
                   :rows="3"
                   placeholder="请输入内容"
+                  data-testid="handle-measures-textarea"
                 />
               </div>
             </el-col>
@@ -588,37 +600,42 @@
       :width="assignDialog.width"
       @handleBtn="saveAssign"
       @close:showDialog="assignDialog.show = false"
+      data-testid="assign-dialog"
     >
-      <el-form>
-        <el-form-item label="分派人:">
+      <el-form data-testid="assign-dialog-form">
+        <el-form-item label="分派人:" data-testid="assign-person-form-item">
           <div class="inline-box">
             <el-select
               v-model="handlerPeopleId"
               filterable
               placeholder="请选择分派人"
+              data-testid="assign-person-select"
             >
               <el-option
                 v-for="(item, i) in handlerPeople"
                 :key="i"
                 :label="item.name"
                 :value="item.id"
+                :data-testid="`assign-person-option-${item.id}`"
               ></el-option>
             </el-select>
             <el-button
               type="default"
               class="addBtn search-btn-balck-theme"
               @click="addPerson"
+              data-testid="add-person-button"
               >新增</el-button
             >
           </div>
         </el-form-item>
-        <el-form-item label="已分派人:">
+        <el-form-item label="已分派人:" data-testid="assigned-person-list-form-item">
           <el-tag
             v-for="(ele, eIndex) in personTag"
             :key="ele.name"
             closable
             @close="delPerson(eIndex)"
             :type="ele.type"
+            :data-testid="`assigned-person-list-tag-${eIndex}`"
           >
             {{ ele.name }}
           </el-tag>
@@ -632,30 +649,34 @@
       :width="bagDialog.width"
       @handleBtn="saveBag"
       @close:showDialog="bagDialog.show = false"
+      data-testid="bag-dialog"
     >
-      <el-form>
-        <el-form-item label="第几行：">
+      <el-form data-testid="bag-dialog-form">
+        <el-form-item label="第几行：" data-testid="bag-row-form-item">
           <el-select
             v-model="bagRow"
             placeholder="请选择第几行"
             @change="getCol"
+            data-testid="bag-row-select"
           >
             <el-option
               v-for="item in rowList"
               :key="item"
               :label="item"
               :value="item"
+              :data-testid="`bag-row-option-${item}`"
             >
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="第几列：">
-          <el-select v-model="bagCol" placeholder="请选择第几列">
+        <el-form-item label="第几列：" data-testid="bag-col-form-item">
+          <el-select v-model="bagCol" placeholder="请选择第几列" data-testid="bag-col-select">
             <el-option
               v-for="item in colList"
               :key="item"
               :label="item"
               :value="item"
+              :data-testid="`bag-col-option-${item}`"
             >
             </el-option>
           </el-select>

src/views/closeManage/myDone.vue

 <template>
-  <div class="my-agency all-select-btn">
-    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+  <div class="my-agency all-select-btn" data-testid="my-done-container">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline" data-testid="search-form">
       <el-form-item label="事件名称：">
-        <el-input v-model="formInline.eventName"> </el-input>
+        <el-input v-model="formInline.eventName" data-testid="event-name-input"> </el-input>
       </el-form-item>
       <el-form-item label="发生位置：">
-        <el-input v-model="formInline.keyword" placeholder="请输入"></el-input>
+        <el-input v-model="formInline.keyword" placeholder="请输入" data-testid="location-input"></el-input>
       </el-form-item>
       <el-form-item label="所属工序：">
         <el-select
           v-model="formInline.productionLineId"
           placeholder="请选择"
           style="width: 180px"
+          data-testid="production-line-select"
         >
           <el-option
             v-for="(item, index) in basicConfiguration.productLineList"
             :key="item.productionLineId"
             :label="item.productionLineName"
             :value="item.productionLineId"
+            :data-testid="`production-line-option-${item.productionLineId}`"
           />
         </el-select>
       </el-form-item>
@@ -26,13 +28,15 @@
           v-model="formInline.deviceType"
           style="width: 180px"
           placeholder="请选择"
+          data-testid="device-type-select"
         >
-          <el-option label="全部" value="" />
+          <el-option label="全部" value="" data-testid="device-type-option-all" />
           <el-option
             v-for="(item, index) in basicConfiguration.deviceList"
             :key="item.code"
             :label="item.desc"
             :value="item.code"
+            :data-testid="`device-type-option-${item.code}`"
           >
           </el-option>
         </el-select>
@@ -47,21 +51,23 @@
           format="YYYY-MM-DD HH:mm:ss"
           value-format="YYYY-MM-DD HH:mm:ss"
           popper-class="date-picker-popper"
+          data-testid="create-time-picker"
         />
       </el-form-item>
       <el-form-item>
-        <el-button type="default" class="reset-btn-balck-theme" @click="onReset"
+        <el-button type="default" class="reset-btn-balck-theme" @click="onReset" data-testid="reset-button"
           >重置</el-button
         >
         <el-button
           type="default"
           class="search-btn-balck-theme"
           @click="onSearch"
+          data-testid="search-button"
           >查询</el-button
         >
       </el-form-item>
     </el-form>
-    <div class="table-box">
+    <div class="table-box" data-testid="table-container">
       <common-table
         ref="pageRef"
         :data="tableData"
@@ -76,6 +82,7 @@
           next: '后一页',
           jumper: '跳至',
         }"
+        data-testid="done-table"
       >
         <template #index="{ $index }">
           {{ getIndex($index) }}
@@ -86,7 +93,7 @@
           </span>
         </template>
         <template #operation="{ row }">
-          <span class="view-btn green-color" @click="handleView(row)">
+          <span class="view-btn green-color" @click="handleView(row)" data-testid="view-action-link">
             查看
           </span>
           <!--          <span  class="table-btn">|</span>
@@ -105,22 +112,23 @@
       :title="viewDialog.title"
       :width="viewDialog.width"
       @close:showDialog="viewDialog.show = false"
+      data-testid="view-dialog"
     >
-      <div class="form-box">
-        <el-form ref="form" :model="formModel">
+      <div class="form-box" data-testid="dialog-form-box">
+        <el-form ref="form" :model="formModel" data-testid="view-form">
           <el-row :gutter="24">
             <el-col :span="24">
-              <div class="label-title">闭环控制信息</div>
-              <div class="alarm-content">
-                <div class="content-item">
+              <div class="label-title" data-testid="loop-control-info-title">闭环控制信息</div>
+              <div class="alarm-content" data-testid="loop-control-info-content">
+                <div class="content-item" data-testid="ticket-number-item">
                   <span class="name">编号：</span>
                   <span class="value">{{ workSheetDetail.workTicketNo }}</span>
                 </div>
-                <div class="content-item">
+                <div class="content-item" data-testid="create-time-item">
                   <span class="name">创建时间：</span>
                   <span class="value">{{ workSheetDetail.createTime }}</span>
                 </div>
-                <div class="content-item">
+                <div class="content-item" data-testid="loop-control-status-item">
                   <span class="name">闭环控制状态：</span>
                   <span class="value work-status">{{
                     workSheetDetail.desc
@@ -132,8 +140,8 @@
 
           <el-row :gutter="24" v-if="workSheetDetail.warnType !== 5">
             <el-col :span="24">
-              <div class="label-title">告警信息</div>
-              <div class="alarm-content">
+              <div class="label-title" data-testid="alarm-info-title">告警信息</div>
+              <div class="alarm-content" data-testid="alarm-info-content">
                 <div class="content-item">
                   <span class="name">所属工序：</span>
                   <span class="value">{{
@@ -259,8 +267,8 @@
 
           <el-row :gutter="24" v-if="workSheetDetail?.warnType === 5">
             <el-col :span="24">
-              <div class="label-title">道路信息</div>
-              <div class="alarm-content">
+              <div class="label-title" data-testid="road-info-title">道路信息</div>
+              <div class="alarm-content" data-testid="road-info-content">
                 <div class="content-item">
                   <span class="name">发生位置:</span>
                   <span class="value">
@@ -362,8 +370,8 @@
             "
           >
             <el-col :span="24">
-              <div class="label-title">问题描述</div>
-              <div class="input-style-text">
+              <div class="label-title" data-testid="problem-description-title">问题描述</div>
+              <div class="input-style-text" data-testid="problem-description-content">
                 {{ workSheetDetail.forwards[0].forward }}
               </div>
               <div
@@ -379,18 +387,20 @@
 
           <el-row :gutter="24" v-if="workSheetDetail?.alarmImags">
             <el-col>
-              <div class="label-title">告警图片</div>
-              <div class="demo-image__preview">
+              <div class="label-title" data-testid="alarm-images-title">告警图片</div>
+              <div class="demo-image__preview" data-testid="alarm-images-preview">
                 <div
                   class="image-preview"
                   v-for="(item, index) in alarmImg"
                   :key="index"
+                  :data-testid="`alarm-image-${index}`"
                 >
                   <el-image
                     style="width: 100px; height: 100px"
                     :lazy="true"
                     :src="item"
                     :preview-src-list="alarmImg"
+                    :data-testid="`alarm-image-el-${index}`"
                   ></el-image>
                 </div>
               </div>
@@ -406,8 +416,8 @@
             "
           >
             <el-col :span="24">
-              <div class="label-title">排放提示</div>
-              <div class="tips-content">
+              <div class="label-title" data-testid="emission-tips-title">排放提示</div>
+              <div class="tips-content" data-testid="emission-tips-content">
                 <div class="content-item">
                   <span class="name">
                     后半小时内平均排放放浓度不得超
@@ -428,18 +438,20 @@
 
           <el-row :gutter="24" v-if="srcList.length">
             <el-col :span="24">
-              <div class="label-title">告警图片</div>
-              <div class="demo-image__preview">
+              <div class="label-title" data-testid="scene-images-title">告警图片</div>
+              <div class="demo-image__preview" data-testid="scene-images-preview">
                 <div
                   class="image-preview"
                   v-for="(item, index) in srcList"
                   :key="index"
+                  :data-testid="`scene-image-${index}`"
                 >
                   <el-image
                     style="width: 100px; height: 100px"
                     :lazy="true"
                     :src="item"
                     :preview-src-list="srcList"
+                    :data-testid="`scene-image-el-${index}`"
                   ></el-image>
                 </div>
               </div>
@@ -451,7 +463,7 @@
             v-if="functionAuthority && functionAuthority.close_loop_upgrade"
           >
             <el-col :span="24" class="deal-line-wrap">
-              <div class="label-title">落实管理制度</div>
+              <div class="label-title" data-testid="management-system-title">落实管理制度</div>
               <div
                 class="processing-records"
                 :class="[
@@ -463,11 +475,13 @@
                   workSheetDetail.levelManageList &&
                   workSheetDetail.levelManageList.length > 0
                 "
+                data-testid="management-system-records"
               >
                 <div
                   class="processing-records-item"
                   v-for="(item, index) in workSheetDetail.levelManageList"
                   :key="index"
+                  :data-testid="`management-record-${index}`"
                 >
                   <div class="steps-line">
                     <div class="header" v-show="index !== 0"></div>
@@ -499,8 +513,8 @@
 
           <el-row :gutter="24">
             <el-col :span="24">
-              <div class="label-title">原因分析</div>
-              <div class="input-style">
+              <div class="label-title" data-testid="reason-analysis-title">原因分析</div>
+              <div class="input-style" data-testid="reason-analysis-content">
                 {{ workSheetDetail.reason || "暂无信息" }}
               </div>
             </el-col>
@@ -508,18 +522,20 @@
 
           <el-row :gutter="24" v-if="imgUrlList.length">
             <el-col :span="24">
-              <div class="label-title">现场图片</div>
-              <div class="demo-image__preview">
+              <div class="label-title" data-testid="field-images-title">现场图片</div>
+              <div class="demo-image__preview" data-testid="field-images-preview">
                 <div
                   class="image-preview"
                   v-for="(item, index) in imgUrlList"
                   :key="index"
+                  :data-testid="`field-image-${index}`"
                 >
                   <el-image
                     style="width: 100px; height: 100px"
                     :lazy="true"
                     :src="item"
                     :preview-src-list="imgUrlList"
+                    :data-testid="`field-image-el-${index}`"
                   ></el-image>
                 </div>
               </div>
@@ -536,8 +552,8 @@
 
           <el-row :gutter="24">
             <el-col :span="24">
-              <div class="label-title">处理措施</div>
-              <div class="input-style">
+              <div class="label-title" data-testid="handle-measures-title">处理措施</div>
+              <div class="input-style" data-testid="handle-measures-content">
                 {{ workSheetDetail.measure || "暂无信息" }}
               </div>
             </el-col>
@@ -548,10 +564,11 @@
             v-if="workSheetDetail.warnType && workSheetDetail.warnType === 5"
           >
             <el-col :span="24">
-              <div class="label-title">改善情况</div>
+              <div class="label-title" data-testid="improvement-situation-title">改善情况</div>
               <div
                 class="improve-situation"
                 v-if="workSheetDetail.analyzeResult"
+                data-testid="improvement-situation-content"
               >
                 <div class="improve-situation-item">
                   <span>改善前</span>
@@ -615,8 +632,8 @@
             "
           >
             <el-col :span="24">
-              <div class="label-title">改善情况</div>
-              <div class="improve-situation">
+              <div class="label-title" data-testid="improvement-comparison-title">改善情况</div>
+              <div class="improve-situation" data-testid="improvement-comparison-content">
                 <div class="improve-situation-item">
                   <span>告警值</span>
                   <span class="value">
@@ -644,17 +661,19 @@
             v-if="workSheetDetail.forwards && workSheetDetail.forwards.length"
           >
             <el-col :span="24" class="deal-line-wrap">
-              <div class="label-title">处理记录</div>
+              <div class="label-title" data-testid="processing-records-title">处理记录</div>
               <div
                 class="processing-records"
                 :class="[
                   workSheetDetail.forwards.length == 1 ? 'one-record' : '',
                 ]"
+                data-testid="processing-records-content"
               >
                 <div
                   class="processing-records-item"
                   v-for="(item, index) in workSheetDetail.forwards"
                   :key="index"
+                  :data-testid="`processing-record-${index}`"
                 >
                   <div class="steps-line">
                     <div class="header" v-show="index !== 0"></div>
@@ -700,15 +719,17 @@
       :width="rejectDialog.width"
       @handleBtn="saveReject"
       @close:showDialog="rejectDialog.show = false"
+      data-testid="reject-dialog"
     >
-      <el-form>
+      <el-form data-testid="reject-form">
         <el-form-item label="驳回原因">
-          <el-select v-model="rejectType">
+          <el-select v-model="rejectType" data-testid="reject-type-select">
             <el-option
               v-for="(item, i) in reasonList"
               :key="i"
               :label="item.description"
               :value="item.rejectType"
+              :data-testid="`reject-type-option-${item.rejectType}`"
             >
             </el-option>
           </el-select>
@@ -720,6 +741,7 @@
               v-model="rejectReason"
               :autosize="{ minRows: 2, maxRows: 12 }"
               placeholder="请输入内容"
+              data-testid="reject-reason-textarea"
             >
             </el-input>
           </el-col>
@@ -733,30 +755,34 @@
       :width="bagDialog.width"
       @handleBtn="saveBag"
       @close:showDialog="bagDialog.show = false"
+      data-testid="bag-dialog"
     >
-      <el-form>
+      <el-form data-testid="bag-form">
         <el-form-item label="第几行：">
           <el-select
             v-model="bagRow"
             placeholder="请选择第几行"
             @change="getCol"
+            data-testid="bag-row-select"
           >
             <el-option
               v-for="item in rowList"
               :key="item"
               :label="item"
               :value="item"
+              :data-testid="`bag-row-option-${item}`"
             >
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="第几列：">
-          <el-select v-model="bagCol" placeholder="请选择第几列">
+          <el-select v-model="bagCol" placeholder="请选择第几列" data-testid="bag-col-select">
             <el-option
               v-for="item in colList"
               :key="item"
               :label="item"
               :value="item"
+              :data-testid="`bag-col-option-${item}`"
             >
             </el-option>
           </el-select>

src/views/collectorList/collectorList.vue

 <template>
-  <div class="page-container collectorList all-select-btn">
-    <div class="content-box">
-      <div class="search">
+  <div class="page-container collectorList all-select-btn" data-testid="collector-list-container">
+    <div class="content-box" data-testid="collector-list-content">
+      <div class="search" data-testid="collector-list-search-form">
         <el-form :inline="true" :model="formInline" class="demo-form-inline">
           <el-form-item label="仓室">
             <el-input
@@ -9,6 +9,7 @@
               placeholder="请输入仓室名称"
               style="width: 180px"
               clearable
+              data-testid="collector-compart-input"
             />
           </el-form-item>
           <el-form-item label="除尘器名称">
@@ -17,6 +18,7 @@
               placeholder="请输入除尘器名称"
               style="width: 180px"
               clearable
+              data-testid="collector-duster-name-input"
             />
           </el-form-item>
           <el-form-item label="更换时间">
@@ -28,13 +30,14 @@
               end-placeholder="结束时间"
               popper-class="date-picker-popper"
               :teleported="false"
+              data-testid="collector-date-picker"
             />
           </el-form-item>
           <el-form-item>
-            <el-button type="default" class="reset-btn-balck-theme" @click="onReset"
+            <el-button type="default" class="reset-btn-balck-theme" @click="onReset" data-testid="collector-reset-button"
               >重置</el-button
             >
-            <el-button type="default" class="search-btn-balck-theme" @click="onSubmit"
+            <el-button type="default" class="search-btn-balck-theme" @click="onSubmit" data-testid="collector-search-button"
               >查询</el-button
             >
             <el-button
@@ -42,12 +45,13 @@
               style="width: 140px"
               class="export-btn-balck-theme"
               @click="openDialog()"
+              data-testid="collector-analysis-button"
               >更换周期分析</el-button
             >
           </el-form-item>
         </el-form>
       </div>
-      <div class="table-box">
+      <div class="table-box" data-testid="collector-table-container">
         <common-table
           ref="pageRef"
           :data="tableData.list"
@@ -62,12 +66,13 @@
             next: '后一页',
             jumper: '跳至',
           }"
+          data-testid="collector-common-table"
         >
           <template #index="{ $index }">
             {{ getIndex($index) }}
           </template>
           <template #dusterName="{ row }">
-            <span class="health-score green-color" @dblclick="openDialog(row.dusterName)">{{
+            <span class="health-score green-color" @dblclick="openDialog(row.dusterName)" data-testid="collector-duster-name-link">{{
               row.dusterName
             }}</span>
           </template>
@@ -87,23 +92,26 @@
       width="1000px"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
+      data-testid="dust-line-dialog"
     >
-      <div class="input-group">
+      <div class="input-group" data-testid="dust-selector-group">
         <span>除尘器名称：</span>
         <el-select
           v-model="selectDustNo"
           @change="changeDust"
           style="width: 120px"
+          data-testid="dust-name-select"
         >
           <el-option
             v-for="i in dustList.list"
             :key="i"
             :label="`${i.dusterName}`"
             :value="i.dusterNo"
+            :data-testid="`dust-option-${i.dusterNo}`"
           />
         </el-select>
       </div>
-      <div class="echartBox">
+      <div class="echartBox" data-testid="chart-container">
         <chartLine :dustLineInfo="dustLineInfo.list"></chartLine>
       </div>
       <!-- <template #footer>

src/views/dashboard/components/chart-line.vue

 <template>
-  <div ref="chartRef" class="chart-line"></div>
+  <div ref="chartRef" class="chart-line" data-testid="chart-line-container"></div>
 </template>
 
 <script setup>

src/views/dashboard/components/map-svg.vue

 <template>
-  <div class="svg-box">
-    <div class="svg-main">
+  <div class="svg-box" data-testid="map-svg-container">
+    <div class="svg-main" data-testid="svg-main">
       <img src="@/assets/map.png" alt="" />
-      <div class="spot-box">
+      <div class="spot-box" data-testid="spot-box">
         <div
           v-for="(spot, index) in spots"
           :key="index"
@@ -15,11 +15,12 @@
             left: spot.x + '%',
             top: spot.y + '%',
           }"
+          :data-testid="`map-spot-${index}`"
         >
-          <div class="pulse"></div>
+          <div class="pulse" data-testid="spot-pulse"></div>
           <!-- 连接线和详情窗 -->
           <transition name="line">
-            <div class="connector-line" v-if="activeSpot === index"></div>
+            <div class="connector-line" v-if="activeSpot === index" data-testid="connector-line"></div>
           </transition>
           <transition
             name="detail"
@@ -30,10 +31,11 @@
             <div
               class="detail-window"
               v-if="activeSpot === index && showDetail"
+              data-testid="detail-window"
             >
-              <div class="detail-title">{{ spot.name }}</div>
-              <div class="detail-content">
-                <div class="detail-item">
+              <div class="detail-title" data-testid="detail-title">{{ spot.name }}</div>
+              <div class="detail-content" data-testid="detail-content">
+                <div class="detail-item" data-testid="detail-status-item">
                   <span class="label">状态：</span>
                   <span class="value" :class="`text-status-${spot.status}`">{{
                     getStatusText(spot.status)
@@ -43,9 +45,9 @@
                                 <span class="label">数值：</span>
                                 <span class="value">{{ spot.value }}</span>
                             </div> -->
-                <div class="detail-item">
+                <div class="detail-item" data-testid="detail-description-item">
                   <span class="label">描述：</span>
-                  <div class="value">
+                  <div class="value" data-testid="description-list">
                     <span class="value-item" v-for="(item, index) in spot.description" :key="index">{{ item }}</span>
                    <span class="value-item" v-if="spot.description.length === 0">暂无</span>
                   </div>

src/views/dashboard/components/msg-item.vue

@@ -3,15 +3,17 @@
     class="message-list"
     @mouseenter="pauseScroll"
     @mouseleave="resumeScroll"
+    data-testid="message-list-container"
   >
-    <div class="message-wrapper" ref="messageWrapper">
+    <div class="message-wrapper" ref="messageWrapper" data-testid="message-wrapper">
       <div
         class="message-item"
         v-for="(message, index) in extendedList"
         :key="index"
+        :data-testid="`message-item-${index}`"
       >
         <span class="time">{{ message.date }}</span>
-        <div class="content">
+        <div class="content" data-testid="message-content">
           <span class="title">{{ message.dusterName }}</span
           >{{ message.message }}
         </div>

src/views/dashboard/index.vue

 <template>
-  <div class="dashboard-container">
-    <div class="header">
-      <div class="msg-box">
+  <div class="dashboard-container" data-testid="dashboard-container">
+    <div class="header" data-testid="dashboard-header">
+      <div class="msg-box" data-testid="dashboard-msg-box">
         <div class="title">AI智能监测</div>
-        <msg-item :msgList="msgList"></msg-item>
+        <msg-item :msgList="msgList" data-testid="dashboard-msg-item"></msg-item>
       </div>
-      <div class="indicators-box">
+      <div class="indicators-box" data-testid="dashboard-indicators-box">
         <div class="title">综合健康度</div>
-        <div class="indicators-num" :style="{ color: customColorMethod(average) }">{{ average }}%</div>
+        <div class="indicators-num" :style="{ color: customColorMethod(average) }" data-testid="dashboard-health-score">{{ average }}%</div>
         <div>
           <div class="indicators-item">布袋健康度</div>
-          <el-progress :percentage="bag" :color="customColorMethod" />
+          <el-progress :percentage="bag" :color="customColorMethod" data-testid="dashboard-bag-progress" />
         </div>
         <div>
           <div class="indicators-item">脉冲阀健康度</div>
-          <el-progress :percentage="pulseValve" :color="customColorMethod" />
+          <el-progress :percentage="pulseValve" :color="customColorMethod" data-testid="dashboard-pulse-valve-progress" />
         </div>
         <div>
           <div class="indicators-item">提升阀健康度</div>
-          <el-progress :percentage="poppetValve" :color="customColorMethod" />
+          <el-progress :percentage="poppetValve" :color="customColorMethod" data-testid="dashboard-poppet-valve-progress" />
         </div>
       </div>
-      <div class="line-box">
+      <div class="line-box" data-testid="dashboard-chart-box">
         <div class="title">健康度指数</div>
-        <chart-line :chartData="chartData"></chart-line>
+        <chart-line :chartData="chartData" data-testid="dashboard-chart-line"></chart-line>
       </div>
     </div>
 
-    <div class="map-box">
-      <map-svg :mapList="mapList"></map-svg>
+    <div class="map-box" data-testid="dashboard-map-box">
+      <map-svg :mapList="mapList" data-testid="dashboard-map-svg"></map-svg>
     </div>
   </div>
 </template>

src/views/dustMonitoring/bag-monitoring.vue

 <template>
-  <div class="page-container bag-monitoring-container">
-    <div class="header">
-      <div class="select-container">
+  <div class="page-container bag-monitoring-container" data-testid="bag-monitoring-container">
+    <div class="header" data-testid="bag-monitoring-header">
+      <div class="select-container" data-testid="device-select-container">
         <span class="select-label">检测仪器</span>
-        <el-select v-model="selectedDevice" placeholder="1#布袋检测仪" @change="handleDeviceChange">
+        <el-select v-model="selectedDevice" placeholder="1#布袋检测仪" @change="handleDeviceChange" data-testid="device-select">
           <el-option
             v-for="item in deviceList"
             :key="item.deviceNo"
             :label="item.deviceName"
             :value="item.deviceNo"
+            :data-testid="`device-option-${item.deviceNo}`"
           ></el-option>
         </el-select>
       </div>
-      <div class="title">BME布袋监测 - {{ dusterName }}</div>
+      <div class="title" data-testid="monitoring-title">BME布袋监测 - {{ dusterName }}</div>
     </div>
 
-    <div class="chart-container">
-      <div class="chart-wrapper" ref="chartRef"></div>
-      <div class="chart-wrapper no-data" v-if="chartData.xData.length === 0">
-        <div class="no-data-text">暂无数据</div>
+    <div class="chart-container" data-testid="chart-container">
+      <div class="chart-wrapper" ref="chartRef" data-testid="chart-wrapper"></div>
+      <div class="chart-wrapper no-data" v-if="chartData.xData.length === 0" data-testid="no-data-wrapper">
+        <div class="no-data-text" data-testid="no-data-text">暂无数据</div>
       </div>
     </div>
 
-    <div class="data-panel" :class="{ collapsed: !isPanelOpen }">
+    <div class="data-panel" :class="{ collapsed: !isPanelOpen }" data-testid="data-panel">
       <div
         class="panel-toggle"
         :class="{
@@ -30,33 +31,34 @@
           'expanded-icon': isPanelOpen,
         }"
         @click="togglePanel"
+        data-testid="panel-toggle"
       >
         <el-icon v-if="isPanelOpen"><ArrowRightBold /></el-icon>
         <el-icon v-if="!isPanelOpen"><ArrowLeftBold /></el-icon>
       </div>
-      <div class="data-box">
-        <div class="data-item">
+      <div class="data-box" data-testid="data-box">
+        <div class="data-item" data-testid="data-item-1">
           <div>时间: {{ currentData.time }}</div>
           <div>仓室: {{ currentData.compartNo }}</div>
           <div>反吹: {{ currentData.blowBack }}</div>
         </div>
 
-        <div class="data-item">
+        <div class="data-item" data-testid="data-item-2">
           <div>DI3: {{ currentData.di3 }}</div>
           <div>排: {{ currentData.row }}</div>
           <div>实时值: {{ currentData.realData }}</div>
         </div>
-        <div class="data-item">
+        <div class="data-item" data-testid="data-item-3">
           <div>基线值: {{ currentData.baseline }}</div>
           <div>Delay: {{ currentData.delay }}</div>
           <div>totaltime: {{ currentData.totalTime }}</div>
         </div>
-        <div class="data-item">
+        <div class="data-item" data-testid="data-item-4">
           <div>next:{{ currentData.next }}</div>
           <div>valve:{{ currentData.valveNo }}</div>
           <div>DI_TIME={{ currentData.diTime }}</div>
         </div>
-        <div class="data-item">
+        <div class="data-item" data-testid="data-item-5">
           <div>peak={{ currentData.peak }}</div>
         </div>
       </div>
@@ -66,76 +68,78 @@
         </div> -->
     </div>
 
-    <div class="time-controls">
-        <div class="time-desc">
+    <div class="time-controls" data-testid="time-controls">
+        <div class="time-desc" data-testid="time-desc">
           <span class="icon"></span>
           <span class="time-desc-text">当前实时信号：</span>
           <span class="time-desc-value">{{ currentData.compartNo }}仓 / {{ currentData.row }}排</span>
         </div>
-        <div>
-          <el-button @click="navigateBackward">
+        <div data-testid="navigation-controls">
+          <el-button @click="navigateBackward" data-testid="navigate-backward-button">
             <el-icon><ArrowLeftBold />向前</el-icon>
           </el-button>
-          <el-button @click="navigateForward">
+          <el-button @click="navigateForward" data-testid="navigate-forward-button">
             <el-icon><ArrowRightBold />向后</el-icon>
           </el-button>
-          <span class="time-label">间隔</span>
-          <el-input v-model="timeInterval" class="time-input"></el-input>
-          <span class="time-unit">分钟</span>
+          <span class="time-label" data-testid="time-label">间隔</span>
+          <el-input v-model="timeInterval" class="time-input" data-testid="time-interval-input"></el-input>
+          <span class="time-unit" data-testid="time-unit">分钟</span>
 
-          <el-button @click="reset">重置</el-button>
+          <el-button @click="reset" data-testid="reset-button">重置</el-button>
         </div>
       </div>
-    <div class="data-table">
+    <div class="data-table" data-testid="data-table">
 
 
-      <table>
-        <thead>
-          <tr>
-            <th>名称</th>
-            <th v-for="(value, index) in tableData" :key="index">
+      <table data-testid="monitoring-table">
+        <thead data-testid="table-head">
+          <tr data-testid="table-header-row">
+            <th data-testid="table-header-name">名称</th>
+            <th v-for="(value, index) in tableData" :key="index" :data-testid="`table-header-${index}`">
               {{ value.compartName }}
             </th>
           </tr>
         </thead>
-        <tbody>
-          <tr>
-            <td>峰值{{ currentData.row }}排_R</td>
+        <tbody data-testid="table-body">
+          <tr data-testid="peak-value-r-row">
+            <td data-testid="peak-value-r-label">峰值{{ currentData.row }}排_R</td>
             <td
               v-for="(value, index) in tableData"
               :key="'r' + index"
               :class="{
                 'online-style': value.compartNo === currentData.compartNo,
               }"
+              :data-testid="`peak-value-r-${index}`"
             >
               {{ value.peakValueR }}
             </td>
           </tr>
-          <tr>
-            <td>峰值_H</td>
-            <td v-for="(value, index) in tableData" :key="'h' + index">
+          <tr data-testid="peak-value-h-row">
+            <td data-testid="peak-value-h-label">峰值_H</td>
+            <td v-for="(value, index) in tableData" :key="'h' + index" :data-testid="`peak-value-h-${index}`">
               {{ value.peakValueH }}
             </td>
           </tr>
-          <tr>
-            <td>状态</td>
+          <tr data-testid="status-row">
+            <td data-testid="status-label">状态</td>
             <td
               v-for="(value, index) in tableData"
               :key="'s' + index"
               :class="{ error: value.status === 1 }"
+              :data-testid="`status-${index}`"
             >
               {{ value.status === 1 ? "故障" : "正常" }}
             </td>
           </tr>
-          <tr>
-            <td>反吹中</td>
-            <td v-for="(value, index) in tableData" :key="'b' + index">
+          <tr data-testid="blow-back-row">
+            <td data-testid="blow-back-label">反吹中</td>
+            <td v-for="(value, index) in tableData" :key="'b' + index" :data-testid="`blow-back-${index}`">
               {{ value.blowBack }}
             </td>
           </tr>
-          <tr>
-            <td>谷值</td>
-            <td v-for="(value, index) in tableData" :key="'v' + index">
+          <tr data-testid="valley-value-row">
+            <td data-testid="valley-value-label">谷值</td>
+            <td v-for="(value, index) in tableData" :key="'v' + index" :data-testid="`valley-value-${index}`">
               {{ value.valleyValue}}
             </td>
           </tr>

src/views/dustMonitoring/components/gsapNumber.vue

 <template>
-    <div class="gsap-number-container">
-      <div :class="['value', colorClass]" ref="numberElement">{{ isStringMode ? stringValue : displayValue }}</div>
+    <div class="gsap-number-container" data-testid="gsap-number-container">
+      <div :class="['value', colorClass]" ref="numberElement" data-testid="number-value">{{ isStringMode ? stringValue : displayValue }}</div>
     </div>
   </template>
   

src/views/dustMonitoring/components/healthyProgress.vue

 <template>
   <!-- 方形进度条 -->
-  <div class="healthy-progress">
+  <div class="healthy-progress" data-testid="healthy-progress-container">
     <div
       class="h-8 rounded overflow-hidden border healthy-progress-bar"
       :class="borderColor"
+      data-testid="healthy-progress-bar"
     >
       <div
         id="square-progress-bar"
         class="healthy-progress-bar h-full transition-all duration-500 ease-out bg-gradient-to-r from-secondary to-green-400 diagonal-pattern-animation"
         :class="diagonalPatternColor"
+        data-testid="square-progress-bar"
       ></div>
-      <div class="justify-between items-center mb-2 healthy-text-position">
+      <div class="justify-between items-center mb-2 healthy-text-position" data-testid="healthy-text-position">
         <span class="font-semibold">健康度:</span>
         <span id="square-progress-value" class="text-lg font-bold"> 45%</span>
       </div>

src/views/dustMonitoring/components/warn.vue

 <template>
-  <div class="title layout1">
+  <div class="title layout1" data-testid="warn-title-container">
     <span class="warn-title">{{ title }}：</span>
     <span class="jump-icon" @click="toDetail">>></span>
   </div>
-  <div class="content">
-    <div class="item" v-for="item in listInfo" :key="item">
+  <div class="content" data-testid="warn-content-container">
+    <div class="item" v-for="item in listInfo" :key="item" data-testid="warn-item">
       <span class="msg-icon"></span>
       {{ item }}
     </div>

src/views/dustMonitoring/index.vue

 <template>
-  <div class="dust-box" ref="dustBox">
-    <div class="top-box">
-      <el-form :model="form" label-width="auto" :inline="true" class="demo-form-inline">
+  <div class="dust-box" data-testid="dust-monitoring-container">
+    <div class="top-box" data-testid="dust-monitoring-filters">
+      <el-form
+        :model="form"
+        label-width="auto"
+        :inline="true"
+        class="demo-form-inline"
+      >
         <el-form-item label="除尘器名称">
-          <el-select v-model="form.dusterNo" placeholder="请选择除尘器" style="width: 240px" filterable>
-            <el-option v-for="item in dusterList" :key="item.dusterNo" :label="item.dusterName"
-              :value="item.dusterNo"></el-option>
+          <el-select
+            v-model="form.dusterNo"
+            placeholder="请选择除尘器"
+            style="width: 240px"
+            filterable
+            data-testid="dust-monitoring-duster-select"
+          >
+            <el-option
+              v-for="item in dusterList"
+              :key="item.dusterNo"
+              :label="item.dusterName"
+              :value="item.dusterNo"
+              :data-testid="`duster-option-${item.dusterNo}`"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="分析时间">
-          <el-date-picker v-model="form.dateValue" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
-            style="width: 450px" popper-class="date-picker-popper" @calendar-change="calendarChange"
-            @visible-change="visibleChange" :disabled-date="disabledFn" />
+          <el-date-picker
+            v-model="form.dateValue"
+            type="datetimerange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            style="width: 450px"
+            popper-class="date-picker-popper"
+            @calendar-change="calendarChange"
+            @visible-change="visibleChange"
+            :disabled-date="disabledFn"
+            data-testid="dust-monitoring-date-picker"
+          />
         </el-form-item>
       </el-form>
     </div>
-    <div class="layout1">
-      <div class="left-box">
-        <div class="part1 layout3">
-          <div class="chart-box" v-for="(item, index) in chartData" :key="item">
-            <div :id="'chart' + index" class="chart-item"></div>
+    <div class="layout1" data-testid="dust-monitoring-main-content">
+      <div class="left-box" data-testid="dust-monitoring-charts-section">
+        <div class="part1 layout3" data-testid="dust-monitoring-charts-container">
+          <div class="chart-box" v-for="(item, index) in chartData" :key="item" :data-testid="`dust-monitoring-chart-${index}`">
+            <div :id="'chart' + index" class="chart-item" :data-testid="`chart-item-${index}`"></div>
           </div>
         </div>
-        <div class="warn-info">
-          <warnCom title="告警" :listInfo="warnInfoList" @jumpPage="toWarnDetail"></warnCom>
+        <div class="warn-info" data-testid="dust-monitoring-warnings">
+          <warnCom
+            title="告警"
+            :listInfo="warnInfoList"
+            @jumpPage="toWarnDetail"
+          ></warnCom>
         </div>
       </div>
-      <div class="right-box">
-        <div class="part1">
-          <div class="battery">
+      <div class="right-box" data-testid="dust-monitoring-info-section">
+        <div class="part1" data-testid="dust-monitoring-health-section">
+          <div class="battery" data-testid="dust-monitoring-health-indicator">
             <healthyCom :progress="healthPercent"></healthyCom>
           </div>
         </div>
-        <div class="part2">
-          <div class="dust-title">{{ dusterName }}</div>
-          <div class="dust-info">
-            <div class="info-item" v-for="item in dustInfo" :key="item.label">
+        <div class="part2" data-testid="dust-monitoring-details-section">
+          <div class="dust-title" data-testid="dust-monitoring-title">{{ dusterName }}</div>
+          <div class="dust-info" data-testid="dust-monitoring-info-grid">
+            <div class="info-item" v-for="item in dustInfo" :key="item.label" data-testid="dust-info-item">
               <span class="label">{{ item.label }}</span>
               <span class="value">
                 <gsapNumber :value="item.value" :animationType="'count'" :animationInterval="10000" />
@@ -44,18 +73,18 @@
             </div>
             <div></div>
           </div>
-          <div class="indicator-box">
-            <div class="indicator-item" id="indicatorOne"></div>
-            <div class="indicator-item" id="indicatorTwo"></div>
+          <div class="indicator-box" data-testid="dust-monitoring-gauges">
+            <div class="indicator-item" id="indicatorOne" data-testid="indicator-one"></div>
+            <div class="indicator-item" id="indicatorTwo" data-testid="indicator-two"></div>
           </div>
-          <div class="position-info">
-            <div class="left" v-if="detailObj.compartHealthList.length > 0">
-              <div class="part" v-for="(list, index) in detailObj.compartHealthList" :key="index">
+          <div class="position-info" data-testid="dust-monitoring-status-matrix">
+            <div class="left" v-if="detailObj.compartHealthList.length > 0" data-testid="compartment-health-matrix">
+              <div class="part" v-for="(list, index) in detailObj.compartHealthList" :key="index" data-testid="compartment-row">
                 <div class="point" :class="{
                   'status-normal': item.healthStatus === 1,
                   'status-error': item.healthStatus === 2,
                   'status-warning': item.healthStatus === 3,
-                }" v-for="item in detailObj.compartHealthList[index]" :key="item" @click="handleStatusDotClick()">
+                }" v-for="item in detailObj.compartHealthList[index]" :key="item" @click="handleStatusDotClick()" data-testid="compartment-status-dot">
                 </div>
               </div>
             </div>
@@ -68,23 +97,27 @@
               </div>
             </div> -->
           </div>
-          <div class="other-info">
-            <div class="other-info-item">
+          <div class="other-info" data-testid="dust-monitoring-compartment-info">
+            <div class="other-info-item" data-testid="backflush-compartment-info">
               <p class="label">反吹仓室：</p>
               <p>{{ detailObj.bachflushCompart }}</p>
             </div>
-            <div class="other-info-item">
+            <div class="other-info-item" data-testid="leakage-compartment-info">
               <p class="label">泄露仓室：</p>
               <p>{{ detailObj.leakageCompart }}</p>
             </div>
-            <div class="other-info-item">
+            <div class="other-info-item" data-testid="fault-compartment-info">
               <p class="label">故障仓室：</p>
               <p>{{ detailObj.faultCompart }}</p>
             </div>
           </div>
         </div>
-        <div class="warn-info">
-          <warnCom title="闭环" :listInfo="closedLoopInfoList" @jumpPage="toCircleDetail"></warnCom>
+        <div class="warn-info" data-testid="dust-monitoring-closed-loops">
+          <warnCom
+            title="闭环"
+            :listInfo="closedLoopInfoList"
+            @jumpPage="toCircleDetail"
+          ></warnCom>
         </div>
       </div>
     </div>
@@ -667,6 +700,9 @@ const stopRealTimeMonitoring = () => {
 const dustBox = ref(null);
 // 获取鼠标所有事件
 const getAllMouseEvent = () => {
+  if (!dustBox.value) {
+    return;
+  }
   dustBox.value.addEventListener("mousemove", cancelRefreshEvent)
   dustBox.value.addEventListener("mousedown", cancelRefreshEvent)
 }

src/views/dustOverview/components/addDustCollectorDialog.vue

 <template>
   <el-dialog :model-value="modelValue" :title="editData ? '编辑除尘器' : '新增除尘器'" width="500px" :close-on-click-modal="false"
-    :close-on-press-escape="false" @update:model-value="cancel">
-    <div class="add-dust-form all-select-btn">
-      <div class="form-item">
-        <div class="selector-wrap">
+    :close-on-press-escape="false" @update:model-value="cancel" data-testid="add-dust-collector-dialog">
+    <div class="add-dust-form all-select-btn" data-testid="add-dust-form">
+      <div class="form-item" data-testid="dust-type-selector">
+        <div class="selector-wrap" data-testid="selector-wrap">
           <el-select v-model="formData.dustType" placeholder="除尘器选择" style="width: 238px" filterable remote
-            :remote-method="handleSearch" :loading="loading">
+            :remote-method="handleSearch" :loading="loading" data-testid="dust-type-select">
             <el-option v-for="item in dustTypeOptions" :key="item.deviceNo" :label="item.deviceName"
-              :value="item.deviceNo" />
+              :value="item.deviceNo" :data-testid="`dust-type-option-${item.deviceNo}`" />
           </el-select>
-          <el-button type="deafault" size="default" class="search-btn-balck-theme" @click="selectDustType">选择</el-button>
+          <el-button type="deafault" size="default" class="search-btn-balck-theme" @click="selectDustType" data-testid="select-dust-type-button">选择</el-button>
         </div>
       </div>
 
-      <div class="form-content">
-        <el-form ref="formRef" :model="formData" label-width="120px" :rules="rules">
-          <el-form-item label="除尘器名称" prop="name">
-            <el-input v-model="formData.name" placeholder="请输入" />
+      <div class="form-content" data-testid="form-content">
+        <el-form ref="formRef" :model="formData" label-width="120px" :rules="rules" data-testid="dust-collector-form">
+          <el-form-item label="除尘器名称" prop="name" data-testid="dust-name-form-item">
+            <el-input v-model="formData.name" placeholder="请输入" data-testid="dust-name-input" />
           </el-form-item>
 
-          <el-form-item label="除尘器编号" prop="code">
-            <el-input v-model="formData.code" placeholder="请输入" />
+          <el-form-item label="除尘器编号" prop="code" data-testid="dust-code-form-item">
+            <el-input v-model="formData.code" placeholder="请输入" data-testid="dust-code-input" />
           </el-form-item>
 
-          <el-form-item label="所属工序" prop="process">
-            <el-select v-model="formData.process" placeholder="工序选择">
+          <el-form-item label="所属工序" prop="process" data-testid="process-form-item">
+            <el-select v-model="formData.process" placeholder="工序选择" data-testid="process-select">
               <el-option v-for="item in processOptions" :key="item.productionLineId" :label="item.productionLineName"
-                :value="item.productionLineId" />
+                :value="item.productionLineId" :data-testid="`process-option-${item.productionLineId}`" />
             </el-select>
           </el-form-item>
 
-          <el-form-item label="仓室数量" prop="chamberCount">
-            <el-input v-model.number="formData.chamberCount" placeholder="请输入" />
+          <el-form-item label="仓室数量" prop="chamberCount" data-testid="chamber-count-form-item">
+            <el-input v-model.number="formData.chamberCount" placeholder="请输入" data-testid="chamber-count-input" />
           </el-form-item>
 
-          <el-form-item label="电磁阀数量" prop="valveCount">
-            <el-input v-model.number="formData.valveCount" placeholder="请输入" />
+          <el-form-item label="电磁阀数量" prop="valveCount" data-testid="valve-count-form-item">
+            <el-input v-model.number="formData.valveCount" placeholder="请输入" data-testid="valve-count-input" />
           </el-form-item>
 
-          <el-form-item label="合理压差范围" required>
-            <div class="range-input">
-              <el-form-item prop="pressureMin" class="coordinate-item">
-                <el-input v-model.number="formData.pressureMin" placeholder="请输入" />
+          <el-form-item label="合理压差范围" required data-testid="pressure-range-form-item">
+            <div class="range-input" data-testid="pressure-range-input">
+              <el-form-item prop="pressureMin" class="coordinate-item" data-testid="pressure-min-form-item">
+                <el-input v-model.number="formData.pressureMin" placeholder="请输入" data-testid="pressure-min-input" />
               </el-form-item>
-              <span class="separator">～</span>
-              <el-form-item prop="pressureMax" class="coordinate-item">
-                <el-input v-model.number="formData.pressureMax" placeholder="请输入" />
+              <span class="separator" data-testid="pressure-separator">～</span>
+              <el-form-item prop="pressureMax" class="coordinate-item" data-testid="pressure-max-form-item">
+                <el-input v-model.number="formData.pressureMax" placeholder="请输入" data-testid="pressure-max-input" />
               </el-form-item>
             </div>
           </el-form-item>
 
-          <el-form-item label="服务器IP" prop="serverIp" required>
-            <el-input v-model="formData.serverIp" placeholder="请输入" />
+          <el-form-item label="服务器IP" prop="serverIp" required data-testid="server-ip-form-item">
+            <el-input v-model="formData.serverIp" placeholder="请输入" data-testid="server-ip-input" />
           </el-form-item>
 
-          <el-form-item label="二维图坐标" required>
-            <div class="coordinate-inputs">
-              <el-form-item prop="coordinateX" class="coordinate-item">
-                <el-input v-model.number="formData.coordinateX" placeholder="X坐标">
+          <el-form-item label="二维图坐标" required data-testid="coordinate-form-item">
+            <div class="coordinate-inputs" data-testid="coordinate-inputs">
+              <el-form-item prop="coordinateX" class="coordinate-item" data-testid="coordinate-x-form-item">
+                <el-input v-model.number="formData.coordinateX" placeholder="X坐标" data-testid="coordinate-x-input">
                   <template #prefix>X:</template>
                 </el-input>
               </el-form-item>
-              <el-form-item prop="coordinateY" class="coordinate-item">
-                <el-input v-model.number="formData.coordinateY" placeholder="Y坐标">
+              <el-form-item prop="coordinateY" class="coordinate-item" data-testid="coordinate-y-form-item">
+                <el-input v-model.number="formData.coordinateY" placeholder="Y坐标" data-testid="coordinate-y-input">
                   <template #prefix>Y:</template>
                 </el-input>
               </el-form-item>
@@ -71,10 +71,10 @@
         </el-form>
       </div>
 
-      <div class="form-footer">
+      <div class="form-footer" data-testid="form-footer">
 
-        <el-button @click="cancel" class="cancel-btn-balck-theme">取消</el-button>
-        <el-button type="default" class="search-btn-balck-theme" @click="submitForm">确认</el-button>
+        <el-button @click="cancel" class="cancel-btn-balck-theme" data-testid="cancel-button">取消</el-button>
+        <el-button type="default" class="search-btn-balck-theme" @click="submitForm" data-testid="confirm-button">确认</el-button>
       </div>
     </div>
   </el-dialog>

src/views/dustOverview/components/roomSettingDialog.vue

@@ -7,30 +7,33 @@
     :close-on-press-escape="false"
     @update:model-value="$emit('update:modelValue', $event)"
     @open="initializeState"
+    data-testid="room-setting-dialog"
   >
-    <el-form :model="roomForm" label-width="120px">
-      <el-form-item label="仓室数量：">
+    <el-form :model="roomForm" label-width="120px" data-testid="room-form">
+      <el-form-item label="仓室数量：" data-testid="total-rooms-form-item">
         <el-input
           v-model="roomForm.totalRooms"
           controls-position="right"
           style="width: 150px"
           disabled
+          data-testid="total-rooms-input"
         />
       </el-form-item>
-      <el-form-item label="仓室分几排：">
+      <el-form-item label="仓室分几排：" data-testid="rows-form-item">
         <el-input-number
           v-model="roomForm.rows"
           :min="0"
           :max="20"
           controls-position="right"
           @change="handleRowsChange"
+          data-testid="rows-input-number"
         />
       </el-form-item>
     </el-form>
 
     <!-- 分布表格 -->
-    <div class="distribution-table">
-      <div class="table-title">
+    <div class="distribution-table" data-testid="distribution-table">
+      <div class="table-title" data-testid="table-title">
         仓室数量分布
         <div
           v-if="distributionDiff > 0"
@@ -38,6 +41,7 @@
             'distribution-warning',
             distributionDiff > 0 ? 'warning-less' : 'warning-less',
           ]"
+          data-testid="distribution-warning"
         >
           当前仓室总数{{ distributionDiff > 0 ? "大于" : "小于" }}默认仓室数量
           {{ Math.abs(distributionDiff) }} 个，请修改。
@@ -49,13 +53,14 @@
         size="small"
         border
         :resizable="false"
+        data-testid="distribution-data-table"
       >
-        <el-table-column prop="compartPositionRow" label="排" width="180">
+        <el-table-column prop="compartPositionRow" label="排" width="180" data-testid="row-column">
           <template #default="{ row }">
-            <span>第{{ row.compartPositionRow }}排</span>
+            <span data-testid="row-label">第{{ row.compartPositionRow }}排</span>
           </template>
         </el-table-column>
-        <el-table-column prop="compartPositionColumnNum" label="仓数量">
+        <el-table-column prop="compartPositionColumnNum" label="仓数量" data-testid="count-column">
           <template #default="{ row }">
             <el-input-number
               v-model="row.compartPositionColumnNum"
@@ -64,6 +69,7 @@
               controls-position="right"
               size="small"
               @change="handleDistributionChange"
+              :data-testid="`room-count-input-${row.compartPositionRow}`"
             />
           </template>
         </el-table-column>
@@ -71,13 +77,14 @@
     </div>
 
     <template #footer>
-      <span class="dialog-footer all-select-btn">
-        <el-button @click="$emit('update:modelValue', false)" class="cancel-btn-balck-theme">取消</el-button>
+      <span class="dialog-footer all-select-btn" data-testid="dialog-footer">
+        <el-button @click="$emit('update:modelValue', false)" class="cancel-btn-balck-theme" data-testid="cancel-button">取消</el-button>
         <el-button
           type="default"
           class="search-btn-balck-theme"
           @click="handleConfirm"
           :disabled="distributionDiff > 0"
+          data-testid="confirm-button"
         >
           确认
         </el-button>

src/views/dustOverview/components/valveSettingDialog.vue

@@ -6,32 +6,34 @@
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     @update:model-value="cancel"
+    data-testid="valve-setting-dialog"
   >
-    <div class="valve-setting all-select-btn">
-      <div class="setting-row">
-        <div class="input-group">
-          <span>电磁阀总数量：</span>
-          <el-input v-model="valveForm.total" style="width: 120px" disabled />
+    <div class="valve-setting all-select-btn" data-testid="valve-setting-container">
+      <div class="setting-row" data-testid="valve-setting-controls">
+        <div class="input-group" data-testid="total-valves-input-group">
+          <span data-testid="total-valves-label">电磁阀总数量：</span>
+          <el-input v-model="valveForm.total" style="width: 120px" disabled data-testid="total-valves-input" />
         </div>
-        <el-button type="default" class="search-btn-balck-theme" @click="handleAverageDistribute"
+        <el-button type="default" class="search-btn-balck-theme" @click="handleAverageDistribute" data-testid="average-distribute-button"
           >平均分布生成</el-button
         >
       </div>
-      <div class="table-title">仓室脉冲阀数量分布</div>
-      <div class="setting-row">
-        <div class="input-group">
-          <span>仓室编号：</span>
-          <el-select v-model="valveForm.frontCompartNo" style="width: 120px" @change="handleRoomChange">
+      <div class="table-title" data-testid="valve-table-title">仓室脉冲阀数量分布</div>
+      <div class="setting-row" data-testid="setting-row-controls">
+        <div class="input-group" data-testid="compartment-number-select">
+          <span data-testid="compartment-number-label">仓室编号：</span>
+          <el-select v-model="valveForm.frontCompartNo" style="width: 120px" @change="handleRoomChange" data-testid="compartment-select">
             <el-option
               v-for="cell in statusData"
               :key="cell.frontCompartNo"
               :label="`${cell.frontCompartNo}仓`"
               :value="cell.frontCompartNo"
+              :data-testid="`compartment-option-${cell.frontCompartNo}`"
             />
           </el-select>
         </div>
-        <div class="input-group">
-          <span>电磁阀分布数量：</span>
+        <div class="input-group" data-testid="valve-distribution-input">
+          <span data-testid="valve-distribution-label">电磁阀分布数量：</span>
           <el-input-number
             v-model="valveForm.valveNum"
             :min="0"
@@ -39,23 +41,25 @@
             style="width: 120px"
             @change="handleValveNumChange"
             :class="{ 'is-error': errorMessage }"
+            data-testid="valve-distribution-number-input"
           />
         </div>
-        <div class="input-group">
-          <span>布袋数量：</span>
+        <div class="input-group" data-testid="bag-quantity-input">
+          <span data-testid="bag-quantity-label">布袋数量：</span>
           <el-input-number
             v-model="valveForm.bagNum"
             :min="0"
             controls-position="right"
             style="width: 120px"
             @change="handleBagNumChange"
+            data-testid="bag-quantity-number-input"
           />
         </div>
       </div>
       
       <!-- 错误提示 -->
-      <div v-if="errorMessage" class="error-message">
-        <i class="el-icon-warning"></i>
+      <div v-if="errorMessage" class="error-message" data-testid="error-message">
+        <i class="el-icon-warning" data-testid="error-icon"></i>
         {{ errorMessage }}
       </div>
       
@@ -65,38 +69,40 @@
           class="save-btn" 
           @click="handleSave"
           :disabled="!!errorMessage || valveForm.valveNum === null || valveForm.bagNum === null"
+          data-testid="set-button"
         >设置</el-button>
       </div> -->
     </div>
 
     <!-- 分布表格 -->
-    <div class="bagNum-table">
-      <div class="table-title">
+    <div class="bagNum-table" data-testid="valve-distribution-table">
+      <div class="table-title" data-testid="distribution-table-title">
         仓室脉冲阀数量分布
-        <span class="valve-valveNum-info">
+        <span class="valve-valveNum-info" data-testid="valve-count-info">
           (当前分配: {{ currentTotalValves }}/{{ valveForm.total }})
         </span>
       </div>
-      <div class="valve-bagNum-grid">
-        <div class="valve-row">
+      <div class="valve-bagNum-grid" data-testid="valve-grid">
+        <div class="valve-row" data-testid="valve-row">
           <div
             v-for="(cell, colIndex) in statusData"
             :key="colIndex"
             class="valve-cell"
             :class="{ 'active-cell': cell.frontCompartNo === valveForm.frontCompartNo }"
             @click="valveForm.frontCompartNo = cell.frontCompartNo; handleRoomChange(cell.frontCompartNo)"
+            :data-testid="`valve-cell-${cell.frontCompartNo}`"
           >
-            <div class="cell-index">{{ cell.frontCompartNo }}仓</div>
-            <div class="cell-value">{{ cell.valveNum }} <span>({{ cell.bagNum }})</span></div>
+            <div class="cell-index" data-testid="cell-index">{{ cell.frontCompartNo }}仓</div>
+            <div class="cell-value" data-testid="cell-value">{{ cell.valveNum }} <span data-testid="cell-bag-count">({{ cell.bagNum }})</span></div>
           </div>
         </div>
       </div>
     </div>
 
     <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="cancel" class="cancel-btn-balck-theme">取消</el-button>
-        <el-button type="default" class="search-btn-balck-theme" @click="handleConfirm" :disabled="!!errorMessage">
+      <span class="dialog-footer" data-testid="valve-dialog-footer">
+        <el-button @click="cancel" class="cancel-btn-balck-theme" data-testid="cancel-button">取消</el-button>
+        <el-button type="default" class="search-btn-balck-theme" @click="handleConfirm" :disabled="!!errorMessage" data-testid="save-button">
           保存
         </el-button>
       </span>

src/views/dustOverview/index.vue

 <template>
-  <div class="page-container dust-container all-select-btn">
-    <div class="header">
-      <div class="item-box crusor-click" @click="handleDusterLeakNumClick">
+  <div class="page-container dust-container all-select-btn" data-testid="dust-overview-container">
+    <div class="header" data-testid="dust-overview-header">
+      <div class="item-box crusor-click" @click="handleDusterLeakNumClick" data-testid="dust-leak-alert-card">
         <img src="@/assets/icons/warn.png" alt="dust" />
         <div class="title">
           <span>泄漏告警(条)</span>
@@ -9,7 +9,7 @@
         </div>
       </div>
 
-      <div class="item-box">
+      <div class="item-box" data-testid="dust-health-card">
         <img src="@/assets/icons/health.png" alt="dust" />
         <div class="title">
           <span>综合健康度</span>
@@ -17,7 +17,7 @@
         </div>
       </div>
 
-      <div class="item-box crusor-click" @click="handleCloseLoopNumClick">
+      <div class="item-box crusor-click" @click="handleCloseLoopNumClick" data-testid="dust-close-loop-card">
         <img src="@/assets/icons/close.png" alt="dust" />
         <div class="title">
           <span>闭环(条)</span>
@@ -26,8 +26,8 @@
       </div>
     </div>
 
-    <div class="content-box">
-      <div class="search">
+    <div class="content-box" data-testid="dust-overview-content">
+      <div class="search" data-testid="dust-search-form">
         <el-form :inline="true" :model="formInline" class="demo-form-inline">
           <el-form-item label="工序">
             <el-select
@@ -36,13 +36,15 @@
               style="width: 180px"
               filterable
               :filter-method="filterProductionLine"
+              data-testid="dust-production-line-select"
             >
-              <el-option key="all" label="全部" value="all" />
+              <el-option key="all" label="全部" value="all" data-testid="production-line-option-all" />
               <el-option
                 v-for="item in productionLineFiltered"
                 :key="item.productionLineId"
                 :label="item.productionLineName"
                 :value="item.productionLineId"
+                :data-testid="`production-line-option-${item.productionLineId}`"
               />
             </el-select>
           </el-form-item>
@@ -52,26 +54,28 @@
               placeholder="请输入除尘器名称"
               style="width: 240px"
               clearable
+              data-testid="dust-device-name-input"
             />
           </el-form-item>
 
           <el-form-item>
-            <el-button type="default" class="reset-btn-balck-theme" @click="refreshData"
+            <el-button type="default" class="reset-btn-balck-theme" @click="refreshData" data-testid="dust-reset-button"
               >重置</el-button
             >
-            <el-button type="default" class="search-btn-balck-theme" @click="onSubmit"
+            <el-button type="default" class="search-btn-balck-theme" @click="onSubmit" data-testid="dust-search-button"
               >查询</el-button
             >
             <el-button
               type="default"
               class="export-btn-balck-theme"
               @click="handleAddDustCollector"
+              data-testid="dust-add-button"
               >新增</el-button
             >
           </el-form-item>
         </el-form>
       </div>
-      <div class="table-box">
+      <div class="table-box" data-testid="dust-table-container">
         <common-table
           :data="tableData"
           :columns="tableColumns"
@@ -85,17 +89,18 @@
             next: '后一页',
             jumper: '跳至',
           }"
+          data-testid="common-table"
         >
           <template #index="{ $index }">
             {{ getIndex($index) }}
           </template>
           <template #compartNum="{ row }">
-            <span class="health-score" @click="handleHealthScoreClick(row)">{{
+            <span class="health-score" @click="handleHealthScoreClick(row)" data-testid="compartment-count-link">{{
               row.compartNum
             }}</span>
           </template>
           <template #valveNum="{ row }">
-            <span class="health-score" @click="handleValveNumClick(row)">{{
+            <span class="health-score" @click="handleValveNumClick(row)" data-testid="valve-count-link">{{
               row.valveNum
             }}</span>
           </template>
@@ -133,8 +138,8 @@
           </template>
 
           <template #operation="{ row }">
-            <span class="view-btn" @click="handleView(row)">详情</span>
-            <span class="edit-btn" @click="handleEdit(row)">编辑</span>
+            <span class="view-btn" @click="handleView(row)" data-testid="dust-view-button">详情</span>
+            <span class="edit-btn" @click="handleEdit(row)" data-testid="dust-edit-button">编辑</span>
           </template>
         </common-table>
       </div>

src/views/equipmentManagement/components/paramsSetings.vue

 <template>
-  <div class="container el-self-container all-select-btn" v-if="dialogVisible">
-    <div class="close-box" @click="cancelFun">
+  <div class="container el-self-container all-select-btn" v-if="dialogVisible" data-testid="params-settings-container">
+    <div class="close-box" @click="cancelFun" data-testid="close-button">
       <el-icon size="25"><Close /></el-icon>
     </div>
     <h1 class="title">sensor设置信息</h1>
 
-    <div class="content-box">
-      <div class="grid-container">
+    <div class="content-box" data-testid="content-box">
+      <div class="grid-container" data-testid="grid-container">
         <!-- 左侧参数设置 -->
-        <div class="setting-group">
+        <div class="setting-group" data-testid="left-settings">
           <div
             class="setting-row"
             v-for="item in leftInfoEnum"
@@ -22,29 +22,33 @@
                 style="margin-right: 10px"
                 v-if="item.type2 === 'checkbox'"
                 v-model="infoObj[item.propKey2]"
+                :data-testid="`left-checkbox-${item.propKey2}`"
               ></el-checkbox>
               {{ item.label }}
             </span>
             <el-input
               v-if="item.type === 'input'"
               v-model="infoObj[item.propKey]"
+              :data-testid="`left-input-${item.propKey}`"
             ></el-input>
             <el-select
               v-model="infoObj[item.propKey]"
               v-if="item.type === 'select'"
+              :data-testid="`left-select-${item.propKey}`"
             >
               <el-option
                 v-for="option in item.options"
                 :key="option.code"
                 :label="option.name"
                 :value="option.code"
+                :data-testid="`left-select-option-${option.code}`"
               ></el-option>
             </el-select>
           </div>
         </div>
 
         <!-- 右侧参数设置 -->
-        <div class="setting-group">
+        <div class="setting-group" data-testid="right-settings">
           <div
             class="setting-row"
             v-for="item in rightInfoEnum"
@@ -54,24 +58,25 @@
             <el-input
               v-if="item.type === 'input'"
               v-model="infoObj[item.propKey]"
+              :data-testid="`right-input-${item.propKey}`"
             ></el-input>
           </div>
         </div>
       </div>
 
       <!-- 复选框区域 -->
-      <div class="checkbox-group">
+      <div class="checkbox-group" data-testid="checkbox-group-1">
         <label class="custom-checkbox">
-          <input type="checkbox" v-model="infoObj.onlineBackblow" /> 在线反吹
+          <input type="checkbox" v-model="infoObj.onlineBackblow" data-testid="online-backblow-checkbox" /> 在线反吹
         </label>
         <label class="custom-checkbox">
-          <input type="checkbox" v-model="infoObj.fastBlow" /> 快/慢
+          <input type="checkbox" v-model="infoObj.fastBlow" data-testid="fast-blow-checkbox" /> 快/慢
         </label>
         <label class="custom-checkbox">
-          <input type="checkbox" v-model="infoObj.d01Alarm" /> DO1报警
+          <input type="checkbox" v-model="infoObj.d01Alarm" data-testid="d01-alarm-checkbox" /> DO1报警
         </label>
         <label class="custom-checkbox">
-          <input type="checkbox" v-model="infoObj.d13Alarm" /> DI3有效
+          <input type="checkbox" v-model="infoObj.d13Alarm" data-testid="d13-alarm-checkbox" /> DI3有效
         </label>
       </div>
 
@@ -81,59 +86,62 @@
         type="textarea"
         :rows="4"
         v-model="infoObj.compartSort"
+        data-testid="compart-sort-textarea"
       ></el-input>
 
       <!-- 复选框区域 -->
-      <div class="checkbox-group mgr10">
+      <div class="checkbox-group mgr10" data-testid="checkbox-group-2">
         <label class="custom-checkbox">
-          <input type="checkbox" v-model="infoObj.diInput" /> DI接入Y/N
+          <input type="checkbox" v-model="infoObj.diInput" data-testid="di-input-checkbox" /> DI接入Y/N
         </label>
         <label class="custom-checkbox">
-          <input type="checkbox" v-model="infoObj.showEarlyWarn" /> 显示预警
+          <input type="checkbox" v-model="infoObj.showEarlyWarn" data-testid="show-early-warn-checkbox" /> 显示预警
         </label>
-        <div class="setting-row">
+        <div class="setting-row" data-testid="device-relation-setting">
           <span class="device-label">关联设备</span>
-          <el-select v-model="infoObj.relateDevicesNum" placeholder="请选择">
+          <el-select v-model="infoObj.relateDevicesNum" placeholder="请选择" data-testid="relate-devices-select">
             <el-option
               v-for="(item, index) in 21"
               :key="item"
               :value="index"
               :label="index"
+              :data-testid="`relate-device-option-${index}`"
             ></el-option>
           </el-select>
         </div>
       </div>
 
       <!-- 复选框区域 -->
-      <div class="checkbox-group mgr10">
-        <div class="select-input">
+      <div class="checkbox-group mgr10" data-testid="checkbox-group-3">
+        <div class="select-input" data-testid="valve-device-setting">
           <label class="custom-checkbox">
             <input
               type="checkbox"
               checked
               v-model="infoObj.hasLiftValveCommunicationIp"
+              data-testid="has-lift-valve-checkbox"
             />
             脉冲阀设备Y/N 通信IP
           </label>
-          <div style="margin-left: 10px">
-            <el-input v-model="infoObj.liftValveCommunicationIp"></el-input>
+          <div style="margin-left: 10px" data-testid="ip-input-container">
+            <el-input v-model="infoObj.liftValveCommunicationIp" data-testid="lift-valve-ip-input"></el-input>
           </div>
         </div>
-        <div>
+        <div data-testid="pulse-blow-setting">
           <label class="custom-checkbox">
-            <input type="checkbox" v-model="infoObj.indoorPulseBlow"/> 室内脉冲轮流喷吹
+            <input type="checkbox" v-model="infoObj.indoorPulseBlow" data-testid="indoor-pulse-blow-checkbox"/> 室内脉冲轮流喷吹
           </label>
         </div>
       </div>
     </div>
 
     <!-- 操作按钮 -->
-    <div class="button-group">
-      <button class="btn search-btn-balck-theme" @click="confirmFun">确认</button>
-      <button class="btn cancel-btn-balck-theme" @click="cancelFun">取消</button>
+    <div class="button-group" data-testid="button-group">
+      <button class="btn search-btn-balck-theme" @click="confirmFun" data-testid="confirm-button">确认</button>
+      <button class="btn cancel-btn-balck-theme" @click="cancelFun" data-testid="cancel-button">取消</button>
     </div>
   </div>
-  <div class="mask" v-if="dialogVisible" @click="cancelFun"></div>
+  <div class="mask" v-if="dialogVisible" @click="cancelFun" data-testid="dialog-mask"></div>
 </template>
 <script setup>
 import { ref, reactive, computed, defineEmits, onMounted, watch } from "vue";

src/views/equipmentManagement/index.vue

 <template>
-  <div class="equipment-management black-theme all-select-btn">
-    <div class="search">
+  <div class="equipment-management black-theme all-select-btn" data-testid="equipment-management-container">
+    <div class="search" data-testid="equipment-management-search-form">
       <el-form :inline="true" :model="formInline" class="demo-form-inline">
         <el-form-item label="工序">
           <el-select
             v-model="formInline.productionLineId"
             placeholder="请选择工序"
             style="width: 120px"
+            data-testid="equipment-production-line-select"
           >
             <el-option
               v-for="item in processOptions"
               :key="item.productionLineId"
               :label="item.productionLineName"
               :value="item.productionLineId"
+              :data-testid="`equipment-production-line-option-${item.productionLineId}`"
             />
           </el-select>
         </el-form-item>
@@ -22,6 +24,7 @@
             placeholder="请输入除尘器名称"
             style="width: 240px"
             clearable
+            data-testid="equipment-duster-name-input"
           />
         </el-form-item>
         <el-form-item label="设备名称">
@@ -30,6 +33,7 @@
             placeholder="请输入设备名称"
             style="width: 240px"
             clearable
+            data-testid="equipment-device-name-input"
           />
         </el-form-item>
         <el-form-item label="设备类型">
@@ -37,24 +41,27 @@
             v-model="formInline.deviceTypeId"
             placeholder="请选择设备类型"
             style="width: 120px"
+            data-testid="equipment-device-type-select"
           >
             <el-option
               v-for="item in deviceTypeEnum"
               :key="item.deviceTypeId"
               :label="item.deviceType"
               :value="item.deviceTypeId"
+              :data-testid="`equipment-device-type-option-${item.deviceTypeId}`"
             />
           </el-select>
         </el-form-item>
 
         <el-form-item>
-          <el-button type="default" class="reset-btn-balck-theme" @click="onReset"
+          <el-button type="default" class="reset-btn-balck-theme" @click="onReset" data-testid="equipment-reset-button"
             >重置</el-button
           >
           <el-button
             type="default"
             class="search-btn-balck-theme margin-right-10"
             @click="onQuery"
+            data-testid="equipment-search-button"
             >查询</el-button
           >
           <el-upload
@@ -70,20 +77,20 @@
               token: getToken('TOKEN'),
             }"
           >
-            <el-button type="default" class="export-btn-balck-theme margin-right-10"
+            <el-button type="default" class="export-btn-balck-theme margin-right-10" data-testid="equipment-import-button"
               >导入</el-button
             >
           </el-upload>
-          <el-button type="default" class="export-btn-balck-theme" @click="onExportFile"
+          <el-button type="default" class="export-btn-balck-theme" @click="onExportFile" data-testid="equipment-export-button"
             >导出</el-button
           >
-          <el-button type="default" class="export-btn-balck-theme" @click="onDownloadTemplate"
+          <el-button type="default" class="export-btn-balck-theme" @click="onDownloadTemplate" data-testid="equipment-template-button"
             >模板下载</el-button
           >
         </el-form-item>
       </el-form>
     </div>
-    <div class="table-box">
+    <div class="table-box" data-testid="equipment-table-container">
       <common-table
         :data="tableData"
         :columns="tableColumns"
@@ -98,13 +105,14 @@
           next: '后一页',
           jumper: '跳至',
         }"
+        data-testid="equipment-common-table"
       >
         <template #index="{ $index }">
           {{ getIndex($index) }}
         </template>
 
         <template #operation="{ row }">
-          <el-button class="green-color" text @click="getParamsConfig(row)" v-if="[10001, 10002].includes(row.deviceTypeId)"> 参数设置 </el-button>
+          <el-button class="green-color" text @click="getParamsConfig(row)" v-if="[10001, 10002].includes(row.deviceTypeId)" data-testid="equipment-params-button"> 参数设置 </el-button>
         </template>
       </common-table>
     </div>

src/views/equipmentManagement/suspendManagement/suspendManagement.vue

 <template>
-  <div class="page-container collectorList all-select-btn">
-    <div class="content-box">
-      <div class="search">
-        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+  <div class="page-container collectorList all-select-btn" data-testid="suspend-management-container">
+    <div class="content-box" data-testid="content-box">
+      <div class="search" data-testid="search-area">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline" data-testid="search-form">
           <el-form-item label="项目名称">
-            <el-select v-model="formInline.projectId" style="width: 200px">
+            <el-select v-model="formInline.projectId" style="width: 200px" data-testid="project-select">
               <el-option
                 v-for="i in nameList.list"
                 :key="i"
                 :label="`${i.name}`"
                 :value="i.id"
+                :data-testid="`project-option-${i.id}`"
               />
             </el-select>
           </el-form-item>
           <el-form-item label="设备类型">
-            <el-select v-model="formInline.deviceType" style="width: 200px">
+            <el-select v-model="formInline.deviceType" style="width: 200px" data-testid="device-type-select">
               <el-option
                 v-for="i in typeList.list"
                 :key="i"
                 :label="`${i.desc}`"
                 :value="i.code"
+                :data-testid="`device-type-option-${i.code}`"
               />
             </el-select>
           </el-form-item>
           <el-form-item label="原因分类">
-            <el-select v-model="formInline.reasonCategory" style="width: 200px">
+            <el-select v-model="formInline.reasonCategory" style="width: 200px" data-testid="reason-category-select">
               <el-option
                 v-for="i in reasonList.list"
                 :key="i"
                 :label="`${i.value}`"
                 :value="i.key"
+                :data-testid="`reason-category-option-${i.key}`"
               />
             </el-select>
           </el-form-item>
 
           <el-form-item>
-            <el-button type="default" class="reset-btn-balck-theme" @click="onReset"
+            <el-button type="default" class="reset-btn-balck-theme" @click="onReset" data-testid="reset-button"
               >重置</el-button
             >
-            <el-button type="default"  class="search-btn-balck-theme" @click="onSubmit"
+            <el-button type="default"  class="search-btn-balck-theme" @click="onSubmit" data-testid="search-button"
               >查询</el-button
             >
           </el-form-item>
         </el-form>
       </div>
-      <div class="table-box">
+      <div class="table-box" data-testid="table-container">
         <common-table
           ref="pageRef"
           :data="tableData.list"
@@ -59,12 +62,13 @@
             next: '后一页',
             jumper: '跳至',
           }"
+          data-testid="suspend-management-table"
         >
           <template #index="{ $index }">
             {{ getIndex($index) }}
           </template>
           <template #operate="{ row }">
-            <span class="health-score green-color" @click="linkTo(row)">挂起期间告警</span>
+            <span class="health-score green-color" @click="linkTo(row)" data-testid="suspend-alarm-link">挂起期间告警</span>
           </template>
           <!-- <template #operation="{ row }">
             <span class="view-btn" @click="handleView(row)">详情</span>

src/views/login/index.vue

@@ -32,6 +32,7 @@
             name="username"
             type="text"
             tabindex="1"
+            data-testid="login-username-input"
             @blur="handleAccountBlur($event)"
             @input="debounceAction"
             autocomplete="off"
@@ -52,6 +53,7 @@
               show-password
               placeholder="密码 / Password"
               tabindex="1"
+              data-testid="login-password-input"
               autocomplete="off"
             />
           </el-form-item>
@@ -70,12 +72,14 @@
                 name="captcha"
                 type="text"
                 tabindex="1"
+                data-testid="login-captcha-input"
                 autocomplete="on"
               />
             </div>
             <img
               class="captcha-img"
               :src="verifyCode"
+              data-testid="login-captcha-image"
               @click="fetchVerifyCli"
             />
           </div>
@@ -86,12 +90,14 @@
         v-model="loginOldForm.rememberMe"
         label="记住密码"
         size="large"
+        data-testid="login-remember-checkbox"
       />
 
       <el-button
         :loading="oldloading"
         type="primary"
         class="login-btn"
+        data-testid="login-submit-button"
         @click.prevent="handleLoginNew"
         @keyup.enter="handleLoginNew"
         >登录</el-button