change(dms): 修改DMS 模块的 API调用和界面展示

- 更新 API 调用方式,统一使用 xxxList 方法替代 xxxIn 方法
- 优化界面展示,包括停机时间格式化、设备类型下拉框等
-调整表格列显示、统计信息展示等内容
master
zangchenhao 3 weeks ago
parent c8f7196572
commit 4bc6a063dd

@ -8,7 +8,7 @@ import { ProdBaseMachineInfoVO, ProdBaseMachineInfoForm, ProdBaseMachineInfoQuer
* @returns {*}
*/
export const listDmsBaseMachineInfoIn = (query?: ProdBaseMachineInfoQuery): AxiosPromise<ProdBaseMachineInfoVO[]> => {
export const listDmsBaseMachineInfo = (query?: ProdBaseMachineInfoQuery): AxiosPromise<ProdBaseMachineInfoVO[]> => {
return request({
url: '/dms/dmsBaseMachineInfo/list',
method: 'get',

@ -129,8 +129,8 @@
<script setup name='AlarmType' lang='ts'>
import { listAlarmType, getAlarmType, delAlarmType, addAlarmType, updateAlarmType } from '@/api/dms/alarmType';
import { AlarmTypeVO, AlarmTypeQuery, AlarmTypeForm } from '@/api/dms/alarmType/types';
import { getBaseDeviceCategoryListInDMS } from '@/api/dms/baseDeviceCategory';
import { getBaseDeviceTypeListInDMS } from '@/api/dms/baseDeviceType';
import { getBaseDeviceCategoryList } from '@/api/dms/baseDeviceCategory';
import { getBaseDeviceTypeList } from '@/api/dms/baseDeviceType';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { dms_level_status } = toRefs<any>(proxy?.useDict('dms_level_status'));
@ -155,14 +155,14 @@ const dialog = reactive<DialogOption>({
/** 获取设备大类下拉框 */
const deviceCategoryList = ref([]);
const getBaseDeviceCategoryListSelect = async () => {
let res = await getBaseDeviceCategoryListInDMS(null);
let res = await getBaseDeviceCategoryList(null);
deviceCategoryList.value = res.data;
};
/** 获取设备类型下拉框 */
const deviceTypeList = ref([]);
const getBaseDeviceTypeListSelect = async () => {
let res = await getBaseDeviceTypeListInDMS(null);
let res = await getBaseDeviceTypeList(null);
deviceTypeList.value = res.data;
};

@ -134,7 +134,7 @@
<script setup name="DmsBaseInspectRoute" lang="ts">
import { listDmsBaseInspectRoute, getDmsBaseInspectRoute, delDmsBaseInspectRoute, addDmsBaseInspectRoute, updateDmsBaseInspectRoute } from '@/api/dms/dmsBaseInspectRoute';
import { DmsBaseInspectRouteVO, DmsBaseInspectRouteQuery, DmsBaseInspectRouteForm } from '@/api/dms/dmsBaseInspectRoute/types';
import {getBaseDeviceTypeListInDMS} from "@/api/dms/baseDeviceType";
import {getBaseDeviceTypeList} from "@/api/dms/baseDeviceType";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { inspect_type } = toRefs<any>(proxy?.useDict('inspect_type'));
@ -304,7 +304,7 @@ const handleExport = () => {
let deviceTypeOptions = ref([])
const getDeviceTypeOptions = async () => {
const res = await getBaseDeviceTypeListInDMS(null);
const res = await getBaseDeviceTypeList(null);
deviceTypeOptions.value = res.data;
}

@ -126,7 +126,7 @@
<script setup name="DmsBaseLubeStandard" lang="ts">
import { listDmsBaseLubeStandard, getDmsBaseLubeStandard, delDmsBaseLubeStandard, addDmsBaseLubeStandard, updateDmsBaseLubeStandard } from '@/api/dms/dmsBaseLubeStandard';
import { DmsBaseLubeStandardVO, DmsBaseLubeStandardQuery, DmsBaseLubeStandardForm } from '@/api/dms/dmsBaseLubeStandard/types';
import {getBaseDeviceTypeListInDMS} from "@/api/dms/baseDeviceType";
import {getBaseDeviceTypeList} from "@/api/dms/baseDeviceType";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { active_flag } = toRefs<any>(proxy?.useDict('active_flag'));
@ -301,7 +301,7 @@ const handleExport = () => {
//
let deviceTypeOptions = ref([]);
const getBaseDeviceTypeOption = async () => {
const res = await getBaseDeviceTypeListInDMS(null);
const res = await getBaseDeviceTypeList(null);
deviceTypeOptions.value = res.data;
}

@ -136,7 +136,7 @@
import { listDmsBaseLubeStation, getDmsBaseLubeStation, delDmsBaseLubeStation, addDmsBaseLubeStation, updateDmsBaseLubeStation } from '@/api/dms/dmsBaseLubeStation';
import { DmsBaseLubeStationVO, DmsBaseLubeStationQuery, DmsBaseLubeStationForm } from '@/api/dms/dmsBaseLubeStation/types';
import {getDmsBaseLubeStandardList} from "@/api/dms/dmsBaseLubeStandard";
import {getBaseDeviceTypeListInDMS} from "@/api/dms/baseDeviceType";
import {getBaseDeviceTypeList} from "@/api/dms/baseDeviceType";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { active_flag } = toRefs<any>(proxy?.useDict('active_flag'));
@ -310,7 +310,7 @@ const handleExport = () => {
//
let deviceTypeOptions = ref([]);
const getBaseDeviceTypeOption = async () => {
const res = await getBaseDeviceTypeListInDMS(null);
const res = await getBaseDeviceTypeList(null);
deviceTypeOptions.value = res.data;
}

@ -129,7 +129,7 @@
<script setup name="DmsBaseMaintStandard" lang="ts">
import { listDmsBaseMaintStandard, getDmsBaseMaintStandard, delDmsBaseMaintStandard, addDmsBaseMaintStandard, updateDmsBaseMaintStandard } from '@/api/dms/dmsBaseMaintStandard';
import { DmsBaseMaintStandardVO, DmsBaseMaintStandardQuery, DmsBaseMaintStandardForm } from '@/api/dms/dmsBaseMaintStandard/types';
import {getBaseDeviceTypeListInDMS} from "@/api/dms/baseDeviceType";
import {getBaseDeviceTypeList} from "@/api/dms/baseDeviceType";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { active_flag } = toRefs<any>(proxy?.useDict('active_flag'));
@ -298,7 +298,7 @@ const handleExport = () => {
//
let dviceTypeOptions = ref([]);
const getDviceTypeOption = async () => {
const res = await getBaseDeviceTypeListInDMS(null);
const res = await getBaseDeviceTypeList(null);
dviceTypeOptions.value = res.data;
}

@ -149,7 +149,7 @@
import { listDmsBaseMaintStation, getDmsBaseMaintStation, delDmsBaseMaintStation, addDmsBaseMaintStation, updateDmsBaseMaintStation } from '@/api/dms/dmsBaseMaintStation';
import { DmsBaseMaintStationVO, DmsBaseMaintStationQuery, DmsBaseMaintStationForm } from '@/api/dms/dmsBaseMaintStation/types';
import {getDmsBaseMaintStandardList} from "@/api/dms/dmsBaseMaintStandard";
import {getBaseDeviceTypeListInDMS} from "@/api/dms/baseDeviceType";
import {getBaseDeviceTypeList} from "@/api/dms/baseDeviceType";
import { getDmsBaseMaintProjectList } from '@/api/dms/dmsBaseMaintProject';
@ -332,7 +332,7 @@ const getMaintStandardOtions = async () => {
//
let dviceTypeOptions = ref([]);
const getDviceTypeOption = async () => {
const res = await getBaseDeviceTypeListInDMS(null);
const res = await getBaseDeviceTypeList(null);
dviceTypeOptions.value = res.data;
}

@ -142,7 +142,7 @@
<script setup name="DmsKnowledgeLube" lang="ts">
import { listDmsKnowledgeLube, getDmsKnowledgeLube, delDmsKnowledgeLube, addDmsKnowledgeLube, updateDmsKnowledgeLube } from '@/api/dms/dmsKnowledgeLube';
import { DmsKnowledgeLubeVO, DmsKnowledgeLubeQuery, DmsKnowledgeLubeForm } from '@/api/dms/dmsKnowledgeLube/types';
import {getBaseDeviceTypeListInDMS} from "@/api/dms/baseDeviceType";
import {getBaseDeviceTypeList} from "@/api/dms/baseDeviceType";
import {getDmsBaseLubeStationList} from "@/api/dms/dmsBaseLubeStation";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@ -320,7 +320,7 @@ const handleExport = () => {
//
let deviceTypeOptions = ref([]);
const getBaseDeviceTypeOption = async () => {
const res = await getBaseDeviceTypeListInDMS(null);
const res = await getBaseDeviceTypeList(null);
deviceTypeOptions.value = res.data;
}

@ -142,7 +142,7 @@
<script setup name="DmsKnowledgeMaint" lang="ts">
import { listDmsKnowledgeMaint, getDmsKnowledgeMaint, delDmsKnowledgeMaint, addDmsKnowledgeMaint, updateDmsKnowledgeMaint } from '@/api/dms/dmsKnowledgeMaint';
import { DmsKnowledgeMaintVO, DmsKnowledgeMaintQuery, DmsKnowledgeMaintForm } from '@/api/dms/dmsKnowledgeMaint/types';
import {getBaseDeviceTypeListInDMS} from "@/api/dms/baseDeviceType";
import {getBaseDeviceTypeList} from "@/api/dms/baseDeviceType";
import {getDmsBaseMaintStationList} from "@/api/dms/dmsBaseMaintStation";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@ -320,7 +320,7 @@ const handleExport = () => {
//
let deviceTypeOptions = ref([]);
const getBaseDeviceTypeOption = async () => {
const res = await getBaseDeviceTypeListInDMS(null);
const res = await getBaseDeviceTypeList(null);
deviceTypeOptions.value = res.data;
}

@ -133,7 +133,7 @@
<script setup name="DmsKnowledgeRepair" lang="ts">
import { listDmsKnowledgeRepair, getDmsKnowledgeRepair, delDmsKnowledgeRepair, addDmsKnowledgeRepair, updateDmsKnowledgeRepair } from '@/api/dms/dmsKnowledgeRepair';
import { DmsKnowledgeRepairVO, DmsKnowledgeRepairQuery, DmsKnowledgeRepairForm } from '@/api/dms/dmsKnowledgeRepair/types';
import {getBaseDeviceTypeListInDMS} from "@/api/dms/baseDeviceType";
import {getBaseDeviceTypeList} from "@/api/dms/baseDeviceType";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { active_flag } = toRefs<any>(proxy?.useDict('active_flag'));
@ -306,7 +306,7 @@ const handleExport = () => {
//
let deviceTypeOptions = ref([]);
const getBaseDeviceTypeOption = async () => {
const res = await getBaseDeviceTypeListInDMS(null);
const res = await getBaseDeviceTypeList(null);
deviceTypeOptions.value = res.data;
}

@ -58,12 +58,12 @@
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['dms:dmsRecordShutDown:add']"></el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['dms:dmsRecordShutDown:edit']"></el-button>
</el-col>
<!-- <el-col :span="1.5">-->
<!-- <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['dms:dmsRecordShutDown:add']"></el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['dms:dmsRecordShutDown:edit']"></el-button>-->
<!-- </el-col>-->
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['dms:dmsRecordShutDown:remove']"></el-button>
</el-col>
@ -78,8 +78,8 @@
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键标识" align="center" prop="recordShutDownId" v-if="columns[0].visible"/>
<el-table-column label="设备" align="center" prop="machineName" v-if="columns[2].visible"/>
<el-table-column label="停机类型" align="center" prop="shutTypeId" v-if="columns[3].visible"/>
<el-table-column label="停机原因" align="center" prop="shutReasonId" v-if="columns[4].visible"/>
<el-table-column label="停机类型" align="center" prop="shutTypeName" v-if="columns[3].visible"/>
<el-table-column label="停机原因" align="center" prop="shutReasonName" v-if="columns[4].visible"/>
<el-table-column label="停机开始时间" align="center" prop="shutBeginTime" width="180" v-if="columns[5].visible">
<template #default="scope">
<span>{{ parseTime(scope.row.shutBeginTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
@ -90,8 +90,17 @@
<span>{{ parseTime(scope.row.shutEndTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="停机时长(毫秒)" align="center" prop="shutTime" v-if="columns[7].visible"/>
<el-table-column label="停机标识" align="center" prop="downtimeFlag" v-if="columns[8].visible"/>
<!-- <el-table-column label="停机时长(毫秒)" align="center" prop="shutTime" v-if="columns[7].visible"/>-->
<el-table-column label="停机时长" align="center" prop="shutTime" v-if="columns[7].visible">
<template #default="scope">
<span>{{ formatDuration(scope.row.shutTime) }}</span>
</template>
</el-table-column>
<el-table-column label="停机标识" align="center" prop="downtimeFlag" v-if="columns[8].visible">
<template #default="scope">
<dict-tag :options="downtime_flag" :value="scope.row.downtimeFlag"/>
</template>
</el-table-column>
<el-table-column label="停机原因" align="center" prop="shutReason" v-if="columns[9].visible"/>
<el-table-column label="激活标识" align="center" prop="activeFlag" v-if="columns[10].visible">
<template #default="scope">
@ -173,7 +182,14 @@
<el-input v-model="form.shutTime" placeholder="请输入停机时长(毫秒)" />
</el-form-item>
<el-form-item label="停机标识" prop="downtimeFlag">
<el-input v-model="form.downtimeFlag" placeholder="请输入停机标识" />
<!-- <el-input v-model="form.downtimeFlag" placeholder="请输入停机标识" />-->
<el-radio-group v-model="form.downtimeFlag">
<el-radio
v-for="dict in downtime_flag"
:key="dict.value"
:value="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="激活标识" prop="activeFlag">
<el-radio-group v-model="form.activeFlag">
@ -206,7 +222,7 @@ import {getDmsBaseShutTypeList} from "@/api/dms/dmsBaseShutType";
import {getDmsBaseShutReasonList} from "@/api/dms/dmsBaseShutReason";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { active_flag } = toRefs<any>(proxy?.useDict('active_flag'));
const { active_flag, downtime_flag } = toRefs<any>(proxy?.useDict('active_flag', 'downtime_flag'));
const dmsRecordShutDownList = ref<DmsRecordShutDownVO[]>([]);
const buttonLoading = ref(false);
@ -231,7 +247,7 @@ const columns = ref<FieldOption[]>([
{ key: 1, label: `租户编号`, visible: false },
{ key: 2, label: `设备`, visible: true },
{ key: 3, label: `停机类型`, visible: true },
{ key: 4, label: `停机原因id`, visible: false },
{ key: 4, label: `停机原因`, visible: true },
{ key: 5, label: `停机开始时间`, visible: true },
{ key: 6, label: `停机结束时间`, visible: true },
{ key: 7, label: `停机时长(毫秒)`, visible: true },
@ -260,6 +276,7 @@ const initFormData: DmsRecordShutDownForm = {
remark: undefined,
machineName: undefined,
shutTypeName: undefined,
shutReasonNameName: undefined,
}
const data = reactive<PageData<DmsRecordShutDownForm, DmsRecordShutDownQuery>>({
@ -279,6 +296,7 @@ const data = reactive<PageData<DmsRecordShutDownForm, DmsRecordShutDownQuery>>({
activeFlag: undefined,
machineName: undefined,
shutTypeName: undefined,
shutReasonNameName: undefined,
params: {
}
},
@ -413,6 +431,14 @@ const handleShutReasonChange = (shutReasonId: number) => {
form.value.shutTypeId = selectedReason?.shutTypeId || ''; //
};
const formatDuration = (millis: number): string => {
if (!millis || millis <= 0) return '0秒'
const hours = Math.floor(millis / 3600000)
const minutes = Math.floor((millis % 3600000) / 60000)
const seconds = Math.floor((millis % 60000) / 1000)
return `${hours ? hours + '小时' : ''}${minutes ? minutes + '分' : ''}${seconds}`
}
onMounted(() => {
getMachineOtions();
getShutTypeOtions();

@ -91,12 +91,12 @@
</el-button>
</el-button-group>
</div>
<div class="toolbar-right">
<el-button type="primary" @click="exportData">
<el-icon><Download /></el-icon>
导出数据
</el-button>
</div>
<!-- <div class="toolbar-right">-->
<!-- <el-button type="primary" @click="exportData">-->
<!-- <el-icon><Download /></el-icon>-->
<!-- 导出数据-->
<!-- </el-button>-->
<!-- </div>-->
</div>
<!-- 查询过滤器 -->
@ -385,15 +385,15 @@
<el-col :span="6">
<el-statistic title="计划保养次数" :value="maintenanceStats.planned" />
</el-col>
<el-col :span="6">
<el-statistic title="临时保养次数" :value="maintenanceStats.temporary" />
</el-col>
<el-col :span="6">
<el-statistic title="平均保养间隔" :value="maintenanceStats.avgInterval" suffix="天" />
</el-col>
<el-col :span="6">
<el-statistic title="下次保养时间" :value="maintenanceStats.nextDate || '未计划'" />
</el-col>
<!-- <el-col :span="6">-->
<!-- <el-statistic title="临时保养次数" :value="maintenanceStats.temporary" />-->
<!-- </el-col>-->
<!-- <el-col :span="6">-->
<!-- <el-statistic title="平均保养间隔" :value="maintenanceStats.avgInterval" suffix="天" />-->
<!-- </el-col>-->
<!-- <el-col :span="6">-->
<!-- <el-statistic title="下次保养时间" :value="maintenanceStats.nextDate || '未计划'" />-->
<!-- </el-col>-->
</el-row>
</el-card>
</el-col>
@ -408,13 +408,13 @@
<el-table-column prop="maintDate" label="保养日期" />
<el-table-column prop="maintPerson" label="保养人员" />
<el-table-column prop="maintContent" label="保养内容" show-overflow-tooltip />
<el-table-column prop="maintResult" label="保养结果">
<template #default="scope">
<el-tag :type="scope.row.maintResult === '合格' ? 'success' : 'warning'">
{{ scope.row.maintResult }}
</el-tag>
</template>
</el-table-column>
<!-- <el-table-column prop="maintResult" label="保养结果">-->
<!-- <template #default="scope">-->
<!-- <el-tag :type="scope.row.maintResult === '合格' ? 'success' : 'warning'">-->
<!-- {{ scope.row.maintResult }}-->
<!-- </el-tag>-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
</el-card>
</el-col>
@ -426,10 +426,10 @@
</div>
</template>
<script setup name="ProdBaseMachineInfo">
<script setup name="ProdBaseMachineInfo" lang="ts">
import { ref, reactive, toRefs, getCurrentInstance, onMounted, onUnmounted, shallowRef, markRaw, watch } from 'vue';
import { listDmsBaseMachineInfoIn, getDmsBaseMachineInfoList, getDmsBaseMachineInfo } from '@/api/dms/dmsBaseMachineInfo';
import { listBaseDeviceTypeInDMS, getBaseDeviceTypeListInDMS } from '@/api/dms/baseDeviceType';
import { listDmsBaseMachineInfo, getDmsBaseMachineInfoList, getDmsBaseMachineInfo } from '@/api/dms/dmsBaseMachineInfo';
import { listBaseDeviceType, getBaseDeviceTypeList } from '@/api/dms/baseDeviceType';
import { listDmsBaseDevicePurchase, getDmsBaseDevicePurchaseList } from '@/api/dms/dmsBaseDevicePurchase';
import { listDmsBaseDeviceInstall, getDmsBaseDeviceInstallList } from '@/api/dms/dmsBaseDeviceInstall';
import { listDmsBaseDeviceDebugging, getDmsBaseDeviceDebuggingList } from '@/api/dms/dmsBaseDeviceDebugging';
@ -459,8 +459,8 @@ import {
const { proxy } = getCurrentInstance();
// TODO:
const { machine_status, debug_status, fault_status, maint_level, maint_status } = toRefs(proxy.useDict(
'machine_status', 'debug_status', 'fault_status', 'maint_level', 'maint_status'
const { machine_status, debug_status, fault_status, maint_level, maint_status, handle_status, bills_status, active_flag } = toRefs(proxy.useDict(
'machine_status', 'debug_status', 'fault_status', 'maint_level', 'maint_status', 'handle_status', 'bills_status', 'active_flag'
));
// TODO:
// const { active_flag } = toRefs<any>(proxy?.useDict('active_flag'));
@ -489,7 +489,7 @@ const deviceTypes = ref([]);
//
const queryParams = ref({
pageNum: 1,
pageSize: 12,
pageSize: 10,
machineCode: undefined,
machineName: undefined,
machineLocation: undefined,
@ -618,7 +618,7 @@ const updateCurrentTime = () => {
const getList = async () => {
loading.value = true;
try {
const res = await listDmsBaseMachineInfoIn(queryParams.value);
const res = await listDmsBaseMachineInfo(queryParams.value);
machineList.value = res.rows || [];
total.value = res.total || 0;
@ -635,7 +635,7 @@ const getList = async () => {
//
const getDeviceTypes = async () => {
try {
const res = await getBaseDeviceTypeListInDMS({ pageNum: 1, pageSize: 100 });
const res = await getBaseDeviceTypeList({ pageNum: 1, pageSize: 100 });
deviceTypes.value = res.data;
} catch (error) {
console.error('获取设备类型失败:', error);
@ -1109,10 +1109,10 @@ const viewDetails = async (machine) => {
]);
};
//
const exportData = () => {
proxy.$modal.msgInfo('导出功能开发中...');
};
// //
// const exportData = () => {
// proxy.$modal.msgInfo('...');
// };
//
let timer = null;
@ -1227,14 +1227,14 @@ const loadMaintenanceStats = async (machineId) => {
//
const loadLifecycleTypes = async () => {
if (!selectedMachine.value) return;
const machineId = selectedMachine.value.machineId;
try {
// 使API
const [
purchaseRes,
installRes,
installRes,
debugRes,
maintRes,
faultRes,
@ -1249,7 +1249,7 @@ const loadLifecycleTypes = async () => {
getDmsBillsInspectInstanceList({ machineId }).catch(() => ({ data: [] })),
getBaseAlarmInfoList({ machineId }).catch(() => ({ data: [] }))
]);
//
lifecycleTypes.value.forEach(type => {
switch (type.value) {
@ -1273,7 +1273,7 @@ const loadLifecycleTypes = async () => {
break;
}
});
//
lifecycleStats.value = {
faultCount: faultRes.data?.length || 0,
@ -1302,7 +1302,7 @@ const loadLifecycleTypes = async () => {
width: 100%;
height: 60px;
z-index: 0;
svg {
width: 100%;
height: 100%;
@ -1320,7 +1320,7 @@ const loadLifecycleTypes = async () => {
border-radius: 6px;
margin-bottom: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
.panel-left {
.page-title {
font-size: 18px;
@ -1331,14 +1331,14 @@ const loadLifecycleTypes = async () => {
align-items: center;
gap: 6px;
}
.page-subtitle {
font-size: 11px;
color: #7f8c8d;
margin: 1px 0 0 0;
}
}
.panel-right {
.current-time {
display: flex;
@ -1356,7 +1356,7 @@ const loadLifecycleTypes = async () => {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 8px;
margin-bottom: 8px;
.stat-item {
position: relative;
background: #fff;
@ -1365,12 +1365,12 @@ const loadLifecycleTypes = async () => {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
overflow: hidden;
&:hover {
transform: translateY(-1px);
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
.stat-bg-effect {
position: absolute;
top: 0;
@ -1381,7 +1381,7 @@ const loadLifecycleTypes = async () => {
opacity: 0.1;
transform: translate(25px, -25px);
}
.stat-inner {
position: relative;
z-index: 2;
@ -1389,7 +1389,7 @@ const loadLifecycleTypes = async () => {
align-items: center;
gap: 10px;
}
.stat-icon-wrapper {
display: flex;
align-items: center;
@ -1399,35 +1399,35 @@ const loadLifecycleTypes = async () => {
border-radius: 6px;
color: #fff;
}
.stat-info {
flex: 1;
.stat-number {
display: flex;
align-items: baseline;
gap: 3px;
.value-animate {
font-size: 20px;
font-weight: 700;
color: #2c3e50;
}
.unit {
font-size: 11px;
color: #7f8c8d;
font-weight: 500;
}
}
.stat-title {
font-size: 12px;
color: #7f8c8d;
margin-top: 1px;
}
}
.stat-chart {
position: absolute;
bottom: 6px;
@ -1435,28 +1435,28 @@ const loadLifecycleTypes = async () => {
width: 50px;
height: 20px;
opacity: 0.3;
svg {
width: 100%;
height: 100%;
}
}
&.stat-total {
.stat-icon-wrapper { background: linear-gradient(45deg, #667eea, #764ba2); }
.stat-bg-effect { background: #667eea; }
}
&.stat-running {
.stat-icon-wrapper { background: linear-gradient(45deg, #56ab2f, #a8e6cf); }
.stat-bg-effect { background: #56ab2f; }
}
&.stat-maintenance {
.stat-icon-wrapper { background: linear-gradient(45deg, #f093fb, #f5576c); }
.stat-bg-effect { background: #f093fb; }
}
&.stat-alarm {
.stat-icon-wrapper { background: linear-gradient(45deg, #fa709a, #fee140); }
.stat-bg-effect { background: #fa709a; }
@ -1469,7 +1469,7 @@ const loadLifecycleTypes = async () => {
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
.toolbar-left, .toolbar-right {
display: flex;
gap: 6px;
@ -1478,12 +1478,12 @@ const loadLifecycleTypes = async () => {
.search-filter-card {
margin-bottom: 8px;
.filter-header {
display: flex;
justify-content: space-between;
align-items: center;
.filter-title {
display: flex;
align-items: center;
@ -1491,11 +1491,11 @@ const loadLifecycleTypes = async () => {
font-weight: 600;
}
}
:deep(.el-card__body) {
padding: 12px;
}
.el-form {
.el-form-item {
margin-bottom: 8px;
@ -1510,10 +1510,10 @@ const loadLifecycleTypes = async () => {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.machine-card-wrapper {
cursor: pointer;
.machine-card {
background: #fff;
border-radius: 4px;
@ -1521,22 +1521,22 @@ const loadLifecycleTypes = async () => {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
&:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
&.selected {
border: 2px solid #409EFF;
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}
.status-indicator {
position: absolute;
top: 6px;
right: 6px;
.status-dot {
display: inline-block;
width: 5px;
@ -1544,17 +1544,17 @@ const loadLifecycleTypes = async () => {
border-radius: 50%;
animation: pulse 2s infinite;
}
&.status-0 .status-dot { background: #f56c6c; }
&.status-1 .status-dot { background: #67c23a; }
&.status-2 .status-dot { background: #e6a23c; }
&.status-3 .status-dot { background: #909399; }
}
.machine-visual {
text-align: center;
margin-bottom: 6px;
.machine-icon-bg {
display: inline-flex;
align-items: center;
@ -1566,17 +1566,17 @@ const loadLifecycleTypes = async () => {
color: #fff;
margin-bottom: 4px;
}
.machine-number {
font-size: 11px;
font-weight: 600;
color: #2c3e50;
}
}
.machine-details {
margin-bottom: 6px;
.machine-name {
font-size: 13px;
font-weight: 600;
@ -1588,7 +1588,7 @@ const loadLifecycleTypes = async () => {
text-overflow: ellipsis;
white-space: nowrap;
}
.machine-meta {
.meta-item {
display: flex;
@ -1600,19 +1600,19 @@ const loadLifecycleTypes = async () => {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&:last-child {
margin-bottom: 0;
}
}
}
}
.quick-actions {
display: flex;
gap: 4px;
justify-content: center;
.el-button {
padding: 2px 6px;
font-size: 10px;
@ -1622,35 +1622,35 @@ const loadLifecycleTypes = async () => {
}
}
}
.list-view {
.status-cell {
display: flex;
align-items: center;
gap: 4px;
.status-badge {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
&.status-0 { background: #f56c6c; }
&.status-1 { background: #67c23a; }
&.status-2 { background: #e6a23c; }
&.status-3 { background: #909399; }
}
}
.date-text {
font-size: 12px;
color: #606266;
}
:deep(.danger-row) {
background-color: rgba(245, 108, 108, 0.05);
}
:deep(.warning-row) {
background-color: rgba(230, 162, 60, 0.05);
}
@ -1670,12 +1670,12 @@ const loadLifecycleTypes = async () => {
padding: 12px;
margin-bottom: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
.overview-header {
display: flex;
align-items: center;
gap: 10px;
.device-avatar {
display: flex;
align-items: center;
@ -1686,14 +1686,14 @@ const loadLifecycleTypes = async () => {
border-radius: 10px;
color: #fff;
}
.device-basic {
h2 {
margin: 0 0 3px 0;
font-size: 16px;
color: #2c3e50;
}
p {
margin: 0;
font-size: 12px;
@ -1701,22 +1701,22 @@ const loadLifecycleTypes = async () => {
}
}
}
.overview-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 10px;
.stat {
text-align: center;
.stat-label {
display: block;
font-size: 11px;
color: #7f8c8d;
margin-bottom: 3px;
}
.stat-value {
display: block;
font-size: 18px;
@ -1726,21 +1726,21 @@ const loadLifecycleTypes = async () => {
}
}
}
.lifecycle-type-selector {
margin-bottom: 12px;
h3 {
margin: 0 0 10px 0;
font-size: 15px;
color: #2c3e50;
}
.type-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 6px;
.type-card {
background: #fff;
border: 2px solid #e1e6f0;
@ -1750,16 +1750,16 @@ const loadLifecycleTypes = async () => {
cursor: pointer;
transition: all 0.3s ease;
position: relative;
&:hover {
border-color: #409EFF;
}
&.active {
border-color: #409EFF;
background: #f0f9ff;
}
.type-icon {
display: inline-flex;
align-items: center;
@ -1770,14 +1770,14 @@ const loadLifecycleTypes = async () => {
margin-bottom: 5px;
color: #fff;
}
.type-name {
display: block;
font-size: 11px;
color: #2c3e50;
font-weight: 500;
}
.type-count {
position: absolute;
top: -3px;
@ -1793,28 +1793,28 @@ const loadLifecycleTypes = async () => {
}
}
}
.lifecycle-timeline-container {
h3 {
margin: 0 0 10px 0;
font-size: 15px;
color: #2c3e50;
}
.timeline-wrapper {
position: relative;
.timeline-item {
position: relative;
padding-left: 35px;
padding-bottom: 16px;
&:last-child {
.timeline-line {
display: none;
}
}
.timeline-marker {
position: absolute;
left: 0;
@ -1828,47 +1828,47 @@ const loadLifecycleTypes = async () => {
color: #fff;
z-index: 2;
}
.timeline-content {
background: #fff;
border-radius: 6px;
padding: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
.event-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
h4 {
margin: 0;
font-size: 13px;
color: #2c3e50;
}
.event-time {
font-size: 11px;
color: #7f8c8d;
}
}
.event-description {
font-size: 12px;
color: #606266;
margin: 0 0 6px 0;
}
.event-tags {
margin-bottom: 6px;
.el-tag {
margin-right: 3px;
margin-bottom: 3px;
}
}
}
.timeline-line {
position: absolute;
left: 13px;
@ -1888,7 +1888,7 @@ const loadLifecycleTypes = async () => {
font-weight: 600;
color: #2c3e50;
}
.maintenance-section {
.maintenance-summary {
margin-bottom: 12px;
@ -1899,7 +1899,7 @@ const loadLifecycleTypes = async () => {
.filter-btn-primary {
background: linear-gradient(45deg, #667eea, #764ba2);
border: none;
&:hover {
background: linear-gradient(45deg, #5a6fd8, #6a4190);
}
@ -1910,12 +1910,12 @@ const loadLifecycleTypes = async () => {
transform: scale(0.95);
box-shadow: 0 0 0 0 currentColor;
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px transparent;
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 transparent;

Loading…
Cancel
Save