Commit 28e594c2 authored by Cai Wei's avatar Cai Wei

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

parent ba8db0cc
<template > <template >
<div class="hamburger" @click="toggleClick"> <div class="hamburger" @click="toggleClick" data-testid="hamburger-menu">
<svg <svg
:class="{'is-active':isActive}" :class="{'is-active':isActive}"
class="hamburger-icon" class="hamburger-icon"
......
<template> <template>
<div class="common-table"> <div class="common-table" data-testid="common-table">
<el-table <el-table
ref="tableRef" ref="tableRef"
:data="currentPageData" :data="currentPageData"
v-bind="$attrs" v-bind="$attrs"
:resizable="false" :resizable="false"
:height="tableHeight" :height="tableHeight"
data-testid="el-table"
> >
<template v-for="column in columns" :key="column.prop"> <template v-for="column in columns" :key="column.prop">
<el-table-column v-bind="column" :align="align"> <el-table-column v-bind="column" :align="align">
...@@ -23,7 +24,7 @@ ...@@ -23,7 +24,7 @@
</template> </template>
</el-table> </el-table>
<div class="pagination-container" v-if="showPagination"> <div class="pagination-container" v-if="showPagination" data-testid="pagination-container">
<el-pagination <el-pagination
v-model:current-page="currentPage" v-model:current-page="currentPage"
v-model:page-size="pageSize" v-model:page-size="pageSize"
...@@ -35,6 +36,7 @@ ...@@ -35,6 +36,7 @@
:total-text="paginationTexts.total || '总计'" :total-text="paginationTexts.total || '总计'"
:size-change-text="paginationTexts.sizeChange || '条/页'" :size-change-text="paginationTexts.sizeChange || '条/页'"
:jumper-text="paginationTexts.jumper || '前往'" :jumper-text="paginationTexts.jumper || '前往'"
data-testid="el-pagination"
> >
</el-pagination> </el-pagination>
</div> </div>
......
<template> <template>
<div class="layout-box"> <div class="layout-box" data-testid="layout-container">
<div class="left" :class="{ colWidth: sidebar }"> <div class="left" :class="{ colWidth: sidebar }" data-testid="layout-sidebar">
<menuCom></menuCom> <menuCom></menuCom>
</div> </div>
<div class="right" :class="{ extend: sidebar }"> <div class="right" :class="{ extend: sidebar }" data-testid="layout-main">
<div class="header"> <div class="header" data-testid="layout-header">
<hamburger <hamburger
class="hamburger-container" class="hamburger-container"
@toggleClick="toggleSideBar" @toggleClick="toggleSideBar"
:is-active="sidebar" :is-active="sidebar"
/> />
<h3>E-Core / DC-TOM 管理平台</h3> <h3>E-Core / DC-TOM 管理平台</h3>
<div class="go-tom" @click="goTom" v-if="!currentDomain.includes('screen.bmetech.com')">EcoTOM 三流合一</div> <div class="go-tom" @click="goTom" v-if="!currentDomain.includes('screen.bmetech.com')" data-testid="go-tom-button">EcoTOM 三流合一</div>
<div class="right-block"> <div class="right-block" data-testid="header-right-block">
<el-dropdown class="right-menu-item" trigger="click"> <el-dropdown class="right-menu-item" trigger="click">
<div class="user-info"> <div class="user-info" data-testid="user-info">
<svg <svg
color="red" color="red"
data-icon-name="user-circle" data-icon-name="user-circle"
...@@ -54,8 +54,8 @@ ...@@ -54,8 +54,8 @@
</el-dropdown> </el-dropdown>
</div> </div>
</div> </div>
<div class="content"> <div class="content" data-testid="layout-content">
<div class="breadcrumb-container"> <div class="breadcrumb-container" data-testid="breadcrumb-container">
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item <el-breadcrumb-item
v-for="(item, index) in breadcrumbList" v-for="(item, index) in breadcrumbList"
......
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<el-col :span="24"> <el-col :span="24">
<el-menu <el-menu
class="el-menu-vertical-demo" class="el-menu-vertical-demo"
data-testid="sidebar-menu"
@open="handleOpen" @open="handleOpen"
@close="handleClose" @close="handleClose"
:collapse="sidebar" :collapse="sidebar"
...@@ -16,6 +17,7 @@ ...@@ -16,6 +17,7 @@
:index="item.path" :index="item.path"
v-if="item.children && item.children.length > 0" v-if="item.children && item.children.length > 0"
class="submenu-box" class="submenu-box"
:data-testid="`menu-submenu-${item.path.replace('/', '')}`"
> >
<template #title> <template #title>
<!-- <el-icon><location /></el-icon> --> <!-- <el-icon><location /></el-icon> -->
...@@ -27,6 +29,7 @@ ...@@ -27,6 +29,7 @@
:key="item_son.path" :key="item_son.path"
:index="item_son.path" :index="item_son.path"
class="submenu-title-noDropdown" class="submenu-title-noDropdown"
:data-testid="`menu-item-${item_son.path.replace('/', '')}`"
> >
<span>{{getMenuTitle(item_son)}}</span> <span>{{getMenuTitle(item_son)}}</span>
</el-menu-item> </el-menu-item>
...@@ -35,6 +38,7 @@ ...@@ -35,6 +38,7 @@
v-else v-else
:index="item.path" :index="item.path"
class="submenu-box" class="submenu-box"
:data-testid="`menu-item-${item.path.replace('/', '')}`"
> >
<!-- <el-icon><setting /></el-icon> --> <!-- <el-icon><setting /></el-icon> -->
<img class="menu-icon" :src="getIcon(item.meta.icon)" alt=""> <img class="menu-icon" :src="getIcon(item.meta.icon)" alt="">
......
<template> <template>
<div class="page-container collectorList all-select-btn"> <div class="page-container collectorList all-select-btn" data-testid="about-view-container">
<div class="content-box"> <div class="content-box" data-testid="content-box">
<div class="search"> <div class="search" data-testid="search-area">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form :inline="true" :model="formInline" class="demo-form-inline" data-testid="search-form">
<el-form-item label="事件名称"> <el-form-item label="事件名称">
<el-input <el-input
v-model="formInline.eventName" v-model="formInline.eventName"
placeholder="请输入事件名称" placeholder="请输入事件名称"
style="width: 200px" style="width: 200px"
clearable clearable
data-testid="event-name-input"
/> />
</el-form-item> </el-form-item>
<el-form-item label="发生位置"> <el-form-item label="发生位置">
...@@ -17,6 +18,7 @@ ...@@ -17,6 +18,7 @@
placeholder="请输入发生位置" placeholder="请输入发生位置"
style="width: 200px" style="width: 200px"
clearable clearable
data-testid="location-input"
/> />
</el-form-item> </el-form-item>
<el-form-item label="除尘器名称"> <el-form-item label="除尘器名称">
...@@ -25,15 +27,17 @@ ...@@ -25,15 +27,17 @@
placeholder="请输入除尘器名称" placeholder="请输入除尘器名称"
style="width: 200px" style="width: 200px"
clearable clearable
data-testid="duster-name-input"
/> />
</el-form-item> </el-form-item>
<el-form-item label="设备类型"> <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 <el-option
v-for="i in typeList.list" v-for="i in typeList.list"
:key="i" :key="i"
:label="`${i.desc}`" :label="`${i.desc}`"
:value="i.code" :value="i.code"
:data-testid="`device-type-option-${i.code}`"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -46,13 +50,14 @@ ...@@ -46,13 +50,14 @@
end-placeholder="结束时间" end-placeholder="结束时间"
popper-class="date-picker-popper" popper-class="date-picker-popper"
:teleported="false" :teleported="false"
data-testid="alarm-date-picker"
/> />
</el-form-item> </el-form-item>
<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
> >
<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
> >
<el-button <el-button
...@@ -60,20 +65,21 @@ ...@@ -60,20 +65,21 @@
style="width: 140px" style="width: 140px"
class="export-btn-balck-theme" class="export-btn-balck-theme"
@click="openRound()" @click="openRound()"
data-testid="suspend-device-button"
>挂起设备</el-button >挂起设备</el-button
> >
</el-form-item> </el-form-item>
<br /> <br />
<el-form-item> <el-form-item>
<el-radio-group v-model="formInline.suspendFlag" @change="onSubmit"> <el-radio-group v-model="formInline.suspendFlag" @change="onSubmit" data-testid="suspend-flag-radio-group">
<el-radio value="1">挂起期间告警</el-radio> <el-radio value="1" data-testid="suspend-flag-radio-during">挂起期间告警</el-radio>
<el-radio value="0">非挂起期间告警</el-radio> <el-radio value="0" data-testid="suspend-flag-radio-normal">非挂起期间告警</el-radio>
<el-radio value="2">全部告警</el-radio> <el-radio value="2" data-testid="suspend-flag-radio-all">全部告警</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="table-box"> <div class="table-box" data-testid="table-container">
<common-table <common-table
ref="pageRef" ref="pageRef"
:data="tableData.list" :data="tableData.list"
...@@ -88,12 +94,13 @@ ...@@ -88,12 +94,13 @@
next: '后一页', next: '后一页',
jumper: '跳至', jumper: '跳至',
}" }"
data-testid="alarm-table"
> >
<template #index="{ $index }"> <template #index="{ $index }">
{{ getIndex($index) }} {{ getIndex($index) }}
</template> </template>
<template #operate="{ row }"> <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> </template>
</common-table> </common-table>
</div> </div>
...@@ -106,22 +113,24 @@ ...@@ -106,22 +113,24 @@
width="500px" width="500px"
:close-on-click-modal="false" :close-on-click-modal="false"
:close-on-press-escape="false" :close-on-press-escape="false"
data-testid="suspend-dialog"
> >
<div class="equd_body"> <div class="equd_body" data-testid="dialog-body">
<el-form <el-form
ref="ruleFormRef" ref="ruleFormRef"
:model="equSubmitInfo" :model="equSubmitInfo"
:rules="rules" :rules="rules"
class="equd_form" class="equd_form"
data-testid="suspend-form"
> >
<span <span
>是否要对<span class="bold">{{ clickItem.name }}</span >是否要对<span class="bold">{{ clickItem.name }}</span
>不再告警:</span >不再告警:</span
> >
<el-form-item> <el-form-item>
<el-radio-group v-model="equSubmitInfo.noAlarm" @change="onSubmit"> <el-radio-group v-model="equSubmitInfo.noAlarm" @change="onSubmit" data-testid="no-alarm-radio-group">
<el-radio value="1"></el-radio> <el-radio value="1" data-testid="no-alarm-radio-yes"></el-radio>
<el-radio value="0"></el-radio> <el-radio value="0" data-testid="no-alarm-radio-no"></el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="开始时间" prop="startTime"> <el-form-item label="开始时间" prop="startTime">
...@@ -130,6 +139,7 @@ ...@@ -130,6 +139,7 @@
type="datetime" type="datetime"
placeholder="选择开始时间" placeholder="选择开始时间"
popper-class="date-picker-popper" popper-class="date-picker-popper"
data-testid="start-time-picker"
/> />
</el-form-item> </el-form-item>
<el-form-item label="结束时间" prop="endTime"> <el-form-item label="结束时间" prop="endTime">
...@@ -138,23 +148,24 @@ ...@@ -138,23 +148,24 @@
type="datetime" type="datetime"
placeholder="选择结束时间" placeholder="选择结束时间"
popper-class="date-picker-popper" popper-class="date-picker-popper"
data-testid="end-time-picker"
/> />
</el-form-item> </el-form-item>
<el-form-item label="原因分类" prop="reasonCategory"> <el-form-item label="原因分类" prop="reasonCategory">
<el-select v-model="equSubmitInfo.reasonCategory" style="width: 220px;"> <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"></el-option> <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-select>
</el-form-item> </el-form-item>
<el-form-item label="原因描述" prop="reasonDescription" style="padding-left: 10px;"> <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-item>
</el-form> </el-form>
</div> </div>
<template #footer> <template #footer>
<span class="dialog-footer "> <span class="dialog-footer " data-testid="dialog-footer">
<el-button type="default" class="cancel-btn-balck-theme" @click="equDialog = false">取消</el-button> <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)"> <el-button type="default" class="search-btn-balck-theme" @click="equPending(ruleFormRef)" data-testid="confirm-button">
确认 确认
</el-button> </el-button>
</span> </span>
......
...@@ -4,15 +4,16 @@ ...@@ -4,15 +4,16 @@
:title="title" :title="title"
:width="width" :width="width"
@close="closeDialog" @close="closeDialog"
data-testid="custom-dialog"
> >
<div> <div data-testid="dialog-content">
<slot name="content"></slot> <slot name="content"></slot>
<slot></slot> <slot></slot>
</div> </div>
<template #footer> <template #footer>
<div class="dialog-footer all-select-btn"> <div class="dialog-footer all-select-btn" data-testid="dialog-footer">
<el-button type="default" @click="closeDialog" class="search-btn-balck-theme">关闭</el-button> <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)"> <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}} {{item.label}}
</el-button> </el-button>
</div> </div>
......
This diff is collapsed.
This diff is collapsed.
<template> <template>
<div class="page-container collectorList all-select-btn"> <div class="page-container collectorList all-select-btn" data-testid="collector-list-container">
<div class="content-box"> <div class="content-box" data-testid="collector-list-content">
<div class="search"> <div class="search" data-testid="collector-list-search-form">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="仓室"> <el-form-item label="仓室">
<el-input <el-input
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
placeholder="请输入仓室名称" placeholder="请输入仓室名称"
style="width: 180px" style="width: 180px"
clearable clearable
data-testid="collector-compart-input"
/> />
</el-form-item> </el-form-item>
<el-form-item label="除尘器名称"> <el-form-item label="除尘器名称">
...@@ -17,6 +18,7 @@ ...@@ -17,6 +18,7 @@
placeholder="请输入除尘器名称" placeholder="请输入除尘器名称"
style="width: 180px" style="width: 180px"
clearable clearable
data-testid="collector-duster-name-input"
/> />
</el-form-item> </el-form-item>
<el-form-item label="更换时间"> <el-form-item label="更换时间">
...@@ -28,13 +30,14 @@ ...@@ -28,13 +30,14 @@
end-placeholder="结束时间" end-placeholder="结束时间"
popper-class="date-picker-popper" popper-class="date-picker-popper"
:teleported="false" :teleported="false"
data-testid="collector-date-picker"
/> />
</el-form-item> </el-form-item>
<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
> >
<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
> >
<el-button <el-button
...@@ -42,12 +45,13 @@ ...@@ -42,12 +45,13 @@
style="width: 140px" style="width: 140px"
class="export-btn-balck-theme" class="export-btn-balck-theme"
@click="openDialog()" @click="openDialog()"
data-testid="collector-analysis-button"
>更换周期分析</el-button >更换周期分析</el-button
> >
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="table-box"> <div class="table-box" data-testid="collector-table-container">
<common-table <common-table
ref="pageRef" ref="pageRef"
:data="tableData.list" :data="tableData.list"
...@@ -62,12 +66,13 @@ ...@@ -62,12 +66,13 @@
next: '后一页', next: '后一页',
jumper: '跳至', jumper: '跳至',
}" }"
data-testid="collector-common-table"
> >
<template #index="{ $index }"> <template #index="{ $index }">
{{ getIndex($index) }} {{ getIndex($index) }}
</template> </template>
<template #dusterName="{ row }"> <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 row.dusterName
}}</span> }}</span>
</template> </template>
...@@ -87,23 +92,26 @@ ...@@ -87,23 +92,26 @@
width="1000px" width="1000px"
:close-on-click-modal="false" :close-on-click-modal="false"
:close-on-press-escape="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> <span>除尘器名称:</span>
<el-select <el-select
v-model="selectDustNo" v-model="selectDustNo"
@change="changeDust" @change="changeDust"
style="width: 120px" style="width: 120px"
data-testid="dust-name-select"
> >
<el-option <el-option
v-for="i in dustList.list" v-for="i in dustList.list"
:key="i" :key="i"
:label="`${i.dusterName}`" :label="`${i.dusterName}`"
:value="i.dusterNo" :value="i.dusterNo"
:data-testid="`dust-option-${i.dusterNo}`"
/> />
</el-select> </el-select>
</div> </div>
<div class="echartBox"> <div class="echartBox" data-testid="chart-container">
<chartLine :dustLineInfo="dustLineInfo.list"></chartLine> <chartLine :dustLineInfo="dustLineInfo.list"></chartLine>
</div> </div>
<!-- <template #footer> <!-- <template #footer>
......
<template> <template>
<div ref="chartRef" class="chart-line"></div> <div ref="chartRef" class="chart-line" data-testid="chart-line-container"></div>
</template> </template>
<script setup> <script setup>
......
<template> <template>
<div class="svg-box"> <div class="svg-box" data-testid="map-svg-container">
<div class="svg-main"> <div class="svg-main" data-testid="svg-main">
<img src="@/assets/map.png" alt="" /> <img src="@/assets/map.png" alt="" />
<div class="spot-box"> <div class="spot-box" data-testid="spot-box">
<div <div
v-for="(spot, index) in spots" v-for="(spot, index) in spots"
:key="index" :key="index"
...@@ -15,11 +15,12 @@ ...@@ -15,11 +15,12 @@
left: spot.x + '%', left: spot.x + '%',
top: spot.y + '%', top: spot.y + '%',
}" }"
:data-testid="`map-spot-${index}`"
> >
<div class="pulse"></div> <div class="pulse" data-testid="spot-pulse"></div>
<!-- 连接线和详情窗 --> <!-- 连接线和详情窗 -->
<transition name="line"> <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>
<transition <transition
name="detail" name="detail"
...@@ -30,10 +31,11 @@ ...@@ -30,10 +31,11 @@
<div <div
class="detail-window" class="detail-window"
v-if="activeSpot === index && showDetail" v-if="activeSpot === index && showDetail"
data-testid="detail-window"
> >
<div class="detail-title">{{ spot.name }}</div> <div class="detail-title" data-testid="detail-title">{{ spot.name }}</div>
<div class="detail-content"> <div class="detail-content" data-testid="detail-content">
<div class="detail-item"> <div class="detail-item" data-testid="detail-status-item">
<span class="label">状态:</span> <span class="label">状态:</span>
<span class="value" :class="`text-status-${spot.status}`">{{ <span class="value" :class="`text-status-${spot.status}`">{{
getStatusText(spot.status) getStatusText(spot.status)
...@@ -43,9 +45,9 @@ ...@@ -43,9 +45,9 @@
<span class="label">数值:</span> <span class="label">数值:</span>
<span class="value">{{ spot.value }}</span> <span class="value">{{ spot.value }}</span>
</div> --> </div> -->
<div class="detail-item"> <div class="detail-item" data-testid="detail-description-item">
<span class="label">描述:</span> <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-for="(item, index) in spot.description" :key="index">{{ item }}</span>
<span class="value-item" v-if="spot.description.length === 0">暂无</span> <span class="value-item" v-if="spot.description.length === 0">暂无</span>
</div> </div>
......
...@@ -3,15 +3,17 @@ ...@@ -3,15 +3,17 @@
class="message-list" class="message-list"
@mouseenter="pauseScroll" @mouseenter="pauseScroll"
@mouseleave="resumeScroll" @mouseleave="resumeScroll"
data-testid="message-list-container"
> >
<div class="message-wrapper" ref="messageWrapper"> <div class="message-wrapper" ref="messageWrapper" data-testid="message-wrapper">
<div <div
class="message-item" class="message-item"
v-for="(message, index) in extendedList" v-for="(message, index) in extendedList"
:key="index" :key="index"
:data-testid="`message-item-${index}`"
> >
<span class="time">{{ message.date }}</span> <span class="time">{{ message.date }}</span>
<div class="content"> <div class="content" data-testid="message-content">
<span class="title">{{ message.dusterName }}</span <span class="title">{{ message.dusterName }}</span
>{{ message.message }} >{{ message.message }}
</div> </div>
......
<template> <template>
<div class="dashboard-container"> <div class="dashboard-container" data-testid="dashboard-container">
<div class="header"> <div class="header" data-testid="dashboard-header">
<div class="msg-box"> <div class="msg-box" data-testid="dashboard-msg-box">
<div class="title">AI智能监测</div> <div class="title">AI智能监测</div>
<msg-item :msgList="msgList"></msg-item> <msg-item :msgList="msgList" data-testid="dashboard-msg-item"></msg-item>
</div> </div>
<div class="indicators-box"> <div class="indicators-box" data-testid="dashboard-indicators-box">
<div class="title">综合健康度</div> <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>
<div class="indicators-item">布袋健康度</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> <div>
<div class="indicators-item">脉冲阀健康度</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> <div>
<div class="indicators-item">提升阀健康度</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> </div>
<div class="line-box"> <div class="line-box" data-testid="dashboard-chart-box">
<div class="title">健康度指数</div> <div class="title">健康度指数</div>
<chart-line :chartData="chartData"></chart-line> <chart-line :chartData="chartData" data-testid="dashboard-chart-line"></chart-line>
</div> </div>
</div> </div>
<div class="map-box"> <div class="map-box" data-testid="dashboard-map-box">
<map-svg :mapList="mapList"></map-svg> <map-svg :mapList="mapList" data-testid="dashboard-map-svg"></map-svg>
</div> </div>
</div> </div>
</template> </template>
......
<template> <template>
<div class="page-container bag-monitoring-container"> <div class="page-container bag-monitoring-container" data-testid="bag-monitoring-container">
<div class="header"> <div class="header" data-testid="bag-monitoring-header">
<div class="select-container"> <div class="select-container" data-testid="device-select-container">
<span class="select-label">检测仪器</span> <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 <el-option
v-for="item in deviceList" v-for="item in deviceList"
:key="item.deviceNo" :key="item.deviceNo"
:label="item.deviceName" :label="item.deviceName"
:value="item.deviceNo" :value="item.deviceNo"
:data-testid="`device-option-${item.deviceNo}`"
></el-option> ></el-option>
</el-select> </el-select>
</div> </div>
<div class="title">BME布袋监测 - {{ dusterName }}</div> <div class="title" data-testid="monitoring-title">BME布袋监测 - {{ dusterName }}</div>
</div> </div>
<div class="chart-container"> <div class="chart-container" data-testid="chart-container">
<div class="chart-wrapper" ref="chartRef"></div> <div class="chart-wrapper" ref="chartRef" data-testid="chart-wrapper"></div>
<div class="chart-wrapper no-data" v-if="chartData.xData.length === 0"> <div class="chart-wrapper no-data" v-if="chartData.xData.length === 0" data-testid="no-data-wrapper">
<div class="no-data-text">暂无数据</div> <div class="no-data-text" data-testid="no-data-text">暂无数据</div>
</div> </div>
</div> </div>
<div class="data-panel" :class="{ collapsed: !isPanelOpen }"> <div class="data-panel" :class="{ collapsed: !isPanelOpen }" data-testid="data-panel">
<div <div
class="panel-toggle" class="panel-toggle"
:class="{ :class="{
...@@ -30,33 +31,34 @@ ...@@ -30,33 +31,34 @@
'expanded-icon': isPanelOpen, 'expanded-icon': isPanelOpen,
}" }"
@click="togglePanel" @click="togglePanel"
data-testid="panel-toggle"
> >
<el-icon v-if="isPanelOpen"><ArrowRightBold /></el-icon> <el-icon v-if="isPanelOpen"><ArrowRightBold /></el-icon>
<el-icon v-if="!isPanelOpen"><ArrowLeftBold /></el-icon> <el-icon v-if="!isPanelOpen"><ArrowLeftBold /></el-icon>
</div> </div>
<div class="data-box"> <div class="data-box" data-testid="data-box">
<div class="data-item"> <div class="data-item" data-testid="data-item-1">
<div>时间: {{ currentData.time }}</div> <div>时间: {{ currentData.time }}</div>
<div>仓室: {{ currentData.compartNo }}</div> <div>仓室: {{ currentData.compartNo }}</div>
<div>反吹: {{ currentData.blowBack }}</div> <div>反吹: {{ currentData.blowBack }}</div>
</div> </div>
<div class="data-item"> <div class="data-item" data-testid="data-item-2">
<div>DI3: {{ currentData.di3 }}</div> <div>DI3: {{ currentData.di3 }}</div>
<div>排: {{ currentData.row }}</div> <div>排: {{ currentData.row }}</div>
<div>实时值: {{ currentData.realData }}</div> <div>实时值: {{ currentData.realData }}</div>
</div> </div>
<div class="data-item"> <div class="data-item" data-testid="data-item-3">
<div>基线值: {{ currentData.baseline }}</div> <div>基线值: {{ currentData.baseline }}</div>
<div>Delay: {{ currentData.delay }}</div> <div>Delay: {{ currentData.delay }}</div>
<div>totaltime: {{ currentData.totalTime }}</div> <div>totaltime: {{ currentData.totalTime }}</div>
</div> </div>
<div class="data-item"> <div class="data-item" data-testid="data-item-4">
<div>next:{{ currentData.next }}</div> <div>next:{{ currentData.next }}</div>
<div>valve:{{ currentData.valveNo }}</div> <div>valve:{{ currentData.valveNo }}</div>
<div>DI_TIME={{ currentData.diTime }}</div> <div>DI_TIME={{ currentData.diTime }}</div>
</div> </div>
<div class="data-item"> <div class="data-item" data-testid="data-item-5">
<div>peak={{ currentData.peak }}</div> <div>peak={{ currentData.peak }}</div>
</div> </div>
</div> </div>
...@@ -66,76 +68,78 @@ ...@@ -66,76 +68,78 @@
</div> --> </div> -->
</div> </div>
<div class="time-controls"> <div class="time-controls" data-testid="time-controls">
<div class="time-desc"> <div class="time-desc" data-testid="time-desc">
<span class="icon"></span> <span class="icon"></span>
<span class="time-desc-text">当前实时信号:</span> <span class="time-desc-text">当前实时信号:</span>
<span class="time-desc-value">{{ currentData.compartNo }}仓 / {{ currentData.row }}</span> <span class="time-desc-value">{{ currentData.compartNo }}仓 / {{ currentData.row }}</span>
</div> </div>
<div> <div data-testid="navigation-controls">
<el-button @click="navigateBackward"> <el-button @click="navigateBackward" data-testid="navigate-backward-button">
<el-icon><ArrowLeftBold />向前</el-icon> <el-icon><ArrowLeftBold />向前</el-icon>
</el-button> </el-button>
<el-button @click="navigateForward"> <el-button @click="navigateForward" data-testid="navigate-forward-button">
<el-icon><ArrowRightBold />向后</el-icon> <el-icon><ArrowRightBold />向后</el-icon>
</el-button> </el-button>
<span class="time-label">间隔</span> <span class="time-label" data-testid="time-label">间隔</span>
<el-input v-model="timeInterval" class="time-input"></el-input> <el-input v-model="timeInterval" class="time-input" data-testid="time-interval-input"></el-input>
<span class="time-unit">分钟</span> <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> </div>
<div class="data-table"> <div class="data-table" data-testid="data-table">
<table> <table data-testid="monitoring-table">
<thead> <thead data-testid="table-head">
<tr> <tr data-testid="table-header-row">
<th>名称</th> <th data-testid="table-header-name">名称</th>
<th v-for="(value, index) in tableData" :key="index"> <th v-for="(value, index) in tableData" :key="index" :data-testid="`table-header-${index}`">
{{ value.compartName }} {{ value.compartName }}
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody data-testid="table-body">
<tr> <tr data-testid="peak-value-r-row">
<td>峰值{{ currentData.row }}排_R</td> <td data-testid="peak-value-r-label">峰值{{ currentData.row }}排_R</td>
<td <td
v-for="(value, index) in tableData" v-for="(value, index) in tableData"
:key="'r' + index" :key="'r' + index"
:class="{ :class="{
'online-style': value.compartNo === currentData.compartNo, 'online-style': value.compartNo === currentData.compartNo,
}" }"
:data-testid="`peak-value-r-${index}`"
> >
{{ value.peakValueR }} {{ value.peakValueR }}
</td> </td>
</tr> </tr>
<tr> <tr data-testid="peak-value-h-row">
<td>峰值_H</td> <td data-testid="peak-value-h-label">峰值_H</td>
<td v-for="(value, index) in tableData" :key="'h' + index"> <td v-for="(value, index) in tableData" :key="'h' + index" :data-testid="`peak-value-h-${index}`">
{{ value.peakValueH }} {{ value.peakValueH }}
</td> </td>
</tr> </tr>
<tr> <tr data-testid="status-row">
<td>状态</td> <td data-testid="status-label">状态</td>
<td <td
v-for="(value, index) in tableData" v-for="(value, index) in tableData"
:key="'s' + index" :key="'s' + index"
:class="{ error: value.status === 1 }" :class="{ error: value.status === 1 }"
:data-testid="`status-${index}`"
> >
{{ value.status === 1 ? "故障" : "正常" }} {{ value.status === 1 ? "故障" : "正常" }}
</td> </td>
</tr> </tr>
<tr> <tr data-testid="blow-back-row">
<td>反吹中</td> <td data-testid="blow-back-label">反吹中</td>
<td v-for="(value, index) in tableData" :key="'b' + index"> <td v-for="(value, index) in tableData" :key="'b' + index" :data-testid="`blow-back-${index}`">
{{ value.blowBack }} {{ value.blowBack }}
</td> </td>
</tr> </tr>
<tr> <tr data-testid="valley-value-row">
<td>谷值</td> <td data-testid="valley-value-label">谷值</td>
<td v-for="(value, index) in tableData" :key="'v' + index"> <td v-for="(value, index) in tableData" :key="'v' + index" :data-testid="`valley-value-${index}`">
{{ value.valleyValue}} {{ value.valleyValue}}
</td> </td>
</tr> </tr>
......
<template> <template>
<div class="gsap-number-container"> <div class="gsap-number-container" data-testid="gsap-number-container">
<div :class="['value', colorClass]" ref="numberElement">{{ isStringMode ? stringValue : displayValue }}</div> <div :class="['value', colorClass]" ref="numberElement" data-testid="number-value">{{ isStringMode ? stringValue : displayValue }}</div>
</div> </div>
</template> </template>
......
<template> <template>
<!-- 方形进度条 --> <!-- 方形进度条 -->
<div class="healthy-progress"> <div class="healthy-progress" data-testid="healthy-progress-container">
<div <div
class="h-8 rounded overflow-hidden border healthy-progress-bar" class="h-8 rounded overflow-hidden border healthy-progress-bar"
:class="borderColor" :class="borderColor"
data-testid="healthy-progress-bar"
> >
<div <div
id="square-progress-bar" 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="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" :class="diagonalPatternColor"
data-testid="square-progress-bar"
></div> ></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 class="font-semibold">健康度:</span>
<span id="square-progress-value" class="text-lg font-bold"> 45%</span> <span id="square-progress-value" class="text-lg font-bold"> 45%</span>
</div> </div>
......
<template> <template>
<div class="title layout1"> <div class="title layout1" data-testid="warn-title-container">
<span class="warn-title">{{ title }}</span> <span class="warn-title">{{ title }}</span>
<span class="jump-icon" @click="toDetail">>></span> <span class="jump-icon" @click="toDetail">>></span>
</div> </div>
<div class="content"> <div class="content" data-testid="warn-content-container">
<div class="item" v-for="item in listInfo" :key="item"> <div class="item" v-for="item in listInfo" :key="item" data-testid="warn-item">
<span class="msg-icon"></span> <span class="msg-icon"></span>
{{ item }} {{ item }}
</div> </div>
......
<template> <template>
<div class="dust-box" ref="dustBox"> <div class="dust-box" data-testid="dust-monitoring-container">
<div class="top-box"> <div class="top-box" data-testid="dust-monitoring-filters">
<el-form :model="form" label-width="auto" :inline="true" class="demo-form-inline"> <el-form
:model="form"
label-width="auto"
:inline="true"
class="demo-form-inline"
>
<el-form-item label="除尘器名称"> <el-form-item label="除尘器名称">
<el-select v-model="form.dusterNo" placeholder="请选择除尘器" style="width: 240px" filterable> <el-select
<el-option v-for="item in dusterList" :key="item.dusterNo" :label="item.dusterName" v-model="form.dusterNo"
:value="item.dusterNo"></el-option> 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-select>
</el-form-item> </el-form-item>
<el-form-item label="分析时间"> <el-form-item label="分析时间">
<el-date-picker v-model="form.dateValue" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" <el-date-picker
style="width: 450px" popper-class="date-picker-popper" @calendar-change="calendarChange" v-model="form.dateValue"
@visible-change="visibleChange" :disabled-date="disabledFn" /> 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-item>
</el-form> </el-form>
</div> </div>
<div class="layout1"> <div class="layout1" data-testid="dust-monitoring-main-content">
<div class="left-box"> <div class="left-box" data-testid="dust-monitoring-charts-section">
<div class="part1 layout3"> <div class="part1 layout3" data-testid="dust-monitoring-charts-container">
<div class="chart-box" v-for="(item, index) in chartData" :key="item"> <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"></div> <div :id="'chart' + index" class="chart-item" :data-testid="`chart-item-${index}`"></div>
</div> </div>
</div> </div>
<div class="warn-info"> <div class="warn-info" data-testid="dust-monitoring-warnings">
<warnCom title="告警" :listInfo="warnInfoList" @jumpPage="toWarnDetail"></warnCom> <warnCom
title="告警"
:listInfo="warnInfoList"
@jumpPage="toWarnDetail"
></warnCom>
</div> </div>
</div> </div>
<div class="right-box"> <div class="right-box" data-testid="dust-monitoring-info-section">
<div class="part1"> <div class="part1" data-testid="dust-monitoring-health-section">
<div class="battery"> <div class="battery" data-testid="dust-monitoring-health-indicator">
<healthyCom :progress="healthPercent"></healthyCom> <healthyCom :progress="healthPercent"></healthyCom>
</div> </div>
</div> </div>
<div class="part2"> <div class="part2" data-testid="dust-monitoring-details-section">
<div class="dust-title">{{ dusterName }}</div> <div class="dust-title" data-testid="dust-monitoring-title">{{ dusterName }}</div>
<div class="dust-info"> <div class="dust-info" data-testid="dust-monitoring-info-grid">
<div class="info-item" v-for="item in dustInfo" :key="item.label"> <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="label">{{ item.label }}</span>
<span class="value"> <span class="value">
<gsapNumber :value="item.value" :animationType="'count'" :animationInterval="10000" /> <gsapNumber :value="item.value" :animationType="'count'" :animationInterval="10000" />
...@@ -44,18 +73,18 @@ ...@@ -44,18 +73,18 @@
</div> </div>
<div></div> <div></div>
</div> </div>
<div class="indicator-box"> <div class="indicator-box" data-testid="dust-monitoring-gauges">
<div class="indicator-item" id="indicatorOne"></div> <div class="indicator-item" id="indicatorOne" data-testid="indicator-one"></div>
<div class="indicator-item" id="indicatorTwo"></div> <div class="indicator-item" id="indicatorTwo" data-testid="indicator-two"></div>
</div> </div>
<div class="position-info"> <div class="position-info" data-testid="dust-monitoring-status-matrix">
<div class="left" v-if="detailObj.compartHealthList.length > 0"> <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"> <div class="part" v-for="(list, index) in detailObj.compartHealthList" :key="index" data-testid="compartment-row">
<div class="point" :class="{ <div class="point" :class="{
'status-normal': item.healthStatus === 1, 'status-normal': item.healthStatus === 1,
'status-error': item.healthStatus === 2, 'status-error': item.healthStatus === 2,
'status-warning': item.healthStatus === 3, '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> </div>
</div> </div>
...@@ -68,23 +97,27 @@ ...@@ -68,23 +97,27 @@
</div> </div>
</div> --> </div> -->
</div> </div>
<div class="other-info"> <div class="other-info" data-testid="dust-monitoring-compartment-info">
<div class="other-info-item"> <div class="other-info-item" data-testid="backflush-compartment-info">
<p class="label">反吹仓室:</p> <p class="label">反吹仓室:</p>
<p>{{ detailObj.bachflushCompart }}</p> <p>{{ detailObj.bachflushCompart }}</p>
</div> </div>
<div class="other-info-item"> <div class="other-info-item" data-testid="leakage-compartment-info">
<p class="label">泄露仓室:</p> <p class="label">泄露仓室:</p>
<p>{{ detailObj.leakageCompart }}</p> <p>{{ detailObj.leakageCompart }}</p>
</div> </div>
<div class="other-info-item"> <div class="other-info-item" data-testid="fault-compartment-info">
<p class="label">故障仓室:</p> <p class="label">故障仓室:</p>
<p>{{ detailObj.faultCompart }}</p> <p>{{ detailObj.faultCompart }}</p>
</div> </div>
</div> </div>
</div> </div>
<div class="warn-info"> <div class="warn-info" data-testid="dust-monitoring-closed-loops">
<warnCom title="闭环" :listInfo="closedLoopInfoList" @jumpPage="toCircleDetail"></warnCom> <warnCom
title="闭环"
:listInfo="closedLoopInfoList"
@jumpPage="toCircleDetail"
></warnCom>
</div> </div>
</div> </div>
</div> </div>
...@@ -667,6 +700,9 @@ const stopRealTimeMonitoring = () => { ...@@ -667,6 +700,9 @@ const stopRealTimeMonitoring = () => {
const dustBox = ref(null); const dustBox = ref(null);
// 获取鼠标所有事件 // 获取鼠标所有事件
const getAllMouseEvent = () => { const getAllMouseEvent = () => {
if (!dustBox.value) {
return;
}
dustBox.value.addEventListener("mousemove", cancelRefreshEvent) dustBox.value.addEventListener("mousemove", cancelRefreshEvent)
dustBox.value.addEventListener("mousedown", cancelRefreshEvent) dustBox.value.addEventListener("mousedown", cancelRefreshEvent)
} }
......
<template> <template>
<el-dialog :model-value="modelValue" :title="editData ? '编辑除尘器' : '新增除尘器'" width="500px" :close-on-click-modal="false" <el-dialog :model-value="modelValue" :title="editData ? '编辑除尘器' : '新增除尘器'" width="500px" :close-on-click-modal="false"
:close-on-press-escape="false" @update:model-value="cancel"> :close-on-press-escape="false" @update:model-value="cancel" data-testid="add-dust-collector-dialog">
<div class="add-dust-form all-select-btn"> <div class="add-dust-form all-select-btn" data-testid="add-dust-form">
<div class="form-item"> <div class="form-item" data-testid="dust-type-selector">
<div class="selector-wrap"> <div class="selector-wrap" data-testid="selector-wrap">
<el-select v-model="formData.dustType" placeholder="除尘器选择" style="width: 238px" filterable remote <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" <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-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> </div>
<div class="form-content"> <div class="form-content" data-testid="form-content">
<el-form ref="formRef" :model="formData" label-width="120px" :rules="rules"> <el-form ref="formRef" :model="formData" label-width="120px" :rules="rules" data-testid="dust-collector-form">
<el-form-item label="除尘器名称" prop="name"> <el-form-item label="除尘器名称" prop="name" data-testid="dust-name-form-item">
<el-input v-model="formData.name" placeholder="请输入" /> <el-input v-model="formData.name" placeholder="请输入" data-testid="dust-name-input" />
</el-form-item> </el-form-item>
<el-form-item label="除尘器编号" prop="code"> <el-form-item label="除尘器编号" prop="code" data-testid="dust-code-form-item">
<el-input v-model="formData.code" placeholder="请输入" /> <el-input v-model="formData.code" placeholder="请输入" data-testid="dust-code-input" />
</el-form-item> </el-form-item>
<el-form-item label="所属工序" prop="process"> <el-form-item label="所属工序" prop="process" data-testid="process-form-item">
<el-select v-model="formData.process" placeholder="工序选择"> <el-select v-model="formData.process" placeholder="工序选择" data-testid="process-select">
<el-option v-for="item in processOptions" :key="item.productionLineId" :label="item.productionLineName" <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-select>
</el-form-item> </el-form-item>
<el-form-item label="仓室数量" prop="chamberCount"> <el-form-item label="仓室数量" prop="chamberCount" data-testid="chamber-count-form-item">
<el-input v-model.number="formData.chamberCount" placeholder="请输入" /> <el-input v-model.number="formData.chamberCount" placeholder="请输入" data-testid="chamber-count-input" />
</el-form-item> </el-form-item>
<el-form-item label="电磁阀数量" prop="valveCount"> <el-form-item label="电磁阀数量" prop="valveCount" data-testid="valve-count-form-item">
<el-input v-model.number="formData.valveCount" placeholder="请输入" /> <el-input v-model.number="formData.valveCount" placeholder="请输入" data-testid="valve-count-input" />
</el-form-item> </el-form-item>
<el-form-item label="合理压差范围" required> <el-form-item label="合理压差范围" required data-testid="pressure-range-form-item">
<div class="range-input"> <div class="range-input" data-testid="pressure-range-input">
<el-form-item prop="pressureMin" class="coordinate-item"> <el-form-item prop="pressureMin" class="coordinate-item" data-testid="pressure-min-form-item">
<el-input v-model.number="formData.pressureMin" placeholder="请输入" /> <el-input v-model.number="formData.pressureMin" placeholder="请输入" data-testid="pressure-min-input" />
</el-form-item> </el-form-item>
<span class="separator"></span> <span class="separator" data-testid="pressure-separator"></span>
<el-form-item prop="pressureMax" class="coordinate-item"> <el-form-item prop="pressureMax" class="coordinate-item" data-testid="pressure-max-form-item">
<el-input v-model.number="formData.pressureMax" placeholder="请输入" /> <el-input v-model.number="formData.pressureMax" placeholder="请输入" data-testid="pressure-max-input" />
</el-form-item> </el-form-item>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="服务器IP" prop="serverIp" required> <el-form-item label="服务器IP" prop="serverIp" required data-testid="server-ip-form-item">
<el-input v-model="formData.serverIp" placeholder="请输入" /> <el-input v-model="formData.serverIp" placeholder="请输入" data-testid="server-ip-input" />
</el-form-item> </el-form-item>
<el-form-item label="二维图坐标" required> <el-form-item label="二维图坐标" required data-testid="coordinate-form-item">
<div class="coordinate-inputs"> <div class="coordinate-inputs" data-testid="coordinate-inputs">
<el-form-item prop="coordinateX" class="coordinate-item"> <el-form-item prop="coordinateX" class="coordinate-item" data-testid="coordinate-x-form-item">
<el-input v-model.number="formData.coordinateX" placeholder="X坐标"> <el-input v-model.number="formData.coordinateX" placeholder="X坐标" data-testid="coordinate-x-input">
<template #prefix>X:</template> <template #prefix>X:</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="coordinateY" class="coordinate-item"> <el-form-item prop="coordinateY" class="coordinate-item" data-testid="coordinate-y-form-item">
<el-input v-model.number="formData.coordinateY" placeholder="Y坐标"> <el-input v-model.number="formData.coordinateY" placeholder="Y坐标" data-testid="coordinate-y-input">
<template #prefix>Y:</template> <template #prefix>Y:</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
...@@ -71,10 +71,10 @@ ...@@ -71,10 +71,10 @@
</el-form> </el-form>
</div> </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 @click="cancel" class="cancel-btn-balck-theme" data-testid="cancel-button">取消</el-button>
<el-button type="default" class="search-btn-balck-theme" @click="submitForm">确认</el-button> <el-button type="default" class="search-btn-balck-theme" @click="submitForm" data-testid="confirm-button">确认</el-button>
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
......
...@@ -7,30 +7,33 @@ ...@@ -7,30 +7,33 @@
:close-on-press-escape="false" :close-on-press-escape="false"
@update:model-value="$emit('update:modelValue', $event)" @update:model-value="$emit('update:modelValue', $event)"
@open="initializeState" @open="initializeState"
data-testid="room-setting-dialog"
> >
<el-form :model="roomForm" label-width="120px"> <el-form :model="roomForm" label-width="120px" data-testid="room-form">
<el-form-item label="仓室数量:"> <el-form-item label="仓室数量:" data-testid="total-rooms-form-item">
<el-input <el-input
v-model="roomForm.totalRooms" v-model="roomForm.totalRooms"
controls-position="right" controls-position="right"
style="width: 150px" style="width: 150px"
disabled disabled
data-testid="total-rooms-input"
/> />
</el-form-item> </el-form-item>
<el-form-item label="仓室分几排:"> <el-form-item label="仓室分几排:" data-testid="rows-form-item">
<el-input-number <el-input-number
v-model="roomForm.rows" v-model="roomForm.rows"
:min="0" :min="0"
:max="20" :max="20"
controls-position="right" controls-position="right"
@change="handleRowsChange" @change="handleRowsChange"
data-testid="rows-input-number"
/> />
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 分布表格 --> <!-- 分布表格 -->
<div class="distribution-table"> <div class="distribution-table" data-testid="distribution-table">
<div class="table-title"> <div class="table-title" data-testid="table-title">
仓室数量分布 仓室数量分布
<div <div
v-if="distributionDiff > 0" v-if="distributionDiff > 0"
...@@ -38,6 +41,7 @@ ...@@ -38,6 +41,7 @@
'distribution-warning', 'distribution-warning',
distributionDiff > 0 ? 'warning-less' : 'warning-less', distributionDiff > 0 ? 'warning-less' : 'warning-less',
]" ]"
data-testid="distribution-warning"
> >
当前仓室总数{{ distributionDiff > 0 ? "大于" : "小于" }}默认仓室数量 当前仓室总数{{ distributionDiff > 0 ? "大于" : "小于" }}默认仓室数量
{{ Math.abs(distributionDiff) }} 个,请修改。 {{ Math.abs(distributionDiff) }} 个,请修改。
...@@ -49,13 +53,14 @@ ...@@ -49,13 +53,14 @@
size="small" size="small"
border border
:resizable="false" :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 }"> <template #default="{ row }">
<span>{{ row.compartPositionRow }}</span> <span data-testid="row-label">{{ row.compartPositionRow }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="compartPositionColumnNum" label="仓数量"> <el-table-column prop="compartPositionColumnNum" label="仓数量" data-testid="count-column">
<template #default="{ row }"> <template #default="{ row }">
<el-input-number <el-input-number
v-model="row.compartPositionColumnNum" v-model="row.compartPositionColumnNum"
...@@ -64,6 +69,7 @@ ...@@ -64,6 +69,7 @@
controls-position="right" controls-position="right"
size="small" size="small"
@change="handleDistributionChange" @change="handleDistributionChange"
:data-testid="`room-count-input-${row.compartPositionRow}`"
/> />
</template> </template>
</el-table-column> </el-table-column>
...@@ -71,13 +77,14 @@ ...@@ -71,13 +77,14 @@
</div> </div>
<template #footer> <template #footer>
<span class="dialog-footer all-select-btn"> <span class="dialog-footer all-select-btn" data-testid="dialog-footer">
<el-button @click="$emit('update:modelValue', false)" class="cancel-btn-balck-theme">取消</el-button> <el-button @click="$emit('update:modelValue', false)" class="cancel-btn-balck-theme" data-testid="cancel-button">取消</el-button>
<el-button <el-button
type="default" type="default"
class="search-btn-balck-theme" class="search-btn-balck-theme"
@click="handleConfirm" @click="handleConfirm"
:disabled="distributionDiff > 0" :disabled="distributionDiff > 0"
data-testid="confirm-button"
> >
确认 确认
</el-button> </el-button>
......
...@@ -6,32 +6,34 @@ ...@@ -6,32 +6,34 @@
:close-on-click-modal="false" :close-on-click-modal="false"
:close-on-press-escape="false" :close-on-press-escape="false"
@update:model-value="cancel" @update:model-value="cancel"
data-testid="valve-setting-dialog"
> >
<div class="valve-setting all-select-btn"> <div class="valve-setting all-select-btn" data-testid="valve-setting-container">
<div class="setting-row"> <div class="setting-row" data-testid="valve-setting-controls">
<div class="input-group"> <div class="input-group" data-testid="total-valves-input-group">
<span>电磁阀总数量:</span> <span data-testid="total-valves-label">电磁阀总数量:</span>
<el-input v-model="valveForm.total" style="width: 120px" disabled /> <el-input v-model="valveForm.total" style="width: 120px" disabled data-testid="total-valves-input" />
</div> </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 >平均分布生成</el-button
> >
</div> </div>
<div class="table-title">仓室脉冲阀数量分布</div> <div class="table-title" data-testid="valve-table-title">仓室脉冲阀数量分布</div>
<div class="setting-row"> <div class="setting-row" data-testid="setting-row-controls">
<div class="input-group"> <div class="input-group" data-testid="compartment-number-select">
<span>仓室编号:</span> <span data-testid="compartment-number-label">仓室编号:</span>
<el-select v-model="valveForm.frontCompartNo" style="width: 120px" @change="handleRoomChange"> <el-select v-model="valveForm.frontCompartNo" style="width: 120px" @change="handleRoomChange" data-testid="compartment-select">
<el-option <el-option
v-for="cell in statusData" v-for="cell in statusData"
:key="cell.frontCompartNo" :key="cell.frontCompartNo"
:label="`${cell.frontCompartNo}仓`" :label="`${cell.frontCompartNo}仓`"
:value="cell.frontCompartNo" :value="cell.frontCompartNo"
:data-testid="`compartment-option-${cell.frontCompartNo}`"
/> />
</el-select> </el-select>
</div> </div>
<div class="input-group"> <div class="input-group" data-testid="valve-distribution-input">
<span>电磁阀分布数量:</span> <span data-testid="valve-distribution-label">电磁阀分布数量:</span>
<el-input-number <el-input-number
v-model="valveForm.valveNum" v-model="valveForm.valveNum"
:min="0" :min="0"
...@@ -39,23 +41,25 @@ ...@@ -39,23 +41,25 @@
style="width: 120px" style="width: 120px"
@change="handleValveNumChange" @change="handleValveNumChange"
:class="{ 'is-error': errorMessage }" :class="{ 'is-error': errorMessage }"
data-testid="valve-distribution-number-input"
/> />
</div> </div>
<div class="input-group"> <div class="input-group" data-testid="bag-quantity-input">
<span>布袋数量:</span> <span data-testid="bag-quantity-label">布袋数量:</span>
<el-input-number <el-input-number
v-model="valveForm.bagNum" v-model="valveForm.bagNum"
:min="0" :min="0"
controls-position="right" controls-position="right"
style="width: 120px" style="width: 120px"
@change="handleBagNumChange" @change="handleBagNumChange"
data-testid="bag-quantity-number-input"
/> />
</div> </div>
</div> </div>
<!-- 错误提示 --> <!-- 错误提示 -->
<div v-if="errorMessage" class="error-message"> <div v-if="errorMessage" class="error-message" data-testid="error-message">
<i class="el-icon-warning"></i> <i class="el-icon-warning" data-testid="error-icon"></i>
{{ errorMessage }} {{ errorMessage }}
</div> </div>
...@@ -65,38 +69,40 @@ ...@@ -65,38 +69,40 @@
class="save-btn" class="save-btn"
@click="handleSave" @click="handleSave"
:disabled="!!errorMessage || valveForm.valveNum === null || valveForm.bagNum === null" :disabled="!!errorMessage || valveForm.valveNum === null || valveForm.bagNum === null"
data-testid="set-button"
>设置</el-button> >设置</el-button>
</div> --> </div> -->
</div> </div>
<!-- 分布表格 --> <!-- 分布表格 -->
<div class="bagNum-table"> <div class="bagNum-table" data-testid="valve-distribution-table">
<div class="table-title"> <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 }}) (当前分配: {{ currentTotalValves }}/{{ valveForm.total }})
</span> </span>
</div> </div>
<div class="valve-bagNum-grid"> <div class="valve-bagNum-grid" data-testid="valve-grid">
<div class="valve-row"> <div class="valve-row" data-testid="valve-row">
<div <div
v-for="(cell, colIndex) in statusData" v-for="(cell, colIndex) in statusData"
:key="colIndex" :key="colIndex"
class="valve-cell" class="valve-cell"
:class="{ 'active-cell': cell.frontCompartNo === valveForm.frontCompartNo }" :class="{ 'active-cell': cell.frontCompartNo === valveForm.frontCompartNo }"
@click="valveForm.frontCompartNo = cell.frontCompartNo; handleRoomChange(cell.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-index" data-testid="cell-index">{{ cell.frontCompartNo }}</div>
<div class="cell-value">{{ cell.valveNum }} <span>({{ cell.bagNum }})</span></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>
</div> </div>
</div> </div>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer" data-testid="valve-dialog-footer">
<el-button @click="cancel" class="cancel-btn-balck-theme">取消</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="handleConfirm" :disabled="!!errorMessage"> <el-button type="default" class="search-btn-balck-theme" @click="handleConfirm" :disabled="!!errorMessage" data-testid="save-button">
保存 保存
</el-button> </el-button>
</span> </span>
......
<template> <template>
<div class="page-container dust-container all-select-btn"> <div class="page-container dust-container all-select-btn" data-testid="dust-overview-container">
<div class="header"> <div class="header" data-testid="dust-overview-header">
<div class="item-box crusor-click" @click="handleDusterLeakNumClick"> <div class="item-box crusor-click" @click="handleDusterLeakNumClick" data-testid="dust-leak-alert-card">
<img src="@/assets/icons/warn.png" alt="dust" /> <img src="@/assets/icons/warn.png" alt="dust" />
<div class="title"> <div class="title">
<span>泄漏告警(条)</span> <span>泄漏告警(条)</span>
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</div> </div>
</div> </div>
<div class="item-box"> <div class="item-box" data-testid="dust-health-card">
<img src="@/assets/icons/health.png" alt="dust" /> <img src="@/assets/icons/health.png" alt="dust" />
<div class="title"> <div class="title">
<span>综合健康度</span> <span>综合健康度</span>
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</div> </div>
</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" /> <img src="@/assets/icons/close.png" alt="dust" />
<div class="title"> <div class="title">
<span>闭环(条)</span> <span>闭环(条)</span>
...@@ -26,8 +26,8 @@ ...@@ -26,8 +26,8 @@
</div> </div>
</div> </div>
<div class="content-box"> <div class="content-box" data-testid="dust-overview-content">
<div class="search"> <div class="search" data-testid="dust-search-form">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="工序"> <el-form-item label="工序">
<el-select <el-select
...@@ -36,13 +36,15 @@ ...@@ -36,13 +36,15 @@
style="width: 180px" style="width: 180px"
filterable filterable
:filter-method="filterProductionLine" :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 <el-option
v-for="item in productionLineFiltered" v-for="item in productionLineFiltered"
:key="item.productionLineId" :key="item.productionLineId"
:label="item.productionLineName" :label="item.productionLineName"
:value="item.productionLineId" :value="item.productionLineId"
:data-testid="`production-line-option-${item.productionLineId}`"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -52,26 +54,28 @@ ...@@ -52,26 +54,28 @@
placeholder="请输入除尘器名称" placeholder="请输入除尘器名称"
style="width: 240px" style="width: 240px"
clearable clearable
data-testid="dust-device-name-input"
/> />
</el-form-item> </el-form-item>
<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
> >
<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
> >
<el-button <el-button
type="default" type="default"
class="export-btn-balck-theme" class="export-btn-balck-theme"
@click="handleAddDustCollector" @click="handleAddDustCollector"
data-testid="dust-add-button"
>新增</el-button >新增</el-button
> >
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="table-box"> <div class="table-box" data-testid="dust-table-container">
<common-table <common-table
:data="tableData" :data="tableData"
:columns="tableColumns" :columns="tableColumns"
...@@ -85,17 +89,18 @@ ...@@ -85,17 +89,18 @@
next: '后一页', next: '后一页',
jumper: '跳至', jumper: '跳至',
}" }"
data-testid="common-table"
> >
<template #index="{ $index }"> <template #index="{ $index }">
{{ getIndex($index) }} {{ getIndex($index) }}
</template> </template>
<template #compartNum="{ row }"> <template #compartNum="{ row }">
<span class="health-score" @click="handleHealthScoreClick(row)">{{ <span class="health-score" @click="handleHealthScoreClick(row)" data-testid="compartment-count-link">{{
row.compartNum row.compartNum
}}</span> }}</span>
</template> </template>
<template #valveNum="{ row }"> <template #valveNum="{ row }">
<span class="health-score" @click="handleValveNumClick(row)">{{ <span class="health-score" @click="handleValveNumClick(row)" data-testid="valve-count-link">{{
row.valveNum row.valveNum
}}</span> }}</span>
</template> </template>
...@@ -133,8 +138,8 @@ ...@@ -133,8 +138,8 @@
</template> </template>
<template #operation="{ row }"> <template #operation="{ row }">
<span class="view-btn" @click="handleView(row)">详情</span> <span class="view-btn" @click="handleView(row)" data-testid="dust-view-button">详情</span>
<span class="edit-btn" @click="handleEdit(row)">编辑</span> <span class="edit-btn" @click="handleEdit(row)" data-testid="dust-edit-button">编辑</span>
</template> </template>
</common-table> </common-table>
</div> </div>
......
<template> <template>
<div class="container el-self-container all-select-btn" v-if="dialogVisible"> <div class="container el-self-container all-select-btn" v-if="dialogVisible" data-testid="params-settings-container">
<div class="close-box" @click="cancelFun"> <div class="close-box" @click="cancelFun" data-testid="close-button">
<el-icon size="25"><Close /></el-icon> <el-icon size="25"><Close /></el-icon>
</div> </div>
<h1 class="title">sensor设置信息</h1> <h1 class="title">sensor设置信息</h1>
<div class="content-box"> <div class="content-box" data-testid="content-box">
<div class="grid-container"> <div class="grid-container" data-testid="grid-container">
<!-- 左侧参数设置 --> <!-- 左侧参数设置 -->
<div class="setting-group"> <div class="setting-group" data-testid="left-settings">
<div <div
class="setting-row" class="setting-row"
v-for="item in leftInfoEnum" v-for="item in leftInfoEnum"
...@@ -22,29 +22,33 @@ ...@@ -22,29 +22,33 @@
style="margin-right: 10px" style="margin-right: 10px"
v-if="item.type2 === 'checkbox'" v-if="item.type2 === 'checkbox'"
v-model="infoObj[item.propKey2]" v-model="infoObj[item.propKey2]"
:data-testid="`left-checkbox-${item.propKey2}`"
></el-checkbox> ></el-checkbox>
{{ item.label }} {{ item.label }}
</span> </span>
<el-input <el-input
v-if="item.type === 'input'" v-if="item.type === 'input'"
v-model="infoObj[item.propKey]" v-model="infoObj[item.propKey]"
:data-testid="`left-input-${item.propKey}`"
></el-input> ></el-input>
<el-select <el-select
v-model="infoObj[item.propKey]" v-model="infoObj[item.propKey]"
v-if="item.type === 'select'" v-if="item.type === 'select'"
:data-testid="`left-select-${item.propKey}`"
> >
<el-option <el-option
v-for="option in item.options" v-for="option in item.options"
:key="option.code" :key="option.code"
:label="option.name" :label="option.name"
:value="option.code" :value="option.code"
:data-testid="`left-select-option-${option.code}`"
></el-option> ></el-option>
</el-select> </el-select>
</div> </div>
</div> </div>
<!-- 右侧参数设置 --> <!-- 右侧参数设置 -->
<div class="setting-group"> <div class="setting-group" data-testid="right-settings">
<div <div
class="setting-row" class="setting-row"
v-for="item in rightInfoEnum" v-for="item in rightInfoEnum"
...@@ -54,24 +58,25 @@ ...@@ -54,24 +58,25 @@
<el-input <el-input
v-if="item.type === 'input'" v-if="item.type === 'input'"
v-model="infoObj[item.propKey]" v-model="infoObj[item.propKey]"
:data-testid="`right-input-${item.propKey}`"
></el-input> ></el-input>
</div> </div>
</div> </div>
</div> </div>
<!-- 复选框区域 --> <!-- 复选框区域 -->
<div class="checkbox-group"> <div class="checkbox-group" data-testid="checkbox-group-1">
<label class="custom-checkbox"> <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>
<label class="custom-checkbox"> <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>
<label class="custom-checkbox"> <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>
<label class="custom-checkbox"> <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> </label>
</div> </div>
...@@ -81,59 +86,62 @@ ...@@ -81,59 +86,62 @@
type="textarea" type="textarea"
:rows="4" :rows="4"
v-model="infoObj.compartSort" v-model="infoObj.compartSort"
data-testid="compart-sort-textarea"
></el-input> ></el-input>
<!-- 复选框区域 --> <!-- 复选框区域 -->
<div class="checkbox-group mgr10"> <div class="checkbox-group mgr10" data-testid="checkbox-group-2">
<label class="custom-checkbox"> <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>
<label class="custom-checkbox"> <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> </label>
<div class="setting-row"> <div class="setting-row" data-testid="device-relation-setting">
<span class="device-label">关联设备</span> <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 <el-option
v-for="(item, index) in 21" v-for="(item, index) in 21"
:key="item" :key="item"
:value="index" :value="index"
:label="index" :label="index"
:data-testid="`relate-device-option-${index}`"
></el-option> ></el-option>
</el-select> </el-select>
</div> </div>
</div> </div>
<!-- 复选框区域 --> <!-- 复选框区域 -->
<div class="checkbox-group mgr10"> <div class="checkbox-group mgr10" data-testid="checkbox-group-3">
<div class="select-input"> <div class="select-input" data-testid="valve-device-setting">
<label class="custom-checkbox"> <label class="custom-checkbox">
<input <input
type="checkbox" type="checkbox"
checked checked
v-model="infoObj.hasLiftValveCommunicationIp" v-model="infoObj.hasLiftValveCommunicationIp"
data-testid="has-lift-valve-checkbox"
/> />
脉冲阀设备Y/N 通信IP 脉冲阀设备Y/N 通信IP
</label> </label>
<div style="margin-left: 10px"> <div style="margin-left: 10px" data-testid="ip-input-container">
<el-input v-model="infoObj.liftValveCommunicationIp"></el-input> <el-input v-model="infoObj.liftValveCommunicationIp" data-testid="lift-valve-ip-input"></el-input>
</div> </div>
</div> </div>
<div> <div data-testid="pulse-blow-setting">
<label class="custom-checkbox"> <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> </label>
</div> </div>
</div> </div>
</div> </div>
<!-- 操作按钮 --> <!-- 操作按钮 -->
<div class="button-group"> <div class="button-group" data-testid="button-group">
<button class="btn search-btn-balck-theme" @click="confirmFun">确认</button> <button class="btn search-btn-balck-theme" @click="confirmFun" data-testid="confirm-button">确认</button>
<button class="btn cancel-btn-balck-theme" @click="cancelFun">取消</button> <button class="btn cancel-btn-balck-theme" @click="cancelFun" data-testid="cancel-button">取消</button>
</div> </div>
</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> </template>
<script setup> <script setup>
import { ref, reactive, computed, defineEmits, onMounted, watch } from "vue"; import { ref, reactive, computed, defineEmits, onMounted, watch } from "vue";
......
<template> <template>
<div class="equipment-management black-theme all-select-btn"> <div class="equipment-management black-theme all-select-btn" data-testid="equipment-management-container">
<div class="search"> <div class="search" data-testid="equipment-management-search-form">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="工序"> <el-form-item label="工序">
<el-select <el-select
v-model="formInline.productionLineId" v-model="formInline.productionLineId"
placeholder="请选择工序" placeholder="请选择工序"
style="width: 120px" style="width: 120px"
data-testid="equipment-production-line-select"
> >
<el-option <el-option
v-for="item in processOptions" v-for="item in processOptions"
:key="item.productionLineId" :key="item.productionLineId"
:label="item.productionLineName" :label="item.productionLineName"
:value="item.productionLineId" :value="item.productionLineId"
:data-testid="`equipment-production-line-option-${item.productionLineId}`"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -22,6 +24,7 @@ ...@@ -22,6 +24,7 @@
placeholder="请输入除尘器名称" placeholder="请输入除尘器名称"
style="width: 240px" style="width: 240px"
clearable clearable
data-testid="equipment-duster-name-input"
/> />
</el-form-item> </el-form-item>
<el-form-item label="设备名称"> <el-form-item label="设备名称">
...@@ -30,6 +33,7 @@ ...@@ -30,6 +33,7 @@
placeholder="请输入设备名称" placeholder="请输入设备名称"
style="width: 240px" style="width: 240px"
clearable clearable
data-testid="equipment-device-name-input"
/> />
</el-form-item> </el-form-item>
<el-form-item label="设备类型"> <el-form-item label="设备类型">
...@@ -37,24 +41,27 @@ ...@@ -37,24 +41,27 @@
v-model="formInline.deviceTypeId" v-model="formInline.deviceTypeId"
placeholder="请选择设备类型" placeholder="请选择设备类型"
style="width: 120px" style="width: 120px"
data-testid="equipment-device-type-select"
> >
<el-option <el-option
v-for="item in deviceTypeEnum" v-for="item in deviceTypeEnum"
:key="item.deviceTypeId" :key="item.deviceTypeId"
:label="item.deviceType" :label="item.deviceType"
:value="item.deviceTypeId" :value="item.deviceTypeId"
:data-testid="`equipment-device-type-option-${item.deviceTypeId}`"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<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
> >
<el-button <el-button
type="default" type="default"
class="search-btn-balck-theme margin-right-10" class="search-btn-balck-theme margin-right-10"
@click="onQuery" @click="onQuery"
data-testid="equipment-search-button"
>查询</el-button >查询</el-button
> >
<el-upload <el-upload
...@@ -70,20 +77,20 @@ ...@@ -70,20 +77,20 @@
token: getToken('TOKEN'), 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-button
> >
</el-upload> </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
> >
<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-button
> >
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="table-box"> <div class="table-box" data-testid="equipment-table-container">
<common-table <common-table
:data="tableData" :data="tableData"
:columns="tableColumns" :columns="tableColumns"
...@@ -98,13 +105,14 @@ ...@@ -98,13 +105,14 @@
next: '后一页', next: '后一页',
jumper: '跳至', jumper: '跳至',
}" }"
data-testid="equipment-common-table"
> >
<template #index="{ $index }"> <template #index="{ $index }">
{{ getIndex($index) }} {{ getIndex($index) }}
</template> </template>
<template #operation="{ row }"> <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> </template>
</common-table> </common-table>
</div> </div>
......
<template> <template>
<div class="page-container collectorList all-select-btn"> <div class="page-container collectorList all-select-btn" data-testid="suspend-management-container">
<div class="content-box"> <div class="content-box" data-testid="content-box">
<div class="search"> <div class="search" data-testid="search-area">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form :inline="true" :model="formInline" class="demo-form-inline" data-testid="search-form">
<el-form-item label="项目名称"> <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 <el-option
v-for="i in nameList.list" v-for="i in nameList.list"
:key="i" :key="i"
:label="`${i.name}`" :label="`${i.name}`"
:value="i.id" :value="i.id"
:data-testid="`project-option-${i.id}`"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="设备类型"> <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 <el-option
v-for="i in typeList.list" v-for="i in typeList.list"
:key="i" :key="i"
:label="`${i.desc}`" :label="`${i.desc}`"
:value="i.code" :value="i.code"
:data-testid="`device-type-option-${i.code}`"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="原因分类"> <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 <el-option
v-for="i in reasonList.list" v-for="i in reasonList.list"
:key="i" :key="i"
:label="`${i.value}`" :label="`${i.value}`"
:value="i.key" :value="i.key"
:data-testid="`reason-category-option-${i.key}`"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<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
> >
<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
> >
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="table-box"> <div class="table-box" data-testid="table-container">
<common-table <common-table
ref="pageRef" ref="pageRef"
:data="tableData.list" :data="tableData.list"
...@@ -59,12 +62,13 @@ ...@@ -59,12 +62,13 @@
next: '后一页', next: '后一页',
jumper: '跳至', jumper: '跳至',
}" }"
data-testid="suspend-management-table"
> >
<template #index="{ $index }"> <template #index="{ $index }">
{{ getIndex($index) }} {{ getIndex($index) }}
</template> </template>
<template #operate="{ row }"> <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>
<!-- <template #operation="{ row }"> <!-- <template #operation="{ row }">
<span class="view-btn" @click="handleView(row)">详情</span> <span class="view-btn" @click="handleView(row)">详情</span>
......
...@@ -32,6 +32,7 @@ ...@@ -32,6 +32,7 @@
name="username" name="username"
type="text" type="text"
tabindex="1" tabindex="1"
data-testid="login-username-input"
@blur="handleAccountBlur($event)" @blur="handleAccountBlur($event)"
@input="debounceAction" @input="debounceAction"
autocomplete="off" autocomplete="off"
...@@ -52,6 +53,7 @@ ...@@ -52,6 +53,7 @@
show-password show-password
placeholder="密码 / Password" placeholder="密码 / Password"
tabindex="1" tabindex="1"
data-testid="login-password-input"
autocomplete="off" autocomplete="off"
/> />
</el-form-item> </el-form-item>
...@@ -70,12 +72,14 @@ ...@@ -70,12 +72,14 @@
name="captcha" name="captcha"
type="text" type="text"
tabindex="1" tabindex="1"
data-testid="login-captcha-input"
autocomplete="on" autocomplete="on"
/> />
</div> </div>
<img <img
class="captcha-img" class="captcha-img"
:src="verifyCode" :src="verifyCode"
data-testid="login-captcha-image"
@click="fetchVerifyCli" @click="fetchVerifyCli"
/> />
</div> </div>
...@@ -86,12 +90,14 @@ ...@@ -86,12 +90,14 @@
v-model="loginOldForm.rememberMe" v-model="loginOldForm.rememberMe"
label="记住密码" label="记住密码"
size="large" size="large"
data-testid="login-remember-checkbox"
/> />
<el-button <el-button
:loading="oldloading" :loading="oldloading"
type="primary" type="primary"
class="login-btn" class="login-btn"
data-testid="login-submit-button"
@click.prevent="handleLoginNew" @click.prevent="handleLoginNew"
@keyup.enter="handleLoginNew" @keyup.enter="handleLoginNew"
>登录</el-button >登录</el-button
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment