{Layout null;}!DOCTYPE htmlhtml langzh-cnheadmeta nameviewportcontentwidthdevice-width, initial-scale1.0charsetutf-8 /title数据采集设备状态展示/title!-- Vue --script src~/Scripts/vue.js/script!-- Element UI --script src~/Scripts/element-ui.js/scriptlink href~/Content/ElementUI/element-ui.cssrelstylesheet /!-- Axios --script src~/Scripts/Axios/axios.min.js/script!-- jQuery如果项目其他地方需要可以保留 --script src~/Scripts/jquery-3.7.0.js/scriptstyle* {box-sizing: border-box;}body {margin: 0;padding: 0;background-color: #f5f7fa;}#app {padding: 20px;}/* 页面标题 */.page-title {font-size: 24px;font-weight: bold;color: #303133;margin-bottom: 20px;}/* 查询区域 */.search-area {background-color: #ffffff;padding: 20px;margin-bottom: 20px;border-radius: 4px;}.search-item {display: inline-block;margin-right: 10px;}.search-label {display: inline-block;margin-right: 8px;font-size: 14px;color: #606266;}/* 表格区域 */.table-area {background-color: #ffffff;padding: 20px;border-radius: 4px;}/* 表头居中 */.el-table th {text-align: center;}/* 表格内容居中 */.el-table td {text-align: center;}/* 状态标签 */.status-tag {min-width: 70px;text-align: center;}/style/headbodydiv idapp!-- 页面标题 --div classpage-title数据采集设备状态展示/div!-- 查询区域 --div classsearch-area!-- 工序 --div classsearch-itemspan classsearch-label工序/spanel-selectv-modelsearchForm.processNameplaceholder请选择工序clearablestylewidth:180px;el-optionv-foritem in processOptions:keyitem.value:labelitem.label:valueitem.value/el-option/el-select/div!-- 设备名称 --div classsearch-itemspan classsearch-label设备名称/spanel-inputv-modelsearchForm.equipmentNameplaceholder请输入设备名称clearablestylewidth:220px;/el-input/div!-- 搜索按钮 --el-buttontypeprimaryiconel-icon-searchclicksearchEquipment搜索/el-button!-- 重置按钮 --el-buttoniconel-icon-refreshclickresetSearch重置/el-button/div!-- 数据表格 --div classtable-areael-table:dataequipmentListborderstripev-loadingloadingstylewidth:100%;!-- 工序名 --el-table-columnpropProcessNamelabel工序名min-width120aligncenter/el-table-column!-- 设备名 --el-table-columnpropEquipmentNamelabel设备名min-width180aligncenter/el-table-column!-- 设备编码 --el-table-columnpropEquipmentCodelabel设备编码min-width150aligncenter/el-table-column!-- 设备对应表名称 --el-table-columnpropSourceTableNamelabel设备对应表名称min-width220aligncenter/el-table-column!-- 最新数据采集时间 --el-table-columnpropLastDataTimelabel最新数据采集时间min-width200aligncentertemplate slot-scopescopespan{{ formatDate(scope.row.LastDataTime) }}/span/template/el-table-column!-- 当前设备状态 --el-table-columnlabel当前设备状态min-width130aligncentertemplate slot-scopescopeel-tagv-ifscope.row.Status 正常typesuccessclassstatus-tag正常/el-tagel-tagv-else-ifscope.row.Status 待检查typewarningclassstatus-tag待检查/el-tagel-tagv-elsetypedangerclassstatus-tag异常/el-tag/template/el-table-column/el-table!-- 没有数据 --divv-if!loading equipmentList.length 0styletext-align:center;padding:30px;color:#909399;暂无设备数据/div/div/divscriptconst vue new Vue({el: #app,data() {return {// // 页面数据// equipmentList: [],// // 查询条件// searchForm: {processName: ,equipmentName: },// // 工序下拉选项// processOptions: [{value: 电镀,label: 电镀},{value: AOI,label: AOI},{value: 沉铜,label: 沉铜},{value: 塞孔,label: 塞孔}],// // 加载状态// loading: false};},// // 页面加载完成// mounted() {this.getEquipmentList();},methods: {// // 获取设备数据// getEquipmentList() {this.loading true;axios.get(Url.Action(GetEquipmentStatus, Home)).then(response {console.log(Controller返回数据,response.data);if (response.data.success) {this.equipmentList response.data.data || [];} else {this.$message.error(response.data.message ||获取设备数据失败);}}).catch(error {console.error(获取设备数据失败,error);this.$message.error(获取设备数据失败请检查服务器或数据库连接);}).finally(() {this.loading false;});},// // 搜索设备// searchEquipment() {const processName this.searchForm.processName;const equipmentName this.searchForm.equipmentName;// 前端过滤// 当前第一版先直接在已经查询出来的数据中进行过滤let result this.equipmentList;// 工序过滤if (processName) {result result.filter(item {return item.ProcessName processName;});}// 设备名称过滤if (equipmentName) {result result.filter(item {return item.EquipmentName.toLowerCase().indexOf(equipmentName.toLowerCase()) ! -1;});}// 更新显示结果this.equipmentList result;},// // 重置搜索// resetSearch() {this.searchForm.processName ;this.searchForm.equipmentName ;// 重新从数据库获取完整数据this.getEquipmentList();},// // 格式化日期// formatDate(value) {if (!value) {return --;}// MVC 默认可能返回// /Date(1755500000000)/const match /\/Date\((\d)\)\//.exec(value);if (match) {const timestamp parseInt(match[1]);const date new Date(timestamp);return this.formatDateObject(date);}// 如果本身就是普通日期字符串const date new Date(value);if (!isNaN(date.getTime())) {return this.formatDateObject(date);}return value;},// // Date对象格式化// formatDateObject(date) {const year date.getFullYear();const month String(date.getMonth() 1).padStart(2, 0);const day String(date.getDate()).padStart(2, 0);const hour String(date.getHours()).padStart(2, 0);const minute String(date.getMinutes()).padStart(2, 0);const second String(date.getSeconds()).padStart(2, 0);return ${year}-${month}-${day} ${hour}:${minute}:${second};}}});/script/body/html